npm - @azure/communication-react - Versions diffs - 1.8.1-alpha-202309200012 → 1.8.1-alpha-202309220012 - Mend

@azure/communication-react 1.8.1-alpha-202309200012 → 1.8.1-alpha-202309220012

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RemoteVideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/RemoteVideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAkB;IACxD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,uBAAuB,GAAqB;IACvD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,+DAA+D;QAC/D,uCAAuC;QACvC,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT ~~license~~.\n\nimport { IStyle } from '@fluentui/react';\nimport { CSSProperties } from 'react';\n\n/** @private /\nexport const remoteVideoTileWrapperStyle: CSSProperties = {\n height: '100%',\n width: '100%',\n position: 'relative'\n};\n\n/* @private */\nexport const drawerMenuWrapperStyles: { root: IStyle } = {\n root: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n // Any zIndex > 0 will work because this is the only absolutely\n // positioned element in the container.\n zIndex: 2\n }\n};\n"]}
1	+ {"version":3,"file":"RemoteVideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/RemoteVideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAkB;IACxD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,uBAAuB,GAAqB;IACvD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,+DAA+D;QAC/D,uCAAuC;QACvC,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { CSSProperties } from 'react';\n\n/** @private /\nexport const remoteVideoTileWrapperStyle: CSSProperties = {\n height: '100%',\n width: '100%',\n position: 'relative'\n};\n\n/* @private */\nexport const drawerMenuWrapperStyles: { root: IStyle } = {\n root: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n // Any zIndex > 0 will work because this is the only absolutely\n // positioned element in the container.\n zIndex: 2\n }\n};\n"]}

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { mergeStyles } from '@fluentui/react';
 import { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
 import { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_STYLE } from './VideoGalleryResponsiveHorizontalGallery.styles';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollableHorizontalGallery.style.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EACL,sCAAsC,EACtC,mCAAmC,EACpC,MAAM,kDAAkD,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAiB;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;QAChE,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,mCAAmC;KAC3C;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAAG,WAAW,CAAC;IACpE,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,eAAe,6BAA6B,CAAC,KAAK,MAAM;IAC/D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,QAAQ;IAClB,oBAAoB,EAAE,MAAM;IAC5B,iBAAiB,EAAE,MAAM;IACzB,qBAAqB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT ~~license~~.\n\nimport { IStackStyles, mergeStyles } from '@fluentui/react';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\nimport {\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n} from './VideoGalleryResponsiveHorizontalGallery.styles';\n\n/*\n @private\n /\nexport const scrollableHorizontalGalleryStyles: IStackStyles = {\n root: {\n width: '100%',\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n paddingRight: '0.5rem',\n '> ': SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n }\n};\n\n/*\n @private\n */\nexport const scrollableHorizontalGalleryContainerStyles = mergeStyles({\n display: 'flex',\n width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n overflow: 'scroll',\n '-ms-overflow-style': 'none',\n 'scrollbar-width': 'none',\n '::-webkit-scrollbar': { display: 'none' }\n});\n"]}
1	+ {"version":3,"file":"ScrollableHorizontalGallery.style.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EACL,sCAAsC,EACtC,mCAAmC,EACpC,MAAM,kDAAkD,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAiB;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;QAChE,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,mCAAmC;KAC3C;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAAG,WAAW,CAAC;IACpE,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,eAAe,6BAA6B,CAAC,KAAK,MAAM;IAC/D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,QAAQ;IAClB,oBAAoB,EAAE,MAAM;IAC5B,iBAAiB,EAAE,MAAM;IACzB,qBAAqB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, mergeStyles } from '@fluentui/react';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\nimport {\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n} from './VideoGalleryResponsiveHorizontalGallery.styles';\n\n/*\n @private\n /\nexport const scrollableHorizontalGalleryStyles: IStackStyles = {\n root: {\n width: '100%',\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n paddingRight: '0.5rem',\n '> ': SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n }\n};\n\n/*\n @private\n */\nexport const scrollableHorizontalGalleryContainerStyles = mergeStyles({\n display: 'flex',\n width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n overflow: 'scroll',\n '-ms-overflow-style': 'none',\n 'scrollbar-width': 'none',\n '::-webkit-scrollbar': { display: 'none' }\n});\n"]}

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
 /**
  * @private

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAU,EAAE;IAC3G,OAAO;QACL,SAAS,EAAE,QAAQ;YACjB,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;YACvD,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;QACzD,KAAK,EAAE,qBAAqB;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;gBAC1D,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;YAC5D,CAAC,CAAC,MAAM;QACV,YAAY,EAAE,QAAQ;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAA2B,EAAE;IACnF,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,mCAAmC;KAC/F,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAElF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEtG;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT ~~license~~.\n\nimport { IStyle } from '@fluentui/react';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/*\n @private\n /\nexport const horizontalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {\n return {\n minHeight: isNarrow\n ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`\n : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n width: shouldFloatLocalVideo\n ? isNarrow\n ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`\n : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`\n : '100%',\n paddingRight: '0.5rem'\n };\n};\n\n/\n @private\n /\nexport const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyles => {\n return {\n children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE\n };\n};\n\n/\n Small horizontal gallery tile size in rem\n * @private\n /\nexport const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };\n\n/\n Large horizontal gallery tile size in rem\n * @private\n /\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };\n\n/\n @private\n /\nexport const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n/\n @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {\n minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,\n maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,\n width: '100%',\n height: '100%'\n};\n"]}
1	+ {"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAU,EAAE;IAC3G,OAAO;QACL,SAAS,EAAE,QAAQ;YACjB,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;YACvD,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;QACzD,KAAK,EAAE,qBAAqB;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;gBAC1D,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;YAC5D,CAAC,CAAC,MAAM;QACV,YAAY,EAAE,QAAQ;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAA2B,EAAE;IACnF,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,mCAAmC;KAC/F,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAElF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEtG;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/*\n @private\n /\nexport const horizontalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {\n return {\n minHeight: isNarrow\n ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`\n : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n width: shouldFloatLocalVideo\n ? isNarrow\n ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`\n : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`\n : '100%',\n paddingRight: '0.5rem'\n };\n};\n\n/\n @private\n /\nexport const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyles => {\n return {\n children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE\n };\n};\n\n/\n Small horizontal gallery tile size in rem\n * @private\n /\nexport const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };\n\n/\n Large horizontal gallery tile size in rem\n * @private\n /\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };\n\n/\n @private\n /\nexport const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n/\n @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {\n minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,\n maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,\n width: '100%',\n height: '100%'\n};\n"]}

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
 /**
  * VerticalGallery tile size in rem:

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":["../../../../../../../../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\""]}
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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { useEffect, useMemo, useState } from 'react';
 /**
  * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","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"]}
1	+ {"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { _formatString } from "../../../../acs-ui-common/src";
 import { useMemo } from 'react';
 import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs-ui-common/src";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const useVideoTileContextualMenuProps = (props: {\n remoteParticipant: VideoGalleryRemoteParticipant;\n strings?: {\n fitRemoteParticipantToFrame?: string;\n fillRemoteParticipantFrame?: string;\n pinParticipantForMe?: string;\n pinParticipantForMeLimitReached?: string;\n unpinParticipantForMe?: string;\n pinParticipantMenuItemAriaLabel?: string;\n unpinParticipantMenuItemAriaLabel?: string;\n pinnedParticipantAnnouncementAriaLabel?: string;\n unpinnedParticipantAnnouncementAriaLabel?: string;\n };\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\""]}
1	+ {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,sCAAgC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAoB/C,EAAoC,EAAE;;IACrC,MAAM,EACJ,iBAAiB,EACjB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC/B,sDAAsD;QACtD,OAAO,MAAA,KAAK,CAAC,iBAAiB,CAAC,WAAW,0CAAE,WAAW,CAAC;QACxD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE;QACD,sDAAsD;QACtD,MAAA,KAAK,CAAC,iBAAiB,CAAC,WAAW,0CAAE,WAAW;KACjD,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAqC,OAAO,CAAC,GAAG,EAAE;QACzE,MAAM,KAAK,GAA0B,EAAE,CAAC;QAExC,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,IAAI,QAAQ,IAAI,kBAAkB,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,CAAA,EAAE;gBACpE,IAAI,iBAAiB,GAAuB,SAAS,CAAC;gBACtD,IAAI,qBAAqB,IAAI,OAAO,CAAC,iCAAiC,IAAI,iBAAiB,CAAC,WAAW,EAAE;oBACvG,iBAAiB,GAAG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iCAAiC,EAAE;wBAC5E,eAAe,EAAE,iBAAiB,CAAC,WAAW;qBAC/C,CAAC,CAAC;iBACJ;gBACD,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,OAAO;oBACZ,IAAI,EAAE,OAAO,CAAC,qBAAqB;oBACnC,SAAS,EAAE;wBACT,QAAQ,EAAE,kBAAkB;wBAC5B,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;qBAC9D;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,kBAAkB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAC7C,iBAAiB,KAAI,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,iBAAiB,CAAC,CAAA,CAAC;oBAClE,CAAC;oBACD,YAAY,EAAE,qCAAqC;oBACnD,SAAS,EAAE,iBAAiB;iBAC7B,CAAC,CAAC;aACJ;YACD,IAAI,CAAC,QAAQ,IAAI,gBAAgB,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAA,EAAE;gBACjE,IAAI,eAAe,GAAuB,SAAS,CAAC;gBACpD,IAAI,qBAAqB,IAAI,OAAO,CAAC,sCAAsC,IAAI,iBAAiB,CAAC,WAAW,EAAE;oBAC5G,eAAe,GAAG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sCAAsC,EAAE;wBAC/E,eAAe,EAAE,iBAAiB,CAAC,WAAW;qBAC/C,CAAC,CAAC;iBACJ;gBACD,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,KAAK;oBACV,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC,CAAC,OAAO,CAAC,mBAAmB;oBAChG,SAAS,EAAE;wBACT,QAAQ,EAAE,gBAAgB;wBAC1B,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;qBAC9D;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,gBAAgB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAC3C,eAAe,KAAI,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,eAAe,CAAC,CAAA,CAAC;oBAC9D,CAAC;oBACD,YAAY,EAAE,mCAAmC;oBACjD,QAAQ,EAAE,kBAAkB;oBAC5B,SAAS,EAAE,eAAe;iBAC3B,CAAC,CAAC;aACJ;SACF;QACD,IAAI,WAAW,EAAE;YACf,IAAI,WAAW,KAAK,MAAM,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,2BAA2B,CAAA,EAAE;gBAClE,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,6BAA6B;oBAClC,IAAI,EAAE,OAAO,CAAC,2BAA2B;oBACzC,SAAS,EAAE;wBACT,QAAQ,EAAE,mBAAmB;wBAC7B,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;qBAC9D;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,iBAAiB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBACvD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;oBACD,YAAY,EAAE,yBAAyB;oBACvC,SAAS,EAAE,OAAO,CAAC,2BAA2B;iBAC/C,CAAC,CAAC;aACJ;iBAAM,IAAI,WAAW,KAAK,KAAK,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B,CAAA,EAAE;gBACvE;oBACE,KAAK,CAAC,IAAI,CAAC;wBACT,GAAG,EAAE,4BAA4B;wBACjC,IAAI,EAAE,OAAO,CAAC,0BAA0B;wBACxC,SAAS,EAAE;4BACT,QAAQ,EAAE,oBAAoB;4BAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;yBAC9D;wBACD,OAAO,EAAE,GAAG,EAAE;4BACZ,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;4BACxD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAClC,CAAC;wBACD,YAAY,EAAE,uBAAuB;wBACrC,SAAS,EAAE,OAAO,CAAC,0BAA0B;qBAC9C,CAAC,CAAC;iBACJ;aACF;SACF;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,qBAAqB,EAAE,EAAE,CAAC;IACxE,CAAC,EAAE;QACD,WAAW;QACX,OAAO;QACP,IAAI;QACJ,QAAQ;QACR,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB,CAAC,MAAM;QACxB,iBAAiB,CAAC,WAAW;QAC7B,kBAAkB;QAClB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,mBAAmB,CAAC;AAC7B,CAAC,CAAC","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 CHANGED Viewed

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { _convertRemToPx as convertRemToPx } from "../../../../../acs-ui-common/src";
 import { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';
 import { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveVerticalGallery.styles';

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":["../../../../../../../../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\""]}
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

@@ -1,18 +1,32 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { useCallback, useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
+const DEFAULT_MAX_VIDEO_SREAMS = 4;
+/* @conditional-compile-remove(gallery-layouts) */
+const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = useRef([]);
     const visibleOverflowGalleryParticipants = useRef([]);
-    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [],
+    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [],
     /* @conditional-compile-remove(gallery-layouts) */
     layout } = props;
+    const calculateMaxRemoteVideoStreams = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
+            return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
+        }
+        else {
+            return maxRemoteVideoStreams;
+        }
+        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 participantsToSortTrampoline = () => {
         /* @conditional-compile-remove(gallery-layouts) */
-        return layout !== 'speaker' ? videoParticipants : remoteParticipants;
+        return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
         return videoParticipants;
     };
     visibleGridParticipants.current =
@@ -22,8 +36,8 @@ const _useOrganizedParticipants = (props) => {
                 participants: participantsToSortTrampoline(),
                 dominantSpeakers,
                 lastVisibleParticipants: visibleGridParticipants.current,
-                maxDominantSpeakers: maxRemoteVideoStreams
-            }).slice(0, maxRemoteVideoStreams);
+                maxDominantSpeakers: maxRemoteVideoStreamsToUse
+            }).slice(0, maxRemoteVideoStreamsToUse);
     /* @conditional-compile-remove(gallery-layouts) */
     const dominantSpeakerToGrid = layout === 'speaker'
         ? dominantSpeakers && dominantSpeakers[0]
@@ -51,16 +65,22 @@ const _useOrganizedParticipants = (props) => {
         if (isScreenShareActive) {
             return [];
         }
+        // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
+        // 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.concat(callingParticipants);
+            : 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;
+            : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
+        isScreenShareActive,
+        maxRemoteVideoStreamsToUse
     ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = useCallback(() => {
@@ -80,16 +100,23 @@ const _useOrganizedParticipants = (props) => {
         else {
             // If screen sharing is not active, then assign all video tiles as grid tiles.
             // If there are no video tiles, then assign audio tiles as grid tiles.
+            // 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)
-                : [];
-            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : [];
+                : 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
+        localParticipant,
+        maxRemoteVideoStreamsToUse
     ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
     return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(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;\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,\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 videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n\n const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n / @conditional-compile-remove(gallery-layouts) /\n return layout !== 'speaker' ? videoParticipants : remoteParticipants;\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: maxRemoteVideoStreams as number\n }).slice(0, maxRemoteVideoStreams);\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 / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current.concat(callingParticipants);\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current;\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive\n ]);\n\n const gridParticipants = getGridParticipants();\n\n const 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 / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n : [];\n return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : [];\n }\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive,\n localParticipant\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"]}
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"]}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { GridLayoutStyles } from '.';
 import { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';
@@ -77,7 +78,7 @@ export interface VideoGalleryStrings {
 /**
  * @public
  */
-export declare type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker' | /* @conditional-compile-remove(gallery-layouts) */ 'focusedContent';
+export declare type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker' | /* @conditional-compile-remove(large-gallery) */ 'largeGallery' | /* @conditional-compile-remove(gallery-layouts) */ 'focusedContent';
 /**
  * {@link VideoGallery} Component Styles.
  * @public

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { concatStyleSets, mergeStyles, Stack } from '@fluentui/react';
 import React, { useCallback, useMemo, useRef } from 'react';
 /* @conditional-compile-remove(pinned-participants) */
@@ -24,6 +24,8 @@ import { useId } from '@fluentui/react-hooks';
 import { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';
 /* @conditional-compile-remove(gallery-layouts) */
 import { FocusedContentLayout } from './VideoGallery/FocusContentLayout';
+/* @conditional-compile-remove(gallery-layouts) */
+import { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -307,6 +309,10 @@ export const VideoGallery = (props) => {
         if (layout === 'speaker') {
             return React.createElement(SpeakerVideoLayout, Object.assign({}, layoutProps));
         }
+        /* @conditional-compile-remove(large-gallery) */
+        if (layout === 'largeGallery') {
+            return React.createElement(LargeGalleryLayout, Object.assign({}, layoutProps));
+        }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);
     return (React.createElement("div", {