@azure/communication-react 1.5.1-alpha-202305250013 → 1.5.1-alpha-202305260013

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

@@ -165,7 +165,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202305250013';
+var telemetryVersion = '1.5.1-alpha-202305260013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -392,6 +392,12 @@ const getCaptionsStatus = (state, props) => {
 };
 /* @conditional-compile-remove(close-captions) */
 /** @private */
+const getStartCaptionsInProgress = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.startCaptionsInProgress;
+};
+/* @conditional-compile-remove(close-captions) */
+/** @private */
 const getCurrentCaptionLanguage = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.currentCaptionLanguage;
@@ -1025,7 +1031,7 @@ const _changeSpokenLanguageSelector = reselect__namespace.createSelector([getSup
  *
  * @internal
  */
-const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus], (captions, isCaptionsFeatureActive) => {
+const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus, 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
@@ -1044,7 +1050,8 @@ const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions,
     });
     return {
         captions: captionsInfo !== null && captionsInfo !== void 0 ? captionsInfo : [],
-        isCaptionsOn: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false
+        isCaptionsOn: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false,
+        startCaptionsInProgress: startCaptionsInProgress !== null && startCaptionsInProgress !== void 0 ? startCaptionsInProgress : false
     };
 });
 /* @conditional-compile-remove(close-captions) */
@@ -1448,7 +1455,8 @@ function convertSdkCallToDeclarativeCall(call) {
             supportedCaptionLanguages: [],
             currentCaptionLanguage: '',
             currentSpokenLanguage: '',
-            isCaptionsFeatureActive: false
+            isCaptionsFeatureActive: false,
+            startCaptionsInProgress: false
         }
     };
 }
@@ -2101,6 +2109,15 @@ class CallContext$2 {
         });
     }
     /* @conditional-compile-remove(close-captions) */
+    setStartCaptionsInProgress(callId, startCaptionsInProgress) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.captionsFeature.startCaptionsInProgress = startCaptionsInProgress;
+            }
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
     setSelectedSpokenLanguage(callId, spokenLanguage) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3690,8 +3707,8 @@ class ProxyTeamsCaptionsFeature {
             case 'startCaptions':
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
                     var _a, _b;
+                    this._context.setStartCaptionsInProgress(this._call.id, true);
                     const ret = yield target.startCaptions(...args);
-                    this._context.setIsCaptionActive(this._call.id, true);
                     this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
                     return ret;
                 }), 'Call.feature');
@@ -3699,6 +3716,7 @@ class ProxyTeamsCaptionsFeature {
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
                     const ret = yield target.stopCaptions(...args);
                     this._context.setIsCaptionActive(this._call.id, false);
+                    this._context.setStartCaptionsInProgress(this._call.id, false);
                     return ret;
                 }), 'Call.feature');
             case 'setSpokenLanguage':
@@ -5028,7 +5046,7 @@ function chunk(options, itemsPerRow) {
 /**
  * @private
  */
-const defaultSpokenLanguage$1 = 'en-us';
+const defaultSpokenLanguage = 'en-us';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8159,6 +8177,16 @@ const chatMessageMenuStyle = react.mergeStyles({
     cursor: 'pointer',
     overflow: 'hidden'
 });
+/**
+ * @private
+ */
+const chatMessageEditContainerStyle = {
+    margin: 0,
+    padding: 0,
+    maxWidth: 'unset',
+    minWidth: 'unset',
+    backgroundColor: 'transparent'
+};
 /**
  * Styles that can be applied to ensure flyout items have the minimum touch target size.
  *
@@ -8247,31 +8275,34 @@ const ChatMessageComponentAsEditBox = (props) => {
                     setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
                 } }))));
     }, [attachedFilesMetadata]);
-    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
-            theme,
-            hasErrorMessage: message.failureReason !== undefined,
-            disabled: false
-        })) },
-        React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
-                submitEnabled &&
-                    onSubmit(textValue, message.metadata, {
-                        attachedFilesMetadata
-                    });
-            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
-            /* @conditional-compile-remove(mention) */
-            mentionLookupOptions: mentionLookupOptions },
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel(message.messageId);
-                }, id: 'dismissIconWrapper' }),
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+    const getContent = () => {
+        return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
+                theme,
+                hasErrorMessage: message.failureReason !== undefined,
+                disabled: false
+            })) },
+            React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
                     submitEnabled &&
                         onSubmit(textValue, message.metadata, {
                             attachedFilesMetadata
                         });
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper' })),
-        message.failureReason && (React__default['default'].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
-        onRenderFileUploads()));
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
+                React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                        onCancel && onCancel(message.messageId);
+                    }, id: 'dismissIconWrapper' }),
+                React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                        submitEnabled &&
+                            onSubmit(textValue, message.metadata, {
+                                attachedFilesMetadata
+                            });
+                        e.stopPropagation();
+                    }, id: 'submitIconWrapper' })),
+            message.failureReason && (React__default['default'].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
+            onRenderFileUploads()));
+    };
+    return React__default['default'].createElement(i.Message, { styles: chatMessageEditContainerStyle, content: getContent() });
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
 const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
@@ -10825,8 +10856,7 @@ const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
     const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles },
-            React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }))));
+        React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles }, coinSize && (React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })))));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /* @conditional-compile-remove(pinned-participants) */
@@ -10863,7 +10893,7 @@ const VideoTile = (props) => {
     const [isHovered, setIsHovered] = React.useState(false);
     /* @conditional-compile-remove(pinned-participants) */
     const [isFocused, setIsFocused] = React.useState(false);
-    const [personaSize, setPersonaSize] = React.useState(100);
+    const [personaSize, setPersonaSize] = React.useState();
     const videoTileRef = React.useRef(null);
     const locale = useLocale$1();
     const theme = useTheme();
@@ -10947,7 +10977,7 @@ const VideoTile = (props) => {
                 }) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             (canShowLabel || participantStateString) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
-                    canShowLabel && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
+                    canShowLabel && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }, "data-ui-id": "video-tile-display-name" }, displayName)),
                     participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
                     showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
@@ -15581,6 +15611,12 @@ const captionContainerClassName = react.mergeStyles({
  * @private
  */
 const captionsBannerClassName = react.mergeStyles(Object.assign({ height: _pxToRem(100), overflowY: 'auto', overflowX: 'hidden' }, scrollbarStyles));
+/**
+ * @private
+ */
+const loadingBannerClassName = react.mergeStyles({
+    height: _pxToRem(100)
+});
 /**
  * @private
  */
@@ -15629,7 +15665,7 @@ const _Caption = (props) => {
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 const _CaptionsBanner = (props) => {
-    const { captions, isCaptionsOn, onRenderAvatar } = props;
+    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings } = props;
     const captionsScrollDivRef = React.useRef(null);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = React.useState(true);
     const scrollToBottom = () => {
@@ -15658,12 +15694,14 @@ const _CaptionsBanner = (props) => {
             scrollToBottom();
         }
     }, [captions, isAtBottomOfScroll]);
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, isCaptionsOn && (React__default['default'].createElement(react.FocusZone, { as: "ul", className: captionsContainerClassName },
-        React__default['default'].createElement(c, { innerRef: captionsScrollDivRef },
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, startCaptionsInProgress && (React__default['default'].createElement(react.FocusZone, { as: "ul", className: captionsContainerClassName },
+        isCaptionsOn && (React__default['default'].createElement(c, { innerRef: captionsScrollDivRef },
             React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption) => {
                 return (React__default['default'].createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
                     React__default['default'].createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
-            })))))));
+            })))),
+        !isCaptionsOn && (React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: loadingBannerClassName, "data-is-focusable": true },
+            React__default['default'].createElement(react.Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" })))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15777,14 +15815,24 @@ const _CaptionsSettingsModal = (props) => {
     const { supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onDismissCaptionsSettings, onStartCaptions, strings, captionsAvailableLanguageStrings } = props;
     const theme = react.useTheme();
     const [selectedItem, setSelectedItem] = React.useState({
-        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1,
-        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1
+        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,
+        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
     });
+    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = React.useState(false);
     const onDismiss = React.useCallback(() => {
         if (onDismissCaptionsSettings) {
             onDismissCaptionsSettings();
         }
     }, [onDismissCaptionsSettings]);
+    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());
+            // we only need to call set spoken language once when first starting captions
+            setHasSetSpokenLanguage(true);
+        }
+    }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);
     const onConfirm = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         const languageCode = selectedItem.key.toString();
         if (isCaptionsFeatureActive) {
@@ -15792,9 +15840,6 @@ const _CaptionsSettingsModal = (props) => {
         }
         else {
             yield onStartCaptions({ spokenLanguage: languageCode });
-            // 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
-            onSetSpokenLanguage(languageCode);
         }
         onDismiss();
     }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);
@@ -15816,7 +15861,7 @@ const _CaptionsSettingsModal = (props) => {
     }), []);
     const CaptionsSettingsComponent = React.useCallback(() => {
         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$1, options: dropdownOptions, styles: dropdownStyles }),
+            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)));
     }, [
         calloutProps,
@@ -18330,7 +18375,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={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",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",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"}};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={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_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={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",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",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..."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={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_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={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",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",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"}};var chat$c={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$c={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$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -20742,9 +20787,6 @@ const CaptionsBannerMoreButton = (props) => {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
-        // 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
-        startCaptionsButtonHandlers.onSetSpokenLanguage(startCaptionsButtonProps.currentSpokenLanguage);
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
     /* @conditional-compile-remove(close-captions) */
     moreButtonContextualMenuItems.push({
@@ -20824,15 +20866,21 @@ const CaptionsBanner = (props) => {
         right: 0,
         top: 0
     });
+    /* @conditional-compile-remove(close-captions) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(close-captions) */
+    const captionsBannerStrings = {
+        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) */ captionsBannerProps.captions.length > 0 &&
-            captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: containerClassName },
+        /* @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 } },
-                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers)))),
-            !props.isMobile && (React__default['default'].createElement("div", { className: floatingChildClassName },
-                React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings })))))));
+                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { strings: captionsBannerStrings })))),
+            !props.isMobile && captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: floatingChildClassName },
+                React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -21605,9 +21653,6 @@ const DesktopMoreButton = (props) => {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
-        // 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
-        startCaptionsButtonHandlers.onSetSpokenLanguage(startCaptionsButtonProps.currentSpokenLanguage);
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = React.useMemo(() => ({
@@ -22092,109 +22137,6 @@ const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenSh
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-/**
- * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.
- *
- * @private
- */
-const MODAL_PIP_DEFAULT_PX = {
-    rightPositionPx: 16,
-    topPositionPx: 52,
-    widthPx: 88,
-    heightPx: 128
-};
-/**
- * @private
- */
-const getPipStyles = (theme) => ({
-    modal: {
-        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
-            // Above the message thread / people pane.
-            zIndex: 2 }, (theme.rtl
-            ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
-            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
-    }
-});
-/**
- * @private
- */
-const PIPContainerStyle = {
-    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
-};
-/**
- * @private
- */
-const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
-/**
- * @private
- */
-const modalStyle = {
-    main: {
-        minWidth: 'min-content',
-        minHeight: 'min-content',
-        position: 'absolute',
-        overflow: 'hidden',
-        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
-        pointerEvents: 'auto',
-        touchAction: 'none'
-    },
-    root: {
-        width: '100%',
-        height: '100%',
-        // pointer events for root Modal div set to none to make descendants interactive
-        pointerEvents: 'none'
-    }
-};
-/**
- * Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.
- * @private
- */
-const modalLayerHostStyle = {
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    zIndex: '100000',
-    // pointer events for layerHost set to none to make descendants interactive
-    pointerEvents: 'none'
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
-const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
-    const modalHostRef = React.useRef(document.getElementById(modalLayerHostId));
-    const modalHostWidth = _useContainerWidth(modalHostRef);
-    const modalHostHeight = _useContainerHeight(modalHostRef);
-    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
-        ? undefined
-        : {
-            x: rtl
-                ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx
-                : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,
-            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx
-        }, [modalHostWidth, rtl]);
-    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
-        ? undefined
-        : {
-            x: rtl
-                ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx
-                : MODAL_PIP_DEFAULT_PX.rightPositionPx,
-            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx
-        }, [modalHostHeight, modalHostWidth, rtl]);
-    return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
-};
-/**
- * @private
- */
-const defaultSpokenLanguage = 'en-us';
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -22418,18 +22360,13 @@ const MoreDrawer = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const [isSpokenLanguageDrawerOpen, setIsSpokenLanguageDrawerOpen] = React.useState(false);
     /* @conditional-compile-remove(close-captions) */
-    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(startCaptionsButtonProps.currentSpokenLanguage === ''
-        ? defaultSpokenLanguage
-        : startCaptionsButtonProps.currentSpokenLanguage);
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(startCaptionsButtonProps.currentSpokenLanguage);
     /* @conditional-compile-remove(close-captions) */
     const onToggleChange = React.useCallback(() => __awaiter$b(void 0, void 0, void 0, function* () {
         if (!startCaptionsButtonProps.checked) {
             yield startCaptionsButtonHandlers.onStartCaptions({
                 spokenLanguage: currentSpokenLanguage
             });
-            // 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
-            startCaptionsButtonHandlers.onSetSpokenLanguage(currentSpokenLanguage);
         }
         else {
             startCaptionsButtonHandlers.onStopCaptions();
@@ -23617,6 +23554,77 @@ const localAndRemotePIPSelector = reselect__namespace.createSelector([getDisplay
     };
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.
+ *
+ * @private
+ */
+const MODAL_PIP_DEFAULT_PX = {
+    rightPositionPx: 16,
+    topPositionPx: 52,
+    widthPx: 88,
+    heightPx: 128
+};
+/**
+ * @private
+ */
+const getPipStyles = (theme) => ({
+    modal: {
+        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
+            // Above the message thread / people pane.
+            zIndex: 2 }, (theme.rtl
+            ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
+            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
+    }
+});
+/**
+ * @private
+ */
+const PIPContainerStyle = {
+    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
+};
+/**
+ * @private
+ */
+const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
+/**
+ * @private
+ */
+const modalStyle = {
+    main: {
+        minWidth: 'min-content',
+        minHeight: 'min-content',
+        position: 'absolute',
+        overflow: 'hidden',
+        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
+        pointerEvents: 'auto',
+        touchAction: 'none'
+    },
+    root: {
+        width: '100%',
+        height: '100%',
+        // pointer events for root Modal div set to none to make descendants interactive
+        pointerEvents: 'none'
+    }
+};
+/**
+ * Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.
+ * @private
+ */
+const modalLayerHostStyle = {
+    display: 'flex',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    zIndex: '100000',
+    // pointer events for layerHost set to none to make descendants interactive
+    pointerEvents: 'none'
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Drag options for Modal in {@link ModalLocalAndRemotePIP} component
@@ -23663,6 +23671,34 @@ const ModalLocalAndRemotePIP = (props) => {
         !props.hidden && localAndRemotePIP)));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
+const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
+    const modalHostRef = React.useRef(document.getElementById(modalLayerHostId));
+    const modalHostWidth = _useContainerWidth(modalHostRef);
+    const modalHostHeight = _useContainerHeight(modalHostRef);
+    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,
+            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx
+        }, [modalHostWidth, rtl]);
+    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx,
+            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx
+        }, [modalHostHeight, modalHostWidth, rtl]);
+    return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -24028,8 +24064,7 @@ const MediaGallery = (props) => {
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
     const onRenderAvatar = React.useCallback((userId, options) => {
         return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-            React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } },
-                React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))));
+            React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } }, (options === null || options === void 0 ? void 0 : options.coinSize) && (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }))))));
     }, [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     /* @conditional-compile-remove(pinned-participants) */