npm - @azure/communication-react - Versions diffs - 1.7.0-beta.2 → 1.7.0 - Mend

@azure/communication-react 1.7.0-beta.2 → 1.7.0

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

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

@@ -2,10 +2,6 @@
 // Licensed under the MIT license.
 import { DefaultButton, Icon, mergeStyles, Stack, Text } from '@fluentui/react';
 import React, { useEffect, useMemo, useState } from 'react';
-/* @conditional-compile-remove(vertical-gallery) */
-import { useLocale } from '../localization';
-/* @conditional-compile-remove(vertical-gallery) */
-import { useIdentifiers } from '../identifiers';
 import { useTheme } from '../theming';
 import { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';
 import { bucketize } from './utils/overFlowGalleriesUtils';
@@ -22,8 +18,6 @@ export const VerticalGallery = (props) => {
         previous: true,
         next: true
     });
-    /* @conditional-compile-remove(vertical-gallery) */
-    const ids = useIdentifiers();
     const numberOfChildren = React.Children.count(children);
     const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
     const indexesArray = useMemo(() => {
@@ -92,17 +86,13 @@ export const VerticalGallery = (props) => {
     }
     return React.createElement(Stack, { className: mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
         React.createElement(Stack, { styles: childContainerStyle }, childrenOnCurrentPage === null || childrenOnCurrentPage === void 0 ? void 0 : childrenOnCurrentPage.map((child, i) => {
-            return React.createElement(Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child);
+            return React.createElement(Stack.Item, { key: i, styles: childrenStyles }, child);
         })),
         showButtons && React.createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }));
 };
 const VerticalGalleryControlBar = (props) => {
     const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
     const theme = useTheme();
-    /* @conditional-compile-remove(vertical-gallery) */
-    const ids = useIdentifiers();
-    /* @conditional-compile-remove(vertical-gallery) */
-    const strings = useLocale().strings.VerticalGallery;
     const pageCounterContainerStyles = useMemo(() => {
         return mergeStyles(pageNavigationControlBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     }, [styles === null || styles === void 0 ? void 0 : styles.root]);
@@ -119,13 +109,10 @@ const VerticalGalleryControlBar = (props) => {
         childrenGap: '0.5rem'
     };
     return React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
-        React.createElement(DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous,
-            /* @conditional-compile-remove(vertical-gallery) */ ariaLabel: strings.leftNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
+        React.createElement(DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous },
             React.createElement(Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
-        React.createElement(Text
-        /* @conditional-compile-remove(vertical-gallery) */ , { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
-        React.createElement(DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next,
-            /* @conditional-compile-remove(vertical-gallery) */ ariaLabel: strings.rightNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
+        React.createElement(Text, { className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
+        React.createElement(DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next },
             React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles })));
 };
 //# sourceMappingURL=VerticalGallery.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/\n Styles for the VerticalGallery component\n \n @beta\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 Strings for localization of the vertical gallery.\n \n @beta\n /\nexport interface VerticalGalleryStrings {\n /* Aria label for the left page navigation button /\n leftNavButtonAriaLabel?: string;\n /* Aria label for the right page navigation button /\n rightNavButtonAriaLabel?: string;\n}\n\n/\n Styles for the control bar inside the VerticalGallery component\n \n @beta\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 /* helper function to choose which tiles to give video to. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: {\n next: boolean;\n previous: boolean;\n };\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 {\n children,\n styles,\n childrenPerPage,\n onFetchTilesToRender\n } = props;\n const [page, setPage] = useState(1);\n const [buttonState, setButtonState] = useState<{\n previous: boolean;\n next: boolean;\n }>({\n previous: true,\n next: true\n });\n\n / @conditional-compile-remove(vertical-gallery) /\n const ids = useIdentifiers();\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page - 1]);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n const firstIndexOfCurrentPage = (page - 1) childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray[0] !== undefined) {\n return indexesArray[clippedPage - 1].map(index => {\n return React.Children.toArray(children)[index];\n });\n }\n return;\n }, [indexesArray, clippedPage, children]);\n const showButtons = numberOfChildren > childrenPerPage;\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n if (page > lastPage && lastPage > 0) {\n setPage(lastPage);\n }\n useEffect(() => {\n if (page > 1 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({\n previous: false,\n next: false\n });\n } else if (page === 1 && showButtons) {\n // we are on the first page.\n setButtonState({\n previous: true,\n next: false\n });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({\n previous: false,\n next: true\n });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n const childContainerStyle = useMemo(() => {\n return {\n root: childrenContainerStyle(2)\n };\n }, []);\n const childrenStyles = useMemo(() => {\n return {\n root: styles?.children\n };\n }, [styles?.children]);\n if (childrenPerPage <= 0) {\n return <></>;\n }\n return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n <Stack styles={childContainerStyle}>\n {childrenOnCurrentPage?.map((child, i) => {\n return <Stack.Item key={i} styles={childrenStyles}\n /* @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.verticalGalleryVideoTile}>\n {child}\n </Stack.Item>;\n })}\n </Stack>\n {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const {\n onNextButtonClick,\n onPreviousButtonClick,\n buttonsDisabled,\n currentPage,\n totalPages,\n styles\n } = props;\n const theme = useTheme();\n / @conditional-compile-remove(vertical-gallery) /\n const ids = useIdentifiers();\n\n / @conditional-compile-remove(vertical-gallery) /\n const strings = useLocale().strings.VerticalGallery;\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n const controlBarSpacing = {\n childrenGap: '0.5rem'\n };\n return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous}\n / @conditional-compile-remove(vertical-gallery) / ariaLabel={strings.leftNavButtonAriaLabel}\n / @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.overflowGalleryLeftNavButton}>\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n </DefaultButton>\n <Text\n / @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}\n / @conditional-compile-remove(vertical-gallery) / ariaLabel={strings.rightNavButtonAriaLabel}\n / @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryRightNavButton}>\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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 { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/*\n Styles for the VerticalGallery component\n \n @beta\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 Strings for localization of the vertical gallery.\n \n @beta\n /\nexport interface VerticalGalleryStrings {\n /* Aria label for the left page navigation button /\n leftNavButtonAriaLabel?: string;\n /* Aria label for the right page navigation button /\n rightNavButtonAriaLabel?: string;\n}\n\n/\n Styles for the control bar inside the VerticalGallery component\n \n @beta\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 /* helper function to choose which tiles to give video to. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: {\n next: boolean;\n previous: boolean;\n };\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 {\n children,\n styles,\n childrenPerPage,\n onFetchTilesToRender\n } = props;\n const [page, setPage] = useState(1);\n const [buttonState, setButtonState] = useState<{\n previous: boolean;\n next: boolean;\n }>({\n previous: true,\n next: true\n });\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page - 1]);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n const firstIndexOfCurrentPage = (page - 1) childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray[0] !== undefined) {\n return indexesArray[clippedPage - 1].map(index => {\n return React.Children.toArray(children)[index];\n });\n }\n return;\n }, [indexesArray, clippedPage, children]);\n const showButtons = numberOfChildren > childrenPerPage;\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n if (page > lastPage && lastPage > 0) {\n setPage(lastPage);\n }\n useEffect(() => {\n if (page > 1 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({\n previous: false,\n next: false\n });\n } else if (page === 1 && showButtons) {\n // we are on the first page.\n setButtonState({\n previous: true,\n next: false\n });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({\n previous: false,\n next: true\n });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n const childContainerStyle = useMemo(() => {\n return {\n root: childrenContainerStyle(2)\n };\n }, []);\n const childrenStyles = useMemo(() => {\n return {\n root: styles?.children\n };\n }, [styles?.children]);\n if (childrenPerPage <= 0) {\n return <></>;\n }\n return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n <Stack styles={childContainerStyle}>\n {childrenOnCurrentPage?.map((child, i) => {\n return <Stack.Item key={i} styles={childrenStyles}>\n {child}\n </Stack.Item>;\n })}\n </Stack>\n {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const {\n onNextButtonClick,\n onPreviousButtonClick,\n buttonsDisabled,\n currentPage,\n totalPages,\n styles\n } = props;\n const theme = useTheme();\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n const controlBarSpacing = {\n childrenGap: '0.5rem'\n };\n return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous}>\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};"]}

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

@@ -4,8 +4,6 @@ import { Stack } from '@fluentui/react';
 import React, { useMemo, useState, useRef } from 'react';
 import { GridLayout } from '../GridLayout';
 import { isNarrowWidth } from '../utils/responsive';
-/* @conditional-compile-remove(vertical-gallery) */
-import { isShortHeight } from '../utils/responsive';
 import { rootLayoutStyle } from './styles/DefaultLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
 import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
@@ -17,13 +15,8 @@ import { OverflowGallery } from './OverflowGallery';
  * @private
  */
 export const DefaultLayout = (props) => {
-    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth,
-    /* @conditional-compile-remove(vertical-gallery) */
-    parentHeight, pinnedParticipantUserIds = [],
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, pinnedParticipantUserIds = [] } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    /* @conditional-compile-remove(vertical-gallery) */
-    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     // This is for tracking the number of children in the first page of overflow gallery.
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
@@ -34,8 +27,7 @@ export const DefaultLayout = (props) => {
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map(p => {
@@ -61,16 +53,11 @@ export const DefaultLayout = (props) => {
         if (overflowGalleryTiles.length === 0) {
             return null;
         }
-        return React.createElement(OverflowGallery, { isNarrow: isNarrow,
-            /* @conditional-compile-remove(vertical-gallery) */ isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
-            /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
-            /* @conditional-compile-remove(pinned-participants) */ overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+        return React.createElement(OverflowGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
             } });
-    }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */ isShort, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, setIndexesToRender, /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery]);
-    return React.createElement(Stack
-    /* @conditional-compile-remove(vertical-gallery) */ , {
-        /* @conditional-compile-remove(vertical-gallery) */ horizontal: overflowGalleryPosition === 'VerticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+    }, [isNarrow, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, setIndexesToRender]);
+    return React.createElement(Stack, { styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
         screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
         overflowGallery);
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;~~AACpD,mDAAmD;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;~~AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW~~;IACX~~,~~mDAAmD;IACnD~~,~~YAAY,EACZ,~~wBAAwB,GAAG,EAAE~~;IAC7B~~,~~mDAAmD~~,~~CAAA,uBAAuB,~~GAAG,~~kBAAkB,EAChG,GAAG,~~KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;~~IAElE~~,~~mDAAmD;IACnD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,~~qFAAqF;IACrF,+GAA+G;IAC/G,iHAAiH;IACjH,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,EACJ,gBAAgB,EAChB,2BAA2B,EAC5B,GAAG,wBAAwB,CAAC;QAC3B,kBAAkB;QAClB,gBAAgB;QAChB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,CAAC,wBAAwB,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;~~QAC9K,sDAAsD,CAAA,wBAAwB;~~KAC/E,CAAC,CAAC;IACH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QACzC,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACrM,CAAC,CAAC,CAAC;IAEH;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACrE,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACpO,CAAC,CAAC,CAAC;IACH,IAAI,mBAAmB,EAAE;QACvB,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;IACD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YACrC,OAAO,IAAI,CAAC;SACb;QACD,OAAO,oBAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ~~;YAC1C~~,~~mDAAmD,CAAC,OAAO,~~EAAE,~~OAAO,EAAE,~~qBAAqB,EAAE,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB~~;YACrM~~,~~mDAAmD,CAAC,qBAAqB,~~EAAE,~~MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;YAClG,sDAAsD,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,~~oBAAoB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;~~gBACxL~~,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,GAAI,CAAC;IACR,CAAC,EAAE,CAAC,QAAQ,EAAE,~~mDAAmD,CAAA,OAAO,EAAE,~~oBAAoB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,~~mDAAmD,CAAA,uBAAuB,EAAE,~~kBAAkB,~~EAAE,mDAAmD,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,~~CAAC,CAAC,CAAC;~~IACxS~~,OAAO,oBAAC,KAAK~~;IACb~~,~~mDAAmD;QAAnD~~,~~mDAAmD,CAAC,UAAU,EAAE,uBAAuB,KAAK,eAAe,EAAE,~~MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,qBAAqB;~~QAC9J~~,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IAClG,SAAS,CACC;QACd,eAAe,CACV,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\~~n/* @conditional-compile-remove(vertical-gallery) /\~~nimport { ~~isShortHeight } from '../utils/responsive';\nimport {~~ LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/\n Props for {@link DefaultLayout}.\n \n @private\n /\nexport type DefaultLayoutProps = LayoutProps;\n\n/\n DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n \n @private\n /\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n localParticipant,\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n parentWidth,\n ~~/ @conditional-compile-remove(vertical-gallery) /\n parentHeight,\n~~ pinnedParticipantUserIds = []~~,\n / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition = 'HorizontalBottom'~~\n } = props;\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 // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n const childrenPerPage = useRef(4);\n const {\n gridParticipants,\n overflowGalleryParticipants\n } = useOrganizedParticipants({\n remoteParticipants,\n localParticipant,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current~~,\n / @conditional-compile-remove(pinned-participants) /pinnedParticipantUserIds~~\n });\n let activeVideoStreams = 0;\n const gridTiles = gridParticipants.map(p => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\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 const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n });\n if (localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0) {\n return null;\n }\n return <OverflowGallery isNarrow={isNarrow}\n / ~~@conditional-compile-remove(vertical-gallery) / isShort={isShort}~~ shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery}\n / @conditional-compile-remove(vertical-gallery) / verticalGalleryStyles={styles?.verticalGallery}\n / @conditional-compile-remove(pinned-participants) / overflowGalleryPosition={overflowGalleryPosition} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }} />;\n }, [isNarrow, ~~/ @conditional-compile-remove(vertical-gallery) /isShort,~~ overflowGalleryTiles, styles?.horizontalGallery, ~~/ @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition,~~ setIndexesToRender~~, / @conditional-compile-remove(vertical-gallery) /styles?.verticalGallery~~]);\n return <Stack\n / ~~@conditional-compile-remove(vertical-gallery) */ horizontal={overflowGalleryPosition === 'VerticalRight'}~~ styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>}\n {overflowGallery}\n </Stack>;\n};"]}
1	+ {"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/*\n Props for {@link DefaultLayout}.\n \n @private\n /\nexport type DefaultLayoutProps = LayoutProps;\n\n/\n DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n \n @private\n /\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n localParticipant,\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n parentWidth,\n pinnedParticipantUserIds = []\n } = props;\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\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 // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n const childrenPerPage = useRef(4);\n const {\n gridParticipants,\n overflowGalleryParticipants\n } = useOrganizedParticipants({\n remoteParticipants,\n localParticipant,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current\n });\n let activeVideoStreams = 0;\n const gridTiles = gridParticipants.map(p => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\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 const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n });\n if (localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0) {\n return null;\n }\n return <OverflowGallery isNarrow={isNarrow} shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }} />;\n }, [isNarrow, overflowGalleryTiles, styles?.horizontalGallery, setIndexesToRender]);\n return <Stack styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>}\n {overflowGallery}\n </Stack>;\n};"]}

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

@@ -1,5 +1,4 @@
 import { LayoutProps } from './Layout';
-import { LocalVideoTileSize } from '../VideoGallery';
 /**
  * Props for {@link FloatingLocalVideoLayout}.
  *
@@ -14,10 +13,6 @@ export interface FloatingLocalVideoLayoutProps extends LayoutProps {
      * Height of parent element
      */
     parentHeight?: number;
-    /**
-     * Local video tile mode
-     */
-    localVideoTileSize?: LocalVideoTileSize;
 }
 /**
  * FloatingLocalVideoLayout displays remote participants and a screen sharing component in

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

@@ -6,12 +6,8 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useTheme } from '../../theming';
 import { GridLayout } from '../GridLayout';
 import { isNarrowWidth } from '../utils/responsive';
-/* @conditional-compile-remove(vertical-gallery) */
-import { isShortHeight } from '../utils/responsive';
 import { FloatingLocalVideo } from './FloatingLocalVideo';
 import { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
-/* @conditional-compile-remove(vertical-gallery) */
-import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
 import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
 import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
@@ -23,13 +19,9 @@ import { OverflowGallery } from './OverflowGallery';
  * @private
  */
 export const FloatingLocalVideoLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight,
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [],
-    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize } = props;
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, pinnedParticipantUserIds = [] } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    /* @conditional-compile-remove(vertical-gallery) */
-    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     // This is for tracking the number of children in the first page of overflow gallery.
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     const childrenPerPage = useRef(4);
@@ -38,8 +30,7 @@ export const FloatingLocalVideoLayout = (props) => {
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map(p => {
@@ -64,19 +55,11 @@ export const FloatingLocalVideoLayout = (props) => {
     });
     const layerHostId = useId('layerhost');
     const localVideoSizeRem = useMemo(() => {
-        if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {
+        if (isNarrow) {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
-        /* @conditional-compile-remove(vertical-gallery) */
-        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
-            return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
-        }
-        /*@conditional-compile-remove(click-to-call) */
-        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {
-            return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
-        }
         return LARGE_FLOATING_MODAL_SIZE_REM;
-    }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, /* @conditional-compile-remove(vertical-gallery) */ isShort, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */ localVideoTileSize]);
+    }, [overflowGalleryTiles.length, isNarrow, screenShareComponent]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo || screenShareComponent && localVideoComponent ?
         // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
         showCameraSwitcherInLocalPreview ? React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
@@ -87,21 +70,18 @@ export const FloatingLocalVideoLayout = (props) => {
         if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
-        return React.createElement(OverflowGallery
-        /* @conditional-compile-remove(vertical-gallery) */ , {
-            /* @conditional-compile-remove(vertical-gallery) */ isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
-            /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
-            /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
+        return React.createElement(OverflowGallery, { onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
             } });
-    }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */ isShort, screenShareComponent, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, setIndexesToRender, /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery]);
+    }, [isNarrow, screenShareComponent, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, setIndexesToRender]);
     return React.createElement(Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
         React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
-        React.createElement(Stack
-        /* @conditional-compile-remove(vertical-gallery) */ , {
-            /* @conditional-compile-remove(vertical-gallery) */ horizontal: overflowGalleryPosition === 'VerticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
+        React.createElement(Stack, { styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
-            overflowGallery));
+            overflowGalleryTrampoline(overflowGallery)));
+};
+const overflowGalleryTrampoline = (gallery, galleryPosition) => {
+    return gallery;
 };
 //# sourceMappingURL=FloatingLocalVideoLayout.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } 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/ @conditional-compile-remove(click-to-call) /\nimport { LocalVideoTileSize } from '../VideoGallery';\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 / @conditional-compile-remove(click-to-call) /\n /\n Local video tile mode\n /\n localVideoTileSize?: LocalVideoTileSize;\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 / @conditional-compile-remove(click-to-call) /localVideoTileSize\n } = props;\n const theme = useTheme();\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 {\n gridParticipants,\n overflowGalleryParticipants\n } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,\n / @conditional-compile-remove(pinned-participants) /pinnedParticipantUserIds\n });\n let activeVideoStreams = 0;\n const gridTiles = gridParticipants.map(p => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n });\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\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 const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n });\n const layerHostId = useId('layerhost');\n const localVideoSizeRem = useMemo(() => {\n if (isNarrow \|\| /@conditional-compile-remove(click-to-call) /localVideoTileSize === '9:16') {\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 ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n }\n /@conditional-compile-remove(click-to-call) /\n if ((overflowGalleryTiles.length > 0 \|\| screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {\n return localVideoTileSize === '16:9' \|\| !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n }\n return LARGE_FLOATING_MODAL_SIZE_REM;\n }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, / @conditional-compile-remove(vertical-gallery) /isShort, / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition, / @conditional-compile-remove(click-to-call) /localVideoTileSize]);\n const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo \|\| screenShareComponent && localVideoComponent ?\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? <Stack className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}>\n {localVideoComponent}\n </Stack> : overflowGalleryTiles.length > 0 \|\| screenShareComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent))}>\n {localVideoComponent}\n </Stack> : <FloatingLocalVideo localVideoComponent={localVideoComponent} layerHostId={layerHostId} localVideoSizeRem={localVideoSizeRem} parentWidth={parentWidth} parentHeight={parentHeight} /> : undefined;\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n return null;\n }\n return <OverflowGallery\n / @conditional-compile-remove(vertical-gallery) / isShort={isShort} onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={true} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery}\n / @conditional-compile-remove(vertical-gallery) / verticalGalleryStyles={styles?.verticalGallery}\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition={overflowGalleryPosition} onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }} />;\n }, [isNarrow, / @conditional-compile-remove(vertical-gallery) /isShort, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition, setIndexesToRender, / @conditional-compile-remove(vertical-gallery) /styles?.verticalGallery]);\n return <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n <Stack\n / @conditional-compile-remove(vertical-gallery) */ horizontal={overflowGalleryPosition === 'VerticalRight'} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>}\n {overflowGallery}\n </Stack>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,6BAA6B,EAAE,4BAA4B,EAAE,wCAAwC,EAAE,uBAAuB,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACnN,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAiBpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;IAC5F,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,gCAAgC,EAChC,WAAW,EACX,YAAY,EACZ,wBAAwB,GAAG,EAAE,EAC9B,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAClE,qFAAqF;IACrF,+GAA+G;IAC/G,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,EACJ,gBAAgB,EAChB,2BAA2B,EAC5B,GAAG,wBAAwB,CAAC;QAC3B,kBAAkB;QAClB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,wBAAwB,CAAC,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;KACzK,CAAC,CAAC;IACH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QACzC,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACrM,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5D,IAAI,CAAC,qBAAqB,IAAI,mBAAmB,EAAE;QACjD,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACrE,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACvP,CAAC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,QAAQ,EAAE;YACZ,OAAO,6BAA6B,CAAC;SACtC;QACD,OAAO,6BAA6B,CAAC;IACvC,CAAC,EAAE,CAAC,oBAAoB,CAAC,MAAM,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAClE,MAAM,0BAA0B,GAAG,mBAAmB,IAAI,qBAAqB,IAAI,oBAAoB,IAAI,mBAAmB,CAAC,CAAC;QAChI,kGAAkG;QAClG,gCAAgC,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wCAAwC,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE;gBACnI,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;gBACnC,MAAM,EAAE,uBAAuB;aAChC,CAAC,IACO,mBAAmB,CACd,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,IAC/K,mBAAmB,CACd,CAAC,CAAC,CAAC,oBAAC,kBAAkB,IAAC,mBAAmB,EAAE,mBAAmB,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACpN,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC9D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,oBAAC,eAAe,IAAC,oBAAoB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,IAAI,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBAC3P,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,GAAI,CAAC;IACR,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAC1G,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAChC,0BAA0B;QAC3B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB;YAE3D,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IAClG,SAAS,CACC;YACd,yBAAyB,CAAC,eAAe,CAAC,CACrC,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,OAA2B,EAAE,eAAwE,EAAsB,EAAE;IAC9J,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","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';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_REM } 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 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 pinnedParticipantUserIds = []\n } = props;\n const theme = useTheme();\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\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 {\n gridParticipants,\n overflowGalleryParticipants\n } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current\n });\n let activeVideoStreams = 0;\n const gridTiles = gridParticipants.map(p => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n });\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\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 const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n });\n const layerHostId = useId('layerhost');\n const localVideoSizeRem = useMemo(() => {\n if (isNarrow) {\n return SMALL_FLOATING_MODAL_SIZE_REM;\n }\n return LARGE_FLOATING_MODAL_SIZE_REM;\n }, [overflowGalleryTiles.length, isNarrow, screenShareComponent]);\n const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo \|\| screenShareComponent && localVideoComponent ?\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? <Stack className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}>\n {localVideoComponent}\n </Stack> : overflowGalleryTiles.length > 0 \|\| screenShareComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent))}>\n {localVideoComponent}\n </Stack> : <FloatingLocalVideo localVideoComponent={localVideoComponent} layerHostId={layerHostId} localVideoSizeRem={localVideoSizeRem} parentWidth={parentWidth} parentHeight={parentHeight} /> : undefined;\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n return null;\n }\n return <OverflowGallery onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={true} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }} />;\n }, [isNarrow, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, setIndexesToRender]);\n return <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n <Stack styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n {}\n {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>}\n {overflowGalleryTrampoline(overflowGallery)}\n </Stack>\n </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element \| null, galleryPosition?: 'HorizontalBottom' \| 'VerticalRight' \| 'HorizontalTop'): JSX.Element \| null => {\n return gallery;\n};"]}

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

@@ -1,6 +1,5 @@
 import { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../types';
 import { VideoGalleryStyles } from '../VideoGallery';
-import { OverflowGalleryPosition } from '../VideoGallery';
 /**
  * Props for a layout component
  *
@@ -40,10 +39,5 @@ export interface LayoutProps {
      * List of pinned participant userIds
      */
     pinnedParticipantUserIds?: string[];
-    /**
-     * Determines the layout of the overflowGallery.
-     * @defaultValue 'HorizontalBottom'
-     */
-    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":["../../../../../../preprocess-dist/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 { VideoGalleryParticipant, 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 /* Local participant information /\n localParticipant?: VideoGalleryParticipant;\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}"]}
1	+ {"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\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 /* Local participant information /\n localParticipant?: VideoGalleryParticipant;\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}"]}

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

@@ -1,6 +1,4 @@
 import { HorizontalGalleryStyles } from '../HorizontalGallery';
-import { VerticalGalleryStyles } from '../VerticalGallery';
-import { OverflowGalleryPosition } from '../VideoGallery';
 /**
  * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
  *
@@ -10,11 +8,8 @@ export declare const OverflowGallery: (props: {
     shouldFloatLocalVideo?: boolean | undefined;
     onFetchTilesToRender?: ((indexes: number[]) => void) | undefined;
     isNarrow?: boolean | undefined;
-    isShort?: boolean | undefined;
     overflowGalleryElements?: JSX.Element[] | undefined;
     horizontalGalleryStyles?: HorizontalGalleryStyles | 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

@@ -3,50 +3,21 @@
 import { concatStyleSets } from '@fluentui/react';
 import React, { useMemo } from 'react';
 import { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';
-/* @conditional-compile-remove(vertical-gallery) */
-import { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';
 import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';
-/* @conditional-compile-remove(pinned-participants) */
-import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
 import { horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';
-/* @conditional-compile-remove(vertical-gallery) */
-import { verticalGalleryContainerStyle, verticalGalleryStyle } from './styles/VideoGalleryResponsiveVerticalGallery.styles';
 /**
  * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
  *
  * @private
  */
 export const OverflowGallery = (props) => {
-    const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false,
-    /* @conditional-compile-remove(vertical-gallery) */
-    isShort = false, overflowGalleryElements, horizontalGalleryStyles,
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',
-    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles, onChildrenPerPageChange } = props;
+    const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false, overflowGalleryElements, horizontalGalleryStyles, onChildrenPerPageChange } = props;
     const containerStyles = useMemo(() => {
-        /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryPosition === 'VerticalRight') {
-            return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
-        }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
-    }, [shouldFloatLocalVideo, /* @conditional-compile-remove(vertical-gallery) */ isShort, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition]);
+    }, [shouldFloatLocalVideo, isNarrow]);
     const galleryStyles = useMemo(() => {
-        /* @conditional-compile-remove(vertical-gallery) */
-        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) */ overflowGalleryPosition, /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles]);
-    /* @conditional-compile-remove(vertical-gallery) */
-    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 ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
-    }
-    /* @conditional-compile-remove(pinned-participants) */
-    if (isNarrow) {
-        // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
-        // participant tiles are visible
-        onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
-        return React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" });
-    }
+    }, [isNarrow, horizontalGalleryStyles]);
     return React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
 };
 //# sourceMappingURL=OverflowGallery.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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,~~EAAE~~,+BAA+B~~,~~EAAE,~~sBAAsB,EAAE,MAAM,yDAAyD,CAAC;AAClI~~,mDAAmD;AACnD,OAAO,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,uDAAuD,CAAC;AAE5H~~;;;;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~~,~~CAAA,~~uBAAuB,~~GAAG,kBAAkB;IAC/F,mDAAmD,CAAA,qBAAqB,EACxE,uBAAuB,~~EACxB,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,~~mDAAmD;QACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE;YAC/C,~~OAAO~~,6BAA6B,CAAC,qBAAqB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;SAChF;QACD,OAAO~~,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,qBAAqB,EAAE,~~mDAAmD,CAAA,OAAO,EAAE,~~QAAQ,~~EAAE,mDAAmD,CAAA,uBAAuB,~~CAAC,CAAC,CAAC;~~IAC9K~~,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,~~mDAAmD;QACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE;YAC/C,~~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,CAAC,QAAQ,EAAE,~~mDAAmD,CAAA,OAAO,EAAE,~~uBAAuB,~~EAAE,mDAAmD,CAAA,uBAAuB,EAAE,mDAAmD,CAAA,qBAAqB,~~CAAC,CAAC,CAAC;~~IAE1P~~,~~mDAAmD;IACnD,IAAI,uBAAuB,KAAK,eAAe,EAAE;QAC/C,~~OAAO,oBAAC,yBAAyB,IAAC,GAAG,EAAC,6BAA6B,EAAC,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAG,aAAuC,EAAE,mBAAmB,EAAE,+BAA+B,EAAE,YAAY,EAAE,sBAAsB,EAAE,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,uBAAuB,IAC5W,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,CAClC,CAAC;KAChC;IAED,sDAAsD;IACtD,IAAI,QAAQ,EAAE;QACZ,+FAA+F;QAC/F,gCAAgC;QAChC,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,CAAC,CAAC,CAAC;QAC7B,OAAO,oBAAC,2BAA2B,IAAC,~~yBAAyB,EAAE,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,~~GAAG,EAAC,+BAA+B,~~GAAG,CAAC;KAChN;IACD,OAAO,oBAAC,2BAA2B,IAAC,GAAG,~~EAAC~~,+BAA+B~~,~~EAAC,~~eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,aAAa,EAAE,cAAc,EAAE,+BAA+B,EAAE,WAAW,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,uBAAuB,IAC/T,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,CAChC,CAAC;AACnC,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 { OverflowGalleryPosition } from '../VideoGallery';\n/ @conditional-compile-remove(pinned-participants) /\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport { horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n~~/ @conditional-compile-remove(vertical-gallery) /\nimport { verticalGalleryContainerStyle, verticalGalleryStyle } 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 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 }, [shouldFloatLocalVideo, ~~/ @conditional-compile-remove(vertical-gallery) /isShort,~~ isNarrow~~, / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition~~]);\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 }, [isNarrow, ~~/ @conditional-compile-remove(vertical-gallery) /isShort,~~ horizontalGalleryStyles~~, / @conditional-compile-remove(vertical-gallery) /overflowGalleryPosition, / @conditional-compile-remove(vertical-gallery) /verticalGalleryStyles~~]);\n\n ~~/ @conditional-compile-remove(vertical-gallery) /\n if (overflowGalleryPosition === 'VerticalRight') {\n~~ return <ResponsiveVerticalGallery key=\"responsive-vertical-gallery\" containerStyles={containerStyles} verticalGalleryStyles={(galleryStyles as VerticalGalleryStyles)} controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH} gapHeightRem={HORIZONTAL_GALLERY_GAP} isShort={isShort} onFetchTilesToRender={onFetchTilesToRender} onChildrenPerPageChange={onChildrenPerPageChange}>\n {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n </ResponsiveVerticalGallery>;\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 <ScrollableHorizontalGallery horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]} onFetchTilesToRender={onFetchTilesToRender} key=\"scrollable-horizontal-gallery\" />;\n }\n return <ResponsiveHorizontalGallery key=\"responsive-horizontal-gallery\" containerStyles={containerStyles} onFetchTilesToRender={onFetchTilesToRender} horizontalGalleryStyles={galleryStyles} buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH} gapWidthRem={HORIZONTAL_GALLERY_GAP} onChildrenPerPageChange={onChildrenPerPageChange}>\n {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n </ResponsiveHorizontalGallery>;\n};"]}
1	+ {"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,yDAAyD,CAAC;AAClI;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAO/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,oBAAoB,EACpB,QAAQ,GAAG,KAAK,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC;IACpF,CAAC,EAAE,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC,CAAC;IACxC,OAAO,oBAAC,2BAA2B,IAAC,GAAG,EAAC,+BAA+B,EAAC,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,aAAa,EAAE,cAAc,EAAE,+BAA+B,EAAE,WAAW,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,uBAAuB,IAC/T,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,yCAAK,CAAC,CAChC,CAAC;AACnC,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';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\nimport { horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\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 overflowGalleryElements?: JSX.Element[];\n horizontalGalleryStyles?: HorizontalGalleryStyles;\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n onFetchTilesToRender,\n isNarrow = false,\n overflowGalleryElements,\n horizontalGalleryStyles,\n onChildrenPerPageChange\n } = props;\n const containerStyles = useMemo(() => {\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [shouldFloatLocalVideo, isNarrow]);\n const galleryStyles = useMemo(() => {\n return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n }, [isNarrow, horizontalGalleryStyles]);\n return <ResponsiveHorizontalGallery key=\"responsive-horizontal-gallery\" containerStyles={containerStyles} onFetchTilesToRender={onFetchTilesToRender} horizontalGalleryStyles={galleryStyles} buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH} gapWidthRem={HORIZONTAL_GALLERY_GAP} onChildrenPerPageChange={onChildrenPerPageChange}>\n {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n </ResponsiveHorizontalGallery>;\n};"]}

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

@@ -50,7 +50,7 @@ export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
 export declare const localVideoTileContainerStyle: (theme: Theme, localVideoTileSizeRem: {
     width: number;
     height: number;
-}, screenSharePresent?: boolean | undefined) => IStyle;
+}, screenSharePresent?: boolean | undefined, overflowGalleryPosition?: "HorizontalBottom" | "VerticalRight" | "HorizontalTop" | undefined) => IStyle;
 /**
  * @private
  */

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

@@ -60,14 +60,15 @@ export const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent) => {
+export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent, overflowGalleryPosition) => {
     return {
         width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',
         height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',
         minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
         minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: `${localVideoTileOuterPaddingRem}rem`,
+        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
+        top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
         right: `${localVideoTileOuterPaddingRem}rem`