@azure/communication-react 1.8.0 → 1.8.1-alpha-202309210012

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

@@ -3,24 +3,60 @@
 import { useCallback, useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
+const DEFAULT_MAX_VIDEO_SREAMS = 4;
+/* @conditional-compile-remove(gallery-layouts) */
+const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = useRef([]);
     const visibleOverflowGalleryParticipants = useRef([]);
-    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams, 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; });
+    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
+    /* @conditional-compile-remove(gallery-layouts) */
+    layout } = props;
+    const calculateMaxRemoteVideoStreams = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
+            return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
+        }
+        else {
+            return maxRemoteVideoStreams;
+        }
+        return maxRemoteVideoStreams;
+    };
+    const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
+    const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const participantsToSortTrampoline = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
         return videoParticipants;
     };
-    visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : smartDominantSpeakerParticipants({
-        participants: participantsToSortTrampoline(),
-        dominantSpeakers,
-        lastVisibleParticipants: visibleGridParticipants.current,
-        maxDominantSpeakers: maxRemoteVideoStreams
-    }).slice(0, maxRemoteVideoStreams);
-    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));
+    visibleGridParticipants.current =
+        pinnedParticipantUserIds.length > 0 || isScreenShareActive
+            ? []
+            : smartDominantSpeakerParticipants({
+                participants: participantsToSortTrampoline(),
+                dominantSpeakers,
+                lastVisibleParticipants: visibleGridParticipants.current,
+                maxDominantSpeakers: maxRemoteVideoStreamsToUse
+            }).slice(0, maxRemoteVideoStreamsToUse);
+    /* @conditional-compile-remove(gallery-layouts) */
+    const dominantSpeakerToGrid = layout === 'speaker'
+        ? dominantSpeakers && dominantSpeakers[0]
+            ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
+            : [visibleGridParticipants.current[0]]
+        : [];
+    /* @conditional-compile-remove(gallery-layouts) */
+    if (dominantSpeakerToGrid[0]) {
+        visibleGridParticipants.current = dominantSpeakerToGrid;
+    }
+    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 = 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));
     visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId)),
+        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: visibleOverflowGalleryParticipants.current,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
@@ -29,30 +65,61 @@ const _useOrganizedParticipants = (props) => {
         if (isScreenShareActive) {
             return [];
         }
-        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current;
-    }, [isScreenShareActive]);
+        // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
+        // we will use the max streams provided to the function to find the max participants that can go in the grid
+        // if there are less participants than max streams then we will use all participants including joining in the grid
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
+                ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)
+                : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive,
+        maxRemoteVideoStreamsToUse
+    ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = useCallback(() => {
         if (isScreenShareActive && localParticipant) {
             const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return localParticipantPlusOverflow.concat(callingParticipants);
             return localParticipantPlusOverflow;
         }
         else if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
             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.
-            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : [];
+            // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
+            // overflow should be empty if total participants including calling participants is less than max streams
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleGridParticipants.current.length > 0
+                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
+                : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
+                    ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)
+                    : [];
+            return visibleGridParticipants.current.length > 0
+                ? visibleOverflowGalleryParticipants.current
+                : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);
         }
-    }, [isScreenShareActive, localParticipant]);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive,
+        localParticipant,
+        maxRemoteVideoStreamsToUse
+    ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
-    return {
-        gridParticipants,
-        overflowGalleryParticipants: overflowGalleryParticipants
-    };
+    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
 };
 /* @conditional-compile-remove(pinned-participants) */
 const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
@@ -64,7 +131,7 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     }, {});
     // 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 => {
+    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
         const pinnedParticipant = remoteParticipantMap[id];
         if (pinnedParticipant) {
             pinnedParticipants.push(pinnedParticipant);
@@ -72,7 +139,7 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     });
     // 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 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 });
@@ -82,13 +149,15 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     }
     return {
         gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
-        overflowGalleryParticipants: props.isScreenShareActive ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+        overflowGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
     };
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {
     const videoParticipants = [];
     const audioParticipants = [];
-    remoteParticipants.forEach(p => {
+    remoteParticipants.forEach((p) => {
         var _a;
         if ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
             videoParticipants.push(p);

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

@@ -1 +1 @@
-{"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 * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\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_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    localParticipant,\n    dominantSpeakers = [],\n    maxRemoteVideoStreams,\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  const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n    return videoParticipants;\n  };\n  visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : smartDominantSpeakerParticipants({\n    participants: participantsToSortTrampoline(),\n    dominantSpeakers,\n    lastVisibleParticipants: visibleGridParticipants.current,\n    maxDominantSpeakers: (maxRemoteVideoStreams as number)\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((): (VideoGalleryParticipant | VideoGalleryRemoteParticipant)[] => {\n    if (isScreenShareActive && localParticipant) {\n      const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      return localParticipantPlusOverflow;\n    } else 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, localParticipant]);\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n  return {\n    gridParticipants,\n    overflowGalleryParticipants: overflowGalleryParticipants\n  };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithPinnedParticipants = (props: OrganizedParticipantsArgs): 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  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants\n  };\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n  if (pinnedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    overflowGalleryParticipants: props.isScreenShareActive ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.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  /* @conditional-compile-remove(pinned-participants) */\n  return _useOrganizedParticipantsWithPinnedParticipants(args);\n  return _useOrganizedParticipants(args);\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/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(gallery-layouts) */\n  layout?: VideoGalleryLayout;\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}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/* @conditional-compile-remove(gallery-layouts) */\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(gallery-layouts) */\n    layout\n  } = props;\n\n  const calculateMaxRemoteVideoStreams = (): number => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {\n      return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;\n    } else {\n      return maxRemoteVideoStreams;\n    }\n    return maxRemoteVideoStreams;\n  };\n\n  const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();\n\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n\n  const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;\n    return videoParticipants;\n  };\n\n  visibleGridParticipants.current =\n    pinnedParticipantUserIds.length > 0 || isScreenShareActive\n      ? []\n      : smartDominantSpeakerParticipants({\n          participants: participantsToSortTrampoline(),\n          dominantSpeakers,\n          lastVisibleParticipants: visibleGridParticipants.current,\n          maxDominantSpeakers: maxRemoteVideoStreamsToUse\n        }).slice(0, maxRemoteVideoStreamsToUse);\n\n  /* @conditional-compile-remove(gallery-layouts) */\n  const dominantSpeakerToGrid =\n    layout === 'speaker'\n      ? dominantSpeakers && dominantSpeakers[0]\n        ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])\n        : [visibleGridParticipants.current[0]]\n      : [];\n  /* @conditional-compile-remove(gallery-layouts) */\n  if (dominantSpeakerToGrid[0]) {\n    visibleGridParticipants.current = dominantSpeakerToGrid;\n  }\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  visibleOverflowGalleryParticipants.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: visibleOverflowGalleryParticipants.current,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n    // we will use the max streams provided to the function to find the max participants that can go in the grid\n    // if there are less participants than max streams then we will use all participants including joining in the grid\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return visibleGridParticipants.current.length > 0\n      ? visibleGridParticipants.current\n      : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse\n      ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)\n      : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);\n    return visibleGridParticipants.current.length > 0\n      ? visibleGridParticipants.current\n      : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive,\n    maxRemoteVideoStreamsToUse\n  ]);\n\n  const gridParticipants = getGridParticipants();\n\n  const getOverflowGalleryRemoteParticipants = useCallback((): (\n    | VideoGalleryParticipant\n    | VideoGalleryRemoteParticipant\n  )[] => {\n    if (isScreenShareActive && localParticipant) {\n      const localParticipantPlusOverflow = [localParticipant].concat(\n        visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current)\n      );\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return localParticipantPlusOverflow.concat(callingParticipants);\n      return localParticipantPlusOverflow;\n    } else if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleGridParticipants.current.concat(\n        visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n      );\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      // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n      // overflow should be empty if total participants including calling participants is less than max streams\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleGridParticipants.current.length > 0\n        ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n        : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse\n        ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)\n        : [];\n      return visibleGridParticipants.current.length > 0\n        ? visibleOverflowGalleryParticipants.current\n        : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n    }\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive,\n    localParticipant,\n    maxRemoteVideoStreamsToUse\n  ]);\n\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n\n  return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };\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    overflowGalleryParticipants: props.isScreenShareActive\n      ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n      : useOrganizedParticipantsResult.gridParticipants.concat(\n          useOrganizedParticipantsResult.overflowGalleryParticipants\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 overflow 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/VideoGallery.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { GridLayoutStyles } from '.';
 import { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';
 import { HorizontalGalleryStyles } from './HorizontalGallery';
 import { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';
+import { VerticalGalleryStyles } from './VerticalGallery';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -76,7 +78,7 @@ export interface VideoGalleryStrings {
 /**
  * @public
  */
-export declare type VideoGalleryLayout = 'default' | 'floatingLocalVideo';
+export declare type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker' | /* @conditional-compile-remove(large-gallery) */ 'largeGallery' | /* @conditional-compile-remove(gallery-layouts) */ 'focusedContent';
 /**
  * {@link VideoGallery} Component Styles.
  * @public
@@ -88,7 +90,21 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
     horizontalGallery?: HorizontalGalleryStyles;
     /** Styles for the local video  */
     localVideo?: IStyle;
+    /** Styles for the vertical gallery */
+    verticalGallery?: VerticalGalleryStyles;
 }
+/**
+ * Different modes and positions of the overflow gallery in the VideoGallery
+ *
+ * @beta
+ */
+export declare type OverflowGalleryPosition = 'HorizontalBottom' | 'VerticalRight' | /* @conditional-compile-remove(gallery-layouts) */ 'HorizontalTop';
+/**
+ * different modes of the local video tile
+ *
+ * @beta
+ */
+export declare type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
 /**
  * Props for {@link VideoGallery}.
  *
@@ -176,6 +192,18 @@ export interface VideoGalleryProps {
      * @defaultValue \{ kind: 'contextual' \}
      */
     remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
+    /**
+     * Determines the layout of the overflowGallery inside the VideoGallery.
+     * @defaultValue 'HorizontalBottom'
+     */
+    overflowGalleryPosition?: OverflowGalleryPosition;
+    /**
+     * Determines the aspect ratio of local video tile in the video gallery.
+     * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and
+     * 16:9 (landscape) aspect ratios.
+     * @defaultValue 'followDeviceOrientation'
+     */
+    localVideoTileSize?: LocalVideoTileSize;
 }
 /**
  * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.

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

@@ -20,6 +20,12 @@ import { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styl
 import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';
 /* @conditional-compile-remove(pinned-participants) */
 import { useId } from '@fluentui/react-hooks';
+/* @conditional-compile-remove(gallery-layouts) */
+import { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';
+/* @conditional-compile-remove(gallery-layouts) */
+import { FocusedContentLayout } from './VideoGallery/FocusContentLayout';
+/* @conditional-compile-remove(gallery-layouts) */
+import { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -68,16 +74,23 @@ export const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     onUnpinParticipant: onUnpinParticipantHandler, 
     /* @conditional-compile-remove(pinned-participants) */
-    remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS } = props;
+    remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
+    /* @conditional-compile-remove(vertical-gallery) */
+    overflowGalleryPosition = 'HorizontalBottom', 
+    /* @conditional-compile-remove(rooms) */
+    localVideoTileSize = 'followDeviceOrientation' } = 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 = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer' ? remoteVideoTileMenu.hostId : undefined;
+    const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'
+        ? remoteVideoTileMenu.hostId
+        : undefined;
     /* @conditional-compile-remove(pinned-participants) */
     const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
-    const localTileNotInGrid = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
+    const localTileNotInGrid = !!((layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&
+        remoteParticipants.length > 0);
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -88,7 +101,7 @@ export const VideoGallery = (props) => {
     const [selectedScalingModeState, setselectedScalingModeState] = React.useState({});
     /* @conditional-compile-remove(pinned-participants) */
     const onUpdateScalingMode = useCallback((remoteUserId, scalingMode) => {
-        setselectedScalingModeState(current => (Object.assign(Object.assign({}, current), { [remoteUserId]: {
+        setselectedScalingModeState((current) => (Object.assign(Object.assign({}, current), { [remoteUserId]: {
                 scalingMode,
                 isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
             } })));
@@ -96,9 +109,9 @@ export const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     useEffect(() => {
         var _a;
-        (_a = props.pinnedParticipants) === null || _a === void 0 ? void 0 : _a.forEach(pinParticipant => {
+        (_a = props.pinnedParticipants) === null || _a === void 0 ? void 0 : _a.forEach((pinParticipant) => {
             var _a;
-            if (!((_a = props.remoteParticipants) === null || _a === void 0 ? void 0 : _a.find(t => t.userId === pinParticipant))) {
+            if (!((_a = props.remoteParticipants) === null || _a === void 0 ? void 0 : _a.find((t) => t.userId === pinParticipant))) {
                 // warning will be logged in the console when invalid participant id is passed in pinned participants
                 console.warn('Invalid pinned participant UserId :' + pinParticipant);
             }
@@ -112,19 +125,44 @@ export const VideoGallery = (props) => {
      */
     const localVideoTile = useMemo(() => {
         var _a, _b;
+        /* @conditional-compile-remove(click-to-call) */
+        if (localVideoTileSize === 'hidden') {
+            return undefined;
+        }
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
         const localVideoTileStyles = concatStyleSets(localTileNotInGrid ? 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, { styles: localVideoTileContainerStyles, 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: !(localTileNotInGrid && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
-                /* @conditional-compile-remove(raise-hand) */ raisedHand: localParticipant.raisedHand }));
-    }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, strings.localVideoCameraSwitcherLabel, strings.localVideoLabel, strings.localVideoMovementLabel, strings.localVideoSelectedDescription, styles === null || styles === void 0 ? void 0 : styles.localVideo, theme.effects.roundedCorner4]);
+        return (React.createElement(Stack, { styles: localVideoTileContainerStyles, 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: !((localTileNotInGrid && isNarrow) ||
+                    /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
+                        '9:16'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
+                /* @conditional-compile-remove(raise-hand) */
+                raisedHand: localParticipant.raisedHand })));
+    }, [
+        isNarrow,
+        localParticipant,
+        localVideoCameraCycleButtonProps,
+        localVideoViewOptions,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        onRenderAvatar,
+        onRenderLocalVideoTile,
+        localTileNotInGrid,
+        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(click-to-call) */
+        localVideoTileSize
+    ]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
@@ -137,7 +175,7 @@ export const VideoGallery = (props) => {
     }, [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]);
     /* @conditional-compile-remove(pinned-participants) */
     const onUnpinParticipant = useCallback((userId) => {
-        setPinnedParticipantsState(pinnedParticipantsState.filter(p => p !== userId));
+        setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));
         onUnpinParticipantHandler === null || onUnpinParticipantHandler === void 0 ? void 0 : onUnpinParticipantHandler(userId);
     }, [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]);
     /* @conditional-compile-remove(pinned-participants) */
@@ -146,7 +184,7 @@ export const VideoGallery = (props) => {
     /**
      * sets the announcement string for VideoGallery actions so that the screenreader will trigger
      */
-    const toggleAnnouncerString = useCallback(announcement => {
+    const toggleAnnouncerString = useCallback((announcement) => {
         setAnnouncementString(announcement);
         /**
          * Clears the announcer string after VideoGallery action allowing it to be re-announced.
@@ -168,25 +206,65 @@ export const VideoGallery = (props) => {
                 return selectedScalingMode;
             }
             /* @conditional-compile-remove(pinned-participants) */
-            return (remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.streamSize) && ((_a = remoteVideoStream.streamSize) === null || _a === void 0 ? void 0 : _a.height) > ((_b = remoteVideoStream.streamSize) === null || _b === void 0 ? void 0 : _b.width) ? {
-                scalingMode: 'Fit',
-                isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
-            } : remoteVideoViewOptions;
+            return (remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.streamSize) &&
+                ((_a = remoteVideoStream.streamSize) === null || _a === void 0 ? void 0 : _a.height) > ((_b = remoteVideoStream.streamSize) === null || _b === void 0 ? void 0 : _b.width)
+                ? {
+                    scalingMode: 'Fit',
+                    isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
+                }
+                : remoteVideoViewOptions;
             return remoteVideoViewOptions;
         };
-        return React.createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : 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 && createViewOptions() ? createViewOptions() : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, menuKind: participant.userId === localParticipant.userId ? undefined : remoteVideoTileMenu ? remoteVideoTileMenu.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) */ onUpdateScalingMode: onUpdateScalingMode, 
-            /* @conditional-compile-remove(pinned-participants) */ isPinned: isPinned, 
-            /* @conditional-compile-remove(pinned-participants) */ disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, 
-            /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString: toggleAnnouncerString });
-    }, [onCreateRemoteStreamView, onDisposeRemoteVideoStreamView, remoteVideoViewOptions, localParticipant, onRenderAvatar, showMuteIndicator, strings, /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId, /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenu, /* @conditional-compile-remove(pinned-participants) */ selectedScalingModeState, /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants, /* @conditional-compile-remove(pinned-participants) */ onPinParticipant, /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant, /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString, /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode]);
-    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 ? onDisposeRemoteVideoStreamView : 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 && createViewOptions() ? createViewOptions() : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
+            /* @conditional-compile-remove(PSTN-calls) */
+            participantState: participant.state, 
+            /* @conditional-compile-remove(pinned-participants) */
+            menuKind: participant.userId === localParticipant.userId
+                ? undefined
+                : remoteVideoTileMenu
+                    ? remoteVideoTileMenu.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) */
+            onUpdateScalingMode: onUpdateScalingMode, 
+            /* @conditional-compile-remove(pinned-participants) */
+            isPinned: isPinned, 
+            /* @conditional-compile-remove(pinned-participants) */
+            disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, 
+            /* @conditional-compile-remove(pinned-participants) */
+            toggleAnnouncerString: toggleAnnouncerString }));
+    }, [
+        onCreateRemoteStreamView,
+        onDisposeRemoteVideoStreamView,
+        remoteVideoViewOptions,
+        localParticipant,
+        onRenderAvatar,
+        showMuteIndicator,
+        strings,
+        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
+        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenu,
+        /* @conditional-compile-remove(pinned-participants) */ selectedScalingModeState,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
+        /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
+        /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant,
+        /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString,
+        /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode
+    ]);
+    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: onDisposeRemoteScreenShareStreamView, 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: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving })));
+    const screenShareComponent = remoteScreenShareComponent
+        ? remoteScreenShareComponent
+        : localParticipant.isScreenSharingOn
+            ? localScreenShareStreamComponent
+            : undefined;
     const layoutProps = useMemo(() => ({
         remoteParticipants,
         localParticipant,
@@ -199,19 +277,50 @@ export const VideoGallery = (props) => {
         localVideoComponent: localVideoTile,
         parentWidth: containerWidth,
         parentHeight: containerHeight,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants
-    }), [remoteParticipants, localParticipant, screenShareComponent, showCameraSwitcherInLocalPreview, maxRemoteVideoStreams, dominantSpeakers, styles, localVideoTile, containerWidth, containerHeight, onRenderRemoteVideoTile, defaultOnRenderVideoTile, /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants]);
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+    }), [
+        remoteParticipants,
+        localParticipant,
+        screenShareComponent,
+        showCameraSwitcherInLocalPreview,
+        maxRemoteVideoStreams,
+        dominantSpeakers,
+        styles,
+        localVideoTile,
+        containerWidth,
+        containerHeight,
+        onRenderRemoteVideoTile,
+        defaultOnRenderVideoTile,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+    ]);
     const videoGalleryLayout = useMemo(() => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        if (screenShareParticipant && layout === 'focusedContent') {
+            return React.createElement(FocusedContentLayout, Object.assign({}, layoutProps));
+        }
         if (layout === 'floatingLocalVideo') {
             return React.createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }
+        /* @conditional-compile-remove(gallery-layouts) */
+        if (layout === 'speaker') {
+            return React.createElement(SpeakerVideoLayout, Object.assign({}, layoutProps));
+        }
+        /* @conditional-compile-remove(large-gallery) */
+        if (layout === 'largeGallery') {
+            return React.createElement(LargeGalleryLayout, Object.assign({}, layoutProps));
+        }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
-    }, [layout, layoutProps]);
-    return React.createElement("div", { 
+    }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);
+    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, unselectable) },
         videoGalleryLayout,
-        React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" }));
+        /* @conditional-compile-remove(pinned-participants) */
+        React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" })));
 };
 //# sourceMappingURL=VideoGallery.js.map