@azure/communication-react 1.5.1-alpha-202303230013 → 1.5.1-alpha-202303250012

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303230013';
+var telemetryVersion = '1.5.1-alpha-202303250012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4326,6 +4326,7 @@ const defaultIdentifiers = {
     overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button',
     /* @conditional-compile-remove(vertical-gallery) */
     verticalGalleryVideoTile: 'vertical-gallery-video-tile',
+    horizontalGalleryVideoTile: 'horizontal-gallery-video-tile',
     /* @conditional-compile-remove(vertical-gallery) */
     verticalGalleryPageCounter: 'vertical-gallery-page-counter'
 };
@@ -9223,10 +9224,7 @@ const smartDominantSpeakerParticipants = (args) => {
     }
     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 dominantSpeakerIds = dominantSpeakers.filter((id) => !!participantsMap[id]).slice(0, maxDominantSpeakers);
     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.
@@ -9240,17 +9238,12 @@ const smartDominantSpeakerParticipants = (args) => {
             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
+    let newVisibleParticipants = newVisibleParticipantIds
         .map((participantId) => participantsMap[participantId])
-        .filter((p) => !!p);
+        .filter((p) => p !== undefined);
+    const newVisibleParticipantIdsSet = new Set(newVisibleParticipantIds);
+    const remainingParticipants = participants.filter((p) => !newVisibleParticipantIdsSet.has(p.userId));
+    newVisibleParticipants = newVisibleParticipants.concat(remainingParticipants);
     return newVisibleParticipants;
 };
 const participantsById = (participants) => {
@@ -9261,38 +9254,42 @@ const participantsById = (participants) => {
 
 // Copyright (c) Microsoft Corporation.
 const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
-const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
+const DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS = 6;
 const _useOrganizedParticipants = (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));
+    const visibleGridParticipants = React.useRef([]);
+    const visibleHorizontalGalleryParticipants = React.useRef([]);
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxHorizontalGalleryDominantSpeakers = DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
+    const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    visibleGridParticipants.current =
+        pinnedParticipantUserIds.length > 0 || isScreenShareActive
+            ? []
+            : smartDominantSpeakerParticipants({
+                participants: videoParticipants,
+                dominantSpeakers,
+                lastVisibleParticipants: visibleGridParticipants.current,
+                maxDominantSpeakers: maxRemoteVideoStreams
+            }).slice(0, maxRemoteVideoStreams);
+    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));
+    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
+    const callingParticipants = remoteParticipantsOrdered.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
+    visibleHorizontalGalleryParticipants.current = smartDominantSpeakerParticipants({
+        participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
+        dominantSpeakers: dominantSpeakers,
+        lastVisibleParticipants: visibleHorizontalGalleryParticipants.current,
+        maxDominantSpeakers: maxHorizontalGalleryDominantSpeakers
     });
     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);
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleHorizontalGalleryParticipants.current.concat(callingParticipants);
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive
@@ -9302,14 +9299,14 @@ const _useOrganizedParticipants = (props) => {
         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));
+            return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.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)
+            return visibleGridParticipants.current.length > 0
+                ? visibleHorizontalGalleryParticipants.current.concat(callingParticipants)
                 : [];
         }
     }, [
@@ -9327,18 +9324,12 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
         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 = [];
     (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.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
@@ -9346,11 +9337,7 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = 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 });
+        remoteParticipants: unpinnedParticipants });
     const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
     if (pinnedParticipants.length === 0) {
         return useOrganizedParticipantsResult;
@@ -9362,6 +9349,21 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
             : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
     };
 };
+const putVideoParticipantsFirst = (remoteParticipants) => {
+    const videoParticipants = [];
+    const audioParticipants = [];
+    remoteParticipants.forEach((p) => {
+        var _a;
+        if ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
+            videoParticipants.push(p);
+        }
+        else {
+            audioParticipants.push(p);
+        }
+    });
+    const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
+    return remoteParticipantSortedByVideo;
+};
 /**
  * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
  * @private
@@ -9408,6 +9410,7 @@ const rootStyle$1 = {
  */
 const childrenContainerStyle$1 = {
     height: '100%',
+    width: '100%',
     gap: `${HORIZONTAL_GALLERY_GAP}rem`
 };
 
@@ -9444,7 +9447,7 @@ const DEFAULT_CHILDREN_PER_PAGE = 5;
  * @returns
  */
 const HorizontalGallery = (props) => {
-    var _a, _b;
+    var _a;
     const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;
     const ids = useIdentifiers();
     const [page, setPage] = React.useState(0);
@@ -9468,13 +9471,18 @@ const HorizontalGallery = (props) => {
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
     const disableNextButton = page === lastPage;
+    const childrenStyles = React.useMemo(() => {
+        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
+    }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     // If children per page is 0 or less return empty element
     if (childrenPerPage <= 0) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle$1, (_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.overflowGalleryLeftNavButton })),
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle$1, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle$1) }, childrenOnCurrentPage.map((child, i) => {
+            return (React__default['default'].createElement(react.Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child));
+        })),
         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.overflowGalleryRightNavButton }))));
 };
 const HorizontalGalleryNavigationButton = (props) => {
@@ -9490,22 +9498,22 @@ 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: 58, height: 104 };
+const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };
 /**
  * Large floating modal width and height in rem for large screen
  * Aspect ratio: 16:9
  */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
+const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };
 /**
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };
+const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };
 /**
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 176, height: 100 };
+const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -9514,31 +9522,31 @@ const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-const localVideoTileContainerStyle = (theme, localVideoTileSize) => {
+const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
     return {
-        minWidth: _pxToRem(localVideoTileSize.width),
-        minHeight: _pxToRem(localVideoTileSize.height),
+        minWidth: `${localVideoTileSizeRem.width}rem`,
+        minHeight: `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: _pxToRem(localVideoTileOuterPaddingPX),
+        bottom: `${localVideoTileOuterPaddingRem}rem`,
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
-        right: _pxToRem(localVideoTileOuterPaddingPX)
+        right: `${localVideoTileOuterPaddingRem}rem`
     };
 };
 /**
  * @private
  */
-const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSize) => {
-    return react.concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSize), {
+const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
+    return react.concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
         root: { boxShadow: theme.effects.elevation8 }
     });
 };
 /**
  * @private
  */
-const floatingLocalVideoModalStyle = (theme, modalSize) => {
+const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, modalSize)
+        main: localVideoTileContainerStyle(theme, modalSizeRem)
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -9551,10 +9559,10 @@ const floatingLocalVideoModalStyle = (theme, modalSize) => {
 };
 /**
  * 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.
+ * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
  * @private
  */
-const localVideoTileOuterPaddingPX = 8;
+const localVideoTileOuterPaddingRem = 0.5;
 /**
  * @private
  */
@@ -9576,6 +9584,62 @@ 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% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`
+                : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`
+            : '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: 6.5, width: 6.5 };
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };
+/**
+ * @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.minWidth}rem`,
+    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,
+    width: '100%',
+    height: '100%'
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * VerticalGallery tile size in rem:
@@ -9609,22 +9673,20 @@ const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, isShort)
     return isNarrow && isShort
         ? {
             width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
-            height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
+            height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
             paddingBottom: '0.5rem'
         }
         : !isNarrow && isShort
             ? {
                 width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
                 height: shouldFloatLocalVideo
-                    ? `calc(100% - ${_pxToRem(SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
+                    ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`
                     : '100%',
                 paddingBottom: '0.5rem'
             }
             : {
                 width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
-                height: shouldFloatLocalVideo
-                    ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
-                    : '100%',
+                height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
                 paddingBottom: '0.5rem'
             };
 };
@@ -9665,8 +9727,8 @@ const verticalGalleryStyle = (isShort) => {
  * @private
  */
 const calculateHorizontalChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = _convertRemToPx(childWidthRem);
+    const { numberOfChildren, containerWidth, buttonWidthRem, gapWidthRem } = args;
+    const childMinWidth = _convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);
     const gapWidth = _convertRemToPx(gapWidthRem);
     /** First check how many children can fit in containerWidth.
      *    __________________________________
@@ -9676,7 +9738,7 @@ const calculateHorizontalChildrenPerPage = (args) => {
      *   <-----------containerWidth--------->
      *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
      */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));
     // If all children fit then return numberOfChildrenInContainer
     if (numberOfChildren <= numberOfChildrenInContainer) {
         return numberOfChildrenInContainer;
@@ -9694,7 +9756,7 @@ const calculateHorizontalChildrenPerPage = (args) => {
     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.max(Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth)), 1);
+    return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);
 };
 /**
  * Helper function to find the number of children for the VerticalGallery on each page.
@@ -9753,7 +9815,7 @@ const calculateVerticalChildrenPerPage = (args) => {
  * available width obtained from a ResizeObserver, width per child, gap width, and button width
  */
 const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender } = props;
+    const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
@@ -9761,10 +9823,10 @@ const ResponsiveHorizontalGallery = (props) => {
     const childrenPerPage = calculateHorizontalChildrenPerPage({
         numberOfChildren: React__default['default'].Children.count(props.children),
         containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
         gapWidthRem,
         buttonWidthRem
     });
+    onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
     return (React__default['default'].createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: react.mergeStyles(props.containerStyles) },
         React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children)));
 };
@@ -9947,7 +10009,7 @@ const VerticalGalleryControlBar = (props) => {
  * @beta
  */
 const ResponsiveVerticalGallery = (props) => {
-    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender } = props;
+    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender, onChildrenPerPageChange } = props;
     const containerRef = React.useRef(null);
     const containerHeight = _useContainerHeight(containerRef);
     const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
@@ -9959,64 +10021,11 @@ const ResponsiveVerticalGallery = (props) => {
         controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
         isShort: isShort !== null && isShort !== void 0 ? isShort : false
     });
+    onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
     return (React__default['default'].createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: react.mergeStyles(containerStyles) },
         React__default['default'].createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
 };
 
-// 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: 6.5, width: 6.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.
 /**
  * @private
@@ -10034,7 +10043,7 @@ const scrollableHorizontalGalleryStyles = {
  */
 const scrollableHorizontalGalleryContainerStyles = react.mergeStyles({
     display: 'flex',
-    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_PX.width}px)`,
+    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
     minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
     overflow: 'scroll',
     '-ms-overflow-style': 'none',
@@ -10072,7 +10081,7 @@ const OverflowGallery = (props) => {
     /* @conditional-compile-remove(vertical-gallery) */
     isShort = false, overflowGalleryElements, horizontalGalleryStyles, 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom', 
-    /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles, onChildrenPerPageChange } = props;
     const containerStyles = React.useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryLayout === 'VerticalRight') {
@@ -10100,13 +10109,16 @@ const OverflowGallery = (props) => {
     ]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryLayout === 'VerticalRight') {
-        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender }, overflowGalleryElements));
+        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
     }
     /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
+        // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
+        // participant tiles are visible
+        onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
         return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements, onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
     }
-    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, 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 }, overflowGalleryElements));
+    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10119,17 +10131,22 @@ const OverflowGallery = (props) => {
 const DefaultLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
     /* @conditional-compile-remove(vertical-gallery) */
-    parentHeight, 
-    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds, 
+    parentHeight, pinnedParticipantUserIds = [], 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+    // This is for tracking the number of children in the first page of horizontal gallery.
+    // This number will be used for the maxHorizontalDominantSpeakers when organizing the remote participants.
+    const childrenPerPage = React.useRef(4);
     const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
+        maxHorizontalGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
@@ -10168,7 +10185,9 @@ const DefaultLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(pinned-participants) */
-            overflowGalleryLayout: overflowGalleryLayout, onFetchTilesToRender: setIndexesToRender }));
+            overflowGalleryLayout: overflowGalleryLayout, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+                childrenPerPage.current = n;
+            } }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
@@ -10870,12 +10889,15 @@ const DRAG_OPTIONS$1 = {
 // 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 modalMaxDragPosition = {
+    x: _convertRemToPx(localVideoTileOuterPaddingRem),
+    y: _convertRemToPx(localVideoTileOuterPaddingRem)
+};
 /**
  * @private
  */
 const FloatingLocalVideo = (props) => {
-    const { localVideoComponent, layerHostId, localVideoSize, parentWidth, parentHeight } = props;
+    const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;
     const theme = useTheme();
     // 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.
@@ -10883,11 +10905,11 @@ const FloatingLocalVideo = (props) => {
         ? {
             // 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 + localVideoSize.width + localVideoTileOuterPaddingPX,
-            y: -parentHeight + localVideoSize.height + localVideoTileOuterPaddingPX
+            x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),
+            y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)
         }
-        : undefined, [parentHeight, parentWidth, localVideoSize.width, localVideoSize.height]);
-    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSize), [theme, localVideoSize]);
+        : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
+    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
     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));
 };
@@ -10928,18 +10950,23 @@ const layerHostStyle = {
  * @private
  */
 const FloatingLocalVideoLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
-    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds, 
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, pinnedParticipantUserIds = [], 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+    // This is for tracking the number of children in the first page of horizontal gallery.
+    // This number will be used for the maxHorizontalDominantSpeakers when organizing the remote participants.
+    const childrenPerPage = React.useRef(4);
     const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
+        maxHorizontalGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
@@ -10970,19 +10997,19 @@ const FloatingLocalVideoLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = reactHooks.useId('layerhost');
-    const localVideoSize = React.useMemo(() => {
+    const localVideoSizeRem = React.useMemo(() => {
         if (isNarrow) {
-            return SMALL_FLOATING_MODAL_SIZE_PX;
+            return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
         if ((horizontalGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {
             return isNarrow
-                ? SMALL_FLOATING_MODAL_SIZE_PX
+                ? SMALL_FLOATING_MODAL_SIZE_REM
                 : isShort
-                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX
-                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
+                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
-        return LARGE_FLOATING_MODAL_SIZE_PX;
+        return LARGE_FLOATING_MODAL_SIZE_REM;
     }, [
         horizontalGalleryTiles.length,
         isNarrow,
@@ -10992,10 +11019,10 @@ const FloatingLocalVideoLayout = (props) => {
     ]);
     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, localVideoSize), {
+    showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSize)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSize: localVideoSize, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = React.useMemo(() => {
         if (horizontalGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
@@ -11008,7 +11035,9 @@ const FloatingLocalVideoLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
-            overflowGalleryLayout: overflowGalleryLayout }));
+            overflowGalleryLayout: overflowGalleryLayout, onChildrenPerPageChange: (n) => {
+                childrenPerPage.current = n;
+            } }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,