@azure/communication-react 1.23.0 → 1.24.0-alpha-202501282341

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

@@ -23,14 +23,16 @@ export const DefaultLayout = (props) => {
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
     const childrenPerPage = useRef(4);
-    const remoteVideosOn = remoteParticipants.filter(p => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
+    const remoteVideosOn = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         localParticipant,
         dominantSpeakers,
         maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
+            : childrenPerPage.current,
         pinnedParticipantUserIds,
         layout: 'default',
         spotlightedParticipantUserIds
@@ -56,14 +58,23 @@ export const DefaultLayout = (props) => {
         if (overflowGalleryTiles.length === 0) {
             return null;
         }
-        return React.createElement(OverflowGallery, { isNarrow: isNarrow, isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            }, parentWidth: parentWidth });
-    }, [isNarrow, isShort, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles === null || styles === void 0 ? void 0 : styles.verticalGallery, parentWidth]);
-    return React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+            }, parentWidth: parentWidth }));
+    }, [
+        isNarrow,
+        isShort,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        overflowGalleryPosition,
+        setIndexesToRender,
+        styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
+    ]);
+    return (React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
         props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
-        screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
-        overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition));
+        screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)));
 };
 const overflowGalleryTrampoline = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    spotlightedParticipantUserIds = []\n  } = props;\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    spotlightedParticipantUserIds\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  let {\n    gridTiles,\n    overflowGalleryTiles\n  } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n  if (localVideoComponent) {\n    if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return <OverflowGallery isNarrow={isNarrow} isShort={isShort} shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth]);\n  return <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport {\n  MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n  renderTiles,\n  useOrganizedParticipants\n} from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter((p) => p.videoStream?.isAvailable).length > 0;\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    spotlightedParticipantUserIds\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let { gridTiles, overflowGalleryTiles } = renderTiles(\n    gridParticipants,\n    onRenderRemoteParticipant,\n    maxRemoteVideoStreams,\n    indexesToRender,\n    overflowGalleryParticipants,\n    dominantSpeakers\n  );\n\n  if (localVideoComponent) {\n    if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};\n"]}

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

@@ -31,17 +31,21 @@ export const FloatingLocalVideo = (props) => {
     const strings = useLocale().strings.videoGallery;
     // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
     // to be dragged offscreen and these are the top and left bounds of that calculation.
-    const modalMinDragPosition = useMemo(() => parentWidth && parentHeight ? {
-        // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
-        // hence (0,0) is the bottom right of the video gallery.
-        x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
-        y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
-    } : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
+    const modalMinDragPosition = useMemo(() => parentWidth && parentHeight
+        ? {
+            // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
+            // hence (0,0) is the bottom right of the video gallery.
+            x: -parentWidth +
+                _convertRemToPx(localVideoSizeRem.width) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+            y: -parentHeight +
+                _convertRemToPx(localVideoSizeRem.height) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
+        }
+        : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
     const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
-    const layerProps = useMemo(() => ({
-        hostId: layerHostId
-    }), [layerHostId]);
-    return React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition, dataUiId: "floating-local-video-host" },
-        React.createElement(Stack, { "aria-label": (_a = strings.localVideoMovementAriaLabel) !== null && _a !== void 0 ? _a : strings.localVideoMovementLabel, tabIndex: 0, role: 'dialog' }, localVideoComponent));
+    const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
+    return (React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition, dataUiId: "floating-local-video-host" },
+        React.createElement(Stack, { "aria-label": (_a = strings.localVideoMovementAriaLabel) !== null && _a !== void 0 ? _a : strings.localVideoMovementLabel, tabIndex: 0, role: 'dialog' }, localVideoComponent)));
 };
 //# sourceMappingURL=FloatingLocalVideo.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,4CAA4C,EAAE,MAAM,oCAAoC,CAAC;AAChI,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EACJ,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEjD,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC;QAClG,2FAA2F;QAC3F,wDAAwD;QACxD,CAAC,EAAE,CAAC,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,4CAA4C,CAAC;QAC1H,CAAC,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,4CAA4C,CAAC;KAC7H,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAChC,MAAM,EAAE,WAAW;KACpB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IACnB,OAAO,oBAAC,WAAW,IAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,oBAAoB,EAAE,eAAe,EAAE,oBAAoB,EAAE,QAAQ,EAAC,2BAA2B;QAC1O,oBAAC,KAAK,kBAAa,MAAA,OAAO,CAAC,2BAA2B,mCAAI,OAAO,CAAC,uBAAuB,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,IACnH,mBAAmB,CACd,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport { floatingLocalVideoModalStyle, floatinglocalVideoModalInitialPositionGapRem } from './styles/FloatingLocalVideo.styles';\nimport { useLocale } from '../../localization';\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n  x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n  y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/**\n * @private\n */\nexport interface FloatingLocalVideoProps {\n  // Local video component to make draggable\n  localVideoComponent: JSX.Element;\n  // Element id of layer host to constrain the dragging of local video\n  layerHostId: string;\n  // Parent component width in px\n  parentWidth?: number;\n  // Parent component height in px\n  parentHeight?: number;\n  // Local video width and height in rem\n  localVideoSizeRem: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n  const {\n    localVideoComponent,\n    layerHostId,\n    localVideoSizeRem,\n    parentWidth,\n    parentHeight\n  } = props;\n  const theme = useTheme();\n  const strings = useLocale().strings.videoGallery;\n\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(() => parentWidth && parentHeight ? {\n    // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n    // hence (0,0) is the bottom right of the video gallery.\n    x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n    y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n  } : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);\n  const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n  const layerProps = useMemo(() => ({\n    hostId: layerHostId\n  }), [layerHostId]);\n  return <_ModalClone isOpen={true} isModeless={true} dragOptions={DRAG_OPTIONS} styles={modalStyles} layerProps={layerProps} maxDragPosition={modalMaxDragPosition} minDragPosition={modalMinDragPosition} dataUiId=\"floating-local-video-host\">\n      <Stack aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel} tabIndex={0} role={'dialog'}>\n        {localVideoComponent}\n      </Stack>\n    </_ModalClone>;\n};"]}
+{"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,4BAA4B,EAC5B,4CAA4C,EAC7C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEjD,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EACC,CAAC,WAAW;gBACZ,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC;gBACxC,eAAe,CAAC,4CAA4C,CAAC;YAC/D,CAAC,EACC,CAAC,YAAY;gBACb,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACzC,eAAe,CAAC,4CAA4C,CAAC;SAChE;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,EACrC,QAAQ,EAAC,2BAA2B;QAEpC,oBAAC,KAAK,kBACQ,MAAA,OAAO,CAAC,2BAA2B,mCAAI,OAAO,CAAC,uBAAuB,EAClF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,QAAQ,IAEb,mBAAmB,CACd,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport {\n  floatingLocalVideoModalStyle,\n  floatinglocalVideoModalInitialPositionGapRem\n} from './styles/FloatingLocalVideo.styles';\nimport { useLocale } from '../../localization';\n\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n  x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n  y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/**\n * @private\n */\nexport interface FloatingLocalVideoProps {\n  // Local video component to make draggable\n  localVideoComponent: JSX.Element;\n  // Element id of layer host to constrain the dragging of local video\n  layerHostId: string;\n  // Parent component width in px\n  parentWidth?: number;\n  // Parent component height in px\n  parentHeight?: number;\n  // Local video width and height in rem\n  localVideoSizeRem: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n  const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n  const theme = useTheme();\n  const strings = useLocale().strings.videoGallery;\n\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      parentWidth && parentHeight\n        ? {\n            // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n            // hence (0,0) is the bottom right of the video gallery.\n            x:\n              -parentWidth +\n              _convertRemToPx(localVideoSizeRem.width) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n            y:\n              -parentHeight +\n              _convertRemToPx(localVideoSizeRem.height) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n          }\n        : undefined,\n    [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n  );\n\n  const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n  const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n  return (\n    <_ModalClone\n      isOpen={true}\n      isModeless={true}\n      dragOptions={DRAG_OPTIONS}\n      styles={modalStyles}\n      layerProps={layerProps}\n      maxDragPosition={modalMaxDragPosition}\n      minDragPosition={modalMinDragPosition}\n      dataUiId=\"floating-local-video-host\"\n    >\n      <Stack\n        aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel}\n        tabIndex={0}\n        role={'dialog'}\n      >\n        {localVideoComponent}\n      </Stack>\n    </_ModalClone>\n  );\n};\n"]}

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

@@ -28,13 +28,15 @@ export const FloatingLocalVideoLayout = (props) => {
     // This is for tracking the number of children in the first page of overflow gallery.
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     const childrenPerPage = useRef(4);
-    const remoteVideosOn = remoteParticipants.filter(p => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
+    const remoteVideosOn = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            : childrenPerPage.current,
         pinnedParticipantUserIds,
         layout: 'floatingLocalVideo',
         spotlightedParticipantUserIds
@@ -58,34 +60,56 @@ export const FloatingLocalVideoLayout = (props) => {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {
-            return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
+            return isNarrow
+                ? SMALL_FLOATING_MODAL_SIZE_REM
+                : isShort
+                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
+                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
         if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {
             return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
         }
         return LARGE_FLOATING_MODAL_SIZE_REM;
-    }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, isShort, overflowGalleryPosition, localVideoTileSize]);
-    const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo || screenShareComponent && localVideoComponent ?
-        // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-        showCameraSwitcherInLocalPreview ? React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
-                boxShadow: theme.effects.elevation8,
-                zIndex: LOCAL_VIDEO_TILE_ZINDEX
-            }) }, localVideoComponent) : overflowGalleryTiles.length > 0 || screenShareComponent ? React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)) }, localVideoComponent) : React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }) : undefined;
+    }, [
+        overflowGalleryTiles.length,
+        isNarrow,
+        screenShareComponent,
+        isShort,
+        overflowGalleryPosition,
+        localVideoTileSize
+    ]);
+    const wrappedLocalVideoComponent = (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (
+    // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
+    showCameraSwitcherInLocalPreview ? (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
+            boxShadow: theme.effects.elevation8,
+            zIndex: LOCAL_VIDEO_TILE_ZINDEX
+        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = useMemo(() => {
         if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
-        return React.createElement(OverflowGallery, { isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
+        return (React.createElement(OverflowGallery, { isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            }, parentWidth: parentWidth });
-    }, [isNarrow, isShort, screenShareComponent, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles === null || styles === void 0 ? void 0 : styles.verticalGallery, parentWidth, localVideoComponent]);
-    return React.createElement(Stack, { styles: rootLayoutStyle },
+            }, parentWidth: parentWidth }));
+    }, [
+        isNarrow,
+        isShort,
+        screenShareComponent,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        overflowGalleryPosition,
+        setIndexesToRender,
+        styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth,
+        localVideoComponent
+    ]);
+    return (React.createElement(Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
         React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
         React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
-            screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
-            overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)));
+            screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+            overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition))));
 };
 const overflowGalleryTrampoline = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,6BAA6B,EAAE,4BAA4B,EAAE,wCAAwC,EAAE,uBAAuB,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACnN,OAAO,EAAE,8CAA8C,EAAE,wCAAwC,EAAE,MAAM,oCAAoC,CAAC;AAC9I,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,uCAAuC,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AACjI,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAuBpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;IAC5F,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,gCAAgC,EAChC,WAAW,EACX,YAAY,EACZ,uBAAuB,GAAG,kBAAkB,EAC5C,wBAAwB,GAAG,EAAE,EAC7B,kBAAkB,EAClB,6BAA6B,EAC9B,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAClE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,qFAAqF;IACrF,+GAA+G;IAC/G,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,cAAc,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAA,EAAA,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7F,MAAM,EACJ,gBAAgB,EAChB,2BAA2B,EAC5B,GAAG,wBAAwB,CAAC;QAC3B,kBAAkB;QAClB,gBAAgB;QAChB,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uCAAuC;QACrG,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,wBAAwB,CAAC,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;QACxK,wBAAwB;QACxB,MAAM,EAAE,oBAAoB;QAC5B,6BAA6B;KAC9B,CAAC,CAAC;IAEH;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACrE,MAAM,EACJ,SAAS,EACT,oBAAoB,EACrB,GAAG,WAAW,CAAC,gBAAgB,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,eAAe,EAAE,2BAA2B,EAAE,gBAAgB,CAAC,CAAC;IACpJ,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5D,IAAI,CAAC,qBAAqB,IAAI,mBAAmB,EAAE,CAAC;QAClD,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtC,CAAC;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,QAAQ,IAAI,kBAAkB,KAAK,MAAM,EAAE,CAAC;YAC9C,OAAO,6BAA6B,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAC7G,OAAO,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,wCAAwC,CAAC;QACxJ,CAAC;QACD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,kBAAkB,EAAE,CAAC;YAChH,OAAO,kBAAkB,KAAK,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,6BAA6B,CAAC;QACpH,CAAC;QACD,OAAO,6BAA6B,CAAC;IACvC,CAAC,EAAE,CAAC,oBAAoB,CAAC,MAAM,EAAE,QAAQ,EAAE,oBAAoB,EAAE,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACxH,MAAM,0BAA0B,GAAG,mBAAmB,IAAI,qBAAqB,IAAI,oBAAoB,IAAI,mBAAmB,CAAC,CAAC;QAChI,kGAAkG;QAClG,gCAAgC,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wCAAwC,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE;gBACnI,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;gBACnC,MAAM,EAAE,uBAAuB;aAChC,CAAC,IACO,mBAAmB,CACd,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,CAAC,IACxM,mBAAmB,CACd,CAAC,CAAC,CAAC,oBAAC,kBAAkB,IAAC,mBAAmB,EAAE,mBAAmB,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACpN,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,oBAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,CAAC,CAAC,mBAAmB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBAChY,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAC,CAAC;IACvM,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAChC,0BAA0B;QAC3B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IAAC,UAAU,EAAE,uBAAuB,KAAK,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB;YACpH,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK;YAC3E,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IAClG,SAAS,CACC;YACd,yBAAyB,CAAC,eAAe,EAAE,KAAK,CAAC,uBAAuB,CAAC,CACpE,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,OAA2B,EAAE,eAAwE,EAAsB,EAAE;IAC9J,OAAO,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAK,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize,\n    spotlightedParticipantUserIds\n  } = props;\n  const theme = useTheme();\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'floatingLocalVideo',\n    spotlightedParticipantUserIds\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  const {\n    gridTiles,\n    overflowGalleryTiles\n  } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n  const layerHostId = useId('layerhost');\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, isShort, overflowGalleryPosition, localVideoTileSize]);\n  const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo || screenShareComponent && localVideoComponent ?\n  // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n  showCameraSwitcherInLocalPreview ? <Stack className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n    boxShadow: theme.effects.elevation8,\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX\n  })}>\n          {localVideoComponent}\n        </Stack> : overflowGalleryTiles.length > 0 || screenShareComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition))}>\n          {localVideoComponent}\n        </Stack> : <FloatingLocalVideo localVideoComponent={localVideoComponent} layerHostId={layerHostId} localVideoSizeRem={localVideoSizeRem} parentWidth={parentWidth} parentHeight={parentHeight} /> : undefined;\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return <OverflowGallery isShort={isShort} onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={!!localVideoComponent} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth, localVideoComponent]);\n  return <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};"]}
+{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport {\n  MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n  renderTiles,\n  useOrganizedParticipants\n} from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize,\n    spotlightedParticipantUserIds\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter((p) => p.videoStream?.isAvailable).length > 0;\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'floatingLocalVideo',\n    spotlightedParticipantUserIds\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const { gridTiles, overflowGalleryTiles } = renderTiles(\n    gridParticipants,\n    onRenderRemoteParticipant,\n    maxRemoteVideoStreams,\n    indexesToRender,\n    overflowGalleryParticipants,\n    dominantSpeakers\n  );\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n          ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n          : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    isShort,\n    overflowGalleryPosition,\n    localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};\n"]}

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

@@ -11,8 +11,8 @@ import { useId } from '@fluentui/react-hooks';
 export const FocusedContentLayout = (props) => {
     const { screenShareComponent } = props;
     const layerHostId = useId('layerhost');
-    return React.createElement(Stack, { styles: rootLayoutStyle },
+    return (React.createElement(Stack, { styles: rootLayoutStyle },
         React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
-        React.createElement(Stack, { styles: innerLayoutStyle, tokens: videoGalleryLayoutGap }, screenShareComponent ? screenShareComponent : React.createElement(React.Fragment, null)));
+        React.createElement(Stack, { styles: innerLayoutStyle, tokens: videoGalleryLayoutGap }, screenShareComponent ? screenShareComponent : React.createElement(React.Fragment, null))));
 };
 //# sourceMappingURL=FocusContentLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusContentLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FocusContentLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAkB9C;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EACJ,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QACjC,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB,IAC3D,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,yCAAK,CAC9C,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, Stack, mergeStyles } from '@fluentui/react';\nimport { LayoutProps } from './Layout';\nimport React from 'react';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link FocusedContentLayout}.\n *\n * @private\n */\nexport interface FocusedContentLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n}\n\n/**\n * Video gallery layout to focus on the screenshare stream that is present in the call.\n */\nexport const FocusedContentLayout = (props: FocusedContentLayoutProps): JSX.Element => {\n  const {\n    screenShareComponent\n  } = props;\n  const layerHostId = useId('layerhost');\n  return <Stack styles={rootLayoutStyle}>\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {screenShareComponent ? screenShareComponent : <></>}\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"FocusContentLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FocusContentLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAkB9C;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAEvC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEvC,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC5B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB,IAC3D,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,yCAAK,CAC9C,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, Stack, mergeStyles } from '@fluentui/react';\nimport { LayoutProps } from './Layout';\nimport React from 'react';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link FocusedContentLayout}.\n *\n * @private\n */\nexport interface FocusedContentLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n}\n\n/**\n * Video gallery layout to focus on the screenshare stream that is present in the call.\n */\nexport const FocusedContentLayout = (props: FocusedContentLayoutProps): JSX.Element => {\n  const { screenShareComponent } = props;\n\n  const layerHostId = useId('layerhost');\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {screenShareComponent ? screenShareComponent : <></>}\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { LayoutProps } from './Layout';
+/**
+ * Props for {@link LargeGalleryLayout}.
+ *
+ * @private
+ */
+export type LargeGalleryProps = LayoutProps;
+/**
+ * VideoGallery Layout for when user is in a large meeting and wants to see more participants
+ *
+ * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.
+ *
+ * @private
+ */
+export declare const LargeGalleryLayout: (props: LargeGalleryProps) => JSX.Element;
+//# sourceMappingURL=LargeGalleryLayout.d.ts.map

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

@@ -0,0 +1,99 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useMemo, useRef, useState } from 'react';
+import { isNarrowWidth } from '../utils/responsive';
+import { isShortHeight } from '../utils/responsive';
+import { OverflowGallery } from './OverflowGallery';
+import { GridLayout } from '../GridLayout';
+import { Stack } from '@fluentui/react';
+import { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { rootLayoutStyle } from './styles/DefaultLayout.styles';
+import { videoGalleryLayoutGap } from './styles/Layout.styles';
+import { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+const REM_TO_PIXEL = 16;
+const LARGE_GALLERY_PARTICIPANT_CAP = 48;
+/**
+ * VideoGallery Layout for when user is in a large meeting and wants to see more participants
+ *
+ * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.
+ *
+ * @private
+ */
+export const LargeGalleryLayout = (props) => {
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, parentHeight, pinnedParticipantUserIds = [], overflowGalleryPosition = 'horizontalBottom', spotlightedParticipantUserIds = [] } = props;
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+    const maxStreamsTrampoline = () => {
+        return parentWidth && parentHeight
+            ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)
+            : maxRemoteVideoStreams;
+    };
+    // This is for tracking the number of children in the first page of overflow gallery.
+    // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
+    // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
+    const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);
+    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
+        remoteParticipants,
+        localParticipant,
+        dominantSpeakers,
+        maxGridParticipants: maxStreamsTrampoline(),
+        isScreenShareActive: !!screenShareComponent,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
+            : childrenPerPage.current,
+        pinnedParticipantUserIds,
+        /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery',
+        spotlightedParticipantUserIds
+    });
+    /**
+     * instantiate indexes available to render with indexes available that would be on first page
+     *
+     * For some components which do not strictly follow the order of the array, we might
+     * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
+     * this case when those components are here
+     */
+    const [indexesToRender, setIndexesToRender] = useState([]);
+    let { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
+    if (localVideoComponent) {
+        if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {
+            overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
+        }
+        else {
+            gridTiles = [localVideoComponent].concat(gridTiles);
+        }
+    }
+    const overflowGallery = useMemo(() => {
+        if (overflowGalleryTiles.length === 0) {
+            return null;
+        }
+        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+                childrenPerPage.current = n;
+            }, parentWidth: parentWidth }));
+    }, [
+        isNarrow,
+        isShort,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        overflowGalleryPosition,
+        setIndexesToRender,
+        styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
+    ]);
+    return (React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+        props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
+        screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)));
+};
+const overflowGalleryTrampoline = (gallery, galleryPosition) => {
+    return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
+    return gallery;
+};
+const calculateMaxTilesInLargeGrid = (parentWidth, parentHeight) => {
+    const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));
+    const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));
+    return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP
+        ? xAxisTiles * yAxisTiles
+        : LARGE_GALLERY_PARTICIPANT_CAP;
+};
+//# sourceMappingURL=LargeGalleryLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\nconst REM_TO_PIXEL = 16;\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n  };\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery',\n    spotlightedParticipantUserIds\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let { gridTiles, overflowGalleryTiles } = renderTiles(\n    gridParticipants,\n    onRenderRemoteParticipant,\n    maxRemoteVideoStreams,\n    indexesToRender,\n    overflowGalleryParticipants,\n    dominantSpeakers\n  );\n\n  if (localVideoComponent) {\n    if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}

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

@@ -50,5 +50,10 @@ export interface LayoutProps {
      * List of spotlighted participant userIds
      */
     spotlightedParticipantUserIds?: string[];
+    /**
+     * Props for a layout component
+     *
+     */
+    togetherModeStreamComponent?: JSX.Element;
 }
 //# sourceMappingURL=Layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\nimport { OverflowGalleryPosition } from '../VideoGallery';\n\n/**\n * Props for a layout component\n *\n * @private\n */\nexport interface LayoutProps {\n  /**\n   * Styles for the {@link DefaultLayout}\n   */\n  styles?: Omit<VideoGalleryStyles, 'root'>;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** Local participant information */\n  localParticipant?: VideoGalleryParticipant;\n  /** Callback to render each remote participant */\n  onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Component that contains local video content */\n  localVideoComponent?: JSX.Element;\n  /** Component that contains screen share content */\n  screenShareComponent?: JSX.Element;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams: number;\n  /**\n   * Width of parent element\n   */\n  parentWidth?: number;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * List of pinned participant userIds\n   */\n  pinnedParticipantUserIds?: string[];\n  /**\n   * Determines the layout of the overflowGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  /**\n   * List of spotlighted participant userIds\n   */\n  spotlightedParticipantUserIds?: string[];\n}"]}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\nimport { OverflowGalleryPosition } from '../VideoGallery';\n\n/**\n * Props for a layout component\n *\n * @private\n */\nexport interface LayoutProps {\n  /**\n   * Styles for the {@link DefaultLayout}\n   */\n  styles?: Omit<VideoGalleryStyles, 'root'>;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** Local participant information */\n  localParticipant?: VideoGalleryParticipant;\n  /** Callback to render each remote participant */\n  onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Component that contains local video content */\n  localVideoComponent?: JSX.Element;\n  /** Component that contains screen share content */\n  screenShareComponent?: JSX.Element;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams: number;\n  /**\n   * Width of parent element\n   */\n  parentWidth?: number;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * List of pinned participant userIds\n   */\n  pinnedParticipantUserIds?: string[];\n  /**\n   * Determines the layout of the overflowGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  /**\n   * List of spotlighted participant userIds\n   */\n  spotlightedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(together-mode) */\n  /**\n   * Props for a layout component\n   *\n   */\n  togetherModeStreamComponent?: JSX.Element;\n}\n"]}

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

@@ -25,8 +25,12 @@ export const LocalScreenShare = React.memo((props) => {
     if (!localParticipant || !localParticipant.isScreenSharingOn) {
         return null;
     }
-    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName) ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
+    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName)
+        ? locale.strings.videoGallery.displayNamePlaceholder
+        : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
     const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;
-    return React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), mediaAccess: localParticipant.mediaAccess });
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), 
+        /* @conditional-compile-remove(media-access) */
+        mediaAccess: localParticipant.mediaAccess }));
 });
 //# sourceMappingURL=LocalScreenShare.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAM3C,EAAE,EAAE;IACH,MAAM,EACJ,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,uBAAuB,EACvB,mCAAmC,EACpC,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,uBAAuB,IAAI,uBAAuB,EAAE,CAAC;IACvD,CAAC;IACD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,mCAAmC,IAAI,mCAAmC,EAAE,CAAC;QAC/E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mCAAmC,CAAC,CAAC,CAAC;IAC1C,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAC;IACxI,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,8BAA8B,CAAC;IAClF,OAAO,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAAC,CAAC,CAAC,SAAS,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,EAAE,WAAW,EAAE,gBAAgB,CAAC,WAAW,GAAI,CAAC;AACxW,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { CreateVideoStreamViewResult, VideoGalleryLocalParticipant, VideoStreamOptions } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport { StreamMedia } from '../StreamMedia';\nimport { LoadingSpinner } from './RemoteScreenShare';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo((props: {\n  localParticipant: VideoGalleryLocalParticipant;\n  renderElement?: HTMLElement;\n  isAvailable?: boolean;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n}) => {\n  const {\n    localParticipant,\n    renderElement,\n    isAvailable,\n    onCreateLocalStreamView,\n    onDisposeLocalScreenShareStreamView\n  } = props;\n  const locale = useLocale();\n  if (!renderElement) {\n    onCreateLocalStreamView && onCreateLocalStreamView();\n  }\n  useEffect(() => {\n    return () => {\n      // TODO: Isolate disposing behaviors for screenShare and videoStream\n      onDisposeLocalScreenShareStreamView && onDisposeLocalScreenShareStreamView();\n    };\n  }, [onDisposeLocalScreenShareStreamView]);\n  if (!localParticipant || !localParticipant.isScreenSharingOn) {\n    return null;\n  }\n  const displayName = !localParticipant?.displayName ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant?.displayName;\n  const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;\n  return <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} loadingState={isAvailable === false ? 'loading' : 'none'} /> : undefined} onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />} mediaAccess={localParticipant.mediaAccess} />;\n});"]}
+{"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAMA,EAAE,EAAE;IACH,MAAM,EACJ,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,uBAAuB,EACvB,mCAAmC,EACpC,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,uBAAuB,IAAI,uBAAuB,EAAE,CAAC;IACvD,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,mCAAmC,IAAI,mCAAmC,EAAE,CAAC;QAC/E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mCAAmC,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA;QAChD,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB;QACpD,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAC;IAElC,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,8BAA8B,CAAC;IAElF,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAClC,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI;QAC7E,+CAA+C;QAC/C,WAAW,EAAE,gBAAgB,CAAC,WAAW,GACzC,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { CreateVideoStreamViewResult, VideoGalleryLocalParticipant, VideoStreamOptions } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport { StreamMedia } from '../StreamMedia';\nimport { LoadingSpinner } from './RemoteScreenShare';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo(\n  (props: {\n    localParticipant: VideoGalleryLocalParticipant;\n    renderElement?: HTMLElement;\n    isAvailable?: boolean;\n    onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n  }) => {\n    const {\n      localParticipant,\n      renderElement,\n      isAvailable,\n      onCreateLocalStreamView,\n      onDisposeLocalScreenShareStreamView\n    } = props;\n    const locale = useLocale();\n    if (!renderElement) {\n      onCreateLocalStreamView && onCreateLocalStreamView();\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeLocalScreenShareStreamView && onDisposeLocalScreenShareStreamView();\n      };\n    }, [onDisposeLocalScreenShareStreamView]);\n\n    if (!localParticipant || !localParticipant.isScreenSharingOn) {\n      return null;\n    }\n\n    const displayName = !localParticipant?.displayName\n      ? locale.strings.videoGallery.displayNamePlaceholder\n      : localParticipant?.displayName;\n\n    const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={localParticipant?.isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isAvailable === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n        /* @conditional-compile-remove(media-access) */\n        mediaAccess={localParticipant.mediaAccess}\n      />\n    );\n  }\n);\n"]}