communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
88 lines • 4.13 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React from 'react';
import { useCallback } from 'react';
import { StartCaptionsButton } from "../../../../react-components/src";
import { useMemo } from 'react';
import { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';
import { useLocale } from '../localization';
import { MoreButton } from './MoreButton';
import { _preventDismissOnEvent } from "../../../../acs-ui-common/src";
import { usePropsFor } from '../CallComposite/hooks/usePropsFor';
/**
*
* @private
*/
export const CaptionsBannerMoreButton = (props) => {
const localeStrings = useLocale();
const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);
const moreButtonStrings = useMemo(() => ({
label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,
tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip
}), [localeStrings]);
const moreButtonContextualMenuItems = [];
const startCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
yield startCaptionsButtonProps.onStartCaptions({
spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
});
}), [startCaptionsButtonProps]);
const stopCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
yield startCaptionsButtonProps.onStopCaptions();
}), [startCaptionsButtonProps]);
moreButtonContextualMenuItems.push({
key: 'ToggleCaptionsKey',
text: startCaptionsButtonProps.checked
? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
: localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
onClick: () => {
if (startCaptionsButtonProps.checked) {
stopCaptions();
}
else if (startCaptionsButtonProps.currentSpokenLanguage !== '') {
startCaptions();
}
else if (props.onCaptionsSettingsClick) {
props.onCaptionsSettingsClick();
}
},
iconProps: {
iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
styles: { root: { lineHeight: 0 } }
},
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
}
});
if (props.onCaptionsSettingsClick) {
moreButtonContextualMenuItems.push({
key: 'openCaptionsSettingsKey',
id: 'common-call-composite-captions-settings-button',
text: localeStrings.strings.call.captionsSettingsLabel,
onClick: props.onCaptionsSettingsClick,
iconProps: {
iconName: 'CaptionsSettingsIcon',
styles: { root: { lineHeight: 0 } }
},
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
disabled: !startCaptionsButtonProps.checked
});
}
return (React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
items: moreButtonContextualMenuItems,
calloutProps: {
preventDismissOnEvent: _preventDismissOnEvent
}
} })));
};
//# sourceMappingURL=CaptionsBannerMoreButton.js.map