@azure/communication-react 1.16.0-alpha-202405080011 → 1.16.0

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

@@ -11,7 +11,7 @@ export const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const getOrganizedParticipants = (props) => {
     const { remoteParticipants = [], dominantSpeakers = [], maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, layout, previousGridParticipants = [], previousOverflowParticipants = [] } = props;
     const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
-    const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const videoParticipants = remoteParticipants.filter(p => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const participants = layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;
     let newGridParticipants = smartDominantSpeakerParticipants({
         participants: participants,
@@ -19,22 +19,13 @@ const getOrganizedParticipants = (props) => {
         currentParticipants: previousGridParticipants,
         maxDominantSpeakers: maxGridParticipants
     }).slice(0, maxGridParticipants);
-    const dominantSpeakerToGrid = layout === 'speaker'
-        ? dominantSpeakers && dominantSpeakers[0]
-            ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])
-            : [newGridParticipants[0]]
-        : [];
+    const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? newGridParticipants.filter(p => p.userId === dominantSpeakers[0]) : [newGridParticipants[0]] : [];
     if (dominantSpeakerToGrid[0]) {
         newGridParticipants = dominantSpeakerToGrid;
     }
-    const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));
-    /* @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));
+    const gridParticipantSet = new Set(newGridParticipants.map(p => p.userId));
     const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter((p) => !gridParticipantSet.has(p.userId) &&
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
+        participants: remoteParticipantsOrdered.filter(p => !gridParticipantSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
         currentParticipants: previousOverflowParticipants,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
@@ -43,17 +34,18 @@ const getOrganizedParticipants = (props) => {
         isScreenShareActive,
         gridParticipants: newGridParticipants,
         overflowGalleryParticipants: newOverflowGalleryParticipants,
-        maxGridParticipants: maxGridParticipants,
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+        maxGridParticipants: maxGridParticipants
     });
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({
         isScreenShareActive,
         gridParticipants: newGridParticipants,
         overflowGalleryParticipants: newOverflowGalleryParticipants,
-        maxGridParticipants: maxGridParticipants,
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+        maxGridParticipants: maxGridParticipants
     });
-    return { gridParticipants, overflowGalleryParticipants };
+    return {
+        gridParticipants,
+        overflowGalleryParticipants
+    };
 };
 /**
  * Hook to determine which participants should be in grid and overflow gallery and their order respectively
@@ -70,26 +62,22 @@ export const useOrganizedParticipants = (props) => {
     const pinnedParticipantUserIds = (_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : [];
     // declare set of focused participant user ids as spotlighted participants user ids followed by
     // pinned participants user ids which is deduplicated while maintaining order
-    const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p]));
+    const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter(p => remoteParticipantMap[p]));
     // get focused participants from map of remote participants in the order of the user ids
-    const focusedParticipants = [...focusedParticipantUserIdSet].map((p) => remoteParticipantMap[p]);
+    const focusedParticipants = [...focusedParticipantUserIdSet].map(p => remoteParticipantMap[p]);
     const currentGridParticipants = useRef([]);
     const currentOverflowGalleryParticipants = useRef([]);
-    const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
+    const unfocusedParticipants = props.remoteParticipants.filter(p => !focusedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
         // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
         maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
     const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);
     currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;
     currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;
-    return focusedParticipants.length > 0
-        ? {
-            gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
-            overflowGalleryParticipants: props.isScreenShareActive
-                ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-                : useOrganizedParticipantsResult.overflowGalleryParticipants
-        }
-        : useOrganizedParticipantsResult;
+    return focusedParticipants.length > 0 ? {
+        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
+        overflowGalleryParticipants: props.isScreenShareActive ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.overflowGalleryParticipants
+    } : useOrganizedParticipantsResult;
 };
 const getGridParticipants = (args) => {
     if (args.isScreenShareActive) {
@@ -98,21 +86,11 @@ const getGridParticipants = (args) => {
     // 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 args.gridParticipants.length > 0
-        ? args.gridParticipants
-        : args.overflowGalleryParticipants.length > args.maxGridParticipants
-            ? args.overflowGalleryParticipants.slice(0, args.maxGridParticipants)
-            : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants).concat(args.callingParticipants);
-    return args.gridParticipants.length > 0
-        ? args.gridParticipants
-        : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);
+    return args.gridParticipants.length > 0 ? args.gridParticipants : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);
 };
 const getOverflowGalleryRemoteParticipants = (args) => {
     if (args.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 args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));
         return args.gridParticipants.concat(args.overflowGalleryParticipants);
     }
     else {
@@ -120,21 +98,13 @@ const getOverflowGalleryRemoteParticipants = (args) => {
         // If there are no video tiles, then assign audio tiles as grid tiles.
         // 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 args.gridParticipants.length > 0
-            ? args.overflowGalleryParticipants.concat(args.callingParticipants)
-            : args.overflowGalleryParticipants.length > args.maxGridParticipants
-                ? args.overflowGalleryParticipants.slice(args.maxGridParticipants).concat(args.callingParticipants)
-                : [];
-        return args.gridParticipants.length > 0
-            ? args.overflowGalleryParticipants
-            : args.overflowGalleryParticipants.slice(args.maxGridParticipants);
+        return args.gridParticipants.length > 0 ? args.overflowGalleryParticipants : args.overflowGalleryParticipants.slice(args.maxGridParticipants);
     }
 };
 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":["../../../../../../../../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 { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\nimport { ReactionResources } from '../../..';\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  maxGridParticipants?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\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/**\n * @private\n */\nexport const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n  const participants =\n    layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participants,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxGridParticipants\n  }).slice(0, maxGridParticipants);\n\n  const dominantSpeakerToGrid =\n    layout === 'speaker'\n      ? dominantSpeakers && dominantSpeakers[0]\n        ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])\n        : [newGridParticipants[0]]\n      : [];\n\n  if (dominantSpeakerToGrid[0]) {\n    newGridParticipants = dominantSpeakerToGrid;\n  }\n\n  const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));\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  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(\n      (p) =>\n        !gridParticipantSet.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    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n\n  const gridParticipants = getGridParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  return { gridParticipants, overflowGalleryParticipants };\n};\n\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\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 = (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  }, {} as SortedRemoteParticipants);\n\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n  // declare set of focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids which is deduplicated while maintaining order\n  const focusedParticipantUserIdSet = new Set(\n    spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p])\n  );\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet].map(\n    (p) => remoteParticipantMap[p]\n  );\n\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n\n  const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);\n\n  currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;\n  currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;\n\n  return focusedParticipants.length > 0\n    ? {\n        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n        overflowGalleryParticipants: props.isScreenShareActive\n          ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n          : useOrganizedParticipantsResult.overflowGalleryParticipants\n      }\n    : useOrganizedParticipantsResult;\n};\n\nconst getGridParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.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 args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.length > args.maxGridParticipants\n    ? args.overflowGalleryParticipants.slice(0, args.maxGridParticipants)\n    : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants).concat(args.callingParticipants);\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);\n};\n\nconst getOverflowGalleryRemoteParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.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 args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));\n    return args.gridParticipants.concat(args.overflowGalleryParticipants);\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 args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants.concat(args.callingParticipants)\n      : args.overflowGalleryParticipants.length > args.maxGridParticipants\n      ? args.overflowGalleryParticipants.slice(args.maxGridParticipants).concat(args.callingParticipants)\n      : [];\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants\n      : args.overflowGalleryParticipants.slice(args.maxGridParticipants);\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 * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const getEmojiFrameCount = (reactionName: string, reactionResources: ReactionResources): number => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.frameCount ?? 0;\n    case 'heart':\n      return reactionResources.heartReaction?.frameCount ?? 0;\n    case 'laugh':\n      return reactionResources.laughReaction?.frameCount ?? 0;\n    case 'applause':\n      return reactionResources.applauseReaction?.frameCount ?? 0;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.frameCount ?? 0;\n    default:\n      return 0;\n  }\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 { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\nimport { ReactionResources } from '../../..';\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  maxGridParticipants?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\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 DEFAULT_MAX_VIDEO_SREAMS = 4;\n/**\n * @private\n */\nexport const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  const videoParticipants = remoteParticipants.filter(p => p.videoStream?.isAvailable);\n  const participants = layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participants,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxGridParticipants\n  }).slice(0, maxGridParticipants);\n  const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? newGridParticipants.filter(p => p.userId === dominantSpeakers[0]) : [newGridParticipants[0]] : [];\n  if (dominantSpeakerToGrid[0]) {\n    newGridParticipants = dominantSpeakerToGrid;\n  }\n  const gridParticipantSet = new Set(newGridParticipants.map(p => p.userId));\n  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(p => !gridParticipantSet.has(p.userId)),\n    dominantSpeakers: dominantSpeakers,\n    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n  const gridParticipants = getGridParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants\n  });\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants\n  });\n  return {\n    gridParticipants,\n    overflowGalleryParticipants\n  };\n};\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\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 = (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  }, ({} as SortedRemoteParticipants));\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n  // declare set of focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids which is deduplicated while maintaining order\n  const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter(p => remoteParticipantMap[p]));\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet].map(p => remoteParticipantMap[p]);\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const unfocusedParticipants = props.remoteParticipants.filter(p => !focusedParticipantUserIdSet.has(p.userId));\n  const useOrganizedParticipantsProps: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n  const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);\n  currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;\n  currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;\n  return focusedParticipants.length > 0 ? {\n    gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n    overflowGalleryParticipants: props.isScreenShareActive ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.overflowGalleryParticipants\n  } : useOrganizedParticipantsResult;\n};\nconst getGridParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.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  return args.gridParticipants.length > 0 ? args.gridParticipants : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);\n};\nconst getOverflowGalleryRemoteParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    // If screen sharing is active, assign video and audio participants as overflow gallery participants\n    return args.gridParticipants.concat(args.overflowGalleryParticipants);\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    return args.gridParticipants.length > 0 ? args.overflowGalleryParticipants : args.overflowGalleryParticipants.slice(args.maxGridParticipants);\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 * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const getEmojiFrameCount = (reactionName: string, reactionResources: ReactionResources): number => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.frameCount ?? 0;\n    case 'heart':\n      return reactionResources.heartReaction?.frameCount ?? 0;\n    case 'laugh':\n      return reactionResources.laughReaction?.frameCount ?? 0;\n    case 'applause':\n      return reactionResources.applauseReaction?.frameCount ?? 0;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.frameCount ?? 0;\n    default:\n      return 0;\n  }\n};"]}

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

@@ -91,7 +91,7 @@ export interface VideoGalleryStrings {
 /**
  * @public
  */
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | /* @conditional-compile-remove(large-gallery) */ 'largeGallery' | 'focusedContent';
+export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | 'focusedContent';
 /**
  * {@link VideoGallery} Component Styles.
  * @public

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

@@ -19,8 +19,6 @@ import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocal
 import { useId } from '@fluentui/react-hooks';
 import { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';
 import { FocusedContentLayout } from './VideoGallery/FocusContentLayout';
-/* @conditional-compile-remove(large-gallery) */
-import { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -79,9 +77,7 @@ export const VideoGallery = (props) => {
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
-    const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'
-        ? remoteVideoTileMenu.hostId
-        : undefined;
+    const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer' ? remoteVideoTileMenu.hostId : undefined;
     const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
     const localTileNotInGrid = (layout === 'floatingLocalVideo' || layout === 'speaker') && remoteParticipants.length > 0;
     const containerRef = useRef(null);
@@ -91,16 +87,16 @@ export const VideoGallery = (props) => {
     const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState([]);
     const [selectedScalingModeState, setselectedScalingModeState] = React.useState({});
     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
             } })));
     }, [remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored]);
     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);
             }
@@ -108,7 +104,7 @@ export const VideoGallery = (props) => {
     }, [props.pinnedParticipants, props.remoteParticipants]);
     // 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;
-    const showLocalVideoTileLabel = !((localTileNotInGrid && isNarrow) || localVideoTileSize === '9:16') || layout === 'default';
+    const showLocalVideoTileLabel = !(localTileNotInGrid && isNarrow || localVideoTileSize === '9:16') || layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -123,65 +119,33 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */
         const isSpotlighted = !!localParticipant.spotlight;
         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;
         const showDisplayNameTrampoline = () => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
             return isNarrow ? '' : strings.localVideoLabel;
         };
-        return (React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
+        return React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, 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: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, 
-                /* @conditional-compile-remove(spotlight) */
-                spotlightedParticipantUserIds: spotlightedParticipants, 
-                /* @conditional-compile-remove(spotlight) */
-                isSpotlighted: isSpotlighted, 
-                /* @conditional-compile-remove(spotlight) */
-                onStartSpotlight: onStartLocalSpotlight, 
-                /* @conditional-compile-remove(spotlight) */
-                onStopSpotlight: onStopLocalSpotlight, 
-                /* @conditional-compile-remove(spotlight) */
-                maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
-                /* @conditional-compile-remove(spotlight) */
-                menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, 
-                /* @conditional-compile-remove(spotlight) */
-                drawerMenuHostId: drawerMenuHostId, 
-                /* @conditional-compile-remove(spotlight) */
-                strings: strings, reactionResources: reactionResources })));
-    }, [
-        isNarrow,
-        localParticipant,
-        localVideoCameraCycleButtonProps,
-        localVideoViewOptions,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        onRenderAvatar,
-        onRenderLocalVideoTile,
-        localTileNotInGrid,
-        showCameraSwitcherInLocalPreview,
-        showMuteIndicator,
-        styles === null || styles === void 0 ? void 0 : styles.localVideo,
-        theme.effects.roundedCorner4,
-        localVideoTileSize,
-        layout,
-        showLocalVideoTileLabel,
-        /* @conditional-compile-remove(spotlight) */
-        spotlightedParticipants,
-        /* @conditional-compile-remove(spotlight) */
-        onStartLocalSpotlight,
-        /* @conditional-compile-remove(spotlight) */
-        onStopLocalSpotlight,
-        /* @conditional-compile-remove(spotlight) */
-        maxParticipantsToSpotlight,
-        /* @conditional-compile-remove(spotlight) */
-        remoteVideoTileMenu,
-        /* @conditional-compile-remove(spotlight) */
-        strings,
-        /* @conditional-compile-remove(spotlight) */
-        drawerMenuHostId,
-        reactionResources,
-        videoTilesOptions
-    ]);
+                /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants, 
+                /* @conditional-compile-remove(spotlight) */ isSpotlighted: isSpotlighted, 
+                /* @conditional-compile-remove(spotlight) */ onStartSpotlight: onStartLocalSpotlight, 
+                /* @conditional-compile-remove(spotlight) */ onStopSpotlight: onStopLocalSpotlight, 
+                /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
+                /* @conditional-compile-remove(spotlight) */ menuKind: remoteVideoTileMenu ? remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual' : undefined, 
+                /* @conditional-compile-remove(spotlight) */ drawerMenuHostId: drawerMenuHostId, 
+                /* @conditional-compile-remove(spotlight) */ strings: strings, reactionResources: reactionResources }));
+    }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, styles === null || styles === void 0 ? void 0 : styles.localVideo, theme.effects.roundedCorner4, localVideoTileSize, layout, showLocalVideoTileLabel, /* @conditional-compile-remove(spotlight) */
+        spotlightedParticipants, /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlight, /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlight, /* @conditional-compile-remove(spotlight) */
+        maxParticipantsToSpotlight, /* @conditional-compile-remove(spotlight) */
+        remoteVideoTileMenu, /* @conditional-compile-remove(spotlight) */
+        strings, /* @conditional-compile-remove(spotlight) */
+        drawerMenuHostId, reactionResources, videoTilesOptions]);
     const onPinParticipant = useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
             return;
@@ -192,7 +156,7 @@ export const VideoGallery = (props) => {
         onPinParticipantHandler === null || onPinParticipantHandler === void 0 ? void 0 : onPinParticipantHandler(userId);
     }, [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]);
     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]);
     const [announcementString, setAnnouncementString] = React.useState('');
@@ -221,66 +185,23 @@ export const VideoGallery = (props) => {
             if (selectedScalingMode) {
                 return selectedScalingMode;
             }
-            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 (React.createElement(_RemoteVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, streamId: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.id, 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: createViewOptions(), onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
-            /* @conditional-compile-remove(PSTN-calls) */
-            participantState: participant.state, menuKind: participant.userId === localParticipant.userId
-                ? undefined
-                : remoteVideoTileMenu
-                    ? remoteVideoTileMenu.kind === 'drawer'
-                        ? 'drawer'
-                        : 'contextual'
-                    : undefined, drawerMenuHostId: drawerMenuHostId, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, onUpdateScalingMode: onUpdateScalingMode, isPinned: isPinned, disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, toggleAnnouncerString: toggleAnnouncerString, 
-            /* @conditional-compile-remove(spotlight) */
-            spotlightedParticipantUserIds: spotlightedParticipants, 
-            /* @conditional-compile-remove(spotlight) */
-            isSpotlighted: isSpotlighted, 
-            /* @conditional-compile-remove(spotlight) */
-            onStartSpotlight: onStartRemoteSpotlight, 
-            /* @conditional-compile-remove(spotlight) */
-            onStopSpotlight: onStopRemoteSpotlight, 
-            /* @conditional-compile-remove(spotlight) */
-            maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources }));
-    }, [
-        onCreateRemoteStreamView,
-        onDisposeRemoteVideoStreamView,
-        remoteVideoViewOptions,
-        localParticipant,
-        onRenderAvatar,
-        showMuteIndicator,
-        strings,
-        drawerMenuHostId,
-        remoteVideoTileMenu,
-        selectedScalingModeState,
-        pinnedParticipants,
-        onPinParticipant,
-        onUnpinParticipant,
-        toggleAnnouncerString,
-        onUpdateScalingMode,
-        /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,
-        /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight,
-        /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight,
-        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
-        reactionResources,
-        videoTilesOptions
-    ]);
-    const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+        return React.createElement(_RemoteVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, streamId: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.id, 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: createViewOptions(), onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, menuKind: participant.userId === localParticipant.userId ? undefined : remoteVideoTileMenu ? remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual' : undefined, drawerMenuHostId: drawerMenuHostId, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, onUpdateScalingMode: onUpdateScalingMode, isPinned: isPinned, disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, toggleAnnouncerString: toggleAnnouncerString, 
+            /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants, 
+            /* @conditional-compile-remove(spotlight) */ isSpotlighted: isSpotlighted, 
+            /* @conditional-compile-remove(spotlight) */ onStartSpotlight: onStartRemoteSpotlight, 
+            /* @conditional-compile-remove(spotlight) */ onStopSpotlight: onStopRemoteSpotlight, 
+            /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources });
+    }, [onCreateRemoteStreamView, onDisposeRemoteVideoStreamView, remoteVideoViewOptions, localParticipant, onRenderAvatar, showMuteIndicator, strings, drawerMenuHostId, remoteVideoTileMenu, selectedScalingModeState, pinnedParticipants, onPinParticipant, onUnpinParticipant, toggleAnnouncerString, onUpdateScalingMode, /* @conditional-compile-remove(spotlight) */ spotlightedParticipants, /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight, /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight, /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, reactionResources, videoTilesOptions]);
+    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, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, 
-        /* @conditional-compile-remove(ppt-live) */
-        isPPTLive: !((_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.id) })));
-    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, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, 
+        /* @conditional-compile-remove(ppt-live) */ isPPTLive: !((_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.id) }));
+    const screenShareComponent = remoteScreenShareComponent ? remoteScreenShareComponent : localParticipant.isScreenSharingOn ? localScreenShareStreamComponent : undefined;
     const layoutProps = useMemo(() => ({
         remoteParticipants,
         localParticipant,
@@ -297,24 +218,7 @@ export const VideoGallery = (props) => {
         overflowGalleryPosition,
         localVideoTileSize,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants
-    }), [
-        remoteParticipants,
-        localParticipant,
-        screenShareComponent,
-        showCameraSwitcherInLocalPreview,
-        maxRemoteVideoStreams,
-        dominantSpeakers,
-        styles,
-        localVideoTile,
-        containerWidth,
-        containerHeight,
-        onRenderRemoteVideoTile,
-        defaultOnRenderVideoTile,
-        pinnedParticipants,
-        overflowGalleryPosition,
-        localVideoTileSize,
-        /* @conditional-compile-remove(spotlight) */ spotlightedParticipants
-    ]);
+    }), [remoteParticipants, localParticipant, screenShareComponent, showCameraSwitcherInLocalPreview, maxRemoteVideoStreams, dominantSpeakers, styles, localVideoTile, containerWidth, containerHeight, onRenderRemoteVideoTile, defaultOnRenderVideoTile, pinnedParticipants, overflowGalleryPosition, localVideoTileSize, /* @conditional-compile-remove(spotlight) */ spotlightedParticipants]);
     const videoGalleryLayout = useMemo(() => {
         if (screenShareParticipant && layout === 'focusedContent') {
             return React.createElement(FocusedContentLayout, Object.assign({}, layoutProps));
@@ -325,16 +229,12 @@ export const VideoGallery = (props) => {
         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, screenShareParticipant]);
-    return (React.createElement("div", { 
+    return React.createElement("div", { 
         // 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" })));
+        React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" }));
 };
 //# sourceMappingURL=VideoGallery.js.map