npm - @azure/communication-react - Versions diffs - 1.10.0-beta.1 → 1.10.1-alpha-202311110012 - Mend

@azure/communication-react 1.10.0-beta.1 → 1.10.1-alpha-202311110012

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

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

@@ -9,11 +9,7 @@ import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SI
  *
  * @private
  */
-export const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = {
-    minHeight: 5.625,
-    maxHeight: 9,
-    width: 9
-};
+export const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };
 /**
  * VerticalGallery tile size in rem:
  *
@@ -22,11 +18,7 @@ export const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = {
  *
  * @private
  */
-export const VERTICAL_GALLERY_TILE_SIZE_REM = {
-    minHeight: 6.75,
-    maxHeight: 11,
-    width: 11
-};
+export const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width: 11 };
 /**
  * Styles for the VerticalGallery's container set in parent.
  *
@@ -36,19 +28,25 @@ export const VERTICAL_GALLERY_TILE_SIZE_REM = {
  * @returns Style set for VerticalGallery container.
  */
 export const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, isShort) => {
-    return isNarrow && isShort ? {
-        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
-        height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
-        paddingBottom: '0.5rem'
-    } : !isNarrow && isShort ? {
-        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
-        height: shouldFloatLocalVideo ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
-        paddingBottom: '0.5rem'
-    } : {
-        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
-        height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
-        paddingBottom: '0.5rem'
-    };
+    return isNarrow && isShort
+        ? {
+            width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
+            paddingBottom: '0.5rem'
+        }
+        : !isNarrow && isShort
+            ? {
+                width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                height: shouldFloatLocalVideo
+                    ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`
+                    : '100%',
+                paddingBottom: '0.5rem'
+            }
+            : {
+                width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
+                paddingBottom: '0.5rem'
+            };
 };
 /**
  * @private
@@ -76,10 +74,6 @@ export const VERTICAL_GALLERY_TILE_STYLE = {
  * @private
  */
 export const verticalGalleryStyle = (isShort) => {
-    return isShort ? {
-        children: SHORT_VERTICAL_GALLERY_TILE_STYLE
-    } : {
-        children: VERTICAL_GALLERY_TILE_STYLE
-    };
+    return isShort ? { children: SHORT_VERTICAL_GALLERY_TILE_STYLE } : { children: VERTICAL_GALLERY_TILE_STYLE };
 };
 //# sourceMappingURL=VideoGalleryResponsiveVerticalGallery.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["~~../../../../../../../preprocess-dist/~~react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,OAAO,~~EAAE~~,8CAA8C,~~EAAE~~,6BAA6B,~~EAAE~~,wCAAwC,~~EAAE~~,MAAM,6BAA6B,CAAC;~~AAEtK~~;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG~~;IAClD~~,SAAS,EAAE,KAAK~~;IAChB~~,SAAS,EAAE,CAAC~~;IACZ~~,KAAK,EAAE,CAAC~~;CACT~~,CAAC;~~AAEF~~;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG~~;IAC5C~~,SAAS,EAAE,IAAI~~;IACf~~,SAAS,EAAE,EAAE~~;IACb~~,KAAK,EAAE,EAAE~~;CACV~~,CAAC;~~AAEF~~;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,~~CAAC~~,qBAA8B,~~EAAE~~,QAAiB,~~EAAE~~,OAAgB,~~EAAU~~,EAAE;~~IAC3H~~,OAAO,QAAQ,IAAI,OAAO,CAAC,CAAC~~,CAAC~~;~~QAC3B~~,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;~~QACzD~~,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;~~QAClG~~,aAAa,EAAE,QAAQ;~~KACxB~~,CAAC,CAAC,CAAC,~~CAAC,~~QAAQ,IAAI,OAAO,CAAC,CAAC~~,CAAC~~;~~QACzB~~,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;~~QACzD~~,MAAM,EAAE,qBAAqB,CAAC,CAAC,~~CAAC,~~eAAe,8CAA8C,CAAC,MAAM,MAAM,CAAC,CAAC,~~CAAC,~~MAAM;~~QACnH~~,aAAa,EAAE,QAAQ;~~KACxB~~,CAAC,CAAC~~,CAAC~~;~~QACF~~,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;~~QACnD~~,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,wCAAwC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;~~QAC7G~~,aAAa,EAAE,QAAQ;~~KACxB~~,CAAC;~~AACJ~~,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAyB,EAAE;IAC9E,OAAO,OAAO,CAAC,CAAC,CAAC~~;QACf~~,QAAQ,EAAE,iCAAiC~~;KAC5C~~,CAAC,CAAC,CAAC~~;QACF~~,QAAQ,EAAE,2BAA2B~~;KACtC~~,CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VerticalGalleryStyles } from '../../VerticalGallery';\nimport { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/*\n VerticalGallery tile size in rem:\n \n min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n \n @private\n /\nexport const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = {\n minHeight: 5.625~~,\n~~ maxHeight: 9~~,\n~~ width: 9\n};\n\n/\n VerticalGallery tile size in rem:\n \n min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n \n @private\n /\nexport const VERTICAL_GALLERY_TILE_SIZE_REM = {\n minHeight: 6.75~~,\n~~ maxHeight: 11~~,\n~~ width: 11\n};\n\n/\n Styles for the VerticalGallery's container set in parent.\n \n width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n \n @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n /\nexport const verticalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean, isShort: boolean): IStyle => {\n return isNarrow && isShort ? {\n width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n paddingBottom: '0.5rem'\n } : !isNarrow && isShort ? {\n width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n paddingBottom: '0.5rem'\n } : {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n paddingBottom: '0.5rem'\n };\n};\n\n/\n @private\n /\nexport const SHORT_VERTICAL_GALLERY_TILE_STYLE = {\n minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n width: '100%',\n height: '100%'\n};\n\n/\n @private\n /\nexport const VERTICAL_GALLERY_TILE_STYLE = {\n minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n width: '100%',\n height: '100%'\n};\n\n/\n @private\n */\nexport const verticalGalleryStyle = (isShort: boolean): VerticalGalleryStyles => {\n return isShort ? {\n children: SHORT_VERTICAL_GALLERY_TILE_STYLE\n } : {\n children: VERTICAL_GALLERY_TILE_STYLE\n };\n};\"../../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,OAAO,EACL,8CAA8C,EAC9C,6BAA6B,EAC7B,wCAAwC,EACzC,MAAM,6BAA6B,CAAC;AAErC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAEjG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAE5F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,qBAA8B,EAC9B,QAAiB,EACjB,OAAgB,EACR,EAAE;IACV,OAAO,QAAQ,IAAI,OAAO;QACxB,CAAC,CAAC;YACE,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;YACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;YAClG,aAAa,EAAE,QAAQ;SACxB;QACH,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO;YACtB,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;gBACzD,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,eAAe,8CAA8C,CAAC,MAAM,MAAM;oBAC5E,CAAC,CAAC,MAAM;gBACV,aAAa,EAAE,QAAQ;aACxB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;gBACnD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,wCAAwC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;gBAC7G,aAAa,EAAE,QAAQ;aACxB,CAAC;AACR,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAyB,EAAE;IAC9E,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,iCAAiC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,2BAA2B,EAAE,CAAC;AAC/G,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VerticalGalleryStyles } from '../../VerticalGallery';\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n SMALL_FLOATING_MODAL_SIZE_REM,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './FloatingLocalVideo.styles';\n\n/*\n VerticalGallery tile size in rem:\n \n min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n \n @private\n /\nexport const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };\n\n/\n VerticalGallery tile size in rem:\n \n min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n \n @private\n /\nexport const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width: 11 };\n\n/\n Styles for the VerticalGallery's container set in parent.\n \n width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n \n @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n /\nexport const verticalGalleryContainerStyle = (\n shouldFloatLocalVideo: boolean,\n isNarrow: boolean,\n isShort: boolean\n): IStyle => {\n return isNarrow && isShort\n ? {\n width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n paddingBottom: '0.5rem'\n }\n : !isNarrow && isShort\n ? {\n width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo\n ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`\n : '100%',\n paddingBottom: '0.5rem'\n }\n : {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n paddingBottom: '0.5rem'\n };\n};\n\n/\n @private\n /\nexport const SHORT_VERTICAL_GALLERY_TILE_STYLE = {\n minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n width: '100%',\n height: '100%'\n};\n\n/\n @private\n /\nexport const VERTICAL_GALLERY_TILE_STYLE = {\n minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n width: '100%',\n height: '100%'\n};\n\n/\n @private\n */\nexport const verticalGalleryStyle = (isShort: boolean): VerticalGalleryStyles => {\n return isShort ? { children: SHORT_VERTICAL_GALLERY_TILE_STYLE } : { children: VERTICAL_GALLERY_TILE_STYLE };\n};\n\"../../../../../acs-ui-common/src\""]}

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

@@ -25,10 +25,7 @@ const useVideoStreamLifecycleMaintainer = (props) => {
     useEffect(() => {
         var _a;
         if (isStreamAvailable && !renderElementExists) {
-            (_a = onCreateStreamView === null || onCreateStreamView === void 0 ? void 0 : onCreateStreamView({
-                isMirrored,
-                scalingMode
-            })) === null || _a === void 0 ? void 0 : _a.then(result => {
+            (_a = onCreateStreamView === null || onCreateStreamView === void 0 ? void 0 : onCreateStreamView({ isMirrored, scalingMode })) === null || _a === void 0 ? void 0 : _a.then((result) => {
                 result && setVideoStreamViewResult(result);
             });
         }
@@ -41,7 +38,15 @@ const useVideoStreamLifecycleMaintainer = (props) => {
                 }
             }
         };
-    }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode]);
+    }, [
+        isMirrored,
+        isScreenSharingOn,
+        isStreamAvailable,
+        onCreateStreamView,
+        onDisposeStreamView,
+        renderElementExists,
+        scalingMode
+    ]);
     // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView
     // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.
     // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAgBrD~~;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,iCAAiC,GAAG,~~CAAC~~,KAA0C,~~EAA2C~~,EAAE;~~IAChI~~,MAAM,EACJ,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,EACZ,GAAG,KAAK,CAAC;~~IACV~~,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,EAA2C,CAAC;~~IAC9G~~,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,iBAAiB,IAAI,CAAC,mBAAmB,EAAE;YAC7C,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG~~;gBACnB~~,UAAU~~;gBACV~~,WAAW~~;aACZ~~,CAAC,0CAAE,IAAI,CAAC,MAAM,~~CAAC~~,EAAE;~~gBAChB~~,MAAM,IAAI,wBAAwB,CAAC,MAAM,CAAC,CAAC;YAC7C,CAAC,CAAC,CAAC;SACJ;QAED,mFAAmF;QACnF,OAAO,GAAG,EAAE;YACV,IAAI,mBAAmB,EAAE;gBACvB,wFAAwF;gBACxF,IAAI,CAAC,iBAAiB,EAAE;oBACtB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,EAAI,CAAC;iBACzB;aACF;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,~~CAAC,~~UAAU,~~EAAE,~~iBAAiB,~~EAAE,~~iBAAiB,~~EAAE,~~kBAAkB,~~EAAE,~~mBAAmB,~~EAAE,~~mBAAmB,~~EAAE,~~WAAW,CAAC,CAAC~~,CAAC~~;~~IAElI~~,kKAAkK;IAClK,yGAAyG;IACzG,2GAA2G;IAC3G,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,wFAAwF;YACxF,IAAI,CAAC,iBAAiB,EAAE;gBACtB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,EAAI,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,EAAE,mBAAmB,CAAC,CAAC,CAAC;~~IAC7C~~,OAAO,qBAAqB,CAAC;AAC/B,CAAC,CAAC;AAQF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,~~CAAC~~,KAA+C,~~EAA2C~~,EAAE;~~IACjJ~~,MAAM,~~EACJ~~,uBAAuB,~~EACvB~~,wBAAwB,~~EACzB~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,kBAAkB,GAAG,OAAO,~~CAAC~~,GAAG,EAAE,CAAC,CAAC,OAA4B,EAAE,EAAE;~~QACxE~~,OAAO,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,OAAO,CAAC,CAAC;IAC5C,CAAC,~~EAAE~~,CAAC,uBAAuB,CAAC,~~CAAC~~,CAAC;~~IAC9B~~,MAAM,mBAAmB,GAAG,OAAO,~~CAAC~~,GAAG,EAAE,CAAC,GAAG,EAAE;~~QAC7C~~,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,EAAI,CAAC;IAC/B,CAAC,~~EAAE~~,CAAC,wBAAwB,CAAC,~~CAAC~~,CAAC;~~IAC/B~~,OAAO,iCAAiC,iCACnC,KAAK,KACR,kBAAkB;QAClB,mBAAmB,IACnB,CAAC;AACL,CAAC,CAAC;~~AASF~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,~~CAAC~~,KAAgD,~~EAA2C~~,EAAE;~~IACnJ~~,MAAM,~~EACJ~~,mBAAmB,~~EACnB~~,wBAAwB,~~EACxB~~,yBAAyB,~~EAC1B~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,kBAAkB,GAAG,OAAO,~~CAAC~~,GAAG,EAAE,CAAC,CAAC,OAA4B,EAAE,EAAE;~~QACxE~~,OAAO,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAG,mBAAmB,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC,~~EAAE~~,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,~~CAAC~~,CAAC;~~IACpD~~,MAAM,mBAAmB,GAAG,OAAO,~~CAAC~~,GAAG,EAAE,CAAC,GAAG,EAAE;~~QAC7C~~,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAG,mBAAmB,CAAC,CAAC;IACnD,CAAC,~~EAAE~~,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,~~CAAC~~,CAAC;~~IACrD~~,OAAO,iCAAiC,iCACnC,KAAK,KACR,kBAAkB;QAClB,mBAAmB,IACnB,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\n\n/** @private /\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n isStreamAvailable?: boolean;\n renderElementExists?: boolean;\n isMirrored?: boolean;\n scalingMode?: ViewScalingMode;\n isScreenSharingOn?: boolean;\n}\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n onCreateStreamView: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult> \| undefined;\n onDisposeStreamView: () => void \| undefined;\n}\n\n/\n Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n \n @remarks\n \n Notes on handling changes to scaling mode:\n \n Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n \n Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n \n @private\n /\nconst useVideoStreamLifecycleMaintainer = (props: VideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult \| undefined => {\n const {\n isMirrored,\n isScreenSharingOn,\n isStreamAvailable,\n onCreateStreamView,\n onDisposeStreamView,\n renderElementExists,\n scalingMode\n } = props;\n const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult \| undefined>();\n useEffect(() => {\n if (isStreamAvailable && !renderElementExists) {\n onCreateStreamView?.({\n isMirrored~~,\n~~ scalingMode\n })?.then(result => {\n result && setVideoStreamViewResult(result);\n });\n }\n\n // Always clean up element to make tile up to date and be able to dispose correctly\n return () => {\n if (renderElementExists) {\n // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n if (!isScreenSharingOn) {\n onDisposeStreamView?.();\n }\n }\n };\n }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode]);\n\n // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n useEffect(() => {\n return () => {\n // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n if (!isScreenSharingOn) {\n onDisposeStreamView?.();\n }\n };\n }, [isScreenSharingOn, onDisposeStreamView]);\n return videoStreamViewResult;\n};\n\n/* @private /\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n}\n\n/\n Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n \n @private\n /\nexport const useLocalVideoStreamLifecycleMaintainer = (props: LocalVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult \| undefined => {\n const {\n onCreateLocalStreamView~~,\n~~ onDisposeLocalStreamView\n } = props;\n const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n return onCreateLocalStreamView?.(options);\n }, [onCreateLocalStreamView]);\n const onDisposeStreamView = useMemo(() => () => {\n onDisposeLocalStreamView?.();\n }, [onDisposeLocalStreamView]);\n return useVideoStreamLifecycleMaintainer({\n ...props,\n onCreateStreamView,\n onDisposeStreamView\n });\n};\n\n/* @private /\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n remoteParticipantId: string;\n}\n\n/\n Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n \n @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (props: RemoteVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult \| undefined => {\n const {\n remoteParticipantId~~,\n~~ onCreateRemoteStreamView~~,\n~~ onDisposeRemoteStreamView\n } = props;\n const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n return onCreateRemoteStreamView?.(remoteParticipantId, options);\n }, [onCreateRemoteStreamView, remoteParticipantId]);\n const onDisposeStreamView = useMemo(() => () => {\n onDisposeRemoteStreamView?.(remoteParticipantId);\n }, [onDisposeRemoteStreamView, remoteParticipantId]);\n return useVideoStreamLifecycleMaintainer({\n ...props,\n onCreateStreamView,\n onDisposeStreamView\n });\n};"]}
1	+ {"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAiBrD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,iCAAiC,GAAG,CACxC,KAA0C,EACD,EAAE;IAC3C,MAAM,EACJ,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,EAA2C,CAAC;IAE9G,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,iBAAiB,IAAI,CAAC,mBAAmB,EAAE;YAC7C,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,0CAAE,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;gBACjE,MAAM,IAAI,wBAAwB,CAAC,MAAM,CAAC,CAAC;YAC7C,CAAC,CAAC,CAAC;SACJ;QAED,mFAAmF;QACnF,OAAO,GAAG,EAAE;YACV,IAAI,mBAAmB,EAAE;gBACvB,wFAAwF;gBACxF,IAAI,CAAC,iBAAiB,EAAE;oBACtB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,EAAI,CAAC;iBACzB;aACF;QACH,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,UAAU;QACV,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,mBAAmB;QACnB,mBAAmB;QACnB,WAAW;KACZ,CAAC,CAAC;IAEH,kKAAkK;IAClK,yGAAyG;IACzG,2GAA2G;IAC3G,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,wFAAwF;YACxF,IAAI,CAAC,iBAAiB,EAAE;gBACtB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,EAAI,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE7C,OAAO,qBAAqB,CAAC;AAC/B,CAAC,CAAC;AAQF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,CACpD,KAA+C,EACN,EAAE;IAC3C,MAAM,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC,OAA4B,EAAE,EAAE;QACrC,OAAO,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,OAAO,CAAC,CAAC;IAC5C,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,EAAI,CAAC;IAC/B,CAAC,EACD,CAAC,wBAAwB,CAAC,CAC3B,CAAC;IACF,OAAO,iCAAiC,iCACnC,KAAK,KACR,kBAAkB;QAClB,mBAAmB,IACnB,CAAC;AACL,CAAC,CAAC;AAYF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,CACrD,KAAgD,EACP,EAAE;IAC3C,MAAM,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IAC3F,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC,OAA4B,EAAE,EAAE;QACrC,OAAO,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAG,mBAAmB,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC,EACD,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,CAChD,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAG,mBAAmB,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CACjD,CAAC;IAEF,OAAO,iCAAiC,iCACnC,KAAK,KACR,kBAAkB;QAClB,mBAAmB,IACnB,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\n\n/** @private /\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n isStreamAvailable?: boolean;\n renderElementExists?: boolean;\n isMirrored?: boolean;\n scalingMode?: ViewScalingMode;\n isScreenSharingOn?: boolean;\n}\n\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n onCreateStreamView: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult> \| undefined;\n onDisposeStreamView: () => void \| undefined;\n}\n\n/\n Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n \n @remarks\n \n Notes on handling changes to scaling mode:\n \n Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n \n Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n \n @private\n /\nconst useVideoStreamLifecycleMaintainer = (\n props: VideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult \| undefined => {\n const {\n isMirrored,\n isScreenSharingOn,\n isStreamAvailable,\n onCreateStreamView,\n onDisposeStreamView,\n renderElementExists,\n scalingMode\n } = props;\n\n const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult \| undefined>();\n\n useEffect(() => {\n if (isStreamAvailable && !renderElementExists) {\n onCreateStreamView?.({ isMirrored, scalingMode })?.then((result) => {\n result && setVideoStreamViewResult(result);\n });\n }\n\n // Always clean up element to make tile up to date and be able to dispose correctly\n return () => {\n if (renderElementExists) {\n // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n if (!isScreenSharingOn) {\n onDisposeStreamView?.();\n }\n }\n };\n }, [\n isMirrored,\n isScreenSharingOn,\n isStreamAvailable,\n onCreateStreamView,\n onDisposeStreamView,\n renderElementExists,\n scalingMode\n ]);\n\n // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n useEffect(() => {\n return () => {\n // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n if (!isScreenSharingOn) {\n onDisposeStreamView?.();\n }\n };\n }, [isScreenSharingOn, onDisposeStreamView]);\n\n return videoStreamViewResult;\n};\n\n/* @private /\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n}\n\n/\n Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n \n @private\n /\nexport const useLocalVideoStreamLifecycleMaintainer = (\n props: LocalVideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult \| undefined => {\n const { onCreateLocalStreamView, onDisposeLocalStreamView } = props;\n const onCreateStreamView = useMemo(\n () => (options?: VideoStreamOptions) => {\n return onCreateLocalStreamView?.(options);\n },\n [onCreateLocalStreamView]\n );\n const onDisposeStreamView = useMemo(\n () => () => {\n onDisposeLocalStreamView?.();\n },\n [onDisposeLocalStreamView]\n );\n return useVideoStreamLifecycleMaintainer({\n ...props,\n onCreateStreamView,\n onDisposeStreamView\n });\n};\n\n/* @private /\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n remoteParticipantId: string;\n}\n\n/\n Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n \n @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (\n props: RemoteVideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult \| undefined => {\n const { remoteParticipantId, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;\n const onCreateStreamView = useMemo(\n () => (options?: VideoStreamOptions) => {\n return onCreateRemoteStreamView?.(remoteParticipantId, options);\n },\n [onCreateRemoteStreamView, remoteParticipantId]\n );\n const onDisposeStreamView = useMemo(\n () => () => {\n onDisposeRemoteStreamView?.(remoteParticipantId);\n },\n [onDisposeRemoteStreamView, remoteParticipantId]\n );\n\n return useVideoStreamLifecycleMaintainer({\n ...props,\n onCreateStreamView,\n onDisposeStreamView\n });\n};\n"]}

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

@@ -15,6 +15,7 @@ export const useVideoTileContextualMenuProps = (props) => {
         return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
         return undefined;
     }, [
+        /* @conditional-compile-remove(pinned-participants) */
         (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode
     ]);
     const contextualMenuProps = useMemo(() => {
@@ -32,12 +33,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                     text: strings.unpinParticipantForMe,
                     iconProps: {
                         iconName: 'UnpinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUnpinParticipant(remoteParticipant.userId);
@@ -59,12 +55,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                     text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,
                     iconProps: {
                         iconName: 'PinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onPinParticipant(remoteParticipant.userId);
@@ -83,12 +74,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                     text: strings.fitRemoteParticipantToFrame,
                     iconProps: {
                         iconName: 'VideoTileScaleFit',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Fit');
@@ -105,12 +91,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                         text: strings.fillRemoteParticipantFrame,
                         iconProps: {
                             iconName: 'VideoTileScaleFill',
-                            styles: {
-                                root: {
-                                    lineHeight: '1rem',
-                                    textAlign: 'center'
-                                }
-                            }
+                            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                         },
                         onClick: () => {
                             onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
@@ -125,14 +106,20 @@ export const useVideoTileContextualMenuProps = (props) => {
         if (items.length === 0) {
             return undefined;
         }
-        return {
-            items,
-            styles: {},
-            calloutProps: {
-                preventDismissOnEvent
-            }
-        };
-    }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, remoteParticipant.userId, remoteParticipant.displayName, disablePinMenuItem, toggleAnnouncerString]);
+        return { items, styles: {}, calloutProps: { preventDismissOnEvent } };
+    }, [
+        scalingMode,
+        strings,
+        view,
+        isPinned,
+        onPinParticipant,
+        onUnpinParticipant,
+        onUpdateScalingMode,
+        remoteParticipant.userId,
+        remoteParticipant.displayName,
+        disablePinMenuItem,
+        toggleAnnouncerString
+    ]);
     return contextualMenuProps;
 };
 //# sourceMappingURL=useVideoTileContextualMenuProps.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 };\n view?: {\n updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n };\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}): IContextualMenuProps \| undefined => {\n const {\n remoteParticipant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString\n } = props;\n const scalingMode = useMemo(() => {\n / @conditional-compile-remove(pinned-participants) /\n return props.remoteParticipant.videoStream?.scalingMode;\n return undefined;\n }, [/ @conditional-compile-remove(pinned-participants) */\n props.remoteParticipant.videoStream?.scalingMode]);\n const contextualMenuProps: IContextualMenuProps \| undefined = useMemo(() => {\n const items: IContextualMenuItem[] = [];\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: {\n root: {\n lineHeight: '1rem',\n textAlign: 'center'\n }\n }\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: {\n root: {\n lineHeight: '1rem',\n textAlign: 'center'\n }\n }\n },\n onClick: () => {\n onPinParticipant(remoteParticipant.userId);\n pinActionString && toggleAnnouncerString?.(pinActionString);\n },\n 'data-ui-id': 'video-tile-pin-participant-button',\n disabled: disablePinMenuItem,\n ariaLabel: pinActionString\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: {\n root: {\n lineHeight: '1rem',\n textAlign: 'center'\n }\n }\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 {\n items.push({\n key: 'fillRemoteParticipantFrame',\n text: strings.fillRemoteParticipantFrame,\n iconProps: {\n iconName: 'VideoTileScaleFill',\n styles: {\n root: {\n lineHeight: '1rem',\n textAlign: 'center'\n }\n }\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 }\n if (items.length === 0) {\n return undefined;\n }\n return {\n items,\n styles: {},\n calloutProps: {\n preventDismissOnEvent\n }\n };\n }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, remoteParticipant.userId, remoteParticipant.displayName, disablePinMenuItem, toggleAnnouncerString]);\n return contextualMenuProps;\n};\"../../../../acs-ui-common/src\""]}
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 };\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}): IContextualMenuProps \| undefined => {\n const {\n remoteParticipant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString\n } = props;\n const scalingMode = useMemo(() => {\n / @conditional-compile-remove(pinned-participants) /\n return props.remoteParticipant.videoStream?.scalingMode;\n return undefined;\n }, [\n / @conditional-compile-remove(pinned-participants) */\n props.remoteParticipant.videoStream?.scalingMode\n ]);\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,\n ariaLabel: pinActionString\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 {\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 }\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 ]);\n\n return contextualMenuProps;\n};\n\"../../../../acs-ui-common/src\""]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["~~../../../../../../../preprocess-dist/~~react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,~~EAAE~~,oCAAoC,~~EAAE~~,8BAA8B,~~EAAE~~,MAAM,wDAAwD,CAAC;~~AAE9I~~;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAKlD,EAAU,EAAE;IACX,MAAM,~~EACJ~~,gBAAgB,~~EAChB~~,cAAc,~~EACd~~,cAAc,~~EACd~~,WAAW,~~EACZ~~,GAAG,IAAI,CAAC;~~IACT~~,MAAM,aAAa,GAAG,cAAc,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;IACzG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;~~IACD~~,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,IAMhD,EAAU,EAAE;IACX,MAAM,~~EACJ~~,gBAAgB,~~EAChB~~,eAAe,~~EACf~~,YAAY,~~EACZ~~,gBAAgB,~~EAChB~~,OAAO,~~EACR~~,GAAG,IAAI,CAAC;~~IACT~~,MAAM,gBAAgB,GAAG,cAAc,~~CAAC~~,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,~~CAAC~~,CAAC;~~IAC7I~~,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAE5D;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,MAAM,8BAA8B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC;IACtH,iFAAiF;IACjF,IAAI,gBAAgB,IAAI,8BAA8B,EAAE;QACtD,OAAO,8BAA8B,CAAC;KACvC;IAED;;;;;OAKG;IACH,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC;IAE1E;;;;;OAKG;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';\nimport { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/*\n Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n \n @private\n /\nexport const calculateHorizontalChildrenPerPage = (args: {\n numberOfChildren: number;\n containerWidth: number;\n gapWidthRem: number;\n buttonWidthRem: number;\n}): number => {\n const {\n numberOfChildren~~,\n~~ containerWidth~~,\n~~ buttonWidthRem~~,\n~~ gapWidthRem\n } = args;\n const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);\n const gapWidth = convertRemToPx(gapWidthRem);\n\n /* First check how many children can fit in containerWidth.\n * __________________________________\n * \| \|\| \|\n * \| \|\| \|\n * \|________________\|\|________________\|\n * <-----------containerWidth--------->\n * containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n /\n const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));\n // If all children fit then return numberOfChildrenInContainer\n if (numberOfChildren <= numberOfChildrenInContainer) {\n return numberOfChildrenInContainer;\n }\n const buttonWidth = convertRemToPx(buttonWidthRem);\n\n /* We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n * containerWidth to compute childrenSpace\n * <-----------containerWidth--------->\n * __________________________________\n * \| \|\| \|\| \|\| \|\n * \|<\|\| \|\| \|\|>\|\n * \|_\|\|_____________\|\|_____________\|\|_\|\n * <-------childrenSpace------>\n /\n const childrenSpace = containerWidth - 2 buttonWidth - 2 * gapWidth;\n // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);\n};\n\n/*\n Helper function to find the number of children for the VerticalGallery on each page.\n \n @private\n /\nexport const calculateVerticalChildrenPerPage = (args: {\n numberOfChildren: number;\n containerHeight: number;\n gapHeightRem: number;\n controlBarHeight: number;\n isShort: boolean;\n}): number => {\n const {\n numberOfChildren~~,\n~~ containerHeight~~,\n~~ gapHeightRem~~,\n~~ controlBarHeight~~,\n~~ isShort\n } = args;\n const childMinHeightPx = convertRemToPx(isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);\n const gapHeightPx = convertRemToPx(gapHeightRem);\n const controlBarHeightPx = convertRemToPx(controlBarHeight);\n\n /* First check how many children can fit in containerHeight.\n \n _________________\n * \| \|\n * \| \|\n * \|________________\|\n * _________________\n * \| \|\n * \| \|\n * \|________________\|\n \n < n/m >\n \n number of children = container height - (2* gap height + button height) / childMinHeight\n \n we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them\n * to fill in the space as much as possible\n \n First we will find the max number of children without any controls we can fit.\n /\n\n const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));\n // if all of the children fit in the container just return the number of children\n if (numberOfChildren <= maxNumberOfChildrenInContainer) {\n return maxNumberOfChildrenInContainer;\n }\n\n /\n For the pagination we know the container height, the height of the button bar and the 2 times the gap\n * height, top tile and bottom tile above control bar. So the child space is calculated as:\n \n space = height - controlbar - (2 * gap)\n /\n const childSpace = containerHeight - controlBarHeightPx - 2 gapHeightPx;\n\n /*\n Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.\n * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.\n \n We want to always return at least one video tile if there are children present.So we take the max.\n */\n return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);\n};\"../../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,EACL,oCAAoC,EACpC,8BAA8B,EAC/B,MAAM,wDAAwD,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAKlD,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAE/E,MAAM,aAAa,GAAG,cAAc,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;IACzG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,IAMhD,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAE5F,MAAM,gBAAgB,GAAG,cAAc,CACrC,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,CACpG,CAAC;IACF,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAE5D;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,MAAM,8BAA8B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC;IACtH,iFAAiF;IACjF,IAAI,gBAAgB,IAAI,8BAA8B,EAAE;QACtD,OAAO,8BAA8B,CAAC;KACvC;IAED;;;;;OAKG;IACH,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC;IAE1E;;;;;OAKG;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';\nimport {\n SHORT_VERTICAL_GALLERY_TILE_SIZE_REM,\n VERTICAL_GALLERY_TILE_SIZE_REM\n} from '../styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/*\n Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n \n @private\n /\nexport const calculateHorizontalChildrenPerPage = (args: {\n numberOfChildren: number;\n containerWidth: number;\n gapWidthRem: number;\n buttonWidthRem: number;\n}): number => {\n const { numberOfChildren, containerWidth, buttonWidthRem, gapWidthRem } = args;\n\n const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);\n const gapWidth = convertRemToPx(gapWidthRem);\n\n /* First check how many children can fit in containerWidth.\n * __________________________________\n * \| \|\| \|\n * \| \|\| \|\n * \|________________\|\|________________\|\n * <-----------containerWidth--------->\n * containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n /\n const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));\n // If all children fit then return numberOfChildrenInContainer\n if (numberOfChildren <= numberOfChildrenInContainer) {\n return numberOfChildrenInContainer;\n }\n\n const buttonWidth = convertRemToPx(buttonWidthRem);\n\n /* We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n * containerWidth to compute childrenSpace\n * <-----------containerWidth--------->\n * __________________________________\n * \| \|\| \|\| \|\| \|\n * \|<\|\| \|\| \|\|>\|\n * \|_\|\|_____________\|\|_____________\|\|_\|\n * <-------childrenSpace------>\n /\n const childrenSpace = containerWidth - 2 buttonWidth - 2 * gapWidth;\n // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);\n};\n\n/*\n Helper function to find the number of children for the VerticalGallery on each page.\n \n @private\n /\nexport const calculateVerticalChildrenPerPage = (args: {\n numberOfChildren: number;\n containerHeight: number;\n gapHeightRem: number;\n controlBarHeight: number;\n isShort: boolean;\n}): number => {\n const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight, isShort } = args;\n\n const childMinHeightPx = convertRemToPx(\n isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight\n );\n const gapHeightPx = convertRemToPx(gapHeightRem);\n const controlBarHeightPx = convertRemToPx(controlBarHeight);\n\n /* First check how many children can fit in containerHeight.\n \n _________________\n * \| \|\n * \| \|\n * \|________________\|\n * _________________\n * \| \|\n * \| \|\n * \|________________\|\n \n < n/m >\n \n number of children = container height - (2* gap height + button height) / childMinHeight\n \n we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them\n * to fill in the space as much as possible\n \n First we will find the max number of children without any controls we can fit.\n /\n\n const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));\n // if all of the children fit in the container just return the number of children\n if (numberOfChildren <= maxNumberOfChildrenInContainer) {\n return maxNumberOfChildrenInContainer;\n }\n\n /\n For the pagination we know the container height, the height of the button bar and the 2 times the gap\n * height, top tile and bottom tile above control bar. So the child space is calculated as:\n \n space = height - controlbar - (2 * gap)\n /\n const childSpace = containerHeight - controlBarHeightPx - 2 gapHeightPx;\n\n /*\n Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.\n * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.\n \n We want to always return at least one video tile if there are children present.So we take the max.\n */\n return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);\n};\n\"../../../../../acs-ui-common/src\""]}

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

@@ -23,32 +23,40 @@ const _useOrganizedParticipants = (props) => {
         return maxRemoteVideoStreams;
     };
     const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
-    const videoParticipants = remoteParticipants.filter(p => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const participantsToSortTrampoline = () => {
         /* @conditional-compile-remove(gallery-layouts) */
         return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
         return videoParticipants;
     };
-    visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : smartDominantSpeakerParticipants({
-        participants: participantsToSortTrampoline(),
-        dominantSpeakers,
-        lastVisibleParticipants: visibleGridParticipants.current,
-        maxDominantSpeakers: maxRemoteVideoStreamsToUse
-    }).slice(0, maxRemoteVideoStreamsToUse);
+    visibleGridParticipants.current =
+        pinnedParticipantUserIds.length > 0 || isScreenShareActive
+            ? []
+            : smartDominantSpeakerParticipants({
+                participants: participantsToSortTrampoline(),
+                dominantSpeakers,
+                lastVisibleParticipants: visibleGridParticipants.current,
+                maxDominantSpeakers: maxRemoteVideoStreamsToUse
+            }).slice(0, maxRemoteVideoStreamsToUse);
     /* @conditional-compile-remove(gallery-layouts) */
-    const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];
+    const dominantSpeakerToGrid = layout === 'speaker'
+        ? dominantSpeakers && dominantSpeakers[0]
+            ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
+            : [visibleGridParticipants.current[0]]
+        : [];
     /* @conditional-compile-remove(gallery-layouts) */
     if (dominantSpeakerToGrid[0]) {
         visibleGridParticipants.current = dominantSpeakerToGrid;
     }
-    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));
+    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));
     const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipantsOrdered.filter(p => p.state === ('Connecting' || 'Ringing'));
+    const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map(p => p.userId));
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
     visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId) && /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
+        participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
         lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
@@ -61,9 +69,19 @@ const _useOrganizedParticipants = (props) => {
         // we will use the max streams provided to the function to find the max participants that can go in the grid
         // if there are less participants than max streams then we will use all participants including joining in the grid
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse) : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
-        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
+                ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)
+                : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive,
+        maxRemoteVideoStreamsToUse
+    ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = useCallback(() => {
         if (isScreenShareActive && localParticipant) {
@@ -85,15 +103,23 @@ const _useOrganizedParticipants = (props) => {
             // 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
             // overflow should be empty if total participants including calling participants is less than max streams
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current.concat(callingParticipants) : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants) : [];
-            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);
+            return visibleGridParticipants.current.length > 0
+                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
+                : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
+                    ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)
+                    : [];
+            return visibleGridParticipants.current.length > 0
+                ? visibleOverflowGalleryParticipants.current
+                : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);
         }
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, localParticipant, maxRemoteVideoStreamsToUse]);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive,
+        localParticipant,
+        maxRemoteVideoStreamsToUse
+    ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
-    return {
-        gridParticipants,
-        overflowGalleryParticipants: overflowGalleryParticipants
-    };
+    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
 };
 /* @conditional-compile-remove(pinned-participants) */
 const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
@@ -105,7 +131,7 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     }, {});
     // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
     const pinnedParticipants = [];
-    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach(id => {
+    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
         const pinnedParticipant = remoteParticipantMap[id];
         if (pinnedParticipant) {
             pinnedParticipants.push(pinnedParticipant);
@@ -113,7 +139,7 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     });
     // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
     const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
-    const unpinnedParticipants = props.remoteParticipants.filter(p => !pinnedParticipantUserIdSet.has(p.userId));
+    const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), {
         // if there are pinned participants then we should only consider unpinned participants
         remoteParticipants: unpinnedParticipants });
@@ -123,13 +149,15 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     }
     return {
         gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
-        overflowGalleryParticipants: props.isScreenShareActive ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+        overflowGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
     };
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {
     const videoParticipants = [];
     const audioParticipants = [];
-    remoteParticipants.forEach(p => {
+    remoteParticipants.forEach((p) => {
         var _a;
         if ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
             videoParticipants.push(p);

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":["../../../../../../../preprocess-dist/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(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}\n\n/\n A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n /\nexport interface OrganizedParticipantsResult {\n gridParticipants: VideoGalleryParticipant[];\n overflowGalleryParticipants: VideoGalleryParticipant[];\n}\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/ @conditional-compile-remove(gallery-layouts) /\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\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 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 const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();\n const videoParticipants = remoteParticipants.filter(p => p.videoStream?.isAvailable);\n const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n / @conditional-compile-remove(gallery-layouts) /\n return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;\n return videoParticipants;\n };\n visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 \|\| isScreenShareActive ? [] : 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 = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];\n / @conditional-compile-remove(gallery-layouts) /\n if (dominantSpeakerToGrid[0]) {\n visibleGridParticipants.current = dominantSpeakerToGrid;\n }\n const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));\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 visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId) && / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /!callingParticipantsSet.has(p.userId)),\n dominantSpeakers: dominantSpeakers,\n lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\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 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse) : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);\n return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n }, [/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);\n const gridParticipants = getGridParticipants();\n const getOverflowGalleryRemoteParticipants = useCallback((): (VideoGalleryParticipant \| VideoGalleryRemoteParticipant)[] => {\n if (isScreenShareActive && localParticipant) {\n const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));\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(visibleOverflowGalleryParticipants.current.concat(callingParticipants));\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 ? visibleOverflowGalleryParticipants.current.concat(callingParticipants) : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants) : [];\n return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n }\n }, [/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /callingParticipants, isScreenShareActive, localParticipant, maxRemoteVideoStreamsToUse]);\n const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n return {\n gridParticipants,\n overflowGalleryParticipants: overflowGalleryParticipants\n };\n};\n\n/ @conditional-compile-remove(pinned-participants) /\nconst _useOrganizedParticipantsWithPinnedParticipants = (props: OrganizedParticipantsArgs): 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 // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n props.pinnedParticipantUserIds?.forEach(id => {\n const pinnedParticipant = remoteParticipantMap[id];\n if (pinnedParticipant) {\n pinnedParticipants.push(pinnedParticipant);\n }\n });\n\n // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n const unpinnedParticipants = props.remoteParticipants.filter(p => !pinnedParticipantUserIdSet.has(p.userId));\n const useOrganizedParticipantsProps = {\n ...props,\n // if there are pinned participants then we should only consider unpinned participants\n remoteParticipants: unpinnedParticipants\n };\n const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n if (pinnedParticipants.length === 0) {\n return useOrganizedParticipantsResult;\n }\n return {\n gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n overflowGalleryParticipants: props.isScreenShareActive ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n };\n};\nconst putVideoParticipantsFirst = (remoteParticipants: VideoGalleryRemoteParticipant[]): VideoGalleryRemoteParticipant[] => {\n const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n remoteParticipants.forEach(p => {\n if (p.videoStream?.isAvailable) {\n videoParticipants.push(p);\n } else {\n audioParticipants.push(p);\n }\n });\n const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n return remoteParticipantSortedByVideo;\n};\n\n/\n 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 / @conditional-compile-remove(pinned-participants) */\n return _useOrganizedParticipantsWithPinnedParticipants(args);\n return _useOrganizedParticipants(args);\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(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}\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\n/ @conditional-compile-remove(pinned-participants) /\nconst _useOrganizedParticipantsWithPinnedParticipants = (\n props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n // map remote participants by userId\n const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n map[remoteParticipant.userId] = remoteParticipant;\n return map;\n }, {});\n\n // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n props.pinnedParticipantUserIds?.forEach((id) => {\n const pinnedParticipant = remoteParticipantMap[id];\n if (pinnedParticipant) {\n pinnedParticipants.push(pinnedParticipant);\n }\n });\n\n // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n const useOrganizedParticipantsProps = {\n ...props,\n // if there are pinned participants then we should only consider unpinned participants\n remoteParticipants: unpinnedParticipants\n };\n\n const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n if (pinnedParticipants.length === 0) {\n return useOrganizedParticipantsResult;\n }\n\n return {\n gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n overflowGalleryParticipants: props.isScreenShareActive\n ? pinnedParticipants.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 / @conditional-compile-remove(pinned-participants) */\n return _useOrganizedParticipantsWithPinnedParticipants(args);\n return _useOrganizedParticipants(args);\n};\n"]}