communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
157 lines • 10.9 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, { useCallback } from 'react';
import { useMemo, useState, useEffect } from 'react';
import { Modal, Stack, useTheme, Text, IconButton, Dropdown, DefaultButton, PrimaryButton } from '@fluentui/react';
import { buttonsContainerClassName, buttonStyles, defaultButtonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
import { defaultSpokenLanguage } from './utils';
import { _spokenLanguageToCaptionLanguage } from '../types';
import { _preventDismissOnEvent } from "../../../acs-ui-common/src";
import { useLocale } from '../localization';
/**
* @public
* a component for setting spoken languages
*/
export const CaptionsSettingsModal = (props) => {
const { supportedSpokenLanguages, supportedCaptionLanguages, currentSpokenLanguage, currentCaptionLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onSetCaptionLanguage, onDismissCaptionsSettings, onStartCaptions, changeCaptionLanguage = false } = props;
const theme = useTheme();
const localeStrings = useLocale().strings.captionsSettingsModal;
const localSpokenLanguageStrings = useLocale().strings.spokenLanguages;
const localCaptionLanguageStrings = useLocale().strings.captionLanguages;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const spokenLanguageStrings = useMemo(() => {
return Object.assign(Object.assign({}, localSpokenLanguageStrings), props.spokenLanguageStrings);
}, [localSpokenLanguageStrings, props.spokenLanguageStrings]);
const captionLanguageStrings = useMemo(() => {
return Object.assign(Object.assign({}, localCaptionLanguageStrings), props.captionLanguageStrings);
}, [localCaptionLanguageStrings, props.captionLanguageStrings]);
const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState({
key: currentSpokenLanguage || defaultSpokenLanguage,
text: currentSpokenLanguage || defaultSpokenLanguage
});
const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState({
key: currentCaptionLanguage ||
_spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
text: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
});
useEffect(() => {
// set spoken language when start captions with a spoken language specified.
// this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {
onSetSpokenLanguage(selectedSpokenLanguage.key);
// we only need to call set spoken language once when first starting captions
setHasSetSpokenLanguage(true);
}
}, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedSpokenLanguage.key, hasSetSpokenLanguage]);
const onDismiss = useCallback(() => {
if (onDismissCaptionsSettings) {
onDismissCaptionsSettings();
}
}, [onDismissCaptionsSettings]);
const onConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
const spokenLanguageCode = selectedSpokenLanguage.key;
const captionLanguageCode = selectedCaptionLanguage.key;
if (isCaptionsFeatureActive) {
onSetSpokenLanguage(spokenLanguageCode);
if (changeCaptionLanguage) {
onSetCaptionLanguage && onSetCaptionLanguage(captionLanguageCode);
}
}
else {
yield onStartCaptions({ spokenLanguage: spokenLanguageCode });
}
onDismiss();
}), [
onDismiss,
isCaptionsFeatureActive,
onSetSpokenLanguage,
onSetCaptionLanguage,
onStartCaptions,
selectedSpokenLanguage.key,
selectedCaptionLanguage.key,
changeCaptionLanguage
]);
const spokenLanguageDropdownOptions = useMemo(() => {
return supportedSpokenLanguages.map((languageCode) => {
return {
key: languageCode,
text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode
};
});
}, [supportedSpokenLanguages, spokenLanguageStrings]);
const captionLanguageDropdownOptions = useMemo(() => {
return supportedCaptionLanguages === null || supportedCaptionLanguages === void 0 ? void 0 : supportedCaptionLanguages.map((languageCode) => {
return {
key: languageCode,
text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode
};
});
}, [supportedCaptionLanguages, captionLanguageStrings]);
const sortedSpokenLanguageDropdownOptions = useMemo(() => {
const copy = [...spokenLanguageDropdownOptions];
return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
}, [spokenLanguageDropdownOptions]);
const sortedCaptionLanguageDropdownOptions = useMemo(() => {
const copy = [...(captionLanguageDropdownOptions !== null && captionLanguageDropdownOptions !== void 0 ? captionLanguageDropdownOptions : [])];
return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
}, [captionLanguageDropdownOptions]);
const onSpokenLanguageChange = (event, option) => {
if (option) {
setSelectedSpokenLanguage(option);
}
};
const onCaptionLanguageChange = (event, option) => {
if (option) {
setSelectedCaptionLanguage(option);
}
};
const calloutProps = useMemo(() => ({
preventDismissOnEvent: _preventDismissOnEvent
}), []);
const CaptionsSettingsComponent = useCallback(() => {
const placeholderSpokenLanguage = currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : defaultSpokenLanguage;
const placeholderCaptionLanguage = currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
return (React.createElement(Stack, null,
React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: (ev, option) => onSpokenLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
changeCaptionLanguage && (React.createElement(React.Fragment, null,
React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: (ev, option) => onCaptionLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)))));
}, [
calloutProps,
currentSpokenLanguage,
currentCaptionLanguage,
sortedSpokenLanguageDropdownOptions,
sortedCaptionLanguageDropdownOptions,
selectedCaptionLanguage,
selectedSpokenLanguage,
strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText,
strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel,
strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel,
strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText,
theme,
changeCaptionLanguage
]);
const CaptionsSettingsModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
React.createElement(Text, { className: titleClassName, role: "heading", "aria-level": 1 }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
React.createElement(Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
React.createElement(DefaultButton, { onClick: onDismiss, styles: defaultButtonStyles() },
React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel))))));
};
//# sourceMappingURL=CaptionsSettingsModal.js.map