@azure/communication-react 1.22.0-beta.1 → 1.23.0-alpha-202412190017

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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gCAAgC,EAAE,MAAM,kBAAkB,CAAC;AA+BpE,MAAM,8CAA8C,GAAG,CAAC,CAAC;AACzD,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC;;GAEG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,CAAC;AACzD,MAAM,wBAAwB,GAAG,CAAC,KAAgC,EAA+B,EAAE;IACjG,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,GAAG,EAAE,EACrB,mBAAmB,GAAG,wBAAwB,EAC9C,kCAAkC,GAAG,8CAA8C,EACnF,MAAM,EACN,wBAAwB,GAAG,EAAE,EAC7B,4BAA4B,GAAG,EAAE,EAClC,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAC9G,MAAM,sBAAsB,GAAG,IAAI,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/E,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACpG,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,qBAAqB,CAAC,CAAC;IACnF,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAA,EAAA,CAAC,CAAC;IACrF,MAAM,mBAAmB,GAAG,MAAM,KAAK,oBAAoB,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IAC5I,IAAI,mBAAmB,GAAG,gCAAgC,CAAC;QACzD,YAAY,EAAE,mBAAmB;QACjC,gBAAgB;QAChB,mBAAmB,EAAE,wBAAwB;QAC7C,mBAAmB,EAAE,mBAAmB;KACzC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC;IACjC,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,IAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,CAAC,CAAC,EAAE,CAAC;YAC1B,mBAAmB,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1F,CAAC;aAAM,CAAC;YACN,mBAAmB,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IACD,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3E,MAAM,8BAA8B,GAAG,gCAAgC,CAAC;QACtE,YAAY,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACtF,gBAAgB,EAAE,gBAAgB;QAClC,mBAAmB,EAAE,4BAA4B;QACjD,mBAAmB,EAAE,kCAAkC;KACxD,CAAC,CAAC;IACH,IAAI,gBAAgB,GAAG,mBAAmB,CAAC;IAC3C,IAAI,2BAA2B,GAAG,8BAA8B,CAAC;IAEjE,mDAAmD;IACnD,8FAA8F;IAC9F,wFAAwF;IACxF,IAAI,2BAA2B,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,MAAM,iCAAiC,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC;QACxF,MAAM,uBAAuB,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC,EAAE,iCAAiC,CAAC,CAAC;QAChG,MAAM,kCAAkC,GAAG,mBAAmB,CAAC,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACxG,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;QACpE,2BAA2B,GAAG,kCAAkC,CAAC;IACnE,CAAC;SAAM,CAAC;QACN,2BAA2B,GAAG,2BAA2B,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;IACxF,CAAC;IACD,OAAO;QACL,gBAAgB;QAChB,2BAA2B;KAC5B,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAgC,EAA+B,EAAE;;IACxG,MAAM,6BAA6B,GAAG,MAAA,KAAK,CAAC,6BAA6B,mCAAI,EAAE,CAAC;IAChF,MAAM,wBAAwB,GAAG,MAAA,KAAK,CAAC,wBAAwB,mCAAI,EAAE,CAAC;IAEtE,kIAAkI;IAClI,wCAAwC;IACxC,MAAM,2BAA2B,GAAG,IAAI,GAAG,CAAC,6BAA6B,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAC5G,MAAM,mBAAmB,GAAoC,CAAC,GAAG,2BAA2B,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,CAAoC,CAAC;IAErO,0DAA0D;IAC1D,MAAM,qBAAqB,GAAG,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/G,MAAM,uBAAuB,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IAC5E,MAAM,kCAAkC,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IACvF,MAAM,yBAAyB,mCAC1B,KAAK;QACR,uGAAuG;QACvG,mBAAmB,EAAE,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,mBAAmB,EAChH,kBAAkB,EAAE,qBAAqB,EACzC,wBAAwB,EAAE,uBAAuB,CAAC,OAAO,EACzD,4BAA4B,EAAE,kCAAkC,CAAC,OAAO,GACzE,CAAC;IACF,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,yBAAyB,CAAC,CAAC;IAClF,uBAAuB,CAAC,OAAO,GAAG,qBAAqB,CAAC,gBAAgB,CAAC;IACzE,kCAAkC,CAAC,OAAO,GAAG,qBAAqB,CAAC,2BAA2B,CAAC;IAC/F,OAAO,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QACtC,gBAAgB,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;QACtE,2BAA2B,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,qBAAqB,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,2BAA2B;KAC3L,CAAC,CAAC,CAAC,qBAAqB,CAAC;AAC5B,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,kBAAmD,EAAmC,EAAE;IACzH,MAAM,iBAAiB,GAAoC,EAAE,CAAC;IAC9D,MAAM,iBAAiB,GAAoC,EAAE,CAAC;IAC9D,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;QAC7B,IAAI,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,EAAE,CAAC;YAC/B,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC,CAAC;IACH,MAAM,8BAA8B,GAAG,iBAAiB,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACnF,OAAO,8BAA8B,CAAC;AACxC,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,gBAA2C,EAAE,yBAAoH,EAAE,qBAA6B,EAAE,eAAyB,EAAE,2BAAsD,EAAE,gBAA2B,EAG1U,EAAE;IACF,MAAM,iBAAiB,GAAG,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE,CAAC;IACjD,IAAI,mBAAmB,GAAG,qBAAqB,CAAC;IAEhD,+BAA+B;IAC/B,MAAM,oCAAoC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,WAAW,0CAAE,WAAW,CAAA,EAAA,CAAC,CAAC;IACvG,MAAM,wCAAwC,GAAG,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,oCAAoC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,MAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC;IACxL,mBAAmB,GAAG,mBAAmB,GAAG,wCAAwC,CAAC,MAAM,CAAC;IAC5F,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QACzC,OAAO,yBAAyB,CAAC,CAAC,EAAE,wCAAwC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,mBAAmB,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9J,CAAC,CAAC,CAAC;IAEH,mCAAmC;IACnC,MAAM,wCAAwC,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACvE,OAAO,2BAA2B,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,WAAW,0CAAE,WAAW,CAAA,EAAA,CAAC,CAAC;IAC5C,MAAM,4CAA4C,GAAG,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,wCAAwC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,MAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAChM,mBAAmB,GAAG,mBAAmB,GAAG,4CAA4C,CAAC,MAAM,CAAC;IAChG,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QAC/D,OAAO,yBAAyB,CAAC,CAAC,EAAE,4CAA4C,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,mBAAmB,EAAE,GAAG,CAAC,CAAC,CAAC;IAClK,CAAC,CAAC,CAAC;IACH,OAAO;QACL,SAAS;QACT,oBAAoB;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,YAAoB,EAAE,iBAAoC,EAAsB,EAAE;;IACjH,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,MAAM;YACT,OAAO,MAAA,iBAAiB,CAAC,YAAY,0CAAE,GAAG,CAAC;QAC7C,KAAK,OAAO;YACV,OAAO,MAAA,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC;QAC9C,KAAK,OAAO;YACV,OAAO,MAAA,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC;QAC9C,KAAK,UAAU;YACb,OAAO,MAAA,iBAAiB,CAAC,gBAAgB,0CAAE,GAAG,CAAC;QACjD,KAAK,WAAW;YACd,OAAO,MAAA,iBAAiB,CAAC,iBAAiB,0CAAE,GAAG,CAAC;IACpD,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,YAAoB,EAAE,iBAAoC,EAAU,EAAE;;IACvG,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,MAAM;YACT,OAAO,MAAA,MAAA,iBAAiB,CAAC,YAAY,0CAAE,UAAU,mCAAI,CAAC,CAAC;QACzD,KAAK,OAAO;YACV,OAAO,MAAA,MAAA,iBAAiB,CAAC,aAAa,0CAAE,UAAU,mCAAI,CAAC,CAAC;QAC1D,KAAK,OAAO;YACV,OAAO,MAAA,MAAA,iBAAiB,CAAC,aAAa,0CAAE,UAAU,mCAAI,CAAC,CAAC;QAC1D,KAAK,UAAU;YACb,OAAO,MAAA,MAAA,iBAAiB,CAAC,gBAAgB,0CAAE,UAAU,mCAAI,CAAC,CAAC;QAC7D,KAAK,WAAW;YACd,OAAO,MAAA,MAAA,iBAAiB,CAAC,iBAAiB,0CAAE,UAAU,mCAAI,CAAC,CAAC;QAC9D;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\nimport { ReactionResources } from '../../..';\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxGridParticipants?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/**\n * @private\n */\nexport const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n  const callingParticipants = remoteParticipants.filter(p => p.state === 'Connecting' || p.state === 'Ringing');\n  const callingParticipantsSet = new Set(callingParticipants.map(p => p.userId));\n  const connectedParticipants = remoteParticipants.filter(p => !callingParticipantsSet.has(p.userId));\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(connectedParticipants);\n  const videoParticipants = remoteParticipants.filter(p => p.videoStream?.isAvailable);\n  const participantsForGrid = layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participantsForGrid,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxGridParticipants\n  }).slice(0, maxGridParticipants);\n  if (layout === 'speaker') {\n    if (dominantSpeakers?.[0]) {\n      newGridParticipants = newGridParticipants.filter(p => p.userId === dominantSpeakers[0]);\n    } else {\n      newGridParticipants = newGridParticipants.slice(1);\n    }\n  }\n  const gridParticipantSet = new Set(newGridParticipants.map(p => p.userId));\n  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(p => !gridParticipantSet.has(p.userId)),\n    dominantSpeakers: dominantSpeakers,\n    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n  let gridParticipants = newGridParticipants;\n  let overflowGalleryParticipants = newOverflowGalleryParticipants;\n\n  // Add the participants being called into the call.\n  // If there are already overflow participants, add these to the array of overflow participants\n  // Otherwise, add the maximum number to the main grid, then put the rest in the overflow\n  if (overflowGalleryParticipants.length === 0) {\n    const numberOfCallingParticipantsInGrid = maxGridParticipants - gridParticipants.length;\n    const gridCallingParticipants = callingParticipants.slice(0, numberOfCallingParticipantsInGrid);\n    const overflowGalleryCallingParticipants = callingParticipants.slice(numberOfCallingParticipantsInGrid);\n    gridParticipants = gridParticipants.concat(gridCallingParticipants);\n    overflowGalleryParticipants = overflowGalleryCallingParticipants;\n  } else {\n    overflowGalleryParticipants = overflowGalleryParticipants.concat(callingParticipants);\n  }\n  return {\n    gridParticipants,\n    overflowGalleryParticipants\n  };\n};\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n\n  // Focussed participants are the participants that are either spotlighted or pinned. Ordered by spotlighted first and then pinned.\n  // A set is used to dedupe participants.\n  const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds));\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet].map(userId => props.remoteParticipants.find(p => p.userId === userId)).filter(p => p !== undefined) as VideoGalleryRemoteParticipant[];\n\n  // Unfocused participants are the rest of the participants\n  const unfocusedParticipants = props.remoteParticipants.filter(p => !focusedParticipantUserIdSet.has(p.userId));\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const organizedParticipantsArgs: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n  const organizedParticipants = getOrganizedParticipants(organizedParticipantsArgs);\n  currentGridParticipants.current = organizedParticipants.gridParticipants;\n  currentOverflowGalleryParticipants.current = organizedParticipants.overflowGalleryParticipants;\n  return focusedParticipants.length > 0 ? {\n    gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n    overflowGalleryParticipants: props.isScreenShareActive ? focusedParticipants.concat(organizedParticipants.overflowGalleryParticipants) : organizedParticipants.overflowGalleryParticipants\n  } : organizedParticipants;\n};\nconst putVideoParticipantsFirst = (remoteParticipants: VideoGalleryRemoteParticipant[]): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach(p => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/**\n * @private\n */\nexport const renderTiles = (gridParticipants: VideoGalleryParticipant[], onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element, maxRemoteVideoStreams: number, indexesToRender: number[], overflowGalleryParticipants: VideoGalleryParticipant[], dominantSpeakers?: string[]): {\n  gridTiles: JSX.Element[];\n  overflowGalleryTiles: JSX.Element[];\n} => {\n  const _dominantSpeakers = dominantSpeakers ?? [];\n  let streamsLeftToRender = maxRemoteVideoStreams;\n\n  // Render the grid participants\n  const participantWithStreamsToRenderInGrid = gridParticipants.filter(p => p?.videoStream?.isAvailable);\n  const dominantSpeakerWithStreamsToRenderInGrid = _dominantSpeakers.filter(userId => participantWithStreamsToRenderInGrid.find(p => p?.userId === userId)).slice(0, streamsLeftToRender);\n  streamsLeftToRender = streamsLeftToRender - dominantSpeakerWithStreamsToRenderInGrid.length;\n  const gridTiles = gridParticipants.map(p => {\n    return onRenderRemoteParticipant(p, dominantSpeakerWithStreamsToRenderInGrid.includes(p.userId) || p.videoStream?.isAvailable && streamsLeftToRender-- > 0);\n  });\n\n  // Render the overflow participants\n  const participantWithStreamsToRenderInOverflow = indexesToRender.map(i => {\n    return overflowGalleryParticipants.at(i);\n  }).filter(p => p?.videoStream?.isAvailable);\n  const dominantSpeakerWithStreamsToRenderInOverflow = _dominantSpeakers.filter(userId => participantWithStreamsToRenderInOverflow.find(p => p?.userId === userId)).slice(0, streamsLeftToRender);\n  streamsLeftToRender = streamsLeftToRender - dominantSpeakerWithStreamsToRenderInOverflow.length;\n  const overflowGalleryTiles = overflowGalleryParticipants.map(p => {\n    return onRenderRemoteParticipant(p, dominantSpeakerWithStreamsToRenderInOverflow.includes(p.userId) || p.videoStream?.isAvailable && streamsLeftToRender-- > 0);\n  });\n  return {\n    gridTiles,\n    overflowGalleryTiles\n  };\n};\n\n/**\n * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const getEmojiFrameCount = (reactionName: string, reactionResources: ReactionResources): number => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.frameCount ?? 0;\n    case 'heart':\n      return reactionResources.heartReaction?.frameCount ?? 0;\n    case 'laugh':\n      return reactionResources.laughReaction?.frameCount ?? 0;\n    case 'applause':\n      return reactionResources.applauseReaction?.frameCount ?? 0;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.frameCount ?? 0;\n    default:\n      return 0;\n  }\n};"]}
+{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\nimport { ReactionResources } from '../../..';\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxGridParticipants?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/**\n * @private\n */\nexport const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n\n  const callingParticipants = remoteParticipants.filter((p) => p.state === 'Connecting' || p.state === 'Ringing');\n\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  const connectedParticipants = remoteParticipants.filter((p) => !callingParticipantsSet.has(p.userId));\n\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(connectedParticipants);\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n  const participantsForGrid =\n    layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participantsForGrid,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxGridParticipants\n  }).slice(0, maxGridParticipants);\n\n  if (layout === 'speaker') {\n    if (dominantSpeakers?.[0]) {\n      newGridParticipants = newGridParticipants.filter((p) => p.userId === dominantSpeakers[0]);\n    } else {\n      newGridParticipants = newGridParticipants.slice(1);\n    }\n  }\n\n  const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));\n\n  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter((p) => !gridParticipantSet.has(p.userId)),\n    dominantSpeakers: dominantSpeakers,\n    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n\n  let gridParticipants = newGridParticipants;\n  let overflowGalleryParticipants = newOverflowGalleryParticipants;\n\n  // Add the participants being called into the call.\n  // If there are already overflow participants, add these to the array of overflow participants\n  // Otherwise, add the maximum number to the main grid, then put the rest in the overflow\n  if (overflowGalleryParticipants.length === 0) {\n    const numberOfCallingParticipantsInGrid = maxGridParticipants - gridParticipants.length;\n    const gridCallingParticipants = callingParticipants.slice(0, numberOfCallingParticipantsInGrid);\n    const overflowGalleryCallingParticipants = callingParticipants.slice(numberOfCallingParticipantsInGrid);\n    gridParticipants = gridParticipants.concat(gridCallingParticipants);\n    overflowGalleryParticipants = overflowGalleryCallingParticipants;\n  } else {\n    overflowGalleryParticipants = overflowGalleryParticipants.concat(callingParticipants);\n  }\n\n  return { gridParticipants, overflowGalleryParticipants };\n};\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n\n  // Focussed participants are the participants that are either spotlighted or pinned. Ordered by spotlighted first and then pinned.\n  // A set is used to dedupe participants.\n  const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds));\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet]\n    .map((userId) => props.remoteParticipants.find((p) => p.userId === userId))\n    .filter((p) => p !== undefined) as VideoGalleryRemoteParticipant[];\n\n  // Unfocused participants are the rest of the participants\n  const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const organizedParticipantsArgs: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n\n  const organizedParticipants = getOrganizedParticipants(organizedParticipantsArgs);\n\n  currentGridParticipants.current = organizedParticipants.gridParticipants;\n  currentOverflowGalleryParticipants.current = organizedParticipants.overflowGalleryParticipants;\n\n  return focusedParticipants.length > 0\n    ? {\n        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n        overflowGalleryParticipants: props.isScreenShareActive\n          ? focusedParticipants.concat(organizedParticipants.overflowGalleryParticipants)\n          : organizedParticipants.overflowGalleryParticipants\n      }\n    : organizedParticipants;\n};\n\nconst putVideoParticipantsFirst = (\n  remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach((p) => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/**\n * @private\n */\nexport const renderTiles = (\n  gridParticipants: VideoGalleryParticipant[],\n  onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element,\n  maxRemoteVideoStreams: number,\n  indexesToRender: number[],\n  overflowGalleryParticipants: VideoGalleryParticipant[],\n  dominantSpeakers?: string[]\n): { gridTiles: JSX.Element[]; overflowGalleryTiles: JSX.Element[] } => {\n  const _dominantSpeakers = dominantSpeakers ?? [];\n  let streamsLeftToRender = maxRemoteVideoStreams;\n\n  // Render the grid participants\n  const participantWithStreamsToRenderInGrid = gridParticipants.filter((p) => p?.videoStream?.isAvailable);\n  const dominantSpeakerWithStreamsToRenderInGrid = _dominantSpeakers\n    .filter((userId) => participantWithStreamsToRenderInGrid.find((p) => p?.userId === userId))\n    .slice(0, streamsLeftToRender);\n  streamsLeftToRender = streamsLeftToRender - dominantSpeakerWithStreamsToRenderInGrid.length;\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      dominantSpeakerWithStreamsToRenderInGrid.includes(p.userId) ||\n        (p.videoStream?.isAvailable && streamsLeftToRender-- > 0)\n    );\n  });\n\n  // Render the overflow participants\n  const participantWithStreamsToRenderInOverflow = indexesToRender\n    .map((i) => {\n      return overflowGalleryParticipants.at(i);\n    })\n    .filter((p) => p?.videoStream?.isAvailable);\n  const dominantSpeakerWithStreamsToRenderInOverflow = _dominantSpeakers\n    .filter((userId) => participantWithStreamsToRenderInOverflow.find((p) => p?.userId === userId))\n    .slice(0, streamsLeftToRender);\n  streamsLeftToRender = streamsLeftToRender - dominantSpeakerWithStreamsToRenderInOverflow.length;\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      dominantSpeakerWithStreamsToRenderInOverflow.includes(p.userId) ||\n        (p.videoStream?.isAvailable && streamsLeftToRender-- > 0)\n    );\n  });\n\n  return { gridTiles, overflowGalleryTiles };\n};\n\n/**\n * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const getEmojiFrameCount = (reactionName: string, reactionResources: ReactionResources): number => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.frameCount ?? 0;\n    case 'heart':\n      return reactionResources.heartReaction?.frameCount ?? 0;\n    case 'laugh':\n      return reactionResources.laughReaction?.frameCount ?? 0;\n    case 'applause':\n      return reactionResources.applauseReaction?.frameCount ?? 0;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.frameCount ?? 0;\n    default:\n      return 0;\n  }\n};\n"]}

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

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

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

@@ -19,6 +19,8 @@ import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocal
 import { useId } from '@fluentui/react-hooks';
 import { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';
 import { FocusedContentLayout } from './VideoGallery/FocusContentLayout';
+/* @conditional-compile-remove(large-gallery) */
+import { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -65,7 +67,9 @@ export const VideoGallery = (props) => {
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
-    const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer' ? remoteVideoTileMenu.hostId : undefined;
+    const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'
+        ? remoteVideoTileMenu.hostId
+        : undefined;
     const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
     const localTileNotInGrid = (layout === 'floatingLocalVideo' || layout === 'speaker') && remoteParticipants.length > 0;
     const containerRef = useRef(null);
@@ -75,24 +79,27 @@ export const VideoGallery = (props) => {
     const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState([]);
     const [selectedScalingModeState, setselectedScalingModeState] = React.useState({});
     const onUpdateScalingMode = useCallback((remoteUserId, scalingMode) => {
-        setselectedScalingModeState(current => (Object.assign(Object.assign({}, current), { [remoteUserId]: {
+        setselectedScalingModeState((current) => (Object.assign(Object.assign({}, current), { [remoteUserId]: {
                 scalingMode,
                 isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
             } })));
     }, [remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored]);
     useEffect(() => {
         var _a;
-        (_a = props.pinnedParticipants) === null || _a === void 0 ? void 0 : _a.forEach(pinParticipant => {
+        (_a = props.pinnedParticipants) === null || _a === void 0 ? void 0 : _a.forEach((pinParticipant) => {
             var _a;
-            if (!((_a = props.remoteParticipants) === null || _a === void 0 ? void 0 : _a.find(t => t.userId === pinParticipant))) {
+            if (!((_a = props.remoteParticipants) === null || _a === void 0 ? void 0 : _a.find((t) => t.userId === pinParticipant))) {
                 // warning will be logged in the console when invalid participant id is passed in pinned participants
                 console.warn('Invalid pinned participant UserId :' + pinParticipant);
             }
         });
     }, [props.pinnedParticipants, props.remoteParticipants]);
     // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
-    const pinnedParticipants = useMemo(() => { var _a; return (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState.filter(pinnedParticipantId => remoteParticipants.find(remoteParticipant => remoteParticipant.userId === pinnedParticipantId)); }, [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]);
-    const showLocalVideoTileLabel = !(localTileNotInGrid && isNarrow || localVideoTileSize === '9:16') || layout === 'default';
+    const pinnedParticipants = useMemo(() => {
+        var _a;
+        return (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState.filter((pinnedParticipantId) => remoteParticipants.find((remoteParticipant) => remoteParticipant.userId === pinnedParticipantId));
+    }, [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]);
+    const showLocalVideoTileLabel = !((localTileNotInGrid && isNarrow) || localVideoTileSize === '9:16') || layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -106,18 +113,43 @@ export const VideoGallery = (props) => {
         }
         const isSpotlighted = !!localParticipant.spotlight;
         const localVideoTileStyles = concatStyleSets(localTileNotInGrid ? floatingLocalVideoTileStyle : {}, {
-            root: {
-                borderRadius: theme.effects.roundedCorner4
-            }
+            root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         const showDisplayNameTrampoline = () => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
             return isNarrow ? '' : strings.localVideoLabel;
         };
-        return React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key" },
-            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual' : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1, isScreenSharingOn: localParticipant.isScreenSharingOn }));
-    }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, styles === null || styles === void 0 ? void 0 : styles.localVideo, theme.effects.roundedCorner4, localVideoTileSize, layout, showLocalVideoTileLabel, spotlightedParticipants, onStartLocalSpotlight, onStopLocalSpotlight, maxParticipantsToSpotlight, remoteVideoTileMenu, strings, drawerMenuHostId, reactionResources, videoTilesOptions, remoteParticipants.length]);
+        return (React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key" },
+            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1, isScreenSharingOn: localParticipant.isScreenSharingOn })));
+    }, [
+        isNarrow,
+        localParticipant,
+        localVideoCameraCycleButtonProps,
+        localVideoViewOptions,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        onRenderAvatar,
+        onRenderLocalVideoTile,
+        localTileNotInGrid,
+        showCameraSwitcherInLocalPreview,
+        showMuteIndicator,
+        styles === null || styles === void 0 ? void 0 : styles.localVideo,
+        theme.effects.roundedCorner4,
+        localVideoTileSize,
+        layout,
+        showLocalVideoTileLabel,
+        spotlightedParticipants,
+        onStartLocalSpotlight,
+        onStopLocalSpotlight,
+        maxParticipantsToSpotlight,
+        remoteVideoTileMenu,
+        strings,
+        drawerMenuHostId,
+        reactionResources,
+        videoTilesOptions,
+        remoteParticipants.length
+    ]);
     const onPinParticipant = useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
             return;
@@ -128,7 +160,7 @@ export const VideoGallery = (props) => {
         onPinParticipantHandler === null || onPinParticipantHandler === void 0 ? void 0 : onPinParticipantHandler(userId);
     }, [pinnedParticipants, setPinnedParticipantsState, onPinParticipantHandler]);
     const onUnpinParticipant = useCallback((userId) => {
-        setPinnedParticipantsState(pinnedParticipantsState.filter(p => p !== userId));
+        setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));
         onUnpinParticipantHandler === null || onUnpinParticipantHandler === void 0 ? void 0 : onUnpinParticipantHandler(userId);
     }, [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]);
     const [announcementString, setAnnouncementString] = React.useState('');
@@ -155,17 +187,53 @@ export const VideoGallery = (props) => {
             if (selectedScalingMode) {
                 return selectedScalingMode;
             }
-            return (remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.streamSize) && ((_a = remoteVideoStream.streamSize) === null || _a === void 0 ? void 0 : _a.height) > ((_b = remoteVideoStream.streamSize) === null || _b === void 0 ? void 0 : _b.width) ? {
-                scalingMode: 'Fit',
-                isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
-            } : remoteVideoViewOptions;
+            return (remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.streamSize) &&
+                ((_a = remoteVideoStream.streamSize) === null || _a === void 0 ? void 0 : _a.height) > ((_b = remoteVideoStream.streamSize) === null || _b === void 0 ? void 0 : _b.width)
+                ? {
+                    scalingMode: 'Fit',
+                    isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
+                }
+                : remoteVideoViewOptions;
         };
-        return React.createElement(_RemoteVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, streamId: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.id, key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: createViewOptions(), onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 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, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartRemoteSpotlight, onStopSpotlight: onStopRemoteSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources, onMuteParticipant: onMuteParticipant });
-    }, [onCreateRemoteStreamView, onDisposeRemoteVideoStreamView, remoteVideoViewOptions, localParticipant, onRenderAvatar, showMuteIndicator, strings, drawerMenuHostId, remoteVideoTileMenu, selectedScalingModeState, pinnedParticipants, onPinParticipant, onUnpinParticipant, toggleAnnouncerString, onUpdateScalingMode, spotlightedParticipants, onStartRemoteSpotlight, onStopRemoteSpotlight, maxParticipantsToSpotlight, onMuteParticipant, reactionResources, videoTilesOptions]);
-    const screenShareParticipant = remoteParticipants.find(participant => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
-    const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant, renderElement: (_a = localParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, isAvailable: (_b = localParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isAvailable, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalScreenShareStreamView: onDisposeLocalScreenShareStreamView });
-    const remoteScreenShareComponent = screenShareParticipant && React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources }));
-    const screenShareComponent = remoteScreenShareComponent ? remoteScreenShareComponent : localParticipant.isScreenSharingOn ? localScreenShareStreamComponent : undefined;
+        return (React.createElement(_RemoteVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, streamId: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.id, key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: createViewOptions(), onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 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, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartRemoteSpotlight, onStopSpotlight: onStopRemoteSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources, onMuteParticipant: onMuteParticipant }));
+    }, [
+        onCreateRemoteStreamView,
+        onDisposeRemoteVideoStreamView,
+        remoteVideoViewOptions,
+        localParticipant,
+        onRenderAvatar,
+        showMuteIndicator,
+        strings,
+        drawerMenuHostId,
+        remoteVideoTileMenu,
+        selectedScalingModeState,
+        pinnedParticipants,
+        onPinParticipant,
+        onUnpinParticipant,
+        toggleAnnouncerString,
+        onUpdateScalingMode,
+        spotlightedParticipants,
+        onStartRemoteSpotlight,
+        onStopRemoteSpotlight,
+        maxParticipantsToSpotlight,
+        onMuteParticipant,
+        reactionResources,
+        videoTilesOptions
+    ]);
+    const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const localScreenShareStreamComponent = (React.createElement(LocalScreenShare, { localParticipant: localParticipant, renderElement: (_a = localParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, isAvailable: (_b = localParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isAvailable, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalScreenShareStreamView: onDisposeLocalScreenShareStreamView }));
+    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources })));
+    const screenShareComponent = remoteScreenShareComponent
+        ? remoteScreenShareComponent
+        : localParticipant.isScreenSharingOn
+            ? localScreenShareStreamComponent
+            : undefined;
     const layoutProps = useMemo(() => ({
         remoteParticipants,
         localParticipant,
@@ -182,7 +250,24 @@ export const VideoGallery = (props) => {
         overflowGalleryPosition,
         localVideoTileSize,
         spotlightedParticipantUserIds: spotlightedParticipants
-    }), [remoteParticipants, localParticipant, screenShareComponent, showCameraSwitcherInLocalPreview, maxRemoteVideoStreams, dominantSpeakers, styles, localVideoTile, containerWidth, containerHeight, onRenderRemoteVideoTile, defaultOnRenderVideoTile, pinnedParticipants, overflowGalleryPosition, localVideoTileSize, spotlightedParticipants]);
+    }), [
+        remoteParticipants,
+        localParticipant,
+        screenShareComponent,
+        showCameraSwitcherInLocalPreview,
+        maxRemoteVideoStreams,
+        dominantSpeakers,
+        styles,
+        localVideoTile,
+        containerWidth,
+        containerHeight,
+        onRenderRemoteVideoTile,
+        defaultOnRenderVideoTile,
+        pinnedParticipants,
+        overflowGalleryPosition,
+        localVideoTileSize,
+        spotlightedParticipants
+    ]);
     const videoGalleryLayout = useMemo(() => {
         if (screenShareParticipant && layout === 'focusedContent') {
             return React.createElement(FocusedContentLayout, Object.assign({}, layoutProps));
@@ -193,12 +278,16 @@ export const VideoGallery = (props) => {
         if (layout === 'speaker') {
             return React.createElement(SpeakerVideoLayout, Object.assign({}, layoutProps));
         }
+        /* @conditional-compile-remove(large-gallery) */
+        if (layout === 'largeGallery') {
+            return React.createElement(LargeGalleryLayout, Object.assign({}, layoutProps));
+        }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [layout, layoutProps, screenShareParticipant]);
-    return React.createElement("div", { 
+    return (React.createElement("div", { 
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
         id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) },
         videoGalleryLayout,
-        React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" }));
+        React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" })));
 };
 //# sourceMappingURL=VideoGallery.js.map

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":"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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';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n\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 to show when local screen share stream is loading */\n  localScreenShareLoadingMessage: 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  /** Aria-label for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementAriaLabel: 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  /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */\n  startSpotlightVideoTileMenuLabel: string;\n  /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */\n  addSpotlightVideoTileMenuLabel: string;\n  /** Menu title for start spotlight menu item when spotlight limit is reached */\n  spotlightLimitReachedMenuTitle: string;\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */\n  stopSpotlightVideoTileMenuLabel: string;\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */\n  stopSpotlightOnSelfVideoTileMenuLabel: string;\n  /** String for the attendee role */\n  attendeeRole: string;\n  /** Menu text shown in Video Tile contextual menu to mute a remote participant */\n  muteParticipantMenuItemLabel: string;\n  /** Text shown when waiting for others to join the call */\n  waitingScreenText: 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  /** Styles for the vertical gallery */\n  verticalGallery?: VerticalGalleryStyles;\n}\n\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/**\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 dispose a local screen share stream view */\n  onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n  /** Callback to render a participant 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   * List of spotlighted participant userIds.\n   */\n  spotlightedParticipants?: string[];\n  /**\n   * This callback is to start spotlight for local participant video tile.\n   */\n  onStartLocalSpotlight?: () => Promise<void>;\n  /**\n   * This callback is to stop spotlight for local participant video tile.\n   */\n  onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  /**\n   * This callback is to start spotlight for remote participant video tiles.\n   */\n  onStopLocalSpotlight?: () => Promise<void>;\n  /**\n   * This callback is to stop spotlight for remote participant video tiles.\n   */\n  onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  /**\n   * Maximum participants that can be spotlighted\n   */\n  maxParticipantsToSpotlight?: number;\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n  /**\n   * Determines the layout of the overflowGallery inside the VideoGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\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   * Reaction resources for like, heart, laugh, applause and surprised.\n   */\n  reactionResources?: ReactionResources;\n  /**\n   * Additional Options for Video Tiles\n   */\n  videoTilesOptions?: VideoTilesOptions;\n  /**\n   * This callback is to mute a remote participant\n   */\n  onMuteParticipant?: (userId: string) => Promise<void>;\n}\n\n/**\n * Options that apply to all Video Tiles in the {@link VideoGallery}\n *\n * @public\n */\nexport interface VideoTilesOptions {\n  /**\n   * Whether to always show the label background for the video tile\n   */\n  alwaysShowLabelBackground?: boolean;\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    onDisposeLocalScreenShareStreamView,\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    overflowGalleryPosition = 'horizontalBottom',\n    localVideoTileSize = 'followDeviceOrientation',\n    spotlightedParticipants,\n    onStartLocalSpotlight,\n    onStartRemoteSpotlight,\n    onStopLocalSpotlight,\n    onStopRemoteSpotlight,\n    maxParticipantsToSpotlight,\n    reactionResources,\n    videoTilesOptions,\n    onMuteParticipant\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 = useMemo(() => props.pinnedParticipants ?? pinnedParticipantsState.filter(pinnedParticipantId => remoteParticipants.find(remoteParticipant => remoteParticipant.userId === pinnedParticipantId)), [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]);\n  const showLocalVideoTileLabel = !(localTileNotInGrid && isNarrow || localVideoTileSize === '9:16') || layout === 'default';\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element | undefined => {\n    if (localVideoTileSize === 'hidden') {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n    const isSpotlighted = !!localParticipant.spotlight;\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\">\n        <_LocalVideoTile alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground} 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} raisedHand={localParticipant.raisedHand} reaction={localParticipant.reaction} spotlightedParticipantUserIds={spotlightedParticipants} isSpotlighted={isSpotlighted} onStartSpotlight={onStartLocalSpotlight} onStopSpotlight={onStopLocalSpotlight} maxParticipantsToSpotlight={maxParticipantsToSpotlight} menuKind={remoteVideoTileMenu ? remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual' : undefined} drawerMenuHostId={drawerMenuHostId} strings={strings} reactionResources={reactionResources} participantsCount={remoteParticipants.length + 1} isScreenSharingOn={localParticipant.isScreenSharingOn} />\n      </Stack>;\n  }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, styles?.localVideo, theme.effects.roundedCorner4, localVideoTileSize, layout, showLocalVideoTileLabel, spotlightedParticipants, onStartLocalSpotlight, onStopLocalSpotlight, maxParticipantsToSpotlight, remoteVideoTileMenu, strings, drawerMenuHostId, reactionResources, videoTilesOptions, remoteParticipants.length]);\n  const onPinParticipant = useCallback((userId: string) => {\n    if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n      return;\n    }\n    if (!pinnedParticipants.includes(userId)) {\n      setPinnedParticipantsState(pinnedParticipants.concat(userId));\n    }\n    onPinParticipantHandler?.(userId);\n  }, [pinnedParticipants, 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 isSpotlighted = !!participant.spotlight;\n    isPinned = isSpotlighted ? false : isPinned;\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 alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground} streamId={remoteVideoStream?.id} 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} 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} spotlightedParticipantUserIds={spotlightedParticipants} isSpotlighted={isSpotlighted} onStartSpotlight={onStartRemoteSpotlight} onStopSpotlight={onStopRemoteSpotlight} maxParticipantsToSpotlight={maxParticipantsToSpotlight} reactionResources={reactionResources} onMuteParticipant={onMuteParticipant} />;\n  }, [onCreateRemoteStreamView, onDisposeRemoteVideoStreamView, remoteVideoViewOptions, localParticipant, onRenderAvatar, showMuteIndicator, strings, drawerMenuHostId, remoteVideoTileMenu, selectedScalingModeState, pinnedParticipants, onPinParticipant, onUnpinParticipant, toggleAnnouncerString, onUpdateScalingMode, spotlightedParticipants, onStartRemoteSpotlight, onStopRemoteSpotlight, maxParticipantsToSpotlight, onMuteParticipant, reactionResources, videoTilesOptions]);\n  const screenShareParticipant = remoteParticipants.find(participant => participant.screenShareStream?.isAvailable);\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} renderElement={localParticipant.screenShareStream?.renderElement} isAvailable={localParticipant.screenShareStream?.isAvailable} onCreateLocalStreamView={onCreateLocalStreamView} onDisposeLocalScreenShareStreamView={onDisposeLocalScreenShareStreamView} />;\n  const remoteScreenShareComponent = screenShareParticipant && <RemoteScreenShare {...screenShareParticipant} renderElement={screenShareParticipant.screenShareStream?.renderElement} onCreateRemoteStreamView={onCreateRemoteStreamView} onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView} isReceiving={screenShareParticipant.screenShareStream?.isReceiving} participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]} localParticipant={localParticipant} remoteParticipants={remoteParticipants} reactionResources={reactionResources} />;\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    overflowGalleryPosition,\n    localVideoTileSize,\n    spotlightedParticipantUserIds: spotlightedParticipants\n  }), [remoteParticipants, localParticipant, screenShareComponent, showCameraSwitcherInLocalPreview, maxRemoteVideoStreams, dominantSpeakers, styles, localVideoTile, containerWidth, containerHeight, onRenderRemoteVideoTile, defaultOnRenderVideoTile, pinnedParticipants, overflowGalleryPosition, localVideoTileSize, spotlightedParticipants]);\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};"]}
+{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../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 {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} 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';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\n/* @conditional-compile-remove(large-gallery) */\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n\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 to show when local screen share stream is loading */\n  localScreenShareLoadingMessage: 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  /** Aria-label for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementAriaLabel: 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  /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */\n  startSpotlightVideoTileMenuLabel: string;\n  /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */\n  addSpotlightVideoTileMenuLabel: string;\n  /** Menu title for start spotlight menu item when spotlight limit is reached */\n  spotlightLimitReachedMenuTitle: string;\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */\n  stopSpotlightVideoTileMenuLabel: string;\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */\n  stopSpotlightOnSelfVideoTileMenuLabel: string;\n  /** String for the attendee role */\n  attendeeRole: string;\n  /** Menu text shown in Video Tile contextual menu to mute a remote participant */\n  muteParticipantMenuItemLabel: string;\n  /** Text shown when waiting for others to join the call */\n  waitingScreenText: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout =\n  | 'default'\n  | 'floatingLocalVideo'\n  | 'speaker'\n  | /* @conditional-compile-remove(large-gallery) */ 'largeGallery'\n  | '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  /** Styles for the vertical gallery */\n  verticalGallery?: VerticalGalleryStyles;\n}\n\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/**\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?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => 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 dispose a local screen share stream view */\n  onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n  /** Callback to render a participant 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   * List of spotlighted participant userIds.\n   */\n  spotlightedParticipants?: string[];\n  /**\n   * This callback is to start spotlight for local participant video tile.\n   */\n  onStartLocalSpotlight?: () => Promise<void>;\n  /**\n   * This callback is to stop spotlight for local participant video tile.\n   */\n  onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  /**\n   * This callback is to start spotlight for remote participant video tiles.\n   */\n  onStopLocalSpotlight?: () => Promise<void>;\n  /**\n   * This callback is to stop spotlight for remote participant video tiles.\n   */\n  onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  /**\n   * Maximum participants that can be spotlighted\n   */\n  maxParticipantsToSpotlight?: number;\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n  /**\n   * Determines the layout of the overflowGallery inside the VideoGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\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   * Reaction resources for like, heart, laugh, applause and surprised.\n   */\n  reactionResources?: ReactionResources;\n  /**\n   * Additional Options for Video Tiles\n   */\n  videoTilesOptions?: VideoTilesOptions;\n  /**\n   * This callback is to mute a remote participant\n   */\n  onMuteParticipant?: (userId: string) => Promise<void>;\n}\n\n/**\n * Options that apply to all Video Tiles in the {@link VideoGallery}\n *\n * @public\n */\nexport interface VideoTilesOptions {\n  /**\n   * Whether to always show the label background for the video tile\n   */\n  alwaysShowLabelBackground?: boolean;\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    onDisposeLocalScreenShareStreamView,\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    overflowGalleryPosition = 'horizontalBottom',\n    localVideoTileSize = 'followDeviceOrientation',\n    spotlightedParticipants,\n    onStartLocalSpotlight,\n    onStartRemoteSpotlight,\n    onStopLocalSpotlight,\n    onStopRemoteSpotlight,\n    maxParticipantsToSpotlight,\n    reactionResources,\n    videoTilesOptions,\n    onMuteParticipant\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n  const drawerMenuHostIdFromProp =\n    remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n      ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n      : undefined;\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n  const localTileNotInGrid = (layout === 'floatingLocalVideo' || layout === 'speaker') && remoteParticipants.length > 0;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n    {}\n  );\n\n  const onUpdateScalingMode = useCallback(\n    (remoteUserId: string, scalingMode: ViewScalingMode) => {\n      setselectedScalingModeState((current) => ({\n        ...current,\n        [remoteUserId]: {\n          scalingMode,\n          isMirrored: remoteVideoViewOptions?.isMirrored\n        }\n      }));\n    },\n    [remoteVideoViewOptions?.isMirrored]\n  );\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 = useMemo(\n    () =>\n      props.pinnedParticipants ??\n      pinnedParticipantsState.filter((pinnedParticipantId) =>\n        remoteParticipants.find((remoteParticipant) => remoteParticipant.userId === pinnedParticipantId)\n      ),\n    [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]\n  );\n\n  const showLocalVideoTileLabel =\n    !((localTileNotInGrid && isNarrow) || localVideoTileSize === '9:16') || layout === 'default';\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element | undefined => {\n    if (localVideoTileSize === 'hidden') {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const isSpotlighted = !!localParticipant.spotlight;\n\n    const localVideoTileStyles = concatStyleSets(\n      localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n    const showDisplayNameTrampoline = (): string => {\n      return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n      return isNarrow ? '' : strings.localVideoLabel;\n    };\n\n    return (\n      <Stack styles={localVideoTileContainerStyles} key=\"local-video-tile-key\">\n        <_LocalVideoTile\n          alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n          userId={localParticipant.userId}\n          onCreateLocalStreamView={onCreateLocalStreamView}\n          onDisposeLocalStreamView={onDisposeLocalStreamView}\n          isAvailable={localParticipant?.videoStream?.isAvailable}\n          isMuted={localParticipant.isMuted}\n          renderElement={localParticipant?.videoStream?.renderElement}\n          displayName={showDisplayNameTrampoline()}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={showLocalVideoTileLabel}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n          raisedHand={localParticipant.raisedHand}\n          reaction={localParticipant.reaction}\n          spotlightedParticipantUserIds={spotlightedParticipants}\n          isSpotlighted={isSpotlighted}\n          onStartSpotlight={onStartLocalSpotlight}\n          onStopSpotlight={onStopLocalSpotlight}\n          maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n          menuKind={remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined}\n          drawerMenuHostId={drawerMenuHostId}\n          strings={strings}\n          reactionResources={reactionResources}\n          participantsCount={remoteParticipants.length + 1}\n          isScreenSharingOn={localParticipant.isScreenSharingOn}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    localTileNotInGrid,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    styles?.localVideo,\n    theme.effects.roundedCorner4,\n    localVideoTileSize,\n    layout,\n    showLocalVideoTileLabel,\n    spotlightedParticipants,\n    onStartLocalSpotlight,\n    onStopLocalSpotlight,\n    maxParticipantsToSpotlight,\n    remoteVideoTileMenu,\n    strings,\n    drawerMenuHostId,\n    reactionResources,\n    videoTilesOptions,\n    remoteParticipants.length\n  ]);\n\n  const onPinParticipant = useCallback(\n    (userId: string) => {\n      if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n        return;\n      }\n      if (!pinnedParticipants.includes(userId)) {\n        setPinnedParticipantsState(pinnedParticipants.concat(userId));\n      }\n      onPinParticipantHandler?.(userId);\n    },\n    [pinnedParticipants, setPinnedParticipantsState, onPinParticipantHandler]\n  );\n  const onUnpinParticipant = useCallback(\n    (userId: string) => {\n      setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n      onUnpinParticipantHandler?.(userId);\n    },\n    [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n  );\n\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(\n    (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    },\n    [setAnnouncementString]\n  );\n\n  const defaultOnRenderVideoTile = useCallback(\n    (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 isSpotlighted = !!participant.spotlight;\n      isPinned = isSpotlighted ? false : isPinned;\n\n      const createViewOptions = (): VideoStreamOptions | undefined => {\n        if (selectedScalingMode) {\n          return selectedScalingMode;\n        }\n        return remoteVideoStream?.streamSize &&\n          remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n          ? ({\n              scalingMode: 'Fit',\n              isMirrored: remoteVideoViewOptions?.isMirrored\n            } as VideoStreamOptions)\n          : remoteVideoViewOptions;\n      };\n\n      return (\n        <_RemoteVideoTile\n          alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n          streamId={remoteVideoStream?.id}\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={createViewOptions()}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          participantState={participant.state}\n          menuKind={\n            participant.userId === localParticipant.userId\n              ? undefined\n              : remoteVideoTileMenu\n                ? remoteVideoTileMenu.kind === 'drawer'\n                  ? 'drawer'\n                  : 'contextual'\n                : undefined\n          }\n          drawerMenuHostId={drawerMenuHostId}\n          onPinParticipant={onPinParticipant}\n          onUnpinParticipant={onUnpinParticipant}\n          onUpdateScalingMode={onUpdateScalingMode}\n          isPinned={isPinned}\n          disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n          toggleAnnouncerString={toggleAnnouncerString}\n          spotlightedParticipantUserIds={spotlightedParticipants}\n          isSpotlighted={isSpotlighted}\n          onStartSpotlight={onStartRemoteSpotlight}\n          onStopSpotlight={onStopRemoteSpotlight}\n          maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n          reactionResources={reactionResources}\n          onMuteParticipant={onMuteParticipant}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteVideoStreamView,\n      remoteVideoViewOptions,\n      localParticipant,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      drawerMenuHostId,\n      remoteVideoTileMenu,\n      selectedScalingModeState,\n      pinnedParticipants,\n      onPinParticipant,\n      onUnpinParticipant,\n      toggleAnnouncerString,\n      onUpdateScalingMode,\n      spotlightedParticipants,\n      onStartRemoteSpotlight,\n      onStopRemoteSpotlight,\n      maxParticipantsToSpotlight,\n      onMuteParticipant,\n      reactionResources,\n      videoTilesOptions\n    ]\n  );\n\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n  const localScreenShareStreamComponent = (\n    <LocalScreenShare\n      localParticipant={localParticipant}\n      renderElement={localParticipant.screenShareStream?.renderElement}\n      isAvailable={localParticipant.screenShareStream?.isAvailable}\n      onCreateLocalStreamView={onCreateLocalStreamView}\n      onDisposeLocalScreenShareStreamView={onDisposeLocalScreenShareStreamView}\n    />\n  );\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n      participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n      localParticipant={localParticipant}\n      remoteParticipants={remoteParticipants}\n      reactionResources={reactionResources}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n      ? localScreenShareStreamComponent\n      : undefined;\n\n  const layoutProps = useMemo<LayoutProps>(\n    () => ({\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      overflowGalleryPosition,\n      localVideoTileSize,\n      spotlightedParticipantUserIds: spotlightedParticipants\n    }),\n    [\n      remoteParticipants,\n      localParticipant,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      pinnedParticipants,\n      overflowGalleryPosition,\n      localVideoTileSize,\n      spotlightedParticipants\n    ]\n  );\n\n  const videoGalleryLayout = useMemo(() => {\n    if (screenShareParticipant && layout === 'focusedContent') {\n      return <FocusedContentLayout {...layoutProps} />;\n    }\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n\n    if (layout === 'speaker') {\n      return <SpeakerVideoLayout {...layoutProps} />;\n    }\n    /* @conditional-compile-remove(large-gallery) */\n    if (layout === 'largeGallery') {\n      return <LargeGalleryLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps, screenShareParticipant]);\n\n  return (\n    <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}\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n    >\n      {videoGalleryLayout}\n      <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n    </div>\n  );\n};\n"]}

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

@@ -15,6 +15,8 @@ export interface VideoTileStrings {
     participantStateRinging: string;
     /** String for displaying the Hold state of the remote participant */
     participantStateHold: string;
+    /** String for displaying the reconnecting state of the remote participant */
+    participantReconnecting?: string;
     /** String for the announcement of the muted state of the participant when muted */
     moreOptionsParticipantMutedStateMutedAriaLabel: string;
     /** String for the announcement of the unmuted state of the participant when unmuted */