@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.0

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

@@ -3,119 +3,70 @@
 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_OVERFLOW_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 : [],
+    const visibleGridParticipants = useRef([]);
+    const visibleOverflowGalleryParticipants = useRef([]);
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_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: visibleVideoParticipants.current,
+        lastVisibleParticipants: visibleGridParticipants.current,
         maxDominantSpeakers: maxRemoteVideoStreams
     }).slice(0, maxRemoteVideoStreams);
-    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || '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
+    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));
+    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
+    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
+        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId)),
+        dominantSpeakers: dominantSpeakers,
+        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
+        maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
     });
     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;
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
-    ]);
+        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current;
+    }, [isScreenShareActive]);
     const gridParticipants = getGridParticipants();
-    const getHorizontalGalleryRemoteParticipants = useCallback(() => {
+    const getOverflowGalleryRemoteParticipants = useCallback(() => {
         if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
-            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current);
+            // If screen sharing is active, assign video and audio participants as overflow gallery participants
+            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.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 visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];
+            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : [];
         }
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
-    ]);
-    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
-    return { gridParticipants, horizontalGalleryParticipants };
+    }, [isScreenShareActive]);
+    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
+    return {
+        gridParticipants,
+        overflowGalleryParticipants: overflowGalleryParticipants
+    };
 };
-/* @conditional-compile-remove(pinned-participants) */
-const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
-    var _a;
-    // map remote participants by userId
-    const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
-        map[remoteParticipant.userId] = remoteParticipant;
-        return map;
-    }, {});
-    // count pinned participants with video
-    let pinnedParticipantsWithVideoOnCount = 0;
-    // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
-    const pinnedParticipants = [];
-    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
+const putVideoParticipantsFirst = (remoteParticipants) => {
+    const videoParticipants = [];
+    const audioParticipants = [];
+    remoteParticipants.forEach(p => {
         var _a;
-        const pinnedParticipant = remoteParticipantMap[id];
-        if (pinnedParticipant) {
-            pinnedParticipants.push(pinnedParticipant);
-            if ((_a = pinnedParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
-                pinnedParticipantsWithVideoOnCount++;
-            }
+        if ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
+            videoParticipants.push(p);
+        }
+        else {
+            audioParticipants.push(p);
         }
     });
-    // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
-    const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
-    const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
-    const 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 });
-    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
-    if (pinnedParticipants.length === 0) {
-        return useOrganizedParticipantsResult;
-    }
-    return {
-        gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
-        horizontalGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
-            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
-    };
+    const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
+    return remoteParticipantSortedByVideo;
 };
 /**
- * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
 export const useOrganizedParticipants = (args) => {
-    /* @conditional-compile-remove(pinned-participants) */
-    return _useOrganizedParticipantsWithPinnedParticipants(args);
     return _useOrganizedParticipants(args);
 };
 //# sourceMappingURL=videoGalleryLayoutUtils.js.map

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":["../../../../../../../preprocess-dist/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  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    pinnedParticipantUserIds = []\n  } = props;\n  const videoParticipants = remoteParticipants.filter(p => p.videoStream?.isAvailable);\n  visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : smartDominantSpeakerParticipants({\n    participants: videoParticipants,\n    dominantSpeakers,\n    lastVisibleParticipants: visibleGridParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreams\n  }).slice(0, maxRemoteVideoStreams);\n  const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId)),\n    dominantSpeakers: dominantSpeakers,\n    lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current;\n  }, [isScreenShareActive]);\n  const gridParticipants = getGridParticipants();\n  const getOverflowGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.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      return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : [];\n    }\n  }, [isScreenShareActive]);\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n  return {\n    gridParticipants,\n    overflowGalleryParticipants: overflowGalleryParticipants\n  };\n};\nconst putVideoParticipantsFirst = (remoteParticipants: VideoGalleryRemoteParticipant[]): 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 overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  return _useOrganizedParticipants(args);\n};"]}

package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts

@@ -9,6 +9,17 @@ import { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 export declare const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Styles to disable the selectivity of a text in video gallery
+ */
+export declare const unselectable: {
+    '-webkit-user-select': string;
+    '-webkit-touch-callout': string;
+    '-moz-user-select': string;
+    '-ms-user-select': string;
+    'user-select': string;
+};
 /**
  * @private
  * Set aside only 6 dominant speakers for remaining audio participants
@@ -21,11 +32,6 @@ export declare const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
 export declare const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS: {
     kind: string;
 };
-/**
- * @private
- * Maximum number of remote video tiles that can be pinned
- */
-export declare const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
 /**
  * All strings that may be shown on the UI in the {@link VideoGallery}.
  *
@@ -46,14 +52,6 @@ export interface VideoGalleryStrings {
     localVideoSelectedDescription: string;
     /** placeholder text for participants who does not have a display name*/
     displayNamePlaceholder: string;
-    /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */
-    fitRemoteParticipantToFrame: string;
-    /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */
-    fillRemoteParticipantFrame: string;
-    /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */
-    pinParticipantForMe: string;
-    /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */
-    unpinParticipantForMe: string;
 }
 /**
  * @public
@@ -132,52 +130,6 @@ export interface VideoGalleryProps {
      * Camera control information for button to switch cameras.
      */
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
-    /**
-     * List of pinned participant userIds.
-     */
-    pinnedParticipants?: string[];
-    /**
-     * This callback will be called when a participant video tile is pinned.
-     */
-    onPinParticipant?: (userId: string) => void;
-    /**
-     * This callback will be called when a participant video tile is un-pinned.
-     */
-    onUnpinParticipant?: (userId: string) => void;
-    /**
-     * Options for showing the remote video tile menu.
-     *
-     * @defaultValue \{ kind: 'contextual' \}
-     */
-    remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
-}
-/**
- * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.
- *
- * @beta
- */
-export interface VideoTileContextualMenuProps {
-    /**
-     * The menu property kind
-     */
-    kind: 'contextual';
-}
-/**
- * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.
- *
- * @beta
- */
-export interface VideoTileDrawerMenuProps {
-    /**
-     * The menu property kind
-     */
-    kind: 'drawer';
-    /**
-     * The optional id property provided on an element that the drawer menu should render within when a
-     * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will
-     * render within the VideoGallery component.
-     */
-    hostId?: string;
 }
 /**
  * VideoGallery represents a layout of video tiles for a specific call.

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

@@ -9,20 +9,27 @@ import { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/
 import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
 import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
 import { _LocalVideoTile } from './LocalVideoTile';
-/* @conditional-compile-remove(rooms) */
-import { _usePermissions } from '../permissions';
 import { DefaultLayout } from './VideoGallery/DefaultLayout';
 import { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';
 import { useIdentifiers } from '../identifiers';
 import { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';
 import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';
-/* @conditional-compile-remove(pinned-participants) */
-import { useId } from '@fluentui/react-hooks';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 export const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Styles to disable the selectivity of a text in video gallery
+ */
+export const unselectable = {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none',
+    '-moz-user-select': 'none',
+    '-ms-user-select': 'none',
+    'user-select': 'none'
+};
 /**
  * @private
  * Set aside only 6 dominant speakers for remaining audio participants
@@ -35,12 +42,6 @@ export const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
 export const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {
     kind: 'contextual'
 };
-/* @conditional-compile-remove(pinned-participants) */
-/**
- * @private
- * Maximum number of remote video tiles that can be pinned
- */
-export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
@@ -48,133 +49,42 @@ export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  * @public
  */
 export const VideoGallery = (props) => {
-    var _a, _b, _c;
-    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, 
-    /* @conditional-compile-remove(pinned-participants) */
-    onPinParticipant: onPinParticipantHandler, 
-    /* @conditional-compile-remove(pinned-participants) */
-    onUnpinParticipant: onUnpinParticipantHandler, 
-    /* @conditional-compile-remove(pinned-participants) */
-    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS } = props;
+    var _a, _b;
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
-    /* @conditional-compile-remove(pinned-participants) */
-    const drawerMenuHostIdFromProp = remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'
-        ? remoteVideoTileMenuOptions.hostId
-        : undefined;
-    /* @conditional-compile-remove(pinned-participants) */
-    const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
-    /* @conditional-compile-remove(pinned-participants) */
-    const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState([]);
-    /* @conditional-compile-remove(pinned-participants) */
-    // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
-    const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
-    /* @conditional-compile-remove(rooms) */
-    const permissions = _usePermissions();
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
     const localVideoTile = useMemo(() => {
         var _a, _b;
-        /* @conditional-compile-remove(rooms) */
-        if (!permissions.cameraButton) {
-            return undefined;
-        }
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
         const localVideoTileStyles = concatStyleSets(shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {}, {
-            root: { borderRadius: theme.effects.roundedCorner4 }
+            root: {
+                borderRadius: theme.effects.roundedCorner4
+            }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
-        return (React.createElement(Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
-    }, [
-        isNarrow,
-        localParticipant,
-        localVideoCameraCycleButtonProps,
-        localVideoViewOptions,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        onRenderAvatar,
-        onRenderLocalVideoTile,
-        shouldFloatLocalVideo,
-        showCameraSwitcherInLocalPreview,
-        showMuteIndicator,
-        strings.localVideoCameraSwitcherLabel,
-        strings.localVideoLabel,
-        strings.localVideoMovementLabel,
-        strings.localVideoSelectedDescription,
-        styles === null || styles === void 0 ? void 0 : styles.localVideo,
-        theme.effects.roundedCorner4,
-        /* @conditional-compile-remove(rooms) */ permissions.cameraButton
-    ]);
-    /* @conditional-compile-remove(pinned-participants) */
-    const onPinParticipant = useCallback((userId) => {
-        if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
-            return;
-        }
-        if (!pinnedParticipantsState.includes(userId)) {
-            setPinnedParticipantsState(pinnedParticipantsState.concat(userId));
-        }
-        onPinParticipantHandler === null || onPinParticipantHandler === void 0 ? void 0 : onPinParticipantHandler(userId);
-    }, [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]);
-    /* @conditional-compile-remove(pinned-participants) */
-    const onUnpinParticipant = useCallback((userId) => {
-        setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));
-        onUnpinParticipantHandler === null || onUnpinParticipantHandler === void 0 ? void 0 : onUnpinParticipantHandler(userId);
-    }, [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]);
+        return React.createElement(Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
+            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles }));
+    }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, shouldFloatLocalVideo, showCameraSwitcherInLocalPreview, showMuteIndicator, strings.localVideoCameraSwitcherLabel, strings.localVideoLabel, strings.localVideoMovementLabel, strings.localVideoSelectedDescription, styles === null || styles === void 0 ? void 0 : styles.localVideo, theme.effects.roundedCorner4]);
     const defaultOnRenderVideoTile = useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
-        /* @conditional-compile-remove(pinned-participants) */
-        const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
-        return (React.createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
-            /* @conditional-compile-remove(PSTN-calls) */
-            participantState: participant.state, 
-            /* @conditional-compile-remove(pinned-participants) */
-            menuKind: remoteVideoTileMenuOptions
-                ? remoteVideoTileMenuOptions.kind === 'drawer'
-                    ? 'drawer'
-                    : 'contextual'
-                : undefined, 
-            /* @conditional-compile-remove(pinned-participants) */
-            drawerMenuHostId: drawerMenuHostId, 
-            /* @conditional-compile-remove(pinned-participants) */
-            onPinParticipant: onPinParticipant, 
-            /* @conditional-compile-remove(pinned-participants) */
-            onUnpinParticipant: onUnpinParticipant, 
-            /* @conditional-compile-remove(pinned-participants) */
-            isPinned: isPinned, 
-            /* @conditional-compile-remove(pinned-participants) */
-            disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES }));
-    }, [
-        onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
-        remoteVideoViewOptions,
-        onRenderAvatar,
-        showMuteIndicator,
-        strings,
-        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
-        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
-        /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
-        /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant
-    ]);
-    const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+        return React.createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings });
+    }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator, strings]);
+    const screenShareParticipant = remoteParticipants.find(participant => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving })));
-    const screenShareComponent = remoteScreenShareComponent
-        ? remoteScreenShareComponent
-        : localParticipant.isScreenSharingOn
-            ? localScreenShareStreamComponent
-            : undefined;
+    const remoteScreenShareComponent = screenShareParticipant && React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_a = screenShareParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isReceiving }));
+    const screenShareComponent = remoteScreenShareComponent ? remoteScreenShareComponent : localParticipant.isScreenSharingOn ? localScreenShareStreamComponent : undefined;
     const layoutProps = useMemo(() => ({
         remoteParticipants,
         screenShareComponent,
@@ -185,31 +95,14 @@ export const VideoGallery = (props) => {
         onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile,
         localVideoComponent: localVideoTile,
         parentWidth: containerWidth,
-        parentHeight: containerHeight,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants
-    }), [
-        remoteParticipants,
-        screenShareComponent,
-        showCameraSwitcherInLocalPreview,
-        maxRemoteVideoStreams,
-        dominantSpeakers,
-        styles,
-        localVideoTile,
-        containerWidth,
-        containerHeight,
-        onRenderRemoteVideoTile,
-        defaultOnRenderVideoTile,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants
-    ]);
+        parentHeight: containerHeight
+    }), [remoteParticipants, screenShareComponent, showCameraSwitcherInLocalPreview, maxRemoteVideoStreams, dominantSpeakers, styles, localVideoTile, containerWidth, containerHeight, onRenderRemoteVideoTile, defaultOnRenderVideoTile]);
     const videoGalleryLayout = useMemo(() => {
         if (layout === 'floatingLocalVideo') {
             return React.createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [layout, layoutProps]);
-    return (React.createElement("div", { 
-        /* @conditional-compile-remove(pinned-participants) */
-        // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
-        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
+    return React.createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) }, videoGalleryLayout);
 };
 //# sourceMappingURL=VideoGallery.js.map