@azure/communication-react 1.5.1-alpha-202303240013 → 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-202303240013';
+var telemetryVersion = '1.5.1-alpha-202303250012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9224,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.
@@ -9241,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) => {
@@ -9262,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
@@ -9303,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)
                 : [];
         }
     }, [
@@ -9328,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
@@ -9347,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;
@@ -9363,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
@@ -9814,7 +9815,7 @@ const calculateVerticalChildrenPerPage = (args) => {
  * available width obtained from a ResizeObserver, width per child, gap width, and button width
  */
 const ResponsiveHorizontalGallery = (props) => {
-    const { 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;
@@ -9825,6 +9826,7 @@ const ResponsiveHorizontalGallery = (props) => {
         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)));
 };
@@ -10007,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;
@@ -10019,6 +10021,7 @@ 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)));
 };
@@ -10078,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') {
@@ -10106,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, 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.
@@ -10125,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;
@@ -10174,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,
@@ -10937,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;
@@ -11017,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,