@azure/communication-react 1.4.3-alpha-202301140013.0 → 1.4.3-alpha-202301180013.0

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

@@ -4,10 +4,7 @@ import { useCallback, useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
 const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
-/**
- * @private
- */
-export const useFloatingLocalVideoLayout = (props) => {
+const _useOrganizedParticipants = (props) => {
     var _a, _b;
     const visibleVideoParticipants = useRef([]);
     const visibleAudioParticipants = useRef([]);
@@ -69,10 +66,9 @@ export const useFloatingLocalVideoLayout = (props) => {
     const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
     return { gridParticipants, horizontalGalleryParticipants };
 };
-/**
- * @private
- */
-export const usePinnedParticipantLayout = (props) => {
+/* @conditional-compile-remove(pinned-participants) */
+const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
+    var _a;
     // map remote participants by userId
     const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
         map[remoteParticipant.userId] = remoteParticipant;
@@ -82,7 +78,7 @@ export const usePinnedParticipantLayout = (props) => {
     let pinnedParticipantsWithVideoOnCount = 0;
     // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
     const pinnedParticipants = [];
-    props.pinnedParticipantUserIds.forEach((id) => {
+    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
         var _a;
         const pinnedParticipant = remoteParticipantMap[id];
         if (pinnedParticipant) {
@@ -95,22 +91,31 @@ export const usePinnedParticipantLayout = (props) => {
     // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
     const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
     const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
-    const floatingLocalVideoLayoutProps = Object.assign(Object.assign({}, props), { 
+    const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
         // if there are pinned participants then we should only consider unpinned participants
         remoteParticipants: unpinnedParticipants, 
         // if there is a maximum of remote video streams we need to subtract pinned participants with video
         maxRemoteVideoStreams: props.maxRemoteVideoStreams
             ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount
             : undefined });
-    const floatingLocalVideoLayout = useFloatingLocalVideoLayout(floatingLocalVideoLayoutProps);
-    if (props.pinnedParticipantUserIds.length === 0) {
-        return floatingLocalVideoLayout;
+    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
+    if (pinnedParticipants.length === 0) {
+        return useOrganizedParticipantsResult;
     }
     return {
         gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
         horizontalGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
-            : floatingLocalVideoLayout.gridParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
     };
 };
+/**
+ * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * @private
+ */
+export const useOrganizedParticipants = (args) => {
+    /* @conditional-compile-remove(pinned-participants) */
+    return _useOrganizedParticipantsWithPinnedParticipants(args);
+    return _useOrganizedParticipants(args);
+};
 //# sourceMappingURL=videoGalleryLayoutUtils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gCAAgC,EAAE,MAAM,kBAAkB,CAAC;AAgCpE,MAAM,+BAA+B,GAAG,CAAC,CAAC;AAE1C,MAAM,mCAAmC,GAAG,CAAC,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAsC,EAAgB,EAAE;;IAClG,MAAM,wBAAwB,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IAC7E,MAAM,wBAAwB,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IAE7E,MAAM,EACJ,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GAAG,+BAA+B,EACvD,wBAAwB,GAAG,mCAAmC,EAC9D,mBAAmB,GAAG,KAAK,EAC5B,GAAG,KAAK,CAAC;IAEV,wBAAwB,CAAC,OAAO,GAAG,gCAAgC,CAAC;QAClE,YAAY,EAAE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAA,EAAA,CAAC,mCAAI,EAAE;QACjF,gBAAgB;QAChB,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;QACzD,mBAAmB,EAAE,qBAAqB;KAC3C,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC;IAEnC,MAAM,2BAA2B,GAAG,IAAI,GAAG,CAAC,wBAAwB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnG,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC,CAAC;IACtG,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,sBAAsB,GAAG,IAAI,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAEjF,wBAAwB,CAAC,OAAO,GAAG,gCAAgC,CAAC;QAClE,YAAY,EACV,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CACxB,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;YAC1C,6CAA6C,CAAC,mDAAmD,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAC3H,CAAC,CAAC,MAAM,CACT,CACJ,mCAAI,EAAE;QACT,gBAAgB;QAChB,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;QACzD,mBAAmB,EAAE,wBAAwB;KAC9C,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAoC,EAAE;QAC5E,IAAI,mBAAmB,EAAE;YACvB,OAAO,EAAE,CAAC;SACX;QACD,6CAA6C,CAAC,mDAAmD;QACjG,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAChD,CAAC,CAAC,wBAAwB,CAAC,OAAO;YAClC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;QACjE,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAChD,CAAC,CAAC,wBAAwB,CAAC,OAAO;YAClC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC;IACvC,CAAC,EAAE;QACD,6CAA6C,CAAC,mDAAmD,CAAC,mBAAmB;QACrH,mBAAmB;KACpB,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAE/C,MAAM,sCAAsC,GAAG,WAAW,CAAC,GAAoC,EAAE;QAC/F,IAAI,mBAAmB,EAAE;YACvB,sGAAsG;YACtG,6CAA6C,CAAC,mDAAmD;YACjG,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAC7G,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;SAClF;aAAM;YACL,8EAA8E;YAC9E,sEAAsE;YACtE,6CAA6C,CAAC,mDAAmD;YACjG,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;gBAChD,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC;gBAC9D,CAAC,CAAC,EAAE,CAAC;YACP,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;SAC5F;IACH,CAAC,EAAE;QACD,6CAA6C,CAAC,mDAAmD,CAAC,mBAAmB;QACrH,mBAAmB;KACpB,CAAC,CAAC;IAEH,MAAM,6BAA6B,GAAG,sCAAsC,EAAE,CAAC;IAE/E,OAAO,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,CAAC;AAC7D,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAqC,EAAgB,EAAE;IAChG,oCAAoC;IACpC,MAAM,oBAAoB,GAAG,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,iBAAiB,EAAE,EAAE;QACtF,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC;QAClD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uCAAuC;IACvC,IAAI,kCAAkC,GAAG,CAAC,CAAC;IAE3C,sGAAsG;IACtG,MAAM,kBAAkB,GAAoC,EAAE,CAAC;IAC/D,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;;QAC5C,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,EAAE,CAAC,CAAC;QACnD,IAAI,iBAAiB,EAAE;YACrB,kBAAkB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAC3C,IAAI,MAAA,iBAAiB,CAAC,WAAW,0CAAE,WAAW,EAAE;gBAC9C,kCAAkC,EAAE,CAAC;aACtC;SACF;IACH,CAAC,CAAC,CAAC;IAEH,4GAA4G;IAC5G,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC3E,MAAM,oBAAoB,GAAG,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,0BAA0B,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAE/G,MAAM,6BAA6B,mCAC9B,KAAK;QACR,sFAAsF;QACtF,kBAAkB,EAAE,oBAAoB;QACxC,mGAAmG;QACnG,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;YAChD,CAAC,CAAC,KAAK,CAAC,qBAAqB,GAAG,kCAAkC;YAClE,CAAC,CAAC,SAAS,GACd,CAAC;IAEF,MAAM,wBAAwB,GAAG,2BAA2B,CAAC,6BAA6B,CAAC,CAAC;IAE5F,IAAI,KAAK,CAAC,wBAAwB,CAAC,MAAM,KAAK,CAAC,EAAE;QAC/C,OAAO,wBAAwB,CAAC;KACjC;IAED,OAAO;QACL,gBAAgB,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB;QACrE,6BAA6B,EAAE,KAAK,CAAC,mBAAmB;YACtD,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,wBAAwB,CAAC,6BAA6B,CAAC;YACnF,CAAC,CAAC,wBAAwB,CAAC,gBAAgB,CAAC,MAAM,CAAC,wBAAwB,CAAC,6BAA6B,CAAC;KAC7G,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n\n/**\n * Arguments for {@link useFloatingLocalVideoLayout } to determine grid participants and horizontal participants\n * @private\n */\nexport interface UseFloatingLocalVideoLayoutArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxAudioDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n}\n\n/**\n * Arguments for {@link usePinnedParticipantLayout } to determine grid participants and horizontal participants\n * @private\n */\nexport interface UsePinnedParticipantLayoutArgs extends UseFloatingLocalVideoLayoutArgs {\n  pinnedParticipantUserIds: string[];\n}\n\n/**\n * A layout result that defines grid participants and horizontal participants\n * @private\n */\nexport interface LayoutResult {\n  gridParticipants: VideoGalleryParticipant[];\n  horizontalGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\n\nconst DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\n/**\n * @private\n */\nexport const useFloatingLocalVideoLayout = (props: UseFloatingLocalVideoLayoutArgs): LayoutResult => {\n  const visibleVideoParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleAudioParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const {\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n    maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS,\n    isScreenShareActive = false\n  } = props;\n\n  visibleVideoParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipants?.filter((p) => p.videoStream?.isAvailable) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleVideoParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreams\n  }).slice(0, maxRemoteVideoStreams);\n\n  const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  visibleAudioParticipants.current = smartDominantSpeakerParticipants({\n    participants:\n      remoteParticipants?.filter(\n        (p) =>\n          !visibleVideoParticipantsSet.has(p.userId) &&\n          /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n            p.userId\n          )\n      ) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleAudioParticipants.current,\n    maxDominantSpeakers: maxAudioDominantSpeakers\n  });\n\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current.concat(callingParticipants);\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current;\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const gridParticipants = getGridParticipants();\n\n  const getHorizontalGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.length > 0\n        ? visibleAudioParticipants.current.concat(callingParticipants)\n        : [];\n      return visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];\n    }\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();\n\n  return { gridParticipants, horizontalGalleryParticipants };\n};\n\n/**\n * @private\n */\nexport const usePinnedParticipantLayout = (props: UsePinnedParticipantLayoutArgs): LayoutResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {});\n\n  // count pinned participants with video\n  let pinnedParticipantsWithVideoOnCount = 0;\n\n  // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n  const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n  props.pinnedParticipantUserIds.forEach((id) => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      pinnedParticipants.push(pinnedParticipant);\n      if (pinnedParticipant.videoStream?.isAvailable) {\n        pinnedParticipantsWithVideoOnCount++;\n      }\n    }\n  });\n\n  // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n  const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n  const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n  const floatingLocalVideoLayoutProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants,\n    // if there is a maximum of remote video streams we need to subtract pinned participants with video\n    maxRemoteVideoStreams: props.maxRemoteVideoStreams\n      ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount\n      : undefined\n  };\n\n  const floatingLocalVideoLayout = useFloatingLocalVideoLayout(floatingLocalVideoLayoutProps);\n\n  if (props.pinnedParticipantUserIds.length === 0) {\n    return floatingLocalVideoLayout;\n  }\n\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    horizontalGalleryParticipants: props.isScreenShareActive\n      ? pinnedParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)\n      : floatingLocalVideoLayout.gridParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)\n  };\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 { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxAudioDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds?: string[];\n}\n\n/**\n * A result that defines grid participants and horizontal participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  horizontalGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\n\nconst DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleVideoParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleAudioParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const {\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n    maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS,\n    isScreenShareActive = false\n  } = props;\n\n  visibleVideoParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipants?.filter((p) => p.videoStream?.isAvailable) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleVideoParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreams\n  }).slice(0, maxRemoteVideoStreams);\n\n  const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  visibleAudioParticipants.current = smartDominantSpeakerParticipants({\n    participants:\n      remoteParticipants?.filter(\n        (p) =>\n          !visibleVideoParticipantsSet.has(p.userId) &&\n          /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n            p.userId\n          )\n      ) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleAudioParticipants.current,\n    maxDominantSpeakers: maxAudioDominantSpeakers\n  });\n\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current.concat(callingParticipants);\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current;\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const gridParticipants = getGridParticipants();\n\n  const getHorizontalGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.length > 0\n        ? visibleAudioParticipants.current.concat(callingParticipants)\n        : [];\n      return visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];\n    }\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();\n\n  return { gridParticipants, horizontalGalleryParticipants };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithPinnedParticipants = (\n  props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {});\n\n  // count pinned participants with video\n  let pinnedParticipantsWithVideoOnCount = 0;\n\n  // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n  const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n  props.pinnedParticipantUserIds?.forEach((id) => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      pinnedParticipants.push(pinnedParticipant);\n      if (pinnedParticipant.videoStream?.isAvailable) {\n        pinnedParticipantsWithVideoOnCount++;\n      }\n    }\n  });\n\n  // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n  const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n  const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants,\n    // if there is a maximum of remote video streams we need to subtract pinned participants with video\n    maxRemoteVideoStreams: props.maxRemoteVideoStreams\n      ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount\n      : undefined\n  };\n\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n  if (pinnedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    horizontalGalleryParticipants: props.isScreenShareActive\n      ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)\n      : useOrganizedParticipantsResult.gridParticipants.concat(\n          useOrganizedParticipantsResult.horizontalGalleryParticipants\n        )\n  };\n};\n\n/**\n * Hook to determine which participants should be in grid and horizontal gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  /* @conditional-compile-remove(pinned-participants) */\n  return _useOrganizedParticipantsWithPinnedParticipants(args);\n  return _useOrganizedParticipants(args);\n};\n"]}

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

@@ -18,8 +18,6 @@ import { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';
 import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';
 /* @conditional-compile-remove(pinned-participants) */
 import { useId } from '@fluentui/react-hooks';
-/* @conditional-compile-remove(pinned-participants) */
-import { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -141,7 +139,11 @@ export const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
-            showRemoteVideoTileContextualMenu: remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'contextual', 
+            menuKind: remoteVideoTileMenuOptions
+                ? remoteVideoTileMenuOptions.kind === 'drawer'
+                    ? 'drawer'
+                    : 'contextual'
+                : undefined, 
             /* @conditional-compile-remove(pinned-participants) */
             drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -175,7 +177,6 @@ export const VideoGallery = (props) => {
             : undefined;
     const layoutProps = useMemo(() => ({
         remoteParticipants,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         screenShareComponent,
         showCameraSwitcherInLocalPreview,
         maxRemoteVideoStreams,
@@ -185,7 +186,7 @@ export const VideoGallery = (props) => {
         localVideoComponent: localVideoTile,
         parentWidth: containerWidth,
         parentHeight: containerHeight,
-        isLocalVideoFloating: layout === 'floatingLocalVideo'
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants
     }), [
         remoteParticipants,
         screenShareComponent,
@@ -198,14 +199,9 @@ export const VideoGallery = (props) => {
         containerHeight,
         onRenderRemoteVideoTile,
         defaultOnRenderVideoTile,
-        layout,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants
     ]);
     const videoGalleryLayout = useMemo(() => {
-        /* @conditional-compile-remove(pinned-participants) */
-        if (layoutProps.pinnedParticipants.length > 0) {
-            return React.createElement(PinnedParticipantsLayout, Object.assign({}, layoutProps));
-        }
         if (layout === 'floatingLocalVideo') {
             return React.createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }

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

@@ -1 +1 @@
-{"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 { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} 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';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(pinned-participants) */\nimport { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';\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 * @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/* @conditional-compile-remove(pinned-participants) */\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n  unpinParticipantForMe: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\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}\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  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @beta\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    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    /* @conditional-compile-remove(pinned-participants) */\n    onPinParticipant: onPinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    onUnpinParticipant: onUnpinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS\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  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostIdFromProp =\n    remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n      ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n      : undefined;\n  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && 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  /* @conditional-compile-remove(pinned-participants) */\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  /* @conditional-compile-remove(pinned-participants) */\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _usePermissions();\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(rooms) */\n    if (!permissions.cameraButton) {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\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={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    styles?.localVideo,\n    theme.effects.roundedCorner4,\n    /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n  ]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const onPinParticipant = useCallback(\n    (userId: string) => {\n      if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n        return;\n      }\n      if (!pinnedParticipantsState.includes(userId)) {\n        setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n      }\n      onPinParticipantHandler?.(userId);\n    },\n    [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n  );\n  /* @conditional-compile-remove(pinned-participants) */\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 defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n\n      /* @conditional-compile-remove(pinned-participants) */\n      const isPinned = pinnedParticipants?.includes(participant.userId);\n\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          /* @conditional-compile-remove(pinned-participants) */\n          showRemoteVideoTileContextualMenu={\n            remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'contextual'\n          }\n          /* @conditional-compile-remove(pinned-participants) */\n          drawerMenuHostId={drawerMenuHostId}\n          /* @conditional-compile-remove(pinned-participants) */\n          onPinParticipant={onPinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          onUnpinParticipant={onUnpinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,\n      /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n      /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant\n    ]\n  );\n\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo(\n    () => ({\n      remoteParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      isLocalVideoFloating: layout === 'floatingLocalVideo'\n    }),\n    [\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      layout,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n    ]\n  );\n\n  const videoGalleryLayout = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    if (layoutProps.pinnedParticipants.length > 0) {\n      return <PinnedParticipantsLayout {...layoutProps} />;\n    }\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps]);\n\n  return (\n    <div\n      /* @conditional-compile-remove(pinned-participants) */\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)}\n    >\n      {videoGalleryLayout}\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"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 { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} 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';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { useId } from '@fluentui/react-hooks';\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 * @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/* @conditional-compile-remove(pinned-participants) */\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n  unpinParticipantForMe: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\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}\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  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @beta\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    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    /* @conditional-compile-remove(pinned-participants) */\n    onPinParticipant: onPinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    onUnpinParticipant: onUnpinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS\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  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostIdFromProp =\n    remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n      ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n      : undefined;\n  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && 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  /* @conditional-compile-remove(pinned-participants) */\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  /* @conditional-compile-remove(pinned-participants) */\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _usePermissions();\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(rooms) */\n    if (!permissions.cameraButton) {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\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={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    styles?.localVideo,\n    theme.effects.roundedCorner4,\n    /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n  ]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const onPinParticipant = useCallback(\n    (userId: string) => {\n      if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n        return;\n      }\n      if (!pinnedParticipantsState.includes(userId)) {\n        setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n      }\n      onPinParticipantHandler?.(userId);\n    },\n    [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n  );\n  /* @conditional-compile-remove(pinned-participants) */\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 defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n\n      /* @conditional-compile-remove(pinned-participants) */\n      const isPinned = pinnedParticipants?.includes(participant.userId);\n\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          /* @conditional-compile-remove(pinned-participants) */\n          menuKind={\n            remoteVideoTileMenuOptions\n              ? remoteVideoTileMenuOptions.kind === 'drawer'\n                ? 'drawer'\n                : 'contextual'\n              : undefined\n          }\n          /* @conditional-compile-remove(pinned-participants) */\n          drawerMenuHostId={drawerMenuHostId}\n          /* @conditional-compile-remove(pinned-participants) */\n          onPinParticipant={onPinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          onUnpinParticipant={onUnpinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,\n      /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n      /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant\n    ]\n  );\n\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo(\n    () => ({\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants\n    }),\n    [\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n    ]\n  );\n\n  const videoGalleryLayout = useMemo(() => {\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps]);\n\n  return (\n    <div\n      /* @conditional-compile-remove(pinned-participants) */\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)}\n    >\n      {videoGalleryLayout}\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/utils/useLongPress.d.ts

@@ -13,5 +13,6 @@ export default function useLongPress(props: {
     onTouchEnd: () => void;
     onKeyDown: () => void;
     onKeyUp: () => void;
+    onTouchMove: () => void;
 };
 //# sourceMappingURL=useLongPress.d.ts.map

package/dist/dist-esm/react-components/src/components/utils/useLongPress.js

@@ -68,6 +68,9 @@ export default function useLongPress(props) {
     const handleOnTouchEnd = useCallback(() => {
         timerRef.current && clearTimeout(timerRef.current);
     }, []);
+    const handleOnTouchMove = useCallback(() => {
+        timerRef.current && clearTimeout(timerRef.current);
+    }, []);
     return useMemo(() => ({
         onClick: handleOnClick,
         onMouseDown: handleOnMouseDown,
@@ -75,7 +78,8 @@ export default function useLongPress(props) {
         onTouchStart: handleOnTouchStart,
         onTouchEnd: handleOnTouchEnd,
         onKeyDown: handleOnKeyDown,
-        onKeyUp: handleOnKeyUp
+        onKeyUp: handleOnKeyUp,
+        onTouchMove: handleOnTouchMove
     }), [
         handleOnClick,
         handleOnKeyDown,
@@ -83,7 +87,8 @@ export default function useLongPress(props) {
         handleOnMouseDown,
         handleOnMouseUp,
         handleOnTouchEnd,
-        handleOnTouchStart
+        handleOnTouchStart,
+        handleOnTouchMove
     ]);
 }
 //# sourceMappingURL=useLongPress.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/useLongPress.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useMemo, useRef, useState, useCallback, useEffect } from 'react';\n\n/**\n * @private\n */\nexport default function useLongPress(props: {\n  onLongPress: () => void;\n  onClick?: () => void;\n  touchEventsOnly?: boolean;\n}): {\n  onClick: () => void;\n  onMouseDown: () => void;\n  onMouseUp: () => void;\n  onTouchStart: () => void;\n  onTouchEnd: () => void;\n  onKeyDown: () => void;\n  onKeyUp: () => void;\n} {\n  const { onClick, onLongPress, touchEventsOnly = false } = props;\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [isLongPress, setIsLongPress] = useState(false);\n  const [action, setAction] = useState(false);\n\n  useEffect(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [onClick, onLongPress, touchEventsOnly]);\n\n  const startPressTimer = useCallback(() => {\n    setIsLongPress(false);\n    timerRef.current = setTimeout(() => {\n      setIsLongPress(true);\n      onLongPress();\n    }, 500);\n  }, [onLongPress]);\n\n  const handleOnClick = useCallback(() => {\n    if (touchEventsOnly || !onClick) {\n      return;\n    }\n    if (!isLongPress) {\n      onClick();\n    }\n  }, [isLongPress, onClick, touchEventsOnly]);\n\n  const handleOnKeyDown = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    if (action) {\n      setAction(false);\n      startPressTimer();\n    }\n  }, [action, startPressTimer, touchEventsOnly]);\n\n  const handleOnKeyUp = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    setAction(true);\n    timerRef.current && clearTimeout(timerRef.current);\n  }, [touchEventsOnly]);\n\n  const handleOnMouseDown = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    startPressTimer();\n  }, [startPressTimer, touchEventsOnly]);\n\n  const handleOnMouseUp = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    timerRef.current && clearTimeout(timerRef.current);\n  }, [touchEventsOnly]);\n\n  const handleOnTouchStart = useCallback(() => {\n    startPressTimer();\n  }, [startPressTimer]);\n\n  const handleOnTouchEnd = useCallback(() => {\n    timerRef.current && clearTimeout(timerRef.current);\n  }, []);\n\n  return useMemo(\n    () => ({\n      onClick: handleOnClick,\n      onMouseDown: handleOnMouseDown,\n      onMouseUp: handleOnMouseUp,\n      onTouchStart: handleOnTouchStart,\n      onTouchEnd: handleOnTouchEnd,\n      onKeyDown: handleOnKeyDown,\n      onKeyUp: handleOnKeyUp\n    }),\n    [\n      handleOnClick,\n      handleOnKeyDown,\n      handleOnKeyUp,\n      handleOnMouseDown,\n      handleOnMouseUp,\n      handleOnTouchEnd,\n      handleOnTouchStart\n    ]\n  );\n}\n"]}
+{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/useLongPress.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useMemo, useRef, useState, useCallback, useEffect } from 'react';\n\n/**\n * @private\n */\nexport default function useLongPress(props: {\n  onLongPress: () => void;\n  onClick?: () => void;\n  touchEventsOnly?: boolean;\n}): {\n  onClick: () => void;\n  onMouseDown: () => void;\n  onMouseUp: () => void;\n  onTouchStart: () => void;\n  onTouchEnd: () => void;\n  onKeyDown: () => void;\n  onKeyUp: () => void;\n  onTouchMove: () => void;\n} {\n  const { onClick, onLongPress, touchEventsOnly = false } = props;\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [isLongPress, setIsLongPress] = useState(false);\n  const [action, setAction] = useState(false);\n\n  useEffect(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [onClick, onLongPress, touchEventsOnly]);\n\n  const startPressTimer = useCallback(() => {\n    setIsLongPress(false);\n    timerRef.current = setTimeout(() => {\n      setIsLongPress(true);\n      onLongPress();\n    }, 500);\n  }, [onLongPress]);\n\n  const handleOnClick = useCallback(() => {\n    if (touchEventsOnly || !onClick) {\n      return;\n    }\n    if (!isLongPress) {\n      onClick();\n    }\n  }, [isLongPress, onClick, touchEventsOnly]);\n\n  const handleOnKeyDown = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    if (action) {\n      setAction(false);\n      startPressTimer();\n    }\n  }, [action, startPressTimer, touchEventsOnly]);\n\n  const handleOnKeyUp = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    setAction(true);\n    timerRef.current && clearTimeout(timerRef.current);\n  }, [touchEventsOnly]);\n\n  const handleOnMouseDown = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    startPressTimer();\n  }, [startPressTimer, touchEventsOnly]);\n\n  const handleOnMouseUp = useCallback(() => {\n    if (touchEventsOnly) {\n      return;\n    }\n    timerRef.current && clearTimeout(timerRef.current);\n  }, [touchEventsOnly]);\n\n  const handleOnTouchStart = useCallback(() => {\n    startPressTimer();\n  }, [startPressTimer]);\n\n  const handleOnTouchEnd = useCallback(() => {\n    timerRef.current && clearTimeout(timerRef.current);\n  }, []);\n\n  const handleOnTouchMove = useCallback(() => {\n    timerRef.current && clearTimeout(timerRef.current);\n  }, []);\n\n  return useMemo(\n    () => ({\n      onClick: handleOnClick,\n      onMouseDown: handleOnMouseDown,\n      onMouseUp: handleOnMouseUp,\n      onTouchStart: handleOnTouchStart,\n      onTouchEnd: handleOnTouchEnd,\n      onKeyDown: handleOnKeyDown,\n      onKeyUp: handleOnKeyUp,\n      onTouchMove: handleOnTouchMove\n    }),\n    [\n      handleOnClick,\n      handleOnKeyDown,\n      handleOnKeyUp,\n      handleOnMouseDown,\n      handleOnMouseUp,\n      handleOnTouchEnd,\n      handleOnTouchStart,\n      handleOnTouchMove\n    ]\n  );\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js

@@ -38,14 +38,14 @@ export const CallArrangement = (props) => {
     const isMobileWithActivePane = props.mobileView && activePane;
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const callCompositeContainerCSS = useMemo(() => {
-        return { display: isMobileWithActivePane ? 'none' : 'flex' };
+        return { display: isMobileWithActivePane ? 'none' : 'flex', width: '100%', height: '100%' };
     }, [isMobileWithActivePane]);
     // To be removed once feature is out of beta, replace with callCompositeContainerCSS
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const callCompositeContainerFlex = () => {
         /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
         return callCompositeContainerCSS;
-        return { display: 'flex' };
+        return { display: 'flex', width: '100%', height: '100%' };
     };
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const callPaneContent = useCallback(() => {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n  _ComplianceBanner,\n  _ComplianceBannerProps,\n  _useContainerHeight,\n  _useContainerWidth,\n  ErrorBar,\n  ErrorBarProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport React, { useMemo, useRef } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useCallback } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useSidePaneState } from '../hooks/useSidePaneState';\nimport {\n  callArrangementContainerStyles,\n  callControlsContainerStyles,\n  notificationsContainerStyles,\n  containerStyleDesktop,\n  containerStyleMobile,\n  mediaGalleryContainerStyles,\n  galleryParentContainerStyles,\n  bannerNotificationStyles\n} from '../styles/CallPage.styles';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallControlOptions } from '../types/CallControlOptions';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallPane } from './CallPane';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\n\n/**\n * @private\n */\nexport interface CallArrangementProps {\n  id?: string;\n  complianceBannerProps: _ComplianceBannerProps;\n  errorBarProps: ErrorBarProps | false;\n  mutedNotificationProps?: MutedNotificationProps;\n  callControlProps: CallControlsProps;\n  onRenderGalleryContent: () => JSX.Element;\n  dataUiId: string;\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}\n\n/**\n * @private\n */\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n  const containerClassName = useMemo(() => {\n    return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n  }, [props.mobileView]);\n\n  const theme = useTheme();\n  const callGalleryStyles = useMemo(\n    () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n    [theme.palette.neutralLighterAlt]\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const { activePane, closePane, openPeoplePane, togglePeoplePane } = useSidePaneState();\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const isMobileWithActivePane = props.mobileView && activePane;\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex' };\n  }, [isMobileWithActivePane]);\n\n  // To be removed once feature is out of beta, replace with callCompositeContainerCSS\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const callCompositeContainerFlex = () => {\n    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n    return callCompositeContainerCSS;\n    return { display: 'flex' };\n  };\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callPaneContent = useCallback((): JSX.Element => {\n    if (adapter && activePane === 'people') {\n      return (\n        <CallPane\n          callAdapter={adapter}\n          onClose={closePane}\n          onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={props.callControlProps?.onFetchParticipantMenuItems}\n          onPeopleButtonClicked={\n            showShowPeopleTabHeaderButton(props.callControlProps.options) ? openPeoplePane : undefined\n          }\n          callControls={\n            typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined\n          }\n          modalLayerHostId={props.modalLayerHostId}\n          activePane={activePane}\n          mobileView={props.mobileView}\n          inviteLink={props.callControlProps.callInvitationURL}\n        />\n      );\n    }\n    return <></>;\n  }, [\n    activePane,\n    adapter,\n    closePane,\n    props.callControlProps.callInvitationURL,\n    props.callControlProps?.onFetchParticipantMenuItems,\n    props.callControlProps.options,\n    props.mobileView,\n    props.modalLayerHostId,\n    props.onFetchAvatarPersonaData,\n    openPeoplePane\n  ]);\n\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n\n  let canUnmute = true;\n  /* @conditional-compile-remove(rooms) */\n  canUnmute = rolePermissions.microphoneButton;\n\n  let errorBarProps = props.errorBarProps;\n\n  /* @conditional-compile-remove(rooms) */\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (!rolePermissions.cameraButton && props.errorBarProps) {\n    errorBarProps = {\n      ...props.errorBarProps,\n      activeErrorMessages: props.errorBarProps.activeErrorMessages.filter(\n        (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n      )\n    };\n  }\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>\n      <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n        <Stack grow styles={callArrangementContainerStyles}>\n          <Stack.Item styles={notificationsContainerStyles}>\n            <Stack styles={bannerNotificationStyles}>\n              <_ComplianceBanner {...props.complianceBannerProps} />\n            </Stack>\n            {errorBarProps !== false && (\n              <Stack styles={bannerNotificationStyles}>\n                <ErrorBar {...errorBarProps} />\n              </Stack>\n            )}\n            {canUnmute && !!props.mutedNotificationProps && <MutedNotification {...props.mutedNotificationProps} />}\n          </Stack.Item>\n          {props.callControlProps?.options !== false &&\n            /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n            !isMobileWithActivePane && (\n              <Stack.Item className={callControlsContainerStyles}>\n                <CallControls\n                  {...props.callControlProps}\n                  containerWidth={containerWidth}\n                  containerHeight={containerHeight}\n                  isMobile={props.mobileView}\n                  /* @conditional-compile-remove(one-to-n-calling) */\n                  peopleButtonChecked={activePane === 'people'}\n                  /* @conditional-compile-remove(one-to-n-calling) */\n                  onPeopleButtonClicked={togglePeoplePane}\n                />\n              </Stack.Item>\n            )}\n          <Stack horizontal grow>\n            <Stack.Item grow style={callCompositeContainerFlex()}>\n              <Stack.Item styles={callGalleryStyles} grow>\n                {props.onRenderGalleryContent && (\n                  <Stack verticalFill styles={mediaGalleryContainerStyles}>\n                    {props.onRenderGalleryContent()}\n                  </Stack>\n                )}\n              </Stack.Item>\n            </Stack.Item>\n            {\n              /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n              callPaneContent()\n            }\n          </Stack>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.participantsButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EACL,iBAAiB,EAEjB,mBAAmB,EACnB,kBAAkB,EAClB,QAAQ,EAER,QAAQ,EACT,4CAAmC;AACpC,wCAAwC;AACxC,OAAO,EAAE,eAAe,EAAE,4CAAmC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/C,2FAA2F;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,2FAA2F;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAqB,MAAM,4BAA4B,CAAC;AAC7E,2FAA2F;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EACL,8BAA8B,EAC9B,2BAA2B,EAC3B,4BAA4B,EAC5B,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,EAC3B,4BAA4B,EAC5B,wBAAwB,EACzB,MAAM,2BAA2B,CAAC;AAGnC,2FAA2F;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAC;AAoBhF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC1E,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IACzE,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,EACnE,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAClC,CAAC;IAEF,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAE1D,2FAA2F;IAC3F,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,2FAA2F;IAC3F,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEvF,2FAA2F;IAC3F,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,IAAI,UAAU,CAAC;IAE9D,2FAA2F;IAC3F,MAAM,yBAAyB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO,EAAE,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAC9F,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,oFAAoF;IACpF,4EAA4E;IAC5E,MAAM,0BAA0B,GAAG,GAAG,EAAE;QACtC,2FAA2F;QAC3F,OAAO,yBAAyB,CAAC;QACjC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAC5D,CAAC,CAAC;IAEF,2FAA2F;IAC3F,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;;QACpD,IAAI,OAAO,IAAI,UAAU,KAAK,QAAQ,EAAE;YACtC,OAAO,CACL,oBAAC,QAAQ,IACP,WAAW,EAAE,OAAO,EACpB,OAAO,EAAE,SAAS,EAClB,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,EACxD,2BAA2B,EAAE,MAAA,KAAK,CAAC,gBAAgB,0CAAE,2BAA2B,EAChF,qBAAqB,EACnB,6BAA6B,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAE5F,YAAY,EACV,OAAO,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAElG,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,iBAAiB,GACpD,CACH,CAAC;SACH;QACD,OAAO,yCAAK,CAAC;IACf,CAAC,EAAE;QACD,UAAU;QACV,OAAO;QACP,SAAS;QACT,KAAK,CAAC,gBAAgB,CAAC,iBAAiB;QACxC,MAAA,KAAK,CAAC,gBAAgB,0CAAE,2BAA2B;QACnD,KAAK,CAAC,gBAAgB,CAAC,OAAO;QAC9B,KAAK,CAAC,UAAU;QAChB,KAAK,CAAC,gBAAgB;QACtB,KAAK,CAAC,wBAAwB;QAC9B,cAAc;KACf,CAAC,CAAC;IAEH,wCAAwC;IACxC,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;IAE1C,IAAI,SAAS,GAAG,IAAI,CAAC;IACrB,wCAAwC;IACxC,SAAS,GAAG,eAAe,CAAC,gBAAgB,CAAC;IAE7C,IAAI,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;IAExC,wCAAwC;IACxC,6FAA6F;IAC7F,IAAI,CAAC,eAAe,CAAC,YAAY,IAAI,KAAK,CAAC,aAAa,EAAE;QACxD,aAAa,mCACR,KAAK,CAAC,aAAa,KACtB,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,MAAM,CACjE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,wBAAwB,IAAI,CAAC,CAAC,IAAI,KAAK,8BAA8B,CACxF,GACF,CAAC;KACH;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE;QAC9E,oBAAC,KAAK,IAAC,YAAY,QAAC,eAAe,EAAC,SAAS,EAAC,SAAS,EAAE,kBAAkB,gBAAc,KAAK,CAAC,QAAQ;YACrG,oBAAC,KAAK,IAAC,IAAI,QAAC,MAAM,EAAE,8BAA8B;gBAChD,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,4BAA4B;oBAC9C,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;wBACrC,oBAAC,iBAAiB,oBAAK,KAAK,CAAC,qBAAqB,EAAI,CAChD;oBACP,aAAa,KAAK,KAAK,IAAI,CAC1B,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;wBACrC,oBAAC,QAAQ,oBAAK,aAAa,EAAI,CACzB,CACT;oBACA,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,sBAAsB,IAAI,oBAAC,iBAAiB,oBAAK,KAAK,CAAC,sBAAsB,EAAI,CAC5F;gBACZ,CAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,OAAO,MAAK,KAAK;oBACxC,2FAA2F;oBAC3F,CAAC,sBAAsB,IAAI,CACzB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,2BAA2B;oBAChD,oBAAC,YAAY,oBACP,KAAK,CAAC,gBAAgB,IAC1B,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,KAAK,CAAC,UAAU;wBAC1B,mDAAmD;wBACnD,mBAAmB,EAAE,UAAU,KAAK,QAAQ;wBAC5C,mDAAmD;wBACnD,qBAAqB,EAAE,gBAAgB,IACvC,CACS,CACd;gBACH,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI;oBACpB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,0BAA0B,EAAE;wBAClD,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,EAAE,IAAI,UACxC,KAAK,CAAC,sBAAsB,IAAI,CAC/B,oBAAC,KAAK,IAAC,YAAY,QAAC,MAAM,EAAE,2BAA2B,IACpD,KAAK,CAAC,sBAAsB,EAAE,CACzB,CACT,CACU,CACF;oBAEX,2FAA2F;oBAC3F,eAAe,EAAE,CAEb,CACF,CACF,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,2FAA2F;AAC3F,MAAM,6BAA6B,GAAG,CAAC,YAA2C,EAAW,EAAE;IAC7F,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,IAAI,EAAE;QACvD,OAAO,IAAI,CAAC;KACb;IACD,IAAI,YAAY,KAAK,KAAK,EAAE;QAC1B,OAAO,KAAK,CAAC;KACd;IACD,OAAO,YAAY,CAAC,kBAAkB,KAAK,KAAK,CAAC;AACnD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n  _ComplianceBanner,\n  _ComplianceBannerProps,\n  _useContainerHeight,\n  _useContainerWidth,\n  ErrorBar,\n  ErrorBarProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport React, { useMemo, useRef } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useCallback } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useSidePaneState } from '../hooks/useSidePaneState';\nimport {\n  callArrangementContainerStyles,\n  callControlsContainerStyles,\n  notificationsContainerStyles,\n  containerStyleDesktop,\n  containerStyleMobile,\n  mediaGalleryContainerStyles,\n  galleryParentContainerStyles,\n  bannerNotificationStyles\n} from '../styles/CallPage.styles';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallControlOptions } from '../types/CallControlOptions';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallPane } from './CallPane';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\n\n/**\n * @private\n */\nexport interface CallArrangementProps {\n  id?: string;\n  complianceBannerProps: _ComplianceBannerProps;\n  errorBarProps: ErrorBarProps | false;\n  mutedNotificationProps?: MutedNotificationProps;\n  callControlProps: CallControlsProps;\n  onRenderGalleryContent: () => JSX.Element;\n  dataUiId: string;\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}\n\n/**\n * @private\n */\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n  const containerClassName = useMemo(() => {\n    return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n  }, [props.mobileView]);\n\n  const theme = useTheme();\n  const callGalleryStyles = useMemo(\n    () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n    [theme.palette.neutralLighterAlt]\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const { activePane, closePane, openPeoplePane, togglePeoplePane } = useSidePaneState();\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const isMobileWithActivePane = props.mobileView && activePane;\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex', width: '100%', height: '100%' };\n  }, [isMobileWithActivePane]);\n\n  // To be removed once feature is out of beta, replace with callCompositeContainerCSS\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const callCompositeContainerFlex = () => {\n    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n    return callCompositeContainerCSS;\n    return { display: 'flex', width: '100%', height: '100%' };\n  };\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callPaneContent = useCallback((): JSX.Element => {\n    if (adapter && activePane === 'people') {\n      return (\n        <CallPane\n          callAdapter={adapter}\n          onClose={closePane}\n          onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={props.callControlProps?.onFetchParticipantMenuItems}\n          onPeopleButtonClicked={\n            showShowPeopleTabHeaderButton(props.callControlProps.options) ? openPeoplePane : undefined\n          }\n          callControls={\n            typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined\n          }\n          modalLayerHostId={props.modalLayerHostId}\n          activePane={activePane}\n          mobileView={props.mobileView}\n          inviteLink={props.callControlProps.callInvitationURL}\n        />\n      );\n    }\n    return <></>;\n  }, [\n    activePane,\n    adapter,\n    closePane,\n    props.callControlProps.callInvitationURL,\n    props.callControlProps?.onFetchParticipantMenuItems,\n    props.callControlProps.options,\n    props.mobileView,\n    props.modalLayerHostId,\n    props.onFetchAvatarPersonaData,\n    openPeoplePane\n  ]);\n\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n\n  let canUnmute = true;\n  /* @conditional-compile-remove(rooms) */\n  canUnmute = rolePermissions.microphoneButton;\n\n  let errorBarProps = props.errorBarProps;\n\n  /* @conditional-compile-remove(rooms) */\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (!rolePermissions.cameraButton && props.errorBarProps) {\n    errorBarProps = {\n      ...props.errorBarProps,\n      activeErrorMessages: props.errorBarProps.activeErrorMessages.filter(\n        (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n      )\n    };\n  }\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>\n      <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n        <Stack grow styles={callArrangementContainerStyles}>\n          <Stack.Item styles={notificationsContainerStyles}>\n            <Stack styles={bannerNotificationStyles}>\n              <_ComplianceBanner {...props.complianceBannerProps} />\n            </Stack>\n            {errorBarProps !== false && (\n              <Stack styles={bannerNotificationStyles}>\n                <ErrorBar {...errorBarProps} />\n              </Stack>\n            )}\n            {canUnmute && !!props.mutedNotificationProps && <MutedNotification {...props.mutedNotificationProps} />}\n          </Stack.Item>\n          {props.callControlProps?.options !== false &&\n            /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n            !isMobileWithActivePane && (\n              <Stack.Item className={callControlsContainerStyles}>\n                <CallControls\n                  {...props.callControlProps}\n                  containerWidth={containerWidth}\n                  containerHeight={containerHeight}\n                  isMobile={props.mobileView}\n                  /* @conditional-compile-remove(one-to-n-calling) */\n                  peopleButtonChecked={activePane === 'people'}\n                  /* @conditional-compile-remove(one-to-n-calling) */\n                  onPeopleButtonClicked={togglePeoplePane}\n                />\n              </Stack.Item>\n            )}\n          <Stack horizontal grow>\n            <Stack.Item grow style={callCompositeContainerFlex()}>\n              <Stack.Item styles={callGalleryStyles} grow>\n                {props.onRenderGalleryContent && (\n                  <Stack verticalFill styles={mediaGalleryContainerStyles}>\n                    {props.onRenderGalleryContent()}\n                  </Stack>\n                )}\n              </Stack.Item>\n            </Stack.Item>\n            {\n              /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n              callPaneContent()\n            }\n          </Stack>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.participantsButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallPage.styles.js

@@ -71,6 +71,8 @@ export const bannerNotificationStyles = {
  */
 export const callArrangementContainerStyles = {
     root: {
+        width: '100%',
+        height: '100%',
         flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
     }
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallPage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallPage.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallPage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0C,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,2HAA2H;AAC3H,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,CAAC,CAAC;AACtD,6GAA6G;AAC7G,MAAM,8BAA8B,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;AAEhG;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC,yBAAyB,EAAE;IAChF,MAAM,EAAE,mBAAmB;CAC5B,CAAC,CAAC;AAEH,MAAM,cAAc,GAAW;IAC7B,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,OAAO,CAAC,qDAAqD;CACzE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,iCAC3C,cAAc,KACjB,QAAQ,EAAE,OAAO,IACjB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,iCAC1C,cAAc,KACjB,QAAQ,EAAE,SAAS,IACnB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAuB,EAAgB,EAAE,CAAC,CAAC;IACtF,IAAI,EAAE;QACJ,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,eAAe;KAC5B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAqB;IAC3D,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAiB;IACxD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,8BAA8B;QACtC,aAAa,EAAE,MAAM,CAAC,2EAA2E;KAClG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAiB;IACpD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAC,iFAAiF;KACxG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,IAAI,EAAE;QACJ,aAAa,EAAE,gBAAgB,CAAC,sDAAsD;KACvF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackItemStyles, IStackStyles, IStyle, mergeStyles } from '@fluentui/react';\nimport { controlBarContainerStyles } from './CallControls.styles';\n\nconst VIDEO_GALLERY_Z_INDEX = 1;\n// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery\nconst CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;\n// The notification container should be in the highest z-band to ensure it shows on top of all other content.\nconst NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;\n\n/**\n * @private\n */\nexport const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {\n  zIndex: CONTROL_BAR_Z_INDEX\n});\n\nconst containerStyle: IStyle = {\n  width: '100%',\n  position: 'relative',\n  minHeight: '13rem' // linked to minimum space allocated to media gallery\n};\n\n/**\n * @private\n */\nexport const containerStyleDesktop = mergeStyles({\n  ...containerStyle,\n  minWidth: '30rem'\n});\n\n/**\n * @private\n */\nexport const containerStyleMobile = mergeStyles({\n  ...containerStyle,\n  minWidth: '17.5rem'\n});\n\n/**\n * @private\n */\nexport const galleryParentContainerStyles = (backgroundColor: string): IStackStyles => ({\n  root: {\n    zIndex: VIDEO_GALLERY_Z_INDEX,\n    width: '100%',\n    background: backgroundColor\n  }\n});\n\n/**\n * @private\n */\nexport const mediaGalleryContainerStyles: IStackItemStyles = {\n  root: {\n    height: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const notificationsContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    padding: '1rem',\n    zIndex: NOTIFICATION_CONTAINER_Z_INDEX,\n    pointerEvents: 'none' // to allow the operation of controls underneath the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const bannerNotificationStyles: IStackStyles = {\n  root: {\n    pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const callArrangementContainerStyles: IStackStyles = {\n  root: {\n    flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar\n  }\n};\n"]}
+{"version":3,"file":"CallPage.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallPage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0C,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,2HAA2H;AAC3H,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,CAAC,CAAC;AACtD,6GAA6G;AAC7G,MAAM,8BAA8B,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;AAEhG;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC,yBAAyB,EAAE;IAChF,MAAM,EAAE,mBAAmB;CAC5B,CAAC,CAAC;AAEH,MAAM,cAAc,GAAW;IAC7B,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,OAAO,CAAC,qDAAqD;CACzE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,iCAC3C,cAAc,KACjB,QAAQ,EAAE,OAAO,IACjB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,iCAC1C,cAAc,KACjB,QAAQ,EAAE,SAAS,IACnB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAuB,EAAgB,EAAE,CAAC,CAAC;IACtF,IAAI,EAAE;QACJ,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,eAAe;KAC5B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAqB;IAC3D,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAiB;IACxD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,8BAA8B;QACtC,aAAa,EAAE,MAAM,CAAC,2EAA2E;KAClG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAiB;IACpD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAC,iFAAiF;KACxG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,gBAAgB,CAAC,sDAAsD;KACvF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackItemStyles, IStackStyles, IStyle, mergeStyles } from '@fluentui/react';\nimport { controlBarContainerStyles } from './CallControls.styles';\n\nconst VIDEO_GALLERY_Z_INDEX = 1;\n// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery\nconst CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;\n// The notification container should be in the highest z-band to ensure it shows on top of all other content.\nconst NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;\n\n/**\n * @private\n */\nexport const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {\n  zIndex: CONTROL_BAR_Z_INDEX\n});\n\nconst containerStyle: IStyle = {\n  width: '100%',\n  position: 'relative',\n  minHeight: '13rem' // linked to minimum space allocated to media gallery\n};\n\n/**\n * @private\n */\nexport const containerStyleDesktop = mergeStyles({\n  ...containerStyle,\n  minWidth: '30rem'\n});\n\n/**\n * @private\n */\nexport const containerStyleMobile = mergeStyles({\n  ...containerStyle,\n  minWidth: '17.5rem'\n});\n\n/**\n * @private\n */\nexport const galleryParentContainerStyles = (backgroundColor: string): IStackStyles => ({\n  root: {\n    zIndex: VIDEO_GALLERY_Z_INDEX,\n    width: '100%',\n    background: backgroundColor\n  }\n});\n\n/**\n * @private\n */\nexport const mediaGalleryContainerStyles: IStackItemStyles = {\n  root: {\n    height: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const notificationsContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    padding: '1rem',\n    zIndex: NOTIFICATION_CONTAINER_Z_INDEX,\n    pointerEvents: 'none' // to allow the operation of controls underneath the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const bannerNotificationStyles: IStackStyles = {\n  root: {\n    pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const callArrangementContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar\n  }\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.4.3-alpha-202301140013.0",
+  "version": "1.4.3-alpha-202301180013.0",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -26,6 +26,7 @@
     "@azure/communication-common": "2.2.0",
     "@azure/core-client": "1.3.0",
     "@azure/core-paging": "~1.1.3",
+    "@azure/core-rest-pipeline": "~1.9.2",
     "@azure/logger": "1.0.3",
     "@fluentui/react-file-type-icons": "~8.5.8",
     "@fluentui/react-hooks": "~8.6.12",
@@ -41,9 +42,9 @@
     "nanoid": "3.1.32",
     "react-aria-live": "^2.0.5",
     "react-linkify": "^1.0.0-alpha",
+    "react-use-draggable-scroll": "~0.4.7",
     "reselect": "~4.0.0",
-    "uuid": "^8.1.0",
-    "@azure/core-rest-pipeline": "~1.9.2"
+    "uuid": "^8.1.0"
   },
   "peerDependencies": {
     "@azure/communication-calling": "1.9.1-beta.1 || >=1.4.4",
@@ -86,13 +87,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.4.3-alpha-202301140013.0",
-    "@internal/calling-stateful-client": "1.4.3-alpha-202301140013.0",
-    "@internal/chat-component-bindings": "1.4.3-alpha-202301140013.0",
-    "@internal/chat-stateful-client": "1.4.3-alpha-202301140013.0",
-    "@internal/fake-backends": "1.4.3-alpha-202301140013.0",
-    "@internal/react-components": "1.4.3-alpha-202301140013.0",
-    "@internal/react-composites": "1.4.3-alpha-202301140013.0",
+    "@internal/calling-component-bindings": "1.4.3-alpha-202301180013.0",
+    "@internal/calling-stateful-client": "1.4.3-alpha-202301180013.0",
+    "@internal/chat-component-bindings": "1.4.3-alpha-202301180013.0",
+    "@internal/chat-stateful-client": "1.4.3-alpha-202301180013.0",
+    "@internal/fake-backends": "1.4.3-alpha-202301180013.0",
+    "@internal/react-components": "1.4.3-alpha-202301180013.0",
+    "@internal/react-composites": "1.4.3-alpha-202301180013.0",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",

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

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { FloatingLocalVideoLayoutProps } from './FloatingLocalVideoLayout';
-/**
- * Props for {@link PinnedParticipantsLayout}.
- *
- * @private
- */
-export interface PinnedParticipantsLayoutProps extends FloatingLocalVideoLayoutProps {
-    /**
-     * List of pinned participant userIds
-     */
-    pinnedParticipants?: string[];
-    /**
-     * Whether local video should be floating
-     */
-    isLocalVideoFloating?: boolean;
-}
-/**
- * PinnedParticipantsLayout displays remote participants and a screen sharing component in
- * a grid and horizontal gallery while floating the local video
- *
- * @private
- */
-export declare const PinnedParticipantsLayout: (props: PinnedParticipantsLayoutProps) => JSX.Element;
-//# sourceMappingURL=PinnedParticipantsLayout.d.ts.map