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

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

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

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(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"]}
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 { useIdentifiers } from '../identifiers';\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 const ids = useIdentifiers();\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 data-ui-id={ids.overflowGalleryLeftNavButton}\n >\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n </DefaultButton>\n <Text className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n <DefaultButton\n className={nextButtonsStyles}\n onClick={onNextButtonClick}\n disabled={buttonsDisabled?.next}\n data-ui-id={ids.overflowGalleryRightNavButton}\n >\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>\n );\n};\n"]}

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

@@ -51,14 +51,20 @@ export const FloatingLocalVideoLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = useId('layerhost');
-    let localVideoSize = LARGE_FLOATING_MODAL_SIZE_PX;
-    if (isNarrow) {
-        localVideoSize = SMALL_FLOATING_MODAL_SIZE_PX;
-    }
-    /* @conditional-compile-remove(vertical-gallery) */
-    if (overflowGalleryLayout === 'VerticalRight') {
-        localVideoSize = VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
-    }
+    const localVideoSize = useMemo(() => {
+        if (isNarrow) {
+            return SMALL_FLOATING_MODAL_SIZE_PX;
+        }
+        /* @conditional-compile-remove(vertical-gallery) */
+        if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {
+            return isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+        }
+        return LARGE_FLOATING_MODAL_SIZE_PX;
+    }, [
+        horizontalGalleryTiles.length,
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+    ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
     showCameraSwitcherInLocalPreview ? (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_PX,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_PX\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/\n Props for {@link FloatingLocalVideoLayout}.\n \n @private\n /\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Height of parent element\n /\n parentHeight?: number;\n}\n\n/\n FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n \n @private\n /\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipantUserIds,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n let localVideoSize = LARGE_FLOATING_MODAL_SIZE_PX;\n if (isNarrow) {\n localVideoSize = SMALL_FLOATING_MODAL_SIZE_PX;\n }\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryLayout === 'VerticalRight') {\n localVideoSize = VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;\n }\n\n const wrappedLocalVideoComponent =\n localVideoComponent && shouldFloatLocalVideo ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSize))}>\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSize={localVideoSize}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n return (\n <OverflowGallery\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n overflowGalleryElements={horizontalGalleryTiles}\n styles={styles?.horizontalGallery}\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout={overflowGalleryLayout}\n />\n );\n }, [\n isNarrow,\n horizontalGalleryTiles,\n styles?.horizontalGallery,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n ]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n <Stack\n / @conditional-compile-remove(vertical-gallery) */\n horizontal={overflowGalleryLayout === 'VerticalRight'}\n styles={innerLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGallery}\n </Stack>\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_PX,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_PX\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/\n Props for {@link FloatingLocalVideoLayout}.\n \n @private\n /\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Height of parent element\n /\n parentHeight?: number;\n}\n\n/\n FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n \n @private\n /\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipantUserIds,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n / @conditional-compile-remove(pinned-participants) / pinnedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const localVideoSize = useMemo(() => {\n if (isNarrow) {\n return SMALL_FLOATING_MODAL_SIZE_PX;\n }\n / @conditional-compile-remove(vertical-gallery) /\n if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {\n return isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;\n }\n return LARGE_FLOATING_MODAL_SIZE_PX;\n }, [\n horizontalGalleryTiles.length,\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n ]);\n\n const wrappedLocalVideoComponent =\n localVideoComponent && shouldFloatLocalVideo ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSize))}>\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSize={localVideoSize}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n return (\n <OverflowGallery\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n overflowGalleryElements={horizontalGalleryTiles}\n styles={styles?.horizontalGallery}\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout={overflowGalleryLayout}\n />\n );\n }, [\n isNarrow,\n horizontalGalleryTiles,\n styles?.horizontalGallery,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n ]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n <Stack\n / @conditional-compile-remove(vertical-gallery) */\n horizontal={overflowGalleryLayout === 'VerticalRight'}\n styles={innerLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGallery}\n </Stack>\n </Stack>\n );\n};\n"]}

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

@@ -22,7 +22,7 @@ export const OverflowGallery = (props) => {
     const containerStyles = useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryLayout === 'VerticalRight') {
-            return verticalGalleryContainerStyle(shouldFloatLocalVideo);
+            return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
         }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
     }, [shouldFloatLocalVideo, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAG7G,sDAAsD;AACtD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EACL,+BAA+B,EAC/B,sBAAsB,EACtB,sCAAsC,EACtC,sCAAsC,EACvC,MAAM,yDAAyD,CAAC;AACjE,mDAAmD;AACnD,OAAO,EACL,6BAA6B,EAC7B,oBAAoB,EACrB,MAAM,uDAAuD,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAO/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,QAAQ,GAAG,KAAK,EAChB,uBAAuB,EACvB,MAAM;IACN,mDAAmD,CAAC,qBAAqB,GAAG,kBAAkB,EAC/F,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,mDAAmD;QACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;YAC7C,OAAO,6BAA6B,CAAC,qBAAqB,CAAC,CAAC;~~SAC7D~~;QACD,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,mDAAmD,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEjH,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;YAC7C,OAAO,eAAe,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;SACtD;QACD,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,mDAAmD,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAElG,mDAAmD;IACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;QAC7C,OAAO,CACL,oBAAC,yBAAyB,IACxB,GAAG,EAAC,6BAA6B,EACjC,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,aAAa,EACpC,mBAAmB,EAAE,+BAA+B,EACpD,YAAY,EAAE,sBAAsB,IAEnC,uBAAuB,CACE,CAC7B,CAAC;KACH;IAED,sDAAsD;IACtD,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,2BAA2B,IAAC,yBAAyB,EAAE,uBAAuB,GAAI,CAAC;KAC5F;IAED,OAAO,CACL,oBAAC,2BAA2B,IAC1B,GAAG,EAAC,+BAA+B,EACnC,eAAe,EAAE,eAAe,EAChC,uBAAuB,EAAE,aAAa,EACtC,aAAa,EACX,QAAQ,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,EAExG,cAAc,EAAE,+BAA+B,EAC/C,WAAW,EAAE,sBAAsB,IAElC,uBAAuB,CACI,CAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { OverflowGalleryLayout } from '../VideoGallery';\n/ @conditional-compile-remove(pinned-participants) /\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n horizontalGalleryContainerStyle,\n horizontalGalleryStyle,\n LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport {\n verticalGalleryContainerStyle,\n verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/\n A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n \n @private\n /\nexport const OverflowGallery = (props: {\n shouldFloatLocalVideo?: boolean;\n isNarrow?: boolean;\n overflowGalleryElements?: JSX.Element[];\n styles?: HorizontalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout?: OverflowGalleryLayout;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n isNarrow = false,\n overflowGalleryElements,\n styles,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const containerStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryLayout === 'VerticalRight') {\n return verticalGalleryContainerStyle(shouldFloatLocalVideo);\n }\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [shouldFloatLocalVideo, isNarrow, / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout]);\n\n const galleryStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryLayout === 'VerticalRight') {\n return concatStyleSets(verticalGalleryStyle, styles);\n }\n return concatStyleSets(horizontalGalleryStyle(isNarrow), styles);\n }, [isNarrow, styles, / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout]);\n\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryLayout === 'VerticalRight') {\n return (\n <ResponsiveVerticalGallery\n key=\"responsive-vertical-gallery\"\n containerStyles={containerStyles}\n verticalGalleryStyles={galleryStyles}\n controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapHeightRem={HORIZONTAL_GALLERY_GAP}\n >\n {overflowGalleryElements}\n </ResponsiveVerticalGallery>\n );\n }\n\n / @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return <ScrollableHorizontalGallery horizontalGalleryElements={overflowGalleryElements} />;\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n horizontalGalleryStyles={galleryStyles}\n childWidthRem={\n isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width\n }\n buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapWidthRem={HORIZONTAL_GALLERY_GAP}\n >\n {overflowGalleryElements}\n </ResponsiveHorizontalGallery>\n );\n};\n"]}
1	+ {"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAG7G,sDAAsD;AACtD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EACL,+BAA+B,EAC/B,sBAAsB,EACtB,sCAAsC,EACtC,sCAAsC,EACvC,MAAM,yDAAyD,CAAC;AACjE,mDAAmD;AACnD,OAAO,EACL,6BAA6B,EAC7B,oBAAoB,EACrB,MAAM,uDAAuD,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAO/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,QAAQ,GAAG,KAAK,EAChB,uBAAuB,EACvB,MAAM;IACN,mDAAmD,CAAC,qBAAqB,GAAG,kBAAkB,EAC/F,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,mDAAmD;QACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;YAC7C,OAAO,6BAA6B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;SACvE;QACD,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,mDAAmD,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEjH,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;YAC7C,OAAO,eAAe,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;SACtD;QACD,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,mDAAmD,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAElG,mDAAmD;IACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;QAC7C,OAAO,CACL,oBAAC,yBAAyB,IACxB,GAAG,EAAC,6BAA6B,EACjC,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,aAAa,EACpC,mBAAmB,EAAE,+BAA+B,EACpD,YAAY,EAAE,sBAAsB,IAEnC,uBAAuB,CACE,CAC7B,CAAC;KACH;IAED,sDAAsD;IACtD,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,2BAA2B,IAAC,yBAAyB,EAAE,uBAAuB,GAAI,CAAC;KAC5F;IAED,OAAO,CACL,oBAAC,2BAA2B,IAC1B,GAAG,EAAC,+BAA+B,EACnC,eAAe,EAAE,eAAe,EAChC,uBAAuB,EAAE,aAAa,EACtC,aAAa,EACX,QAAQ,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,EAExG,cAAc,EAAE,+BAA+B,EAC/C,WAAW,EAAE,sBAAsB,IAElC,uBAAuB,CACI,CAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { OverflowGalleryLayout } from '../VideoGallery';\n/ @conditional-compile-remove(pinned-participants) /\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n horizontalGalleryContainerStyle,\n horizontalGalleryStyle,\n LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport {\n verticalGalleryContainerStyle,\n verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/\n A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n \n @private\n /\nexport const OverflowGallery = (props: {\n shouldFloatLocalVideo?: boolean;\n isNarrow?: boolean;\n overflowGalleryElements?: JSX.Element[];\n styles?: HorizontalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout?: OverflowGalleryLayout;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n isNarrow = false,\n overflowGalleryElements,\n styles,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const containerStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryLayout === 'VerticalRight') {\n return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [shouldFloatLocalVideo, isNarrow, / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout]);\n\n const galleryStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryLayout === 'VerticalRight') {\n return concatStyleSets(verticalGalleryStyle, styles);\n }\n return concatStyleSets(horizontalGalleryStyle(isNarrow), styles);\n }, [isNarrow, styles, / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout]);\n\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryLayout === 'VerticalRight') {\n return (\n <ResponsiveVerticalGallery\n key=\"responsive-vertical-gallery\"\n containerStyles={containerStyles}\n verticalGalleryStyles={galleryStyles}\n controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapHeightRem={HORIZONTAL_GALLERY_GAP}\n >\n {overflowGalleryElements}\n </ResponsiveVerticalGallery>\n );\n }\n\n / @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return <ScrollableHorizontalGallery horizontalGalleryElements={overflowGalleryElements} />;\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n horizontalGalleryStyles={galleryStyles}\n childWidthRem={\n isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width\n }\n buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapWidthRem={HORIZONTAL_GALLERY_GAP}\n >\n {overflowGalleryElements}\n </ResponsiveHorizontalGallery>\n );\n};\n"]}

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

@@ -21,7 +21,7 @@ export declare const VERTICAL_GALLERY_TILE_SIZE_REM: {
  * @param shouldFloatLocalVideo whether rendered in floating layout or not
  * @returns Style set for VerticalGallery container.
  */
-export declare const verticalGalleryContainerStyle: (shouldFloatLocalVideo: boolean) => IStyle;
+export declare const verticalGalleryContainerStyle: (shouldFloatLocalVideo: boolean, isNarrow: boolean) => IStyle;
 /**
  * @private
  */

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { _pxToRem } from "../../../../../acs-ui-common/src";
-import { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
+import { SMALL_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
 /**
  * VerticalGallery tile size in rem:
  *
@@ -19,12 +19,20 @@ export const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9,
  * @param shouldFloatLocalVideo whether rendered in floating layout or not
  * @returns Style set for VerticalGallery container.
  */
-export const verticalGalleryContainerStyle = (shouldFloatLocalVideo) => {
-    return {
-        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
-        height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
-        paddingBottom: '0.5rem'
-    };
+export const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
+    return isNarrow
+        ? {
+            width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
+            paddingBottom: '0.5rem'
+        }
+        : {
+            width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            height: shouldFloatLocalVideo
+                ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
+                : '100%',
+            paddingBottom: '0.5rem'
+        };
 };
 /**
  * @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;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\""]}
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,4BAA4B,EAAE,uCAAuC,EAAE,MAAM,6BAA6B,CAAC;AAEpH;;;;;;;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,EAAE,QAAiB,EAAU,EAAE;IACzG,OAAO,QAAQ;QACb,CAAC,CAAC;YACE,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;YACnD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,QAAQ,CAAC,4BAA4B,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;YACxG,aAAa,EAAE,QAAQ;SACxB;QACH,CAAC,CAAC;YACE,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;YACnD,MAAM,EAAE,qBAAqB;gBAC3B,CAAC,CAAC,eAAe,QAAQ,CAAC,uCAAuC,CAAC,MAAM,CAAC,GAAG;gBAC5E,CAAC,CAAC,MAAM;YACV,aAAa,EAAE,QAAQ;SACxB,CAAC;AACR,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 { SMALL_FLOATING_MODAL_SIZE_PX, 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, isNarrow: boolean): IStyle => {\n return isNarrow\n ? {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',\n paddingBottom: '0.5rem'\n }\n : {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo\n ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`\n : '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/index.d.ts CHANGED Viewed

@@ -84,4 +84,5 @@ export { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';
 export type { _TroubleshootingGuideErrorBarStrings, _TroubleshootingGuideErrorBarProps } from './TroubleshootingGuideErrorBar';
 export { _DevicePermissionDropdown } from './DevicePermissions/DevicePermissionDropdown';
 export type { _DevicePermissionDropdownStrings, _DevicePermissionDropdownProps, _PermissionConstraints } from './DevicePermissions/DevicePermissionDropdown';
+export * from './Caption';
 //# sourceMappingURL=index.d.ts.map

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

@@ -46,4 +46,5 @@ export { UnsupportedBrowserVersion } from './UnsupportedBrowserVersion';
 export { UnsupportedOperatingSystem } from './UnsupportedOperatingSystem';
 export { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';
 export { _DevicePermissionDropdown } from './DevicePermissions/DevicePermissionDropdown';
+export * from './Caption';
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAWhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAQtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,iDAAiD;AACjD,OAAO,EACL,kCAAkC,EAClC,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,qCAAqC,CAAC;AAa7C,iDAAiD;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAOtF,iDAAiD;AACjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AAO5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAQ1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,uDAAuD,CAAC;AAUnG,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AAGpC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAG1E,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAM/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8CAA8C,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nexport { TypingIndicator } from './TypingIndicator';\nexport type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';\n\nexport { ErrorBar } from './ErrorBar';\nexport type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';\n\nexport { GridLayout } from './GridLayout';\nexport type { GridLayoutProps, GridLayoutStyles } from './GridLayout';\n\nexport { SendBox } from './SendBox';\nexport type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';\n/* @conditional-compile-remove(file-sharing) /\nexport type { ActiveFileUpload } from './SendBox';\n\nexport { MessageStatusIndicator } from './MessageStatusIndicator';\nexport type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';\n\nexport { MessageThread } from './MessageThread';\nexport type {\n MessageProps,\n MessageThreadProps,\n MessageThreadStrings,\n MessageThreadStyles,\n JumpToNewMessageButtonProps,\n MessageRenderer,\n UpdateMessageCallback\n} from './MessageThread';\n\nexport { StreamMedia } from './StreamMedia';\nexport type { StreamMediaProps } from './StreamMedia';\nexport type { LoadingState } from './StreamMedia';\n\nexport { ParticipantItem } from './ParticipantItem';\nexport type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\n\nexport { ParticipantList } from './ParticipantList';\nexport type {\n ParticipantListItemStyles,\n ParticipantListProps,\n ParticipantListStyles,\n ParticipantMenuItemsCallback\n} from './ParticipantList';\n\nexport { Announcer } from './Announcer';\nexport type { AnnouncerProps } from './Announcer';\n\nexport { VideoGallery } from './VideoGallery';\nexport type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles, VideoGalleryLayout } from './VideoGallery';\n/ @conditional-compile-remove(pinned-participants) /\nexport type { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from './VideoGallery';\n/ @conditional-compile-remove(vertical-gallery) /\nexport type { OverflowGalleryLayout } from './VideoGallery';\nexport type { HorizontalGalleryStyles } from './HorizontalGallery';\n\nexport { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';\nexport type { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\n\nexport { CameraButton } from './CameraButton';\nexport type {\n CameraButtonContextualMenuStyles,\n CameraButtonProps,\n CameraButtonStrings,\n CameraButtonStyles\n} from './CameraButton';\n\nexport { ControlBar } from './ControlBar';\nexport type { ControlBarProps, ControlBarLayout } from './ControlBar';\n\nexport { ControlBarButton } from './ControlBarButton';\nexport type { ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles } from './ControlBarButton';\n\nexport { EndCallButton } from './EndCallButton';\nexport type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';\n\nexport { MicrophoneButton } from './MicrophoneButton';\nexport type {\n MicrophoneButtonStyles,\n MicrophoneButtonContextualMenuStyles,\n MicrophoneButtonProps,\n MicrophoneButtonStrings\n} from './MicrophoneButton';\n\nexport { DevicesButton } from './DevicesButton';\nexport type {\n OptionsDevice,\n DevicesButtonProps,\n DevicesButtonStrings,\n DevicesButtonStyles,\n DevicesButtonContextualMenuStyles\n} from './DevicesButton';\n\n/ @conditional-compile-remove(call-readiness) /\nexport {\n CameraAndMicrophoneSitePermissions,\n MicrophoneSitePermissions,\n CameraSitePermissions\n} from './DevicePermissions/SitePermissions';\n/ @conditional-compile-remove(call-readiness) /\nexport type { SitePermissionsStrings, SitePermissionsStyles } from './DevicePermissions/SitePermissionsScaffolding';\n/ @conditional-compile-remove(call-readiness) /\nexport type {\n CameraAndMicrophoneSitePermissionsStrings,\n CameraAndMicrophoneSitePermissionsProps,\n CameraSitePermissionsStrings,\n CameraSitePermissionsProps,\n CommonSitePermissionsProps,\n MicrophoneSitePermissionsStrings,\n MicrophoneSitePermissionsProps\n} from './DevicePermissions/SitePermissions';\n/ @conditional-compile-remove(call-readiness) /\nexport { BrowserPermissionDenied } from './DevicePermissions/BrowserPermissionDenied';\n/ @conditional-compile-remove(call-readiness) /\nexport type {\n BrowserPermissionDeniedStrings,\n BrowserPermissionDeniedStyles,\n BrowserPermissionDeniedProps\n} from './DevicePermissions/BrowserPermissionDenied';\n/ @conditional-compile-remove(call-readiness) /\nexport { BrowserPermissionDeniedIOS } from './DevicePermissions/BrowserPermissionDeniedIOS';\n/ @conditional-compile-remove(call-readiness) /\nexport type {\n BrowserPermissionDeniedIOSStrings,\n BrowserPermissionDeniedIOSProps\n} from './DevicePermissions/BrowserPermissionDeniedIOS';\n\nexport { ParticipantsButton } from './ParticipantsButton';\nexport type {\n ParticipantsButtonContextualMenuStyles,\n ParticipantsButtonProps,\n ParticipantsButtonStrings,\n ParticipantsButtonStyles\n} from './ParticipantsButton';\n\nexport { ScreenShareButton } from './ScreenShareButton';\nexport type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';\n\nexport { VideoTile } from './VideoTile';\nexport type { VideoTileProps, VideoTileStylesProps } from './VideoTile';\n/ @conditional-compile-remove(PSTN-calls) /\nexport type { VideoTileStrings } from './VideoTile';\n\nexport { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n _PictureInPictureInPictureProps,\n _PictureInPictureInPictureStrings\n} from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n _PictureInPictureInPictureTileProps,\n _TileOrientation\n} from './PictureInPictureInPicture/PictureInPictureInPictureTile';\n\nexport from './Drawer';\n/* @conditional-compile-remove(file-sharing) /\nexport type { SendBoxErrorBarError } from './SendBoxErrorBar';\nexport from './FileCard';\nexport * from './FileCardGroup';\nexport * from './ModalClone/ModalClone';\nexport * from './FileDownloadCards';\nexport type { _FileUploadCardsStrings } from './FileUploadCards';\n\nexport { _useContainerHeight, _useContainerWidth } from './utils/responsive';\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';\nexport { Dialpad } from './Dialpad/Dialpad';\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from './Dialpad/Dialpad';\n\n/* @conditional-compile-remove(PSTN-calls) /\nexport { HoldButton } from './HoldButton';\n/ @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonProps, HoldButtonStrings } from './HoldButton';\n\nexport { _LocalVideoTile } from './LocalVideoTile';\nexport { _RemoteVideoTile } from './RemoteVideoTile';\nexport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nexport type { _HighContrastAwareIconProps } from './HighContrastAwareIcon';\n\nexport { UnsupportedBrowser } from './UnsupportedBrowser';\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from './UnsupportedBrowser';\nexport { UnsupportedBrowserVersion } from './UnsupportedBrowserVersion';\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from './UnsupportedBrowserVersion';\nexport { UnsupportedOperatingSystem } from './UnsupportedOperatingSystem';\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from './UnsupportedOperatingSystem';\n\nexport { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';\nexport type {\n _TroubleshootingGuideErrorBarStrings,\n _TroubleshootingGuideErrorBarProps\n} from './TroubleshootingGuideErrorBar';\n\nexport { _DevicePermissionDropdown } from './DevicePermissions/DevicePermissionDropdown';\nexport type {\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdownProps,\n _PermissionConstraints\n} from './DevicePermissions/DevicePermissionDropdown';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAWhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAQtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,iDAAiD;AACjD,OAAO,EACL,kCAAkC,EAClC,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,qCAAqC,CAAC;AAa7C,iDAAiD;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAOtF,iDAAiD;AACjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AAO5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAQ1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,uDAAuD,CAAC;AAUnG,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AAGpC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAG1E,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAM/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8CAA8C,CAAC;AAOzF,cAAc,WAAW,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nexport { TypingIndicator } from './TypingIndicator';\nexport type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';\n\nexport { ErrorBar } from './ErrorBar';\nexport type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';\n\nexport { GridLayout } from './GridLayout';\nexport type { GridLayoutProps, GridLayoutStyles } from './GridLayout';\n\nexport { SendBox } from './SendBox';\nexport type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';\n/* @conditional-compile-remove(file-sharing) /\nexport type { ActiveFileUpload } from './SendBox';\n\nexport { MessageStatusIndicator } from './MessageStatusIndicator';\nexport type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';\n\nexport { MessageThread } from './MessageThread';\nexport type {\n MessageProps,\n MessageThreadProps,\n MessageThreadStrings,\n MessageThreadStyles,\n JumpToNewMessageButtonProps,\n MessageRenderer,\n UpdateMessageCallback\n} from './MessageThread';\n\nexport { StreamMedia } from './StreamMedia';\nexport type { StreamMediaProps } from './StreamMedia';\nexport type { LoadingState } from './StreamMedia';\n\nexport { ParticipantItem } from './ParticipantItem';\nexport type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\n\nexport { ParticipantList } from './ParticipantList';\nexport type {\n ParticipantListItemStyles,\n ParticipantListProps,\n ParticipantListStyles,\n ParticipantMenuItemsCallback\n} from './ParticipantList';\n\nexport { Announcer } from './Announcer';\nexport type { AnnouncerProps } from './Announcer';\n\nexport { VideoGallery } from './VideoGallery';\nexport type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles, VideoGalleryLayout } from './VideoGallery';\n/ @conditional-compile-remove(pinned-participants) /\nexport type { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from './VideoGallery';\n/ @conditional-compile-remove(vertical-gallery) /\nexport type { OverflowGalleryLayout } from './VideoGallery';\nexport type { HorizontalGalleryStyles } from './HorizontalGallery';\n\nexport { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';\nexport type { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\n\nexport { CameraButton } from './CameraButton';\nexport type {\n CameraButtonContextualMenuStyles,\n CameraButtonProps,\n CameraButtonStrings,\n CameraButtonStyles\n} from './CameraButton';\n\nexport { ControlBar } from './ControlBar';\nexport type { ControlBarProps, ControlBarLayout } from './ControlBar';\n\nexport { ControlBarButton } from './ControlBarButton';\nexport type { ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles } from './ControlBarButton';\n\nexport { EndCallButton } from './EndCallButton';\nexport type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';\n\nexport { MicrophoneButton } from './MicrophoneButton';\nexport type {\n MicrophoneButtonStyles,\n MicrophoneButtonContextualMenuStyles,\n MicrophoneButtonProps,\n MicrophoneButtonStrings\n} from './MicrophoneButton';\n\nexport { DevicesButton } from './DevicesButton';\nexport type {\n OptionsDevice,\n DevicesButtonProps,\n DevicesButtonStrings,\n DevicesButtonStyles,\n DevicesButtonContextualMenuStyles\n} from './DevicesButton';\n\n/ @conditional-compile-remove(call-readiness) /\nexport {\n CameraAndMicrophoneSitePermissions,\n MicrophoneSitePermissions,\n CameraSitePermissions\n} from './DevicePermissions/SitePermissions';\n/ @conditional-compile-remove(call-readiness) /\nexport type { SitePermissionsStrings, SitePermissionsStyles } from './DevicePermissions/SitePermissionsScaffolding';\n/ @conditional-compile-remove(call-readiness) /\nexport type {\n CameraAndMicrophoneSitePermissionsStrings,\n CameraAndMicrophoneSitePermissionsProps,\n CameraSitePermissionsStrings,\n CameraSitePermissionsProps,\n CommonSitePermissionsProps,\n MicrophoneSitePermissionsStrings,\n MicrophoneSitePermissionsProps\n} from './DevicePermissions/SitePermissions';\n/ @conditional-compile-remove(call-readiness) /\nexport { BrowserPermissionDenied } from './DevicePermissions/BrowserPermissionDenied';\n/ @conditional-compile-remove(call-readiness) /\nexport type {\n BrowserPermissionDeniedStrings,\n BrowserPermissionDeniedStyles,\n BrowserPermissionDeniedProps\n} from './DevicePermissions/BrowserPermissionDenied';\n/ @conditional-compile-remove(call-readiness) /\nexport { BrowserPermissionDeniedIOS } from './DevicePermissions/BrowserPermissionDeniedIOS';\n/ @conditional-compile-remove(call-readiness) /\nexport type {\n BrowserPermissionDeniedIOSStrings,\n BrowserPermissionDeniedIOSProps\n} from './DevicePermissions/BrowserPermissionDeniedIOS';\n\nexport { ParticipantsButton } from './ParticipantsButton';\nexport type {\n ParticipantsButtonContextualMenuStyles,\n ParticipantsButtonProps,\n ParticipantsButtonStrings,\n ParticipantsButtonStyles\n} from './ParticipantsButton';\n\nexport { ScreenShareButton } from './ScreenShareButton';\nexport type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';\n\nexport { VideoTile } from './VideoTile';\nexport type { VideoTileProps, VideoTileStylesProps } from './VideoTile';\n/ @conditional-compile-remove(PSTN-calls) /\nexport type { VideoTileStrings } from './VideoTile';\n\nexport { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n _PictureInPictureInPictureProps,\n _PictureInPictureInPictureStrings\n} from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n _PictureInPictureInPictureTileProps,\n _TileOrientation\n} from './PictureInPictureInPicture/PictureInPictureInPictureTile';\n\nexport from './Drawer';\n/* @conditional-compile-remove(file-sharing) /\nexport type { SendBoxErrorBarError } from './SendBoxErrorBar';\nexport from './FileCard';\nexport * from './FileCardGroup';\nexport * from './ModalClone/ModalClone';\nexport * from './FileDownloadCards';\nexport type { _FileUploadCardsStrings } from './FileUploadCards';\n\nexport { _useContainerHeight, _useContainerWidth } from './utils/responsive';\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';\nexport { Dialpad } from './Dialpad/Dialpad';\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from './Dialpad/Dialpad';\n\n/* @conditional-compile-remove(PSTN-calls) /\nexport { HoldButton } from './HoldButton';\n/ @conditional-compile-remove(PSTN-calls) /\nexport type { HoldButtonProps, HoldButtonStrings } from './HoldButton';\n\nexport { _LocalVideoTile } from './LocalVideoTile';\nexport { _RemoteVideoTile } from './RemoteVideoTile';\nexport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nexport type { _HighContrastAwareIconProps } from './HighContrastAwareIcon';\n\nexport { UnsupportedBrowser } from './UnsupportedBrowser';\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from './UnsupportedBrowser';\nexport { UnsupportedBrowserVersion } from './UnsupportedBrowserVersion';\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from './UnsupportedBrowserVersion';\nexport { UnsupportedOperatingSystem } from './UnsupportedOperatingSystem';\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from './UnsupportedOperatingSystem';\n\nexport { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';\nexport type {\n _TroubleshootingGuideErrorBarStrings,\n _TroubleshootingGuideErrorBarProps\n} from './TroubleshootingGuideErrorBar';\n\nexport { _DevicePermissionDropdown } from './DevicePermissions/DevicePermissionDropdown';\nexport type {\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdownProps,\n _PermissionConstraints\n} from './DevicePermissions/DevicePermissionDropdown';\n\nexport from './Caption';\n"]}

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

@@ -35,10 +35,10 @@ export interface _Identifiers {
     videoGallery: string;
     /** `data-ui-id` value for `VideoTile` Component */
     videoTile: string;
-    /** `data-ui-id` value for `HorizontalGallery` Component's left navigation button */
-    horizontalGalleryLeftNavButton: string;
-    /** `data-ui-id` value for `HorizontalGallery` Component's right navigation button */
-    horizontalGalleryRightNavButton: string;
+    /** `data-ui-id` value for overflow gallery component's left navigation button */
+    overflowGalleryLeftNavButton: string;
+    /** `data-ui-id` value for overflow gallery component's right navigation button */
+    overflowGalleryRightNavButton: string;
 }
 /**
  * @private

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

@@ -13,8 +13,8 @@ const defaultIdentifiers = {
     typingIndicator: 'typing-indicator',
     videoGallery: 'video-gallery',
     videoTile: 'video-tile',
-    horizontalGalleryLeftNavButton: 'horizontal-gallery-left-nav-button',
-    horizontalGalleryRightNavButton: 'horizontal-gallery-right-nav-button'
+    overflowGalleryLeftNavButton: 'overflow-gallery-left-nav-button',
+    overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button'
 };
 /**
  * @private

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IdentifierProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/identifiers/IdentifierProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4CzD,MAAM,kBAAkB,GAAiB;IACvC,gBAAgB,EAAE,mBAAmB;IACrC,+BAA+B,EAAE,qCAAqC;IACtE,yBAAyB,EAAE,8BAA8B;IACzD,eAAe,EAAE,kBAAkB;IACnC,2BAA2B,EAAE,gCAAgC;IAC7D,sCAAsC,EAAE,4CAA4C;IACpF,cAAc,EAAE,iBAAiB;IACjC,gBAAgB,EAAE,mBAAmB;IACrC,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,~~8BAA8B~~,EAAE,~~oCAAoC~~;~~IACpE,+BAA+B~~,EAAE,~~qCAAqC~~;~~CACvE~~,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAe,kBAAkB,CAAC,CAAC;AAgBjF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,kBAAkB,IAAG,QAAQ,CAA8B,CAAC;AACvH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/*\n Identifiers that can be used to target specific components in a composite.\n \n @experimental\n \n These identifiers are assigned as `data-ui-id` HTML attribute of the root element of the targeted component.\n \n This API is intended for end to end test automation. As such, they are not covered by the API\n * guarantee of the public API. This will remain perenially experimental and compatibility breaking changes\n * may be made at any point.\n \n @internal\n /\nexport interface _Identifiers {\n /* `data-ui-id` value for `SendBox` Component /\n sendboxTextField: string;\n /* `data-ui-id` value for `ParticipantButton` Component's People menu item /\n participantButtonPeopleMenuItem: string;\n /* `data-ui-id` value for `ParticipantItem` Component's Menu button /\n participantItemMenuButton: string;\n /* `data-ui-id` value for `ParticipantList` Component /\n participantList: string;\n /* `data-ui-id` value for `ParticipantList` Component's People Button /\n participantListPeopleButton: string;\n /* `data-ui-id` value for `ParticipantList` Component's Remove Participant Button /\n participantListRemoveParticipantButton: string;\n /* `data-ui-id` value for `MessageThread` components message content /\n messageContent: string;\n /* `data-ui-id` value for `MessageThread` components message timestamp /\n messageTimestamp: string;\n /* `data-ui-id` value for `TypingIndicator` Component /\n typingIndicator: string;\n /* `data-ui-id` value for `VideoGallery` Component /\n videoGallery: string;\n /* `data-ui-id` value for `VideoTile` Component /\n videoTile: string;\n /* `data-ui-id` value for ~~`HorizontalGallery`~~ ~~Component~~'s left navigation button /\n ~~horizontalGalleryLeftNavButton~~: string;\n /* `data-ui-id` value for ~~`HorizontalGallery`~~ ~~Component~~'s right navigation button /\n ~~horizontalGalleryRightNavButton~~: string;\n}\n\nconst defaultIdentifiers: _Identifiers = {\n sendboxTextField: 'sendbox-textfield',\n participantButtonPeopleMenuItem: 'participant-button-people-menu-item',\n participantItemMenuButton: 'participant-item-menu-button',\n participantList: 'participant-list',\n participantListPeopleButton: 'participant-list-people-button',\n participantListRemoveParticipantButton: 'participant-list-remove-participant-button',\n messageContent: 'message-content',\n messageTimestamp: 'message-timestamp',\n typingIndicator: 'typing-indicator',\n videoGallery: 'video-gallery',\n videoTile: 'video-tile',\n ~~horizontalGalleryLeftNavButton~~: '~~horizontal~~-gallery-left-nav-button',\n ~~horizontalGalleryRightNavButton~~: '~~horizontal~~-gallery-right-nav-button'\n};\n\n/\n @private\n /\nexport const IdentifierContext = createContext<_Identifiers>(defaultIdentifiers);\n\n/\n Arguments to Context Provider for {@link _Identifiers}.\n \n @experimental\n \n See documentation for {@link _Identifiers}.\n \n @internal\n /\nexport interface _IdentifierProviderProps {\n identifiers?: _Identifiers;\n children: React.ReactNode;\n}\n\n/\n React Context provider for {@link _Identifiers}.\n \n @experimental\n \n See documentation for {@link _Identifiers}.\n \n @internal\n /\nexport const _IdentifierProvider = (props: _IdentifierProviderProps): JSX.Element => {\n const { identifiers, children } = props;\n return <IdentifierContext.Provider value={identifiers ?? defaultIdentifiers}>{children}</IdentifierContext.Provider>;\n};\n\n/\n @private\n */\nexport const useIdentifiers = (): _Identifiers => useContext(IdentifierContext);\n"]}
1	+ {"version":3,"file":"IdentifierProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/identifiers/IdentifierProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4CzD,MAAM,kBAAkB,GAAiB;IACvC,gBAAgB,EAAE,mBAAmB;IACrC,+BAA+B,EAAE,qCAAqC;IACtE,yBAAyB,EAAE,8BAA8B;IACzD,eAAe,EAAE,kBAAkB;IACnC,2BAA2B,EAAE,gCAAgC;IAC7D,sCAAsC,EAAE,4CAA4C;IACpF,cAAc,EAAE,iBAAiB;IACjC,gBAAgB,EAAE,mBAAmB;IACrC,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,4BAA4B,EAAE,kCAAkC;IAChE,6BAA6B,EAAE,mCAAmC;CACnE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAe,kBAAkB,CAAC,CAAC;AAgBjF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,kBAAkB,IAAG,QAAQ,CAA8B,CAAC;AACvH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/*\n Identifiers that can be used to target specific components in a composite.\n \n @experimental\n \n These identifiers are assigned as `data-ui-id` HTML attribute of the root element of the targeted component.\n \n This API is intended for end to end test automation. As such, they are not covered by the API\n * guarantee of the public API. This will remain perenially experimental and compatibility breaking changes\n * may be made at any point.\n \n @internal\n /\nexport interface _Identifiers {\n /* `data-ui-id` value for `SendBox` Component /\n sendboxTextField: string;\n /* `data-ui-id` value for `ParticipantButton` Component's People menu item /\n participantButtonPeopleMenuItem: string;\n /* `data-ui-id` value for `ParticipantItem` Component's Menu button /\n participantItemMenuButton: string;\n /* `data-ui-id` value for `ParticipantList` Component /\n participantList: string;\n /* `data-ui-id` value for `ParticipantList` Component's People Button /\n participantListPeopleButton: string;\n /* `data-ui-id` value for `ParticipantList` Component's Remove Participant Button /\n participantListRemoveParticipantButton: string;\n /* `data-ui-id` value for `MessageThread` components message content /\n messageContent: string;\n /* `data-ui-id` value for `MessageThread` components message timestamp /\n messageTimestamp: string;\n /* `data-ui-id` value for `TypingIndicator` Component /\n typingIndicator: string;\n /* `data-ui-id` value for `VideoGallery` Component /\n videoGallery: string;\n /* `data-ui-id` value for `VideoTile` Component /\n videoTile: string;\n /* `data-ui-id` value for overflow gallery component's left navigation button /\n overflowGalleryLeftNavButton: string;\n /* `data-ui-id` value for overflow gallery component's right navigation button /\n overflowGalleryRightNavButton: string;\n}\n\nconst defaultIdentifiers: _Identifiers = {\n sendboxTextField: 'sendbox-textfield',\n participantButtonPeopleMenuItem: 'participant-button-people-menu-item',\n participantItemMenuButton: 'participant-item-menu-button',\n participantList: 'participant-list',\n participantListPeopleButton: 'participant-list-people-button',\n participantListRemoveParticipantButton: 'participant-list-remove-participant-button',\n messageContent: 'message-content',\n messageTimestamp: 'message-timestamp',\n typingIndicator: 'typing-indicator',\n videoGallery: 'video-gallery',\n videoTile: 'video-tile',\n overflowGalleryLeftNavButton: 'overflow-gallery-left-nav-button',\n overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button'\n};\n\n/\n @private\n /\nexport const IdentifierContext = createContext<_Identifiers>(defaultIdentifiers);\n\n/\n Arguments to Context Provider for {@link _Identifiers}.\n \n @experimental\n \n See documentation for {@link _Identifiers}.\n \n @internal\n /\nexport interface _IdentifierProviderProps {\n identifiers?: _Identifiers;\n children: React.ReactNode;\n}\n\n/\n React Context provider for {@link _Identifiers}.\n \n @experimental\n \n See documentation for {@link _Identifiers}.\n \n @internal\n /\nexport const _IdentifierProvider = (props: _IdentifierProviderProps): JSX.Element => {\n const { identifiers, children } = props;\n return <IdentifierContext.Provider value={identifiers ?? defaultIdentifiers}>{children}</IdentifierContext.Provider>;\n};\n\n/\n @private\n */\nexport const useIdentifiers = (): _Identifiers => useContext(IdentifierContext);\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js CHANGED Viewed

@@ -1,7 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+/* @conditional-compile-remove(vertical-gallery) */
+import { useRef } from 'react';
 import { VideoGallery, Announcer } from "../../../../../react-components/src";
+/* @conditional-compile-remove(vertical-gallery) */
+import { _useContainerWidth, _useContainerHeight } from "../../../../../react-components/src";
 import { usePropsFor } from '../hooks/usePropsFor';
 import { AvatarPersona } from '../../common/AvatarPersona';
 import { mergeStyles, Stack } from '@fluentui/react';
@@ -34,6 +38,12 @@ export const MediaGallery = (props) => {
     const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
     const announcerString = useParticipantChangedAnnouncement();
+    /* @conditional-compile-remove(vertical-gallery) */
+    const containerRef = useRef(null);
+    /* @conditional-compile-remove(vertical-gallery) */
+    const containerWidth = _useContainerWidth(containerRef);
+    /* @conditional-compile-remove(vertical-gallery) */
+    const containerHeight = _useContainerHeight(containerRef);
     const cameraSwitcherProps = useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
@@ -52,18 +62,25 @@ export const MediaGallery = (props) => {
                 ? { kind: 'drawer', hostId: props.drawerMenuHostId }
                 : { kind: 'contextual' };
     }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
+    /* @conditional-compile-remove(vertical-gallery) */
+    const overflowGalleryLayout = useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
+        ? 'VerticalRight'
+        : 'HorizontalBottom', [containerWidth, containerHeight]);
     const VideoGalleryMemoized = useMemo(() => {
         return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar,
             /* @conditional-compile-remove(pinned-participants) */
-            remoteVideoTileMenuOptions: remoteVideoTileMenuOptions })));
+            remoteVideoTileMenuOptions: remoteVideoTileMenuOptions,
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryLayout: overflowGalleryLayout })));
     }, [
         videoGalleryProps,
         props.isMobile,
         onRenderAvatar,
         cameraSwitcherProps,
-        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions
+        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
     ]);
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         VideoGalleryMemoized));
 };
@@ -93,4 +110,5 @@ export const useLocalVideoStartTrigger = (isLocalVideoAvailable, shouldTransitio
         }
     }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);
 };
+const mediaGalleryContainerStyles = { width: '100%', height: '100%' };
 //# sourceMappingURL=MediaGallery.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n VideoGallery,\n VideoStreamOptions,\n OnRenderAvatarCallback,\n CustomAvatarOptions,\n Announcer\n} from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) /\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/ @conditional-compile-remove(pinned-participants) /\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n\nconst VideoGalleryStyles = {\n root: {\n height: '100%',\n minHeight: '10rem', // space affordance to ensure media gallery is never collapsed\n minWidth: '6rem'\n }\n};\n\nconst localVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\nconst remoteVideoViewOptions = {\n scalingMode: 'Crop'\n} as VideoStreamOptions;\n\n/\n @private\n /\nexport interface MediaGalleryProps {\n isVideoStreamOn?: boolean;\n isMicrophoneChecked?: boolean;\n onStartLocalVideo: () => Promise<void>;\n onRenderAvatar?: OnRenderAvatarCallback;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n isMobile?: boolean;\n drawerMenuHostId?: string;\n / @conditional-compile-remove(pinned-participants) /\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n}\n\n/\n @private\n /\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n const videoGalleryProps = usePropsFor(VideoGallery);\n const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n const announcerString = useParticipantChangedAnnouncement();\n\n const cameraSwitcherProps = useMemo(() => {\n return {\n ...cameraSwitcherCallback,\n ...cameraSwitcherCameras\n };\n }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n\n const onRenderAvatar = useCallback(\n (userId?: string, options?: CustomAvatarOptions) => {\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={{ root: { margin: 'auto', maxHeight: '100%' } }}>\n <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />\n </Stack>\n </Stack>\n );\n },\n [props.onFetchAvatarPersonaData]\n );\n\n useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n / @conditional-compile-remove(pinned-participants) /\n const remoteVideoTileMenuOptions: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps = useMemo(() => {\n return props.remoteVideoTileMenuOptions?.isHidden\n ? false\n : props.isMobile\n ? { kind: 'drawer', hostId: props.drawerMenuHostId }\n : { kind: 'contextual' };\n }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n const VideoGalleryMemoized = useMemo(() => {\n return (\n <VideoGallery\n {...videoGalleryProps}\n localVideoViewOptions={localVideoViewOptions}\n remoteVideoViewOptions={remoteVideoViewOptions}\n styles={VideoGalleryStyles}\n layout=\"floatingLocalVideo\"\n showCameraSwitcherInLocalPreview={props.isMobile}\n localVideoCameraCycleButtonProps={cameraSwitcherProps}\n onRenderAvatar={onRenderAvatar}\n / @conditional-compile-remove(pinned-participants) /\n remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n />\n );\n }, [\n videoGalleryProps,\n props.isMobile,\n onRenderAvatar,\n cameraSwitcherProps,\n / @conditional-compile-remove(pinned-participants) / remoteVideoTileMenuOptions\n ]);\n\n return (\n <>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n {VideoGalleryMemoized}\n </>\n );\n};\n\n/\n @private\n \n `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n // Once a call is joined, we need to transition the local preview camera setting into the call.\n // This logic is needed on any screen that we might join a call from:\n // - The Media gallery\n // - The lobby page\n // - The networkReconnect interstitial that may show at the start of a call.\n //\n // @TODO: Can we simply have the callHandlers handle this transition logic.\n const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n const mediaGalleryHandlers = useHandlers(MediaGallery);\n useEffect(() => {\n if (shouldTransition !== false) {\n if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n mediaGalleryHandlers.onStartLocalVideo();\n }\n setIsButtonStatusSynced(true);\n }\n }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { useRef } from 'react';\nimport {\n VideoGallery,\n VideoStreamOptions,\n OnRenderAvatarCallback,\n CustomAvatarOptions,\n Announcer\n} from '@internal/react-components';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\n/ @conditional-compile-remove(pinned-participants) /\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/ @conditional-compile-remove(pinned-participants) /\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n\nconst VideoGalleryStyles = {\n root: {\n height: '100%',\n minHeight: '10rem', // space affordance to ensure media gallery is never collapsed\n minWidth: '6rem'\n }\n};\n\nconst localVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\nconst remoteVideoViewOptions = {\n scalingMode: 'Crop'\n} as VideoStreamOptions;\n\n/\n @private\n /\nexport interface MediaGalleryProps {\n isVideoStreamOn?: boolean;\n isMicrophoneChecked?: boolean;\n onStartLocalVideo: () => Promise<void>;\n onRenderAvatar?: OnRenderAvatarCallback;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n isMobile?: boolean;\n drawerMenuHostId?: string;\n / @conditional-compile-remove(pinned-participants) /\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n}\n\n/\n @private\n /\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n const videoGalleryProps = usePropsFor(VideoGallery);\n const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n const announcerString = useParticipantChangedAnnouncement();\n\n / @conditional-compile-remove(vertical-gallery) /\n const containerRef = useRef<HTMLDivElement>(null);\n / @conditional-compile-remove(vertical-gallery) /\n const containerWidth = _useContainerWidth(containerRef);\n / @conditional-compile-remove(vertical-gallery) /\n const containerHeight = _useContainerHeight(containerRef);\n\n const cameraSwitcherProps = useMemo(() => {\n return {\n ...cameraSwitcherCallback,\n ...cameraSwitcherCameras\n };\n }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n\n const onRenderAvatar = useCallback(\n (userId?: string, options?: CustomAvatarOptions) => {\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={{ root: { margin: 'auto', maxHeight: '100%' } }}>\n <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />\n </Stack>\n </Stack>\n );\n },\n [props.onFetchAvatarPersonaData]\n );\n\n useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n / @conditional-compile-remove(pinned-participants) /\n const remoteVideoTileMenuOptions: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps = useMemo(() => {\n return props.remoteVideoTileMenuOptions?.isHidden\n ? false\n : props.isMobile\n ? { kind: 'drawer', hostId: props.drawerMenuHostId }\n : { kind: 'contextual' };\n }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n / @conditional-compile-remove(vertical-gallery) /\n const overflowGalleryLayout = useMemo(\n () =>\n containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9\n ? 'VerticalRight'\n : 'HorizontalBottom',\n [containerWidth, containerHeight]\n );\n\n const VideoGalleryMemoized = useMemo(() => {\n return (\n <VideoGallery\n {...videoGalleryProps}\n localVideoViewOptions={localVideoViewOptions}\n remoteVideoViewOptions={remoteVideoViewOptions}\n styles={VideoGalleryStyles}\n layout=\"floatingLocalVideo\"\n showCameraSwitcherInLocalPreview={props.isMobile}\n localVideoCameraCycleButtonProps={cameraSwitcherProps}\n onRenderAvatar={onRenderAvatar}\n / @conditional-compile-remove(pinned-participants) /\n remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout={overflowGalleryLayout}\n />\n );\n }, [\n videoGalleryProps,\n props.isMobile,\n onRenderAvatar,\n cameraSwitcherProps,\n / @conditional-compile-remove(pinned-participants) / remoteVideoTileMenuOptions,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout\n ]);\n\n return (\n <div / @conditional-compile-remove(vertical-gallery) / ref={containerRef} style={mediaGalleryContainerStyles}>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n {VideoGalleryMemoized}\n </div>\n );\n};\n\n/\n @private\n \n `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n // Once a call is joined, we need to transition the local preview camera setting into the call.\n // This logic is needed on any screen that we might join a call from:\n // - The Media gallery\n // - The lobby page\n // - The networkReconnect interstitial that may show at the start of a call.\n //\n // @TODO: Can we simply have the callHandlers handle this transition logic.\n const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n const mediaGalleryHandlers = useHandlers(MediaGallery);\n useEffect(() => {\n if (shouldTransition !== false) {\n if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n mediaGalleryHandlers.onStartLocalVideo();\n }\n setIsButtonStatusSynced(true);\n }\n }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\n\nconst mediaGalleryContainerStyles: CSSProperties = { width: '100%', height: '100%' };\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js CHANGED Viewed

@@ -1,5 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { mergeStyles, Stack } from '@fluentui/react';
 import { ErrorBar, MessageThread, SendBox, TypingIndicator, useTheme } from "../../../../react-components/src";
 import React, { useCallback, useEffect } from 'react';
@@ -34,7 +43,13 @@ export const ChatScreen = (props) => {
     const theme = useTheme();
     useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        adapter.fetchInitialData();
+        const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
+            // Fetch initial data for adapter
+            yield adapter.fetchInitialData();
+            // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
+            yield adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
+        });
+        fetchData();
     }, [adapter]);
     const messageThreadProps = usePropsFor(MessageThread);
     const sendBoxProps = usePropsFor(SendBox);