@azure/communication-react 1.7.1-alpha-202308240011 → 1.7.1-alpha-202308260012

package/dist/dist-cjs/communication-react/index.js

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.1-alpha-202308240011';
+var telemetryVersion = '1.7.1-alpha-202308260012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -431,7 +431,7 @@ const getCaptions = (state, props) => {
 };
 /* @conditional-compile-remove(close-captions) */
 /** @private */
-const getCaptionsStatus = (state, props) => {
+const getCaptionsStatus$1 = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.isCaptionsFeatureActive;
 };
@@ -455,6 +455,12 @@ const getCurrentSpokenLanguage = (state, props) => {
 };
 /* @conditional-compile-remove(close-captions) */
 /** @private */
+const getSupportedCaptionLanguages = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.supportedCaptionLanguages;
+};
+/* @conditional-compile-remove(close-captions) */
+/** @private */
 const getSupportedSpokenLanguages = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.supportedSpokenLanguages;
@@ -1191,21 +1197,29 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
  *
  * @internal
  */
-const _startCaptionsButtonSelector = reselect__namespace.createSelector([getCaptionsStatus, getCurrentCaptionLanguage, getCurrentSpokenLanguage], (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {
+const _startCaptionsButtonSelector = reselect__namespace.createSelector([getCaptionsStatus$1, getCurrentCaptionLanguage, getCurrentSpokenLanguage], (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {
     return {
         checked: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false,
-        currentCaptionLanguage: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : 'en-us',
+        currentCaptionLanguage: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : '',
         currentSpokenLanguage: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : 'en-us'
     };
 });
 /* @conditional-compile-remove(close-captions) */
 /**
- * Selector for {@link ChangeSpokenLanguageButton} component.
+ * Selector for Changing caption language and spoken language
  *
  * @internal
  */
-const _changeSpokenLanguageSelector = reselect__namespace.createSelector([getSupportedSpokenLanguages, getCurrentSpokenLanguage, getCaptionsStatus], (supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive) => {
+const _captionSettingsSelector = reselect__namespace.createSelector([
+    getSupportedCaptionLanguages,
+    getCurrentCaptionLanguage,
+    getSupportedSpokenLanguages,
+    getCurrentSpokenLanguage,
+    getCaptionsStatus$1
+], (supportedCaptionLanguages, currentCaptionLanguage, supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive) => {
     return {
+        supportedCaptionLanguages: supportedCaptionLanguages !== null && supportedCaptionLanguages !== void 0 ? supportedCaptionLanguages : [],
+        currentCaptionLanguage: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : '',
         supportedSpokenLanguages: supportedSpokenLanguages !== null && supportedSpokenLanguages !== void 0 ? supportedSpokenLanguages : ['en-us'],
         currentSpokenLanguage: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : 'en-us',
         isCaptionsFeatureActive: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false
@@ -1217,7 +1231,7 @@ const _changeSpokenLanguageSelector = reselect__namespace.createSelector([getSup
  *
  * @internal
  */
-const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus, getStartCaptionsInProgress], (captions, isCaptionsFeatureActive, startCaptionsInProgress) => {
+const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus$1, getStartCaptionsInProgress], (captions, isCaptionsFeatureActive, startCaptionsInProgress) => {
     // Following Teams app logic, no matter how many 'Partial' captions come,
     // we only pick first one according to start time, and all the other partial captions will be filtered out
     // This will give customers a stable captions experience when others talking over the dominant speaker
@@ -2346,7 +2360,12 @@ class CallContext$2 {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                this.processNewCaption(call.captionsFeature.captions, convertFromSDKToCaptionInfoState(caption));
+                const currentCaptionLanguage = call.captionsFeature.currentCaptionLanguage;
+                if (caption.captionLanguage.toUpperCase() === currentCaptionLanguage.toUpperCase() ||
+                    currentCaptionLanguage === '' ||
+                    currentCaptionLanguage === undefined) {
+                    this.processNewCaption(call.captionsFeature.captions, convertFromSDKToCaptionInfoState(caption));
+                }
             }
         });
     }
@@ -2504,10 +2523,14 @@ class CaptionsSubscriber {
         this.subscribe = () => {
             this._captions.on('CaptionsActiveChanged', this.isCaptionsActiveChanged);
             this._captions.on('CaptionsReceived', this.onCaptionsReceived);
+            this._captions.on('CaptionLanguageChanged', this.isCaptionLanguageChanged);
+            this._captions.on('SpokenLanguageChanged', this.isSpokenLanguageChanged);
         };
         this.unsubscribe = () => {
             this._captions.off('CaptionsActiveChanged', this.isCaptionsActiveChanged);
             this._captions.off('CaptionsReceived', this.onCaptionsReceived);
+            this._captions.off('CaptionLanguageChanged', this.isCaptionLanguageChanged);
+            this._captions.off('SpokenLanguageChanged', this.isSpokenLanguageChanged);
         };
         this.onCaptionsReceived = (caption) => {
             this._context.addCaption(this._callIdRef.callId, caption);
@@ -2515,6 +2538,12 @@ class CaptionsSubscriber {
         this.isCaptionsActiveChanged = () => {
             this._context.setIsCaptionActive(this._callIdRef.callId, this._captions.isCaptionsFeatureActive);
         };
+        this.isCaptionLanguageChanged = () => {
+            this._context.setSelectedCaptionLanguage(this._callIdRef.callId, this._captions.activeCaptionLanguage);
+        };
+        this.isSpokenLanguageChanged = () => {
+            this._context.setSelectedSpokenLanguage(this._callIdRef.callId, this._captions.activeSpokenLanguage);
+        };
         this._callIdRef = callIdRef;
         this._context = context;
         this._captions = captions;
@@ -6245,6 +6274,8 @@ const DEFAULT_COMPONENT_ICONS = {
     CaptionsSettingsIcon: React__default['default'].createElement(reactIcons.Settings20Regular, null),
     /* @conditional-compile-remove(close-captions) */
     ChangeSpokenLanguageIcon: React__default['default'].createElement(reactIcons.PersonVoice20Regular, null),
+    /* @conditional-compile-remove(close-captions) */
+    ChangeCaptionLanguageIcon: React__default['default'].createElement(reactIcons.Translate20Regular, null),
     ContextMenuCameraIcon: React__default['default'].createElement(reactIcons.Video20Regular, null),
     ContextMenuMicIcon: React__default['default'].createElement(reactIcons.Mic20Regular, null),
     ContextMenuSpeakerIcon: React__default['default'].createElement(reactIcons.Speaker220Regular, null)
@@ -8666,6 +8697,7 @@ const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(image-gallery) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
@@ -8675,7 +8707,7 @@ const ImageGallery = (props) => {
     const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const localeStrings = useLocale$1().strings.imageGallery;
     const [isImageLoaded, setIsImageLoaded] = React.useState(true);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme, isDarkTheme);
@@ -8691,11 +8723,11 @@ const ImageGallery = (props) => {
                 React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme, isDarkTheme)), "aria-label": image.title }, image.title)),
             React__default['default'].createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle) },
                 React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme, isDarkTheme)), 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    /* @conditional-compile-remove(image-gallery) */
                     text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), onRenderIcon: () => React__default['default'].createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
                 React__default['default'].createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme)), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
                 React__default['default'].createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme, isDarkTheme)), onClick: onDismiss, 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    /* @conditional-compile-remove(image-gallery) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
@@ -8708,10 +8740,10 @@ const ImageGallery = (props) => {
                 // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
                 // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
                 isClickableOutsideFocusTrap: true, className: react.mergeStyles(bodyFocusZone) },
-                React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle), alt: image.altText || 'image', onError: (event) => {
+                React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle), alt: image.altText || 'image', "aria-label": 'image-gallery-main-image', onError: (event) => {
                         setIsImageLoaded(false);
                         onError && onError(event);
-                    }, onClick: (event) => event.stopPropagation() }))));
+                    }, onClick: (event) => event.stopPropagation(), "aria-live": 'polite' }))));
     };
     return (React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme, isDarkTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
         renderHeaderBar(),
@@ -9708,16 +9740,23 @@ const processInlineImage = (props) => ({
             ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode)));
     },
     processNode: (node, children, index) => {
+        node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
         // logic to check id in map/list
         if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
             node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
         }
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         const handleOnClick = () => {
             props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
         };
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        return (React__default['default'].createElement("span", { onClick: handleOnClick, "data-ui-id": node.attribs.id }, processNodeDefinitions.processDefaultNode(node, children, index)));
+        /* @conditional-compile-remove(image-gallery) */
+        return (React__default['default'].createElement("span", { "data-ui-id": node.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
+                cursor: 'pointer'
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    handleOnClick();
+                }
+            } }, processNodeDefinitions.processDefaultNode(node, children, index)));
     }
 });
 /* @conditional-compile-remove(mention) */
@@ -9916,7 +9955,7 @@ const MessageBubble = (props) => {
     const theme = useTheme();
     const locale = useLocale$1();
     const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     onInlineImageClicked } = props;
     const defaultTimeStamp = message.createdOn
         ? generateDefaultTimestamp(message.createdOn, showDate, strings)
@@ -9976,7 +10015,7 @@ const MessageBubble = (props) => {
         }
         return undefined;
     }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (onInlineImageClicked === undefined) {
             return;
@@ -9997,7 +10036,7 @@ const MessageBubble = (props) => {
                 attachmentsMap: props.attachmentsMap, 
                 /* @conditional-compile-remove(mention) */
                 mentionDisplayOptions: props.mentionDisplayOptions, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                /* @conditional-compile-remove(image-gallery) */
                 onInlineImageClicked: handleOnInlineImageClicked }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
     }, [
@@ -10006,7 +10045,7 @@ const MessageBubble = (props) => {
         props,
         strings,
         userId,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         handleOnInlineImageClicked
     ]);
     const chatMessage = (React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -10084,9 +10123,9 @@ const ChatMessageComponent = (props) => {
             onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
             /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
             onFetchAttachments: props.onFetchAttachments, 
-            /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+            /* @conditional-compile-remove(image-gallery) */
             onInlineImageClicked: props.onInlineImageClicked, 
-            /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+            /* @conditional-compile-remove(image-gallery) */
             attachmentsMap: props.attachmentsMap, 
             /* @conditional-compile-remove(mention) */
             mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
@@ -10460,7 +10499,7 @@ const MessageThread = (props) => {
     onFetchAttachments, 
     /* @conditional-compile-remove(mention) */
     mentionOptions, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     onInlineImageClicked } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = React.useState([]);
@@ -10708,7 +10747,7 @@ const MessageThread = (props) => {
                 onDisplayDateTimeString: onDisplayDateTimeString, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 onFetchAttachments: onFetchInlineAttachment, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                /* @conditional-compile-remove(image-gallery) */
                 onInlineImageClicked: onInlineImageClicked, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 attachmentsMap: inlineAttachments, 
@@ -10730,7 +10769,7 @@ const MessageThread = (props) => {
         onDisplayDateTimeString,
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         onFetchInlineAttachment,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         onInlineImageClicked,
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         inlineAttachments,
@@ -17356,7 +17395,7 @@ const themedCaptionsSettingsModalStyle = (theme) => ({
         borderRadius: theme.effects.roundedCorner6,
         padding: _pxToRem(24),
         width: _pxToRem(440),
-        height: _pxToRem(268),
+        height: 'fit-content',
         overflow: 'hidden'
     }
 });
@@ -17378,7 +17417,6 @@ const titleContainerClassName = react.mergeStyles({
  * @private
  */
 const dropdownContainerClassName = react.mergeStyles({
-    paddingBottom: _pxToRem(16),
     paddingTop: _pxToRem(16)
 });
 /**
@@ -17388,7 +17426,8 @@ const dropdownInfoTextStyle = (theme) => react.mergeStyles({
     fontWeight: 400,
     fontSize: _pxToRem(12),
     lineHeight: _pxToRem(16),
-    color: theme.palette.neutralSecondary
+    color: theme.palette.neutralSecondary,
+    paddingBottom: _pxToRem(24)
 });
 /**
  * @private
@@ -17429,6 +17468,56 @@ const dropdownStyles = {
     callout: Object.assign({ height: _pxToRem(300), overflow: 'auto' }, scrollbarStyles)
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @internal
+ * mapping between caption language and spoken language codes
+ */
+const _spokenLanguageToCaptionLanguage = {
+    'ar-ae': 'ar',
+    'ar-sa': 'ar',
+    'da-dk': 'da',
+    'de-de': 'de',
+    'en-au': 'en',
+    'en-ca': 'en',
+    'en-gb': 'en',
+    'en-in': 'en',
+    'en-nz': 'en',
+    'en-us': 'en',
+    'es-es': 'es',
+    'es-mx': 'es',
+    'fi-fi': 'fi',
+    'fr-ca': 'fr-ca',
+    'fr-fr': 'fr',
+    'hi-in': 'hi',
+    'it-it': 'it',
+    'ja-jp': 'ja',
+    'ko-kr': 'ko',
+    'nb-no': 'nb',
+    'nl-be': 'nl',
+    'nl-nl': 'nl',
+    'pl-pl': 'pl',
+    'pt-br': 'pt',
+    'ru-ru': 'ru',
+    'sv-se': 'sv',
+    'zh-cn': 'zh-Hans',
+    'zh-hk': 'zh-Hant',
+    'cs-cz': 'cs',
+    'pt-pt': 'pt-pt',
+    'tr-tr': 'tr',
+    'vi-vn': 'vi',
+    'th-th': 'th',
+    'he-il': 'he',
+    'cy-gb': 'cy',
+    'uk-ua': 'uk',
+    'el-gr': 'el',
+    'hu-hu': 'hu',
+    'ro-ro': 'ro',
+    'sk-sk': 'sk',
+    'zh-tw': 'zh-Hant'
+};
+
 var __awaiter$r = (window && window.__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) {
@@ -17443,65 +17532,109 @@ var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments,
  * a component for setting spoken languages
  */
 const _CaptionsSettingsModal = (props) => {
-    const { supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onDismissCaptionsSettings, onStartCaptions, strings, captionsAvailableLanguageStrings } = props;
+    const { supportedSpokenLanguages, supportedCaptionLanguages, currentSpokenLanguage, currentCaptionLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onSetCaptionLanguage, onDismissCaptionsSettings, onStartCaptions, strings, spokenLanguageStrings, captionLanguageStrings, changeCaptionLanguage = false } = props;
     const theme = react.useTheme();
-    const [selectedItem, setSelectedItem] = React.useState({
+    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = React.useState(false);
+    const [selectedSpokenLanguage, setSelectedSpokenLanguage] = React.useState({
         key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,
         text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
     });
-    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = React.useState(false);
-    const onDismiss = React.useCallback(() => {
-        if (onDismissCaptionsSettings) {
-            onDismissCaptionsSettings();
-        }
-    }, [onDismissCaptionsSettings]);
+    const [selectedCaptionLanguage, setSelectedCaptionLanguage] = React.useState({
+        key: currentCaptionLanguage !== ''
+            ? currentCaptionLanguage
+            : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
+        text: currentCaptionLanguage !== ''
+            ? currentCaptionLanguage
+            : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
+    });
     React.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(selectedItem.key.toString());
+            onSetSpokenLanguage(selectedSpokenLanguage.key.toString());
             // we only need to call set spoken language once when first starting captions
             setHasSetSpokenLanguage(true);
         }
-    }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);
+    }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedSpokenLanguage.key, hasSetSpokenLanguage]);
+    const onDismiss = React.useCallback(() => {
+        if (onDismissCaptionsSettings) {
+            onDismissCaptionsSettings();
+        }
+    }, [onDismissCaptionsSettings]);
     const onConfirm = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
-        const languageCode = selectedItem.key.toString();
+        const spokenLanguageCode = selectedSpokenLanguage.key.toString();
+        const captionLanguageCode = selectedCaptionLanguage.key.toString();
         if (isCaptionsFeatureActive) {
-            onSetSpokenLanguage(languageCode);
+            onSetSpokenLanguage(spokenLanguageCode);
+            onSetCaptionLanguage(captionLanguageCode);
         }
         else {
-            yield onStartCaptions({ spokenLanguage: languageCode });
+            yield onStartCaptions({ spokenLanguage: spokenLanguageCode });
         }
         onDismiss();
-    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);
-    const dropdownOptions = React.useMemo(() => {
+    }), [
+        onDismiss,
+        isCaptionsFeatureActive,
+        onSetSpokenLanguage,
+        onSetCaptionLanguage,
+        onStartCaptions,
+        selectedSpokenLanguage.key,
+        selectedCaptionLanguage.key
+    ]);
+    const spokenLanguageDropdownOptions = React.useMemo(() => {
         return supportedSpokenLanguages.map((languageCode) => {
             return {
                 key: languageCode,
-                text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode
+                text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode
             };
         });
-    }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);
-    const onChange = (event, option) => {
+    }, [supportedSpokenLanguages, spokenLanguageStrings]);
+    const captionLanguageDropdownOptions = React.useMemo(() => {
+        return supportedCaptionLanguages.map((languageCode) => {
+            return {
+                key: languageCode,
+                text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode
+            };
+        });
+    }, [supportedCaptionLanguages, captionLanguageStrings]);
+    const onSpokenLanguageChange = (event, option) => {
         if (option) {
-            setSelectedItem(option);
+            setSelectedSpokenLanguage(option);
+        }
+    };
+    const onCaptionLanguageChange = (event, option) => {
+        if (option) {
+            setSelectedCaptionLanguage(option);
         }
     };
     const calloutProps = React.useMemo(() => ({
         preventDismissOnEvent: _preventDismissOnEvent
     }), []);
     const CaptionsSettingsComponent = React.useCallback(() => {
+        const placeholderSpokenLanguage = currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage;
+        const placeholderCaptionLanguage = currentCaptionLanguage !== ''
+            ? currentCaptionLanguage
+            : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
         return (React__default['default'].createElement(react.Stack, null,
-            React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, selectedKey: selectedItem ? selectedItem.key : undefined, onChange: onChange, calloutProps: calloutProps, placeholder: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage, options: dropdownOptions, styles: dropdownStyles }),
-            React__default['default'].createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText)));
+            React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: onSpokenLanguageChange, calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: spokenLanguageDropdownOptions, styles: dropdownStyles }),
+            React__default['default'].createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
+            changeCaptionLanguage && (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: onCaptionLanguageChange, calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: captionLanguageDropdownOptions, styles: dropdownStyles }),
+                React__default['default'].createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)))));
     }, [
         calloutProps,
         currentSpokenLanguage,
-        dropdownOptions,
-        selectedItem,
-        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText,
-        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel,
-        theme
+        currentCaptionLanguage,
+        spokenLanguageDropdownOptions,
+        captionLanguageDropdownOptions,
+        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 = React.useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
@@ -20163,7 +20296,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content"};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
+var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content"};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
 
 var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_GB = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
 
@@ -21802,9 +21935,9 @@ const ChatScreen = (props) => {
     const defaultNumberOfChatMessagesToReload = 5;
     /* @conditional-compile-remove(file-sharing) */
     const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const [fullSizeAttachments, setFullSizeAttachments] = React.useState({});
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const [galleryImages, setGalleryImages] = React.useState([]);
     const adapter = useAdapter$1();
     const theme = useTheme();
@@ -21851,14 +21984,13 @@ const ChatScreen = (props) => {
         }
         return [{ blobUrl: '' }];
     }), [adapter]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$i(void 0, void 0, void 0, function* () {
         var _a, _b;
         const messages = (_a = messageThreadProps.messages) === null || _a === void 0 ? void 0 : _a.filter((message) => {
             return message.messageId === messageId;
         });
         if (!messages || messages.length <= 0) {
-            console.log(`Message not found with messageId ${messageId}`);
             return;
         }
         const chatMessage = messages[0];
@@ -21866,7 +21998,6 @@ const ChatScreen = (props) => {
             return attachment.id === attachmentId;
         });
         if (!attachments || attachments.length <= 0) {
-            console.log(`Attachment not found with id ${attachmentId}`);
             return;
         }
         const attachment = attachments[0];
@@ -21901,16 +22032,24 @@ const ChatScreen = (props) => {
             }
         }
     }), [adapter, fullSizeAttachments, messageThreadProps.messages, onRenderAvatarCallback]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const onImageDownloadButtonClicked = React.useCallback((imageUrl, saveAsName) => {
-        // Create a new anchor element
-        const a = document.createElement('a');
-        // Set the href and download attributes for the anchor element
-        a.href = imageUrl;
-        a.download = saveAsName || 'download';
-        // Programmatically click the anchor element to trigger the download
-        a.click();
-        a.remove();
+        if (react.isIOS()) {
+            window.open(imageUrl, '_blank');
+        }
+        else {
+            // Create a new anchor element
+            const a = document.createElement('a');
+            // Set the href and download attributes for the anchor element
+            a.href = imageUrl;
+            a.download = saveAsName;
+            a.rel = 'noopener noreferrer';
+            a.target = '_blank';
+            // Programmatically click the anchor element to trigger the download
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        }
     }, []);
     const AttachFileButton = React.useCallback(() => {
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
@@ -21932,7 +22071,7 @@ const ChatScreen = (props) => {
                     onRenderFileDownloads: onRenderFileDownloads, 
                     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                     onFetchAttachments: onRenderInlineAttachment, 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    /* @conditional-compile-remove(image-gallery) */
                     onInlineImageClicked: onInlineImageClicked, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
                     React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
@@ -21948,7 +22087,7 @@ const ChatScreen = (props) => {
                         formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
             (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         React__default['default'].createElement(ImageGallery, { isOpen: galleryImages.length > 0, images: galleryImages, onDismiss: () => setGalleryImages([]), onImageDownloadButtonClicked: onImageDownloadButtonClicked })));
 };
 
@@ -22630,7 +22769,7 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
 /** @private */
 const CaptionsSettingsModal = (props) => {
     /* @conditional-compile-remove(close-captions) */
-    const CaptionsSettingsModalProps = useAdaptedSelector(_changeSpokenLanguageSelector);
+    const CaptionsSettingsModalProps = useAdaptedSelector(_captionSettingsSelector);
     /* @conditional-compile-remove(close-captions) */
     const handlers = useHandlers();
     /* @conditional-compile-remove(close-captions) */
@@ -22638,17 +22777,21 @@ const CaptionsSettingsModal = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const modalStrings = {
         captionsSettingsModalTitle: strings.captionsSettingsModalTitle,
-        captionsSettingsDropdownLabel: strings.captionsSettingsDropdownLabel,
-        captionsSettingsDropdownInfoText: strings.captionsSettingsDropdownInfoText,
+        captionsSettingsSpokenLanguageDropdownLabel: strings.captionsSettingsSpokenLanguageDropdownLabel,
+        captionsSettingsCaptionLanguageDropdownLabel: strings.captionsSettingsCaptionLanguageDropdownLabel,
+        captionsSettingsSpokenLanguageDropdownInfoText: strings.captionsSettingsSpokenLanguageDropdownInfoText,
+        captionsSettingsCaptionLanguageDropdownInfoText: strings.captionsSettingsCaptionLanguageDropdownInfoText,
         captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,
         captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,
         captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,
         captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel
     };
     /* @conditional-compile-remove(close-captions) */
-    const captionsAvailableLanguageStrings = strings.captionsAvailableLanguageStrings;
+    const spokenLanguageStrings = strings.spokenLanguageStrings;
     /* @conditional-compile-remove(close-captions) */
-    return (React__default['default'].createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, captionsAvailableLanguageStrings: captionsAvailableLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings })));
+    const captionLanguageStrings = strings.captionLanguageStrings;
+    /* @conditional-compile-remove(close-captions) */
+    return (React__default['default'].createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22840,7 +22983,7 @@ const CaptionsBannerMoreButton = (props) => {
 /* @conditional-compile-remove(close-captions) */
 const mobileViewBannerWidth = '90%';
 /* @conditional-compile-remove(close-captions) */
-const desktopViewBannerWidth = '50%';
+const desktopViewBannerWidth = '35rem';
 /** @private */
 const CaptionsBanner = (props) => {
     /* @conditional-compile-remove(close-captions) */
@@ -22874,10 +23017,10 @@ const CaptionsBanner = (props) => {
         captionsBannerSpinnerText: strings.captionsBannerSpinnerText
     };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
+        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: true })),
         /* @conditional-compile-remove(close-captions) */ React__default['default'].createElement("div", { className: containerClassName },
             React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
-                React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth, maxWidth: '35rem' } },
+                React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
                     React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
             !props.isMobile && captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: floatingChildClassName },
                 React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
@@ -23109,6 +23252,12 @@ const getRemoteParticipants = (state) => { var _a; return (_a = state.call) ===
  */
 const getSelectedVideoEffect = (state) => state.selectedVideoBackgroundEffect;
 /* @conditional-compile-remove(close-captions) */
+/** @private */
+const getCaptionsStatus = (state) => {
+    var _a;
+    return (_a = state.call) === null || _a === void 0 ? void 0 : _a.captionsFeature.isCaptionsFeatureActive;
+};
+/* @conditional-compile-remove(close-captions) */
 /**
  * @private
  */
@@ -24147,7 +24296,7 @@ const CommonCallControlBar = (props) => {
     const cameraButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.cameraButton);
     return (React__default['default'].createElement("div", { ref: controlBarSizeRef },
         React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
-        /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings }))),
+        /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn }))),
         React__default['default'].createElement(react.Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles) },
             React__default['default'].createElement(react.Stack.Item, { grow: true, className: react.mergeStyles(controlBarWrapperDesktopStyles) },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
@@ -24177,9 +24326,11 @@ const CommonCallControlBar = (props) => {
                                         return (React__default['default'].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
                                     }),
                                     props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
-                                    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
+                                    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
                                         /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
-                                        !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
+                                        !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, 
+                                        /*@conditional-compile-remove(PSTN-calls) */
+                                        onClickShowDialpad: props.onClickShowDialpad, 
                                         /* @conditional-compile-remove(control-bar-button-injection) */
                                         callControls: props.callControls, 
                                         /* @conditional-compile-remove(close-captions) */
@@ -24356,7 +24507,7 @@ const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenSh
 /**
  * @private
  */
-const spokenLanguageDrawerStyles = (theme) => ({
+const captionSettingsDrawerStyles = (theme) => ({
     root: {
         overflow: 'auto'
     },
@@ -24364,8 +24515,8 @@ const spokenLanguageDrawerStyles = (theme) => ({
         drawerContentContainer: {
             root: {
                 span: {
-                    fontWeight: 600,
-                    fontSize: _pxToRem(17),
+                    fontWeight: 400,
+                    fontSize: _pxToRem(14),
                     lineHeight: _pxToRem(22),
                     color: theme.palette.neutralDark
                 }
@@ -24376,38 +24527,29 @@ const spokenLanguageDrawerStyles = (theme) => ({
 
 // Copyright (c) Microsoft Corporation.
 /** @private */
-const SpokenLanguageDrawer = (props) => {
+const CaptionSettingsDrawer = (props) => {
     var _a;
     /* @conditional-compile-remove(close-captions) */
     const theme = useTheme();
     /* @conditional-compile-remove(close-captions) */
-    const changeSpokenLanguageProps = useAdaptedSelector(_changeSpokenLanguageSelector);
-    /* @conditional-compile-remove(close-captions) */
-    const changeSpokenLanguageHandlers = useHandlers();
-    /* @conditional-compile-remove(close-captions) */
-    const onSpokenLanguageDrawerItemClick = React.useCallback((languageCode) => {
-        props.setCurrentSpokenLanguage(languageCode);
+    const onDrawerItemClick = React.useCallback((languageCode) => {
+        props.selectLanguage(languageCode);
     }, [props]);
     /* @conditional-compile-remove(close-captions) */
-    const spokenLanguageDrawerItems = React.useMemo(() => {
+    const drawerItems = React.useMemo(() => {
         var _a;
-        return (_a = changeSpokenLanguageProps === null || changeSpokenLanguageProps === void 0 ? void 0 : changeSpokenLanguageProps.supportedSpokenLanguages) === null || _a === void 0 ? void 0 : _a.map((languageCode) => ({
+        return Object.keys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map((languageCode) => ({
             itemKey: languageCode,
             text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,
-            onItemClick: () => onSpokenLanguageDrawerItemClick(languageCode),
-            secondaryIconProps: props.currentSpokenLanguage === languageCode ? { iconName: 'Accept' } : undefined
+            onItemClick: () => onDrawerItemClick(languageCode),
+            secondaryIconProps: props.currentLanguage === languageCode ? { iconName: 'Accept' } : undefined
         }));
-    }, [
-        changeSpokenLanguageProps === null || changeSpokenLanguageProps === void 0 ? void 0 : changeSpokenLanguageProps.supportedSpokenLanguages,
-        props.currentSpokenLanguage,
-        props.supportedLanguageStrings,
-        onSpokenLanguageDrawerItemClick
-    ]);
+    }, [props.currentLanguage, props.supportedLanguageStrings, onDrawerItemClick]);
     /* @conditional-compile-remove(close-captions) */
-    return (React__default['default'].createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.spokenLanguageMenuTitle, items: spokenLanguageDrawerItems !== null && spokenLanguageDrawerItems !== void 0 ? spokenLanguageDrawerItems : [], onLightDismiss: () => {
-            changeSpokenLanguageHandlers.onSetSpokenLanguage(props.currentSpokenLanguage);
+    return (React__default['default'].createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: drawerItems !== null && drawerItems !== void 0 ? drawerItems : [], onLightDismiss: () => {
+            props.setCurrentLanguage(props.currentLanguage);
             props.onLightDismiss();
-        }, styles: spokenLanguageDrawerStyles(theme) }));
+        }, styles: captionSettingsDrawerStyles(theme) }));
 };
 
 /**
@@ -24459,7 +24601,7 @@ const MoreDrawer = (props) => {
     const theme = react.useTheme();
     const drawerMenuItems = [];
     const { speakers, onSelectSpeaker, onLightDismiss } = props;
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
@@ -24589,18 +24731,29 @@ const MoreDrawer = (props) => {
     }
     /* @conditional-compile-remove(close-captions) */
     //Captions drawer menu
-    const supportedLanguageStrings = useLocale().strings.call.captionsAvailableLanguageStrings;
+    const supportedSpokenLanguageStrings = useLocale().strings.call.spokenLanguageStrings;
     /* @conditional-compile-remove(close-captions) */
-    const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
+    //Captions drawer menu
+    const supportedCaptionLanguageStrings = useLocale().strings.call.captionLanguageStrings;
+    /* @conditional-compile-remove(close-captions) */
+    const captionSettingsProp = useAdaptedSelector(_captionSettingsSelector);
     /* @conditional-compile-remove(close-captions) */
     const startCaptionsButtonHandlers = useHandlers();
     /* @conditional-compile-remove(close-captions) */
+    const captionSettingsHandlers = useHandlers();
+    /* @conditional-compile-remove(close-captions) */
     const [isSpokenLanguageDrawerOpen, setIsSpokenLanguageDrawerOpen] = React.useState(false);
     /* @conditional-compile-remove(close-captions) */
-    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(startCaptionsButtonProps.currentSpokenLanguage);
+    const [isCaptionLanguageDrawerOpen, setIsCaptionLanguageDrawerOpen] = React.useState(false);
+    /* @conditional-compile-remove(close-captions) */
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(captionSettingsProp.currentSpokenLanguage !== '' ? captionSettingsProp.currentSpokenLanguage : 'en-us');
+    /* @conditional-compile-remove(close-captions) */
+    const [currentCaptionLanguage, setCurrentCaptionLanguage] = React.useState(captionSettingsProp.currentCaptionLanguage !== ''
+        ? captionSettingsProp.currentCaptionLanguage
+        : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
     /* @conditional-compile-remove(close-captions) */
     const onToggleChange = React.useCallback(() => __awaiter$d(void 0, void 0, void 0, function* () {
-        if (!startCaptionsButtonProps.checked) {
+        if (!captionSettingsProp.isCaptionsFeatureActive) {
             yield startCaptionsButtonHandlers.onStartCaptions({
                 spokenLanguage: currentSpokenLanguage
             });
@@ -24608,10 +24761,16 @@ const MoreDrawer = (props) => {
         else {
             startCaptionsButtonHandlers.onStopCaptions();
         }
-    }), [startCaptionsButtonProps.checked, startCaptionsButtonHandlers, currentSpokenLanguage]);
+    }), [captionSettingsProp.isCaptionsFeatureActive, startCaptionsButtonHandlers, currentSpokenLanguage]);
     /* @conditional-compile-remove(close-captions) */
     if (props.isCaptionsSupported) {
         const captionsDrawerItems = [];
+        const spokenLanguageString = supportedSpokenLanguageStrings
+            ? supportedSpokenLanguageStrings[currentSpokenLanguage]
+            : currentSpokenLanguage;
+        const captionLanguageString = supportedCaptionLanguageStrings
+            ? supportedCaptionLanguageStrings[currentCaptionLanguage]
+            : currentCaptionLanguage;
         drawerMenuItems.push({
             itemKey: 'captions',
             id: 'common-call-composite-captions-button',
@@ -24622,27 +24781,27 @@ const MoreDrawer = (props) => {
         });
         captionsDrawerItems.push({
             itemKey: 'ToggleCaptionsKey',
-            text: startCaptionsButtonProps.checked
+            text: captionSettingsProp.isCaptionsFeatureActive
                 ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
                 : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
             iconProps: {
-                iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
+                iconName: captionSettingsProp.isCaptionsFeatureActive ? 'CaptionsOffIcon' : 'CaptionsIcon',
                 styles: { root: { lineHeight: 0 } }
             },
             disabled: props.disableButtonsForHoldScreen,
             secondaryComponent: (React__default['default'].createElement(react.Stack, { verticalFill: true, verticalAlign: "center" },
-                React__default['default'].createElement(react.Toggle, { id: "common-call-composite-captions-toggle-button", checked: startCaptionsButtonProps.checked, styles: themedToggleButtonStyle(theme, startCaptionsButtonProps.checked), onChange: onToggleChange })))
+                React__default['default'].createElement(react.Toggle, { id: "common-call-composite-captions-toggle-button", checked: captionSettingsProp.isCaptionsFeatureActive, styles: themedToggleButtonStyle(theme, captionSettingsProp.isCaptionsFeatureActive), onChange: onToggleChange })))
         });
         captionsDrawerItems.push({
             itemKey: 'ChangeSpokenLanguage',
             text: props.strings.spokenLanguageMenuTitle,
-            id: 'common-call-composite-captions-settings-button',
-            secondaryText: supportedLanguageStrings ? supportedLanguageStrings[currentSpokenLanguage] : currentSpokenLanguage,
+            id: 'common-call-composite-captions-spoken-settings-button',
+            secondaryText: spokenLanguageString,
             iconProps: {
                 iconName: 'ChangeSpokenLanguageIcon',
                 styles: { root: { lineHeight: 0 } }
             },
-            disabled: props.disableButtonsForHoldScreen || !startCaptionsButtonProps.checked,
+            disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
             onItemClick: () => {
                 setIsSpokenLanguageDrawerOpen(true);
             },
@@ -24651,6 +24810,24 @@ const MoreDrawer = (props) => {
                 styles: { root: { lineHeight: 0 } }
             }
         });
+        captionsDrawerItems.push({
+            itemKey: 'ChangeCaptionLanguage',
+            text: props.strings.captionLanguageMenuTitle,
+            id: 'common-call-composite-captions-subtitle-settings-button',
+            secondaryText: captionLanguageString,
+            iconProps: {
+                iconName: 'ChangeCaptionLanguageIcon',
+                styles: { root: { lineHeight: 0 } }
+            },
+            disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
+            onItemClick: () => {
+                setIsCaptionLanguageDrawerOpen(true);
+            },
+            secondaryIconProps: {
+                iconName: 'ChevronRight',
+                styles: { root: { lineHeight: 0 } }
+            }
+        });
     }
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
@@ -24668,8 +24845,9 @@ const MoreDrawer = (props) => {
     });
     /* @conditional-compile-remove(close-captions) */
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        isSpokenLanguageDrawerOpen && props.isCaptionsSupported && (React__default['default'].createElement(SpokenLanguageDrawer, { onLightDismiss: props.onLightDismiss, setCurrentSpokenLanguage: setCurrentSpokenLanguage, currentSpokenLanguage: currentSpokenLanguage, strings: props.strings, supportedLanguageStrings: supportedLanguageStrings })),
-        !isSpokenLanguageDrawerOpen && React__default['default'].createElement(_DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss })));
+        isSpokenLanguageDrawerOpen && props.isCaptionsSupported && (React__default['default'].createElement(CaptionSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsHandlers.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: { menuTitle: props.strings.spokenLanguageMenuTitle }, supportedLanguageStrings: supportedSpokenLanguageStrings })),
+        isCaptionLanguageDrawerOpen && props.isCaptionsSupported && (React__default['default'].createElement(CaptionSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsHandlers.onSetCaptionLanguage, currentLanguage: currentCaptionLanguage, strings: { menuTitle: props.strings.captionLanguageMenuTitle }, supportedLanguageStrings: supportedCaptionLanguageStrings })),
+        !isSpokenLanguageDrawerOpen && !isCaptionLanguageDrawerOpen && (React__default['default'].createElement(_DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss }))));
 };
 const isDeviceSelected = (speaker, selectedSpeaker) => !!selectedSpeaker && speaker.id === selectedSpeaker.id;
 const isEnabled = (option) => option !== false;
@@ -24699,7 +24877,9 @@ const PreparedMoreDrawer = (props) => {
         /* @conditional-compile-remove(close-captions) */
         captionsMenuTitle: strings.moreDrawerCaptionsMenuTitle,
         /* @conditional-compile-remove(close-captions) */
-        spokenLanguageMenuTitle: strings.moreDrawerSpokenLanguageMenuTitle
+        spokenLanguageMenuTitle: strings.moreDrawerSpokenLanguageMenuTitle,
+        /* @conditional-compile-remove(close-captions) */
+        captionLanguageMenuTitle: strings.moreDrawerCaptionLanguageMenuTitle
     }), [strings]);
     const deviceProps = useSelector$1(moreDrawerSelector);
     const callHandlers = useHandlers();
@@ -26091,6 +26271,8 @@ const CallArrangement = (props) => {
     const isTeamsCall = useSelector$1(getIsTeamsCall);
     /* @conditional-compile-remove(close-captions) */
     const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
+    /* @conditional-compile-remove(close-captions) */
+    const isCaptionsOn = useSelector$1(getCaptionsStatus);
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
     const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
@@ -26109,6 +26291,8 @@ const CallArrangement = (props) => {
                     disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
                     /* @conditional-compile-remove(close-captions) */
                     isCaptionsSupported: isTeamsCall && hasJoinedCall, 
+                    /* @conditional-compile-remove(close-captions) */
+                    isCaptionsOn: isCaptionsOn, 
                     /* @conditional-compile-remove(video-background-effects) */
                     onShowVideoEffectsPicker: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, 
                     /* @conditional-compile-remove(PSTN-calls) */
@@ -29407,6 +29591,8 @@ class AzureCommunicationCallAdapter {
             const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
             captionsFeature.on('CaptionsReceived', this.captionsReceived.bind(this));
             captionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+            captionsFeature.on('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
+            captionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
         }
     }
     /* @conditional-compile-remove(close-captions) */
@@ -29416,11 +29602,13 @@ class AzureCommunicationCallAdapter {
             const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
             captionsFeature.off('CaptionsReceived', this.captionsReceived.bind(this));
             captionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+            captionsFeature.off('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
+            captionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
             (_b = this.call) === null || _b === void 0 ? void 0 : _b.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
         }
     }
     subscribeCallEvents() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         (_a = this.call) === null || _a === void 0 ? void 0 : _a.on('remoteParticipantsUpdated', this.onRemoteParticipantsUpdated.bind(this));
         (_b = this.call) === null || _b === void 0 ? void 0 : _b.on('isMutedChanged', this.isMyMutedChanged.bind(this));
         (_c = this.call) === null || _c === void 0 ? void 0 : _c.on('isScreenSharingOnChanged', this.isScreenSharingOnChanged.bind(this));
@@ -29429,6 +29617,8 @@ class AzureCommunicationCallAdapter {
         (_e = this.call) === null || _e === void 0 ? void 0 : _e.on('stateChanged', this.subscribeToCaptionEvents.bind(this));
         /* @conditional-compile-remove(call-transfer) */
         (_f = this.call) === null || _f === void 0 ? void 0 : _f.feature(communicationCalling.Features.Transfer).on('transferRequested', this.transferRequested.bind(this));
+        /* @conditional-compile-remove(capabilities) */
+        (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
     }
     unsubscribeCallEvents() {
         var _a, _b, _c, _d;
@@ -29475,6 +29665,22 @@ class AzureCommunicationCallAdapter {
             isActive: captionsFeature.isCaptionsFeatureActive
         });
     }
+    /* @conditional-compile-remove(close-captions) */
+    isSpokenLanguageChanged() {
+        var _a;
+        const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
+        this.emitter.emit('isSpokenLanguageChanged', {
+            activeSpokenLanguage: captionsFeature.activeSpokenLanguage
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    isCaptionLanguageChanged() {
+        var _a;
+        const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
+        this.emitter.emit('isCaptionLanguageChanged', {
+            activeCaptionLanguage: captionsFeature.activeCaptionLanguage
+        });
+    }
     /* @conditional-compile-remove(call-transfer) */
     transferRequested(args) {
         const newArgs = Object.assign(Object.assign({}, args), { accept: (options) => {
@@ -29491,6 +29697,20 @@ class AzureCommunicationCallAdapter {
             } });
         this.emitter.emit('transferRequested', newArgs);
     }
+    /* @conditional-compile-remove(capabilities) */
+    capabilitiesChanged(data) {
+        var _a, _b, _c;
+        if (((_a = data.newValue.turnVideoOn) === null || _a === void 0 ? void 0 : _a.isPresent) === false) {
+            this.stopCamera();
+        }
+        if (((_b = data.newValue.unmuteMic) === null || _b === void 0 ? void 0 : _b.isPresent) === false) {
+            this.mute();
+        }
+        if (((_c = data.newValue.shareScreen) === null || _c === void 0 ? void 0 : _c.isPresent) === false) {
+            this.stopScreenShare();
+        }
+        this.emitter.emit('capabilitiesChanged', data);
+    }
     callIdChanged() {
         var _a;
         ((_a = this.call) === null || _a === void 0 ? void 0 : _a.id) && this.emitter.emit('callIdChanged', { callId: this.call.id });
@@ -31109,6 +31329,14 @@ class AzureCommunicationCallWithChatAdapter {
             case 'isCaptionsActiveChanged':
                 this.callAdapter.on('isCaptionsActiveChanged', listener);
                 break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'isCaptionLanguageChanged':
+                this.callAdapter.on('isCaptionLanguageChanged', listener);
+                break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'isSpokenLanguageChanged':
+                this.callAdapter.on('isSpokenLanguageChanged', listener);
+                break;
             case 'messageReceived':
                 this.chatAdapter.on('messageReceived', listener);
                 break;
@@ -31175,6 +31403,14 @@ class AzureCommunicationCallWithChatAdapter {
             case 'isCaptionsActiveChanged':
                 this.callAdapter.off('isCaptionsActiveChanged', listener);
                 break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'isCaptionLanguageChanged':
+                this.callAdapter.off('isCaptionLanguageChanged', listener);
+                break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'isSpokenLanguageChanged':
+                this.callAdapter.off('isSpokenLanguageChanged', listener);
+                break;
             case 'messageReceived':
                 this.chatAdapter.off('messageReceived', listener);
                 break;