npm - @azure/communication-react - Versions diffs - 1.13.0-alpha-202402170012 → 1.13.0-alpha-202402220012 - Mend

@azure/communication-react 1.13.0-alpha-202402170012 → 1.13.0-alpha-202402220012

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 (107) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,mDAAmD;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW;IACX,mDAAmD;IACnD,YAAY,EACZ,wBAAwB,GAAG,EAAE;IAC7B,mDAAmD,CAAC,uBAAuB,GAAG,kBAAkB;IAChG,4CAA4C,CAAC,6BAA6B,EAC3E,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,mDAAmD;IACnD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,qFAAqF;IACrF,+GAA+G;IAC/G,iHAAiH;IACjH,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,wBAAwB,CAAC;QACjF,kBAAkB;QAClB,gBAAgB;QAChB,gBAAgB;QAChB,qBAAqB;QACrB,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,kDAAkD,CAAC,MAAM,EAAE,SAAS;QACpE,4CAA4C,CAAC,6BAA6B;KAC3E,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QAC3C,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,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,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,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtC,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,mDAAmD;YACnD,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,mDAAmD,CAAC,OAAO;QAC3D,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","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';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { 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 / @conditional-compile-remove(vertical-gallery) /\n parentHeight,\n pinnedParticipantUserIds = [],\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition = 'horizontalBottom',\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds\n } = props;\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n / @conditional-compile-remove(vertical-gallery) /\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 { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n localParticipant,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent\n ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n : childrenPerPage.current,\n pinnedParticipantUserIds,\n / @conditional-compile-remove(gallery-layouts) / layout: 'default',\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const 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 const 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 gridTiles.push(localVideoComponent);\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(vertical-gallery) /\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(vertical-gallery) / 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"]}
1	+ {"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';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { 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 / @conditional-compile-remove(vertical-gallery) /\n parentHeight,\n pinnedParticipantUserIds = [],\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition = 'horizontalBottom',\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds\n } = props;\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n / @conditional-compile-remove(vertical-gallery) /\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 { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n localParticipant,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent\n ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n : childrenPerPage.current,\n pinnedParticipantUserIds,\n / @conditional-compile-remove(gallery-layouts) / layout: 'default',\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds\n });\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(vertical-gallery) /\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(vertical-gallery) / 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"]}

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

@@ -55,7 +55,7 @@ export const LargeGalleryLayout = (props) => {
         /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
     });
     let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map((p) => {
+    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
@@ -69,14 +69,19 @@ export const LargeGalleryLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+    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) {
-        gridTiles.push(localVideoComponent);
+        if (screenShareComponent) {
+            overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
+        }
+        else {
+            gridTiles = [localVideoComponent].concat(gridTiles);
+        }
     }
     const overflowGallery = useMemo(() => {
         if (overflowGalleryTiles.length === 0) {

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

	@@ -1 +1 @@
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';\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 const 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 const 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 gridTiles.push(localVideoComponent);\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"]}
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';\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/useVideoTileContextualMenuProps.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import { IContextualMenuProps } from '@fluentui/react';
-import { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';
+import { VideoGalleryParticipant, ViewScalingMode } from '../../types';
 /**
  * @private
  */
 export declare const useVideoTileContextualMenuProps: (props: {
-    remoteParticipant: VideoGalleryRemoteParticipant;
+    participant: VideoGalleryParticipant;
     strings?: {
         fitRemoteParticipantToFrame?: string | undefined;
         fillRemoteParticipantFrame?: string | undefined;
@@ -18,6 +18,7 @@ export declare const useVideoTileContextualMenuProps: (props: {
         startSpotlightVideoTileMenuLabel?: string | undefined;
         addSpotlightVideoTileMenuLabel?: string | undefined;
         stopSpotlightVideoTileMenuLabel?: string | undefined;
+        stopSpotlightOnSelfVideoTileMenuLabel?: string | undefined;
         spotlightLimitReachedMenuTitle?: string | undefined;
     } | undefined;
     view?: {
@@ -34,5 +35,6 @@ export declare const useVideoTileContextualMenuProps: (props: {
     onStartSpotlight?: ((userIds: string[]) => void) | undefined;
     onStopSpotlight?: ((userIds: string[]) => void) | undefined;
     maxParticipantsToSpotlight?: number | undefined;
+    myUserId?: string | undefined;
 }) => IContextualMenuProps | undefined;
 //# sourceMappingURL=useVideoTileContextualMenuProps.d.ts.map

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

@@ -8,24 +8,25 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs
  */
 export const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString,
+    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString,
     /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [],
     /* @conditional-compile-remove(spotlight) */ isSpotlighted,
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
     /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
-    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight } = props;
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+    /* @conditional-compile-remove(spotlight) */ myUserId } = props;
     const scalingMode = useMemo(() => {
         var _a;
-        return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
-    }, [(_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode]);
+        return (_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
+    }, [(_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode]);
     const contextualMenuProps = useMemo(() => {
         const items = [];
         if (isPinned !== undefined) {
             if (isPinned && onUnpinParticipant && (strings === null || strings === void 0 ? void 0 : strings.unpinParticipantForMe)) {
                 let unpinActionString = undefined;
-                if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {
+                if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {
                     unpinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.unpinParticipantMenuItemAriaLabel, {
-                        participantName: remoteParticipant.displayName
+                        participantName: participant.displayName
                     });
                 }
                 items.push({
@@ -36,7 +37,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUnpinParticipant(remoteParticipant.userId);
+                        onUnpinParticipant(participant.userId);
                         unpinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(unpinActionString));
                     },
                     'data-ui-id': 'video-tile-unpin-participant-button',
@@ -45,9 +46,9 @@ export const useVideoTileContextualMenuProps = (props) => {
             }
             if (!isPinned && onPinParticipant && (strings === null || strings === void 0 ? void 0 : strings.pinParticipantForMe)) {
                 let pinActionString = undefined;
-                if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {
+                if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {
                     pinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.pinnedParticipantAnnouncementAriaLabel, {
-                        participantName: remoteParticipant.displayName
+                        participantName: participant.displayName
                     });
                 }
                 items.push({
@@ -58,7 +59,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onPinParticipant(remoteParticipant.userId);
+                        onPinParticipant(participant.userId);
                         pinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(pinActionString));
                     },
                     'data-ui-id': 'video-tile-pin-participant-button',
@@ -69,15 +70,18 @@ export const useVideoTileContextualMenuProps = (props) => {
         }
         /* @conditional-compile-remove(spotlight) */
         if (isSpotlighted) {
-            if (onStopSpotlight && remoteParticipant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
+            const stopSpotlightMenuLabel = myUserId === participant.userId
+                ? strings === null || strings === void 0 ? void 0 : strings.stopSpotlightOnSelfVideoTileMenuLabel
+                : strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel;
+            if (onStopSpotlight && participant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
                 items.push({
                     key: 'stopSpotlight',
-                    text: strings.stopSpotlightVideoTileMenuLabel,
+                    text: stopSpotlightMenuLabel,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStopSpotlight([remoteParticipant.userId]),
+                    onClick: () => onStopSpotlight([participant.userId]),
                     ariaLabel: strings.stopSpotlightVideoTileMenuLabel
                 });
             }
@@ -89,7 +93,7 @@ export const useVideoTileContextualMenuProps = (props) => {
             const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
                 ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
                 : false;
-            if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabel) {
+            if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {
                 items.push({
                     key: 'startSpotlight',
                     text: startSpotlightMenuLabel,
@@ -97,7 +101,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                         iconName: 'StartSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStartSpotlight([remoteParticipant.userId]),
+                    onClick: () => onStartSpotlight([participant.userId]),
                     ariaLabel: startSpotlightMenuLabel,
                     disabled: maxSpotlightedParticipantsReached,
                     title: maxSpotlightedParticipantsReached ? strings === null || strings === void 0 ? void 0 : strings.spotlightLimitReachedMenuTitle : undefined
@@ -114,7 +118,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Fit');
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Fit');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
                     },
                     'data-ui-id': 'video-tile-fit-to-frame',
@@ -130,7 +134,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Crop');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
                     },
                     'data-ui-id': 'video-tile-fill-frame',
@@ -150,15 +154,16 @@ export const useVideoTileContextualMenuProps = (props) => {
         onPinParticipant,
         onUnpinParticipant,
         onUpdateScalingMode,
-        remoteParticipant.userId,
-        remoteParticipant.displayName,
+        participant.userId,
+        participant.displayName,
         disablePinMenuItem,
         toggleAnnouncerString,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
         /* @conditional-compile-remove(spotlight) */ isSpotlighted,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
-        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(spotlight) */ myUserId
     ]);
     return contextualMenuProps;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const useVideoTileContextualMenuProps = (props: {\n remoteParticipant: VideoGalleryRemoteParticipant;\n strings?: {\n fitRemoteParticipantToFrame?: string;\n fillRemoteParticipantFrame?: string;\n pinParticipantForMe?: string;\n pinParticipantForMeLimitReached?: string;\n unpinParticipantForMe?: string;\n pinParticipantMenuItemAriaLabel?: string;\n unpinParticipantMenuItemAriaLabel?: string;\n pinnedParticipantAnnouncementAriaLabel?: string;\n unpinnedParticipantAnnouncementAriaLabel?: string;\n / @conditional-compile-remove(spotlight) /\n startSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n addSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n stopSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n spotlightLimitReachedMenuTitle?: string;\n };\n view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n isPinned?: boolean;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n / @conditional-compile-remove(spotlight) /\n isSpotlighted?: boolean;\n / @conditional-compile-remove(spotlight) /\n spotlightedParticipantUserIds?: string[];\n / @conditional-compile-remove(spotlight) /\n onStartSpotlight?: (userIds: string[]) => void;\n / @conditional-compile-remove(spotlight) /\n onStopSpotlight?: (userIds: string[]) => void;\n / @conditional-compile-remove(spotlight) /\n maxParticipantsToSpotlight?: number;\n}): IContextualMenuProps \| undefined => {\n const {\n remoteParticipant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds = [],\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) / onStopSpotlight,\n / @conditional-compile-remove(spotlight) / maxParticipantsToSpotlight\n } = props;\n const scalingMode = useMemo(() => {\n return props.remoteParticipant.videoStream?.scalingMode;\n }, [props.remoteParticipant.videoStream?.scalingMode]);\n\n const contextualMenuProps: IContextualMenuProps \| undefined = useMemo(() => {\n const items: IContextualMenuItem[] = [];\n\n if (isPinned !== undefined) {\n if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n let unpinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n participantName: remoteParticipant.displayName\n });\n }\n items.push({\n key: 'unpin',\n text: strings.unpinParticipantForMe,\n iconProps: {\n iconName: 'UnpinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUnpinParticipant(remoteParticipant.userId);\n unpinActionString && toggleAnnouncerString?.(unpinActionString);\n },\n 'data-ui-id': 'video-tile-unpin-participant-button',\n ariaLabel: unpinActionString\n });\n }\n if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n let pinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n participantName: remoteParticipant.displayName\n });\n }\n items.push({\n key: 'pin',\n text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n iconProps: {\n iconName: 'PinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onPinParticipant(remoteParticipant.userId);\n pinActionString && toggleAnnouncerString?.(pinActionString);\n },\n 'data-ui-id': 'video-tile-pin-participant-button',\n disabled: disablePinMenuItem \|\| / @conditional-compile-remove(spotlight) / isSpotlighted,\n ariaLabel: pinActionString\n });\n }\n }\n / @conditional-compile-remove(spotlight) /\n if (isSpotlighted) {\n if (onStopSpotlight && remoteParticipant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n items.push({\n key: 'stopSpotlight',\n text: strings.stopSpotlightVideoTileMenuLabel,\n iconProps: {\n iconName: 'StopSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStopSpotlight([remoteParticipant.userId]),\n ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n });\n }\n } else {\n const startSpotlightMenuLabel =\n spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n ? strings?.addSpotlightVideoTileMenuLabel\n : strings?.startSpotlightVideoTileMenuLabel;\n const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n : false;\n if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabel) {\n items.push({\n key: 'startSpotlight',\n text: startSpotlightMenuLabel,\n iconProps: {\n iconName: 'StartSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStartSpotlight([remoteParticipant.userId]),\n ariaLabel: startSpotlightMenuLabel,\n disabled: maxSpotlightedParticipantsReached,\n title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n });\n }\n }\n if (scalingMode) {\n if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n items.push({\n key: 'fitRemoteParticipantToFrame',\n text: strings.fitRemoteParticipantToFrame,\n iconProps: {\n iconName: 'VideoTileScaleFit',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(remoteParticipant.userId, 'Fit');\n view?.updateScalingMode('Fit');\n },\n 'data-ui-id': 'video-tile-fit-to-frame',\n ariaLabel: strings.fitRemoteParticipantToFrame\n });\n } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n items.push({\n key: 'fillRemoteParticipantFrame',\n text: strings.fillRemoteParticipantFrame,\n iconProps: {\n iconName: 'VideoTileScaleFill',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(remoteParticipant.userId, 'Crop');\n view?.updateScalingMode('Crop');\n },\n 'data-ui-id': 'video-tile-fill-frame',\n ariaLabel: strings.fillRemoteParticipantFrame\n });\n }\n }\n if (items.length === 0) {\n return undefined;\n }\n\n return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n }, [\n scalingMode,\n strings,\n view,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n remoteParticipant.userId,\n remoteParticipant.displayName,\n disablePinMenuItem,\n toggleAnnouncerString,\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) / onStopSpotlight,\n / @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\n ]);\n\n return contextualMenuProps;\n};\n"]}
1	+ {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const useVideoTileContextualMenuProps = (props: {\n participant: VideoGalleryParticipant;\n strings?: {\n fitRemoteParticipantToFrame?: string;\n fillRemoteParticipantFrame?: string;\n pinParticipantForMe?: string;\n pinParticipantForMeLimitReached?: string;\n unpinParticipantForMe?: string;\n pinParticipantMenuItemAriaLabel?: string;\n unpinParticipantMenuItemAriaLabel?: string;\n pinnedParticipantAnnouncementAriaLabel?: string;\n unpinnedParticipantAnnouncementAriaLabel?: string;\n / @conditional-compile-remove(spotlight) /\n startSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n addSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n stopSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n stopSpotlightOnSelfVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n spotlightLimitReachedMenuTitle?: string;\n };\n view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n isPinned?: boolean;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n / @conditional-compile-remove(spotlight) /\n isSpotlighted?: boolean;\n / @conditional-compile-remove(spotlight) /\n spotlightedParticipantUserIds?: string[];\n / @conditional-compile-remove(spotlight) /\n onStartSpotlight?: (userIds: string[]) => void;\n / @conditional-compile-remove(spotlight) /\n onStopSpotlight?: (userIds: string[]) => void;\n / @conditional-compile-remove(spotlight) /\n maxParticipantsToSpotlight?: number;\n / @conditional-compile-remove(spotlight) /\n myUserId?: string;\n}): IContextualMenuProps \| undefined => {\n const {\n participant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds = [],\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) / onStopSpotlight,\n / @conditional-compile-remove(spotlight) / maxParticipantsToSpotlight,\n / @conditional-compile-remove(spotlight) / myUserId\n } = props;\n const scalingMode = useMemo(() => {\n return props.participant.videoStream?.scalingMode;\n }, [props.participant.videoStream?.scalingMode]);\n\n const contextualMenuProps: IContextualMenuProps \| undefined = useMemo(() => {\n const items: IContextualMenuItem[] = [];\n\n if (isPinned !== undefined) {\n if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n let unpinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n participantName: participant.displayName\n });\n }\n items.push({\n key: 'unpin',\n text: strings.unpinParticipantForMe,\n iconProps: {\n iconName: 'UnpinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUnpinParticipant(participant.userId);\n unpinActionString && toggleAnnouncerString?.(unpinActionString);\n },\n 'data-ui-id': 'video-tile-unpin-participant-button',\n ariaLabel: unpinActionString\n });\n }\n if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n let pinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {\n pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n participantName: participant.displayName\n });\n }\n items.push({\n key: 'pin',\n text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n iconProps: {\n iconName: 'PinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onPinParticipant(participant.userId);\n pinActionString && toggleAnnouncerString?.(pinActionString);\n },\n 'data-ui-id': 'video-tile-pin-participant-button',\n disabled: disablePinMenuItem \|\| / @conditional-compile-remove(spotlight) / isSpotlighted,\n ariaLabel: pinActionString\n });\n }\n }\n / @conditional-compile-remove(spotlight) /\n if (isSpotlighted) {\n const stopSpotlightMenuLabel =\n myUserId === participant.userId\n ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n : strings?.stopSpotlightVideoTileMenuLabel;\n if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n items.push({\n key: 'stopSpotlight',\n text: stopSpotlightMenuLabel,\n iconProps: {\n iconName: 'StopSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStopSpotlight([participant.userId]),\n ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n });\n }\n } else {\n const startSpotlightMenuLabel =\n spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n ? strings?.addSpotlightVideoTileMenuLabel\n : strings?.startSpotlightVideoTileMenuLabel;\n const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n : false;\n if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n items.push({\n key: 'startSpotlight',\n text: startSpotlightMenuLabel,\n iconProps: {\n iconName: 'StartSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStartSpotlight([participant.userId]),\n ariaLabel: startSpotlightMenuLabel,\n disabled: maxSpotlightedParticipantsReached,\n title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n });\n }\n }\n if (scalingMode) {\n if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n items.push({\n key: 'fitRemoteParticipantToFrame',\n text: strings.fitRemoteParticipantToFrame,\n iconProps: {\n iconName: 'VideoTileScaleFit',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(participant.userId, 'Fit');\n view?.updateScalingMode('Fit');\n },\n 'data-ui-id': 'video-tile-fit-to-frame',\n ariaLabel: strings.fitRemoteParticipantToFrame\n });\n } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n items.push({\n key: 'fillRemoteParticipantFrame',\n text: strings.fillRemoteParticipantFrame,\n iconProps: {\n iconName: 'VideoTileScaleFill',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(participant.userId, 'Crop');\n view?.updateScalingMode('Crop');\n },\n 'data-ui-id': 'video-tile-fill-frame',\n ariaLabel: strings.fillRemoteParticipantFrame\n });\n }\n }\n if (items.length === 0) {\n return undefined;\n }\n\n return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n }, [\n scalingMode,\n strings,\n view,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n participant.userId,\n participant.displayName,\n disablePinMenuItem,\n toggleAnnouncerString,\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) / onStopSpotlight,\n / @conditional-compile-remove(spotlight) / maxParticipantsToSpotlight,\n / @conditional-compile-remove(spotlight) */ myUserId\n ]);\n\n return contextualMenuProps;\n};\n"]}

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

@@ -9,7 +9,7 @@ const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = useRef([]);
     const visibleOverflowGalleryParticipants = useRef([]);
-    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [],
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [],
     /* @conditional-compile-remove(gallery-layouts) */
     layout } = props;
     const calculateMaxRemoteVideoStreams = () => {
@@ -84,14 +84,7 @@ const _useOrganizedParticipants = (props) => {
     ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = useCallback(() => {
-        if (isScreenShareActive && localParticipant) {
-            const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
-            // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return localParticipantPlusOverflow.concat(callingParticipants);
-            return localParticipantPlusOverflow;
-        }
-        else if (isScreenShareActive) {
+        if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
             return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
@@ -115,7 +108,6 @@ const _useOrganizedParticipants = (props) => {
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive,
-        localParticipant,
         maxRemoteVideoStreamsToUse
     ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '../../..';\n/ @conditional-compile-remove(gallery-layouts) /\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/\n Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n /\nexport interface OrganizedParticipantsArgs {\n remoteParticipants: VideoGalleryRemoteParticipant[];\n localParticipant?: VideoGalleryParticipant;\n dominantSpeakers?: string[];\n maxRemoteVideoStreams?: number;\n maxOverflowGalleryDominantSpeakers?: number;\n isScreenShareActive?: boolean;\n pinnedParticipantUserIds?: string[];\n / @conditional-compile-remove(gallery-layouts) /\n layout?: VideoGalleryLayout;\n spotlightedParticipantUserIds?: string[];\n}\n\n/\n A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n /\nexport interface OrganizedParticipantsResult {\n gridParticipants: VideoGalleryParticipant[];\n overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/ @conditional-compile-remove(gallery-layouts) /\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n const {\n remoteParticipants = [],\n localParticipant,\n dominantSpeakers = [],\n maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n isScreenShareActive = false,\n pinnedParticipantUserIds = [],\n / @conditional-compile-remove(gallery-layouts) /\n layout\n } = props;\n\n const calculateMaxRemoteVideoStreams = (): number => {\n / @conditional-compile-remove(gallery-layouts) /\n if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {\n return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;\n } else {\n return maxRemoteVideoStreams;\n }\n return maxRemoteVideoStreams;\n };\n\n const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();\n\n const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n\n const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n / @conditional-compile-remove(gallery-layouts) /\n return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;\n return videoParticipants;\n };\n\n visibleGridParticipants.current =\n pinnedParticipantUserIds.length > 0 \|\| isScreenShareActive\n ? []\n : smartDominantSpeakerParticipants({\n participants: participantsToSortTrampoline(),\n dominantSpeakers,\n lastVisibleParticipants: visibleGridParticipants.current,\n maxDominantSpeakers: maxRemoteVideoStreamsToUse\n }).slice(0, maxRemoteVideoStreamsToUse);\n\n / @conditional-compile-remove(gallery-layouts) /\n const dominantSpeakerToGrid =\n layout === 'speaker'\n ? dominantSpeakers && dominantSpeakers[0]\n ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])\n : [visibleGridParticipants.current[0]]\n : [];\n / @conditional-compile-remove(gallery-layouts) /\n if (dominantSpeakerToGrid[0]) {\n visibleGridParticipants.current = dominantSpeakerToGrid;\n }\n\n const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));\n\n const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' \|\| 'Ringing'));\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n participants: remoteParticipantsOrdered.filter(\n (p) =>\n !visibleGridParticipantsSet.has(p.userId) &&\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / !callingParticipantsSet.has(\n p.userId\n )\n ),\n dominantSpeakers: dominantSpeakers,\n lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n });\n\n const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n if (isScreenShareActive) {\n return [];\n }\n // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n // we will use the max streams provided to the function to find the max participants that can go in the grid\n // if there are less participants than max streams then we will use all participants including joining in the grid\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse\n ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)\n : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive,\n maxRemoteVideoStreamsToUse\n ]);\n\n const gridParticipants = getGridParticipants();\n\n const getOverflowGalleryRemoteParticipants = useCallback((): (\n \| VideoGalleryParticipant\n \| VideoGalleryRemoteParticipant\n )[] => {\n if (isScreenShareActive && localParticipant) {\n const localParticipantPlusOverflow = [localParticipant].concat(\n visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current)\n );\n // If screen sharing is active, assign video and audio participants as overflow gallery participants\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return localParticipantPlusOverflow.concat(callingParticipants);\n return localParticipantPlusOverflow;\n } else if (isScreenShareActive) {\n // If screen sharing is active, assign video and audio participants as overflow gallery participants\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.concat(\n visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n );\n return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);\n } else {\n // If screen sharing is not active, then assign all video tiles as grid tiles.\n // If there are no video tiles, then assign audio tiles as grid tiles.\n // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n // overflow should be empty if total participants including calling participants is less than max streams\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse\n ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)\n : [];\n return visibleGridParticipants.current.length > 0\n ? visibleOverflowGalleryParticipants.current\n : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n }\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive,\n localParticipant,\n maxRemoteVideoStreamsToUse\n ]);\n\n const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n\n return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };\n};\n\nconst _useOrganizedParticipantsWithFocusedParticipants = (\n props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n // map remote participants by userId\n const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n map[remoteParticipant.userId] = remoteParticipant;\n return map;\n }, {});\n\n const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n // declare focused participant user ids as spotlighted participants user ids followed by\n // pinned participants user ids\n const focusedParticipantUserIds = [\n ...new Set(spotlightedParticipantUserIds.concat(props.pinnedParticipantUserIds ?? []))\n ];\n // get focused participants from map of remote participants in the order of the user ids\n const focusedParticipants: VideoGalleryRemoteParticipant[] = [];\n focusedParticipantUserIds.forEach((id) => {\n const pinnedParticipant = remoteParticipantMap[id];\n if (pinnedParticipant) {\n focusedParticipants.push(pinnedParticipant);\n }\n });\n\n // get unfocused participants by filtering out set of focused participant user ids from all remote participants\n const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);\n const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n const useOrganizedParticipantsProps = {\n ...props,\n // if there are pinned participants then we should only consider unpinned participants\n remoteParticipants: unfocusedParticipants\n };\n\n const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n if (focusedParticipants.length === 0) {\n return useOrganizedParticipantsResult;\n }\n\n return {\n gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n overflowGalleryParticipants: props.isScreenShareActive\n ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n : useOrganizedParticipantsResult.gridParticipants.concat(\n useOrganizedParticipantsResult.overflowGalleryParticipants\n )\n };\n};\n\nconst putVideoParticipantsFirst = (\n remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n remoteParticipants.forEach((p) => {\n if (p.videoStream?.isAvailable) {\n videoParticipants.push(p);\n } else {\n audioParticipants.push(p);\n }\n });\n const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n return remoteParticipantSortedByVideo;\n};\n\n/\n Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n /\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n return _useOrganizedParticipantsWithFocusedParticipants(args);\n};\n\n/ @conditional-compile-remove(reaction) /\n/\n @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string \| undefined => {\n switch (reactionName) {\n case 'like':\n return reactionResources.likeReaction?.url;\n case 'heart':\n return reactionResources.heartReaction?.url;\n case 'laugh':\n return reactionResources.laughReaction?.url;\n case 'applause':\n return reactionResources.applauseReaction?.url;\n case 'surprised':\n return reactionResources.surprisedReaction?.url;\n }\n return '';\n};\n"]}
1	+ {"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '../../..';\n/ @conditional-compile-remove(gallery-layouts) /\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/\n Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n /\nexport interface OrganizedParticipantsArgs {\n remoteParticipants: VideoGalleryRemoteParticipant[];\n localParticipant?: VideoGalleryParticipant;\n dominantSpeakers?: string[];\n maxRemoteVideoStreams?: number;\n maxOverflowGalleryDominantSpeakers?: number;\n isScreenShareActive?: boolean;\n pinnedParticipantUserIds?: string[];\n / @conditional-compile-remove(gallery-layouts) /\n layout?: VideoGalleryLayout;\n spotlightedParticipantUserIds?: string[];\n}\n\n/\n A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n /\nexport interface OrganizedParticipantsResult {\n gridParticipants: VideoGalleryParticipant[];\n overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/ @conditional-compile-remove(gallery-layouts) /\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n const {\n remoteParticipants = [],\n dominantSpeakers = [],\n maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n isScreenShareActive = false,\n pinnedParticipantUserIds = [],\n / @conditional-compile-remove(gallery-layouts) /\n layout\n } = props;\n\n const calculateMaxRemoteVideoStreams = (): number => {\n / @conditional-compile-remove(gallery-layouts) /\n if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {\n return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;\n } else {\n return maxRemoteVideoStreams;\n }\n return maxRemoteVideoStreams;\n };\n\n const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();\n\n const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n\n const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n / @conditional-compile-remove(gallery-layouts) /\n return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;\n return videoParticipants;\n };\n\n visibleGridParticipants.current =\n pinnedParticipantUserIds.length > 0 \|\| isScreenShareActive\n ? []\n : smartDominantSpeakerParticipants({\n participants: participantsToSortTrampoline(),\n dominantSpeakers,\n lastVisibleParticipants: visibleGridParticipants.current,\n maxDominantSpeakers: maxRemoteVideoStreamsToUse\n }).slice(0, maxRemoteVideoStreamsToUse);\n\n / @conditional-compile-remove(gallery-layouts) /\n const dominantSpeakerToGrid =\n layout === 'speaker'\n ? dominantSpeakers && dominantSpeakers[0]\n ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])\n : [visibleGridParticipants.current[0]]\n : [];\n / @conditional-compile-remove(gallery-layouts) /\n if (dominantSpeakerToGrid[0]) {\n visibleGridParticipants.current = dominantSpeakerToGrid;\n }\n\n const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));\n\n const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' \|\| 'Ringing'));\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n participants: remoteParticipantsOrdered.filter(\n (p) =>\n !visibleGridParticipantsSet.has(p.userId) &&\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / !callingParticipantsSet.has(\n p.userId\n )\n ),\n dominantSpeakers: dominantSpeakers,\n lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n });\n\n const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n if (isScreenShareActive) {\n return [];\n }\n // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n // we will use the max streams provided to the function to find the max participants that can go in the grid\n // if there are less participants than max streams then we will use all participants including joining in the grid\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse\n ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)\n : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive,\n maxRemoteVideoStreamsToUse\n ]);\n\n const gridParticipants = getGridParticipants();\n\n const getOverflowGalleryRemoteParticipants = useCallback((): (\n \| VideoGalleryParticipant\n \| VideoGalleryRemoteParticipant\n )[] => {\n if (isScreenShareActive) {\n // If screen sharing is active, assign video and audio participants as overflow gallery participants\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.concat(\n visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n );\n return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);\n } else {\n // If screen sharing is not active, then assign all video tiles as grid tiles.\n // If there are no video tiles, then assign audio tiles as grid tiles.\n // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n // overflow should be empty if total participants including calling participants is less than max streams\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse\n ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)\n : [];\n return visibleGridParticipants.current.length > 0\n ? visibleOverflowGalleryParticipants.current\n : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n }\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive,\n maxRemoteVideoStreamsToUse\n ]);\n\n const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n\n return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };\n};\n\nconst _useOrganizedParticipantsWithFocusedParticipants = (\n props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n // map remote participants by userId\n const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n map[remoteParticipant.userId] = remoteParticipant;\n return map;\n }, {});\n\n const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n // declare focused participant user ids as spotlighted participants user ids followed by\n // pinned participants user ids\n const focusedParticipantUserIds = [\n ...new Set(spotlightedParticipantUserIds.concat(props.pinnedParticipantUserIds ?? []))\n ];\n // get focused participants from map of remote participants in the order of the user ids\n const focusedParticipants: VideoGalleryRemoteParticipant[] = [];\n focusedParticipantUserIds.forEach((id) => {\n const pinnedParticipant = remoteParticipantMap[id];\n if (pinnedParticipant) {\n focusedParticipants.push(pinnedParticipant);\n }\n });\n\n // get unfocused participants by filtering out set of focused participant user ids from all remote participants\n const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);\n const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n const useOrganizedParticipantsProps = {\n ...props,\n // if there are pinned participants then we should only consider unpinned participants\n remoteParticipants: unfocusedParticipants\n };\n\n const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n if (focusedParticipants.length === 0) {\n return useOrganizedParticipantsResult;\n }\n\n return {\n gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n overflowGalleryParticipants: props.isScreenShareActive\n ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n : useOrganizedParticipantsResult.gridParticipants.concat(\n useOrganizedParticipantsResult.overflowGalleryParticipants\n )\n };\n};\n\nconst putVideoParticipantsFirst = (\n remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n remoteParticipants.forEach((p) => {\n if (p.videoStream?.isAvailable) {\n videoParticipants.push(p);\n } else {\n audioParticipants.push(p);\n }\n });\n const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n return remoteParticipantSortedByVideo;\n};\n\n/\n Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n /\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n return _useOrganizedParticipantsWithFocusedParticipants(args);\n};\n\n/ @conditional-compile-remove(reaction) /\n/\n @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string \| undefined => {\n switch (reactionName) {\n case 'like':\n return reactionResources.likeReaction?.url;\n case 'heart':\n return reactionResources.heartReaction?.url;\n case 'laugh':\n return reactionResources.laughReaction?.url;\n case 'applause':\n return reactionResources.applauseReaction?.url;\n case 'surprised':\n return reactionResources.surprisedReaction?.url;\n }\n return '';\n};\n"]}

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

@@ -202,13 +202,21 @@ export interface VideoGalleryProps {
      */
     spotlightedParticipants?: string[];
     /**
-     * This callback will be called when spotlight is started for participant video tiles.
+     * This callback will be called when spotlight is started for the local participant video tile.
      */
-    onStartSpotlight?: (userIds?: string[]) => Promise<void>;
+    onStartLocalSpotlight?: () => Promise<void>;
     /**
-     * This callback will be called when spotlight is stopped for participant video tiles.
+     * This callback will be called when spotlight is started for the local participant video tile.
      */
-    onStopSpotlight?: (userIds?: string[]) => Promise<void>;
+    onStartRemoteSpotlight?: (userIds?: string[]) => Promise<void>;
+    /**
+     * This callback will be called when spotlight is stopped for remote participant video tiles.
+     */
+    onStopLocalSpotlight?: () => Promise<void>;
+    /**
+     * This callback will be called when spotlight is stopped for remote participant video tiles.
+     */
+    onStopRemoteSpotlight?: (userIds?: string[]) => Promise<void>;
     /**
      * Maximum participants that can be spotlighted
      */