@azure/communication-react 1.5.1-beta.5 → 1.6.0

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

@@ -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(() => {
@@ -89,17 +83,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]);
@@ -116,13 +106,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

@@ -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    return indexesArray[clippedPage - 1].map(index => {\n      return React.Children.toArray(children)[index];\n    });\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};"]}
+{"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    return indexesArray[clippedPage - 1].map(index => {\n      return React.Children.toArray(children)[index];\n    });\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

@@ -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 = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
-    /* @conditional-compile-remove(vertical-gallery) */
-    parentHeight, pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
+    const { remoteParticipants = [], 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.
     const childrenPerPage = useRef(4);
@@ -32,8 +25,7 @@ export const DefaultLayout = (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 => {
@@ -59,16 +51,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

@@ -1 +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';\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    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  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\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[]>([...Array(maxRemoteVideoStreams - activeVideoStreams).keys()]);\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};"]}
+{"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    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  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\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[]>([...Array(maxRemoteVideoStreams - activeVideoStreams).keys()]);\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.js

@@ -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,12 +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 = [] } = 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);
@@ -37,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 => {
@@ -66,12 +58,8 @@ export const FloatingLocalVideoLayout = (props) => {
         if (isNarrow) {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
-        /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'VerticalRight') {
-            return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
-        }
         return LARGE_FLOATING_MODAL_SIZE_REM;
-    }, [overflowGalleryTiles.length, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ isShort, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition]);
+    }, [overflowGalleryTiles.length, isNarrow]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ?
         // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
         showCameraSwitcherInLocalPreview ? React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
@@ -82,20 +70,14 @@ export const FloatingLocalVideoLayout = (props) => {
         if (overflowGalleryTiles.length === 0) {
             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, 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, 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));
 };

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

@@ -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/**\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  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[]>([...Array(maxRemoteVideoStreams - activeVideoStreams).keys()]);\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  const layerHostId = useId('layerhost');\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 && 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    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [overflowGalleryTiles.length, isNarrow, /* @conditional-compile-remove(vertical-gallery) */isShort, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition]);\n  const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ?\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 ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem))}>\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) {\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, 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};"]}
+{"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';\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[]>([...Array(maxRemoteVideoStreams - activeVideoStreams).keys()]);\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  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]);\n  const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ?\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 ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem))}>\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) {\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, 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        {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>}\n        {overflowGallery}\n      </Stack>\n    </Stack>;\n};"]}

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { VideoGalleryRemoteParticipant } from '../../types';
 import { VideoGalleryStyles } from '../VideoGallery';
-import { OverflowGalleryPosition } from '../VideoGallery';
 /**
  * Props for a layout component
  *
@@ -39,10 +38,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

@@ -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 { 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}"]}
+{"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 { 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  /** 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

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import { HorizontalGalleryStyles } from '../HorizontalGallery';
-import { VerticalGalleryStyles } from '../VerticalGallery';
-import { OverflowGalleryPosition } from '../VideoGallery';
 /**
  * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
  *
@@ -11,11 +9,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

@@ -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);
-    }
-    /* @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, 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);
 };
 //# sourceMappingURL=OverflowGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { 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}\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} 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}\n    </ResponsiveHorizontalGallery>;\n};"]}
+{"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,CACI,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}\n    </ResponsiveHorizontalGallery>;\n};"]}

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

@@ -6,16 +6,10 @@ import { useMemo } from 'react';
  * @private
  */
 export const useVideoTileContextualMenuProps = (props) => {
-    var _a;
     const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem, toggleAnnouncerString } = props;
     const scalingMode = useMemo(() => {
-        var _a;
-        /* @conditional-compile-remove(pinned-participants) */
-        return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
         return undefined;
-    }, [
-        (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode
-    ]);
+    }, []);
     const contextualMenuProps = useMemo(() => {
         const items = [];
         if (isPinned !== undefined) {

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n  };\n  view?: {\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    remoteParticipant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    disablePinMenuItem,\n    toggleAnnouncerString\n  } = props;\n  const scalingMode = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    return props.remoteParticipant.videoStream?.scalingMode;\n    return undefined;\n  }, [/* @conditional-compile-remove(pinned-participants) */\n  props.remoteParticipant.videoStream?.scalingMode]);\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUnpinParticipant(remoteParticipant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onPinParticipant(remoteParticipant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem,\n          ariaLabel: pinActionString\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        {\n          items.push({\n            key: 'fillRemoteParticipantFrame',\n            text: strings.fillRemoteParticipantFrame,\n            iconProps: {\n              iconName: 'VideoTileScaleFill',\n              styles: {\n                root: {\n                  lineHeight: '1rem',\n                  textAlign: 'center'\n                }\n              }\n            },\n            onClick: () => {\n              view?.updateScalingMode('Crop');\n            },\n            'data-ui-id': 'video-tile-fill-frame',\n            ariaLabel: strings.fillRemoteParticipantFrame\n          });\n        }\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n    return {\n      items,\n      styles: {}\n    };\n  }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, remoteParticipant.userId, remoteParticipant.displayName, disablePinMenuItem, toggleAnnouncerString]);\n  return contextualMenuProps;\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n  };\n  view?: {\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    remoteParticipant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    disablePinMenuItem,\n    toggleAnnouncerString\n  } = props;\n  const scalingMode = useMemo(() => {\n    return undefined;\n  }, []);\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUnpinParticipant(remoteParticipant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onPinParticipant(remoteParticipant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem,\n          ariaLabel: pinActionString\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        {\n          items.push({\n            key: 'fillRemoteParticipantFrame',\n            text: strings.fillRemoteParticipantFrame,\n            iconProps: {\n              iconName: 'VideoTileScaleFill',\n              styles: {\n                root: {\n                  lineHeight: '1rem',\n                  textAlign: 'center'\n                }\n              }\n            },\n            onClick: () => {\n              view?.updateScalingMode('Crop');\n            },\n            'data-ui-id': 'video-tile-fill-frame',\n            ariaLabel: strings.fillRemoteParticipantFrame\n          });\n        }\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n    return {\n      items,\n      styles: {}\n    };\n  }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, remoteParticipant.userId, remoteParticipant.displayName, disablePinMenuItem, toggleAnnouncerString]);\n  return contextualMenuProps;\n};\"../../../../acs-ui-common/src\""]}