@azure/communication-react 1.4.3-alpha-202212060013.0 → 1.4.3-alpha-202212080013.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-202212060013.0';
+var telemetryVersion = '1.4.3-alpha-202212080013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7828,56 +7828,6 @@ const ParticipantList = (props) => {
         : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
 };
 
-/**
- * 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.
 /**
  * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView
@@ -8387,151 +8337,108 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
 });
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
 /**
- * Horizontal Gallery button width in rem
+ * @private
  */
-const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+const screenSharingContainerStyle = react.mergeStyles({
+    width: '100%',
+    height: '100%'
+});
 /**
  * @private
  */
-const leftRightButtonStyles = (theme) => {
-    return {
-        background: 'none',
-        padding: 0,
-        height: 'auto',
-        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        border: `1px solid ${theme.palette.neutralLight}`,
-        borderRadius: theme.effects.roundedCorner4
-    };
-};
+const screenSharingNotificationContainerStyle = (theme) => react.mergeStyles({
+    backgroundColor: 'inherit',
+    padding: '1rem',
+    maxWidth: '95%',
+    borderRadius: theme.effects.roundedCorner4,
+    color: theme.palette.neutralSecondary
+});
 /**
- * Horizontal Gallery gap size in rem between tiles and buttons
+ * @private
  */
-const HORIZONTAL_GALLERY_GAP = 0.5;
+const screenSharingNotificationIconContainerStyle = react.mergeStyles({
+    height: '2rem',
+    lineHeight: 0
+});
 /**
  * @private
  */
-const rootStyle = {
-    height: '100%',
-    width: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
+const screenSharingNotificationIconStyle = (theme) => react.mergeStyles({
+    // svg is (20px x 20px) but path is only (16px x 12px), so need to scale at 2.5 to get 40px
+    transform: 'scale(2.5)',
+    color: theme.palette.neutralTertiary
+});
 /**
  * @private
  */
-const childrenContainerStyle = {
-    height: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
+const screenSharingNotificationTextStyle = react.mergeStyles({
+    fontSize: '1rem',
+    // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color
+    color: 'inherit'
+});
 
 // Copyright (c) Microsoft Corporation.
 /**
- * {@link HorizontalGallery} default children per page
- */
-const DEFAULT_CHILDREN_PER_PAGE = 5;
-/**
- * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
- * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
- * @returns
+ * A memoized version of local screen share component. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
+ * https://reactjs.org/docs/react-api.html#reactmemo
  */
-const HorizontalGallery = (props) => {
-    var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
-    const ids = useIdentifiers();
-    const [page, setPage] = React.useState(0);
-    const numberOfChildren = React__default['default'].Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
-    const paginatedChildren = React.useMemo(() => {
-        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    // If children per page is 0 or less return empty element
-    if (childrenPerPage <= 0) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
-    }
-    const firstIndexOfCurrentPage = page * childrenPerPage;
-    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
-    const showButtons = numberOfChildren > childrenPerPage;
-    const disablePreviousButton = page === 0;
-    const disableNextButton = page === lastPage;
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
-};
-const HorizontalGalleryNavigationButton = (props) => {
+const LocalScreenShare = React__default['default'].memo((props) => {
+    const { localParticipant } = props;
     const theme = useTheme();
-    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
-};
-function bucketize(arr, bucketSize) {
-    const bucketArray = [];
-    if (bucketSize <= 0) {
-        return bucketArray;
-    }
-    for (let i = 0; i < arr.length; i += bucketSize) {
-        bucketArray.push(arr.slice(i, i + bucketSize));
+    const locale = useLocale$1();
+    if (!localParticipant || !localParticipant.isScreenSharingOn) {
+        return null;
     }
-    return bucketArray;
-}
+    const localScreenSharingNotification = (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
+        React__default['default'].createElement(react.Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: { childrenGap: '1rem' } },
+            React__default['default'].createElement(react.Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
+                React__default['default'].createElement(react.Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
+            React__default['default'].createElement(react.Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage))));
+    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName)
+        ? locale.strings.videoGallery.displayNamePlaceholder
+        : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
+    return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React__default['default'].createElement(React__default['default'].Fragment, null) }, localScreenSharingNotification));
+});
 
 // Copyright (c) Microsoft Corporation.
 /**
- * Wrapped HorizontalGallery that adjusts the number of items per page based on the
- * available width obtained from a ResizeObserver, width per child, gap width, and button width
+ * @private
  */
-const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
-    const containerRef = React.useRef(null);
-    const containerWidth = _useContainerWidth(containerRef);
-    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
-    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
-    const childrenPerPage = calculateChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(props.children),
-        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
-        gapWidthRem,
-        buttonWidthRem
-    });
-    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
-        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
-};
+const loadingStyle = react.mergeStyles({
+    height: '100%',
+    width: '100%'
+});
+
+// Copyright (c) Microsoft Corporation.
 /**
- * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
- * gaps in between
+ * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
+ * https://reactjs.org/docs/react-api.html#reactmemo
  */
-const calculateChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = _convertRemToPx(childWidthRem);
-    const gapWidth = _convertRemToPx(gapWidthRem);
-    /** First check how many children can fit in containerWidth.
-     *    __________________________________
-     *   |                ||                |
-     *   |                ||                |
-     *   |________________||________________|
-     *   <-----------containerWidth--------->
-     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-     */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
-    // If all children fit then return numberOfChildrenInContainer
-    if (numberOfChildren <= numberOfChildrenInContainer) {
-        return numberOfChildrenInContainer;
+const RemoteScreenShare = React__default['default'].memo((props) => {
+    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving } = props;
+    const locale = useLocale$1();
+    if (!renderElement) {
+        onCreateRemoteStreamView && onCreateRemoteStreamView(userId);
     }
-    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));
+    React.useEffect(() => {
+        return () => {
+            // TODO: Isolate disposing behaviors for screenShare and videoStream
+            onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+        };
+    }, [onDisposeRemoteStreamView, userId]);
+    const loadingMessage = displayName
+        ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
+            participant: displayName
+        })
+        : '';
+    return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
+});
+const LoadingSpinner = (props) => {
+    return (React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: loadingStyle },
+        React__default['default'].createElement(react.Spinner, { label: props.loadingMessage, size: react.SpinnerSize.xSmall, "aria-live": 'assertive' })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -8542,71 +8449,277 @@ const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', widt
 /**
  * @private
  */
-const videoGalleryContainerStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
-};
-/**
- * Small floating modal width and height in rem for small screen
- */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
-/**
- * Large floating modal width and height in rem for large screen
- */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
-/**
- * @private
- * z-index to ensure that the local video tile is above the video gallery.
- */
-const LOCAL_VIDEO_TILE_ZINDEX = 2;
+const localVideoCameraCycleButtonStyles = (theme) => {
+    return {
+        root: {
+            position: 'absolute',
+            width: _pxToRem(32),
+            height: _pxToRem(32),
+            right: '0rem',
+            top: '0rem',
+            color: '#FFFFFF',
+            zIndex: 2,
+            background: 'rgba(0,0,0,0.4)',
+            borderRadius: theme.effects.roundedCorner2
+        },
+        rootFocused: {
+            // styles to remove the unwanted white highlight and blue colour after tapping on button.
+            color: '#FFFFFF',
+            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
+        },
+        icon: {
+            paddingLeft: _pxToRem(3),
+            paddingRight: _pxToRem(3),
+            margin: 0
+        },
+        flexContainer: {
+            paddingBottom: _pxToRem(8)
+        }
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
 /**
- * @private
+ * local video tile camera cycle button - for use on mobile screens only.
+ * @internal
  */
-const floatingLocalVideoModalStyle = (theme, isNarrow) => {
-    return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, isNarrow)
-    }, {
-        main: {
-            boxShadow: theme.effects.elevation8,
-            ':focus-within': {
-                boxShadow: theme.effects.elevation16,
-                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
+const LocalVideoCameraCycleButton = (props) => {
+    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
+    const theme = react.useTheme();
+    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
+            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
+                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
+                const newCamera = cameras[(index + 1) % cameras.length];
+                if (onSelectCamera !== undefined) {
+                    onSelectCamera(newCamera);
+                }
             }
+        } }));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A memoized version of VideoTile for rendering local participant.
+ *
+ * @internal
+ */
+const _LocalVideoTile = React__default['default'].memo((props) => {
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    const localVideoStreamProps = React.useMemo(() => ({
+        isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
+        isStreamAvailable: isAvailable,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        renderElementExists: !!renderElement,
+        scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
+    }), [
+        isAvailable,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        renderElement
+    ]);
+    // Handle creating, destroying and updating the video stream as necessary
+    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
+    const renderVideoStreamElement = React.useMemo(() => {
+        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
+        // implies that, after their threshold, all streams have no child (blank video)
+        if (!renderElement || !renderElement.childElementCount) {
+            // Returning `undefined` results in the placeholder with avatar being shown
+            return undefined;
         }
-    }, localVideoModalStyles);
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
+            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
+    }, [
+        localVideoCameraCycleButtonProps,
+        localVideoCameraSwitcherLabel,
+        localVideoSelectedDescription,
+        renderElement,
+        showCameraSwitcherInLocalPreview
+    ]);
+    return (React__default['default'].createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize }));
+});
+const FloatingLocalCameraCycleButton = (props) => {
+    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+        localVideoSelectedDescription &&
+        _formatString(localVideoSelectedDescription, {
+            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+        });
+    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React__default['default'].createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 /**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
  * @private
  */
-const localVideoTileOuterPaddingPX = 8;
+const rootLayoutStyle$1 = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Horizontal Gallery button width in rem
+ */
+const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
 /**
  * @private
  */
-const localVideoTileContainerStyle = (theme, isNarrow) => {
-    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
-        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
-        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
+const leftRightButtonStyles = (theme) => {
+    return {
+        background: 'none',
+        padding: 0,
+        height: 'auto',
+        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        border: `1px solid ${theme.palette.neutralLight}`,
+        borderRadius: theme.effects.roundedCorner4
+    };
 };
+/**
+ * Horizontal Gallery gap size in rem between tiles and buttons
+ */
+const HORIZONTAL_GALLERY_GAP = 0.5;
 /**
  * @private
  */
-const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
-        root: { boxShadow: theme.effects.elevation8 }
-    });
+const rootStyle = {
+    height: '100%',
+    width: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
 };
 /**
  * @private
  */
-const floatingLocalVideoTileStyle = {
-    root: {
-        position: 'absolute',
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
-        height: '100%',
-        width: '100%'
+const childrenContainerStyle = {
+    height: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * {@link HorizontalGallery} default children per page
+ */
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+/**
+ * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
+ * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
+ * @returns
+ */
+const HorizontalGallery = (props) => {
+    var _a, _b;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    const ids = useIdentifiers();
+    const [page, setPage] = React.useState(0);
+    const numberOfChildren = React__default['default'].Children.count(children);
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const paginatedChildren = React.useMemo(() => {
+        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
+    }, [children, childrenPerPage]);
+    // If children per page is 0 or less return empty element
+    if (childrenPerPage <= 0) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
+    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
+    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const showButtons = numberOfChildren > childrenPerPage;
+    const disablePreviousButton = page === 0;
+    const disableNextButton = page === lastPage;
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
 };
+const HorizontalGalleryNavigationButton = (props) => {
+    const theme = useTheme();
+    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
+};
+function bucketize(arr, bucketSize) {
+    const bucketArray = [];
+    if (bucketSize <= 0) {
+        return bucketArray;
+    }
+    for (let i = 0; i < arr.length; i += bucketSize) {
+        bucketArray.push(arr.slice(i, i + bucketSize));
+    }
+    return bucketArray;
+}
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Wrapped HorizontalGallery that adjusts the number of items per page based on the
+ * available width obtained from a ResizeObserver, width per child, gap width, and button width
+ */
+const ResponsiveHorizontalGallery = (props) => {
+    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
+    const containerRef = React.useRef(null);
+    const containerWidth = _useContainerWidth(containerRef);
+    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
+    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
+    const childrenPerPage = calculateChildrenPerPage({
+        numberOfChildren: React__default['default'].Children.count(props.children),
+        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
+        childWidthRem,
+        gapWidthRem,
+        buttonWidthRem
+    });
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
+        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
+};
+/**
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
+ */
+const calculateChildrenPerPage = (args) => {
+    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
+    const childWidth = _convertRemToPx(childWidthRem);
+    const gapWidth = _convertRemToPx(gapWidthRem);
+    /** First check how many children can fit in containerWidth.
+     *    __________________________________
+     *   |                ||                |
+     *   |                ||                |
+     *   |________________||________________|
+     *   <-----------containerWidth--------->
+     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+     */
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
+    if (numberOfChildren <= numberOfChildrenInContainer) {
+        return numberOfChildrenInContainer;
+    }
+    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
  */
@@ -8617,8 +8730,8 @@ const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
             : `${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)})`
+                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX$1.width)})`
+                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.width)})`
             : '100%',
         paddingRight: '0.5rem'
     };
@@ -8659,163 +8772,245 @@ const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
     maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
     maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
 };
+
+// Copyright (c) Microsoft Corporation.
 /**
- * @private
+ * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
  */
-const layerHostStyle = {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    // pointer events for layerHost set to none to make descendants interactive
-    pointerEvents: 'none'
+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 localVideoCameraCycleButtonStyles = (theme) => {
-    return {
-        root: {
-            position: 'absolute',
-            width: _pxToRem(32),
-            height: _pxToRem(32),
-            right: '0rem',
-            top: '0rem',
-            color: '#FFFFFF',
-            zIndex: 2,
-            background: 'rgba(0,0,0,0.4)',
-            borderRadius: theme.effects.roundedCorner2
-        },
-        rootFocused: {
-            // styles to remove the unwanted white highlight and blue colour after tapping on button.
-            color: '#FFFFFF',
-            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
-        },
-        icon: {
-            paddingLeft: _pxToRem(3),
-            paddingRight: _pxToRem(3),
-            margin: 0
-        },
-        flexContainer: {
-            paddingBottom: _pxToRem(8)
+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.
 /**
- * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * DefaultLayout displays remote participants, local video component, and screen sharing component in
+ * a grid and horizontal gallery.
+ *
  * @private
  */
-const localVideoModalStyles = {
-    keyboardMoveIconContainer: {
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
+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.
 /**
  * @private
  */
-const screenSharingContainerStyle = react.mergeStyles({
-    width: '100%',
-    height: '100%'
-});
+react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+/**
+ * Small floating modal width and height in rem for small screen
+ */
+const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+/**
+ * Large floating modal width and height in rem for large screen
+ */
+const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
 /**
  * @private
+ * z-index to ensure that the local video tile is above the video gallery.
  */
-const screenSharingNotificationContainerStyle = (theme) => react.mergeStyles({
-    backgroundColor: 'inherit',
-    padding: '1rem',
-    maxWidth: '95%',
-    borderRadius: theme.effects.roundedCorner4,
-    color: theme.palette.neutralSecondary
-});
+const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-const screenSharingNotificationIconContainerStyle = react.mergeStyles({
-    height: '2rem',
-    lineHeight: 0
-});
+const localVideoTileContainerStyle = (theme, isNarrow) => {
+    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
+        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
+        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
+};
 /**
  * @private
  */
-const screenSharingNotificationIconStyle = (theme) => react.mergeStyles({
-    // svg is (20px x 20px) but path is only (16px x 12px), so need to scale at 2.5 to get 40px
-    transform: 'scale(2.5)',
-    color: theme.palette.neutralTertiary
-});
+const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
+    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
+        root: { boxShadow: theme.effects.elevation8 }
+    });
+};
 /**
  * @private
  */
-const screenSharingNotificationTextStyle = react.mergeStyles({
-    fontSize: '1rem',
-    // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color
-    color: 'inherit'
-});
-
-// Copyright (c) Microsoft Corporation.
+const floatingLocalVideoModalStyle = (theme, isNarrow) => {
+    return react.concatStyleSets({
+        main: localVideoTileContainerStyle(theme, isNarrow)
+    }, {
+        main: {
+            boxShadow: theme.effects.elevation8,
+            ':focus-within': {
+                boxShadow: theme.effects.elevation16,
+                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
+            }
+        }
+    }, localVideoModalStyles);
+};
 /**
- * A memoized version of local screen share component. React.memo is used for a performance
- * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
- * https://reactjs.org/docs/react-api.html#reactmemo
+ * Padding equal to the amount the modal should stay inside the bounds of the container.
+ * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * @private
  */
-const LocalScreenShare = React__default['default'].memo((props) => {
-    const { localParticipant } = props;
-    const theme = useTheme();
-    const locale = useLocale$1();
-    if (!localParticipant || !localParticipant.isScreenSharingOn) {
-        return null;
-    }
-    const localScreenSharingNotification = (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
-        React__default['default'].createElement(react.Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: { childrenGap: '1rem' } },
-            React__default['default'].createElement(react.Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
-                React__default['default'].createElement(react.Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
-            React__default['default'].createElement(react.Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage))));
-    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName)
-        ? locale.strings.videoGallery.displayNamePlaceholder
-        : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
-    return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React__default['default'].createElement(React__default['default'].Fragment, null) }, localScreenSharingNotification));
-});
-
-// Copyright (c) Microsoft Corporation.
+const localVideoTileOuterPaddingPX = 8;
 /**
  * @private
  */
-const loadingStyle = react.mergeStyles({
-    height: '100%',
-    width: '100%'
-});
-
-// Copyright (c) Microsoft Corporation.
+const floatingLocalVideoTileStyle = {
+    root: {
+        position: 'absolute',
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
+        height: '100%',
+        width: '100%'
+    }
+};
 /**
- * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
- * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
- * https://reactjs.org/docs/react-api.html#reactmemo
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * @private
  */
-const RemoteScreenShare = React__default['default'].memo((props) => {
-    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving } = props;
-    const locale = useLocale$1();
-    if (!renderElement) {
-        onCreateRemoteStreamView && onCreateRemoteStreamView(userId);
+const localVideoModalStyles = {
+    keyboardMoveIconContainer: {
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
     }
-    React.useEffect(() => {
-        return () => {
-            // TODO: Isolate disposing behaviors for screenShare and videoStream
-            onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
-        };
-    }, [onDisposeRemoteStreamView, userId]);
-    const loadingMessage = displayName
-        ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
-            participant: displayName
-        })
-        : '';
-    return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
-});
-const LoadingSpinner = (props) => {
-    return (React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: loadingStyle },
-        React__default['default'].createElement(react.Spinner, { label: props.loadingMessage, size: react.SpinnerSize.xSmall, "aria-live": 'assertive' })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9491,103 +9686,123 @@ const _ModalClone = react.styled(ModalBase, getStyles, undefined, {
 _ModalClone.displayName = 'Modal';
 
 // Copyright (c) Microsoft Corporation.
+const DRAG_OPTIONS$1 = {
+    moveMenuItemText: 'Move',
+    closeMenuItemText: 'Close',
+    menu: react.ContextualMenu,
+    keepInBounds: true
+};
+// Manually override the max position used to keep the modal in the bounds of its container.
+// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
+// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
+// position the modal can be dragged to.
+const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };
 /**
- * local video tile camera cycle button - for use on mobile screens only.
- * @internal
+ * @private
  */
-const LocalVideoCameraCycleButton = (props) => {
-    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
-    const theme = react.useTheme();
-    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
-            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
-                const newCamera = cameras[(index + 1) % cameras.length];
-                if (onSelectCamera !== undefined) {
-                    onSelectCamera(newCamera);
-                }
-            }
-        } }));
+const FloatingLocalVideo = (props) => {
+    const { localVideoComponent, layerHostId, isNarrow, parentWidth, parentHeight } = props;
+    const theme = useTheme();
+    const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;
+    const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;
+    // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
+    // to be dragged offscreen and these are the top and left bounds of that calculation.
+    const modalMinDragPosition = React.useMemo(() => parentWidth && parentHeight
+        ? {
+            // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
+            // hence (0,0) is the bottom right of the video gallery.
+            x: -parentWidth + modalWidth + localVideoTileOuterPaddingPX,
+            y: -parentHeight + modalHeight + localVideoTileOuterPaddingPX
+        }
+        : undefined, [parentHeight, parentWidth, modalHeight, modalWidth]);
+    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, isNarrow), [theme, isNarrow]);
+    const layerProps = React.useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
+    return (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoComponent));
 };
 
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 /**
- * A memoized version of VideoTile for rendering local participant.
- *
- * @internal
+ * @private
  */
-const _LocalVideoTile = React__default['default'].memo((props) => {
-    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const localVideoStreamProps = React.useMemo(() => ({
-        isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
-        isStreamAvailable: isAvailable,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        renderElementExists: !!renderElement,
-        scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
-    }), [
-        isAvailable,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        renderElement
-    ]);
-    // Handle creating, destroying and updating the video stream as necessary
-    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
-    const renderVideoStreamElement = React.useMemo(() => {
-        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
-        // implies that, after their threshold, all streams have no child (blank video)
-        if (!renderElement || !renderElement.childElementCount) {
-            // Returning `undefined` results in the placeholder with avatar being shown
-            return undefined;
-        }
-        return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
-    }, [
-        localVideoCameraCycleButtonProps,
-        localVideoCameraSwitcherLabel,
-        localVideoSelectedDescription,
-        renderElement,
-        showCameraSwitcherInLocalPreview
-    ]);
-    return (React__default['default'].createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize }));
-});
-const FloatingLocalCameraCycleButton = (props) => {
-    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
-        localVideoSelectedDescription &&
-        _formatString(localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
-    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React__default['default'].createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+const rootLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%' }
+};
+/**
+ * @private
+ */
+const innerLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+/**
+ * @private
+ */
+const layerHostStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    // pointer events for layerHost set to none to make descendants interactive
+    pointerEvents: 'none'
 };
 
 // Copyright (c) Microsoft Corporation.
 /**
+ * FloatingLocalVideoLayout displays remote participants and a screen sharing component in
+ * a grid and horizontal gallery while floating the local video
+ *
  * @private
- * Currently the Calling JS SDK supports up to 4 remote video streams
  */
-const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+const FloatingLocalVideoLayout = (props) => {
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight } = props;
+    const theme = useTheme();
+    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 shouldFloatLocalVideo = remoteParticipants.length > 0;
+    if (!shouldFloatLocalVideo && localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
+    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);
+    });
+    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
- * Set aside only 6 dominant speakers for remaining audio participants
+ * Currently the Calling JS SDK supports up to 4 remote video streams
  */
-const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
-const DRAG_OPTIONS$1 = {
-    moveMenuItemText: 'Move',
-    closeMenuItemText: 'Close',
-    menu: react.ContextualMenu,
-    keepInBounds: true
-};
-// Manually override the max position used to keep the modal in the bounds of its container.
-// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
-// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
-// position the modal can be dragged to.
-const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };
+const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
@@ -9595,53 +9810,17 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     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();
     const localeStrings = useLocale$1().strings.videoGallery;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
-    const shouldFloatNonDraggableLocalVideo = !!(showCameraSwitcherInLocalPreview && shouldFloatLocalVideo);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
-    const visibleVideoParticipants = React.useRef([]);
-    const visibleAudioParticipants = React.useRef([]);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const visibleCallingParticipants = React.useRef([]);
-    const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;
-    const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;
-    // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
-    // to be dragged offscreen and these are the top and left bounds of that calculation.
-    const modalMinDragPosition = React.useMemo(() => containerWidth && containerHeight
-        ? {
-            // We use -containerWidth/Height because our modal is positioned to start in the bottom right,
-            // hence (0,0) is the bottom right of the video gallery.
-            x: -containerWidth + modalWidth + localVideoTileOuterPaddingPX,
-            y: -containerHeight + modalHeight + localVideoTileOuterPaddingPX
-        }
-        : undefined, [containerHeight, containerWidth, modalHeight, modalWidth]);
-    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);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    visibleCallingParticipants.current = (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' ))) !== null && _b !== void 0 ? _b : [];
-    // This set will be used to filter out participants already in visibleVideoParticipants
-    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const visibleCallingParticipantsSet = new Set(visibleCallingParticipants.current.map((p) => p.userId));
-    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_c = 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) */ !visibleCallingParticipantsSet.has(p.userId))) !== null && _c !== void 0 ? _c : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleAudioParticipants.current,
-        maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
-    });
     /* @conditional-compile-remove(rooms) */
     const permissions = _usePermissions();
     /**
@@ -9689,65 +9868,16 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state })));
     }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
-    const videoTiles = onRenderRemoteVideoTile
-        ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
-        : visibleVideoParticipants.current.map((participant) => {
-            return defaultOnRenderVideoTile(participant, true);
-        });
-    const audioTiles = onRenderRemoteVideoTile
-        ? visibleAudioParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
-        : visibleAudioParticipants.current.map((participant) => {
-            return defaultOnRenderVideoTile(participant, false);
-        });
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingTiles = onRenderRemoteVideoTile
-        ? visibleCallingParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
-        : visibleCallingParticipants.current.map((participant) => {
-            return defaultOnRenderVideoTile(participant, false);
-        });
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
-    const screenShareActive = screenShareParticipant || (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn);
-    const createGridTiles = () => {
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return videoTiles.length > 0 ? videoTiles : audioTiles.concat(callingTiles);
-    };
-    const gridTiles = createGridTiles();
-    const createHorizontalGalleryTiles = () => {
-        if (screenShareActive) {
-            // 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 videoTiles.concat(audioTiles.concat(callingTiles));
-        }
-        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 videoTiles.length > 0 ? audioTiles.concat(callingTiles) : [];
-        }
-    };
-    const horizontalGalleryTiles = createHorizontalGalleryTiles();
-    if (!shouldFloatLocalVideo && localVideoTile) {
-        gridTiles.push(localVideoTile);
-    }
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_e = screenShareParticipant.screenShareStream) === null || _e === void 0 ? void 0 : _e.isReceiving })));
-    const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
-    const layerHostId = reactHooks.useId('layerhost');
-    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) },
-        shouldFloatLocalVideo &&
-            !shouldFloatNonDraggableLocalVideo &&
-            localVideoTile &&
-            (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
-        // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-        shouldFloatNonDraggableLocalVideo && localVideoTile && remoteParticipants.length > 0 && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
-                boxShadow: theme.effects.elevation8,
-                zIndex: LOCAL_VIDEO_TILE_ZINDEX
-            }) }, localVideoTile)),
-        React__default['default'].createElement(react.Stack, { horizontal: false, styles: videoGalleryContainerStyle },
-            screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGalleryPresent && (React__default['default'].createElement("div", { style: { paddingTop: '0.5rem' } },
-                React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), 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 }, horizontalGalleryTiles))),
-            React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
+    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 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 }));
+    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));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -11446,6 +11576,14 @@ const DialpadContainer = (props) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
                 setText(e.target.value);
+            }, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onClick: (e) => {
+                const input = e.target;
+                const end = input.value.length;
+                // Move focus to end of input field
+                input.setSelectionRange(end, end);
+                input.focus();
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
                 return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
@@ -11809,6 +11947,21 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
         scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode
     };
 };
+/** @private */
+const memoizeLocalParticipant = memoizeOne__default['default']((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream) => {
+    var _a, _b;
+    return ({
+        userId: identifier,
+        displayName: displayName !== null && displayName !== void 0 ? displayName : '',
+        isMuted: isMuted,
+        isScreenSharingOn: isScreenSharingOn,
+        videoStream: {
+            isAvailable: !!localVideoStream,
+            isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
+            renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
+        }
+    });
+});
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11825,7 +11978,6 @@ const videoGallerySelector = reselect.createSelector([
     getIdentifier,
     getDominantSpeakers
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers) => {
-    var _a, _b;
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -11837,17 +11989,7 @@ const videoGallerySelector = reselect.createSelector([
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName)
             : undefined,
-        localParticipant: {
-            userId: identifier,
-            displayName: displayName !== null && displayName !== void 0 ? displayName : '',
-            isMuted: isMuted,
-            isScreenSharingOn: isScreenSharingOn,
-            videoStream: {
-                isAvailable: !!localVideoStream,
-                isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
-                renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
-            }
-        },
+        localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants)),
         dominantSpeakers: dominantSpeakerIds
     };