@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

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/* @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  spotlightedParticipantUserIds?: 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 DEFAULT_MAX_VIDEO_SREAMS = 4;\n/* @conditional-compile-remove(gallery-layouts) */\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\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 = 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  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  const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();\n  const videoParticipants = remoteParticipants.filter(p => p.videoStream?.isAvailable);\n  const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;\n    return videoParticipants;\n  };\n  visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : 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 = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];\n  /* @conditional-compile-remove(gallery-layouts) */\n  if (dominantSpeakerToGrid[0]) {\n    visibleGridParticipants.current = dominantSpeakerToGrid;\n  }\n  const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));\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  visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId) && /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */!callingParticipantsSet.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    // 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 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse) : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);\n    return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n  }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);\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      /* @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(visibleOverflowGalleryParticipants.current.concat(callingParticipants));\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 ? visibleOverflowGalleryParticipants.current.concat(callingParticipants) : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants) : [];\n      return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n    }\n  }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */callingParticipants, isScreenShareActive, localParticipant, maxRemoteVideoStreamsToUse]);\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n  return {\n    gridParticipants,\n    overflowGalleryParticipants: overflowGalleryParticipants\n  };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithFocusedParticipants = (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  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  // declare focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids\n  const focusedParticipantUserIds = [...new Set(spotlightedParticipantUserIds.concat(props.pinnedParticipantUserIds ?? []))];\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [];\n  focusedParticipantUserIds.forEach(id => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      focusedParticipants.push(pinnedParticipant);\n    }\n  });\n\n  // get unfocused participants by filtering out set of focused participant user ids from all remote participants\n  const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);\n  const unfocusedParticipants = props.remoteParticipants.filter(p => !focusedParticipantUserIdSet.has(p.userId));\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unfocusedParticipants\n  };\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n  if (focusedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n    overflowGalleryParticipants: props.isScreenShareActive ? focusedParticipants.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 _useOrganizedParticipantsWithFocusedParticipants(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(reaction) */\nimport { ReactionResources } from '../../..';\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  spotlightedParticipantUserIds?: 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}\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    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) {\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    maxRemoteVideoStreamsToUse\n  ]);\n\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n\n  return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };\n};\n\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\n}\n\nconst _useOrganizedParticipantsWithFocusedParticipants = (\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  }, {} as SortedRemoteParticipants);\n\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  // declare focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids\n  const focusedParticipantUserIds = [\n    ...new Set(spotlightedParticipantUserIds.concat(props.pinnedParticipantUserIds ?? []))\n  ];\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [];\n  focusedParticipantUserIds.forEach((id) => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      focusedParticipants.push(pinnedParticipant);\n    }\n  });\n\n  // get unfocused participants by filtering out set of focused participant user ids from all remote participants\n  const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);\n  const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unfocusedParticipants\n  };\n\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n  if (focusedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n    overflowGalleryParticipants: props.isScreenShareActive\n      ? focusedParticipants.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  return _useOrganizedParticipantsWithFocusedParticipants(args);\n};\n\n/* @conditional-compile-remove(reaction) */\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 '';\n};\n"]}

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

@@ -5,6 +5,7 @@ import { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant,
 import { HorizontalGalleryStyles } from './HorizontalGallery';
 import { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';
 import { VerticalGalleryStyles } from './VerticalGallery';
+import { ReactionResources } from '../types/ReactionTypes';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -78,15 +79,19 @@ export interface VideoGalleryStrings {
     startSpotlightVideoTileMenuLabel: string;
     /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */
     addSpotlightVideoTileMenuLabel: string;
+    /** Menu title for start spotlight menu item when spotlight limit is reached */
+    spotlightLimitReachedMenuTitle: string;
     /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */
     stopSpotlightVideoTileMenuLabel: string;
     /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */
     stopSpotlightOnSelfVideoTileMenuLabel: string;
+    /** String for the attendee role */
+    attendeeRole: string;
 }
 /**
  * @public
  */
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker' | /* @conditional-compile-remove(gallery-layouts) */ 'focusedContent';
+export 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
@@ -194,6 +199,30 @@ export interface VideoGalleryProps {
      * This callback will be called when a participant video tile is un-pinned.
      */
     onUnpinParticipant?: (userId: string) => void;
+    /**
+     * List of spotlighted participant userIds.
+     */
+    spotlightedParticipants?: string[];
+    /**
+     * This callback will be called when spotlight is started for the local participant video tile.
+     */
+    onStartLocalSpotlight?: () => Promise<void>;
+    /**
+     * This callback will be called when spotlight is started for the local participant video tile.
+     */
+    onStartRemoteSpotlight?: (userIds?: string[]) => Promise<void>;
+    /**
+     * This callback will be called when spotlight is stopped for remote participant video tiles.
+     */
+    onStopLocalSpotlight?: () => Promise<void>;
+    /**
+     * This callback will be called when spotlight is stopped for remote participant video tiles.
+     */
+    onStopRemoteSpotlight?: (userIds?: string[]) => Promise<void>;
+    /**
+     * Maximum participants that can be spotlighted
+     */
+    maxParticipantsToSpotlight?: number;
     /**
      * Options for showing the remote video tile menu.
      *
@@ -212,6 +241,11 @@ export interface VideoGalleryProps {
      * @defaultValue 'followDeviceOrientation'
      */
     localVideoTileSize?: LocalVideoTileSize;
+    /**
+     * Reaction resources for like, heart, laugh, applause and surprised.
+     * @beta
+     */
+    reactionResources?: ReactionResources;
 }
 /**
  * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.

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

@@ -2,9 +2,7 @@
 // Licensed under the MIT License.
 import { concatStyleSets, mergeStyles, Stack } from '@fluentui/react';
 import React, { useCallback, useMemo, useRef } from 'react';
-/* @conditional-compile-remove(pinned-participants) */
 import { Announcer } from './Announcer';
-/* @conditional-compile-remove(pinned-participants) */
 import { useEffect } from 'react';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
@@ -18,12 +16,13 @@ import { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayou
 import { useIdentifiers } from '../identifiers';
 import { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';
 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(large-gallery) */
+import { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -52,7 +51,6 @@ export const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
 export const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {
     kind: 'contextual'
 };
-/* @conditional-compile-remove(pinned-participants) */
 /**
  * @private
  * Maximum number of remote video tiles that can be pinned
@@ -66,56 +64,62 @@ export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  */
 export const VideoGallery = (props) => {
     var _a, _b, _c;
-    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteScreenShareStreamView, onDisposeRemoteVideoStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, 
-    /* @conditional-compile-remove(pinned-participants) */
-    onPinParticipant: onPinParticipantHandler, 
-    /* @conditional-compile-remove(pinned-participants) */
-    onUnpinParticipant: onUnpinParticipantHandler, 
-    /* @conditional-compile-remove(pinned-participants) */
-    remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteScreenShareStreamView, onDisposeRemoteVideoStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, onPinParticipant: onPinParticipantHandler, onUnpinParticipant: onUnpinParticipantHandler, remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
     /* @conditional-compile-remove(vertical-gallery) */
     overflowGalleryPosition = 'horizontalBottom', 
     /* @conditional-compile-remove(rooms) */
-    localVideoTileSize = 'followDeviceOrientation' } = props;
+    localVideoTileSize = 'followDeviceOrientation', 
+    /* @conditional-compile-remove(spotlight) */
+    spotlightedParticipants, 
+    /* @conditional-compile-remove(spotlight) */
+    onStartLocalSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStartRemoteSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopLocalSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopRemoteSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(reaction) */
+    reactionResources } = 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;
-    /* @conditional-compile-remove(pinned-participants) */
+    const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'
+        ? remoteVideoTileMenu.hostId
+        : undefined;
     const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
-    const localTileNotInGrid = (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') && 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);
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
-    /* @conditional-compile-remove(pinned-participants) */
     const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState([]);
-    /* @conditional-compile-remove(pinned-participants) */
     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
             } })));
     }, [remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored]);
-    /* @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);
             }
         });
     }, [props.pinnedParticipants, props.remoteParticipants]);
-    /* @conditional-compile-remove(pinned-participants) */
     // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
     const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
-    const showLocalVideoTileLabel = !(localTileNotInGrid && isNarrow || /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize === '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default';
+    const showLocalVideoTileLabel = !((localTileNotInGrid && isNarrow) ||
+        /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
+            '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -128,10 +132,10 @@ export const VideoGallery = (props) => {
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
+        /* @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 = () => {
@@ -139,13 +143,66 @@ export const VideoGallery = (props) => {
             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, { 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, 
-                /* @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(gallery-layouts) */
-        layout, showLocalVideoTileLabel]);
-    /* @conditional-compile-remove(pinned-participants) */
+                /* @conditional-compile-remove(raise-hand) */
+                raisedHand: localParticipant.raisedHand, 
+                /* @conditional-compile-remove(reaction) */
+                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, 
+                /* @conditional-compile-remove(reaction) */
+                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,
+        /*@conditional-compile-remove(click-to-call) */
+        localVideoTileSize,
+        /* @conditional-compile-remove(gallery-layouts) */
+        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,
+        /* @conditional-compile-remove(reaction) */
+        reactionResources
+    ]);
     const onPinParticipant = useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
             return;
@@ -155,18 +212,15 @@ export const VideoGallery = (props) => {
         }
         onPinParticipantHandler === null || onPinParticipantHandler === void 0 ? void 0 : onPinParticipantHandler(userId);
     }, [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]);
-    /* @conditional-compile-remove(pinned-participants) */
     const onUnpinParticipant = useCallback((userId) => {
-        setPinnedParticipantsState(pinnedParticipantsState.filter(p => p !== userId));
+        setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));
         onUnpinParticipantHandler === null || onUnpinParticipantHandler === void 0 ? void 0 : onUnpinParticipantHandler(userId);
     }, [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]);
-    /* @conditional-compile-remove(pinned-participants) */
     const [announcementString, setAnnouncementString] = React.useState('');
-    /* @conditional-compile-remove(pinned-participants) */
     /**
      * 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.
@@ -177,38 +231,76 @@ export const VideoGallery = (props) => {
     }, [setAnnouncementString]);
     const defaultOnRenderVideoTile = useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
-        /* @conditional-compile-remove(pinned-participants) */
         const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;
-        /* @conditional-compile-remove(pinned-participants) */
         let isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
+        /* @conditional-compile-remove(spotlight) */
+        const isSpotlighted = !!participant.spotlight;
+        /* @conditional-compile-remove(spotlight) */
+        isPinned = isSpotlighted ? false : isPinned;
         const createViewOptions = () => {
             var _a, _b;
-            /* @conditional-compile-remove(pinned-participants) */
             if (selectedScalingMode) {
                 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 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, { 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, 
-            /* @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; });
+        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: 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, 
+            /* @conditional-compile-remove(reaction) */
+            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,
+        /* @conditional-compile-remove(reaction) */ reactionResources
+    ]);
+    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] }));
-    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] })));
+    const screenShareComponent = remoteScreenShareComponent
+        ? remoteScreenShareComponent
+        : localParticipant.isScreenSharingOn
+            ? localScreenShareStreamComponent
+            : undefined;
     const layoutProps = useMemo(() => ({
         remoteParticipants,
         localParticipant,
@@ -221,10 +313,28 @@ export const VideoGallery = (props) => {
         localVideoComponent: localVideoTile,
         parentWidth: containerWidth,
         parentHeight: containerHeight,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
+        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]);
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants
+    }), [
+        remoteParticipants,
+        localParticipant,
+        screenShareComponent,
+        showCameraSwitcherInLocalPreview,
+        maxRemoteVideoStreams,
+        dominantSpeakers,
+        styles,
+        localVideoTile,
+        containerWidth,
+        containerHeight,
+        onRenderRemoteVideoTile,
+        defaultOnRenderVideoTile,
+        pinnedParticipants,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipants
+    ]);
     const videoGalleryLayout = useMemo(() => {
         /* @conditional-compile-remove(gallery-layouts) */
         if (screenShareParticipant && layout === 'focusedContent') {
@@ -237,13 +347,16 @@ 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, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);
-    return React.createElement("div", { 
-        /* @conditional-compile-remove(pinned-participants) */
+    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, /* @conditional-compile-remove(pinned-participants) */
-        React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" }));
+        videoGalleryLayout,
+        React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" })));
 };
 //# sourceMappingURL=VideoGallery.js.map