@azure/communication-react 1.7.1-alpha-202308170011 → 1.7.1-alpha-202308172328

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.1-alpha-202308170011';
+var telemetryVersion = '1.7.1-alpha-202308172328';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -360,6 +360,14 @@ const getRemoteParticipants$1 = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.remoteParticipants;
 };
+/* @conditional-compile-remove(raise-hand) */
+/**
+ * @private
+ */
+const getLocalParticipantRaisedHand$1 = (state, props) => {
+    var _a, _b;
+    return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.raiseHand) === null || _b === void 0 ? void 0 : _b.localParticipantRaisedHand;
+};
 /**
  * @private
  */
@@ -602,6 +610,19 @@ const cameraButtonSelector = reselect__namespace.createSelector([
         selectedCamera: deviceManager.selectedCamera
     };
 });
+/* @conditional-compile-remove(raise-hand) */
+/**
+ * Selector for {@link RaiseHandButton} component.
+ *
+ * @public
+ */
+const raiseHandButtonSelector = reselect__namespace.createSelector([getLocalParticipantRaisedHand$1, getCallState], (raisedHand, callState) => {
+    var _a;
+    return {
+        checked: raisedHand ? true : false,
+        disabled: callState === 'InLobby' ? true : (_a = callState === 'Connecting') !== null && _a !== void 0 ? _a : false
+    };
+});
 /**
  * Selector for {@link ScreenShareButton} component.
  *
@@ -624,7 +645,7 @@ const screenShareButtonSelector = reselect__namespace.createSelector([
             role === 'Consumer' ||
             role === 'Attendee';
     /* @conditional-compile-remove(PSTN-calls) */
-    disabled = disabled || ['InLobby', 'Connecting'].includes(callState);
+    disabled = disabled || ['InLobby', 'Connecting', 'LocalHold'].includes(callState);
     return {
         checked: isScreenSharingOn,
         disabled
@@ -794,6 +815,22 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }, options);
         }
     });
+    /* @conditional-compile-remove(raise-hand) */
+    const onRaiseHand = () => __awaiter$L(void 0, void 0, void 0, function* () { var _a; return yield ((_a = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _a === void 0 ? void 0 : _a.raiseHand()); });
+    /* @conditional-compile-remove(raise-hand) */
+    const onLowerHand = () => __awaiter$L(void 0, void 0, void 0, function* () { var _b; return yield ((_b = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _b === void 0 ? void 0 : _b.lowerHand()); });
+    /* @conditional-compile-remove(raise-hand) */
+    const onToggleRaiseHand = () => __awaiter$L(void 0, void 0, void 0, function* () {
+        const raiseHandFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand);
+        const localUserId = callClient.getState().userId;
+        const isLocalRaisedHand = raiseHandFeature === null || raiseHandFeature === void 0 ? void 0 : raiseHandFeature.getRaisedHands().find((publishedState) => toFlatCommunicationIdentifier(publishedState.identifier) === toFlatCommunicationIdentifier(localUserId));
+        if (isLocalRaisedHand) {
+            yield (raiseHandFeature === null || raiseHandFeature === void 0 ? void 0 : raiseHandFeature.lowerHand());
+        }
+        else {
+            yield (raiseHandFeature === null || raiseHandFeature === void 0 ? void 0 : raiseHandFeature.raiseHand());
+        }
+    });
     const onToggleMicrophone = () => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
@@ -807,7 +844,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
     /* @conditional-compile-remove(PSTN-calls) */
     const onToggleHold = () => __awaiter$L(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
     const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$L(void 0, void 0, void 0, function* () {
-        var _a;
+        var _c;
         if (!call || call.localVideoStreams.length === 0) {
             return;
         }
@@ -819,7 +856,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         if (!localStream) {
             return;
         }
-        const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
+        const { view } = (_c = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _c !== void 0 ? _c : {};
         return view ? { view } : undefined;
     });
     const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$L(void 0, void 0, void 0, function* () {
@@ -946,7 +983,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
     });
     /* @conditional-compile-remove(video-background-effects) */
     const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$L(void 0, void 0, void 0, function* () {
-        var _b;
+        var _d;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -954,13 +991,13 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
                 throw new Error(`Video background effects dependency not resolved`);
             }
             const createEffect = (options === null || options === void 0 ? void 0 : options.onResolveVideoBackgroundEffectsDependency) &&
-                ((_b = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _b === void 0 ? void 0 : _b.createBackgroundBlurEffect);
+                ((_d = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _d === void 0 ? void 0 : _d.createBackgroundBlurEffect);
             return createEffect && stream.feature(communicationCalling.Features.VideoEffects).startEffects(createEffect(backgroundBlurConfig));
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
     const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$L(void 0, void 0, void 0, function* () {
-        var _c;
+        var _e;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -968,7 +1005,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
                 throw new Error(`Video background effects dependency not resolved`);
             }
             const createEffect = (options === null || options === void 0 ? void 0 : options.onResolveVideoBackgroundEffectsDependency) &&
-                ((_c = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _c === void 0 ? void 0 : _c.createBackgroundReplacementEffect);
+                ((_e = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _e === void 0 ? void 0 : _e.createBackgroundReplacementEffect);
             return (createEffect && stream.feature(communicationCalling.Features.VideoEffects).startEffects(createEffect(backgroundReplacementConfig)));
         }
     });
@@ -1007,6 +1044,12 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         onDisposeLocalStreamView,
         onDisposeRemoteScreenShareStreamView,
         onDisposeRemoteVideoStreamView,
+        /* @conditional-compile-remove(raise-hand) */
+        onRaiseHand,
+        /* @conditional-compile-remove(raise-hand) */
+        onLowerHand,
+        /* @conditional-compile-remove(raise-hand) */
+        onToggleRaiseHand,
         /* @conditional-compile-remove(PSTN-calls) */
         onAddParticipant: notImplemented,
         onRemoveParticipant: notImplemented,
@@ -1376,6 +1419,7 @@ const deviceManagerDeclaratify = (deviceManager, context, internalContext) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 /**
  * Error thrown from failed stateful API methods.
  *
@@ -1648,6 +1692,15 @@ function convertFromSDKToDeclarativeVideoStreamVideoEffects(videoEffects) {
         activeEffects: videoEffects
     };
 }
+/* @conditional-compile-remove(raise-hand) */
+/**
+ * @private
+ */
+function convertFromSDKToRaisedHandState(raisedHand) {
+    return {
+        raisedHandOrderPosition: raisedHand.order
+    };
+}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -1934,8 +1987,16 @@ class CallContext$2 {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                call.raiseHand.raisedHands = raisedHands;
-                call.raiseHand.localParticipantRaisedHand = raisedHands.find((raisedHand) => toFlatCommunicationIdentifier(raisedHand.identifier) === toFlatCommunicationIdentifier(this._state.userId));
+                call.raiseHand.raisedHands = raisedHands.map((raisedHand) => {
+                    return convertFromSDKToRaisedHandState(raisedHand);
+                });
+                const raisedHand = raisedHands.find((raisedHand) => toFlatCommunicationIdentifier(raisedHand.identifier) === toFlatCommunicationIdentifier(this._state.userId));
+                if (raisedHand) {
+                    call.raiseHand.localParticipantRaisedHand = convertFromSDKToRaisedHandState(raisedHand);
+                }
+                else {
+                    call.raiseHand.localParticipantRaisedHand = undefined;
+                }
             }
         });
     }
@@ -1946,7 +2007,7 @@ class CallContext$2 {
             if (call) {
                 const participant = call.remoteParticipants[participantKey];
                 if (participant) {
-                    participant.raisedHand = raisedHand;
+                    participant.raisedHand = raisedHand ? convertFromSDKToRaisedHandState(raisedHand) : raisedHand;
                 }
             }
         });
@@ -6082,6 +6143,10 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonRaiseHand: React__default['default'].createElement(reactIcons.HandRight20Filled, null),
     /* @conditional-compile-remove(raise-hand) */
     ControlButtonLowerHand: React__default['default'].createElement(reactIcons.HandRightOff20Filled, null),
+    /* @conditional-compile-remove(raise-hand) */
+    RaiseHandContextualMenuItem: React__default['default'].createElement(reactIcons.HandRight20Regular, null),
+    /* @conditional-compile-remove(raise-hand) */
+    LowerHandContextualMenuItem: React__default['default'].createElement(reactIcons.HandRightOff20Regular, null),
     /* @conditional-compile-remove(file-sharing) */
     CancelFileUpload: React__default['default'].createElement(reactIcons.Dismiss16Regular, null),
     /* @conditional-compile-remove(file-sharing) */
@@ -11295,25 +11360,56 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
         (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
         (
         /* @conditional-compile-remove(raise-hand) */ callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand)
-        ? () => (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
-            /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
-                    alignItems: 'center',
-                    padding: '0.2rem',
-                    backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
-                    borderRadius: '1rem'
-                } },
-                callingParticipant.raisedHand.order && (React__default['default'].createElement(react.Stack.Item, null,
-                    React__default['default'].createElement(react.Text, null, callingParticipant.raisedHand.order))),
-                React__default['default'].createElement(react.Stack.Item, null,
-                    React__default['default'].createElement(RaisedHandIcon, null)))),
-            callingParticipant.isScreenSharing && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles$2, ariaLabel: strings.sharingIconLabel })),
-            callingParticipant.isMuted && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel }))))
+        ? () => {
+            var _a;
+            return (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
+                /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
+                        alignItems: 'center',
+                        padding: '0.2rem',
+                        backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
+                        borderRadius: '1rem'
+                    } },
+                    callingParticipant.raisedHand.raisedHandOrderPosition && (React__default['default'].createElement(react.Stack.Item, null,
+                        React__default['default'].createElement(react.Text, null, (_a = callingParticipant.raisedHand) === null || _a === void 0 ? void 0 : _a.raisedHandOrderPosition))),
+                    React__default['default'].createElement(react.Stack.Item, null,
+                        React__default['default'].createElement(RaisedHandIcon, null)))),
+                callingParticipant.isScreenSharing && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles$2, ariaLabel: strings.sharingIconLabel })),
+                callingParticipant.isMuted && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel }))));
+        }
         : () => null;
     return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: participant.displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
         participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
 };
+/**
+ * Sort participants by raised hand order position
+ */
+const sortParticipants = (participants) => {
+    /* @conditional-compile-remove(raise-hand) */
+    const isParticipantListCallParticipant = function (participant) {
+        return 'raisedHand' in participant;
+    };
+    /* @conditional-compile-remove(raise-hand) */
+    participants.sort((a, b) => {
+        if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {
+            return 0;
+        }
+        const callA = a;
+        const callB = b;
+        if (callA.raisedHand && callB.raisedHand) {
+            return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;
+        }
+        else if (callA.raisedHand) {
+            return -1;
+        }
+        else if (callB.raisedHand) {
+            return 1;
+        }
+        return 0;
+    });
+    return participants;
+};
 const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
     if (!excludeMe || !myUserId) {
         return [...participants];
@@ -11349,6 +11445,7 @@ const ParticipantList = (props) => {
     const displayedParticipants = React.useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
+    sortParticipants(displayedParticipants);
     const createParticipantMenuItems = React.useCallback((participant) => {
         var _a, _b;
         let menuItems = [];
@@ -12220,7 +12317,7 @@ const VideoTile = (props) => {
                     isPinned && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) })))))),
             children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
-            /* @conditional-compile-remove(raise-hand) */ raisedHand && (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
+            /* @conditional-compile-remove(raise-hand) */ raisedHand && canShowLabel && (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
                     alignItems: 'center',
                     padding: '0.2rem',
                     backgroundColor: theme.palette.white,
@@ -12231,7 +12328,7 @@ const VideoTile = (props) => {
                     position: 'absolute'
                 } },
                 React__default['default'].createElement(react.Stack.Item, null,
-                    React__default['default'].createElement(react.Text, null, raisedHand.order)),
+                    React__default['default'].createElement(react.Text, null, raisedHand.raisedHandOrderPosition)),
                 React__default['default'].createElement(react.Stack.Item, null,
                     React__default['default'].createElement(RaisedHandIcon, null)))))));
 };
@@ -12658,6 +12755,10 @@ const smartDominantSpeakerParticipants = (args) => {
     newVisibleParticipants = newVisibleParticipants.concat(remainingParticipants);
     return newVisibleParticipants;
 };
+/**
+ * maps the participants array to an object with userId as key
+ * @private
+ */
 const participantsById = (participants) => {
     const response = {};
     participants.forEach((p) => (response[p.userId] = p));
@@ -12669,17 +12770,33 @@ const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
     const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
+    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
+    /* @conditional-compile-remove(gallery-layouts) */
+    layout } = props;
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const participantsToSortTrampoline = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        return layout !== 'speaker' ? videoParticipants : remoteParticipants;
+    };
     visibleGridParticipants.current =
         pinnedParticipantUserIds.length > 0 || isScreenShareActive
             ? []
             : smartDominantSpeakerParticipants({
-                participants: videoParticipants,
+                participants: participantsToSortTrampoline(),
                 dominantSpeakers,
                 lastVisibleParticipants: visibleGridParticipants.current,
                 maxDominantSpeakers: maxRemoteVideoStreams
             }).slice(0, maxRemoteVideoStreams);
+    /* @conditional-compile-remove(gallery-layouts) */
+    const dominantSpeakerToGrid = layout === 'speaker'
+        ? dominantSpeakers && dominantSpeakers[0]
+            ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
+            : [visibleGridParticipants.current[0]]
+        : [];
+    /* @conditional-compile-remove(gallery-layouts) */
+    if (dominantSpeakerToGrid[0]) {
+        visibleGridParticipants.current = dominantSpeakerToGrid;
+    }
     const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));
     const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -13575,7 +13692,8 @@ const DefaultLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'default'
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {
@@ -13628,8 +13746,14 @@ const DefaultLayout = (props) => {
     , { 
         /* @conditional-compile-remove(vertical-gallery) */
         horizontal: overflowGalleryPosition === 'VerticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
+        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (overflowGallery) : (React__default['default'].createElement(React__default['default'].Fragment, null)),
         screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        overflowGallery));
+        overflowGalleryTrampoline$2(overflowGallery, 
+        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition)));
+};
+const overflowGalleryTrampoline$2 = (gallery, galleryPosition) => {
+    /* @conditional-compile-remove(gallery-layouts) */
+    return galleryPosition !== 'HorizontalTop' ? gallery : React__default['default'].createElement(React__default['default'].Fragment, null);
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14394,7 +14518,8 @@ const FloatingLocalVideoLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo'
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {
@@ -14482,6 +14607,134 @@ const FloatingLocalVideoLayout = (props) => {
         setIndexesToRender,
         /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
     ]);
+    return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
+        wrappedLocalVideoComponent,
+        React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }),
+        React__default['default'].createElement(react.Stack
+        /* @conditional-compile-remove(vertical-gallery) */
+        , { 
+            /* @conditional-compile-remove(vertical-gallery) */
+            horizontal: overflowGalleryPosition === 'VerticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
+            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (overflowGallery) : (React__default['default'].createElement(React__default['default'].Fragment, null)),
+            screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+            overflowGalleryTrampoline$1(overflowGallery, 
+            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition))));
+};
+const overflowGalleryTrampoline$1 = (gallery, galleryPosition) => {
+    /* @conditional-compile-remove(gallery-layouts) */
+    return galleryPosition !== 'HorizontalTop' ? gallery : React__default['default'].createElement(React__default['default'].Fragment, null);
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Layout for the gallery mode to highlight the current dominant speaker
+ *
+ * @private
+ */
+const SpeakerVideoLayout = (props) => {
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    /* @conditional-compile-remove(vertical-gallery) */ parentHeight, 
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [], 
+    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize } = props;
+    const theme = react.useTheme();
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    /* @conditional-compile-remove(vertical-gallery) */
+    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+    // This is for tracking the number of children in the first page of overflow gallery.
+    // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
+    const childrenPerPage = React.useRef(4);
+    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
+        remoteParticipants,
+        dominantSpeakers,
+        maxRemoteVideoStreams,
+        isScreenShareActive: !!screenShareComponent,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            : childrenPerPage.current,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'speaker'
+    });
+    let activeVideoStreams = 0;
+    const gridTiles = gridParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    const shouldFloatLocalVideo = remoteParticipants.length > 0;
+    if (!shouldFloatLocalVideo && localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
+    /**
+     * instantiate indexes available to render with indexes available that would be on first page
+     *
+     * For some components which do not strictly follow the order of the array, we might
+     * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
+     * this case when those components are here
+     */
+    const [indexesToRender, setIndexesToRender] = React.useState([]);
+    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
+                indexesToRender &&
+                indexesToRender.includes(i) &&
+                activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    const layerHostId = reactHooks.useId('layerhost');
+    const localVideoSizeRem = React.useMemo(() => {
+        if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {
+            return SMALL_FLOATING_MODAL_SIZE_REM;
+        }
+        /* @conditional-compile-remove(vertical-gallery) */
+        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
+            return isNarrow
+                ? SMALL_FLOATING_MODAL_SIZE_REM
+                : isShort
+                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
+                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
+        }
+        /*@conditional-compile-remove(click-to-call) */
+        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {
+            return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
+        }
+        return LARGE_FLOATING_MODAL_SIZE_REM;
+    }, [
+        overflowGalleryTiles.length,
+        isNarrow,
+        screenShareComponent,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+    ]);
+    const wrappedLocalVideoComponent = localVideoComponent || (screenShareComponent && localVideoComponent) ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, 
+        /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition)) }, localVideoComponent)) : undefined;
+    const overflowGallery = React.useMemo(() => {
+        if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
+            return null;
+        }
+        return (React__default['default'].createElement(OverflowGallery
+        /* @conditional-compile-remove(vertical-gallery) */
+        , { 
+            /* @conditional-compile-remove(vertical-gallery) */
+            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
+                childrenPerPage.current = n;
+            } }));
+    }, [
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        screenShareComponent,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        setIndexesToRender,
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
+    ]);
     return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
         React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }),
@@ -14559,7 +14812,8 @@ const VideoGallery = (props) => {
         : undefined;
     /* @conditional-compile-remove(pinned-participants) */
     const drawerMenuHostId = reactHooks.useId('drawerMenuHost', drawerMenuHostIdFromProp);
-    const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
+    const localTileNotInGrid = !!((layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&
+        remoteParticipants.length > 0);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -14592,14 +14846,16 @@ const VideoGallery = (props) => {
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
-        const localVideoTileStyles = react.concatStyleSets(shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {}, {
+        const localVideoTileStyles = react.concatStyleSets(localTileNotInGrid ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         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: !((shouldFloatLocalVideo && 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: isNarrow ? '' : strings.localVideoLabel, 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'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
+                /* @conditional-compile-remove(raise-hand) */
+                raisedHand: localParticipant.raisedHand })));
     }, [
         isNarrow,
         localParticipant,
@@ -14609,7 +14865,7 @@ const VideoGallery = (props) => {
         onDisposeLocalStreamView,
         onRenderAvatar,
         onRenderLocalVideoTile,
-        shouldFloatLocalVideo,
+        localTileNotInGrid,
         showCameraSwitcherInLocalPreview,
         showMuteIndicator,
         strings.localVideoCameraSwitcherLabel,
@@ -14737,6 +14993,10 @@ const VideoGallery = (props) => {
         if (layout === 'floatingLocalVideo') {
             return React__default['default'].createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }
+        /* @conditional-compile-remove(gallery-layouts) */
+        if (layout === 'speaker') {
+            return React__default['default'].createElement(SpeakerVideoLayout, Object.assign({}, layoutProps));
+        }
         return React__default['default'].createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [layout, layoutProps]);
     return (React__default['default'].createElement("div", { 
@@ -15862,6 +16122,40 @@ const screenshareButtonStyles = (theme) => ({
     labelChecked: { color: react.DefaultPalette.white }
 });
 
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(raise-hand) */
+/**
+ * A button to start / stop screen sharing.
+ *
+ * Can be used with {@link ControlBar}.
+ *
+ * @public
+ */
+const RaiseHandButton = (props) => {
+    var _a, _b, _c, _d;
+    const localeStrings = useLocale$1().strings.raiseHandButton;
+    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    const theme = react.useTheme();
+    const styles = raiseHandButtonStyles(theme);
+    const onRenderRaiseHandIcon = () => (React__default['default'].createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonRaiseHand" }));
+    const onRenderLowerHandIcon = () => (React__default['default'].createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" }));
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', disabled: props.disabled })));
+};
+/* @conditional-compile-remove(raise-hand) */
+const raiseHandButtonStyles = (theme) => ({
+    rootChecked: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white,
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white}` }
+    },
+    rootCheckedHovered: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white,
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white}` }
+    },
+    labelChecked: { color: react.DefaultPalette.white }
+});
+
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const PictureInPictureInPicturePrimaryTile = (props) => {
@@ -17238,15 +17532,25 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants) => {
         })
             .map((participant) => {
             const state = _isRingingPSTNParticipant(participant);
-            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, participant.displayName);
+            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, participant.displayName, 
+            /* @conditional-compile-remove(raise-hand) */
+            participant.raisedHand);
         }));
     });
 };
-const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName) => {
-    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName);
+const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName, 
+/* @conditional-compile-remove(raise-hand) */
+raisedHand // temp unknown type to build stable
+) => {
+    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
+    /* @conditional-compile-remove(raise-hand) */
+    raisedHand);
 });
 /** @private */
-const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName) => {
+const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, 
+/* @conditional-compile-remove(raise-hand) */
+raisedHand // temp unknown type to build stable
+) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
     let screenShareStream = undefined;
@@ -17270,7 +17574,9 @@ const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted
         isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
-        state
+        state,
+        /* @conditional-compile-remove(raise-hand) */
+        raisedHand: raisedHand
     };
 };
 const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
@@ -17288,7 +17594,8 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
 };
 /** @private */
 const memoizeLocalParticipant = memoizeOne__default['default']((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
-/* @conditional-compile-remove(rooms) */ role) => {
+/* @conditional-compile-remove(rooms) */ role, 
+/* @conditional-compile-remove(raise-hand) */ raisedHand) => {
     var _a, _b;
     return ({
         userId: identifier,
@@ -17301,7 +17608,9 @@ const memoizeLocalParticipant = memoizeOne__default['default']((identifier, disp
             renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
         },
         /* @conditional-compile-remove(rooms) */
-        role
+        role,
+        /* @conditional-compile-remove(raise-hand) */
+        raisedHand: raisedHand
     });
 });
 
@@ -17322,12 +17631,16 @@ const videoGallerySelector = reselect.createSelector([
     /* @conditional-compile-remove(optimal-video-count) */
     getOptimalVideoCount,
     /* @conditional-compile-remove(rooms) */
-    getRole
+    getRole,
+    /* @conditional-compile-remove(raise-hand) */
+    getLocalParticipantRaisedHand$1
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
 /* @conditional-compile-remove(optimal-video-count) */
 optimalVideoCount, 
 /* @conditional-compile-remove(rooms) */
-role) => {
+role, 
+/* @conditional-compile-remove(raise-hand) */
+raisedHand) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -17337,11 +17650,15 @@ role) => {
     const noRemoteParticipants = [];
     return {
         screenShareParticipant: screenShareRemoteParticipant
-            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName)
+            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
+            /* @conditional-compile-remove(raise-hand) */
+            screenShareRemoteParticipant.raisedHand)
             : undefined,
         localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
         /* @conditional-compile-remove(rooms) */
-        role),
+        role, 
+        /* @conditional-compile-remove(raise-hand) */
+        raisedHand),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants)),
         dominantSpeakers: dominantSpeakerIds,
         /* @conditional-compile-remove(optimal-video-count) */
@@ -17374,18 +17691,12 @@ const convertRemoteParticipantToParticipantListParticipant = (userId, displayNam
 /**
  * @private
  */
-const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, localUserCanRemoveOthers) => {
-    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, 
-    /* @conditional-compile-remove(raise-hand) */ raisedHand, localUserCanRemoveOthers);
+const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers) => {
+    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers);
 });
 /* @conditional-compile-remove(raise-hand) */
-const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, localUserCanRemoveOthers) => {
-    return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers)), { 
-        /* @conditional-compile-remove(raise-hand) */ raisedHand });
+const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers) => {
+    return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers)), { raisedHand });
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17446,9 +17757,12 @@ const participantListSelector = reselect.createSelector([
     getRemoteParticipants$1,
     getIsScreenSharingOn,
     getIsMuted,
+    /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand$1,
     getRole,
     getParticipantCount
-], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, role, partitipantCount) => {
+], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
+/* @conditional-compile-remove(raise-hand) */
+raisedHand, role, partitipantCount) => {
     const localUserCanRemoveOthers = localUserCanRemoveOthersTrampoline(role);
     const participants = remoteParticipants
         ? convertRemoteParticipantsToParticipantListParticipants(updateUserDisplayNamesTrampoline$1(Object.values(remoteParticipants)), localUserCanRemoveOthers)
@@ -17458,6 +17772,8 @@ const participantListSelector = reselect.createSelector([
         displayName: displayName,
         isScreenSharing: isScreenSharingOn,
         isMuted: isMuted,
+        /* @conditional-compile-remove(raise-hand) */
+        raisedHand: raisedHand,
         state: 'Connected',
         // Local participant can never remove themselves.
         isRemovable: false
@@ -17756,6 +18072,10 @@ const getSelector$1 = (component) => {
     if (component === HoldButton) {
         return findConditionalCompiledSelector(component);
     }
+    /* @conditional-compile-remove(raise-hand) */
+    if (component === RaiseHandButton) {
+        return findConditionalCompiledSelector(component);
+    }
     return findSelector$1(component);
 };
 const findSelector$1 = (component) => {
@@ -17786,11 +18106,15 @@ const findSelector$1 = (component) => {
     }
     return undefined;
 };
-/* @conditional-compile-remove(PSTN-calls) */
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(raise-hand) */
 const findConditionalCompiledSelector = (component) => {
     switch (component) {
         case HoldButton:
             return holdButtonSelector;
+        /* @conditional-compile-remove(raise-hand) */
+        case RaiseHandButton:
+            /* @conditional-compile-remove(raise-hand) */
+            return raiseHandButtonSelector;
     }
 };
 
@@ -19782,7 +20106,15 @@ const COMPOSITE_ONLY_ICONS = {
     /* @conditional-compile-remove(video-background-effects) */
     RemoveVideoBackgroundEffect: React__default['default'].createElement(reactIcons.VideoPerson20Filled, null),
     /* @conditional-compile-remove(gallery-layouts) */
-    GalleryOptions: React__default['default'].createElement(reactIcons.Grid20Regular, null)
+    GalleryOptions: React__default['default'].createElement(reactIcons.Grid20Regular, null),
+    /* @conditional-compile-remove(gallery-layouts) */
+    OverflowGalleryTop: React__default['default'].createElement(reactIcons.WindowHeaderHorizontal20Regular, null),
+    /* @conditional-compile-remove(gallery-layouts) */
+    SpeakerGalleryLayout: React__default['default'].createElement(reactIcons.PersonCircle20Regular, null),
+    /* @conditional-compile-remove(gallery-layouts) */
+    DefaultGalleryLayout: React__default['default'].createElement(reactIcons.TableSimple20Regular, null),
+    /* @conditional-compile-remove(gallery-layouts) */
+    FloatingLocalVideoGalleryLayout: React__default['default'].createElement(reactIcons.PictureInPicture20Regular, null)
 };
 /**
  * The default set of icons that are available to used in the Composites.
@@ -19815,7 +20147,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",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top"};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",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",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout"};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
 
 var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_GB = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
 
@@ -21530,10 +21862,16 @@ const ChatScreen = (props) => {
         }
     }), [adapter, fullSizeAttachments]);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const handleOnDownloadImage = (blobUrl, filename) => {
-        // Place holder function for download handler
-        console.log(blobUrl, filename);
-    };
+    const onImageDownloadButtonClicked = React.useCallback((imageUrl, saveAsName) => {
+        // Create a new anchor element
+        const a = document.createElement('a');
+        // Set the href and download attributes for the anchor element
+        a.href = imageUrl;
+        a.download = saveAsName || 'download';
+        // Programmatically click the anchor element to trigger the download
+        a.click();
+        a.remove();
+    }, []);
     const AttachFileButton = React.useCallback(() => {
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
             return null;
@@ -21571,7 +21909,7 @@ const ChatScreen = (props) => {
             /* @conditional-compile-remove(chat-composite-participant-pane) */
             (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        galleryImages && galleryImages.length > 0 && (React__default['default'].createElement(ImageGallery, { images: galleryImages, onDismiss: () => setGalleryImages(undefined), onImageDownloadButtonClicked: handleOnDownloadImage }))));
+        galleryImages && galleryImages.length > 0 && (React__default['default'].createElement(ImageGallery, { images: galleryImages, onDismiss: () => setGalleryImages(undefined), onImageDownloadButtonClicked: onImageDownloadButtonClicked }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -21986,7 +22324,7 @@ const disableCallControls = (callControlOptions, disabledControls) => {
  * @returns whether a button is disabled
  * @private
  */
-const isDisabled$2 = (option) => {
+const isDisabled$3 = (option) => {
     if (option === undefined || typeof option === 'boolean') {
         return false;
     }
@@ -22148,6 +22486,21 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     onRemoveParticipant: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
+    /* @conditional-compile-remove(raise-hand) */
+    onRaiseHand: () => __awaiter$g(void 0, void 0, void 0, function* () {
+        yield adapter.raiseHand();
+    }),
+    /* @conditional-compile-remove(raise-hand) */
+    onLowerHand: () => __awaiter$g(void 0, void 0, void 0, function* () {
+        yield adapter.lowerHand();
+    }),
+    /* @conditional-compile-remove(raise-hand) */
+    onToggleRaiseHand: () => __awaiter$g(void 0, void 0, void 0, function* () {
+        var _b;
+        ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
+            ? yield adapter.lowerHand()
+            : yield adapter.raiseHand();
+    }),
     onSelectCamera: (deviceInfo, options) => __awaiter$g(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
@@ -22171,12 +22524,12 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
     onToggleMicrophone: () => __awaiter$g(void 0, void 0, void 0, function* () {
-        var _b;
-        return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isMuted) ? yield adapter.unmute() : yield adapter.mute();
+        var _c;
+        return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
     onToggleScreenShare: () => __awaiter$g(void 0, void 0, void 0, function* () {
-        var _c;
-        return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isScreenSharingOn)
+        var _d;
+        return ((_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
@@ -22656,6 +23009,11 @@ const getDeviceManager = (state) => state.devices;
  * @private
  */
 const getIsScreenShareOn = (state) => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn) !== null && _b !== void 0 ? _b : false; };
+/* @conditional-compile-remove(raise-hand) */
+/**
+ * @private
+ */
+const getLocalParticipantRaisedHand = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.raiseHand.localParticipantRaisedHand; };
 /**
  * @private
  */
@@ -22763,9 +23121,9 @@ const Participants = (props) => {
         var _a;
         return concatButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.increaseFlyoutItemSize, props.styles]);
-    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$1(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
+    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$2(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
 };
-const isDisabled$1 = (option) => {
+const isDisabled$2 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -22785,13 +23143,13 @@ const ScreenShare = (props) => {
     const screenShareButtonDisabled = () => {
         var _a;
         /* @conditional-compile-remove(capabilities) */ /* @conditional-compile-remove(PSTN-calls) */
-        return (_a = screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) !== null && _a !== void 0 ? _a : isDisabled(props.option);
+        return (_a = screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) !== null && _a !== void 0 ? _a : isDisabled$1(props.option);
     };
     return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() ||
             props.disabled ||
             /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), styles: styles })));
 };
-const isDisabled = (option) => {
+const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -23026,6 +23384,23 @@ const callArrangementContainerStyles = (verticalControlBar) => {
     };
 };
 
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(raise-hand) */
+/** @private */
+const RaiseHand = (props) => {
+    const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
+    const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
+    const raiseHandButtonDisabled = isDisabled(props.option);
+    return (React__default['default'].createElement(RaiseHandButton, Object.assign({ "data-ui-id": "call-composite-raisehand-button" }, raiseHandButtonProps, { showLabel: props.displayType !== 'compact', disabled: raiseHandButtonDisabled || props.disabled, styles: styles })));
+};
+/* @conditional-compile-remove(raise-hand) */
+const isDisabled = (option) => {
+    if (option === undefined || option === true || option === false) {
+        return false;
+    }
+    return option.disabled;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Enforce a background color on control bar to ensure it matches the composite background color.
 const controlBarStyles = react.memoizeFunction((background) => ({ root: { background: background } }));
@@ -23057,6 +23432,8 @@ const CallControls = (props) => {
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(raise-hand) */
+    const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = useAdapter().getState().alternateCallerId;
     /* @conditional-compile-remove(new-call-control-bar) */
@@ -23075,7 +23452,7 @@ const CallControls = (props) => {
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
-                disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton),
+                disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton),
                 ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
@@ -23091,7 +23468,7 @@ const CallControls = (props) => {
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
-                disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.holdButton),
+                disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.holdButton),
                 ['data-ui-id']: 'hold-button'
             });
         }
@@ -23110,6 +23487,26 @@ const CallControls = (props) => {
                 }
             });
         }
+        /* @conditional-compile-remove(raise-hand) */
+        if (raiseHandButtonIsEnabled) {
+            items.push({
+                key: 'raiseHandButtonKey',
+                text: raiseHandButtonProps.checked
+                    ? localeStrings.component.strings.raiseHandButton.onLabel
+                    : localeStrings.component.strings.raiseHandButton.offLabel,
+                onClick: () => {
+                    if (raiseHandButtonProps.onToggleRaiseHand) {
+                        raiseHandButtonProps.onToggleRaiseHand();
+                    }
+                },
+                iconProps: { iconName: 'RaiseHandContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                },
+                disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.raiseHandButton),
+                ['data-ui-id']: 'raise-hand-button'
+            });
+        }
         return items;
     };
     /* @conditional-compile-remove(PSTN-calls) */
@@ -23127,20 +23524,23 @@ const CallControls = (props) => {
     const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
     const microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
     const cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
+    /* @conditional-compile-remove(raise-hand) */
+    const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
             React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
-                cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) })),
-                screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
+                microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                /* @conditional-compile-remove(raise-hand) */ raiseHandButtonIsEnabled && !props.isMobile && (React__default['default'].createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
+                screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
                     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) })),
+                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 customButtons['primary'],
@@ -23419,13 +23819,67 @@ const DesktopMoreButton = (props) => {
             text: localeStrings.strings.call.moreButtonGalleryControlLabel,
             subMenuProps: {
                 items: [
+                    {
+                        key: 'speakerSelectionKey',
+                        text: localeStrings.strings.call.moreButtonGallerySpeakerLayoutLabel,
+                        canCheck: true,
+                        itemProps: {
+                            styles: buttonFlyoutIncreasedSizeStyles
+                        },
+                        isChecked: props.userSetGalleryLayout === 'speaker',
+                        onClick: () => {
+                            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('speaker');
+                        },
+                        iconProps: {
+                            iconName: 'SpeakerGalleryLayout',
+                            styles: { root: { lineHeight: 0 } }
+                        }
+                    },
+                    {
+                        key: 'dynamicSelectionKey',
+                        text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
+                        canCheck: true,
+                        itemProps: {
+                            styles: buttonFlyoutIncreasedSizeStyles
+                        },
+                        isChecked: props.userSetGalleryLayout === 'floatingLocalVideo',
+                        onClick: () => {
+                            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('floatingLocalVideo');
+                        },
+                        iconProps: {
+                            iconName: 'FloatingLocalVideoGalleryLayout',
+                            styles: { root: { lineHeight: 0 } }
+                        }
+                    },
+                    {
+                        key: 'defaultSelectionKey',
+                        text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,
+                        canCheck: true,
+                        itemProps: {
+                            styles: buttonFlyoutIncreasedSizeStyles
+                        },
+                        isChecked: props.userSetGalleryLayout === 'default',
+                        onClick: () => {
+                            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');
+                        },
+                        iconProps: {
+                            iconName: 'DefaultGalleryLayout',
+                            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) {
@@ -23630,15 +24084,19 @@ const CommonCallControlBar = (props) => {
                                 React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
                                     microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.microphoneButton) })),
                                     cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton), 
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.cameraButton), 
                                         /* @conditional-compile-remove(video-background-effects) */
                                         onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.cameraButtonRef })),
+                                    /* @conditional-compile-remove(raise-hand) */ !props.mobileView &&
+                                        isEnabled$1(options.raiseHandButton) && (React__default['default'].createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.microphoneButton) })),
                                     screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.screenShareButton) })), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
                                     _a.slice(0, props.mobileView
                                         ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
                                         : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
@@ -23653,14 +24111,20 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(close-captions) */
                                         isCaptionsSupported: props.isCaptionsSupported, 
                                         /* @conditional-compile-remove(close-captions) */
-                                        onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange })),
+                                        onCaptionsSettingsClick: openCaptionsSettingsModal, 
+                                        /* @conditional-compile-remove(gallery-layouts) */
+                                        onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, 
+                                        /* @conditional-compile-remove(gallery-layouts) */
+                                        onUserSetGalleryLayout: props.onUserSetGalleryLayout, 
+                                        /* @conditional-compile-remove(gallery-layouts) */
+                                        userSetGalleryLayout: props.userSetGalleryLayout })),
                                     React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
             !props.mobileView && sideButtonsPresent && (React__default['default'].createElement(react.Stack.Item, null,
                 React__default['default'].createElement("div", { ref: sidepaneControlsRef },
                     React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined },
                         isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage ||
                                 props.disableButtonsForHoldScreen ||
-                                isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef })), (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
+                                isDisabled$3(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef })), (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
                         _b.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                             return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
                         }))))))));
@@ -23925,6 +24389,8 @@ const MoreDrawer = (props) => {
     const localeStrings = useLocale();
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(raise-hand) */
+    const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     const onSpeakerItemClick = React.useCallback((_ev, itemKey) => {
         const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find((speaker) => speaker.id === itemKey);
         if (selected) {
@@ -23985,7 +24451,7 @@ const MoreDrawer = (props) => {
                 text: mic.name,
                 onItemClick: onMicrophoneItemClick,
                 secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,
-                disabled: drawerSelectionOptions !== false ? isDisabled$2(drawerSelectionOptions.microphoneButton) : undefined
+                disabled: drawerSelectionOptions !== false ? isDisabled$3(drawerSelectionOptions.microphoneButton) : undefined
             })),
             secondaryText: (_b = props.selectedMicrophone) === null || _b === void 0 ? void 0 : _b.name
         });
@@ -23997,14 +24463,14 @@ const MoreDrawer = (props) => {
             text: props.strings.peopleButtonLabel,
             iconProps: { iconName: 'MoreDrawerPeople' },
             onItemClick: props.onPeopleButtonClicked,
-            disabled: isDisabled$2(drawerSelectionOptions.peopleButton) || props.disableButtonsForHoldScreen
+            disabled: isDisabled$3(drawerSelectionOptions.peopleButton) || props.disableButtonsForHoldScreen
         });
     }
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.holdButton)) {
         drawerMenuItems.push({
             itemKey: 'holdButtonKey',
-            disabled: props.disableButtonsForHoldScreen || isDisabled$2(drawerSelectionOptions.holdButton),
+            disabled: props.disableButtonsForHoldScreen || isDisabled$3(drawerSelectionOptions.holdButton),
             text: localeStrings.component.strings.holdButton.tooltipOffContent,
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
@@ -24013,6 +24479,27 @@ const MoreDrawer = (props) => {
             iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
         });
     }
+    /* @conditional-compile-remove(raise-hand) */
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.raiseHandButton)) {
+        const raiseHandIcon = raiseHandButtonProps.checked ? 'LowerHandContextualMenuItem' : 'RaiseHandContextualMenuItem';
+        drawerMenuItems.push({
+            itemKey: 'raiseHandButtonKey',
+            disabled: props.disableButtonsForHoldScreen || isDisabled$3(drawerSelectionOptions.raiseHandButton),
+            text: raiseHandButtonProps.checked
+                ? localeStrings.component.strings.raiseHandButton.onLabel
+                : localeStrings.component.strings.raiseHandButton.offLabel,
+            onItemClick: () => {
+                if (raiseHandButtonProps.onToggleRaiseHand) {
+                    raiseHandButtonProps.onToggleRaiseHand();
+                }
+                onLightDismiss();
+            },
+            iconProps: {
+                iconName: raiseHandIcon,
+                styles: { root: { lineHeight: 0 } }
+            }
+        });
+    }
     /*@conditional-compile-remove(PSTN-calls) */
     // dtmf tone sending only works for 1:1 PSTN call
     if (drawerSelectionOptions !== false && props.onClickShowDialpad) {
@@ -25152,14 +25639,18 @@ const LocalAndRemotePIP = (props) => {
             showMuteIndicator: false,
             showCameraSwitcherInLocalPreview: false,
             isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
-            renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement
+            renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
+            /* @conditional-compile-remove(raise-hand) */
+            raisedHand: localParticipant.raisedHand
         });
     }, [
         localParticipant.displayName,
         (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
         (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
         onCreateLocalStreamView,
-        onDisposeLocalStreamView
+        onDisposeLocalStreamView,
+        /* @conditional-compile-remove(raise-hand) */
+        localParticipant.raisedHand
     ]);
     const remoteVideoTileProps = React.useMemo(() => {
         var _a, _b, _c;
@@ -25246,11 +25737,19 @@ const updateUserDisplayNamesTrampoline = (remoteParticipants) => {
  * Picture in picture in picture needs to display the most-dominant remote speaker, as well as the local participant video.
  * @private
  */
-const localAndRemotePIPSelector = reselect__namespace.createSelector([getDisplayName, dominantRemoteParticipantSelector, localVideoSelector], (displayName, dominantRemoteParticipant, localVideoStreamInfo) => {
+const localAndRemotePIPSelector = reselect__namespace.createSelector([
+    getDisplayName,
+    dominantRemoteParticipantSelector,
+    localVideoSelector,
+    /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand
+], (displayName, dominantRemoteParticipant, localVideoStreamInfo, 
+/* @conditional-compile-remove(raise-hand) */ raisedHand) => {
     return {
         localParticipant: {
             displayName,
-            videoStream: localVideoStreamInfo
+            videoStream: localVideoStreamInfo,
+            /* @conditional-compile-remove(raise-hand) */
+            raisedHand: raisedHand
         },
         dominantRemoteParticipant
     };
@@ -25551,7 +26050,11 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(PSTN-calls) */
                     onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar, 
                     /* @conditional-compile-remove(gallery-layouts) */
-                    onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
+                    onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, 
+                    /* @conditional-compile-remove(gallery-layouts) */
+                    onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, 
+                    /* @conditional-compile-remove(gallery-layouts) */
+                    userSetGalleryLayout: props.userSetGalleryLayout, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
                 ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */
@@ -25581,7 +26084,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$2((_g = props.callControlProps.options) === null || _g === void 0 ? void 0 : _g.participantsButton), onChatButtonClicked: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.onClick, disableChatButton: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.disabled }),
+                            isDisabled$3((_g = props.callControlProps.options) === null || _g === void 0 ? void 0 : _g.participantsButton), onChatButtonClicked: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.onClick, disableChatButton: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.disabled }),
                     props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
                     drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },
                         React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))))));
@@ -25802,20 +26305,27 @@ const MediaGallery = (props) => {
                 ? { kind: 'drawer', hostId: props.drawerMenuHostId }
                 : { kind: 'contextual' };
     }, [(_c = props.remoteVideoTileMenuOptions) === null || _c === void 0 ? void 0 : _c.isHidden, props.isMobile, props.drawerMenuHostId]);
-    /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(gallery-layouts) */
+    /* @conditional-compile-remove(vertical-gallery) */
     const overflowGalleryPosition = React.useMemo(() => {
-        if (props.userSetOverflowGalleryPosition === 'Responsive') {
-            return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
-                ? 'VerticalRight'
-                : 'HorizontalBottom';
-        }
-        else {
+        /* @conditional-compile-remove(gallery-layouts) */
+        if (props.userSetOverflowGalleryPosition === 'HorizontalTop') {
             return props.userSetOverflowGalleryPosition;
         }
-    }, [props.userSetOverflowGalleryPosition, containerWidth, containerHeight]);
+        return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
+            ? 'VerticalRight'
+            : 'HorizontalBottom';
+    }, [
+        /* @conditional-compile-remove(gallery-layouts) */ props.userSetOverflowGalleryPosition,
+        containerWidth,
+        containerHeight
+    ]);
     const VideoGalleryMemoized = React.useMemo(() => {
         var _a;
-        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnTilePosition, showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (_a = props.onRenderAvatar) !== null && _a !== void 0 ? _a : onRenderAvatar, 
+        const layoutBasedOnUserSelection = () => {
+            /* @conditional-compile-remove(gallery-layouts) */
+            return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
+        };
+        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (_a = props.onRenderAvatar) !== null && _a !== void 0 ? _a : onRenderAvatar, 
             /* @conditional-compile-remove(pinned-participants) */
             remoteVideoTileMenuOptions: remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(vertical-gallery) */
@@ -25828,7 +26338,6 @@ const MediaGallery = (props) => {
                     : '16:9' })));
     }, [
         videoGalleryProps,
-        layoutBasedOnTilePosition,
         props.isMobile,
         props.onRenderAvatar,
         /* @conditional-compile-remove(rooms) */
@@ -25844,7 +26353,10 @@ const MediaGallery = (props) => {
         /* @conditional-compile-remove(rooms) */
         isRoomsCall,
         /* @conditional-compile-remove(vertical-gallery) */
-        containerAspectRatio
+        containerAspectRatio,
+        /* @conditional-compile-remove(gallery-layouts) */
+        props.userSetGalleryLayout,
+        layoutBasedOnTilePosition
     ]);
     return (React__default['default'].createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React__default['default'].createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -26057,7 +26569,9 @@ const networkReconnectTileSelector = reselect__namespace.createSelector([getUser
  * @private
  */
 const CallPage = (props) => {
-    const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView } = props;
+    const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, 
+    /* @conditional-compile-remove(gallery-layouts) */
+    galleryLayout = 'floatingLocalVideo' } = 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);
@@ -26073,6 +26587,8 @@ const CallPage = (props) => {
     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,
@@ -26086,9 +26602,15 @@ const CallPage = (props) => {
             /* @conditional-compile-remove(click-to-call) */
             localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile, 
             /* @conditional-compile-remove(gallery-layouts) */
-            userSetOverflowGalleryPosition: userSetOverflowGalleryPosition }))) : (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, 
+            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, 
+        /* @conditional-compile-remove(gallery-layouts) */
+        onUserSetOverflowGalleryPositionChange: setUserSetOverflowGalleryPosition, 
+        /* @conditional-compile-remove(gallery-layouts) */
+        onUserSetGalleryLayoutChange: setUserSetGalleryLayout, 
         /* @conditional-compile-remove(gallery-layouts) */
-        onUserSetOverflowGalleryPositionChange: setUserSetOverflowGalleryPosition }));
+        userSetGalleryLayout: userSetGalleryLayout }));
 };
 /**
  * @private
@@ -27663,7 +28185,7 @@ const isShowing = (overrideSidePane) => {
     return !!(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive);
 };
 const MainScreen = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const adapter = useAdapter();
     const { camerasCount, microphonesCount } = useSelector$1(deviceCountSelector);
     const hasCameras = camerasCount > 0;
@@ -27767,7 +28289,9 @@ const MainScreen = (props) => {
             pageElement = (React__default['default'].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError }));
             break;
         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 }));
+            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' }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         case 'hold':
@@ -27779,7 +28303,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: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
+            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_g = props.options) === null || _g === void 0 ? void 0 : _g.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {
@@ -28323,6 +28847,10 @@ class AzureCommunicationCallAdapter {
         this.startCall.bind(this);
         this.startScreenShare.bind(this);
         this.stopScreenShare.bind(this);
+        /* @conditional-compile-remove(raise-hand) */
+        this.raiseHand.bind(this);
+        /* @conditional-compile-remove(raise-hand) */
+        this.lowerHand.bind(this);
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
         this.disposeStreamView.bind(this);
@@ -28635,6 +29163,22 @@ class AzureCommunicationCallAdapter {
             }));
         });
     }
+    /* @conditional-compile-remove(raise-hand) */
+    raiseHand() {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+                yield this.handlers.onToggleRaiseHand();
+            }));
+        });
+    }
+    /* @conditional-compile-remove(raise-hand) */
+    lowerHand() {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+                yield this.handlers.onToggleRaiseHand();
+            }));
+        });
+    }
     /* @conditional-compile-remove(unsupported-browser) */
     allowUnsupportedBrowserVersion() {
         this.context.setAllowedUnsupportedBrowser();
@@ -29315,6 +29859,10 @@ class CallWithChatBackedCallAdapter {
         this.unmute = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.unmute(); });
         this.startScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startScreenShare(); });
         this.stopScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopScreenShare(); });
+        /* @conditional-compile-remove(raise-hand) */
+        this.raiseHand = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.raiseHand(); });
+        /* @conditional-compile-remove(raise-hand) */
+        this.lowerHand = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.lowerHand(); });
         this.removeParticipant = (userId) => __awaiter$4(this, void 0, void 0, function* () {
             let participant = userId;
             /* @conditional-compile-remove(PSTN-calls) */
@@ -29800,7 +30348,9 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(call-readiness) */
         onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,
         /* @conditional-compile-remove(unsupported-browser) */
-        onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick
+        onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,
+        /* @conditional-compile-remove(gallery-layouts) */
+        galleryOptions: props.galleryOptions
     }), [
         props.callControls,
         callControlOptionsFromProps,
@@ -29814,7 +30364,9 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(call-readiness) */
         props.onNetworkingTroubleShootingClick,
         /* @conditional-compile-remove(call-readiness) */
-        props.onPermissionsTroubleshootingClick
+        props.onPermissionsTroubleshootingClick,
+        /* @conditional-compile-remove(gallery-layouts) */
+        props.galleryOptions
     ]);
     const onRenderChatContent = React.useCallback(() => (React__default['default'].createElement(ChatComposite, Object.assign({}, chatProps, { fluentTheme: theme, options: {
             topic: false,
@@ -29885,7 +30437,7 @@ const checkShowChatButton = (callControls) => {
     return callControls.chatButton !== false;
 };
 const checkChatButtonIsDisabled = (callControls) => {
-    return typeof callControls === 'object' && isDisabled$2(callControls === null || callControls === void 0 ? void 0 : callControls.chatButton);
+    return typeof callControls === 'object' && isDisabled$3(callControls === null || callControls === void 0 ? void 0 : callControls.chatButton);
 };
 const isOnHoldTrampoline = (page) => {
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -30093,6 +30645,10 @@ class AzureCommunicationCallWithChatAdapter {
         this.unmute.bind(this);
         this.startScreenShare.bind(this);
         this.stopScreenShare.bind(this);
+        /* @conditional-compile-remove(raise-hand) */
+        this.raiseHand.bind(this);
+        /* @conditional-compile-remove(raise-hand) */
+        this.lowerHand.bind(this);
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
         this.disposeStreamView.bind(this);
@@ -30278,6 +30834,20 @@ class AzureCommunicationCallWithChatAdapter {
             yield this.callAdapter.stopScreenShare();
         });
     }
+    /* @conditional-compile-remove(raise-hand) */
+    /** Raise hand for local user. */
+    raiseHand() {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            yield this.callAdapter.raiseHand();
+        });
+    }
+    /* @conditional-compile-remove(raise-hand) */
+    /** Lower hand for local user. */
+    lowerHand() {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            yield this.callAdapter.lowerHand();
+        });
+    }
     /** Create a stream view for a remote participants video feed. */
     createStreamView(remoteUserId, options) {
         return __awaiter$2(this, void 0, void 0, function* () {
@@ -30936,6 +31506,7 @@ exports.MicrophoneSitePermissions = MicrophoneSitePermissions;
 exports.ParticipantItem = ParticipantItem;
 exports.ParticipantList = ParticipantList;
 exports.ParticipantsButton = ParticipantsButton;
+exports.RaiseHandButton = RaiseHandButton;
 exports.ScreenShareButton = ScreenShareButton;
 exports.SendBox = SendBox;
 exports.StreamMedia = StreamMedia;