@azure/communication-react 1.14.0-beta.2 → 1.14.0

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

@@ -4,16 +4,12 @@ import { useCallback, useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const DEFAULT_MAX_VIDEO_SREAMS = 4;
-/* @conditional-compile-remove(gallery-layouts) */
 const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = useRef([]);
     const visibleOverflowGalleryParticipants = useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(gallery-layouts) */
-    layout } = props;
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], layout } = props;
     const calculateMaxRemoteVideoStreams = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
         if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
             return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
         }
@@ -25,7 +21,6 @@ const _useOrganizedParticipants = (props) => {
     const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
     const videoParticipants = remoteParticipants.filter(p => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const participantsToSortTrampoline = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
         return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
         return videoParticipants;
     };
@@ -35,20 +30,14 @@ const _useOrganizedParticipants = (props) => {
         lastVisibleParticipants: visibleGridParticipants.current,
         maxDominantSpeakers: maxRemoteVideoStreamsToUse
     }).slice(0, maxRemoteVideoStreamsToUse);
-    /* @conditional-compile-remove(gallery-layouts) */
     const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];
-    /* @conditional-compile-remove(gallery-layouts) */
     if (dominantSpeakerToGrid[0]) {
         visibleGridParticipants.current = dominantSpeakerToGrid;
     }
     const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));
     const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipantsOrdered.filter(p => p.state === ('Connecting' || 'Ringing'));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map(p => p.userId));
     visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId) && /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
+        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
         lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
@@ -60,16 +49,12 @@ const _useOrganizedParticipants = (props) => {
         // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
         // we will use the max streams provided to the function to find the max participants that can go in the grid
         // if there are less participants than max streams then we will use all participants including joining in the grid
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse) : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
         return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);
+    }, [isScreenShareActive, maxRemoteVideoStreamsToUse]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = useCallback(() => {
         if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
             return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);
         }
         else {
@@ -77,11 +62,9 @@ const _useOrganizedParticipants = (props) => {
             // 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 visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current.concat(callingParticipants) : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants) : [];
             return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);
         }
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);
+    }, [isScreenShareActive, maxRemoteVideoStreamsToUse]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
     return {
         gridParticipants,

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    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) {\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, maxRemoteVideoStreamsToUse]);\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n  return {\n    gridParticipants,\n    overflowGalleryParticipants: overflowGalleryParticipants\n  };\n};\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\n}\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  }, ({} as SortedRemoteParticipants));\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  return _useOrganizedParticipantsWithFocusedParticipants(args);\n};"]}
+{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\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  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;\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    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    pinnedParticipantUserIds = [],\n    layout\n  } = props;\n  const calculateMaxRemoteVideoStreams = (): number => {\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    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  const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];\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  visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId)),\n    dominantSpeakers: dominantSpeakers,\n    lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    // 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 visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n  }, [isScreenShareActive, maxRemoteVideoStreamsToUse]);\n  const gridParticipants = getGridParticipants();\n  const getOverflowGalleryRemoteParticipants = useCallback((): (VideoGalleryParticipant | VideoGalleryRemoteParticipant)[] => {\n    if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      // 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 visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n    }\n  }, [isScreenShareActive, maxRemoteVideoStreamsToUse]);\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n  return {\n    gridParticipants,\n    overflowGalleryParticipants: overflowGalleryParticipants\n  };\n};\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\n}\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  }, ({} as SortedRemoteParticipants));\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  return _useOrganizedParticipantsWithFocusedParticipants(args);\n};"]}

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

@@ -78,7 +78,7 @@ export interface VideoGalleryStrings {
 /**
  * @public
  */
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker' | /* @conditional-compile-remove(gallery-layouts) */ 'focusedContent';
+export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | 'focusedContent';
 /**
  * {@link VideoGallery} Component Styles.
  * @public
@@ -98,7 +98,7 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
  *
  * @public
  */
-export type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | /* @conditional-compile-remove(gallery-layouts) */ 'horizontalTop';
+export type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | 'horizontalTop';
 /**
  * different modes of the local video tile
  *

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

@@ -17,9 +17,7 @@ import { useIdentifiers } from '../identifiers';
 import { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';
 import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';
 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';
 /**
  * @private
@@ -73,7 +71,7 @@ export const VideoGallery = (props) => {
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     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' || layout === 'speaker') && remoteParticipants.length > 0;
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -98,7 +96,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 || /*@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') || layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -118,7 +116,6 @@ export const VideoGallery = (props) => {
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         const showDisplayNameTrampoline = () => {
-            /* @conditional-compile-remove(gallery-layouts) */
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
             return isNarrow ? '' : strings.localVideoLabel;
         };
@@ -126,8 +123,7 @@ export const VideoGallery = (props) => {
             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, 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]);
+        localVideoTileSize, layout, showLocalVideoTileLabel]);
     const onPinParticipant = useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
             return;
@@ -168,8 +164,7 @@ export const VideoGallery = (props) => {
                 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, 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 });
+        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, 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 });
     }, [onCreateRemoteStreamView, onDisposeRemoteVideoStreamView, remoteVideoViewOptions, localParticipant, onRenderAvatar, showMuteIndicator, strings, drawerMenuHostId, remoteVideoTileMenu, selectedScalingModeState, pinnedParticipants, onPinParticipant, onUnpinParticipant, toggleAnnouncerString, onUpdateScalingMode]);
     const screenShareParticipant = remoteParticipants.find(participant => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
@@ -192,19 +187,17 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     }), [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]);
     const videoGalleryLayout = useMemo(() => {
-        /* @conditional-compile-remove(gallery-layouts) */
         if (screenShareParticipant && layout === 'focusedContent') {
             return React.createElement(FocusedContentLayout, Object.assign({}, layoutProps));
         }
         if (layout === 'floatingLocalVideo') {
             return React.createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }
-        /* @conditional-compile-remove(gallery-layouts) */
         if (layout === 'speaker') {
             return React.createElement(SpeakerVideoLayout, Object.assign({}, layoutProps));
         }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
-    }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);
+    }, [layout, layoutProps, screenShareParticipant]);
     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) },

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACxG,OAAO,EAAE,2BAA2B,EAAE,MAAM,iDAAiD,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C,kDAAkD;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,kDAAkD;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEzE;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,qBAAqB,EAAE,MAAM;IAC7B,uBAAuB,EAAE,MAAM;IAC/B,kBAAkB,EAAE,MAAM;IAC1B,iBAAiB,EAAE,MAAM;IACzB,aAAa,EAAE,MAAM;CACtB,CAAC;AACF;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAC7C;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG;IACpD,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAiN/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,EACJ,gBAAgB,EAChB,kBAAkB,GAAG,EAAE,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,oCAAoC,EACpC,8BAA8B,EAC9B,MAAM,EACN,MAAM,EACN,cAAc,EACd,iBAAiB,EACjB,qBAAqB,GAAG,gCAAgC,EACxD,gCAAgC,EAChC,gCAAgC,EAChC,gBAAgB,EAAE,uBAAuB,EACzC,kBAAkB,EAAE,yBAAyB,EAC7C,mBAAmB,GAAG,sCAAsC;IAC5D,mDAAmD;IACnD,uBAAuB,GAAG,kBAAkB;IAC5C,wCAAwC;IACxC,kBAAkB,GAAG,yBAAyB,EAC/C,GAAG,KAAK,CAAC;IACV,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iCACzB,aAAa,GACb,KAAK,CAAC,OAAO,EAChB,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACpC,MAAM,wBAAwB,GAAG,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAE,mBAAgD,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IACrK,MAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;IAC3E,MAAM,kBAAkB,GAAG,CAAC,MAAM,KAAK,oBAAoB,IAAI,kDAAkD,CAAA,MAAM,KAAK,SAAS,CAAC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IACxK,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACxE,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC3F,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqC,EAAE,CAAC,CAAC;IACvH,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAC,YAAoB,EAAE,WAA4B,EAAE,EAAE;QAC7F,2BAA2B,CAAC,OAAO,CAAC,EAAE,CAAC,iCAClC,OAAO,KACV,CAAC,YAAY,CAAC,EAAE;gBACd,WAAW;gBACX,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;aAC/C,IACD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU,CAAC,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,KAAK,CAAC,kBAAkB,0CAAE,OAAO,CAAC,cAAc,CAAC,EAAE;;YACjD,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,cAAc,CAAC,CAAA,EAAE,CAAC;gBACtE,qGAAqG;gBACrG,OAAO,CAAC,IAAI,CAAC,qCAAqC,GAAG,cAAc,CAAC,CAAC;YACvE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzD,6GAA6G;IAC7G,MAAM,kBAAkB,GAAG,MAAA,KAAK,CAAC,kBAAkB,mCAAI,uBAAuB,CAAC;IAC/E,MAAM,uBAAuB,GAAG,CAAC,CAAC,kBAAkB,IAAI,QAAQ,IAAI,+CAA+C,CAAC,wCAAwC,CAAA,kBAAkB,KAAK,MAAM,CAAC,IAAI,kDAAkD,CAAA,MAAM,KAAK,SAAS,CAAC;IACrQ;;OAEG;IACH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAqE,EAAE;;QACpG,gDAAgD;QAChD,IAAI,kBAAkB,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,IAAI,sBAAsB,EAAE,CAAC;YAC3B,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;QAClD,CAAC;QACD,MAAM,oBAAoB,GAAG,eAAe,CAAC,kBAAkB,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAClG,IAAI,EAAE;gBACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aAC3C;SACF,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC;QACvB,MAAM,YAAY,GAAG,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC;QACvF,MAAM,yBAAyB,GAAG,GAAW,EAAE;YAC7C,kDAAkD;YAClD,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC;YAChG,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,CAAC,CAAC;QACF,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,6BAA6B,EAAE,GAAG,EAAC,sBAAsB,EAAC,QAAQ,EAAE,CAAC,gBAAc,OAAO,CAAC,uBAAuB,EAAE,IAAI,EAAE,QAAQ;YACpJ,oBAAC,eAAe,IAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,0CAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,aAAa,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,0CAAE,aAAa,EAAE,WAAW,EAAE,yBAAyB,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,gCAAgC,EAAE,gCAAgC,EAAE,gCAAgC,EAAE,gCAAgC,EAAE,6BAA6B,EAAE,OAAO,CAAC,6BAA6B,EAAE,6BAA6B,EAAE,OAAO,CAAC,6BAA6B,EAAE,MAAM,EAAE,oBAAoB;gBACj0B,6CAA6C,CAAC,UAAU,EAAE,gBAAgB,CAAC,UAAU,GAAI,CACjF,CAAC;IACb,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,gCAAgC,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,cAAc,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,gCAAgC,EAAE,iBAAiB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,+CAA+C;QAC9V,kBAAkB,EAAE,kDAAkD;QACtE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAClC,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACtD,IAAI,kBAAkB,CAAC,MAAM,IAAI,6BAA6B,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QACD,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9C,0BAA0B,CAAC,uBAAuB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QACrE,CAAC;QACD,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,MAAM,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,kBAAkB,CAAC,MAAM,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAC9G,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACxD,0BAA0B,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC;QAC9E,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAG,MAAM,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,uBAAuB,EAAE,0BAA0B,EAAE,yBAAyB,CAAC,CAAC,CAAC;IACrF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC/E;;OAEG;IACH,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,YAAoB,EAAE,EAAE;QACjE,qBAAqB,CAAC,YAAY,CAAC,CAAC;QACpC;;WAEG;QACH,UAAU,CAAC,GAAG,EAAE;YACd,qBAAqB,CAAC,EAAE,CAAC,CAAC;QAC5B,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,WAA0C,EAAE,kBAA4B,EAAE,EAAE;QACxH,MAAM,iBAAiB,GAAG,WAAW,CAAC,WAAW,CAAC;QAClD,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,CAAC,CAAC,wBAAwB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACzG,IAAI,QAAQ,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAChE,MAAM,iBAAiB,GAAG,GAAmC,EAAE;;YAC7D,IAAI,mBAAmB,EAAE,CAAC;gBACxB,OAAO,mBAAmB,CAAC;YAC7B,CAAC;YACD,OAAO,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU,KAAI,CAAA,MAAA,iBAAiB,CAAC,UAAU,0CAAE,MAAM,KAAG,MAAA,iBAAiB,CAAC,UAAU,0CAAE,KAAK,CAAA,CAAC,CAAC,CAAE;gBACpH,WAAW,EAAE,KAAK;gBAClB,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;aACxB,CAAC,CAAC,CAAC,sBAAsB,CAAC;QACpD,CAAC,CAAC;QACF,OAAO,oBAAC,gBAAgB,IAAC,GAAG,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,iBAAiB,EAAE,WAAW,EAAE,wBAAwB,EAAE,kBAAkB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,EAAE,yBAAyB,EAAE,kBAAkB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,aAAa,CAAC,CAAC,CAAC,SAAS,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,EAAE,cAAc,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO;YACxoB,6CAA6C,CAAC,gBAAgB,EAAE,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,KAAK,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,MAAM,IAAI,6BAA6B,EAAE,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;IAC9iB,CAAC,EAAE,CAAC,wBAAwB,EAAE,8BAA8B,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,cAAc,EAAE,iBAAiB,EAAE,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAC5T,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,WAAC,OAAA,MAAA,WAAW,CAAC,iBAAiB,0CAAE,WAAW,CAAA,EAAA,CAAC,CAAC;IAClH,MAAM,+BAA+B,GAAG,oBAAC,gBAAgB,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,CAAC;IACjG,MAAM,0BAA0B,GAAG,sBAAsB,IAAI,oBAAC,iBAAiB,oBAAK,sBAAsB,IAAE,aAAa,EAAE,MAAA,sBAAsB,CAAC,iBAAiB,0CAAE,aAAa,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,oCAAoC,EAAE,WAAW,EAAE,MAAA,sBAAsB,CAAC,iBAAiB,0CAAE,WAAW,EAAE,2BAA2B,EAAE,wBAAwB,CAAC,sBAAsB,CAAC,MAAM,CAAC,IAAI,CAAC;IACtc,MAAM,oBAAoB,GAAG,0BAA0B,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,SAAS,CAAC;IACxK,MAAM,WAAW,GAAG,OAAO,CAAc,GAAG,EAAE,CAAC,CAAC;QAC9C,kBAAkB;QAClB,gBAAgB;QAChB,oBAAoB;QACpB,gCAAgC;QAChC,qBAAqB;QACrB,gBAAgB;QAChB,MAAM;QACN,yBAAyB,EAAE,uBAAuB,aAAvB,uBAAuB,cAAvB,uBAAuB,GAAI,wBAAwB;QAC9E,mBAAmB,EAAE,cAAc;QACnC,WAAW,EAAE,cAAc;QAC3B,YAAY,EAAE,eAAe;QAC7B,wBAAwB,EAAE,kBAAkB;QAC5C,mDAAmD,CAAA,uBAAuB;QAC1E,gDAAgD,CAAA,kBAAkB;KACnE,CAAC,EAAE,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,gCAAgC,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,mDAAmD,CAAA,uBAAuB,EAAE,gDAAgD,CAAA,kBAAkB,CAAC,CAAC,CAAC;IAC7Z,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,kDAAkD;QAClD,IAAI,sBAAsB,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;YAC1D,OAAO,oBAAC,oBAAoB,oBAAK,WAAW,EAAI,CAAC;QACnD,CAAC;QACD,IAAI,MAAM,KAAK,oBAAoB,EAAE,CAAC;YACpC,OAAO,oBAAC,wBAAwB,oBAAK,WAAW,EAAI,CAAC;QACvD,CAAC;QACD,kDAAkD;QAClD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,oBAAC,kBAAkB,oBAAK,WAAW,EAAI,CAAC;QACjD,CAAC;QACD,OAAO,oBAAC,aAAa,oBAAK,WAAW,EAAI,CAAC;IAC5C,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,kDAAkD,CAAA,sBAAsB,CAAC,CAAC,CAAC;IACpG,OAAO;QACP,4GAA4G;QAC5G,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,gBAAc,GAAG,CAAC,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,yBAAyB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,YAAY,CAAC;QACtL,kBAAkB;QACnB,oBAAC,SAAS,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,QAAQ,EAAC,QAAQ,GAAG,CACnE,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from './VerticalGallery';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/**\n * @private\n * Styles to disable the selectivity of a text in video gallery\n */\nexport const unselectable = {\n  '-webkit-user-select': 'none',\n  '-webkit-touch-callout': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none'\n};\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n  kind: 'contextual'\n};\n\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */\n  unpinParticipantForMe: string;\n  /** Aria label for pin participant menu item of remote participant's video tile */\n  pinParticipantMenuItemAriaLabel: string;\n  /** Aria label for unpin participant menu item of remote participant's video tile */\n  unpinParticipantMenuItemAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is pinned */\n  pinnedParticipantAnnouncementAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is unpinned */\n  unpinnedParticipantAnnouncementAriaLabel: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */'speaker' | /* @conditional-compile-remove(gallery-layouts) */'focusedContent';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /** Styles for the vertical gallery */\n  verticalGallery?: VerticalGalleryStyles;\n}\n\n/* @conditional-compile-remove(vertical-gallery) */\n/**\n * Different modes and positions of the overflow gallery in the VideoGallery\n *\n * @public\n */\nexport type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | /* @conditional-compile-remove(gallery-layouts) */'horizontalTop';\n\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\n/**\n * different modes of the local video tile\n *\n * @public\n */\nexport type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /**\n   * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n   *\n   * Callback to dispose a remote video stream view\n   */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote screen share stream view */\n  onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /**\n   * Determines the layout of the overflowGallery inside the VideoGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\n  /**\n   * Determines the aspect ratio of local video tile in the video gallery.\n   * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n   * 16:9 (landscape) aspect ratios.\n   * @defaultValue 'followDeviceOrientation'\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileDrawerMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'drawer';\n  /**\n   * The optional id property provided on an element that the drawer menu should render within when a\n   * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n   * render within the VideoGallery component.\n   */\n  hostId?: string;\n}\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteScreenShareStreamView,\n    onDisposeRemoteVideoStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    onPinParticipant: onPinParticipantHandler,\n    onUnpinParticipant: onUnpinParticipantHandler,\n    remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n    /* @conditional-compile-remove(vertical-gallery) */\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(rooms) */\n    localVideoTileSize = 'followDeviceOrientation'\n  } = props;\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({\n    ...localeStrings,\n    ...props.strings\n  }), [localeStrings, props.strings]);\n  const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer' ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId : undefined;\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n  const localTileNotInGrid = (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */layout === 'speaker') && remoteParticipants.length > 0;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>({});\n  const onUpdateScalingMode = useCallback((remoteUserId: string, scalingMode: ViewScalingMode) => {\n    setselectedScalingModeState(current => ({\n      ...current,\n      [remoteUserId]: {\n        scalingMode,\n        isMirrored: remoteVideoViewOptions?.isMirrored\n      }\n    }));\n  }, [remoteVideoViewOptions?.isMirrored]);\n  useEffect(() => {\n    props.pinnedParticipants?.forEach(pinParticipant => {\n      if (!props.remoteParticipants?.find(t => t.userId === pinParticipant)) {\n        // warning will be logged in the console when invalid participant id is passed in pinned participants\n        console.warn('Invalid pinned participant UserId :' + pinParticipant);\n      }\n    });\n  }, [props.pinnedParticipants, props.remoteParticipants]);\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n  const showLocalVideoTileLabel = !(localTileNotInGrid && isNarrow || /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */localVideoTileSize === '9:16') || /* @conditional-compile-remove(gallery-layouts) */layout === 'default';\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(click-to-call) */\n    if (localVideoTileSize === 'hidden') {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n    const localVideoTileStyles = concatStyleSets(localTileNotInGrid ? floatingLocalVideoTileStyle : {}, {\n      root: {\n        borderRadius: theme.effects.roundedCorner4\n      }\n    }, styles?.localVideo);\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n    const showDisplayNameTrampoline = (): string => {\n      /* @conditional-compile-remove(gallery-layouts) */\n      return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n      return isNarrow ? '' : strings.localVideoLabel;\n    };\n    return <Stack styles={localVideoTileContainerStyles} key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile userId={localParticipant.userId} onCreateLocalStreamView={onCreateLocalStreamView} onDisposeLocalStreamView={onDisposeLocalStreamView} isAvailable={localParticipant?.videoStream?.isAvailable} isMuted={localParticipant.isMuted} renderElement={localParticipant?.videoStream?.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}\n      /* @conditional-compile-remove(raise-hand) */ raisedHand={localParticipant.raisedHand} />\n      </Stack>;\n  }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, styles?.localVideo, theme.effects.roundedCorner4, /*@conditional-compile-remove(click-to-call) */\n  localVideoTileSize, /* @conditional-compile-remove(gallery-layouts) */\n  layout, showLocalVideoTileLabel]);\n  const onPinParticipant = useCallback((userId: string) => {\n    if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n      return;\n    }\n    if (!pinnedParticipantsState.includes(userId)) {\n      setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n    }\n    onPinParticipantHandler?.(userId);\n  }, [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]);\n  const onUnpinParticipant = useCallback((userId: string) => {\n    setPinnedParticipantsState(pinnedParticipantsState.filter(p => p !== userId));\n    onUnpinParticipantHandler?.(userId);\n  }, [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]);\n  const [announcementString, setAnnouncementString] = React.useState<string>('');\n  /**\n   * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n   */\n  const toggleAnnouncerString = useCallback((announcement: string) => {\n    setAnnouncementString(announcement);\n    /**\n     * Clears the announcer string after VideoGallery action allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setAnnouncementString('');\n    }, 3000);\n  }, [setAnnouncementString]);\n  const defaultOnRenderVideoTile = useCallback((participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n    const remoteVideoStream = participant.videoStream;\n    const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n    let isPinned = pinnedParticipants?.includes(participant.userId);\n    const createViewOptions = (): VideoStreamOptions | undefined => {\n      if (selectedScalingMode) {\n        return selectedScalingMode;\n      }\n      return remoteVideoStream?.streamSize && remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width ? ({\n        scalingMode: 'Fit',\n        isMirrored: remoteVideoViewOptions?.isMirrored\n      } as VideoStreamOptions) : remoteVideoViewOptions;\n    };\n    return <_RemoteVideoTile key={participant.userId} userId={participant.userId} remoteParticipant={participant} onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined} onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined} isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false} isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false} renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined} remoteVideoViewOptions={createViewOptions()} onRenderAvatar={onRenderAvatar} showMuteIndicator={showMuteIndicator} strings={strings}\n    /* @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} />;\n  }, [onCreateRemoteStreamView, onDisposeRemoteVideoStreamView, remoteVideoViewOptions, localParticipant, onRenderAvatar, showMuteIndicator, strings, drawerMenuHostId, remoteVideoTileMenu, selectedScalingModeState, pinnedParticipants, onPinParticipant, onUnpinParticipant, toggleAnnouncerString, onUpdateScalingMode]);\n  const screenShareParticipant = remoteParticipants.find(participant => participant.screenShareStream?.isAvailable);\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n  const remoteScreenShareComponent = screenShareParticipant && <RemoteScreenShare {...screenShareParticipant} renderElement={screenShareParticipant.screenShareStream?.renderElement} onCreateRemoteStreamView={onCreateRemoteStreamView} onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView} isReceiving={screenShareParticipant.screenShareStream?.isReceiving} participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]} />;\n  const screenShareComponent = remoteScreenShareComponent ? remoteScreenShareComponent : localParticipant.isScreenSharingOn ? localScreenShareStreamComponent : undefined;\n  const layoutProps = useMemo<LayoutProps>(() => ({\n    remoteParticipants,\n    localParticipant,\n    screenShareComponent,\n    showCameraSwitcherInLocalPreview,\n    maxRemoteVideoStreams,\n    dominantSpeakers,\n    styles,\n    onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n    localVideoComponent: localVideoTile,\n    parentWidth: containerWidth,\n    parentHeight: containerHeight,\n    pinnedParticipantUserIds: pinnedParticipants,\n    /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */localVideoTileSize\n  }), [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]);\n  const videoGalleryLayout = useMemo(() => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    if (screenShareParticipant && layout === 'focusedContent') {\n      return <FocusedContentLayout {...layoutProps} />;\n    }\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    /* @conditional-compile-remove(gallery-layouts) */\n    if (layout === 'speaker') {\n      return <SpeakerVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */screenShareParticipant]);\n  return <div\n  // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n  id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId} data-ui-id={ids.videoGallery} ref={containerRef} className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}>\n      {videoGalleryLayout}\n      <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n    </div>;\n};"]}
+{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/**\n * @private\n * Styles to disable the selectivity of a text in video gallery\n */\nexport const unselectable = {\n  '-webkit-user-select': 'none',\n  '-webkit-touch-callout': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none'\n};\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n  kind: 'contextual'\n};\n\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */\n  unpinParticipantForMe: string;\n  /** Aria label for pin participant menu item of remote participant's video tile */\n  pinParticipantMenuItemAriaLabel: string;\n  /** Aria label for unpin participant menu item of remote participant's video tile */\n  unpinParticipantMenuItemAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is pinned */\n  pinnedParticipantAnnouncementAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is unpinned */\n  unpinnedParticipantAnnouncementAriaLabel: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | 'focusedContent';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /** Styles for the vertical gallery */\n  verticalGallery?: VerticalGalleryStyles;\n}\n\n/* @conditional-compile-remove(vertical-gallery) */\n/**\n * Different modes and positions of the overflow gallery in the VideoGallery\n *\n * @public\n */\nexport type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | 'horizontalTop';\n\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\n/**\n * different modes of the local video tile\n *\n * @public\n */\nexport type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /**\n   * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n   *\n   * Callback to dispose a remote video stream view\n   */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote screen share stream view */\n  onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n  /* @conditional-compile-remove(vertical-gallery) */\n  /**\n   * Determines the layout of the overflowGallery inside the VideoGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\n  /**\n   * Determines the aspect ratio of local video tile in the video gallery.\n   * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n   * 16:9 (landscape) aspect ratios.\n   * @defaultValue 'followDeviceOrientation'\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileDrawerMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'drawer';\n  /**\n   * The optional id property provided on an element that the drawer menu should render within when a\n   * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n   * render within the VideoGallery component.\n   */\n  hostId?: string;\n}\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteScreenShareStreamView,\n    onDisposeRemoteVideoStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    onPinParticipant: onPinParticipantHandler,\n    onUnpinParticipant: onUnpinParticipantHandler,\n    remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n    /* @conditional-compile-remove(vertical-gallery) */\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(rooms) */\n    localVideoTileSize = 'followDeviceOrientation'\n  } = props;\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({\n    ...localeStrings,\n    ...props.strings\n  }), [localeStrings, props.strings]);\n  const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer' ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId : undefined;\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n  const localTileNotInGrid = (layout === 'floatingLocalVideo' || layout === 'speaker') && remoteParticipants.length > 0;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>({});\n  const onUpdateScalingMode = useCallback((remoteUserId: string, scalingMode: ViewScalingMode) => {\n    setselectedScalingModeState(current => ({\n      ...current,\n      [remoteUserId]: {\n        scalingMode,\n        isMirrored: remoteVideoViewOptions?.isMirrored\n      }\n    }));\n  }, [remoteVideoViewOptions?.isMirrored]);\n  useEffect(() => {\n    props.pinnedParticipants?.forEach(pinParticipant => {\n      if (!props.remoteParticipants?.find(t => t.userId === pinParticipant)) {\n        // warning will be logged in the console when invalid participant id is passed in pinned participants\n        console.warn('Invalid pinned participant UserId :' + pinParticipant);\n      }\n    });\n  }, [props.pinnedParticipants, props.remoteParticipants]);\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n  const showLocalVideoTileLabel = !(localTileNotInGrid && isNarrow || /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */localVideoTileSize === '9:16') || layout === 'default';\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(click-to-call) */\n    if (localVideoTileSize === 'hidden') {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n    const localVideoTileStyles = concatStyleSets(localTileNotInGrid ? floatingLocalVideoTileStyle : {}, {\n      root: {\n        borderRadius: theme.effects.roundedCorner4\n      }\n    }, styles?.localVideo);\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n    const showDisplayNameTrampoline = (): string => {\n      return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n      return isNarrow ? '' : strings.localVideoLabel;\n    };\n    return <Stack styles={localVideoTileContainerStyles} key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile userId={localParticipant.userId} onCreateLocalStreamView={onCreateLocalStreamView} onDisposeLocalStreamView={onDisposeLocalStreamView} isAvailable={localParticipant?.videoStream?.isAvailable} isMuted={localParticipant.isMuted} renderElement={localParticipant?.videoStream?.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}\n      /* @conditional-compile-remove(raise-hand) */ raisedHand={localParticipant.raisedHand} />\n      </Stack>;\n  }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, styles?.localVideo, theme.effects.roundedCorner4, /*@conditional-compile-remove(click-to-call) */\n  localVideoTileSize, layout, showLocalVideoTileLabel]);\n  const onPinParticipant = useCallback((userId: string) => {\n    if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n      return;\n    }\n    if (!pinnedParticipantsState.includes(userId)) {\n      setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n    }\n    onPinParticipantHandler?.(userId);\n  }, [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]);\n  const onUnpinParticipant = useCallback((userId: string) => {\n    setPinnedParticipantsState(pinnedParticipantsState.filter(p => p !== userId));\n    onUnpinParticipantHandler?.(userId);\n  }, [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]);\n  const [announcementString, setAnnouncementString] = React.useState<string>('');\n  /**\n   * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n   */\n  const toggleAnnouncerString = useCallback((announcement: string) => {\n    setAnnouncementString(announcement);\n    /**\n     * Clears the announcer string after VideoGallery action allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setAnnouncementString('');\n    }, 3000);\n  }, [setAnnouncementString]);\n  const defaultOnRenderVideoTile = useCallback((participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n    const remoteVideoStream = participant.videoStream;\n    const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n    let isPinned = pinnedParticipants?.includes(participant.userId);\n    const createViewOptions = (): VideoStreamOptions | undefined => {\n      if (selectedScalingMode) {\n        return selectedScalingMode;\n      }\n      return remoteVideoStream?.streamSize && remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width ? ({\n        scalingMode: 'Fit',\n        isMirrored: remoteVideoViewOptions?.isMirrored\n      } as VideoStreamOptions) : remoteVideoViewOptions;\n    };\n    return <_RemoteVideoTile key={participant.userId} userId={participant.userId} remoteParticipant={participant} onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined} onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined} isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false} isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false} renderElement={isVideoParticipant ? 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} />;\n  }, [onCreateRemoteStreamView, onDisposeRemoteVideoStreamView, remoteVideoViewOptions, localParticipant, onRenderAvatar, showMuteIndicator, strings, drawerMenuHostId, remoteVideoTileMenu, selectedScalingModeState, pinnedParticipants, onPinParticipant, onUnpinParticipant, toggleAnnouncerString, onUpdateScalingMode]);\n  const screenShareParticipant = remoteParticipants.find(participant => participant.screenShareStream?.isAvailable);\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n  const remoteScreenShareComponent = screenShareParticipant && <RemoteScreenShare {...screenShareParticipant} renderElement={screenShareParticipant.screenShareStream?.renderElement} onCreateRemoteStreamView={onCreateRemoteStreamView} onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView} isReceiving={screenShareParticipant.screenShareStream?.isReceiving} participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]} />;\n  const screenShareComponent = remoteScreenShareComponent ? remoteScreenShareComponent : localParticipant.isScreenSharingOn ? localScreenShareStreamComponent : undefined;\n  const layoutProps = useMemo<LayoutProps>(() => ({\n    remoteParticipants,\n    localParticipant,\n    screenShareComponent,\n    showCameraSwitcherInLocalPreview,\n    maxRemoteVideoStreams,\n    dominantSpeakers,\n    styles,\n    onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n    localVideoComponent: localVideoTile,\n    parentWidth: containerWidth,\n    parentHeight: containerHeight,\n    pinnedParticipantUserIds: pinnedParticipants,\n    /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */localVideoTileSize\n  }), [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]);\n  const videoGalleryLayout = useMemo(() => {\n    if (screenShareParticipant && layout === 'focusedContent') {\n      return <FocusedContentLayout {...layoutProps} />;\n    }\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    if (layout === 'speaker') {\n      return <SpeakerVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps, screenShareParticipant]);\n  return <div\n  // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n  id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId} data-ui-id={ids.videoGallery} ref={containerRef} className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}>\n      {videoGalleryLayout}\n      <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n    </div>;\n};"]}

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

@@ -2,7 +2,6 @@ import { IContextualMenuProps, IStyle } from '@fluentui/react';
 import React from 'react';
 import { BaseCustomStyles, OnRenderAvatarCallback } from '../types';
 import { RaisedHand } from '../types';
-import { ParticipantState } from '../types';
 /**
  * Strings of {@link VideoTile} that can be overridden.
  * @beta
@@ -96,12 +95,6 @@ export interface VideoTileProps {
     isSpeaking?: boolean;
     /** Whether the participant is raised hand. Show a indicator (border) and icon with order */
     raisedHand?: RaisedHand;
-    /**
-     * The call connection state of the participant.
-     * For example, `Hold` means the participant is on hold.
-     */
-    participantState?: ParticipantState;
-    strings?: VideoTileStrings;
     /**
      * Display custom menu items in the VideoTile's contextual menu.
      * Uses Fluent UI ContextualMenu.

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

@@ -153,7 +153,7 @@ export const VideoTile = (props) => {
             isVideoRendered ? React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && {
                     transform: 'scaleX(-1)'
                 }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement) : React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
-                    opacity: participantStateString || /* @conditional-compile-remove(PSTN-calls) */ props.participantState === 'Idle' ? 0.4 : 1
+                    opacity: participantStateString ? 0.4 : 1
                 }) }, onRenderPlaceholder ? onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder) : React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))),
             (canShowLabel || participantStateString) && React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
@@ -176,12 +176,6 @@ export const VideoTile = (props) => {
                     React.createElement(RaisedHandIcon, null)))));
 };
 const participantStateStringTrampoline = (props, locale) => {
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    const strings = Object.assign(Object.assign({}, locale.strings.videoTile), props.strings);
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging : props.participantState === 'Hold' ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold : undefined;
     return undefined;
 };
 const tileInfoContainerTokens = {

package/dist/dist-esm/react-components/src/components/VideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DirectionalHint, Icon, IconButton, IContextualMenuProps, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(raise-hand) */\nimport { CallingTheme } from '../theming';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHand } from '../types';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint, tileInfoContainerStyle, participantStateStringStyles } from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\n/* @conditional-compile-remove(raise-hand) */\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateRinging: string;\n  participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * If true, the video tile will show the pin icon.\n   */\n  isPinned?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /* @conditional-compile-remove(raise-hand) */\n  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  strings?: VideoTileStrings;\n  /**\n   * Display custom menu items in the VideoTile's contextual menu.\n   * Uses Fluent UI ContextualMenu.\n   * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n   */\n  contextualMenu?: IContextualMenuProps;\n  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const {\n    text,\n    noVideoAvailableAriaLabel,\n    coinSize,\n    hidePersonaDetails\n  } = props;\n  return <Stack className={mergeStyles({\n    position: 'absolute',\n    height: '100%',\n    width: '100%'\n  })}>\n      <Stack styles={defaultPersonaStyles}>\n        {coinSize && <Persona coinSize={coinSize} hidePersonaDetails={hidePersonaDetails} text={text ?? ''} initialsTextColor=\"white\" aria-label={noVideoAvailableAriaLabel ?? ''} showOverflowTooltip={false} />}\n      </Stack>\n    </Stack>;\n};\nconst defaultPersonaStyles = {\n  root: {\n    margin: 'auto',\n    maxHeight: '100%'\n  }\n};\nconst videoTileMoreMenuIconProps = {\n  iconName: undefined,\n  style: {\n    display: 'none'\n  }\n};\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: {\n    container: {\n      maxWidth: '8rem'\n    }\n  }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  canShowContextMenuButton: boolean;\n}): JSX.Element => {\n  const {\n    contextualMenu,\n    canShowContextMenuButton\n  } = props;\n  if (!contextualMenu) {\n    return <></>;\n  }\n  const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n  return <IconButton data-ui-id=\"video-tile-more-options-button\" styles={moreButtonStyles} menuIconProps={videoTileMoreMenuIconProps} menuProps={{\n    ...videoTileMoreMenuProps,\n    ...contextualMenu\n  }} iconProps={{\n    iconName: optionsIcon\n  }} />;\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    /* @conditional-compile-remove(raise-hand) */\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu\n  } = props;\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n  const locale = useLocale();\n  const theme = useTheme();\n  const isVideoRendered = !!renderElement;\n  const observer = useRef(new ResizeObserver((entries): void => {\n    const {\n      width,\n      height\n    } = entries[0].contentRect;\n    const personaCalcSize = Math.min(width, height) / 3;\n    // we only want to set the persona size if it has changed\n    if (personaCalcSize !== personaSize) {\n      setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n    }\n  }));\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n  const useLongPressProps = useMemo(() => {\n    return {\n      onLongPress: () => {\n        props.onLongTouch?.();\n      },\n      touchEventsOnly: true\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.onLongTouch]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\n  }, []);\n  const placeholderOptions = {\n    userId,\n    text: initialsName ?? displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n  const videoHintWithBorderRadius = mergeStyles(videoHint, {\n    borderRadius: theme.effects.roundedCorner4\n  });\n  const tileInfoStyle = useMemo(() => mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles?.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]);\n  const ids = useIdentifiers();\n  const canShowLabel = showLabel && (displayName || showMuteIndicator && isMuted);\n  const participantStateString = participantStateStringTrampoline(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  /* @conditional-compile-remove(raise-hand) */\n  const callingPalette = ((theme as unknown) as CallingTheme).callingPalette;\n  /* @conditional-compile-remove(raise-hand) */\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n  return <Stack data-ui-id={ids.videoTile} className={mergeStyles(rootStyles, {\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4\n  }, (isSpeaking || /* @conditional-compile-remove(raise-hand) */raisedHand) && {\n    '&::after': {\n      content: `''`,\n      position: 'absolute',\n      border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }, styles?.root)} {...longPressHandlers}>\n      <div ref={videoTileRef} style={{\n      width: '100%',\n      height: '100%'\n    }} {...hoverHandlers} data-is-focusable={true}>\n        {isVideoRendered ? <Stack className={mergeStyles(videoContainerStyles, isMirrored && {\n        transform: 'scaleX(-1)'\n      }, styles?.videoContainer)}>\n            {renderElement}\n          </Stack> : <Stack className={mergeStyles(videoContainerStyles, {\n        opacity: participantStateString || /* @conditional-compile-remove(PSTN-calls) */props.participantState === 'Idle' ? 0.4 : 1\n      })}>\n            {onRenderPlaceholder ? onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder) : <DefaultPlaceholder {...placeholderOptions} />}\n          </Stack>}\n\n        {}\n        {(canShowLabel || participantStateString) && <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            <Stack horizontal className={tileInfoStyle}>\n              {canShowLabel && <Text className={mergeStyles(displayNameStyle)} title={displayName} style={{\n            color: participantStateString ? theme.palette.neutralSecondary : 'inherit'\n          }} data-ui-id=\"video-tile-display-name\">\n                  {displayName}\n                </Text>}\n              {participantStateString && <Text className={mergeStyles(participantStateStringStyles(theme))}>\n                  {bracketedParticipantString(participantStateString, !!canShowLabel)}\n                </Text>}\n              {showMuteIndicator && isMuted && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileMicOff\" />\n                </Stack>}\n              {}\n              {isPinned && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                </Stack>}\n              <VideoTileMoreOptionsButton contextualMenu={contextualMenu} canShowContextMenuButton={canShowContextMenuButton} />\n            </Stack>\n          </Stack>}\n\n        {children && <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>}\n        {/* @conditional-compile-remove(raise-hand) */raisedHand && <Stack horizontal={true} tokens={{\n        childrenGap: '0.2rem'\n      }} className={raiseHandContainerStyles(theme, !canShowLabel)}>\n              <Stack.Item>\n                <Text>{raisedHand.raisedHandOrderPosition}</Text>\n              </Stack.Item>\n              <Stack.Item>\n                <RaisedHandIcon />\n              </Stack.Item>\n            </Stack>}\n      </div>\n    </Stack>;\n};\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  const strings = {\n    ...locale.strings.videoTile,\n    ...props.strings\n  };\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings?.participantStateRinging : props.participantState === 'Hold' ? strings?.participantStateHold : undefined;\n  return undefined;\n};\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n  return withBrackets ? `(${participantString})` : participantString;\n};"]}
+{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DirectionalHint, Icon, IconButton, IContextualMenuProps, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(raise-hand) */\nimport { CallingTheme } from '../theming';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHand } from '../types';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint, tileInfoContainerStyle, participantStateStringStyles } from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\n/* @conditional-compile-remove(raise-hand) */\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateRinging: string;\n  participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * If true, the video tile will show the pin icon.\n   */\n  isPinned?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /* @conditional-compile-remove(raise-hand) */\n  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n  /**\n   * Display custom menu items in the VideoTile's contextual menu.\n   * Uses Fluent UI ContextualMenu.\n   * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n   */\n  contextualMenu?: IContextualMenuProps;\n  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const {\n    text,\n    noVideoAvailableAriaLabel,\n    coinSize,\n    hidePersonaDetails\n  } = props;\n  return <Stack className={mergeStyles({\n    position: 'absolute',\n    height: '100%',\n    width: '100%'\n  })}>\n      <Stack styles={defaultPersonaStyles}>\n        {coinSize && <Persona coinSize={coinSize} hidePersonaDetails={hidePersonaDetails} text={text ?? ''} initialsTextColor=\"white\" aria-label={noVideoAvailableAriaLabel ?? ''} showOverflowTooltip={false} />}\n      </Stack>\n    </Stack>;\n};\nconst defaultPersonaStyles = {\n  root: {\n    margin: 'auto',\n    maxHeight: '100%'\n  }\n};\nconst videoTileMoreMenuIconProps = {\n  iconName: undefined,\n  style: {\n    display: 'none'\n  }\n};\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: {\n    container: {\n      maxWidth: '8rem'\n    }\n  }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  canShowContextMenuButton: boolean;\n}): JSX.Element => {\n  const {\n    contextualMenu,\n    canShowContextMenuButton\n  } = props;\n  if (!contextualMenu) {\n    return <></>;\n  }\n  const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n  return <IconButton data-ui-id=\"video-tile-more-options-button\" styles={moreButtonStyles} menuIconProps={videoTileMoreMenuIconProps} menuProps={{\n    ...videoTileMoreMenuProps,\n    ...contextualMenu\n  }} iconProps={{\n    iconName: optionsIcon\n  }} />;\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    /* @conditional-compile-remove(raise-hand) */\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu\n  } = props;\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n  const locale = useLocale();\n  const theme = useTheme();\n  const isVideoRendered = !!renderElement;\n  const observer = useRef(new ResizeObserver((entries): void => {\n    const {\n      width,\n      height\n    } = entries[0].contentRect;\n    const personaCalcSize = Math.min(width, height) / 3;\n    // we only want to set the persona size if it has changed\n    if (personaCalcSize !== personaSize) {\n      setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n    }\n  }));\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n  const useLongPressProps = useMemo(() => {\n    return {\n      onLongPress: () => {\n        props.onLongTouch?.();\n      },\n      touchEventsOnly: true\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.onLongTouch]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\n  }, []);\n  const placeholderOptions = {\n    userId,\n    text: initialsName ?? displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n  const videoHintWithBorderRadius = mergeStyles(videoHint, {\n    borderRadius: theme.effects.roundedCorner4\n  });\n  const tileInfoStyle = useMemo(() => mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles?.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]);\n  const ids = useIdentifiers();\n  const canShowLabel = showLabel && (displayName || showMuteIndicator && isMuted);\n  const participantStateString = participantStateStringTrampoline(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  /* @conditional-compile-remove(raise-hand) */\n  const callingPalette = ((theme as unknown) as CallingTheme).callingPalette;\n  /* @conditional-compile-remove(raise-hand) */\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n  return <Stack data-ui-id={ids.videoTile} className={mergeStyles(rootStyles, {\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4\n  }, (isSpeaking || /* @conditional-compile-remove(raise-hand) */raisedHand) && {\n    '&::after': {\n      content: `''`,\n      position: 'absolute',\n      border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }, styles?.root)} {...longPressHandlers}>\n      <div ref={videoTileRef} style={{\n      width: '100%',\n      height: '100%'\n    }} {...hoverHandlers} data-is-focusable={true}>\n        {isVideoRendered ? <Stack className={mergeStyles(videoContainerStyles, isMirrored && {\n        transform: 'scaleX(-1)'\n      }, styles?.videoContainer)}>\n            {renderElement}\n          </Stack> : <Stack className={mergeStyles(videoContainerStyles, {\n        opacity: participantStateString ? 0.4 : 1\n      })}>\n            {onRenderPlaceholder ? onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder) : <DefaultPlaceholder {...placeholderOptions} />}\n          </Stack>}\n\n        {}\n        {(canShowLabel || participantStateString) && <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            <Stack horizontal className={tileInfoStyle}>\n              {canShowLabel && <Text className={mergeStyles(displayNameStyle)} title={displayName} style={{\n            color: participantStateString ? theme.palette.neutralSecondary : 'inherit'\n          }} data-ui-id=\"video-tile-display-name\">\n                  {displayName}\n                </Text>}\n              {participantStateString && <Text className={mergeStyles(participantStateStringStyles(theme))}>\n                  {bracketedParticipantString(participantStateString, !!canShowLabel)}\n                </Text>}\n              {showMuteIndicator && isMuted && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileMicOff\" />\n                </Stack>}\n              {}\n              {isPinned && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                </Stack>}\n              <VideoTileMoreOptionsButton contextualMenu={contextualMenu} canShowContextMenuButton={canShowContextMenuButton} />\n            </Stack>\n          </Stack>}\n\n        {children && <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>}\n        {/* @conditional-compile-remove(raise-hand) */raisedHand && <Stack horizontal={true} tokens={{\n        childrenGap: '0.2rem'\n      }} className={raiseHandContainerStyles(theme, !canShowLabel)}>\n              <Stack.Item>\n                <Text>{raisedHand.raisedHandOrderPosition}</Text>\n              </Stack.Item>\n              <Stack.Item>\n                <RaisedHandIcon />\n              </Stack.Item>\n            </Stack>}\n      </div>\n    </Stack>;\n};\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  return undefined;\n};\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n  return withBrackets ? `(${participantString})` : participantString;\n};"]}