npm - @azure/communication-react - Versions diffs - 1.13.0-beta.1 → 1.13.1-alpha-202402280012 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1110) hide show

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

@@ -0,0 +1,132 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useMemo, useRef, useState } from 'react';
+import { isNarrowWidth } from '../utils/responsive';
+/* @conditional-compile-remove(gallery-layouts) */
+import { isShortHeight } from '../utils/responsive';
+import { OverflowGallery } from './OverflowGallery';
+import { GridLayout } from '../GridLayout';
+import { Stack } from '@fluentui/react';
+import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { rootLayoutStyle } from './styles/DefaultLayout.styles';
+import { videoGalleryLayoutGap } from './styles/Layout.styles';
+/* @conditional-compile-remove(gallery-layouts) */
+import { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+/* @conditional-compile-remove(gallery-layouts) */
+const REM_TO_PIXEL = 16;
+/* @conditional-compile-remove(gallery-layouts) */
+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,
+    /* @conditional-compile-remove(gallery-layouts) */ parentHeight, pinnedParticipantUserIds = [],
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom' } = props;
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    /* @conditional-compile-remove(gallery-layouts) */
+    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+    const maxStreamsTrampoline = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        return parentWidth && parentHeight
+            ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)
+            : maxRemoteVideoStreams;
+        return 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,
+        maxRemoteVideoStreams: maxStreamsTrampoline(),
+        isScreenShareActive: !!screenShareComponent,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
+            : childrenPerPage.current,
+        pinnedParticipantUserIds,
+        /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
+    });
+    let activeVideoStreams = 0;
+    let gridTiles = gridParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    /**
+     * 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 overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    if (localVideoComponent) {
+        if (screenShareComponent) {
+            overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
+        }
+        else {
+            gridTiles = [localVideoComponent].concat(gridTiles);
+        }
+    }
+    const overflowGallery = useMemo(() => {
+        if (overflowGalleryTiles.length === 0) {
+            return null;
+        }
+        return (React.createElement(OverflowGallery, { isNarrow: isNarrow,
+            /* @conditional-compile-remove(gallery-layouts) */
+            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+            /* @conditional-compile-remove(vertical-gallery) */
+            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+                childrenPerPage.current = n;
+            }, parentWidth: parentWidth }));
+    }, [
+        isNarrow,
+        /* @conditional-compile-remove(gallery-layouts) */ isShort,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        setIndexesToRender,
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
+    ]);
+    return (React.createElement(Stack
+    /* @conditional-compile-remove(vertical-gallery) */
+    , {
+        /* @conditional-compile-remove(vertical-gallery) */
+        horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+        /* @conditional-compile-remove(gallery-layouts) */ 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,
+        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition)));
+};
+const overflowGalleryTrampoline = (gallery, galleryPosition) => {
+    /* @conditional-compile-remove(gallery-layouts) */
+    return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
+    return gallery;
+};
+/* @conditional-compile-remove(gallery-layouts) */
+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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,kDAAkD;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,kDAAkD;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AASvG,MAAM,yBAAyB,GAAG,CAAC,CAAC;AACpC,kDAAkD;AAClD,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,kDAAkD;AAClD,MAAM,6BAA6B,GAAG,EAAE,CAAC;AACzC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC1E,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW;IACX,kDAAkD,CAAC,YAAY,EAC/D,wBAAwB,GAAG,EAAE;IAC7B,mDAAmD,CAAC,uBAAuB,GAAG,kBAAkB,EACjG,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAClE,kDAAkD;IAClD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,MAAM,oBAAoB,GAAG,GAAW,EAAE;QACxC,kDAAkD;QAClD,OAAO,WAAW,IAAI,YAAY;YAChC,CAAC,CAAC,4BAA4B,CAAC,WAAW,EAAE,YAAY,CAAC;YACzD,CAAC,CAAC,qBAAqB,CAAC;QAC1B,OAAO,qBAAqB,CAAC;IAC/B,CAAC,CAAC;IAEF,qFAAqF;IACrF,+GAA+G;IAC/G,iHAAiH;IACjH,MAAM,eAAe,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAC;IAC1D,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,wBAAwB,CAAC;QACjF,kBAAkB;QAClB,gBAAgB;QAChB,gBAAgB;QAChB,qBAAqB,EAAE,oBAAoB,EAAE;QAC7C,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB;YACtD,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC,wBAAwB,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC;YAC7F,CAAC,CAAC,eAAe,CAAC,OAAO;QAC3B,wBAAwB;QACxB,gDAAgD,CAAC,MAAM,EAAE,cAAc;KACxE,CAAC,CAAC;IACH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,IAAI,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QACzC,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,IAAI,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QAClE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC3G,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,mBAAmB,EAAE,CAAC;QACxB,IAAI,oBAAoB,EAAE,CAAC;YACzB,oBAAoB,GAAG,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ;YAClB,kDAAkD;YAClD,OAAO,EAAE,OAAO,EAChB,qBAAqB,EAAE,KAAK,EAC5B,uBAAuB,EAAE,oBAAoB,EAC7C,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;YAClD,mDAAmD;YACnD,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;YAC9C,mDAAmD;YACnD,uBAAuB,EAAE,uBAAuB,EAChD,oBAAoB,EAAE,kBAAkB,EACxC,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBACrC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EACD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IACJ,CAAC,EAAE;QACD,QAAQ;QACR,kDAAkD,CAAC,OAAO;QAC1D,oBAAoB;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;QACzB,mDAAmD,CAAC,uBAAuB;QAC3E,kBAAkB;QAClB,mDAAmD,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;QAC3E,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,KAAK;IACJ,mDAAmD;;QAAnD,mDAAmD;QACnD,UAAU,EAAE,uBAAuB,KAAK,eAAe,EACvD,MAAM,EAAE,eAAe,EACvB,MAAM,EAAE,qBAAqB;QAG3B,kDAAkD,CAAC,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,CACrG,eAAe,CAChB,CAAC,CAAC,CAAC,CACF,yCAAK,CACN;QAEF,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAoB,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IACrD,SAAS,CACC,CACd;QACA,yBAAyB,CACxB,eAAe;QACf,kDAAkD,CAAC,KAAK,CAAC,uBAAuB,CACjF,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,OAA2B,EAC3B,eAAwE,EACpD,EAAE;IACtB,kDAAkD;IAClD,OAAO,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAK,CAAC;IAC7D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,kDAAkD;AAClD,MAAM,4BAA4B,GAAG,CAAC,WAAmB,EAAE,YAAoB,EAAU,EAAE;IACzF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,8BAA8B,CAAC,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC;IACnG,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,CAAC,8BAA8B,CAAC,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC;IACxG,OAAO,UAAU,GAAG,UAAU,GAAG,6BAA6B;QAC5D,CAAC,CAAC,UAAU,GAAG,UAAU;QACzB,CAAC,CAAC,6BAA6B,CAAC;AACpC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\n/* @conditional-compile-remove(gallery-layouts) */\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;\n/* @conditional-compile-remove(gallery-layouts) */\nconst REM_TO_PIXEL = 16;\n/* @conditional-compile-remove(gallery-layouts) */\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 /* @conditional-compile-remove(gallery-layouts) */ parentHeight,\n pinnedParticipantUserIds = [],\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom'\n } = props;\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n /* @conditional-compile-remove(gallery-layouts) */\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n const maxStreamsTrampoline = (): number => {\n /* @conditional-compile-remove(gallery-layouts) */\n return parentWidth && parentHeight\n ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n : maxRemoteVideoStreams;\n return 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 maxRemoteVideoStreams: 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 });\n let activeVideoStreams = 0;\n\n let gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\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 overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n if (localVideoComponent) {\n if (screenShareComponent) {\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 /* @conditional-compile-remove(gallery-layouts) */\n isShort={isShort}\n shouldFloatLocalVideo={false}\n overflowGalleryElements={overflowGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n /* @conditional-compile-remove(vertical-gallery) */\n verticalGalleryStyles={styles?.verticalGallery}\n /* @conditional-compile-remove(vertical-gallery) */\n overflowGalleryPosition={overflowGalleryPosition}\n onFetchTilesToRender={setIndexesToRender}\n onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }}\n parentWidth={parentWidth}\n />\n );\n }, [\n isNarrow,\n /* @conditional-compile-remove(gallery-layouts) */ isShort,\n overflowGalleryTiles,\n styles?.horizontalGallery,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n setIndexesToRender,\n /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,\n parentWidth\n ]);\n\n return (\n <Stack\n /* @conditional-compile-remove(vertical-gallery) */\n horizontal={overflowGalleryPosition === 'verticalRight'}\n styles={rootLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {\n /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (\n overflowGallery\n ) : (\n <></>\n )\n }\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGalleryTrampoline(\n overflowGallery,\n /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n )}\n </Stack>\n );\n};\n\nconst overflowGalleryTrampoline = (\n gallery: JSX.Element | null,\n galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n /* @conditional-compile-remove(gallery-layouts) */\n return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n return gallery;\n};\n\n/* @conditional-compile-remove(gallery-layouts) */\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 CHANGED Viewed

@@ -46,5 +46,9 @@ export interface LayoutProps {
      * @defaultValue 'horizontalBottom'
      */
     overflowGalleryPosition?: OverflowGalleryPosition;
+    /**
+     * List of spotlighted participant userIds
+     */
+    spotlightedParticipantUserIds?: string[];
 }
 //# sourceMappingURL=Layout.d.ts.map

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

	@@ -1 +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';\n/* @conditional-compile-remove(vertical-gallery) /\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 / @conditional-compile-remove(vertical-gallery) /\n /\n Determines the layout of the overflowGallery.\n * @defaultValue 'horizontalBottom'\n */\n overflowGalleryPosition?: OverflowGalleryPosition;\n}"]}
1	+ {"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';\n/* @conditional-compile-remove(vertical-gallery) /\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 / @conditional-compile-remove(vertical-gallery) /\n /\n Determines the layout of the overflowGallery.\n * @defaultValue 'horizontalBottom'\n /\n overflowGalleryPosition?: OverflowGalleryPosition;\n / @conditional-compile-remove(spotlight) /\n /\n List of spotlighted participant userIds\n */\n spotlightedParticipantUserIds?: string[];\n}\n"]}

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

@@ -18,14 +18,14 @@ export const LocalScreenShare = React.memo((props) => {
     if (!localParticipant || !localParticipant.isScreenSharingOn) {
         return null;
     }
-    const localScreenSharingNotification = React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
-        React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: {
-                childrenGap: '1rem'
-            } },
+    const localScreenSharingNotification = (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
+        React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: { childrenGap: '1rem' } },
             React.createElement(Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
                 React.createElement(Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
-            React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage)));
-    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName) ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
-    return React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingNotification);
+            React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage))));
+    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName)
+        ? locale.strings.videoGallery.displayNamePlaceholder
+        : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingNotification));
 });
 //# sourceMappingURL=LocalScreenShare.js.map

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

	@@ -1 +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,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,~~EAAE~~,2BAA2B,~~EAAE~~,uCAAuC,~~EAAE~~,2CAA2C,~~EAAE~~,kCAAkC,~~EAAE~~,kCAAkC,~~EAAE~~,MAAM,kCAAkC,CAAC;~~AAE7O~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,~~KAE3C~~,EAAE,EAAE;~~IACH~~,MAAM,~~EACJ~~,gBAAgB,~~EACjB~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;~~IAC3B~~,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAC;IACd,CAAC;~~IACD~~,MAAM,8BAA8B,GAAG,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;~~QAChI~~,oBAAC,KAAK,~~IAAC~~,eAAe,EAAC,QAAQ,~~EAAC~~,aAAa,EAAC,QAAQ,~~EAAC~~,SAAS,EAAE,uCAAuC,CAAC,KAAK,CAAC,~~EAAE~~,MAAM,EAAE~~;gBAC1H~~,WAAW,EAAE,MAAM;~~aACpB;YACG~~,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2CAA2C;gBAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,kCAAkC,CAAC,KAAK,CAAC,GAAI,CACjG;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,kCAAkC,eAAY,QAAQ,IACpE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAClD,CACD,CACF,CAAC;~~IACX~~,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~~,OAAO,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,yCAAK,~~IAC3G~~,8BAA8B,CACrB,CAAC;~~AACjB~~,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../../localization';\nimport { useTheme } from '../../theming';\nimport { VideoGalleryLocalParticipant } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport { screenSharingContainerStyle, screenSharingNotificationContainerStyle, screenSharingNotificationIconContainerStyle, screenSharingNotificationIconStyle, screenSharingNotificationTextStyle } from './styles/LocalScreenShare.styles';\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~~}) => {\n const {\n localParticipant\n } = props;\n const theme = useTheme();\n const locale = useLocale();\n if (!localParticipant \|\| !localParticipant.isScreenSharingOn) {\n return null;\n }\n const localScreenSharingNotification = <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingContainerStyle}>\n <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingNotificationContainerStyle(theme)} tokens={{\n childrenGap: '1rem'\n }}>\n <Stack horizontal verticalAlign=\"center\" className={screenSharingNotificationIconContainerStyle}>\n <Icon iconName=\"ControlButtonScreenShareStart\" className={screenSharingNotificationIconStyle(theme)} />\n </Stack>\n <Text className={screenSharingNotificationTextStyle} aria-live=\"polite\">\n {locale.strings.videoGallery.screenIsBeingSharedMessage}\n </Text>\n </Stack>\n </Stack~~>;\~~n const displayName = !localParticipant?.displayName ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant?.displayName;\n return <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>\n {localScreenSharingNotification}\n </VideoTile~~>;\~~n});"]}
1	+ {"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,EACvC,2CAA2C,EAC3C,kCAAkC,EAClC,kCAAkC,EACnC,MAAM,kCAAkC,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAyD,EAAE,EAAE;IACvG,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAEnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,8BAA8B,GAAG,CACrC,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;QAC3F,oBAAC,KAAK,IACJ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,uCAAuC,CAAC,KAAK,CAAC,EACzD,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;YAE/B,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2CAA2C;gBAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,kCAAkC,CAAC,KAAK,CAAC,GAAI,CACjG;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,kCAAkC,eAAY,QAAQ,IACpE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAClD,CACD,CACF,CACT,CAAC;IAEF,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,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,yCAAK,IACtG,8BAA8B,CACrB,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../../localization';\nimport { useTheme } from '../../theming';\nimport { VideoGalleryLocalParticipant } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport {\n screenSharingContainerStyle,\n screenSharingNotificationContainerStyle,\n screenSharingNotificationIconContainerStyle,\n screenSharingNotificationIconStyle,\n screenSharingNotificationTextStyle\n} from './styles/LocalScreenShare.styles';\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: { localParticipant: VideoGalleryLocalParticipant }) => {\n const { localParticipant } = props;\n\n const theme = useTheme();\n const locale = useLocale();\n\n if (!localParticipant \|\| !localParticipant.isScreenSharingOn) {\n return null;\n }\n\n const localScreenSharingNotification = (\n <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingContainerStyle}>\n <Stack\n horizontalAlign=\"center\"\n verticalAlign=\"center\"\n className={screenSharingNotificationContainerStyle(theme)}\n tokens={{ childrenGap: '1rem' }}\n >\n <Stack horizontal verticalAlign=\"center\" className={screenSharingNotificationIconContainerStyle}>\n <Icon iconName=\"ControlButtonScreenShareStart\" className={screenSharingNotificationIconStyle(theme)} />\n </Stack>\n <Text className={screenSharingNotificationTextStyle} aria-live=\"polite\">\n {locale.strings.videoGallery.screenIsBeingSharedMessage}\n </Text>\n </Stack>\n </Stack>\n );\n\n const displayName = !localParticipant?.displayName\n ? locale.strings.videoGallery.displayNamePlaceholder\n : localParticipant?.displayName;\n\n return (\n <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>\n {localScreenSharingNotification}\n </VideoTile>\n );\n});\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js CHANGED Viewed

@@ -30,34 +30,46 @@ export const OverflowGallery = (props) => {
             return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
         }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
-    }, [shouldFloatLocalVideo, /* @conditional-compile-remove(vertical-gallery) */ isShort, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition]);
+    }, [
+        shouldFloatLocalVideo,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
+    ]);
     const galleryStyles = useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryPosition === 'verticalRight') {
             return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);
         }
         return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
-    }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */ isShort, horizontalGalleryStyles, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles]);
+    }, [
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        horizontalGalleryStyles,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles
+    ]);
     const scrollableHorizontalGalleryContainerStyles = useMemo(() => {
         if (isNarrow && parentWidth) {
             return {
-                width: shouldFloatLocalVideo ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem` : `${_convertPxToRem(parentWidth) - 1}rem`
+                width: shouldFloatLocalVideo
+                    ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`
+                    : `${_convertPxToRem(parentWidth) - 1}rem`
             };
         }
         return undefined;
     }, [isNarrow, parentWidth, shouldFloatLocalVideo]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryPosition === 'verticalRight') {
-        return React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
+        return (React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]));
     }
     SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;
-    /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
         // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
         // participant tiles are visible
         onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
-        return React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery", containerStyles: scrollableHorizontalGalleryContainerStyles });
+        return (React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery", containerStyles: scrollableHorizontalGalleryContainerStyles }));
     }
-    return React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
+    return (React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]));
 };
 //# sourceMappingURL=OverflowGallery.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAK7G,kDAAkD;AAClD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,~~EAAE~~,sCAAsC,~~EAAE~~,+BAA+B,~~EAAE~~,sBAAsB,~~EAAE~~,MAAM,yDAAyD,CAAC;~~AAC1K~~,mDAAmD;AACnD,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,~~EAAE~~,6BAA6B,~~EAAE~~,oBAAoB,~~EAAE~~,MAAM,uDAAuD,CAAC;~~AAE5H~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAc/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,oBAAoB,EACpB,QAAQ,GAAG,KAAK;IAChB,mDAAmD;IACnD,OAAO,GAAG,KAAK,EACf,uBAAuB,EACvB,uBAAuB;IACvB,mDAAmD,~~CAAA~~,uBAAuB,GAAG,kBAAkB;~~IAC/F~~,mDAAmD,~~CAAA~~,qBAAqB,~~EACxE~~,uBAAuB,EACvB,WAAW,EACZ,GAAG,KAAK,CAAC;~~IACV~~,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,mDAAmD;QACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAChD,OAAO,6BAA6B,CAAC,qBAAqB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACjF,CAAC;QACD,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE,~~CAAC,~~qBAAqB,~~EAAE,~~mDAAmD,~~CAAA~~,OAAO,~~EAAE,~~QAAQ,~~EAAE,~~mDAAmD,~~CAAA~~,uBAAuB,CAAC,CAAC~~,CAAC~~;~~IAC9K~~,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAChD,OAAO,eAAe,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC;QAC/E,CAAC;QACD,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC;IACpF,CAAC,EAAE,~~CAAC,~~QAAQ,~~EAAE,~~mDAAmD,~~CAAA~~,OAAO,~~EAAE,~~uBAAuB,~~EAAE,~~mDAAmD,~~CAAA~~,uBAAuB,~~EAAE,~~mDAAmD,~~CAAA~~,qBAAqB,CAAC,CAAC~~,CAAC~~;~~IAC1P~~,MAAM,0CAA0C,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9D,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC5B,OAAO;gBACL,KAAK,EAAE,qBAAqB,CAAC,CAAC,~~CAAC,~~GAAG,eAAe,CAAC,WAAW,CAAC,GAAG,6BAA6B,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,~~CAAC,~~GAAG,eAAe,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK;~~aACzJ~~,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEnD,mDAAmD;IACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;QAChD,OAAO,oBAAC,yBAAyB,~~IAAC~~,GAAG,EAAC,6BAA6B,~~EAAC~~,eAAe,EAAE,eAAe,~~EAAE~~,qBAAqB,~~EAAG~~,~~aAAuC~~,~~EAAE~~,mBAAmB,EAAE,+BAA+B,~~EAAE~~,YAAY,EAAE,sBAAsB,~~EAAE~~,OAAO,EAAE,OAAO,~~EAAE~~,oBAAoB,EAAE,oBAAoB,~~EAAE~~,uBAAuB,EAAE,uBAAuB,~~IAC5W~~,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,CAClC,CAAC;~~IACjC~~,CAAC;~~IACD~~,sCAAsC,CAAC;IAEvC,~~sDAAsD;IACtD,~~IAAI,QAAQ,EAAE,CAAC;QACb,+FAA+F;QAC/F,gCAAgC;QAChC,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,CAAC,CAAC,CAAC;~~QAC7B~~,OAAO,oBAAC,2BAA2B,~~IAAC~~,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,~~EAAE~~,oBAAoB,EAAE,oBAAoB,~~EAAE~~,GAAG,EAAC,+BAA+B,~~EAAC~~,eAAe,EAAE,0CAA0C,~~GAAI~~,CAAC;~~IAC9Q~~,CAAC;~~IACD~~,OAAO,oBAAC,2BAA2B,~~IAAC~~,GAAG,EAAC,+BAA+B,~~EAAC~~,eAAe,EAAE,eAAe,~~EAAE~~,oBAAoB,EAAE,oBAAoB,~~EAAE~~,uBAAuB,EAAE,aAAa,~~EAAE~~,cAAc,EAAE,+BAA+B,~~EAAE~~,WAAW,EAAE,sBAAsB,~~EAAE~~,uBAAuB,EAAE,uBAAuB,~~IAC~~/T,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,CAChC,CAAC;~~AACnC~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { VerticalGalleryStyles } from '../VerticalGallery';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { OverflowGalleryPosition } from '../VideoGallery';\n/ @conditional-compile-remove(gallery-layouts) /\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { _convertPxToRem } from '@internal/acs-ui-common';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { verticalGalleryContainerStyle, verticalGalleryStyle } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/\n A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n \n @private\n /\nexport const OverflowGallery = (props: {\n shouldFloatLocalVideo?: boolean;\n onFetchTilesToRender?: (indexes: number[]) => void;\n isNarrow?: boolean;\n / @conditional-compile-remove(vertical-gallery) /\n isShort?: boolean;\n overflowGalleryElements?: JSX.Element[];\n horizontalGalleryStyles?: HorizontalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n verticalGalleryStyles?: VerticalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryPosition?: OverflowGalleryPosition;\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n parentWidth?: number;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n onFetchTilesToRender,\n isNarrow = false,\n / @conditional-compile-remove(vertical-gallery) /\n isShort = false,\n overflowGalleryElements,\n horizontalGalleryStyles,\n / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition = 'horizontalBottom',\n / @conditional-compile-remove(vertical-gallery) /verticalGalleryStyles,\n onChildrenPerPageChange,\n parentWidth\n } = props;\n const containerStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'verticalRight') {\n return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n }\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [shouldFloatLocalVideo, / @conditional-compile-remove(vertical-gallery) /isShort, isNarrow, / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition]);\n const galleryStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'verticalRight') {\n return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n }\n return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n }, [isNarrow, / @conditional-compile-remove(vertical-gallery) /isShort, horizontalGalleryStyles, / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition, / @conditional-compile-remove(vertical-gallery) /verticalGalleryStyles]);\n const scrollableHorizontalGalleryContainerStyles = useMemo(() => {\n if (isNarrow && parentWidth) {\n return {\n width: shouldFloatLocalVideo ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem` : `${_convertPxToRem(parentWidth) - 1}rem`\n };\n }\n return undefined;\n }, [isNarrow, parentWidth, shouldFloatLocalVideo]);\n\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'verticalRight') {\n return <ResponsiveVerticalGallery key=\"responsive-vertical-gallery\" containerStyles={containerStyles} verticalGalleryStyles={(galleryStyles as VerticalGalleryStyles)} controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH} gapHeightRem={HORIZONTAL_GALLERY_GAP} isShort={isShort} onFetchTilesToRender={onFetchTilesToRender} onChildrenPerPageChange={onChildrenPerPageChange}>\n {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n </ResponsiveVerticalGallery~~>;\~~n }\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;\n\n ~~/ @conditional-compile-remove(pinned-participants) */\n~~ if (isNarrow) {\n // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n // participant tiles are visible\n onChildrenPerPageChange?.(3);\n return <ScrollableHorizontalGallery horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]} onFetchTilesToRender={onFetchTilesToRender} key=\"scrollable-horizontal-gallery\" containerStyles={scrollableHorizontalGalleryContainerStyles} ~~/>;\~~n }\n return <ResponsiveHorizontalGallery key=\"responsive-horizontal-gallery\" containerStyles={containerStyles} onFetchTilesToRender={onFetchTilesToRender} horizontalGalleryStyles={galleryStyles} buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH} gapWidthRem={HORIZONTAL_GALLERY_GAP} onChildrenPerPageChange={onChildrenPerPageChange}>\n {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n </ResponsiveHorizontalGallery~~>;\~~n};"]}
1	+ {"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAK7G,kDAAkD;AAClD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EACL,sCAAsC,EACtC,+BAA+B,EAC/B,sBAAsB,EACvB,MAAM,yDAAyD,CAAC;AACjE,mDAAmD;AACnD,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,EACL,6BAA6B,EAC7B,oBAAoB,EACrB,MAAM,uDAAuD,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAc/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,oBAAoB,EACpB,QAAQ,GAAG,KAAK;IAChB,mDAAmD;IACnD,OAAO,GAAG,KAAK,EACf,uBAAuB,EACvB,uBAAuB;IACvB,mDAAmD,CAAC,uBAAuB,GAAG,kBAAkB;IAChG,mDAAmD,CAAC,qBAAqB,EACzE,uBAAuB,EACvB,WAAW,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,mDAAmD;QACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAChD,OAAO,6BAA6B,CAAC,qBAAqB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACjF,CAAC;QACD,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE;QACD,qBAAqB;QACrB,mDAAmD,CAAC,OAAO;QAC3D,QAAQ;QACR,mDAAmD,CAAC,uBAAuB;KAC5E,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAChD,OAAO,eAAe,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC;QAC/E,CAAC;QACD,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC;IACpF,CAAC,EAAE;QACD,QAAQ;QACR,mDAAmD,CAAC,OAAO;QAC3D,uBAAuB;QACvB,mDAAmD,CAAC,uBAAuB;QAC3E,mDAAmD,CAAC,qBAAqB;KAC1E,CAAC,CAAC;IAEH,MAAM,0CAA0C,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9D,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC5B,OAAO;gBACL,KAAK,EAAE,qBAAqB;oBAC1B,CAAC,CAAC,GAAG,eAAe,CAAC,WAAW,CAAC,GAAG,6BAA6B,CAAC,KAAK,GAAG,CAAC,KAAK;oBAChF,CAAC,CAAC,GAAG,eAAe,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK;aAC7C,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEnD,mDAAmD;IACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;QAChD,OAAO,CACL,oBAAC,yBAAyB,IACxB,GAAG,EAAC,6BAA6B,EACjC,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,aAAsC,EAC7D,mBAAmB,EAAE,+BAA+B,EACpD,YAAY,EAAE,sBAAsB,EACpC,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,EAC1C,uBAAuB,EAAE,uBAAuB,IAE/C,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,CAClC,CAC7B,CAAC;IACJ,CAAC;IAED,sCAAsC,CAAC;IAEvC,IAAI,QAAQ,EAAE,CAAC;QACb,+FAA+F;QAC/F,gCAAgC;QAChC,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,CAAC,CAAC,CAAC;QAE7B,OAAO,CACL,oBAAC,2BAA2B,IAC1B,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,EACtF,oBAAoB,EAAE,oBAAoB,EAC1C,GAAG,EAAC,+BAA+B,EACnC,eAAe,EAAE,0CAA0C,GAC3D,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBAAC,2BAA2B,IAC1B,GAAG,EAAC,+BAA+B,EACnC,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,EAC1C,uBAAuB,EAAE,aAAa,EACtC,cAAc,EAAE,+BAA+B,EAC/C,WAAW,EAAE,sBAAsB,EACnC,uBAAuB,EAAE,uBAAuB,IAE/C,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,CAChC,CAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { VerticalGalleryStyles } from '../VerticalGallery';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { OverflowGalleryPosition } from '../VideoGallery';\n/ @conditional-compile-remove(gallery-layouts) /\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n horizontalGalleryContainerStyle,\n horizontalGalleryStyle\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { _convertPxToRem } from '@internal/acs-ui-common';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport {\n verticalGalleryContainerStyle,\n verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/\n A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n \n @private\n /\nexport const OverflowGallery = (props: {\n shouldFloatLocalVideo?: boolean;\n onFetchTilesToRender?: (indexes: number[]) => void;\n isNarrow?: boolean;\n / @conditional-compile-remove(vertical-gallery) /\n isShort?: boolean;\n overflowGalleryElements?: JSX.Element[];\n horizontalGalleryStyles?: HorizontalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n verticalGalleryStyles?: VerticalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryPosition?: OverflowGalleryPosition;\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n parentWidth?: number;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n onFetchTilesToRender,\n isNarrow = false,\n / @conditional-compile-remove(vertical-gallery) /\n isShort = false,\n overflowGalleryElements,\n horizontalGalleryStyles,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition = 'horizontalBottom',\n / @conditional-compile-remove(vertical-gallery) / verticalGalleryStyles,\n onChildrenPerPageChange,\n parentWidth\n } = props;\n\n const containerStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'verticalRight') {\n return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n }\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [\n shouldFloatLocalVideo,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition\n ]);\n\n const galleryStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'verticalRight') {\n return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n }\n return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n }, [\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n horizontalGalleryStyles,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition,\n / @conditional-compile-remove(vertical-gallery) / verticalGalleryStyles\n ]);\n\n const scrollableHorizontalGalleryContainerStyles = useMemo(() => {\n if (isNarrow && parentWidth) {\n return {\n width: shouldFloatLocalVideo\n ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`\n : `${_convertPxToRem(parentWidth) - 1}rem`\n };\n }\n return undefined;\n }, [isNarrow, parentWidth, shouldFloatLocalVideo]);\n\n / @conditional-compile-remove(vertical-gallery) */\n if (overflowGalleryPosition === 'verticalRight') {\n return (\n <ResponsiveVerticalGallery\n key=\"responsive-vertical-gallery\"\n containerStyles={containerStyles}\n verticalGalleryStyles={galleryStyles as VerticalGalleryStyles}\n controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapHeightRem={HORIZONTAL_GALLERY_GAP}\n isShort={isShort}\n onFetchTilesToRender={onFetchTilesToRender}\n onChildrenPerPageChange={onChildrenPerPageChange}\n >\n {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n </ResponsiveVerticalGallery>\n );\n }\n\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;\n\n if (isNarrow) {\n // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n // participant tiles are visible\n onChildrenPerPageChange?.(3);\n\n return (\n <ScrollableHorizontalGallery\n horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]}\n onFetchTilesToRender={onFetchTilesToRender}\n key=\"scrollable-horizontal-gallery\"\n containerStyles={scrollableHorizontalGalleryContainerStyles}\n />\n );\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n horizontalGalleryStyles={galleryStyles}\n buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapWidthRem={HORIZONTAL_GALLERY_GAP}\n onChildrenPerPageChange={onChildrenPerPageChange}\n >\n {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n </ResponsiveHorizontalGallery>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.js CHANGED Viewed

@@ -32,13 +32,15 @@ export const RemoteScreenShare = React.memo((props) => {
             onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
         };
     }, [onDisposeRemoteStreamView, userId]);
-    const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
-        participant: displayName
-    }) : '';
-    return React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) });
+    const loadingMessage = displayName
+        ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
+            participant: displayName
+        })
+        : '';
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
 });
 const LoadingSpinner = (props) => {
-    return React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
-        React.createElement(Spinner, { label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' }));
+    return (React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
+        React.createElement(Spinner, { label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' })));
 };
 //# sourceMappingURL=RemoteScreenShare.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,~~CAAC~~,CAAC,~~KAW5C~~,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;~~IAC3B~~,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB;;;;;;;WAOG;QACH,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,EAAE,2BAA2B,CAAC,CAAC;IAC5F,CAAC;~~IACD~~,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;~~IACxC~~,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,~~CAAC,~~aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;~~QACxG~~,WAAW,EAAE,WAAW;~~KACzB~~,CAAC,CAAC,CAAC,~~CAAC,~~EAAE,CAAC;~~IACR~~,OAAO,oBAAC,SAAS,~~IAAC~~,WAAW,EAAE,WAAW,~~EAAE~~,OAAO,EAAE,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,~~GAAI~~,CAAC;~~AAC3S~~,CAAC,~~CAAC~~,CAAC;~~AACH~~,MAAM,cAAc,GAAG,CAAC,~~KAEvB~~,EAAe,EAAE;~~IAChB~~,OAAO,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;~~QACxD~~,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CAAC;~~AACb~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n A memoized version of VideoTile for rendering the remote screen share stream. 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 RemoteScreenShare = React.memo((props: {\n userId: string;\n displayName?: string;\n onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n isMuted?: boolean;\n isSpeaking?: boolean;\n renderElement?: HTMLElement;\n participantVideoScalingMode?: VideoStreamOptions;\n}) => {\n const {\n userId,\n displayName,\n isMuted,\n renderElement,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n isReceiving,\n participantVideoScalingMode\n } = props;\n const locale = useLocale();\n if (!renderElement) {\n /\n TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n * mode is the same as before we started the screen share.\n \n We should deprecate the current function and replace it with a\n * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n */\n onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n }\n useEffect(() => {\n return () => {\n // TODO: Isolate disposing behaviors for screenShare and videoStream\n onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n };\n }, [onDisposeRemoteStreamView, userId]);\n const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n participant: displayName\n }) : '';\n return <VideoTile displayName={displayName} isMuted={isMuted} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} /> : undefined} onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />} ~~/>;\~~n});\nconst LoadingSpinner = (props: {\n loadingMessage: string~~;\n~~}): JSX.Element => {\n return <Stack verticalAlign=\"center\" className={loadingStyle}>\n <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n </Stack~~>;\~~n};"]}
1	+ {"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAcA,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB;;;;;;;WAOG;QACH,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,EAAE,2BAA2B,CAAC,CAAC;IAC5F,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,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,GAC7E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IACxE,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n A memoized version of VideoTile for rendering the remote screen share stream. 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 RemoteScreenShare = React.memo(\n (props: {\n userId: string;\n displayName?: string;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n isMuted?: boolean;\n isSpeaking?: boolean;\n renderElement?: HTMLElement;\n participantVideoScalingMode?: VideoStreamOptions;\n }) => {\n const {\n userId,\n displayName,\n isMuted,\n renderElement,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n isReceiving,\n participantVideoScalingMode\n } = props;\n const locale = useLocale();\n\n if (!renderElement) {\n /\n TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n * mode is the same as before we started the screen share.\n \n We should deprecate the current function and replace it with a\n * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n */\n onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n }\n\n useEffect(() => {\n return () => {\n // TODO: Isolate disposing behaviors for screenShare and videoStream\n onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n };\n }, [onDisposeRemoteStreamView, userId]);\n\n const loadingMessage = displayName\n ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n participant: displayName\n })\n : '';\n\n return (\n <VideoTile\n displayName={displayName}\n isMuted={isMuted}\n renderElement={\n renderElement ? (\n <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n ) : undefined\n }\n onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n />\n );\n }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n return (\n <Stack verticalAlign=\"center\" className={loadingStyle}>\n <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js CHANGED Viewed

@@ -18,9 +18,7 @@ export const ScrollableHorizontalGallery = (props) => {
     }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
     const ref = useRef();
     const { events: dragabbleEvents } = useDraggable(ref);
-    return React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles) }),
-        React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: {
-                childrenGap: '0.5rem'
-            } }, horizontalGalleryElements));
+    return (React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles) }),
+        React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: { childrenGap: '0.5rem' } }, horizontalGalleryElements)));
 };
 //# sourceMappingURL=ScrollableHorizontalGallery.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,~~EAAE~~,0CAA0C,~~EAAE~~,iCAAiC,~~EAAE~~,MAAM,4CAA4C,CAAC;~~AAE3I~~;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,~~EACJ~~,yBAAyB,~~EACzB~~,oBAAoB,~~EACpB~~,eAAe,~~EAChB~~,GAAG,KAAK,CAAC;~~IACV~~,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;~~IAC9D~~,MAAM,GAAG,~~GAAI~~,MAAM,~~EAA+D~~,CAAC;~~IACnF~~,MAAM,~~EACJ~~,MAAM,EAAE,eAAe,~~EACxB~~,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;~~IACtB~~,OAAO,~~2CAAK~~,GAAG,EAAE,GAAG,~~IAAM~~,eAAe,~~IAAE~~,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;~~QAC1H~~,oBAAC,KAAK,~~kBAAY~~,+BAA+B,~~EAAC~~,UAAU,EAAE,IAAI,~~EAAE~~,MAAM,EAAE,iCAAiC,~~EAAE~~,MAAM,EAAE~~;gBACvH~~,WAAW,EAAE,QAAQ~~;aACtB~~,~~IACI~~,yBAAyB,CACpB,CACJ,CAAC;~~AACX~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport { scrollableHorizontalGalleryContainerStyles, scrollableHorizontalGalleryStyles } from './styles/ScrollableHorizontalGallery.style';\n\n/*\n Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n horizontalGalleryElements?: JSX.Element[];\n onFetchTilesToRender?: (indexes: number[]) => void;\n containerStyles?: IStyle;\n}): JSX.Element => {\n const {\n horizontalGalleryElements~~,\n~~ onFetchTilesToRender~~,\n~~ containerStyles\n } = props;\n useEffect(() => {\n const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray);\n }\n }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n const ref = (useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement~~>);\~~n const {\n events: dragabbleEvents\n } = useDraggable(ref);\n return <div ref={ref} {...dragabbleEvents} className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}>\n <Stack data-ui-id=\"scrollable-horizontal-gallery\" horizontal={true} styles={scrollableHorizontalGalleryStyles} tokens={{\n childrenGap: '0.5rem'\n }}>\n {horizontalGalleryElements}\n </Stack>\n </div~~>;\~~n};"]}
1	+ {"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,0CAA0C,EAC1C,iCAAiC,EAClC,MAAM,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAEnF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,eAAe,IACnB,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;QAEnF,oBAAC,KAAK,kBACO,+BAA+B,EAC1C,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iCAAiC,EACzC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,yBAAyB,CACpB,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport {\n scrollableHorizontalGalleryContainerStyles,\n scrollableHorizontalGalleryStyles\n} from './styles/ScrollableHorizontalGallery.style';\n\n/*\n Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n horizontalGalleryElements?: JSX.Element[];\n onFetchTilesToRender?: (indexes: number[]) => void;\n containerStyles?: IStyle;\n}): JSX.Element => {\n const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;\n\n useEffect(() => {\n const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray);\n }\n }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n\n const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n const { events: dragabbleEvents } = useDraggable(ref);\n\n return (\n <div\n ref={ref}\n {...dragabbleEvents}\n className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}\n >\n <Stack\n data-ui-id=\"scrollable-horizontal-gallery\"\n horizontal={true}\n styles={scrollableHorizontalGalleryStyles}\n tokens={{ childrenGap: '0.5rem' }}\n >\n {horizontalGalleryElements}\n </Stack>\n </div>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/SpeakerVideoLayout.js CHANGED Viewed

@@ -37,14 +37,18 @@ export const SpeakerVideoLayout = (props) => {
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            : childrenPerPage.current,
+        pinnedParticipantUserIds,
         /* @conditional-compile-remove(gallery-layouts) */ layout: 'speaker'
     });
     let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map(p => {
+    const gridTiles = gridParticipants.map((p) => {
         var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const shouldFloatLocalVideo = remoteParticipants.length > 0;
     if (!shouldFloatLocalVideo && localVideoComponent) {
@@ -60,7 +64,12 @@ export const SpeakerVideoLayout = (props) => {
     const [indexesToRender, setIndexesToRender] = useState([]);
     const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
+                indexesToRender &&
+                indexesToRender.includes(i) &&
+                activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = useId('layerhost');
     const localVideoSizeRem = useMemo(() => {
@@ -69,36 +78,66 @@ export const SpeakerVideoLayout = (props) => {
         }
         /* @conditional-compile-remove(vertical-gallery) */
         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;
         }
         /*@conditional-compile-remove(click-to-call) */
         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, /* @conditional-compile-remove(vertical-gallery) */ isShort, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */ localVideoTileSize]);
-    const wrappedLocalVideoComponent = localVideoComponent || screenShareComponent && localVideoComponent ? React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition)) }, localVideoComponent) : undefined;
+    }, [
+        overflowGalleryTiles.length,
+        isNarrow,
+        screenShareComponent,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+    ]);
+    const wrappedLocalVideoComponent = localVideoComponent || (screenShareComponent && localVideoComponent) ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent,
+        /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition)) }, localVideoComponent)) : undefined;
     const overflowGallery = useMemo(() => {
         if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
-        return React.createElement(OverflowGallery
-        /* @conditional-compile-remove(vertical-gallery) */ , {
-            /* @conditional-compile-remove(vertical-gallery) */ isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
-            /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
-            /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
+        return (React.createElement(OverflowGallery
+        /* @conditional-compile-remove(vertical-gallery) */
+        , {
+            /* @conditional-compile-remove(vertical-gallery) */
+            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+            /* @conditional-compile-remove(vertical-gallery) */
+            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            }, parentWidth: parentWidth });
-    }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */ isShort, screenShareComponent, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, setIndexesToRender, /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery, parentWidth, localVideoComponent]);
-    return React.createElement(Stack, { styles: rootLayoutStyle },
+            }, parentWidth: parentWidth }));
+    }, [
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        screenShareComponent,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        setIndexesToRender,
+        /* @conditional-compile-remove(vertical-gallery) */ 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
-        /* @conditional-compile-remove(vertical-gallery) */ , {
-            /* @conditional-compile-remove(vertical-gallery) */ horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap }, /* @conditional-compile-remove(gallery-layouts) */
-            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, /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition)));
+        /* @conditional-compile-remove(vertical-gallery) */
+        , {
+            /* @conditional-compile-remove(vertical-gallery) */
+            horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
+            /* @conditional-compile-remove(gallery-layouts) */ 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,
+            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition))));
 };
 const overflowGalleryTrampoline = (gallery, galleryPosition) => {
     /* @conditional-compile-remove(gallery-layouts) */