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

package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js

@@ -3,41 +3,45 @@
 import { useCallback, useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 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 = useRef([]);
-    const visibleAudioParticipants = 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 = useRef([]);
+    const visibleHorizontalGalleryParticipants = 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' || 'Ringing'));
+    const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));
     /* @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 = 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 visibleVideoParticipants.current.length > 0
-            ? visibleVideoParticipants.current
-            : visibleAudioParticipants.current;
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleHorizontalGalleryParticipants.current.concat(callingParticipants);
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleHorizontalGalleryParticipants.current;
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive
@@ -47,17 +51,17 @@ 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 visibleVideoParticipants.current.concat(visibleAudioParticipants.current);
+            return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.current.concat(callingParticipants));
+            return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.current);
         }
         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)
                 : [];
-            return visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];
+            return visibleGridParticipants.current.length > 0 ? visibleHorizontalGalleryParticipants.current : [];
         }
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
@@ -74,18 +78,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
@@ -93,11 +91,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;
@@ -109,6 +103,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

package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxAudioDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds?: string[];\n}\n\n/**\n * A result that defines grid participants and horizontal participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  horizontalGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\n\nconst DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleVideoParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleAudioParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const {\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n    maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS,\n    isScreenShareActive = false\n  } = props;\n\n  visibleVideoParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipants?.filter((p) => p.videoStream?.isAvailable) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleVideoParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreams\n  }).slice(0, maxRemoteVideoStreams);\n\n  const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  visibleAudioParticipants.current = smartDominantSpeakerParticipants({\n    participants:\n      remoteParticipants?.filter(\n        (p) =>\n          !visibleVideoParticipantsSet.has(p.userId) &&\n          /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n            p.userId\n          )\n      ) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleAudioParticipants.current,\n    maxDominantSpeakers: maxAudioDominantSpeakers\n  });\n\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current.concat(callingParticipants);\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current;\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const gridParticipants = getGridParticipants();\n\n  const getHorizontalGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.length > 0\n        ? visibleAudioParticipants.current.concat(callingParticipants)\n        : [];\n      return visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];\n    }\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();\n\n  return { gridParticipants, horizontalGalleryParticipants };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithPinnedParticipants = (\n  props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {});\n\n  // count pinned participants with video\n  let pinnedParticipantsWithVideoOnCount = 0;\n\n  // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n  const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n  props.pinnedParticipantUserIds?.forEach((id) => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      pinnedParticipants.push(pinnedParticipant);\n      if (pinnedParticipant.videoStream?.isAvailable) {\n        pinnedParticipantsWithVideoOnCount++;\n      }\n    }\n  });\n\n  // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n  const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n  const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants,\n    // if there is a maximum of remote video streams we need to subtract pinned participants with video\n    maxRemoteVideoStreams: props.maxRemoteVideoStreams\n      ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount\n      : undefined\n  };\n\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n  if (pinnedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    horizontalGalleryParticipants: props.isScreenShareActive\n      ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)\n      : useOrganizedParticipantsResult.gridParticipants.concat(\n          useOrganizedParticipantsResult.horizontalGalleryParticipants\n        )\n  };\n};\n\n/**\n * Hook to determine which participants should be in grid and horizontal gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  /* @conditional-compile-remove(pinned-participants) */\n  return _useOrganizedParticipantsWithPinnedParticipants(args);\n  return _useOrganizedParticipants(args);\n};\n"]}
+{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxHorizontalGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n}\n\n/**\n * A result that defines grid participants and horizontal participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  horizontalGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\n\nconst DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS = 6;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleHorizontalGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n    maxHorizontalGalleryDominantSpeakers = DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    pinnedParticipantUserIds = []\n  } = props;\n\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n\n  visibleGridParticipants.current =\n    pinnedParticipantUserIds.length > 0 || isScreenShareActive\n      ? []\n      : smartDominantSpeakerParticipants({\n          participants: videoParticipants,\n          dominantSpeakers,\n          lastVisibleParticipants: visibleGridParticipants.current,\n          maxDominantSpeakers: maxRemoteVideoStreams\n        }).slice(0, maxRemoteVideoStreams);\n\n  const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));\n\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  visibleHorizontalGalleryParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(\n      (p) =>\n        !visibleGridParticipantsSet.has(p.userId) &&\n        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n          p.userId\n        )\n    ),\n    dominantSpeakers: dominantSpeakers,\n    lastVisibleParticipants: visibleHorizontalGalleryParticipants.current,\n    maxDominantSpeakers: maxHorizontalGalleryDominantSpeakers\n  });\n\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return visibleGridParticipants.current.length > 0\n      ? visibleGridParticipants.current\n      : visibleHorizontalGalleryParticipants.current.concat(callingParticipants);\n    return visibleGridParticipants.current.length > 0\n      ? visibleGridParticipants.current\n      : visibleHorizontalGalleryParticipants.current;\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const gridParticipants = getGridParticipants();\n\n  const getHorizontalGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleGridParticipants.current.concat(\n        visibleHorizontalGalleryParticipants.current.concat(callingParticipants)\n      );\n      return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleGridParticipants.current.length > 0\n        ? visibleHorizontalGalleryParticipants.current.concat(callingParticipants)\n        : [];\n      return visibleGridParticipants.current.length > 0 ? visibleHorizontalGalleryParticipants.current : [];\n    }\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();\n\n  return { gridParticipants, horizontalGalleryParticipants };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithPinnedParticipants = (\n  props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {});\n\n  // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n  const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n  props.pinnedParticipantUserIds?.forEach((id) => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      pinnedParticipants.push(pinnedParticipant);\n    }\n  });\n\n  // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n  const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n  const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants\n  };\n\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n  if (pinnedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    horizontalGalleryParticipants: props.isScreenShareActive\n      ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)\n      : useOrganizedParticipantsResult.gridParticipants.concat(\n          useOrganizedParticipantsResult.horizontalGalleryParticipants\n        )\n  };\n};\n\nconst putVideoParticipantsFirst = (\n  remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach((p) => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/**\n * Hook to determine which participants should be in grid and horizontal gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  /* @conditional-compile-remove(pinned-participants) */\n  return _useOrganizedParticipantsWithPinnedParticipants(args);\n  return _useOrganizedParticipants(args);\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js

@@ -35,6 +35,7 @@ export const rootStyle = {
  */
 export const childrenContainerStyle = {
     height: '100%',
+    width: '100%',
     gap: `${HORIZONTAL_GALLERY_GAP}rem`
 };
 //# sourceMappingURL=HorizontalGallery.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACjD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,MAAM,EAAE,MAAM;IACd,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Theme } from '@fluentui/react';\n\n/**\n * Horizontal Gallery button width in rem\n */\nexport const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n  return {\n    background: 'none',\n    padding: 0,\n    height: 'auto',\n    minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    border: `1px solid ${theme.palette.neutralLight}`,\n    borderRadius: theme.effects.roundedCorner4\n  };\n};\n\n/**\n * Horizontal Gallery gap size in rem between tiles and buttons\n */\nexport const HORIZONTAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n\n/**\n * @private\n */\nexport const childrenContainerStyle: IStyle = {\n  height: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n"]}
+{"version":3,"file":"HorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACjD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Theme } from '@fluentui/react';\n\n/**\n * Horizontal Gallery button width in rem\n */\nexport const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n  return {\n    background: 'none',\n    padding: 0,\n    height: 'auto',\n    minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    border: `1px solid ${theme.palette.neutralLight}`,\n    borderRadius: theme.effects.roundedCorner4\n  };\n};\n\n/**\n * Horizontal Gallery gap size in rem between tiles and buttons\n */\nexport const HORIZONTAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n\n/**\n * @private\n */\nexport const childrenContainerStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n"]}

package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js

@@ -12,10 +12,7 @@ export 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.
@@ -29,17 +26,12 @@ export 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) => {

package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js.map

@@ -1 +1 @@
-{"version":3,"file":"dominantSpeaker.js","sourceRoot":"","sources":["../../../../../../react-components/src/gallery/dominantSpeaker.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { VideoGalleryRemoteParticipant } from '../types';\n\ntype SmartDominantSpeakerParticipantsArgs = {\n  /**\n   * Array containing all participants of a call. {@link @azure/communication-react#VideoGalleryRemoteParticipant}\n   */\n  participants: VideoGalleryRemoteParticipant[];\n  /**\n   * An array containing the userId of dominant speakers\n   * in a call in the order of their dominance. 0th index is the most dominant, 1st is the second most etc\n   */\n  dominantSpeakers?: string[];\n  /**\n   * Array containing currently rendered (visible)\n   * participants in the call. {@link @azure/communication-react#VideoGalleryRemoteParticipant}\n   */\n  lastVisibleParticipants?: VideoGalleryRemoteParticipant[];\n  /**\n   * Maximum number of dominant speaker positions to move participants in.\n   */\n  maxDominantSpeakers: number;\n};\n\n/**\n * Calculates the participants that should be rendered based on the list of dominant\n * speakers and currently rendered participants in a call.\n * @param args - SmartDominantSpeakerParticipantsArgs\n * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}\n */\nexport const smartDominantSpeakerParticipants = (\n  args: SmartDominantSpeakerParticipantsArgs\n): VideoGalleryRemoteParticipant[] => {\n  const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;\n\n  // Don't apply any logic if total number of video streams is less than max dominant speakers.\n  if (participants.length <= maxDominantSpeakers) {\n    return participants;\n  }\n\n  const participantsMap = participantsById(participants);\n\n  // Only use the Max allowed dominant speakers that exist in participants\n  const dominantSpeakerIds = Array.from(new Set(dominantSpeakers).values())\n    .filter((id) => !!participantsMap[id])\n    .slice(0, maxDominantSpeakers);\n\n  const lastVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId);\n  const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);\n  const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));\n\n  // Remove participants that are no longer dominant and replace them with new dominant speakers.\n  for (let index = 0; index < maxDominantSpeakers; index++) {\n    const newVisibleParticipantId = newVisibleParticipantIds[index];\n    if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {\n      const replacement = newDominantSpeakerIds.shift();\n      if (!replacement) {\n        break;\n      }\n      newVisibleParticipantIds[index] = replacement;\n    }\n  }\n\n  const removedVisibleParticipantIds = lastVisibleParticipantIds.filter((p) => !newVisibleParticipantIds.includes(p));\n  removedVisibleParticipantIds.forEach((p) => newVisibleParticipantIds.push(p));\n\n  const newVisibleParticipantIdSet = new Set(newVisibleParticipantIds);\n\n  const leftoverParticipants = participants.filter((p) => !newVisibleParticipantIdSet.has(p.userId));\n  leftoverParticipants.forEach((p) => {\n    newVisibleParticipantIds.push(p.userId);\n  });\n\n  // newVisibleParticipantIds can contain identifiers for participants that are no longer in the call. So we ignore those IDs.\n  const newVisibleParticipants = newVisibleParticipantIds\n    .map((participantId) => participantsMap[participantId])\n    .filter((p) => !!p);\n\n  return newVisibleParticipants;\n};\n\nconst participantsById = (\n  participants: VideoGalleryRemoteParticipant[]\n): { [key: string]: VideoGalleryRemoteParticipant } => {\n  const response: { [key: string]: VideoGalleryRemoteParticipant } = {};\n  participants.forEach((p) => (response[p.userId] = p));\n  return response;\n};\n"]}
+{"version":3,"file":"dominantSpeaker.js","sourceRoot":"","sources":["../../../../../../react-components/src/gallery/dominantSpeaker.ts"],"names":[],"mappings":"AAyBA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,IAA0C,EACT,EAAE;IACnC,MAAM,EAAE,YAAY,EAAE,gBAAgB,GAAG,EAAE,EAAE,uBAAuB,GAAG,EAAE,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;IAExG,6FAA6F;IAC7F,IAAI,YAAY,CAAC,MAAM,IAAI,mBAAmB,EAAE;QAC9C,OAAO,YAAY,CAAC;KACrB;IAED,MAAM,eAAe,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAEvD,wEAAwE;IACxE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAEhH,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC5G,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAExG,+FAA+F;IAC/F,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,mBAAmB,EAAE,KAAK,EAAE,EAAE;QACxD,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAChE,IAAI,uBAAuB,KAAK,SAAS,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,EAAE;YAClG,MAAM,WAAW,GAAG,qBAAqB,CAAC,KAAK,EAAE,CAAC;YAClD,IAAI,CAAC,WAAW,EAAE;gBAChB,MAAM;aACP;YACD,wBAAwB,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC;SAC/C;KACF;IAED,IAAI,sBAAsB,GAAG,wBAAwB;SAClD,GAAG,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACtD,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;IAElC,MAAM,2BAA2B,GAAG,IAAI,GAAG,CAAC,wBAAwB,CAAC,CAAC;IACtE,MAAM,qBAAqB,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAErG,sBAAsB,GAAG,sBAAsB,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;IAE9E,OAAO,sBAAsB,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CACvB,YAA6C,EACK,EAAE;IACpD,MAAM,QAAQ,GAAqD,EAAE,CAAC;IACtE,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACtD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { VideoGalleryRemoteParticipant } from '../types';\n\ntype SmartDominantSpeakerParticipantsArgs = {\n  /**\n   * Array containing all participants of a call. {@link @azure/communication-react#VideoGalleryRemoteParticipant}\n   */\n  participants: VideoGalleryRemoteParticipant[];\n  /**\n   * An array containing the userId of dominant speakers\n   * in a call in the order of their dominance. 0th index is the most dominant, 1st is the second most etc\n   */\n  dominantSpeakers?: string[];\n  /**\n   * Array containing currently rendered (visible)\n   * participants in the call. {@link @azure/communication-react#VideoGalleryRemoteParticipant}\n   */\n  lastVisibleParticipants?: VideoGalleryRemoteParticipant[];\n  /**\n   * Maximum number of dominant speaker positions to move participants in.\n   */\n  maxDominantSpeakers: number;\n};\n\n/**\n * Calculates the participants that should be rendered based on the list of dominant\n * speakers and currently rendered participants in a call.\n * @param args - SmartDominantSpeakerParticipantsArgs\n * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}\n */\nexport const smartDominantSpeakerParticipants = (\n  args: SmartDominantSpeakerParticipantsArgs\n): VideoGalleryRemoteParticipant[] => {\n  const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;\n\n  // Don't apply any logic if total number of video streams is less than max dominant speakers.\n  if (participants.length <= maxDominantSpeakers) {\n    return participants;\n  }\n\n  const participantsMap = participantsById(participants);\n\n  // Only use the Max allowed dominant speakers that exist in participants\n  const dominantSpeakerIds = dominantSpeakers.filter((id) => !!participantsMap[id]).slice(0, maxDominantSpeakers);\n\n  const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);\n  const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));\n\n  // Remove participants that are no longer dominant and replace them with new dominant speakers.\n  for (let index = 0; index < maxDominantSpeakers; index++) {\n    const newVisibleParticipantId = newVisibleParticipantIds[index];\n    if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {\n      const replacement = newDominantSpeakerIds.shift();\n      if (!replacement) {\n        break;\n      }\n      newVisibleParticipantIds[index] = replacement;\n    }\n  }\n\n  let newVisibleParticipants = newVisibleParticipantIds\n    .map((participantId) => participantsMap[participantId])\n    .filter((p) => p !== undefined);\n\n  const newVisibleParticipantIdsSet = new Set(newVisibleParticipantIds);\n  const remainingParticipants = participants.filter((p) => !newVisibleParticipantIdsSet.has(p.userId));\n\n  newVisibleParticipants = newVisibleParticipants.concat(remainingParticipants);\n\n  return newVisibleParticipants;\n};\n\nconst participantsById = (\n  participants: VideoGalleryRemoteParticipant[]\n): { [key: string]: VideoGalleryRemoteParticipant } => {\n  const response: { [key: string]: VideoGalleryRemoteParticipant } = {};\n  participants.forEach((p) => (response[p.userId] = p));\n  return response;\n};\n"]}

package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.d.ts

@@ -39,6 +39,8 @@ export interface _Identifiers {
     overflowGalleryLeftNavButton: string;
     /** `data-ui-id` value for overflow gallery component's right navigation button */
     overflowGalleryRightNavButton: string;
+    /** `data-ui-id` value for the video tiles in the horizontal gallery */
+    horizontalGalleryVideoTile: string;
     /** `data-ui-id` value for `VerticalGallery` Component's children video tiles */
     verticalGalleryVideoTile: string;
     /** `data-ui-id` value for `VerticalGallery` Component's page counter */

package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js

@@ -17,6 +17,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'
 };

package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"IdentifierProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/identifiers/IdentifierProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkDzD,MAAM,kBAAkB,GAAiB;IACvC,gBAAgB,EAAE,mBAAmB;IACrC,+BAA+B,EAAE,qCAAqC;IACtE,yBAAyB,EAAE,8BAA8B;IACzD,eAAe,EAAE,kBAAkB;IACnC,2BAA2B,EAAE,gCAAgC;IAC7D,sCAAsC,EAAE,4CAA4C;IACpF,cAAc,EAAE,iBAAiB;IACjC,gBAAgB,EAAE,mBAAmB;IACrC,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,4BAA4B,EAAE,kCAAkC;IAChE,6BAA6B,EAAE,mCAAmC;IAClE,mDAAmD;IACnD,wBAAwB,EAAE,6BAA6B;IACvD,mDAAmD;IACnD,0BAA0B,EAAE,+BAA+B;CAC5D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAe,kBAAkB,CAAC,CAAC;AAgBjF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,kBAAkB,IAAG,QAAQ,CAA8B,CAAC;AACvH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/**\n * Identifiers that can be used to target specific components in a composite.\n *\n * @experimental\n *\n * These identifiers are assigned as `data-ui-id` HTML attribute of the root element of the targeted component.\n *\n * This API is intended for end to end test automation. As such, they are not covered by the API\n * guarantee of the public API. This will remain perenially experimental and compatibility breaking changes\n * may be made at any point.\n *\n * @internal\n */\nexport interface _Identifiers {\n  /** `data-ui-id` value for `SendBox` Component */\n  sendboxTextField: string;\n  /** `data-ui-id` value for `ParticipantButton` Component's People menu item */\n  participantButtonPeopleMenuItem: string;\n  /** `data-ui-id` value for `ParticipantItem` Component's Menu button */\n  participantItemMenuButton: string;\n  /** `data-ui-id` value for `ParticipantList` Component */\n  participantList: string;\n  /** `data-ui-id` value for `ParticipantList` Component's People Button */\n  participantListPeopleButton: string;\n  /** `data-ui-id` value for `ParticipantList` Component's Remove Participant Button */\n  participantListRemoveParticipantButton: string;\n  /** `data-ui-id` value for `MessageThread` components message content */\n  messageContent: string;\n  /** `data-ui-id` value for `MessageThread` components message timestamp */\n  messageTimestamp: string;\n  /** `data-ui-id` value for `TypingIndicator` Component */\n  typingIndicator: string;\n  /** `data-ui-id` value for `VideoGallery` Component */\n  videoGallery: string;\n  /** `data-ui-id` value for `VideoTile` Component */\n  videoTile: string;\n  /** `data-ui-id` value for overflow gallery component's left navigation button */\n  overflowGalleryLeftNavButton: string;\n  /** `data-ui-id` value for overflow gallery component's right navigation button */\n  overflowGalleryRightNavButton: string;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /** `data-ui-id` value for `VerticalGallery` Component's children video tiles */\n  verticalGalleryVideoTile: string;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /** `data-ui-id` value for `VerticalGallery` Component's page counter */\n  verticalGalleryPageCounter: string;\n}\n\nconst defaultIdentifiers: _Identifiers = {\n  sendboxTextField: 'sendbox-textfield',\n  participantButtonPeopleMenuItem: 'participant-button-people-menu-item',\n  participantItemMenuButton: 'participant-item-menu-button',\n  participantList: 'participant-list',\n  participantListPeopleButton: 'participant-list-people-button',\n  participantListRemoveParticipantButton: 'participant-list-remove-participant-button',\n  messageContent: 'message-content',\n  messageTimestamp: 'message-timestamp',\n  typingIndicator: 'typing-indicator',\n  videoGallery: 'video-gallery',\n  videoTile: 'video-tile',\n  overflowGalleryLeftNavButton: 'overflow-gallery-left-nav-button',\n  overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button',\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryVideoTile: 'vertical-gallery-video-tile',\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryPageCounter: 'vertical-gallery-page-counter'\n};\n\n/**\n * @private\n */\nexport const IdentifierContext = createContext<_Identifiers>(defaultIdentifiers);\n\n/**\n * Arguments to Context Provider for {@link _Identifiers}.\n *\n * @experimental\n *\n * See documentation for {@link _Identifiers}.\n *\n * @internal\n */\nexport interface _IdentifierProviderProps {\n  identifiers?: _Identifiers;\n  children: React.ReactNode;\n}\n\n/**\n * React Context provider for {@link _Identifiers}.\n *\n * @experimental\n *\n * See documentation for {@link _Identifiers}.\n *\n * @internal\n */\nexport const _IdentifierProvider = (props: _IdentifierProviderProps): JSX.Element => {\n  const { identifiers, children } = props;\n  return <IdentifierContext.Provider value={identifiers ?? defaultIdentifiers}>{children}</IdentifierContext.Provider>;\n};\n\n/**\n * @private\n */\nexport const useIdentifiers = (): _Identifiers => useContext(IdentifierContext);\n"]}
+{"version":3,"file":"IdentifierProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/identifiers/IdentifierProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAoDzD,MAAM,kBAAkB,GAAiB;IACvC,gBAAgB,EAAE,mBAAmB;IACrC,+BAA+B,EAAE,qCAAqC;IACtE,yBAAyB,EAAE,8BAA8B;IACzD,eAAe,EAAE,kBAAkB;IACnC,2BAA2B,EAAE,gCAAgC;IAC7D,sCAAsC,EAAE,4CAA4C;IACpF,cAAc,EAAE,iBAAiB;IACjC,gBAAgB,EAAE,mBAAmB;IACrC,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,4BAA4B,EAAE,kCAAkC;IAChE,6BAA6B,EAAE,mCAAmC;IAClE,mDAAmD;IACnD,wBAAwB,EAAE,6BAA6B;IACvD,0BAA0B,EAAE,+BAA+B;IAC3D,mDAAmD;IACnD,0BAA0B,EAAE,+BAA+B;CAC5D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAe,kBAAkB,CAAC,CAAC;AAgBjF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,kBAAkB,IAAG,QAAQ,CAA8B,CAAC;AACvH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/**\n * Identifiers that can be used to target specific components in a composite.\n *\n * @experimental\n *\n * These identifiers are assigned as `data-ui-id` HTML attribute of the root element of the targeted component.\n *\n * This API is intended for end to end test automation. As such, they are not covered by the API\n * guarantee of the public API. This will remain perenially experimental and compatibility breaking changes\n * may be made at any point.\n *\n * @internal\n */\nexport interface _Identifiers {\n  /** `data-ui-id` value for `SendBox` Component */\n  sendboxTextField: string;\n  /** `data-ui-id` value for `ParticipantButton` Component's People menu item */\n  participantButtonPeopleMenuItem: string;\n  /** `data-ui-id` value for `ParticipantItem` Component's Menu button */\n  participantItemMenuButton: string;\n  /** `data-ui-id` value for `ParticipantList` Component */\n  participantList: string;\n  /** `data-ui-id` value for `ParticipantList` Component's People Button */\n  participantListPeopleButton: string;\n  /** `data-ui-id` value for `ParticipantList` Component's Remove Participant Button */\n  participantListRemoveParticipantButton: string;\n  /** `data-ui-id` value for `MessageThread` components message content */\n  messageContent: string;\n  /** `data-ui-id` value for `MessageThread` components message timestamp */\n  messageTimestamp: string;\n  /** `data-ui-id` value for `TypingIndicator` Component */\n  typingIndicator: string;\n  /** `data-ui-id` value for `VideoGallery` Component */\n  videoGallery: string;\n  /** `data-ui-id` value for `VideoTile` Component */\n  videoTile: string;\n  /** `data-ui-id` value for overflow gallery component's left navigation button */\n  overflowGalleryLeftNavButton: string;\n  /** `data-ui-id` value for overflow gallery component's right navigation button */\n  overflowGalleryRightNavButton: string;\n  /** `data-ui-id` value for the video tiles in the horizontal gallery */\n  horizontalGalleryVideoTile: string;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /** `data-ui-id` value for `VerticalGallery` Component's children video tiles */\n  verticalGalleryVideoTile: string;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /** `data-ui-id` value for `VerticalGallery` Component's page counter */\n  verticalGalleryPageCounter: string;\n}\n\nconst defaultIdentifiers: _Identifiers = {\n  sendboxTextField: 'sendbox-textfield',\n  participantButtonPeopleMenuItem: 'participant-button-people-menu-item',\n  participantItemMenuButton: 'participant-item-menu-button',\n  participantList: 'participant-list',\n  participantListPeopleButton: 'participant-list-people-button',\n  participantListRemoveParticipantButton: 'participant-list-remove-participant-button',\n  messageContent: 'message-content',\n  messageTimestamp: 'message-timestamp',\n  typingIndicator: 'typing-indicator',\n  videoGallery: 'video-gallery',\n  videoTile: 'video-tile',\n  overflowGalleryLeftNavButton: 'overflow-gallery-left-nav-button',\n  overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button',\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryVideoTile: 'vertical-gallery-video-tile',\n  horizontalGalleryVideoTile: 'horizontal-gallery-video-tile',\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryPageCounter: 'vertical-gallery-page-counter'\n};\n\n/**\n * @private\n */\nexport const IdentifierContext = createContext<_Identifiers>(defaultIdentifiers);\n\n/**\n * Arguments to Context Provider for {@link _Identifiers}.\n *\n * @experimental\n *\n * See documentation for {@link _Identifiers}.\n *\n * @internal\n */\nexport interface _IdentifierProviderProps {\n  identifiers?: _Identifiers;\n  children: React.ReactNode;\n}\n\n/**\n * React Context provider for {@link _Identifiers}.\n *\n * @experimental\n *\n * See documentation for {@link _Identifiers}.\n *\n * @internal\n */\nexport const _IdentifierProvider = (props: _IdentifierProviderProps): JSX.Element => {\n  const { identifiers, children } = props;\n  return <IdentifierContext.Provider value={identifiers ?? defaultIdentifiers}>{children}</IdentifierContext.Provider>;\n};\n\n/**\n * @private\n */\nexport const useIdentifiers = (): _Identifiers => useContext(IdentifierContext);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.5.1-alpha-202303230013",
+  "version": "1.5.1-alpha-202303250012",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -89,13 +89,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.5.1-alpha-202303230013",
-    "@internal/calling-stateful-client": "1.5.1-alpha-202303230013",
-    "@internal/chat-component-bindings": "1.5.1-alpha-202303230013",
-    "@internal/chat-stateful-client": "1.5.1-alpha-202303230013",
-    "@internal/fake-backends": "1.5.1-alpha-202303230013",
-    "@internal/react-components": "1.5.1-alpha-202303230013",
-    "@internal/react-composites": "1.5.1-alpha-202303230013",
+    "@internal/calling-component-bindings": "1.5.1-alpha-202303250012",
+    "@internal/calling-stateful-client": "1.5.1-alpha-202303250012",
+    "@internal/chat-component-bindings": "1.5.1-alpha-202303250012",
+    "@internal/chat-stateful-client": "1.5.1-alpha-202303250012",
+    "@internal/fake-backends": "1.5.1-alpha-202303250012",
+    "@internal/react-components": "1.5.1-alpha-202303250012",
+    "@internal/react-composites": "1.5.1-alpha-202303250012",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",