npm - @azure/communication-react - Versions diffs - 1.5.1-alpha-202303010017 → 1.5.1-alpha-202303030153 - Mend

@azure/communication-react 1.5.1-alpha-202303010017 → 1.5.1-alpha-202303030153

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

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.5.1-alpha-202303010017';
+module.exports = '1.5.1-alpha-202303030153';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-~~202303010017~~';\n"]}
1	+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202303030153';\n"]}

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

@@ -13,16 +13,16 @@ import { bucketize } from './utils/overFlowGalleriesUtils';
  */
 export const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage } = props;
-    const [page, setPage] = useState(0);
+    const [page, setPage] = useState(1);
     const [buttonState, setButtonState] = useState({ previous: true, next: true });
     const numberOfChildren = React.Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
     const paginatedChildren = useMemo(() => {
         return bucketize(React.Children.toArray(children), childrenPerPage);
     }, [children, childrenPerPage]);
-    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const childrenOnCurrentPage = paginatedChildren[clippedPage - 1];
     const showButtons = numberOfChildren > childrenPerPage;
     const onPreviousButtonClick = () => {
         setPage(page - 1);
@@ -30,12 +30,15 @@ export const VerticalGallery = (props) => {
     const onNextButtonClick = () => {
         setPage(page + 1);
     };
+    if (page > lastPage && lastPage > 0) {
+        setPage(lastPage);
+    }
     useEffect(() => {
-        if (page > 0 && page < lastPage && showButtons) {
+        if (page > 1 && page < lastPage && showButtons) {
             // we are somewhere in between first and last pages.
             setButtonState({ previous: false, next: false });
         }
-        else if (page === 0 && showButtons) {
+        else if (page === 1 && showButtons) {
             // we are on the first page.
             setButtonState({ previous: true, next: false });
         }
@@ -45,7 +48,7 @@ export const VerticalGallery = (props) => {
         }
     }, [page, numberOfChildren, lastPage, showButtons]);
     const childContainerStyle = useMemo(() => {
-        return { root: childrenContainerStyle };
+        return { root: childrenContainerStyle(2) };
     }, []);
     const childrenStyles = useMemo(() => {
         return { root: styles === null || styles === void 0 ? void 0 : styles.children };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport {\n childrenContainerStyle,\n pageNavigationControlBarContainerStyle,\n participantPageCounter,\n leftRightButtonStyles,\n navIconStyles,\n rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/*\n Styles for the VerticalGallery component\n /\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n /* Styles for each video tile in the vertical gallery /\n children?: IStyle;\n /* Styles for the verticalGallery control bar /\n controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/\n Styles for the control bar inside the VerticalGallery component\n /\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n /\n styles for the next button in the VerticalGalleryControlBar\n /\n nextButton?: IStyle;\n /\n Styles for the previous button in the VerticalGalleryControlBar\n /\n previousButton?: IStyle;\n /\n Styles for the counter in the VerticalGalleryControlBar\n /\n counter?: IStyle;\n}\n/\n Props for the VerticalGallery component\n \n @beta\n /\nexport interface VerticalGalleryProps {\n /* Video tiles for the remote participants in the vertical gallery /\n children: React.ReactNode;\n /* Max number of children per page in the vertical Gallery /\n childrenPerPage: number;\n /* Styles to customize the vertical gallery /\n styles?: VerticalGalleryStyles;\n}\n\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: { next: boolean; previous: boolean };\n totalPages: number;\n currentPage: number;\n styles?: VerticalGalleryControlBarStyles;\n}\n\n/\n VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n \n @beta\n /\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n const { children, styles, childrenPerPage } = props;\n\n const [page, setPage] = useState(0);\n const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n\n const paginatedChildren: React.ReactNode[][] = useMemo(() => {\n return bucketize(React.Children.toArray(children), childrenPerPage);\n }, [children, childrenPerPage]);\n\n const firstIndexOfCurrentPage = page childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = paginatedChildren[clippedPage];\n\n const showButtons = numberOfChildren > childrenPerPage;\n\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n\n useEffect(() => {\n if (page > 0 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({ previous: false, next: false });\n } else if (page === 0 && showButtons) {\n // we are on the first page.\n setButtonState({ previous: true, next: false });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({ previous: false, next: true });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n\n const childContainerStyle = useMemo(() => {\n return { root: childrenContainerStyle };\n }, []);\n\n const childrenStyles = useMemo(() => {\n return { root: styles?.children };\n }, [styles?.children]);\n\n if (childrenPerPage <= 0) {\n return <></>;\n }\n\n return (\n <Stack className={mergeStyles(rootStyle, styles?.root)}>\n <Stack styles={childContainerStyle}>\n {childrenOnCurrentPage.map((child, i) => {\n return (\n <Stack.Item key={i} styles={childrenStyles}>\n {child}\n </Stack.Item>\n );\n })}\n </Stack>\n {showButtons && (\n <VerticalGalleryControlBar\n buttonsDisabled={buttonState}\n onPreviousButtonClick={onPreviousButtonClick}\n onNextButtonClick={onNextButtonClick}\n totalPages={lastPage}\n currentPage={page}\n />\n )}\n </Stack>\n );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n const theme = useTheme();\n\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n\n const controlBarSpacing = { childrenGap: '0.5rem' };\n\n return (\n <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton\n className={previousButtonSyles}\n onClick={onPreviousButtonClick}\n disabled={buttonsDisabled?.previous}\n >\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n </DefaultButton>\n <Text className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}>\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport {\n childrenContainerStyle,\n pageNavigationControlBarContainerStyle,\n participantPageCounter,\n leftRightButtonStyles,\n navIconStyles,\n rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/*\n Styles for the VerticalGallery component\n /\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n /* Styles for each video tile in the vertical gallery /\n children?: IStyle;\n /* Styles for the verticalGallery control bar /\n controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/\n Styles for the control bar inside the VerticalGallery component\n /\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n /\n styles for the next button in the VerticalGalleryControlBar\n /\n nextButton?: IStyle;\n /\n Styles for the previous button in the VerticalGalleryControlBar\n /\n previousButton?: IStyle;\n /\n Styles for the counter in the VerticalGalleryControlBar\n /\n counter?: IStyle;\n}\n/\n Props for the VerticalGallery component\n \n @beta\n /\nexport interface VerticalGalleryProps {\n /* Video tiles for the remote participants in the vertical gallery /\n children: React.ReactNode;\n /* Max number of children per page in the vertical Gallery /\n childrenPerPage: number;\n /* Styles to customize the vertical gallery /\n styles?: VerticalGalleryStyles;\n}\n\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: { next: boolean; previous: boolean };\n totalPages: number;\n currentPage: number;\n styles?: VerticalGalleryControlBarStyles;\n}\n\n/\n VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n \n @beta\n /\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n const { children, styles, childrenPerPage } = props;\n\n const [page, setPage] = useState(1);\n const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n const paginatedChildren: React.ReactNode[][] = useMemo(() => {\n return bucketize(React.Children.toArray(children), childrenPerPage);\n }, [children, childrenPerPage]);\n\n const firstIndexOfCurrentPage = (page - 1) childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = paginatedChildren[clippedPage - 1];\n\n const showButtons = numberOfChildren > childrenPerPage;\n\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n\n if (page > lastPage && lastPage > 0) {\n setPage(lastPage);\n }\n\n useEffect(() => {\n if (page > 1 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({ previous: false, next: false });\n } else if (page === 1 && showButtons) {\n // we are on the first page.\n setButtonState({ previous: true, next: false });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({ previous: false, next: true });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n\n const childContainerStyle = useMemo(() => {\n return { root: childrenContainerStyle(2) };\n }, []);\n\n const childrenStyles = useMemo(() => {\n return { root: styles?.children };\n }, [styles?.children]);\n\n if (childrenPerPage <= 0) {\n return <></>;\n }\n\n return (\n <Stack className={mergeStyles(rootStyle, styles?.root)}>\n <Stack styles={childContainerStyle}>\n {childrenOnCurrentPage.map((child, i) => {\n return (\n <Stack.Item key={i} styles={childrenStyles}>\n {child}\n </Stack.Item>\n );\n })}\n </Stack>\n {showButtons && (\n <VerticalGalleryControlBar\n buttonsDisabled={buttonState}\n onPreviousButtonClick={onPreviousButtonClick}\n onNextButtonClick={onNextButtonClick}\n totalPages={lastPage}\n currentPage={page}\n />\n )}\n </Stack>\n );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n const theme = useTheme();\n\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n\n const controlBarSpacing = { childrenGap: '0.5rem' };\n\n return (\n <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton\n className={previousButtonSyles}\n onClick={onPreviousButtonClick}\n disabled={buttonsDisabled?.previous}\n >\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n </DefaultButton>\n <Text className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}>\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>\n );\n};\n"]}

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

@@ -30,6 +30,8 @@ export declare const VERTICAL_GALLERY_TILE_STYLE: {
     minWidth: string;
     maxHeight: string;
     maxWidth: string;
+    width: string;
+    height: string;
 };
 /**
  * @private

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

@@ -33,7 +33,9 @@ export const VERTICAL_GALLERY_TILE_STYLE = {
     minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,
     minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
     maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,
-    maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`
+    maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    width: '100%',
+    height: '100%'
 };
 /**
  * @private

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;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,OAAO,EAAE,uCAAuC,EAAE,MAAM,6BAA6B,CAAC;AAEtF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAE3F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,qBAA8B,EAAU,EAAE;IACtF,OAAO;QACL,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;QACnD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,QAAQ,CAAC,uCAAuC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;QACnH,aAAa,EAAE,QAAQ;KACxB,CAAC;AACJ,CAAC,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;~~CACvD~~,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,QAAQ,EAAE,2BAA2B;CACtC,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 { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } 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 VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };\n\n/\n Styles for the VerticalGallery's container set in parent.\n \n width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n \n @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n /\nexport const verticalGalleryContainerStyle = (shouldFloatLocalVideo: boolean): IStyle => {\n return {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})` : '100%',\n paddingBottom: '0.5rem'\n };\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};\n/\n @private\n */\nexport const verticalGalleryStyle: VerticalGalleryStyles = {\n children: VERTICAL_GALLERY_TILE_STYLE\n};\n\"../../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,OAAO,EAAE,uCAAuC,EAAE,MAAM,6BAA6B,CAAC;AAEtF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAE3F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,qBAA8B,EAAU,EAAE;IACtF,OAAO;QACL,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;QACnD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,QAAQ,CAAC,uCAAuC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;QACnH,aAAa,EAAE,QAAQ;KACxB,CAAC;AACJ,CAAC,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;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,QAAQ,EAAE,2BAA2B;CACtC,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 { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } 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 VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };\n\n/\n Styles for the VerticalGallery's container set in parent.\n \n width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n \n @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n /\nexport const verticalGalleryContainerStyle = (shouldFloatLocalVideo: boolean): IStyle => {\n return {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})` : '100%',\n paddingBottom: '0.5rem'\n };\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 @private\n */\nexport const verticalGalleryStyle: VerticalGalleryStyles = {\n children: VERTICAL_GALLERY_TILE_STYLE\n};\n\"../../../../../acs-ui-common/src\""]}

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

@@ -9,6 +9,17 @@ import { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 export declare const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Styles to disable the selectivity of a text in video gallery
+ */
+export declare const unselectable: {
+    '-webkit-user-select': string;
+    '-webkit-touch-callout': string;
+    '-moz-user-select': string;
+    '-ms-user-select': string;
+    'user-select': string;
+};
 /**
  * @private
  * Set aside only 6 dominant speakers for remaining audio participants

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

@@ -27,6 +27,17 @@ import { useId } from '@fluentui/react-hooks';
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 export const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Styles to disable the selectivity of a text in video gallery
+ */
+export const unselectable = {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none',
+    '-moz-user-select': 'none',
+    '-ms-user-select': 'none',
+    'user-select': 'none'
+};
 /**
  * @private
  * Set aside only 6 dominant speakers for remaining audio participants
@@ -247,7 +258,7 @@ export const VideoGallery = (props) => {
     return (React.createElement("div", {
         /* @conditional-compile-remove(pinned-participants) */
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
-        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) },
         videoGalleryLayout,
         /* @conditional-compile-remove(pinned-participants) */
         React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" })));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\n/* @conditional-compile-remove(pinned-participants) /\nimport { Announcer } from './Announcer';\n/ @conditional-compile-remove(pinned-participants) /\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/ @conditional-compile-remove(rooms) /\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/ @conditional-compile-remove(pinned-participants) /\nimport { useId } from '@fluentui/react-hooks';\n\n/\n @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n /\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n/\n @private\n * Set aside only 6 dominant speakers for remaining audio participants\n /\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/\n @private\n * Default remote video tile menu options\n /\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/ @conditional-compile-remove(pinned-participants) /\n/\n @private\n * Maximum number of remote video tiles that can be pinned\n /\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/\n All strings that may be shown on the UI in the {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryStrings {\n /* String to notify that local user is sharing their screen /\n screenIsBeingSharedMessage: string;\n /* String to show when remote screen share stream is loading /\n screenShareLoadingMessage: string;\n /* String for local video label. Default is \"You\" /\n localVideoLabel: string;\n /* String for local video camera switcher /\n localVideoCameraSwitcherLabel: string;\n /* String for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementLabel: string;\n /* String for announcing the selected camera /\n localVideoSelectedDescription: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame /\n fitRemoteParticipantToFrame: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame /\n fillRemoteParticipantFrame: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile /\n pinParticipantForMe: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for setting a remote participant's video tile /\n unpinParticipantForMe: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label for pin participant menu item of remote participant's video tile /\n pinParticipantMenuItemAriaLabel: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label for unpin participant menu item of remote participant's video tile /\n unpinParticipantMenuItemAriaLabel: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label to announce when remote participant's video tile is pinned /\n pinnedParticipantAnnouncementAriaLabel: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label to announce when remote participant's video tile is unpinned /\n unpinnedParticipantAnnouncementAriaLabel: string;\n}\n\n/\n @public\n /\nexport type VideoGalleryLayout = 'default' \| 'floatingLocalVideo';\n\n/\n {@link VideoGallery} Component Styles.\n * @public\n /\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /* Styles for the grid layout /\n gridLayout?: GridLayoutStyles;\n /* Styles for the horizontal gallery /\n horizontalGallery?: HorizontalGalleryStyles;\n /* Styles for the local video /\n localVideo?: IStyle;\n}\n\n/ @conditional-compile-remove(vertical-gallery) /\n/\n Different modes and positions of the overflow gallery in the VideoGallery\n \n @beta\n /\nexport type OverflowGalleryLayout = 'HorizontalBottom' \| 'VerticalRight';\n\n/\n Props for {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryProps {\n /\n Allows users to pass an object containing custom CSS styles for the gallery container.\n \n @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n /\n styles?: VideoGalleryStyles;\n /* Layout of the video tiles. /\n layout?: VideoGalleryLayout;\n /* Local video particpant /\n localParticipant: VideoGalleryLocalParticipant;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Local video view options /\n localVideoViewOptions?: VideoStreamOptions;\n /* Remote videos view options /\n remoteVideoViewOptions?: VideoStreamOptions;\n /* Callback to create the local video stream view /\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to dispose of the local video stream view /\n onDisposeLocalStreamView?: () => void;\n /* Callback to render the local video tile/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /* Callback to create a remote video stream view /\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to render a remote video tile /\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /* Callback to dispose a remote video stream view /\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /* Callback to render a particpant avatar /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n /\n showMuteIndicator?: boolean;\n /* Optional strings to override in component /\n strings?: Partial<VideoGalleryStrings>;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams?: number;\n /\n Camera control information for button to switch cameras.\n /\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n / @conditional-compile-remove(pinned-participants) /\n /\n List of pinned participant userIds.\n /\n pinnedParticipants?: string[];\n / @conditional-compile-remove(pinned-participants) /\n /\n This callback will be called when a participant video tile is pinned.\n /\n onPinParticipant?: (userId: string) => void;\n / @conditional-compile-remove(pinned-participants) /\n /\n This callback will be called when a participant video tile is un-pinned.\n /\n onUnpinParticipant?: (userId: string) => void;\n / @conditional-compile-remove(pinned-participants) /\n /\n Options for showing the remote video tile menu.\n \n @defaultValue \\{ kind: 'contextual' \\}\n /\n remoteVideoTileMenuOptions?: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps;\n / @conditional-compile-remove(vertical-gallery) /\n /\n Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'HorizontalBottom'\n /\n overflowGalleryLayout?: OverflowGalleryLayout;\n}\n\n/ @conditional-compile-remove(pinned-participants) /\n/\n Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n \n @beta\n /\nexport interface VideoTileContextualMenuProps {\n /\n The menu property kind\n /\n kind: 'contextual';\n}\n\n/ @conditional-compile-remove(pinned-participants) /\n/\n Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n \n @beta\n /\nexport interface VideoTileDrawerMenuProps {\n /\n The menu property kind\n /\n kind: 'drawer';\n /\n The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n /\n hostId?: string;\n}\n/\n VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n \n @public\n /\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n / @conditional-compile-remove(pinned-participants) /\n onPinParticipant: onPinParticipantHandler,\n / @conditional-compile-remove(pinned-participants) /\n onUnpinParticipant: onUnpinParticipantHandler,\n / @conditional-compile-remove(pinned-participants) /\n remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n / @conditional-compile-remove(pinned-participants) /\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n : undefined;\n / @conditional-compile-remove(pinned-participants) /\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n / @conditional-compile-remove(pinned-participants) /\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n / @conditional-compile-remove(pinned-participants) /\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n / @conditional-compile-remove(pinned-participants) /\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n / @conditional-compile-remove(rooms) /\n const permissions = _usePermissions();\n\n /\n Utility function for memoized rendering of LocalParticipant.\n /\n const localVideoTile = useMemo((): JSX.Element / @conditional-compile-remove(rooms) / \| undefined => {\n / @conditional-compile-remove(rooms) /\n if (!permissions.cameraButton) {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const localVideoTileStyles = concatStyleSets(\n shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n return (\n <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n <_LocalVideoTile\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={isNarrow ? '' : strings.localVideoLabel}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={!(shouldFloatLocalVideo && isNarrow)}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n shouldFloatLocalVideo,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n strings.localVideoCameraSwitcherLabel,\n strings.localVideoLabel,\n strings.localVideoMovementLabel,\n strings.localVideoSelectedDescription,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n / @conditional-compile-remove(rooms) / permissions.cameraButton\n ]);\n\n / @conditional-compile-remove(pinned-participants) /\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n / @conditional-compile-remove(pinned-participants) /\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n / @conditional-compile-remove(pinned-participants) /\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n / @conditional-compile-remove(pinned-participants) /\n /\n sets the announcement string for VideoGallery actions so that the screenreader will trigger\n /\n const toggleAnnouncerString = useCallback(\n (announcement) => {\n setAnnouncementString(announcement);\n /\n Clears the announcer string after VideoGallery action allowing it to be re-announced.\n /\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n\n / @conditional-compile-remove(pinned-participants) /\n const isPinned = pinnedParticipants?.includes(participant.userId);\n\n return (\n <_RemoteVideoTile\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participant.state}\n / @conditional-compile-remove(pinned-participants) /\n menuKind={\n remoteVideoTileMenuOptions\n ? remoteVideoTileMenuOptions.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n / @conditional-compile-remove(pinned-participants) /\n drawerMenuHostId={drawerMenuHostId}\n / @conditional-compile-remove(pinned-participants) /\n onPinParticipant={onPinParticipant}\n / @conditional-compile-remove(pinned-participants) /\n onUnpinParticipant={onUnpinParticipant}\n / @conditional-compile-remove(pinned-participants) /\n isPinned={isPinned}\n / @conditional-compile-remove(pinned-participants) /\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n / @conditional-compile-remove(pinned-participants) /\n toggleAnnouncerString={toggleAnnouncerString}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n / @conditional-compile-remove(pinned-participants) / drawerMenuHostId,\n / @conditional-compile-remove(pinned-participants) / remoteVideoTileMenuOptions,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipants,\n / @conditional-compile-remove(pinned-participants) / onPinParticipant,\n / @conditional-compile-remove(pinned-participants) / onUnpinParticipant,\n / @conditional-compile-remove(pinned-participants) / toggleAnnouncerString\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo(\n () => ({\n remoteParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipantUserIds: pinnedParticipants,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n }),\n [\n remoteParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipants,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps]);\n\n return (\n <div\n / @conditional-compile-remove(pinned-participants) /\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n >\n {videoGalleryLayout}\n {\n / @conditional-compile-remove(pinned-participants) */\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n }\n </div>\n );\n};\n\"../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\n/* @conditional-compile-remove(pinned-participants) /\nimport { Announcer } from './Announcer';\n/ @conditional-compile-remove(pinned-participants) /\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/ @conditional-compile-remove(rooms) /\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/ @conditional-compile-remove(pinned-participants) /\nimport { useId } from '@fluentui/react-hooks';\n\n/\n @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n /\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/\n @private\n * Styles to disable the selectivity of a text in video gallery\n /\nexport const unselectable = {\n '-webkit-user-select': 'none',\n '-webkit-touch-callout': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none'\n};\n/\n @private\n * Set aside only 6 dominant speakers for remaining audio participants\n /\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/\n @private\n * Default remote video tile menu options\n /\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/ @conditional-compile-remove(pinned-participants) /\n/\n @private\n * Maximum number of remote video tiles that can be pinned\n /\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/\n All strings that may be shown on the UI in the {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryStrings {\n /* String to notify that local user is sharing their screen /\n screenIsBeingSharedMessage: string;\n /* String to show when remote screen share stream is loading /\n screenShareLoadingMessage: string;\n /* String for local video label. Default is \"You\" /\n localVideoLabel: string;\n /* String for local video camera switcher /\n localVideoCameraSwitcherLabel: string;\n /* String for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementLabel: string;\n /* String for announcing the selected camera /\n localVideoSelectedDescription: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame /\n fitRemoteParticipantToFrame: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame /\n fillRemoteParticipantFrame: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile /\n pinParticipantForMe: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Menu text shown in Video Tile contextual menu for setting a remote participant's video tile /\n unpinParticipantForMe: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label for pin participant menu item of remote participant's video tile /\n pinParticipantMenuItemAriaLabel: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label for unpin participant menu item of remote participant's video tile /\n unpinParticipantMenuItemAriaLabel: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label to announce when remote participant's video tile is pinned /\n pinnedParticipantAnnouncementAriaLabel: string;\n / @conditional-compile-remove(pinned-participants) /\n /* Aria label to announce when remote participant's video tile is unpinned /\n unpinnedParticipantAnnouncementAriaLabel: string;\n}\n\n/\n @public\n /\nexport type VideoGalleryLayout = 'default' \| 'floatingLocalVideo';\n\n/\n {@link VideoGallery} Component Styles.\n * @public\n /\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /* Styles for the grid layout /\n gridLayout?: GridLayoutStyles;\n /* Styles for the horizontal gallery /\n horizontalGallery?: HorizontalGalleryStyles;\n /* Styles for the local video /\n localVideo?: IStyle;\n}\n\n/ @conditional-compile-remove(vertical-gallery) /\n/\n Different modes and positions of the overflow gallery in the VideoGallery\n \n @beta\n /\nexport type OverflowGalleryLayout = 'HorizontalBottom' \| 'VerticalRight';\n\n/\n Props for {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryProps {\n /\n Allows users to pass an object containing custom CSS styles for the gallery container.\n \n @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n /\n styles?: VideoGalleryStyles;\n /* Layout of the video tiles. /\n layout?: VideoGalleryLayout;\n /* Local video particpant /\n localParticipant: VideoGalleryLocalParticipant;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Local video view options /\n localVideoViewOptions?: VideoStreamOptions;\n /* Remote videos view options /\n remoteVideoViewOptions?: VideoStreamOptions;\n /* Callback to create the local video stream view /\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to dispose of the local video stream view /\n onDisposeLocalStreamView?: () => void;\n /* Callback to render the local video tile/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /* Callback to create a remote video stream view /\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to render a remote video tile /\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /* Callback to dispose a remote video stream view /\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /* Callback to render a particpant avatar /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n /\n showMuteIndicator?: boolean;\n /* Optional strings to override in component /\n strings?: Partial<VideoGalleryStrings>;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams?: number;\n /\n Camera control information for button to switch cameras.\n /\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n / @conditional-compile-remove(pinned-participants) /\n /\n List of pinned participant userIds.\n /\n pinnedParticipants?: string[];\n / @conditional-compile-remove(pinned-participants) /\n /\n This callback will be called when a participant video tile is pinned.\n /\n onPinParticipant?: (userId: string) => void;\n / @conditional-compile-remove(pinned-participants) /\n /\n This callback will be called when a participant video tile is un-pinned.\n /\n onUnpinParticipant?: (userId: string) => void;\n / @conditional-compile-remove(pinned-participants) /\n /\n Options for showing the remote video tile menu.\n \n @defaultValue \\{ kind: 'contextual' \\}\n /\n remoteVideoTileMenuOptions?: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps;\n / @conditional-compile-remove(vertical-gallery) /\n /\n Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'HorizontalBottom'\n /\n overflowGalleryLayout?: OverflowGalleryLayout;\n}\n\n/ @conditional-compile-remove(pinned-participants) /\n/\n Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n \n @beta\n /\nexport interface VideoTileContextualMenuProps {\n /\n The menu property kind\n /\n kind: 'contextual';\n}\n\n/ @conditional-compile-remove(pinned-participants) /\n/\n Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n \n @beta\n /\nexport interface VideoTileDrawerMenuProps {\n /\n The menu property kind\n /\n kind: 'drawer';\n /\n The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n /\n hostId?: string;\n}\n/\n VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n \n @public\n /\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n / @conditional-compile-remove(pinned-participants) /\n onPinParticipant: onPinParticipantHandler,\n / @conditional-compile-remove(pinned-participants) /\n onUnpinParticipant: onUnpinParticipantHandler,\n / @conditional-compile-remove(pinned-participants) /\n remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n / @conditional-compile-remove(pinned-participants) /\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n : undefined;\n / @conditional-compile-remove(pinned-participants) /\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n / @conditional-compile-remove(pinned-participants) /\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n / @conditional-compile-remove(pinned-participants) /\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n / @conditional-compile-remove(pinned-participants) /\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n / @conditional-compile-remove(rooms) /\n const permissions = _usePermissions();\n\n /\n Utility function for memoized rendering of LocalParticipant.\n /\n const localVideoTile = useMemo((): JSX.Element / @conditional-compile-remove(rooms) / \| undefined => {\n / @conditional-compile-remove(rooms) /\n if (!permissions.cameraButton) {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const localVideoTileStyles = concatStyleSets(\n shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n return (\n <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n <_LocalVideoTile\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={isNarrow ? '' : strings.localVideoLabel}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={!(shouldFloatLocalVideo && isNarrow)}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n shouldFloatLocalVideo,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n strings.localVideoCameraSwitcherLabel,\n strings.localVideoLabel,\n strings.localVideoMovementLabel,\n strings.localVideoSelectedDescription,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n / @conditional-compile-remove(rooms) / permissions.cameraButton\n ]);\n\n / @conditional-compile-remove(pinned-participants) /\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n / @conditional-compile-remove(pinned-participants) /\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n / @conditional-compile-remove(pinned-participants) /\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n / @conditional-compile-remove(pinned-participants) /\n /\n sets the announcement string for VideoGallery actions so that the screenreader will trigger\n /\n const toggleAnnouncerString = useCallback(\n (announcement) => {\n setAnnouncementString(announcement);\n /\n Clears the announcer string after VideoGallery action allowing it to be re-announced.\n /\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n\n / @conditional-compile-remove(pinned-participants) /\n const isPinned = pinnedParticipants?.includes(participant.userId);\n\n return (\n <_RemoteVideoTile\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participant.state}\n / @conditional-compile-remove(pinned-participants) /\n menuKind={\n remoteVideoTileMenuOptions\n ? remoteVideoTileMenuOptions.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n / @conditional-compile-remove(pinned-participants) /\n drawerMenuHostId={drawerMenuHostId}\n / @conditional-compile-remove(pinned-participants) /\n onPinParticipant={onPinParticipant}\n / @conditional-compile-remove(pinned-participants) /\n onUnpinParticipant={onUnpinParticipant}\n / @conditional-compile-remove(pinned-participants) /\n isPinned={isPinned}\n / @conditional-compile-remove(pinned-participants) /\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n / @conditional-compile-remove(pinned-participants) /\n toggleAnnouncerString={toggleAnnouncerString}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n / @conditional-compile-remove(pinned-participants) / drawerMenuHostId,\n / @conditional-compile-remove(pinned-participants) / remoteVideoTileMenuOptions,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipants,\n / @conditional-compile-remove(pinned-participants) / onPinParticipant,\n / @conditional-compile-remove(pinned-participants) / onUnpinParticipant,\n / @conditional-compile-remove(pinned-participants) / toggleAnnouncerString\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo(\n () => ({\n remoteParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipantUserIds: pinnedParticipants,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n }),\n [\n remoteParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipants,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps]);\n\n return (\n <div\n / @conditional-compile-remove(pinned-participants) /\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n >\n {videoGalleryLayout}\n {\n / @conditional-compile-remove(pinned-participants) */\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n }\n </div>\n );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -8,7 +8,7 @@ export declare const VERTICAL_GALLERY_GAP = 0.5;
 /**
  * @private
  */
-export declare const childrenContainerStyle: IStyle;
+export declare const childrenContainerStyle: (pageControlBarHeight: number) => IStyle;
 /**
  * @private
  */

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

@@ -9,9 +9,12 @@ export const VERTICAL_GALLERY_GAP = 0.5;
 /**
  * @private
  */
-export const childrenContainerStyle = {
-    width: '100%',
-    gap: `${VERTICAL_GALLERY_GAP}rem`
+export const childrenContainerStyle = (pageControlBarHeight) => {
+    return {
+        width: '100%',
+        height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,
+        gap: `${VERTICAL_GALLERY_GAP}rem`
+    };
 };
 /**
  * @private

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,~~GAAW~~;~~IAC5C~~,KAAK,EAAE,MAAM;~~IACb~~,GAAG,EAAE,GAAG,oBAAoB,KAAK;~~CAClC~~,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,oBAAoB,KAAK;IACjC,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAW;IAC5D,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgB;IACxC,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;KAChB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconStyles, IStyle, Theme } from '@fluentui/react';\n\n/*\n Vertical Gallery gap size in rem between tiles and buttons\n \n @private\n /\nexport const VERTICAL_GALLERY_GAP = 0.5;\n\n/\n @private\n /\nexport const childrenContainerStyle: IStyle = {\n width: '100%',\n gap: `${VERTICAL_GALLERY_GAP}rem`\n};\n\n/\n @private\n /\nexport const rootStyle: IStyle = {\n height: '100%',\n width: '100%',\n gap: `${VERTICAL_GALLERY_GAP}rem`,\n position: 'relative'\n};\n\n/\n @private\n /\nexport const pageNavigationControlBarContainerStyle: IStyle = {\n height: '2rem',\n width: '100%',\n position: 'absolute',\n bottom: '0'\n};\n\n/\n @private\n /\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n return {\n background: 'none',\n padding: 0,\n height: 'auto',\n borderRadius: theme.effects.roundedCorner4,\n border: 'none',\n minWidth: '2rem'\n };\n};\n\n/\n @private\n /\nexport const participantPageCounter: IStyle = {\n lineHeight: '2rem',\n width: '100%',\n textAlign: 'center'\n};\n\n/\n @private\n */\nexport const navIconStyles: IIconStyles = {\n root: {\n lineHeight: '0'\n }\n};\n"]}
1	+ {"version":3,"file":"VerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAA4B,EAAU,EAAE;IAC7E,OAAO;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,eAAe,oBAAoB,GAAG,oBAAoB,MAAM;QACxE,GAAG,EAAE,GAAG,oBAAoB,KAAK;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,oBAAoB,KAAK;IACjC,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAW;IAC5D,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgB;IACxC,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;KAChB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconStyles, IStyle, Theme } from '@fluentui/react';\n\n/*\n Vertical Gallery gap size in rem between tiles and buttons\n \n @private\n /\nexport const VERTICAL_GALLERY_GAP = 0.5;\n\n/\n @private\n /\nexport const childrenContainerStyle = (pageControlBarHeight: number): IStyle => {\n return {\n width: '100%',\n height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,\n gap: `${VERTICAL_GALLERY_GAP}rem`\n };\n};\n\n/\n @private\n /\nexport const rootStyle: IStyle = {\n height: '100%',\n width: '100%',\n gap: `${VERTICAL_GALLERY_GAP}rem`,\n position: 'relative'\n};\n\n/\n @private\n /\nexport const pageNavigationControlBarContainerStyle: IStyle = {\n height: '2rem',\n width: '100%',\n position: 'absolute',\n bottom: '0'\n};\n\n/\n @private\n /\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n return {\n background: 'none',\n padding: 0,\n height: 'auto',\n borderRadius: theme.effects.roundedCorner4,\n border: 'none',\n minWidth: '2rem'\n };\n};\n\n/\n @private\n /\nexport const participantPageCounter: IStyle = {\n lineHeight: '2rem',\n width: '100%',\n textAlign: 'center'\n};\n\n/\n @private\n */\nexport const navIconStyles: IIconStyles = {\n root: {\n lineHeight: '0'\n }\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.5.1-alpha-202303010017",
+  "version": "1.5.1-alpha-202303030153",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -89,13 +89,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.5.1-alpha-202303010017",
-    "@internal/calling-stateful-client": "1.5.1-alpha-202303010017",
-    "@internal/chat-component-bindings": "1.5.1-alpha-202303010017",
-    "@internal/chat-stateful-client": "1.5.1-alpha-202303010017",
-    "@internal/fake-backends": "1.5.1-alpha-202303010017",
-    "@internal/react-components": "1.5.1-alpha-202303010017",
-    "@internal/react-composites": "1.5.1-alpha-202303010017",
+    "@internal/calling-component-bindings": "1.5.1-alpha-202303030153",
+    "@internal/calling-stateful-client": "1.5.1-alpha-202303030153",
+    "@internal/chat-component-bindings": "1.5.1-alpha-202303030153",
+    "@internal/chat-stateful-client": "1.5.1-alpha-202303030153",
+    "@internal/fake-backends": "1.5.1-alpha-202303030153",
+    "@internal/react-components": "1.5.1-alpha-202303030153",
+    "@internal/react-composites": "1.5.1-alpha-202303030153",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",