@azure/communication-react 1.8.1-alpha-202309260012 → 1.8.1-alpha-202309280013

package/dist/communication-react.d.ts

@@ -3248,6 +3248,10 @@ export declare interface CallWithChatCompositeStrings {
      * Only used with `mobileView` set to `true`.
      */
     moreDrawerCaptionLanguageMenuTitle: string;
+    /**
+     * Title for the gallery options sub-menu in the more button drawer.
+     */
+    moreDrawerGalleryOptionsMenuTitle: string;
     /**
      * {@Link CallWithChatComposite} control bar More button label
      */

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

@@ -176,7 +176,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.8.1-alpha-202309260012';
+var telemetryVersion = '1.8.1-alpha-202309280013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11259,12 +11259,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const callingParticipant = participant;
     let presence = undefined;
     if (callingParticipant) {
-        if (callingParticipant.state === 'Connected') {
-            presence = react.PersonaPresence.online;
-        }
-        else if (callingParticipant.state === 'Idle') {
-            presence = react.PersonaPresence.away;
-        }
+        presence = react.PersonaPresence.none;
     }
     const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);
     const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
@@ -13525,15 +13520,17 @@ const scrollableHorizontalGalleryStyles = {
 /**
  * @private
  */
-const scrollableHorizontalGalleryContainerStyles = react.mergeStyles({
-    display: 'flex',
-    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
-    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    overflow: 'scroll',
-    '-ms-overflow-style': 'none',
-    'scrollbar-width': 'none',
-    '::-webkit-scrollbar': { display: 'none' }
-});
+const scrollableHorizontalGalleryContainerStyles = (fullWidth) => {
+    return react.mergeStyles({
+        display: 'flex',
+        width: fullWidth ? '100%' : `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
+        minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        overflow: 'scroll',
+        '-ms-overflow-style': 'none',
+        'scrollbar-width': 'none',
+        '::-webkit-scrollbar': { display: 'none' }
+    });
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -13541,7 +13538,11 @@ const scrollableHorizontalGalleryContainerStyles = react.mergeStyles({
  * @private
  */
 const ScrollableHorizontalGallery = (props) => {
-    const { horizontalGalleryElements, onFetchTilesToRender } = props;
+    const { horizontalGalleryElements, onFetchTilesToRender, /* @conditional-compile-remove(gallery-layouts) */ layout } = props;
+    const useFullWidthTrampoline = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        return layout === 'default' ? true : false;
+    };
     React.useEffect(() => {
         const indexesArray = [...Array(horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length).keys()];
         if (onFetchTilesToRender && indexesArray) {
@@ -13550,7 +13551,7 @@ const ScrollableHorizontalGallery = (props) => {
     }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
     const ref = React.useRef();
     const { events: dragabbleEvents } = reactUseDraggableScroll.useDraggable(ref);
-    return (React__default["default"].createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles }),
+    return (React__default["default"].createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles(useFullWidthTrampoline()) }),
         React__default["default"].createElement(react.Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: { childrenGap: '0.5rem' } }, horizontalGalleryElements)));
 };
 
@@ -13600,7 +13601,9 @@ const OverflowGallery = (props) => {
         // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
         // participant tiles are visible
         onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
-        return (React__default["default"].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
+        return (React__default["default"].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery", 
+            /* @conditional-compile-remove(gallery-layouts) */
+            layout: props.layout }));
     }
     return (React__default["default"].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)]));
 };
@@ -13672,7 +13675,9 @@ const DefaultLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            } }));
+            }, 
+            /* @conditional-compile-remove(gallery-layouts) */
+            layout: 'default' }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
@@ -14746,7 +14751,7 @@ const LargeGalleryLayout = (props) => {
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
-        /* @conditional-compile-remove(gallery-layouts) */ layout: 'largeGallery'
+        /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {
@@ -14923,10 +14928,14 @@ const VideoGallery = (props) => {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
+        const showDisplayNameTrampoline = () => {
+            /* @conditional-compile-remove(gallery-layouts) */
+            return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
+        };
         return (React__default["default"].createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React__default["default"].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !((localTileNotInGrid && isNarrow) ||
+            React__default["default"].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !((localTileNotInGrid && isNarrow) ||
                     /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
-                        '9:16'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
+                        '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default', showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
                 /* @conditional-compile-remove(raise-hand) */
                 raisedHand: localParticipant.raisedHand })));
     }, [
@@ -14948,7 +14957,9 @@ const VideoGallery = (props) => {
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
         theme.effects.roundedCorner4,
         /*@conditional-compile-remove(click-to-call) */
-        localVideoTileSize
+        localVideoTileSize,
+        /* @conditional-compile-remove(gallery-layouts) */
+        layout
     ]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = React.useCallback((userId) => {
@@ -17255,7 +17266,7 @@ const _VideoBackgroundEffectsPicker = (props) => {
         optionsByRow.map((options, rowIndex) => {
             var _a;
             return (React__default["default"].createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
-                options.map((option) => (React__default["default"].createElement(react.FocusZone, { key: option.itemKey, shouldFocusOnMount: option.itemKey === 'none' },
+                options.map((option) => (React__default["default"].createElement(react.FocusZone, { key: option.itemKey, shouldFocusOnMount: option.itemKey.includes('none') },
                     React__default["default"].createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey }))))),
                 fillCount > 0 &&
                     rowIndex === optionsByRow.length - 1 &&
@@ -20578,7 +20589,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:"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",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}}};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$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",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}}};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",moreDrawerGalleryOptionsMenuTitle:"Gallery options",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};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -24012,7 +24023,7 @@ var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const DesktopMoreButton = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     /*@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) */
@@ -24154,6 +24165,7 @@ const DesktopMoreButton = (props) => {
                 styles: menuSubIconStyleSet
             },
             text: localeStrings.strings.call.moreButtonGalleryControlLabel,
+            disabled: props.disableButtonsForHoldScreen,
             subMenuProps: {
                 items: [
                     {
@@ -24231,33 +24243,6 @@ const DesktopMoreButton = (props) => {
                             iconName: 'FocusedContentGalleryLayout',
                             styles: { root: { lineHeight: 0 } }
                         }
-                    },
-                    { key: 'dividerLayoutsKey', itemType: react.ContextualMenuItemType.Divider },
-                    {
-                        key: 'topKey',
-                        text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
-                        canCheck: true,
-                        topDivider: true,
-                        itemProps: {
-                            styles: buttonFlyoutIncreasedSizeStyles
-                        },
-                        iconProps: {
-                            iconName: 'OverflowGalleryTop',
-                            styles: { root: { lineHeight: 0 } }
-                        },
-                        isChecked: galleryPositionTop,
-                        onClick: () => {
-                            if (galleryPositionTop === false) {
-                                props.onUserSetOverflowGalleryPositionChange &&
-                                    props.onUserSetOverflowGalleryPositionChange('HorizontalTop');
-                                setGalleryPositionTop(true);
-                            }
-                            else {
-                                props.onUserSetOverflowGalleryPositionChange &&
-                                    props.onUserSetOverflowGalleryPositionChange('Responsive');
-                                setGalleryPositionTop(false);
-                            }
-                        }
                     }
                 ],
                 calloutProps: {
@@ -24283,8 +24268,36 @@ const DesktopMoreButton = (props) => {
                 styles: { root: { lineHeight: 0 } }
             }
         };
+        /* @conditional-compile-remove(gallery-layouts) */
+        const overflowGalleryOption = {
+            key: 'topKey',
+            text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
+            canCheck: true,
+            topDivider: true,
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            iconProps: {
+                iconName: 'OverflowGalleryTop',
+                styles: { root: { lineHeight: 0 } }
+            },
+            isChecked: galleryPositionTop,
+            onClick: () => {
+                if (galleryPositionTop === false) {
+                    props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('HorizontalTop');
+                    setGalleryPositionTop(true);
+                }
+                else {
+                    props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('Responsive');
+                    setGalleryPositionTop(false);
+                }
+            }
+        };
         /* @conditional-compile-remove(large-gallery) */
         (_c = (_b = galleryOptions.subMenuProps) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.push(largeGalleryOption);
+        /* @conditional-compile-remove(gallery-layouts) */
+        (_e = (_d = galleryOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.push(overflowGalleryOption);
+        /* @conditional-compile-remove(gallery-layouts) */
         moreButtonContextualMenuItems.push(galleryOptions);
     }
     /* @conditional-compile-remove(control-bar-button-injection) */
@@ -24851,6 +24864,57 @@ const MoreDrawer = (props) => {
             secondaryText: (_b = props.selectedMicrophone) === null || _b === void 0 ? void 0 : _b.name
         });
     }
+    /* @conditional-compile-remove(gallery-layouts) */
+    drawerMenuItems.push({
+        itemKey: 'overflowGalleryPositionKey',
+        iconProps: {
+            iconName: 'GalleryOptions',
+            styles: { root: { lineHeight: 0 } }
+        },
+        disabled: props.disableButtonsForHoldScreen,
+        text: localeStrings.strings.call.moreButtonGalleryControlLabel,
+        subMenuProps: [
+            {
+                itemKey: 'dynamicSelectionKey',
+                text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
+                onItemClick: () => {
+                    props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('floatingLocalVideo');
+                    onLightDismiss();
+                },
+                iconProps: {
+                    iconName: 'FloatingLocalVideoGalleryLayout',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                secondaryIconProps: props.userSetGalleryLayout === 'floatingLocalVideo' ? { iconName: 'Accept' } : undefined
+            },
+            {
+                itemKey: 'defaultSelectionKey',
+                text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,
+                onItemClick: () => {
+                    props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');
+                    onLightDismiss();
+                },
+                iconProps: {
+                    iconName: 'DefaultGalleryLayout',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
+            },
+            {
+                itemKey: 'focusedContentSelectionKey',
+                text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,
+                onItemClick: () => {
+                    props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('focusedContent');
+                    onLightDismiss();
+                },
+                iconProps: {
+                    iconName: 'FocusedContentGalleryLayout',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                secondaryIconProps: props.userSetGalleryLayout === 'focusedContent' ? { iconName: 'Accept' } : undefined
+            }
+        ]
+    });
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
         drawerMenuItems.push({
             itemKey: 'people',
@@ -25058,7 +25122,9 @@ const PreparedMoreDrawer = (props) => {
         /* @conditional-compile-remove(close-captions) */
         spokenLanguageMenuTitle: strings.moreDrawerSpokenLanguageMenuTitle,
         /* @conditional-compile-remove(close-captions) */
-        captionLanguageMenuTitle: strings.moreDrawerCaptionLanguageMenuTitle
+        captionLanguageMenuTitle: strings.moreDrawerCaptionLanguageMenuTitle,
+        /* @conditional-compile-remove(gallery-layouts) */
+        galleryOptionsMenuTitle: strings.moreDrawerGalleryOptionsMenuTitle
     }), [strings]);
     const deviceProps = useSelector$1(moreDrawerSelector);
     const callHandlers = useHandlers();
@@ -26584,7 +26650,11 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, 
                         /* @conditional-compile-remove(close-captions) */
-                        isCaptionsSupported: isTeamsCall && hasJoinedCall }))),
+                        isCaptionsSupported: isTeamsCall && hasJoinedCall, 
+                        /* @conditional-compile-remove(gallery-layouts) */
+                        onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, 
+                        /* @conditional-compile-remove(gallery-layouts) */
+                        userSetGalleryLayout: props.userSetGalleryLayout }))),
                 /* @conditional-compile-remove(PSTN-calls) */
                 ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && showDtmfDialpad && (React__default["default"].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default["default"].createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
@@ -27096,7 +27166,13 @@ const networkReconnectTileSelector = reselect__namespace.createSelector([getUser
 const CallPage = (props) => {
     const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, 
     /* @conditional-compile-remove(gallery-layouts) */
-    galleryLayout = 'floatingLocalVideo' } = props;
+    galleryLayout = 'floatingLocalVideo', 
+    /* @conditional-compile-remove(gallery-layouts) */
+    onUserSetGalleryLayoutChange, 
+    /* @conditional-compile-remove(gallery-layouts) */
+    userSetOverflowGalleryPosition = 'Responsive', 
+    /* @conditional-compile-remove(gallery-layouts) */
+    onSetUserSetOverflowGalleryPosition } = props;
     // To use useProps to get these states, we need to create another file wrapping Call,
     // It seems unnecessary in this case, so we get the updated states using this approach.
     const { callStatus } = useSelector$1(callStatusSelector);
@@ -27110,10 +27186,6 @@ const CallPage = (props) => {
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
     const drawerMenuHostId = reactHooks.useId('drawerMenuHost');
-    /* @conditional-compile-remove(gallery-layouts) */
-    const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = React.useState('Responsive');
-    /* @conditional-compile-remove(gallery-layouts) */
-    const [userSetGalleryLayout, setUserSetGalleryLayout] = React.useState(galleryLayout);
     return (React__default["default"].createElement(CallArrangement, { id: drawerMenuHostId, complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && errorBarProps, mutedNotificationProps: mutedNotificationProps, callControlProps: {
             callInvitationURL: callInvitationURL,
             onFetchParticipantMenuItems: onFetchParticipantMenuItems,
@@ -27129,13 +27201,13 @@ const CallPage = (props) => {
             /* @conditional-compile-remove(gallery-layouts) */
             userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
             /* @conditional-compile-remove(gallery-layouts) */
-            userSetGalleryLayout: userSetGalleryLayout }))) : (React__default["default"].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default["default"].createElement(React__default["default"].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
+            userSetGalleryLayout: galleryLayout }))) : (React__default["default"].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default["default"].createElement(React__default["default"].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
         /* @conditional-compile-remove(gallery-layouts) */
-        onUserSetOverflowGalleryPositionChange: setUserSetOverflowGalleryPosition, 
+        onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, 
         /* @conditional-compile-remove(gallery-layouts) */
-        onUserSetGalleryLayoutChange: setUserSetGalleryLayout, 
+        onUserSetGalleryLayoutChange: onUserSetGalleryLayoutChange, 
         /* @conditional-compile-remove(gallery-layouts) */
-        userSetGalleryLayout: userSetGalleryLayout, 
+        userSetGalleryLayout: galleryLayout, 
         /* @conditional-compile-remove(capabilities) */
         capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps }));
 };
@@ -28819,7 +28891,7 @@ const isShowing = (overrideSidePane) => {
     return !!(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive);
 };
 const MainScreen = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const adapter = useAdapter();
     const { camerasCount, microphonesCount } = useSelector$1(deviceCountSelector);
     const hasCameras = camerasCount > 0;
@@ -28847,6 +28919,10 @@ const MainScreen = (props) => {
     const endedCall = useSelector$1(getEndedCall);
     const [sidePaneRenderer, setSidePaneRenderer] = React__default["default"].useState();
     const [injectedSidePaneProps, setInjectedSidePaneProps] = React__default["default"].useState();
+    /* @conditional-compile-remove(gallery-layouts) */
+    const [userSetGalleryLayout, setUserSetGalleryLayout] = React.useState((_c = (_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.galleryOptions) === null || _b === void 0 ? void 0 : _b.layout) !== null && _c !== void 0 ? _c : 'floatingLocalVideo');
+    /* @conditional-compile-remove(gallery-layouts) */
+    const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = React.useState('Responsive');
     const overridePropsRef = React.useRef(props.overrideSidePane);
     React.useEffect(() => {
         setInjectedSidePaneProps(props.overrideSidePane);
@@ -28896,11 +28972,11 @@ const MainScreen = (props) => {
                     adapter.joinCall();
                 }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, 
                 /* @conditional-compile-remove(call-readiness) */
-                deviceChecks: (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks, 
+                deviceChecks: (_d = props.options) === null || _d === void 0 ? void 0 : _d.deviceChecks, 
                 /* @conditional-compile-remove(call-readiness) */
-                onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
+                onPermissionsTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onPermissionsTroubleshootingClick, 
                 /* @conditional-compile-remove(call-readiness) */
-                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick, 
+                onNetworkingTroubleShootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onNetworkingTroubleShootingClick, 
                 /* @conditional-compile-remove(capabilities) */
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
@@ -28914,7 +28990,7 @@ const MainScreen = (props) => {
             pageElement = (React__default["default"].createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
             break;
         case 'leaving':
-            pageElement = (React__default["default"].createElement(NoticePage, { title: (_d = locale.strings.call.leavingCallTitle) !== null && _d !== void 0 ? _d : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
+            pageElement = (React__default["default"].createElement(NoticePage, { title: (_g = locale.strings.call.leavingCallTitle) !== null && _g !== void 0 ? _g : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
             break;
         case 'leftCall': {
             const { title, moreDetails, disableStartCallButton } = getEndedCallStrings(locale, endedCall);
@@ -28935,7 +29011,13 @@ const MainScreen = (props) => {
         case 'call':
             pageElement = (React__default["default"].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
                 /* @conditional-compile-remove(gallery-layouts) */
-                galleryLayout: ((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.galleryOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.options.galleryOptions.layout : 'floatingLocalVideo', 
+                galleryLayout: userSetGalleryLayout, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                onUserSetGalleryLayoutChange: setUserSetGalleryLayout, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
                 /* @conditional-compile-remove(capabilities) */
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
@@ -28951,7 +29033,7 @@ const MainScreen = (props) => {
         case 'unsupportedEnvironment':
             pageElement = (React__default["default"].createElement(React__default["default"].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default["default"].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_g = props.options) === null || _g === void 0 ? void 0 : _g.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
+            React__default["default"].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_h = props.options) === null || _h === void 0 ? void 0 : _h.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {