@azure/communication-react 1.4.3-alpha-202212160013.0 → 1.4.3-alpha-202212170012.0

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202212160013.0';
+var telemetryVersion = '1.4.3-alpha-202212170012.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2498,7 +2498,9 @@ function createView(context, internalContext, callId, participantId, stream, opt
     }
     else if (!('id' in stream) && !callId) {
         // Render LocalVideoStream that is not part of a Call
-        return createViewUnparentedVideo(context, internalContext, stream, options);
+        // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
+        // We do not have a startLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
+        return context.withAsyncErrorTeedToState(() => __awaiter$v(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logEvent(callingStatefulLogger, {
@@ -2523,7 +2525,9 @@ function disposeView(context, internalContext, callId, participantId, stream) {
     }
     else if (!('id' in stream) && !callId) {
         // Stop rendering LocalVideoStream that is not part of a Call
-        disposeViewUnparentedVideo(context, internalContext, stream);
+        // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
+        // We do not have a stopLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
+        context.withErrorTeedToState(() => disposeViewUnparentedVideo(context, internalContext, stream), 'Call.stopVideo')();
     }
     else {
         _logEvent(callingStatefulLogger, {
@@ -8653,6 +8657,164 @@ const rootLayoutStyle$1 = {
     root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
 
+/**
+ * Calculates the participants that should be rendered based on the list of dominant
+ * speakers and currently rendered participants in a call.
+ * @param args - SmartDominantSpeakerParticipantsArgs
+ * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
+ */
+const smartDominantSpeakerParticipants = (args) => {
+    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
+    // Don't apply any logic if total number of video streams is less than max dominant speakers.
+    if (participants.length <= maxDominantSpeakers) {
+        return participants;
+    }
+    const participantsMap = participantsById(participants);
+    // Only use the Max allowed dominant speakers that exist in participants
+    const dominantSpeakerIds = Array.from(new Set(dominantSpeakers).values())
+        .filter((id) => !!participantsMap[id])
+        .slice(0, maxDominantSpeakers);
+    const lastVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId);
+    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
+    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
+    // Remove participants that are no longer dominant and replace them with new dominant speakers.
+    for (let index = 0; index < maxDominantSpeakers; index++) {
+        const newVisibleParticipantId = newVisibleParticipantIds[index];
+        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
+            const replacement = newDominantSpeakerIds.shift();
+            if (!replacement) {
+                break;
+            }
+            newVisibleParticipantIds[index] = replacement;
+        }
+    }
+    const removedVisibleParticipantIds = lastVisibleParticipantIds.filter((p) => !newVisibleParticipantIds.includes(p));
+    removedVisibleParticipantIds.forEach((p) => newVisibleParticipantIds.push(p));
+    const newVisibleParticipantIdSet = new Set(newVisibleParticipantIds);
+    const leftoverParticipants = participants.filter((p) => !newVisibleParticipantIdSet.has(p.userId));
+    leftoverParticipants.forEach((p) => {
+        newVisibleParticipantIds.push(p.userId);
+    });
+    // newVisibleParticipantIds can contain identifiers for participants that are no longer in the call. So we ignore those IDs.
+    const newVisibleParticipants = newVisibleParticipantIds
+        .map((participantId) => participantsMap[participantId])
+        .filter((p) => !!p);
+    return newVisibleParticipants;
+};
+const participantsById = (participants) => {
+    const response = {};
+    participants.forEach((p) => (response[p.userId] = p));
+    return response;
+};
+
+// Copyright (c) Microsoft Corporation.
+const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
+const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
+/**
+ * @private
+ */
+const useFloatingLocalVideoLayout = (props) => {
+    var _a, _b;
+    const visibleVideoParticipants = React.useRef([]);
+    const visibleAudioParticipants = React.useRef([]);
+    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
+    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleVideoParticipants.current,
+        maxDominantSpeakers: maxRemoteVideoStreams
+    }).slice(0, maxRemoteVideoStreams);
+    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleAudioParticipants.current,
+        maxDominantSpeakers: maxAudioDominantSpeakers
+    });
+    const getGridParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            return [];
+        }
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current.concat(callingParticipants);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const gridParticipants = getGridParticipants();
+    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.length > 0
+                ? visibleAudioParticipants.current.concat(callingParticipants)
+                : [];
+        }
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
+    return { gridParticipants, horizontalGalleryParticipants };
+};
+/**
+ * @private
+ */
+const usePinnedParticipantLayout = (props) => {
+    // map remote participants by userId
+    const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
+        map[remoteParticipant.userId] = remoteParticipant;
+        return map;
+    }, {});
+    // count pinned participants with video
+    let pinnedParticipantsWithVideoOnCount = 0;
+    // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
+    const pinnedParticipants = [];
+    props.pinnedParticipantUserIds.forEach((id) => {
+        var _a;
+        const pinnedParticipant = remoteParticipantMap[id];
+        if (pinnedParticipant) {
+            pinnedParticipants.push(pinnedParticipant);
+            if ((_a = pinnedParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
+                pinnedParticipantsWithVideoOnCount++;
+            }
+        }
+    });
+    // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
+    const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
+    const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
+    const floatingLocalVideoLayoutProps = Object.assign(Object.assign({}, props), { 
+        // if there are pinned participants then we should only consider unpinned participants
+        remoteParticipants: unpinnedParticipants, 
+        // if there is a maximum of remote video streams we need to subtract pinned participants with video
+        maxRemoteVideoStreams: props.maxRemoteVideoStreams
+            ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount
+            : undefined });
+    const floatingLocalVideoLayout = useFloatingLocalVideoLayout(floatingLocalVideoLayoutProps);
+    if (props.pinnedParticipantUserIds.length === 0) {
+        return floatingLocalVideoLayout;
+    }
+    return {
+        gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
+        horizontalGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
+            : floatingLocalVideoLayout.gridParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
+    };
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -8787,243 +8949,18 @@ const calculateChildrenPerPage = (args) => {
     }
     const buttonWidth = _convertRemToPx(buttonWidthRem);
     /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
-     * containerWidth to compute childrenSpace
-     *   <-----------containerWidth--------->
-     *    __________________________________
-     *   | ||             ||             || |
-     *   |<||             ||             ||>|
-     *   |_||_____________||_____________||_|
-     *       <-------childrenSpace------>
-     */
-    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
-    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
-    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * Small floating modal width and height in rem for small screen
- */
-const SMALL_FLOATING_MODAL_SIZE_PX$1 = { width: 64, height: 88 };
-/**
- * Large floating modal width and height in rem for large screen
- */
-const LARGE_FLOATING_MODAL_SIZE_PX$1 = { width: 160, height: 120 };
-/**
- * @private
- */
-const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
-    return {
-        minHeight: isNarrow
-            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
-            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        width: shouldFloatLocalVideo
-            ? isNarrow
-                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX$1.width)})`
-                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.width)})`
-            : '100%',
-        paddingRight: '0.5rem'
-    };
-};
-/**
- * @private
- */
-const horizontalGalleryStyle = (isNarrow) => {
-    return {
-        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
-    };
-};
-/**
- * Small horizontal gallery tile size in rem
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
-/**
- * Large horizontal gallery tile size in rem
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
-/**
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-/**
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
- */
-const VideoGalleryResponsiveHorizontalGallery = (props) => {
-    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
-    const containerStyles = React.useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
-    const galleryStyles = React.useMemo(() => react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
-    return (React__default['default'].createElement(react.Stack, { styles: { root: { paddingTop: '0.5rem' } } },
-        React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
-};
-
-/**
- * Calculates the participants that should be rendered based on the list of dominant
- * speakers and currently rendered participants in a call.
- * @param args - SmartDominantSpeakerParticipantsArgs
- * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
- */
-const smartDominantSpeakerParticipants = (args) => {
-    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
-    // Don't apply any logic if total number of video streams is less than max dominant speakers.
-    if (participants.length <= maxDominantSpeakers) {
-        return participants;
-    }
-    const participantsMap = participantsById(participants);
-    // Only use the Max allowed dominant speakers that exist in participants
-    const dominantSpeakerIds = Array.from(new Set(dominantSpeakers).values())
-        .filter((id) => !!participantsMap[id])
-        .slice(0, maxDominantSpeakers);
-    const lastVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId);
-    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
-    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
-    // Remove participants that are no longer dominant and replace them with new dominant speakers.
-    for (let index = 0; index < maxDominantSpeakers; index++) {
-        const newVisibleParticipantId = newVisibleParticipantIds[index];
-        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
-            const replacement = newDominantSpeakerIds.shift();
-            if (!replacement) {
-                break;
-            }
-            newVisibleParticipantIds[index] = replacement;
-        }
-    }
-    const removedVisibleParticipantIds = lastVisibleParticipantIds.filter((p) => !newVisibleParticipantIds.includes(p));
-    removedVisibleParticipantIds.forEach((p) => newVisibleParticipantIds.push(p));
-    const newVisibleParticipantIdSet = new Set(newVisibleParticipantIds);
-    const leftoverParticipants = participants.filter((p) => !newVisibleParticipantIdSet.has(p.userId));
-    leftoverParticipants.forEach((p) => {
-        newVisibleParticipantIds.push(p.userId);
-    });
-    // newVisibleParticipantIds can contain identifiers for participants that are no longer in the call. So we ignore those IDs.
-    const newVisibleParticipants = newVisibleParticipantIds
-        .map((participantId) => participantsMap[participantId])
-        .filter((p) => !!p);
-    return newVisibleParticipants;
-};
-const participantsById = (participants) => {
-    const response = {};
-    participants.forEach((p) => (response[p.userId] = p));
-    return response;
-};
-
-// Copyright (c) Microsoft Corporation.
-const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
-const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
-/**
- * @private
- */
-const useFloatingLocalVideoLayout = (props) => {
-    var _a, _b;
-    const visibleVideoParticipants = React.useRef([]);
-    const visibleAudioParticipants = React.useRef([]);
-    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
-    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleVideoParticipants.current,
-        maxDominantSpeakers: maxRemoteVideoStreams
-    }).slice(0, maxRemoteVideoStreams);
-    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleAudioParticipants.current,
-        maxDominantSpeakers: maxAudioDominantSpeakers
-    });
-    const getGridParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            return [];
-        }
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleVideoParticipants.current.length > 0
-            ? visibleVideoParticipants.current
-            : visibleAudioParticipants.current.concat(callingParticipants);
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
-    ]);
-    const gridParticipants = getGridParticipants();
-    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleVideoParticipants.current.length > 0
-                ? visibleAudioParticipants.current.concat(callingParticipants)
-                : [];
-        }
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
-    ]);
-    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
-    return { gridParticipants, horizontalGalleryParticipants };
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * DefaultLayout displays remote participants, local video component, and screen sharing component in
- * a grid and horizontal gallery.
- *
- * @private
- */
-const DefaultLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
-    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
-        remoteParticipants,
-        dominantSpeakers,
-        maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent
-    });
-    let activeVideoStreams = 0;
-    const gridTiles = floatingLocalVideoLayout.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 horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.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);
-    });
-    if (localVideoComponent) {
-        gridTiles.push(localVideoComponent);
-    }
-    return (React__default['default'].createElement(react.Stack, { horizontal: false, styles: rootLayoutStyle$1 },
-        screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
+     * containerWidth to compute childrenSpace
+     *   <-----------containerWidth--------->
+     *    __________________________________
+     *   | ||             ||             || |
+     *   |<||             ||             ||>|
+     *   |_||_____________||_____________||_|
+     *       <-------childrenSpace------>
+     */
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9037,8 +8974,9 @@ react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
 const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
 /**
  * Large floating modal width and height in rem for large screen
+ * Aspect ratio: 16:9
  */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
+const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -9103,6 +9041,111 @@ const localVideoModalStyles = {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
+    return {
+        minHeight: isNarrow
+            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
+            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        width: shouldFloatLocalVideo
+            ? isNarrow
+                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
+                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
+            : '100%',
+        paddingRight: '0.5rem'
+    };
+};
+/**
+ * @private
+ */
+const horizontalGalleryStyle = (isNarrow) => {
+    return {
+        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
+    };
+};
+/**
+ * Small horizontal gallery tile size in rem
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
+/**
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+/**
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
+ *
+ * @private
+ */
+const VideoGalleryResponsiveHorizontalGallery = (props) => {
+    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
+    const containerStyles = React.useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
+    const galleryStyles = React.useMemo(() => react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
+    return (React__default['default'].createElement(react.Stack, { styles: { root: { paddingTop: '0.5rem' } } },
+        React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * DefaultLayout displays remote participants, local video component, and screen sharing component in
+ * a grid and horizontal gallery.
+ *
+ * @private
+ */
+const DefaultLayout = (props) => {
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+        remoteParticipants,
+        dominantSpeakers,
+        maxRemoteVideoStreams,
+        isScreenShareActive: !!screenShareComponent
+    });
+    let activeVideoStreams = 0;
+    const gridTiles = floatingLocalVideoLayout.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 horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.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);
+    });
+    if (localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
+    return (React__default['default'].createElement(react.Stack, { horizontal: false, styles: rootLayoutStyle$1 },
+        screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 const animationDuration = react.AnimationVariables.durationValue2;
 const ZERO = { x: 0, y: 0 };
@@ -9887,6 +9930,56 @@ const FloatingLocalVideoLayout = (props) => {
             React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * PinnedParticipantsLayout displays remote participants and a screen sharing component in
+ * a grid and horizontal gallery while floating the local video
+ *
+ * @private
+ */
+const PinnedParticipantsLayout = (props) => {
+    const { remoteParticipants = [], pinnedParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, isLocalVideoFloating } = props;
+    const theme = useTheme();
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    const pinnedParticipantsLayout = usePinnedParticipantLayout({
+        remoteParticipants,
+        pinnedParticipantUserIds: pinnedParticipants,
+        dominantSpeakers,
+        maxRemoteVideoStreams,
+        isScreenShareActive: !!screenShareComponent
+    });
+    let activeVideoStreams = 0;
+    const shouldFloatLocalVideo = isLocalVideoFloating && remoteParticipants.length > 0;
+    const gridTiles = pinnedParticipantsLayout.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);
+    });
+    if (localVideoComponent && !shouldFloatLocalVideo) {
+        gridTiles.push(localVideoComponent);
+    }
+    const horizontalGalleryTiles = pinnedParticipantsLayout.horizontalGalleryParticipants.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 layerHostId = reactHooks.useId('layerhost');
+    const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
+    // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
+    showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
+            boxShadow: theme.effects.elevation8,
+            zIndex: LOCAL_VIDEO_TILE_ZINDEX
+        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, isNarrow: isNarrow, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+    return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
+        wrappedLocalVideoComponent,
+        React__default['default'].createElement(react.Stack, { horizontal: false, styles: innerLayoutStyle },
+            screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+            horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
+            React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -9900,7 +9993,7 @@ const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
@@ -9911,6 +10004,11 @@ const VideoGallery = (props) => {
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
+    /* @conditional-compile-remove(pinned-participants) */
+    const [pinnedParticipantsState, _] = React__default['default'].useState([]);
+    /* @conditional-compile-remove(pinned-participants) */
+    // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
+    const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
     /* @conditional-compile-remove(rooms) */
     const permissions = _usePermissions();
     /**
@@ -9971,13 +10069,50 @@ const VideoGallery = (props) => {
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_a = screenShareParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isReceiving })));
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving })));
     const screenShareComponent = remoteScreenShareComponent
         ? remoteScreenShareComponent
         : localParticipant.isScreenSharingOn
             ? localScreenShareStreamComponent
             : undefined;
-    const videoGalleryLayout = layout === 'floatingLocalVideo' ? (React__default['default'].createElement(FloatingLocalVideoLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, parentHeight: containerHeight, styles: styles })) : (React__default['default'].createElement(DefaultLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, styles: styles }));
+    const layoutProps = React.useMemo(() => ({
+        remoteParticipants,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
+        screenShareComponent,
+        showCameraSwitcherInLocalPreview,
+        maxRemoteVideoStreams,
+        dominantSpeakers,
+        styles,
+        onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile,
+        localVideoComponent: localVideoTile,
+        parentWidth: containerWidth,
+        parentHeight: containerHeight,
+        isLocalVideoFloating: layout === 'floatingLocalVideo'
+    }), [
+        remoteParticipants,
+        screenShareComponent,
+        showCameraSwitcherInLocalPreview,
+        maxRemoteVideoStreams,
+        dominantSpeakers,
+        styles,
+        localVideoTile,
+        containerWidth,
+        containerHeight,
+        onRenderRemoteVideoTile,
+        defaultOnRenderVideoTile,
+        layout,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants
+    ]);
+    const videoGalleryLayout = React.useMemo(() => {
+        /* @conditional-compile-remove(pinned-participants) */
+        if (layoutProps.pinnedParticipants.length > 0) {
+            return React__default['default'].createElement(PinnedParticipantsLayout, Object.assign({}, layoutProps));
+        }
+        if (layout === 'floatingLocalVideo') {
+            return React__default['default'].createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
+        }
+        return React__default['default'].createElement(DefaultLayout, Object.assign({}, layoutProps));
+    }, [layout, layoutProps]);
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
 };
 
@@ -11847,7 +11982,7 @@ const continueAnywayButtonStyles = (theme) => {
 // Copyright (c) Microsoft Corporation.
 /* @conditional-compile-remove(unsupported-browser) */
 const UnsupportedEnvironmentContainer = (props) => {
-    const { onTroubleshootingClick, strings, onContinueClick } = props;
+    const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
     const theme = useTheme();
     return (React__default['default'].createElement(react.Stack, { styles: containerStyles$2, tokens: { childrenGap: '2rem' } },
         React__default['default'].createElement(react.Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
@@ -11855,7 +11990,7 @@ const UnsupportedEnvironmentContainer = (props) => {
             React__default['default'].createElement(react.Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
             React__default['default'].createElement(react.Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
         onTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText)),
-        onContinueClick && (React__default['default'].createElement(react.DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText))));
+        onContinueAnywayClick && (React__default['default'].createElement(react.DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueAnywayClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText))));
 };
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.
@@ -11886,8 +12021,8 @@ const UnsupportedBrowser = (props) => {
  * @beta
  */
 const UnsupportedBrowserVersion = (props) => {
-    const { onTroubleshootingClick, strings, onContinueClick } = props;
-    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings, onContinueClick: onContinueClick }));
+    const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
+    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings, onContinueAnywayClick: onContinueAnywayClick }));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -16744,7 +16879,7 @@ const Microphone = (props) => {
         : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
+    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17175,14 +17310,6 @@ const bannerNotificationStyles = {
         pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
     }
 };
-/**
- * @private
- */
-const callArrangementContainerStyles = {
-    root: {
-        flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
-    }
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17947,7 +18074,7 @@ const hiddenStyles = {
  */
 const sidePaneStyles = {
     root: {
-        height: '100%',
+        height: 'auto',
         padding: '0.5rem 0.25rem',
         maxWidth: '21.5rem'
     }
@@ -18182,25 +18309,25 @@ const CallArrangement = (props) => {
     }
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
-            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: callArrangementContainerStyles },
+            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
                 React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
                     React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                         React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
                     errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                         React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)))),
                     canUnmute && !!props.mutedNotificationProps && React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
-                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
-                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                    !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
-                    React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
-                        /* @conditional-compile-remove(one-to-n-calling) */
-                        peopleButtonChecked: activePane === 'people', 
-                        /* @conditional-compile-remove(one-to-n-calling) */
-                        onPeopleButtonClicked: togglePeoplePane })))),
                 React__default['default'].createElement(react.Stack.Item, { grow: true, style: callCompositeContainerFlex() },
                     React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
                 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                callPaneContent()))));
+                callPaneContent()),
+            ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+                !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
+                React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                    /* @conditional-compile-remove(one-to-n-calling) */
+                    peopleButtonChecked: activePane === 'people', 
+                    /* @conditional-compile-remove(one-to-n-calling) */
+                    onPeopleButtonClicked: togglePeoplePane })))))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
@@ -19899,7 +20026,7 @@ const UnsupportedBrowserPage = (props) => {
         pageElement = (React__default['default'].createElement(UnsupportedBrowser, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserStrings }));
     }
     else if (!(environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion)) {
-        pageElement = (React__default['default'].createElement(UnsupportedBrowserVersion, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserVersionStrings, onContinueClick: onContinueClick }));
+        pageElement = (React__default['default'].createElement(UnsupportedBrowserVersion, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserVersionStrings, onContinueAnywayClick: onContinueClick }));
     }
     else {
         throw new Error('There was a problem with your environment info');
@@ -21242,50 +21369,6 @@ const DesktopMoreButton = (props) => {
         strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() } })));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * @private
- */
-const compositeOuterContainerStyles = {
-    root: {
-        width: '100%',
-        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
-        position: 'relative'
-    }
-};
-/** @private */
-const callCompositeContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the call composite do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const controlBarContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the control bar do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const hiddenAutoFocusButtonStyles = {
-    root: {
-        width: '0',
-        height: '0',
-        margin: '0',
-        minHeight: '0',
-        minWidth: '0',
-        maxHeight: '0',
-        maxWidth: '0',
-        outline: 'none',
-        padding: '0',
-        position: 'absolute'
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) => {
     if (callWithChatControls === false) {
@@ -21308,13 +21391,6 @@ const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) =>
  */
 const CallWithChatControlBar = (props) => {
     var _a, _b;
-    React.useEffect(() => {
-        var _a;
-        // On mount, button used for initial focus is hidden to prevent screen readers from announcing the initial focus
-        if (document.querySelector('[data-ui-id=call-with-chat-autofocus-hidden-button]') === document.activeElement) {
-            (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'true');
-        }
-    }, []);
     const theme = react.useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions$1(props.mobileView, props.callControls);
@@ -21355,7 +21431,6 @@ const CallWithChatControlBar = (props) => {
         React__default['default'].createElement(react.Stack.Item, { grow: true },
             React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
                 React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
-                    React__default['default'].createElement(ControlBarButton, { autoFocus: true, ariaHidden: true, "data-ui-id": 'call-with-chat-autofocus-hidden-button', styles: hiddenAutoFocusButtonStyles, tabIndex: -1 }),
                     React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
                             isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
@@ -21462,6 +21537,35 @@ const getDesktopEndCallButtonStyles = (theme) => {
 };
 const isEnabled$1 = (option) => option !== false;
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const compositeOuterContainerStyles = {
+    root: {
+        width: '100%',
+        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
+        position: 'relative'
+    }
+};
+/** @private */
+const callCompositeContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the call composite do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const controlBarContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the control bar do not compete with its siblings.
+        position: 'relative'
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {