npm - @azure/communication-react - Versions diffs - 1.5.1-alpha-202303260014 → 1.5.1-alpha-202303290014 - Mend

@azure/communication-react 1.5.1-alpha-202303260014 → 1.5.1-alpha-202303290014

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

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, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_REM,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} 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 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 / @conditional-compile-remove(vertical-gallery) /\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n // This is for tracking the number of children in the first page of horizontal gallery.\n // This number will be used for the maxHorizontalDominantSpeakers when organizing the remote participants.\n const childrenPerPage = useRef(4);\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxHorizontalGalleryDominantSpeakers: screenShareComponent\n ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n : childrenPerPage.current,\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 \|\| !!screenShareComponent;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n /\n instantiate indexes available to render with indexes available that would be on first page\n \n For some components which do not strictly follow the order of the array, we might\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n * this case when those components are here\n /\n const [indexesToRender, setIndexesToRender] = useState<number[]>([\n ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()\n ]);\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const localVideoSizeRem = useMemo(() => {\n if (isNarrow) {\n return SMALL_FLOATING_MODAL_SIZE_REM;\n }\n / @conditional-compile-remove(vertical-gallery) /\n if ((horizontalGalleryTiles.length > 0 \|\| !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {\n return isNarrow\n ? SMALL_FLOATING_MODAL_SIZE_REM\n : isShort\n ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n }\n return LARGE_FLOATING_MODAL_SIZE_REM;\n }, [\n horizontalGalleryTiles.length,\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout,\n / @conditional-compile-remove(vertical-gallery) / screenShareComponent\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, localVideoSizeRem), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 \|\| !!screenShareComponent ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem))}>\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSizeRem={localVideoSizeRem}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0 && !screenShareComponent) {\n return null;\n }\n return (\n <OverflowGallery\n / @conditional-compile-remove(vertical-gallery) /\n isShort={isShort}\n onFetchTilesToRender={setIndexesToRender}\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n overflowGalleryElements={horizontalGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n / @conditional-compile-remove(vertical-gallery) /\n veritcalGalleryStyles={styles?.verticalGallery}\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryLayout={overflowGalleryLayout}\n onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }}\n />\n );\n }, [\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n horizontalGalleryTiles,\n styles?.horizontalGallery,\n setIndexesToRender,\n screenShareComponent,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout,\n / @conditional-compile-remove(vertical-gallery) / styles?.verticalGallery\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, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_REM,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} 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 overflow 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(vertical-gallery) / overflowGalleryPosition = 'HorizontalBottom',\n pinnedParticipantUserIds = []\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n / @conditional-compile-remove(vertical-gallery) /\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n // This is for tracking the number of children in the first page of overflow gallery.\n // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n const childrenPerPage = useRef(4);\n const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent\n ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n : childrenPerPage.current,\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 \|\| !!screenShareComponent;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n /\n instantiate indexes available to render with indexes available that would be on first page\n \n For some components which do not strictly follow the order of the array, we might\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n * this case when those components are here\n /\n const [indexesToRender, setIndexesToRender] = useState<number[]>([\n ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()\n ]);\n\n const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const localVideoSizeRem = useMemo(() => {\n if (isNarrow) {\n return SMALL_FLOATING_MODAL_SIZE_REM;\n }\n / @conditional-compile-remove(vertical-gallery) /\n if ((overflowGalleryTiles.length > 0 \|\| !!screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {\n return isNarrow\n ? SMALL_FLOATING_MODAL_SIZE_REM\n : isShort\n ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n }\n return LARGE_FLOATING_MODAL_SIZE_REM;\n }, [\n overflowGalleryTiles.length,\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition,\n / @conditional-compile-remove(vertical-gallery) / screenShareComponent\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, localVideoSizeRem), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : overflowGalleryTiles.length > 0 \|\| !!screenShareComponent ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem))}>\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSizeRem={localVideoSizeRem}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n return null;\n }\n return (\n <OverflowGallery\n / @conditional-compile-remove(vertical-gallery) /\n isShort={isShort}\n onFetchTilesToRender={setIndexesToRender}\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n overflowGalleryElements={overflowGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n / @conditional-compile-remove(vertical-gallery) /\n verticalGalleryStyles={styles?.verticalGallery}\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryPosition={overflowGalleryPosition}\n onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }}\n />\n );\n }, [\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n overflowGalleryTiles,\n styles?.horizontalGallery,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition,\n setIndexesToRender,\n screenShareComponent,\n / @conditional-compile-remove(vertical-gallery) / styles?.verticalGallery\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={overflowGalleryPosition === '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/Layout.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { VideoGalleryRemoteParticipant } from '../../types';
 import { VideoGalleryStyles } from '../VideoGallery';
-import { OverflowGalleryLayout } from '../VideoGallery';
+import { OverflowGalleryPosition } from '../VideoGallery';
 /**
  * Props for a layout component
  *
@@ -43,6 +43,6 @@ export interface LayoutProps {
      * Determines the layout of the overflowGallery.
      * @defaultValue 'HorizontalBottom'
      */
-    overflowGalleryLayout?: OverflowGalleryLayout;
+    overflowGalleryPosition?: OverflowGalleryPosition;
 }
 //# sourceMappingURL=Layout.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { ~~OverflowGalleryLayout~~ } from '../VideoGallery';\n\n/\n Props for a layout component\n \n @private\n /\nexport interface LayoutProps {\n /\n Styles for the {@link DefaultLayout}\n /\n styles?: Omit<VideoGalleryStyles, 'root'>;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* Callback to render each remote participant /\n onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Component that contains local video content /\n localVideoComponent?: JSX.Element;\n /* Component that contains screen share content /\n screenShareComponent?: JSX.Element;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams: number;\n /\n Width of parent element\n /\n parentWidth?: number;\n /\n Height of parent element\n /\n parentHeight?: number;\n /\n List of pinned participant userIds\n /\n pinnedParticipantUserIds?: string[];\n / @conditional-compile-remove(vertical-gallery) /\n /\n Determines the layout of the overflowGallery.\n * @defaultValue 'HorizontalBottom'\n */\n ~~overflowGalleryLayout~~?: ~~OverflowGalleryLayout~~;\n}\n"]}
1	+ {"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { OverflowGalleryPosition } from '../VideoGallery';\n\n/\n Props for a layout component\n \n @private\n /\nexport interface LayoutProps {\n /\n Styles for the {@link DefaultLayout}\n /\n styles?: Omit<VideoGalleryStyles, 'root'>;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* Callback to render each remote participant /\n onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Component that contains local video content /\n localVideoComponent?: JSX.Element;\n /* Component that contains screen share content /\n screenShareComponent?: JSX.Element;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams: number;\n /\n Width of parent element\n /\n parentWidth?: number;\n /\n Height of parent element\n /\n parentHeight?: number;\n /\n List of pinned participant userIds\n /\n pinnedParticipantUserIds?: string[];\n / @conditional-compile-remove(vertical-gallery) /\n /\n Determines the layout of the overflowGallery.\n * @defaultValue 'HorizontalBottom'\n */\n overflowGalleryPosition?: OverflowGalleryPosition;\n}\n"]}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { HorizontalGalleryStyles } from '../HorizontalGallery';
 import { VerticalGalleryStyles } from '../VerticalGallery';
-import { OverflowGalleryLayout } from '../VideoGallery';
+import { OverflowGalleryPosition } from '../VideoGallery';
 /**
  * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
  *
@@ -14,8 +14,8 @@ export declare const OverflowGallery: (props: {
     isShort?: boolean | undefined;
     overflowGalleryElements?: JSX.Element[] | undefined;
     horizontalGalleryStyles?: HorizontalGalleryStyles | undefined;
-    veritcalGalleryStyles?: VerticalGalleryStyles | undefined;
-    overflowGalleryLayout?: OverflowGalleryLayout | undefined;
+    verticalGalleryStyles?: VerticalGalleryStyles | undefined;
+    overflowGalleryPosition?: OverflowGalleryPosition | undefined;
     onChildrenPerPageChange?: ((childrenPerPage: number) => void) | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=OverflowGallery.d.ts.map

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

@@ -20,11 +20,11 @@ export const OverflowGallery = (props) => {
     const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false,
     /* @conditional-compile-remove(vertical-gallery) */
     isShort = false, overflowGalleryElements, horizontalGalleryStyles,
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom',
-    /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles, onChildrenPerPageChange } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',
+    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles, onChildrenPerPageChange } = props;
     const containerStyles = useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryLayout === 'VerticalRight') {
+        if (overflowGalleryPosition === 'VerticalRight') {
             return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
         }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
@@ -32,23 +32,23 @@ export const OverflowGallery = (props) => {
         shouldFloatLocalVideo,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         isNarrow,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
     ]);
     const galleryStyles = useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryLayout === 'VerticalRight') {
-            return concatStyleSets(verticalGalleryStyle(isShort), veritcalGalleryStyles);
+        if (overflowGalleryPosition === 'VerticalRight') {
+            return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);
         }
         return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         horizontalGalleryStyles,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
-        /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles
     ]);
     /* @conditional-compile-remove(vertical-gallery) */
-    if (overflowGalleryLayout === 'VerticalRight') {
+    if (overflowGalleryPosition === 'VerticalRight') {
         return (React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
     }
     /* @conditional-compile-remove(pinned-participants) */

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;AAK7G,sDAAsD;AACtD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EACL,+BAA+B,EAC/B,sBAAsB,EACvB,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,KAa/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,oBAAoB,EACpB,QAAQ,GAAG,KAAK;IAChB,mDAAmD;IACnD,OAAO,GAAG,KAAK,EACf,uBAAuB,EACvB,uBAAuB;IACvB,mDAAmD,CAAC,~~qBAAqB~~,GAAG,kBAAkB;~~IAC9F~~,mDAAmD,CAAC,qBAAqB,EACzE,uBAAuB,EACxB,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,EAAE,OAAO,CAAC,CAAC;SAChF;QACD,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE;QACD,qBAAqB;QACrB,mDAAmD,CAAC,OAAO;QAC3D,QAAQ;QACR,mDAAmD,CAAC,~~qBAAqB~~;~~KAC1E~~,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,IAAI,~~qBAAqB~~,KAAK,eAAe,EAAE;~~YAC7C~~,OAAO,eAAe,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC;SAC9E;QACD,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC;IACpF,CAAC,EAAE;QACD,QAAQ;QACR,mDAAmD,CAAC,OAAO;QAC3D,uBAAuB;QACvB,mDAAmD,CAAC,~~qBAAqB~~;~~QACzE~~,mDAAmD,CAAC,qBAAqB;KAC1E,CAAC,CAAC;IAEH,mDAAmD;IACnD,IAAI,~~qBAAqB~~,KAAK,eAAe,EAAE;~~QAC7C~~,OAAO,CACL,oBAAC,yBAAyB,IACxB,GAAG,EAAC,6BAA6B,EACjC,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,aAAsC,EAC7D,mBAAmB,EAAE,+BAA+B,EACpD,YAAY,EAAE,sBAAsB,EACpC,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,EAC1C,uBAAuB,EAAE,uBAAuB,IAE/C,uBAAuB,CACE,CAC7B,CAAC;KACH;IAED,sDAAsD;IACtD,IAAI,QAAQ,EAAE;QACZ,+FAA+F;QAC/F,gCAAgC;QAChC,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,CAAC,CAAC,CAAC;QAC7B,OAAO,CACL,oBAAC,2BAA2B,IAC1B,yBAAyB,EAAE,uBAAuB,EAClD,oBAAoB,EAAE,oBAAoB,EAC1C,GAAG,EAAC,+BAA+B,GACnC,CACH,CAAC;KACH;IAED,OAAO,CACL,oBAAC,2BAA2B,IAC1B,GAAG,EAAC,+BAA+B,EACnC,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,EAC1C,uBAAuB,EAAE,aAAa,EACtC,cAAc,EAAE,+BAA+B,EAC/C,WAAW,EAAE,sBAAsB,EACnC,uBAAuB,EAAE,uBAAuB,IAE/C,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 { VerticalGalleryStyles } from '../VerticalGallery';\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} 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 onFetchTilesToRender?: (indexes: number[]) => void;\n isNarrow?: boolean;\n / @conditional-compile-remove(vertical-gallery) /\n isShort?: boolean;\n overflowGalleryElements?: JSX.Element[];\n horizontalGalleryStyles?: HorizontalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n ~~veritcalGalleryStyles~~?: VerticalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n ~~overflowGalleryLayout~~?: ~~OverflowGalleryLayout~~;\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n onFetchTilesToRender,\n isNarrow = false,\n / @conditional-compile-remove(vertical-gallery) /\n isShort = false,\n overflowGalleryElements,\n horizontalGalleryStyles,\n / @conditional-compile-remove(vertical-gallery) / ~~overflowGalleryLayout~~ = 'HorizontalBottom',\n / @conditional-compile-remove(vertical-gallery) / ~~veritcalGalleryStyles~~,\n onChildrenPerPageChange\n } = props;\n\n const containerStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (~~overflowGalleryLayout~~ === 'VerticalRight') {\n return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n }\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [\n shouldFloatLocalVideo,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / ~~overflowGalleryLayout~~\n ]);\n\n const galleryStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (~~overflowGalleryLayout~~ === 'VerticalRight') {\n return concatStyleSets(verticalGalleryStyle(isShort), ~~veritcalGalleryStyles~~);\n }\n return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n }, [\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n horizontalGalleryStyles,\n / @conditional-compile-remove(vertical-gallery) / ~~overflowGalleryLayout~~,\n / @conditional-compile-remove(vertical-gallery) / ~~veritcalGalleryStyles~~\n ]);\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 as VerticalGalleryStyles}\n controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapHeightRem={HORIZONTAL_GALLERY_GAP}\n isShort={isShort}\n onFetchTilesToRender={onFetchTilesToRender}\n onChildrenPerPageChange={onChildrenPerPageChange}\n >\n {overflowGalleryElements}\n </ResponsiveVerticalGallery>\n );\n }\n\n / @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n // participant tiles are visible\n onChildrenPerPageChange?.(3);\n return (\n <ScrollableHorizontalGallery\n horizontalGalleryElements={overflowGalleryElements}\n onFetchTilesToRender={onFetchTilesToRender}\n key=\"scrollable-horizontal-gallery\"\n />\n );\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n horizontalGalleryStyles={galleryStyles}\n buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapWidthRem={HORIZONTAL_GALLERY_GAP}\n onChildrenPerPageChange={onChildrenPerPageChange}\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":"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","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 { VerticalGalleryStyles } from '../VerticalGallery';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { OverflowGalleryPosition } from '../VideoGallery';\n/ @conditional-compile-remove(pinned-participants) /\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n horizontalGalleryContainerStyle,\n horizontalGalleryStyle\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 onFetchTilesToRender?: (indexes: number[]) => void;\n isNarrow?: boolean;\n / @conditional-compile-remove(vertical-gallery) /\n isShort?: boolean;\n overflowGalleryElements?: JSX.Element[];\n horizontalGalleryStyles?: HorizontalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n verticalGalleryStyles?: VerticalGalleryStyles;\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryPosition?: OverflowGalleryPosition;\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n onFetchTilesToRender,\n isNarrow = false,\n / @conditional-compile-remove(vertical-gallery) /\n isShort = false,\n overflowGalleryElements,\n horizontalGalleryStyles,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition = 'HorizontalBottom',\n / @conditional-compile-remove(vertical-gallery) / verticalGalleryStyles,\n onChildrenPerPageChange\n } = props;\n\n const containerStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'VerticalRight') {\n return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n }\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [\n shouldFloatLocalVideo,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition\n ]);\n\n const galleryStyles = useMemo(() => {\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'VerticalRight') {\n return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n }\n return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n }, [\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n horizontalGalleryStyles,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition,\n / @conditional-compile-remove(vertical-gallery) / verticalGalleryStyles\n ]);\n\n / @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'VerticalRight') {\n return (\n <ResponsiveVerticalGallery\n key=\"responsive-vertical-gallery\"\n containerStyles={containerStyles}\n verticalGalleryStyles={galleryStyles as VerticalGalleryStyles}\n controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapHeightRem={HORIZONTAL_GALLERY_GAP}\n isShort={isShort}\n onFetchTilesToRender={onFetchTilesToRender}\n onChildrenPerPageChange={onChildrenPerPageChange}\n >\n {overflowGalleryElements}\n </ResponsiveVerticalGallery>\n );\n }\n\n / @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n // participant tiles are visible\n onChildrenPerPageChange?.(3);\n return (\n <ScrollableHorizontalGallery\n horizontalGalleryElements={overflowGalleryElements}\n onFetchTilesToRender={onFetchTilesToRender}\n key=\"scrollable-horizontal-gallery\"\n />\n );\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n horizontalGalleryStyles={galleryStyles}\n buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapWidthRem={HORIZONTAL_GALLERY_GAP}\n onChildrenPerPageChange={onChildrenPerPageChange}\n >\n {overflowGalleryElements}\n </ResponsiveHorizontalGallery>\n );\n};\n"]}

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

@@ -7,20 +7,20 @@ export interface OrganizedParticipantsArgs {
     remoteParticipants: VideoGalleryRemoteParticipant[];
     dominantSpeakers?: string[];
     maxRemoteVideoStreams?: number;
-    maxHorizontalGalleryDominantSpeakers?: number;
+    maxOverflowGalleryDominantSpeakers?: number;
     isScreenShareActive?: boolean;
     pinnedParticipantUserIds?: string[];
 }
 /**
- * A result that defines grid participants and horizontal participants in the VideoGallery
+ * A result that defines grid participants and overflow gallery participants in the VideoGallery
  * @private
  */
 export interface OrganizedParticipantsResult {
     gridParticipants: VideoGalleryParticipant[];
-    horizontalGalleryParticipants: VideoGalleryParticipant[];
+    overflowGalleryParticipants: VideoGalleryParticipant[];
 }
 /**
- * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
 export declare const useOrganizedParticipants: (args: OrganizedParticipantsArgs) => OrganizedParticipantsResult;

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

@@ -3,11 +3,11 @@
 import { useCallback, useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
-const DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS = 6;
+const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = useRef([]);
-    const visibleHorizontalGalleryParticipants = useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxHorizontalGalleryDominantSpeakers = DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
+    const visibleOverflowGalleryParticipants = useRef([]);
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     visibleGridParticipants.current =
         pinnedParticipantUserIds.length > 0 || isScreenShareActive
@@ -24,12 +24,12 @@ const _useOrganizedParticipants = (props) => {
     const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-    visibleHorizontalGalleryParticipants.current = smartDominantSpeakerParticipants({
+    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
         participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
-        lastVisibleParticipants: visibleHorizontalGalleryParticipants.current,
-        maxDominantSpeakers: maxHorizontalGalleryDominantSpeakers
+        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
+        maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
     });
     const getGridParticipants = useCallback(() => {
         if (isScreenShareActive) {
@@ -38,37 +38,37 @@ const _useOrganizedParticipants = (props) => {
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         return visibleGridParticipants.current.length > 0
             ? visibleGridParticipants.current
-            : visibleHorizontalGalleryParticipants.current.concat(callingParticipants);
+            : visibleOverflowGalleryParticipants.current.concat(callingParticipants);
         return visibleGridParticipants.current.length > 0
             ? visibleGridParticipants.current
-            : visibleHorizontalGalleryParticipants.current;
+            : visibleOverflowGalleryParticipants.current;
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive
     ]);
     const gridParticipants = getGridParticipants();
-    const getHorizontalGalleryRemoteParticipants = useCallback(() => {
+    const getOverflowGalleryRemoteParticipants = useCallback(() => {
         if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            // If screen sharing is active, assign video and audio participants as overflow gallery participants
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.current.concat(callingParticipants));
-            return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.current);
+            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
+            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);
         }
         else {
             // If screen sharing is not active, then assign all video tiles as grid tiles.
             // If there are no video tiles, then assign audio tiles as grid tiles.
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
             return visibleGridParticipants.current.length > 0
-                ? visibleHorizontalGalleryParticipants.current.concat(callingParticipants)
+                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
                 : [];
-            return visibleGridParticipants.current.length > 0 ? visibleHorizontalGalleryParticipants.current : [];
+            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : [];
         }
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive
     ]);
-    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
-    return { gridParticipants, horizontalGalleryParticipants };
+    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
+    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
 };
 /* @conditional-compile-remove(pinned-participants) */
 const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
@@ -98,9 +98,9 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     }
     return {
         gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
-        horizontalGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
-            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+        overflowGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
     };
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {
@@ -119,7 +119,7 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
     return remoteParticipantSortedByVideo;
 };
 /**
- * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
 export const useOrganizedParticipants = (args) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n\n/*\n Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n /\nexport interface OrganizedParticipantsArgs {\n remoteParticipants: VideoGalleryRemoteParticipant[];\n dominantSpeakers?: string[];\n maxRemoteVideoStreams?: number;\n maxHorizontalGalleryDominantSpeakers?: number;\n isScreenShareActive?: boolean;\n pinnedParticipantUserIds?: string[];\n}\n\n/\n A result that defines grid participants and horizontal participants in the VideoGallery\n * @private\n /\nexport interface OrganizedParticipantsResult {\n gridParticipants: VideoGalleryParticipant[];\n horizontalGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\n\nconst DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS = 6;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n const visibleHorizontalGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n const {\n remoteParticipants = [],\n dominantSpeakers = [],\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n maxHorizontalGalleryDominantSpeakers = DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS,\n isScreenShareActive = false,\n pinnedParticipantUserIds = []\n } = props;\n\n const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n\n visibleGridParticipants.current =\n pinnedParticipantUserIds.length > 0 \|\| isScreenShareActive\n ? []\n : smartDominantSpeakerParticipants({\n participants: videoParticipants,\n dominantSpeakers,\n lastVisibleParticipants: visibleGridParticipants.current,\n maxDominantSpeakers: maxRemoteVideoStreams\n }).slice(0, maxRemoteVideoStreams);\n\n const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));\n\n const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' \|\| 'Ringing'));\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n visibleHorizontalGalleryParticipants.current = smartDominantSpeakerParticipants({\n participants: remoteParticipantsOrdered.filter(\n (p) =>\n !visibleGridParticipantsSet.has(p.userId) &&\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / !callingParticipantsSet.has(\n p.userId\n )\n ),\n dominantSpeakers: dominantSpeakers,\n lastVisibleParticipants: visibleHorizontalGalleryParticipants.current,\n maxDominantSpeakers: maxHorizontalGalleryDominantSpeakers\n });\n\n const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n if (isScreenShareActive) {\n return [];\n }\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleHorizontalGalleryParticipants.current.concat(callingParticipants);\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleHorizontalGalleryParticipants.current;\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive\n ]);\n\n const gridParticipants = getGridParticipants();\n\n const getHorizontalGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n if (isScreenShareActive) {\n // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.concat(\n visibleHorizontalGalleryParticipants.current.concat(callingParticipants)\n );\n return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.current);\n } else {\n // If screen sharing is not active, then assign all video tiles as grid tiles.\n // If there are no video tiles, then assign audio tiles as grid tiles.\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleHorizontalGalleryParticipants.current.concat(callingParticipants)\n : [];\n return visibleGridParticipants.current.length > 0 ? visibleHorizontalGalleryParticipants.current : [];\n }\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive\n ]);\n\n const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();\n\n return { gridParticipants, horizontalGalleryParticipants };\n};\n\n/ @conditional-compile-remove(pinned-participants) /\nconst _useOrganizedParticipantsWithPinnedParticipants = (\n props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n // map remote participants by userId\n const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n map[remoteParticipant.userId] = remoteParticipant;\n return map;\n }, {});\n\n // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n props.pinnedParticipantUserIds?.forEach((id) => {\n const pinnedParticipant = remoteParticipantMap[id];\n if (pinnedParticipant) {\n pinnedParticipants.push(pinnedParticipant);\n }\n });\n\n // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n const useOrganizedParticipantsProps = {\n ...props,\n // if there are pinned participants then we should only consider unpinned participants\n remoteParticipants: unpinnedParticipants\n };\n\n const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n if (pinnedParticipants.length === 0) {\n return useOrganizedParticipantsResult;\n }\n\n return {\n gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n horizontalGalleryParticipants: props.isScreenShareActive\n ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)\n : useOrganizedParticipantsResult.gridParticipants.concat(\n useOrganizedParticipantsResult.horizontalGalleryParticipants\n )\n };\n};\n\nconst putVideoParticipantsFirst = (\n remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n remoteParticipants.forEach((p) => {\n if (p.videoStream?.isAvailable) {\n videoParticipants.push(p);\n } else {\n audioParticipants.push(p);\n }\n });\n const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n return remoteParticipantSortedByVideo;\n};\n\n/\n Hook to determine which participants should be in grid and horizontal gallery and their order respectively\n * @private\n /\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n / @conditional-compile-remove(pinned-participants) */\n return _useOrganizedParticipantsWithPinnedParticipants(args);\n return _useOrganizedParticipants(args);\n};\n"]}
1	+ {"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n\n/*\n Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n /\nexport interface OrganizedParticipantsArgs {\n remoteParticipants: VideoGalleryRemoteParticipant[];\n dominantSpeakers?: string[];\n maxRemoteVideoStreams?: number;\n maxOverflowGalleryDominantSpeakers?: number;\n isScreenShareActive?: boolean;\n pinnedParticipantUserIds?: string[];\n}\n\n/\n A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n /\nexport interface OrganizedParticipantsResult {\n gridParticipants: VideoGalleryParticipant[];\n overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n const {\n remoteParticipants = [],\n dominantSpeakers = [],\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n isScreenShareActive = false,\n pinnedParticipantUserIds = []\n } = props;\n\n const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n\n visibleGridParticipants.current =\n pinnedParticipantUserIds.length > 0 \|\| isScreenShareActive\n ? []\n : smartDominantSpeakerParticipants({\n participants: videoParticipants,\n dominantSpeakers,\n lastVisibleParticipants: visibleGridParticipants.current,\n maxDominantSpeakers: maxRemoteVideoStreams\n }).slice(0, maxRemoteVideoStreams);\n\n const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));\n\n const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' \|\| 'Ringing'));\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n participants: remoteParticipantsOrdered.filter(\n (p) =>\n !visibleGridParticipantsSet.has(p.userId) &&\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / !callingParticipantsSet.has(\n p.userId\n )\n ),\n dominantSpeakers: dominantSpeakers,\n lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n });\n\n const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n if (isScreenShareActive) {\n return [];\n }\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current.concat(callingParticipants);\n return visibleGridParticipants.current.length > 0\n ? visibleGridParticipants.current\n : visibleOverflowGalleryParticipants.current;\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive\n ]);\n\n const gridParticipants = getGridParticipants();\n\n const getOverflowGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n if (isScreenShareActive) {\n // If screen sharing is active, assign video and audio participants as overflow gallery participants\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.concat(\n visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n );\n return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);\n } else {\n // If screen sharing is not active, then assign all video tiles as grid tiles.\n // If there are no video tiles, then assign audio tiles as grid tiles.\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return visibleGridParticipants.current.length > 0\n ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)\n : [];\n return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : [];\n }\n }, [\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / callingParticipants,\n isScreenShareActive\n ]);\n\n const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n\n return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };\n};\n\n/ @conditional-compile-remove(pinned-participants) /\nconst _useOrganizedParticipantsWithPinnedParticipants = (\n props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n // map remote participants by userId\n const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n map[remoteParticipant.userId] = remoteParticipant;\n return map;\n }, {});\n\n // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n props.pinnedParticipantUserIds?.forEach((id) => {\n const pinnedParticipant = remoteParticipantMap[id];\n if (pinnedParticipant) {\n pinnedParticipants.push(pinnedParticipant);\n }\n });\n\n // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n const useOrganizedParticipantsProps = {\n ...props,\n // if there are pinned participants then we should only consider unpinned participants\n remoteParticipants: unpinnedParticipants\n };\n\n const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n if (pinnedParticipants.length === 0) {\n return useOrganizedParticipantsResult;\n }\n\n return {\n gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n overflowGalleryParticipants: props.isScreenShareActive\n ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n : useOrganizedParticipantsResult.gridParticipants.concat(\n useOrganizedParticipantsResult.overflowGalleryParticipants\n )\n };\n};\n\nconst putVideoParticipantsFirst = (\n remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n remoteParticipants.forEach((p) => {\n if (p.videoStream?.isAvailable) {\n videoParticipants.push(p);\n } else {\n audioParticipants.push(p);\n }\n });\n const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n return remoteParticipantSortedByVideo;\n};\n\n/\n Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n /\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n / @conditional-compile-remove(pinned-participants) */\n return _useOrganizedParticipantsWithPinnedParticipants(args);\n return _useOrganizedParticipants(args);\n};\n"]}

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

@@ -98,7 +98,7 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
  *
  * @beta
  */
-export declare type OverflowGalleryLayout = 'HorizontalBottom' | 'VerticalRight';
+export declare type OverflowGalleryPosition = 'HorizontalBottom' | 'VerticalRight';
 /**
  * Props for {@link VideoGallery}.
  *
@@ -182,7 +182,7 @@ export interface VideoGalleryProps {
      * Determines the layout of the overflowGallery inside the VideoGallery.
      * @defaultValue 'HorizontalBottom'
      */
-    overflowGalleryLayout?: OverflowGalleryLayout;
+    overflowGalleryPosition?: OverflowGalleryPosition;
 }
 /**
  * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.

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

@@ -72,7 +72,7 @@ export const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,
     /* @conditional-compile-remove(vertical-gallery) */
-    overflowGalleryLayout = 'HorizontalBottom' } = props;
+    overflowGalleryPosition = 'HorizontalBottom' } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
@@ -234,7 +234,7 @@ export const VideoGallery = (props) => {
         parentWidth: containerWidth,
         parentHeight: containerHeight,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
     }), [
         remoteParticipants,
         screenShareComponent,
@@ -248,7 +248,7 @@ export const VideoGallery = (props) => {
         onRenderRemoteVideoTile,
         defaultOnRenderVideoTile,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
     ]);
     const videoGalleryLayout = useMemo(() => {
         if (layout === 'floatingLocalVideo') {