@azure/communication-react 1.11.0-alpha-202312100013 → 1.11.0-alpha-202312111717

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\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 {\n  childrenContainerStyle,\n  pageNavigationControlBarContainerStyle,\n  participantPageCounter,\n  leftRightButtonStyles,\n  navIconStyles,\n  rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\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 * @public\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 * @public\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 * @public\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}\n\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: { next: boolean; previous: boolean };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const { children, styles, childrenPerPage, onFetchTilesToRender } = props;\n\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1]);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\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\n  const showButtons = numberOfChildren > childrenPerPage;\n\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({ previous: false, next: false });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({ previous: true, next: false });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({ previous: false, next: true });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n\n  const childContainerStyle = useMemo(() => {\n    return { root: childrenContainerStyle(2) };\n  }, []);\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n          return (\n            <Stack.Item\n              key={i}\n              styles={childrenStyles}\n              /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.verticalGalleryVideoTile}\n            >\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <VerticalGalleryControlBar\n          buttonsDisabled={buttonState}\n          onPreviousButtonClick={onPreviousButtonClick}\n          onNextButtonClick={onNextButtonClick}\n          totalPages={lastPage}\n          currentPage={page}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const strings = useLocale().strings.verticalGallery;\n\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n\n  const controlBarSpacing = { childrenGap: '0.5rem' };\n\n  return (\n    <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton\n        className={previousButtonSyles}\n        onClick={onPreviousButtonClick}\n        disabled={buttonsDisabled?.previous}\n        /* @conditional-compile-remove(vertical-gallery) */\n        ariaLabel={strings.leftNavButtonAriaLabel}\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.overflowGalleryLeftNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.verticalGalleryPageCounter}\n        className={pageCounterStyles}\n      >{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton\n        className={nextButtonsStyles}\n        onClick={onNextButtonClick}\n        disabled={buttonsDisabled?.next}\n        /* @conditional-compile-remove(vertical-gallery) */\n        ariaLabel={strings.rightNavButtonAriaLabel}\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.overflowGalleryRightNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\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 {\n  childrenContainerStyle,\n  pageNavigationControlBarContainerStyle,\n  participantPageCounter,\n  leftRightButtonStyles,\n  navIconStyles,\n  rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\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 * @public\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 * @public\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 * @public\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}\n\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: { next: boolean; previous: boolean };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const { children, styles, childrenPerPage, onFetchTilesToRender } = props;\n\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1]);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\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\n  const showButtons = numberOfChildren > childrenPerPage;\n\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({ previous: false, next: false });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({ previous: true, next: false });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({ previous: false, next: true });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n\n  const childContainerStyle = useMemo(() => {\n    return { root: childrenContainerStyle(2) };\n  }, []);\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n          return (\n            <Stack.Item\n              key={i}\n              styles={childrenStyles}\n              /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.verticalGalleryVideoTile}\n            >\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <VerticalGalleryControlBar\n          buttonsDisabled={buttonState}\n          onPreviousButtonClick={onPreviousButtonClick}\n          onNextButtonClick={onNextButtonClick}\n          totalPages={lastPage}\n          currentPage={page}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const strings = useLocale().strings.verticalGallery;\n\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n\n  const controlBarSpacing = { childrenGap: '0.5rem' };\n\n  return (\n    <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton\n        className={previousButtonSyles}\n        onClick={onPreviousButtonClick}\n        disabled={buttonsDisabled?.previous}\n        /* @conditional-compile-remove(vertical-gallery) */\n        ariaLabel={strings.leftNavButtonAriaLabel}\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.overflowGalleryLeftNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.verticalGalleryPageCounter}\n        className={pageCounterStyles}\n      >{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton\n        className={nextButtonsStyles}\n        onClick={onNextButtonClick}\n        disabled={buttonsDisabled?.next}\n        /* @conditional-compile-remove(vertical-gallery) */\n        ariaLabel={strings.rightNavButtonAriaLabel}\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.overflowGalleryRightNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.d.ts

@@ -44,7 +44,7 @@ export interface _VideoBackgroundEffectsPickerProps {
  * Option for the {@link _VideoBackgroundEffectsPicker}.
  * @internal
  */
-export declare type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
+export type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
 /**
  * Styles for the {@link _VideoBackgroundEffectsPicker}.
  * @internal

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n    string | undefined\n  >(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n  return (\n    <Stack tokens={{ childrenGap: '0.5rem' }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => (\n        <Stack\n          className={mergeStyles(props.styles?.rowRoot)}\n          wrap={props.itemsPerRow === 'wrap'}\n          horizontal\n          key={rowIndex}\n          tokens={{ childrenGap: '0.5rem' }}\n          data-ui-id=\"video-effects-picker-row\"\n        >\n          {options.map((option, i) => {\n            if (i === 0 && rowIndex === 0) {\n              return (\n                <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} focusOnMount={true} />\n              );\n            }\n            return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n          })}\n          {fillCount > 0 &&\n            rowIndex === optionsByRow.length - 1 &&\n            Array.from({ length: fillCount }).map((_, index) => (\n              <Stack\n                key={index}\n                styles={hiddenVideoEffectsItemContainerStyles}\n                data-ui-id=\"video-effects-hidden-item\"\n              />\n            ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n    string | undefined\n  >(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n  return (\n    <Stack tokens={{ childrenGap: '0.5rem' }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => (\n        <Stack\n          className={mergeStyles(props.styles?.rowRoot)}\n          wrap={props.itemsPerRow === 'wrap'}\n          horizontal\n          key={rowIndex}\n          tokens={{ childrenGap: '0.5rem' }}\n          data-ui-id=\"video-effects-picker-row\"\n        >\n          {options.map((option, i) => {\n            if (i === 0 && rowIndex === 0) {\n              return (\n                <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} focusOnMount={true} />\n              );\n            }\n            return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n          })}\n          {fillCount > 0 &&\n            rowIndex === optionsByRow.length - 1 &&\n            Array.from({ length: fillCount }).map((_, index) => (\n              <Stack\n                key={index}\n                styles={hiddenVideoEffectsItemContainerStyles}\n                data-ui-id=\"video-effects-hidden-item\"\n              />\n            ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButton,\n  Icon,\n  IIconProps,\n  IStyle,\n  ITooltipHostProps,\n  mergeStyles,\n  Stack,\n  Text,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\nimport React, { useCallback, useEffect } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Should focus on mounting of the picker item\n   */\n  focusOnMount?: boolean;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n\n  const containerStyles = useCallback(\n    () =>\n      videoEffectsItemContainerStyles({\n        theme,\n        isSelected,\n        disabled,\n        backgroundImage\n      }),\n    [backgroundImage, disabled, isSelected, theme]\n  );\n\n  const componentRef = React.createRef<IButton>();\n\n  useEffect(() => {\n    if (props.focusOnMount && componentRef.current) {\n      componentRef.current.focus();\n    }\n  }, [componentRef, props.focusOnMount]);\n\n  return (\n    <TooltipHost {...props.tooltipProps}>\n      <Stack\n        key={props.itemKey}\n        className={mergeStyles(props.styles?.root)}\n        verticalAlign=\"center\"\n        horizontalAlign=\"center\"\n        data-ui-id={`video-effects-item`}\n        aria-label={props.ariaLabel ?? props.itemKey}\n        aria-disabled={props.disabled}\n      >\n        <DefaultButton\n          styles={containerStyles()}\n          onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n          componentRef={componentRef}\n          autoFocus={props.focusOnMount}\n          onKeyDown={\n            disabled\n              ? undefined\n              : (e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    props.onSelect?.(props.itemKey);\n                  }\n                }\n          }\n        >\n          <Stack horizontalAlign={'center'} tokens={{ childrenGap: '0.15rem' }}>\n            {props.iconProps && (\n              <Stack.Item styles={{ root: props.styles?.iconContainer }}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>\n            )}\n            {props.title && (\n              <Stack.Item styles={{ root: props.styles?.textContainer }}>\n                <Text variant=\"small\">{props.title}</Text>\n              </Stack.Item>\n            )}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButton,\n  Icon,\n  IIconProps,\n  IStyle,\n  ITooltipHostProps,\n  mergeStyles,\n  Stack,\n  Text,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\nimport React, { useCallback, useEffect } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Should focus on mounting of the picker item\n   */\n  focusOnMount?: boolean;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n\n  const containerStyles = useCallback(\n    () =>\n      videoEffectsItemContainerStyles({\n        theme,\n        isSelected,\n        disabled,\n        backgroundImage\n      }),\n    [backgroundImage, disabled, isSelected, theme]\n  );\n\n  const componentRef = React.createRef<IButton>();\n\n  useEffect(() => {\n    if (props.focusOnMount && componentRef.current) {\n      componentRef.current.focus();\n    }\n  }, [componentRef, props.focusOnMount]);\n\n  return (\n    <TooltipHost {...props.tooltipProps}>\n      <Stack\n        key={props.itemKey}\n        className={mergeStyles(props.styles?.root)}\n        verticalAlign=\"center\"\n        horizontalAlign=\"center\"\n        data-ui-id={`video-effects-item`}\n        aria-label={props.ariaLabel ?? props.itemKey}\n        aria-disabled={props.disabled}\n      >\n        <DefaultButton\n          styles={containerStyles()}\n          onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n          componentRef={componentRef}\n          autoFocus={props.focusOnMount}\n          onKeyDown={\n            disabled\n              ? undefined\n              : (e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    props.onSelect?.(props.itemKey);\n                  }\n                }\n          }\n        >\n          <Stack horizontalAlign={'center'} tokens={{ childrenGap: '0.15rem' }}>\n            {props.iconProps && (\n              <Stack.Item styles={{ root: props.styles?.iconContainer }}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>\n            )}\n            {props.title && (\n              <Stack.Item styles={{ root: props.styles?.textContainer }}>\n                <Text variant=\"small\">{props.title}</Text>\n              </Stack.Item>\n            )}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>\n  );\n};\n"]}

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

@@ -5,7 +5,7 @@ import { LayoutProps } from './Layout';
  *
  * @private
  */
-export declare type DefaultLayoutProps = LayoutProps;
+export type DefaultLayoutProps = LayoutProps;
 /**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
  * a grid an overflow gallery.

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../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    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\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 { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'default'\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\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\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      /* @conditional-compile-remove(vertical-gallery) */\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (\n          overflowGallery\n        ) : (\n          <></>\n        )\n      }\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(\n        overflowGallery,\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n      )}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../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,CAAC,uBAAuB,GAAG,kBAAkB,EACjG,GAAG,KAAK,CAAC;IAEV,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,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,wBAAwB,CAAC;QACjF,kBAAkB;QAClB,gBAAgB;QAChB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB;YACtD,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC,wBAAwB,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC;YAC7F,CAAC,CAAC,eAAe,CAAC,OAAO;QAC3B,sDAAsD,CAAC,wBAAwB;QAC/E,kDAAkD,CAAC,MAAM,EAAE,SAAS;KACrE,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QAC3C,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC3G,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,mBAAmB,EAAE,CAAC;QACxB,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtC,CAAC;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ;YAClB,mDAAmD;YACnD,OAAO,EAAE,OAAO,EAChB,qBAAqB,EAAE,KAAK,EAC5B,uBAAuB,EAAE,oBAAoB,EAC7C,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;YAClD,mDAAmD;YACnD,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;YAC9C,mDAAmD;YACnD,uBAAuB,EAAE,uBAAuB,EAChD,oBAAoB,EAAE,kBAAkB,EACxC,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBACrC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EACD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IACJ,CAAC,EAAE;QACD,QAAQ;QACR,mDAAmD,CAAC,OAAO;QAC3D,oBAAoB;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;QACzB,mDAAmD,CAAC,uBAAuB;QAC3E,kBAAkB;QAClB,mDAAmD,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;QAC3E,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,KAAK;IACJ,mDAAmD;;QAAnD,mDAAmD;QACnD,UAAU,EAAE,uBAAuB,KAAK,eAAe,EACvD,MAAM,EAAE,eAAe,EACvB,MAAM,EAAE,qBAAqB;QAG3B,kDAAkD,CAAC,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,CACrG,eAAe,CAChB,CAAC,CAAC,CAAC,CACF,yCAAK,CACN;QAEF,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAoB,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IACrD,SAAS,CACC,CACd;QACA,yBAAyB,CACxB,eAAe;QACf,kDAAkD,CAAC,KAAK,CAAC,uBAAuB,CACjF,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,OAA2B,EAC3B,eAAwE,EACpD,EAAE;IACtB,kDAAkD;IAClD,OAAO,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAK,CAAC;IAC7D,OAAO,OAAO,CAAC;AACjB,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\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 { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'default'\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\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\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      /* @conditional-compile-remove(vertical-gallery) */\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (\n          overflowGallery\n        ) : (\n          <></>\n        )\n      }\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(\n        overflowGallery,\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n      )}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,4BAA4B,EAC5B,4CAA4C,EAC7C,MAAM,oCAAoC,CAAC;AAE5C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EACC,CAAC,WAAW;gBACZ,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC;gBACxC,eAAe,CAAC,4CAA4C,CAAC;YAC/D,CAAC,EACC,CAAC,YAAY;gBACb,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACzC,eAAe,CAAC,4CAA4C,CAAC;SAChE;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,gBAC1B,2BAA2B,IAErC,mBAAmB,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport {\n  floatingLocalVideoModalStyle,\n  floatinglocalVideoModalInitialPositionGapRem\n} from './styles/FloatingLocalVideo.styles';\n\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n  x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n  y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/**\n * @private\n */\nexport interface FloatingLocalVideoProps {\n  // Local video component to make draggable\n  localVideoComponent: JSX.Element;\n  // Element id of layer host to constrain the dragging of local video\n  layerHostId: string;\n  // Parent component width in px\n  parentWidth?: number;\n  // Parent component height in px\n  parentHeight?: number;\n  // Local video width and height in rem\n  localVideoSizeRem: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n  const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n  const theme = useTheme();\n\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      parentWidth && parentHeight\n        ? {\n            // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n            // hence (0,0) is the bottom right of the video gallery.\n            x:\n              -parentWidth +\n              _convertRemToPx(localVideoSizeRem.width) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n            y:\n              -parentHeight +\n              _convertRemToPx(localVideoSizeRem.height) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n          }\n        : undefined,\n    [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n  );\n\n  const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n  const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n  return (\n    <_ModalClone\n      isOpen={true}\n      isModeless={true}\n      dragOptions={DRAG_OPTIONS}\n      styles={modalStyles}\n      layerProps={layerProps}\n      maxDragPosition={modalMaxDragPosition}\n      minDragPosition={modalMinDragPosition}\n      data-ui-id=\"floating-local-video-host\"\n    >\n      {localVideoComponent}\n    </_ModalClone>\n  );\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,4BAA4B,EAC5B,4CAA4C,EAC7C,MAAM,oCAAoC,CAAC;AAE5C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EACC,CAAC,WAAW;gBACZ,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC;gBACxC,eAAe,CAAC,4CAA4C,CAAC;YAC/D,CAAC,EACC,CAAC,YAAY;gBACb,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACzC,eAAe,CAAC,4CAA4C,CAAC;SAChE;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,gBAC1B,2BAA2B,IAErC,mBAAmB,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport {\n  floatingLocalVideoModalStyle,\n  floatinglocalVideoModalInitialPositionGapRem\n} from './styles/FloatingLocalVideo.styles';\n\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n  x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n  y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/**\n * @private\n */\nexport interface FloatingLocalVideoProps {\n  // Local video component to make draggable\n  localVideoComponent: JSX.Element;\n  // Element id of layer host to constrain the dragging of local video\n  layerHostId: string;\n  // Parent component width in px\n  parentWidth?: number;\n  // Parent component height in px\n  parentHeight?: number;\n  // Local video width and height in rem\n  localVideoSizeRem: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n  const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n  const theme = useTheme();\n\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      parentWidth && parentHeight\n        ? {\n            // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n            // hence (0,0) is the bottom right of the video gallery.\n            x:\n              -parentWidth +\n              _convertRemToPx(localVideoSizeRem.width) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n            y:\n              -parentHeight +\n              _convertRemToPx(localVideoSizeRem.height) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n          }\n        : undefined,\n    [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n  );\n\n  const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n  const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n  return (\n    <_ModalClone\n      isOpen={true}\n      isModeless={true}\n      dragOptions={DRAG_OPTIONS}\n      styles={modalStyles}\n      layerProps={layerProps}\n      maxDragPosition={modalMaxDragPosition}\n      minDragPosition={modalMinDragPosition}\n      data-ui-id=\"floating-local-video-host\"\n    >\n      {localVideoComponent}\n    </_ModalClone>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n/* @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\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo'\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\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\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\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\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    /*@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  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(\n              theme,\n              localVideoSizeRem,\n              !!screenShareComponent,\n              /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition\n            )\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        /* @conditional-compile-remove(vertical-gallery) */\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {\n          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (\n            overflowGallery\n          ) : (\n            <></>\n          )\n        }\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(\n          overflowGallery,\n          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}
+{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n/* @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\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo'\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\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\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\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\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    /*@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  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(\n              theme,\n              localVideoSizeRem,\n              !!screenShareComponent,\n              /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition\n            )\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        /* @conditional-compile-remove(vertical-gallery) */\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {\n          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (\n            overflowGallery\n          ) : (\n            <></>\n          )\n        }\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(\n          overflowGallery,\n          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

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

@@ -5,7 +5,7 @@ import { LayoutProps } from './Layout';
  *
  * @private
  */
-export declare type LargeGalleryProps = LayoutProps;
+export type LargeGalleryProps = LayoutProps;
 /**
  * VideoGallery Layout for when user is in a large meeting and wants to see more participants
  *

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

@@ -1 +1 @@
-{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n/* @conditional-compile-remove(gallery-layouts) */\nconst REM_TO_PIXEL = 16;\n/* @conditional-compile-remove(gallery-layouts) */\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): 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(gallery-layouts) */ parentHeight,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom'\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  /* @conditional-compile-remove(gallery-layouts) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n    return maxRemoteVideoStreams;\n  };\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(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'\n  });\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\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\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        /* @conditional-compile-remove(gallery-layouts) */\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(gallery-layouts) */ isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      /* @conditional-compile-remove(vertical-gallery) */\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (\n          overflowGallery\n        ) : (\n          <></>\n        )\n      }\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(\n        overflowGallery,\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n      )}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\n/* @conditional-compile-remove(gallery-layouts) */\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}
+{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n/* @conditional-compile-remove(gallery-layouts) */\nconst REM_TO_PIXEL = 16;\n/* @conditional-compile-remove(gallery-layouts) */\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): 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(gallery-layouts) */ parentHeight,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom'\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  /* @conditional-compile-remove(gallery-layouts) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n    return maxRemoteVideoStreams;\n  };\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(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'\n  });\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\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\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        /* @conditional-compile-remove(gallery-layouts) */\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(gallery-layouts) */ isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      /* @conditional-compile-remove(vertical-gallery) */\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (\n          overflowGallery\n        ) : (\n          <></>\n        )\n      }\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(\n        overflowGallery,\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n      )}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\n/* @conditional-compile-remove(gallery-layouts) */\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,EACvC,2CAA2C,EAC3C,kCAAkC,EAClC,kCAAkC,EACnC,MAAM,kCAAkC,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAyD,EAAE,EAAE;IACvG,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAEnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE;QAC5D,OAAO,IAAI,CAAC;KACb;IAED,MAAM,8BAA8B,GAAG,CACrC,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;QAC3F,oBAAC,KAAK,IACJ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,uCAAuC,CAAC,KAAK,CAAC,EACzD,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;YAE/B,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2CAA2C;gBAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,kCAAkC,CAAC,KAAK,CAAC,GAAI,CACjG;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,kCAAkC,eAAY,QAAQ,IACpE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAClD,CACD,CACF,CACT,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA;QAChD,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB;QACpD,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAC;IAElC,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,yCAAK,IACtG,8BAA8B,CACrB,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../../localization';\nimport { useTheme } from '../../theming';\nimport { VideoGalleryLocalParticipant } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport {\n  screenSharingContainerStyle,\n  screenSharingNotificationContainerStyle,\n  screenSharingNotificationIconContainerStyle,\n  screenSharingNotificationIconStyle,\n  screenSharingNotificationTextStyle\n} from './styles/LocalScreenShare.styles';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo((props: { localParticipant: VideoGalleryLocalParticipant }) => {\n  const { localParticipant } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  if (!localParticipant || !localParticipant.isScreenSharingOn) {\n    return null;\n  }\n\n  const localScreenSharingNotification = (\n    <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingContainerStyle}>\n      <Stack\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        className={screenSharingNotificationContainerStyle(theme)}\n        tokens={{ childrenGap: '1rem' }}\n      >\n        <Stack horizontal verticalAlign=\"center\" className={screenSharingNotificationIconContainerStyle}>\n          <Icon iconName=\"ControlButtonScreenShareStart\" className={screenSharingNotificationIconStyle(theme)} />\n        </Stack>\n        <Text className={screenSharingNotificationTextStyle} aria-live=\"polite\">\n          {locale.strings.videoGallery.screenIsBeingSharedMessage}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n\n  const displayName = !localParticipant?.displayName\n    ? locale.strings.videoGallery.displayNamePlaceholder\n    : localParticipant?.displayName;\n\n  return (\n    <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>\n      {localScreenSharingNotification}\n    </VideoTile>\n  );\n});\n"]}
+{"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,EACvC,2CAA2C,EAC3C,kCAAkC,EAClC,kCAAkC,EACnC,MAAM,kCAAkC,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAyD,EAAE,EAAE;IACvG,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAEnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,8BAA8B,GAAG,CACrC,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;QAC3F,oBAAC,KAAK,IACJ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,uCAAuC,CAAC,KAAK,CAAC,EACzD,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;YAE/B,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2CAA2C;gBAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,kCAAkC,CAAC,KAAK,CAAC,GAAI,CACjG;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,kCAAkC,eAAY,QAAQ,IACpE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAClD,CACD,CACF,CACT,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA;QAChD,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB;QACpD,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAC;IAElC,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,yCAAK,IACtG,8BAA8B,CACrB,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../../localization';\nimport { useTheme } from '../../theming';\nimport { VideoGalleryLocalParticipant } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport {\n  screenSharingContainerStyle,\n  screenSharingNotificationContainerStyle,\n  screenSharingNotificationIconContainerStyle,\n  screenSharingNotificationIconStyle,\n  screenSharingNotificationTextStyle\n} from './styles/LocalScreenShare.styles';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo((props: { localParticipant: VideoGalleryLocalParticipant }) => {\n  const { localParticipant } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  if (!localParticipant || !localParticipant.isScreenSharingOn) {\n    return null;\n  }\n\n  const localScreenSharingNotification = (\n    <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingContainerStyle}>\n      <Stack\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        className={screenSharingNotificationContainerStyle(theme)}\n        tokens={{ childrenGap: '1rem' }}\n      >\n        <Stack horizontal verticalAlign=\"center\" className={screenSharingNotificationIconContainerStyle}>\n          <Icon iconName=\"ControlButtonScreenShareStart\" className={screenSharingNotificationIconStyle(theme)} />\n        </Stack>\n        <Text className={screenSharingNotificationTextStyle} aria-live=\"polite\">\n          {locale.strings.videoGallery.screenIsBeingSharedMessage}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n\n  const displayName = !localParticipant?.displayName\n    ? locale.strings.videoGallery.displayNamePlaceholder\n    : localParticipant?.displayName;\n\n  return (\n    <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>\n      {localScreenSharingNotification}\n    </VideoTile>\n  );\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from '../VerticalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { OverflowGalleryPosition } from '../VideoGallery';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  horizontalGalleryContainerStyle,\n  horizontalGalleryStyle\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _convertPxToRem } from '@internal/acs-ui-common';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport {\n  verticalGalleryContainerStyle,\n  verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n *\n * @private\n */\nexport const OverflowGallery = (props: {\n  shouldFloatLocalVideo?: boolean;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  isNarrow?: boolean;\n  /* @conditional-compile-remove(vertical-gallery) */\n  isShort?: boolean;\n  overflowGalleryElements?: JSX.Element[];\n  horizontalGalleryStyles?: HorizontalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryStyles?: VerticalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n  parentWidth?: number;\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    parentWidth\n  } = props;\n\n  const containerStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n    }\n    return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n  }, [\n    shouldFloatLocalVideo,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition\n  ]);\n\n  const galleryStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n    }\n    return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    horizontalGalleryStyles,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles\n  ]);\n\n  const scrollableHorizontalGalleryContainerStyles = useMemo(() => {\n    if (isNarrow && parentWidth) {\n      return {\n        width: shouldFloatLocalVideo\n          ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`\n          : `${_convertPxToRem(parentWidth) - 1}rem`\n      };\n    }\n    return undefined;\n  }, [isNarrow, parentWidth, shouldFloatLocalVideo]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  if (overflowGalleryPosition === 'verticalRight') {\n    return (\n      <ResponsiveVerticalGallery\n        key=\"responsive-vertical-gallery\"\n        containerStyles={containerStyles}\n        verticalGalleryStyles={galleryStyles as VerticalGalleryStyles}\n        controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n        gapHeightRem={HORIZONTAL_GALLERY_GAP}\n        isShort={isShort}\n        onFetchTilesToRender={onFetchTilesToRender}\n        onChildrenPerPageChange={onChildrenPerPageChange}\n      >\n        {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n      </ResponsiveVerticalGallery>\n    );\n  }\n\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;\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\n    return (\n      <ScrollableHorizontalGallery\n        horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]}\n        onFetchTilesToRender={onFetchTilesToRender}\n        key=\"scrollable-horizontal-gallery\"\n        containerStyles={scrollableHorizontalGalleryContainerStyles}\n      />\n    );\n  }\n\n  return (\n    <ResponsiveHorizontalGallery\n      key=\"responsive-horizontal-gallery\"\n      containerStyles={containerStyles}\n      onFetchTilesToRender={onFetchTilesToRender}\n      horizontalGalleryStyles={galleryStyles}\n      buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n      gapWidthRem={HORIZONTAL_GALLERY_GAP}\n      onChildrenPerPageChange={onChildrenPerPageChange}\n    >\n      {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n    </ResponsiveHorizontalGallery>\n  );\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from '../VerticalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { OverflowGalleryPosition } from '../VideoGallery';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  horizontalGalleryContainerStyle,\n  horizontalGalleryStyle\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _convertPxToRem } from '@internal/acs-ui-common';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport {\n  verticalGalleryContainerStyle,\n  verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n *\n * @private\n */\nexport const OverflowGallery = (props: {\n  shouldFloatLocalVideo?: boolean;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  isNarrow?: boolean;\n  /* @conditional-compile-remove(vertical-gallery) */\n  isShort?: boolean;\n  overflowGalleryElements?: JSX.Element[];\n  horizontalGalleryStyles?: HorizontalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryStyles?: VerticalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n  parentWidth?: number;\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    parentWidth\n  } = props;\n\n  const containerStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n    }\n    return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n  }, [\n    shouldFloatLocalVideo,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition\n  ]);\n\n  const galleryStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n    }\n    return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    horizontalGalleryStyles,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles\n  ]);\n\n  const scrollableHorizontalGalleryContainerStyles = useMemo(() => {\n    if (isNarrow && parentWidth) {\n      return {\n        width: shouldFloatLocalVideo\n          ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`\n          : `${_convertPxToRem(parentWidth) - 1}rem`\n      };\n    }\n    return undefined;\n  }, [isNarrow, parentWidth, shouldFloatLocalVideo]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  if (overflowGalleryPosition === 'verticalRight') {\n    return (\n      <ResponsiveVerticalGallery\n        key=\"responsive-vertical-gallery\"\n        containerStyles={containerStyles}\n        verticalGalleryStyles={galleryStyles as VerticalGalleryStyles}\n        controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n        gapHeightRem={HORIZONTAL_GALLERY_GAP}\n        isShort={isShort}\n        onFetchTilesToRender={onFetchTilesToRender}\n        onChildrenPerPageChange={onChildrenPerPageChange}\n      >\n        {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n      </ResponsiveVerticalGallery>\n    );\n  }\n\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;\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\n    return (\n      <ScrollableHorizontalGallery\n        horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]}\n        onFetchTilesToRender={onFetchTilesToRender}\n        key=\"scrollable-horizontal-gallery\"\n        containerStyles={scrollableHorizontalGalleryContainerStyles}\n      />\n    );\n  }\n\n  return (\n    <ResponsiveHorizontalGallery\n      key=\"responsive-horizontal-gallery\"\n      containerStyles={containerStyles}\n      onFetchTilesToRender={onFetchTilesToRender}\n      horizontalGalleryStyles={galleryStyles}\n      buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n      gapWidthRem={HORIZONTAL_GALLERY_GAP}\n      onChildrenPerPageChange={onChildrenPerPageChange}\n    >\n      {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n    </ResponsiveHorizontalGallery>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAaA,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE;QAClB,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,CAAC,CAAC;KAC9D;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC7E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IACxE,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo(\n  (props: {\n    userId: string;\n    displayName?: string;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isMuted?: boolean;\n    isSpeaking?: boolean;\n    renderElement?: HTMLElement;\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving\n    } = props;\n    const locale = useLocale();\n\n    if (!renderElement) {\n      onCreateRemoteStreamView && onCreateRemoteStreamView(userId);\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n      />\n    );\n  }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAaA,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC7E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IACxE,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo(\n  (props: {\n    userId: string;\n    displayName?: string;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isMuted?: boolean;\n    isSpeaking?: boolean;\n    renderElement?: HTMLElement;\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving\n    } = props;\n    const locale = useLocale();\n\n    if (!renderElement) {\n      onCreateRemoteStreamView && onCreateRemoteStreamView(userId);\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n      />\n    );\n  }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,0CAA0C,EAC1C,iCAAiC,EAClC,MAAM,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAEnF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE;YACxC,oBAAoB,CAAC,YAAY,CAAC,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,eAAe,IACnB,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;QAEnF,oBAAC,KAAK,kBACO,+BAA+B,EAC1C,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iCAAiC,EACzC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,yBAAyB,CACpB,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport {\n  scrollableHorizontalGalleryContainerStyles,\n  scrollableHorizontalGalleryStyles\n} from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n  horizontalGalleryElements?: JSX.Element[];\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  containerStyles?: IStyle;\n}): JSX.Element => {\n  const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;\n\n  useEffect(() => {\n    const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray);\n    }\n  }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n\n  const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n  const { events: dragabbleEvents } = useDraggable(ref);\n\n  return (\n    <div\n      ref={ref}\n      {...dragabbleEvents}\n      className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}\n    >\n      <Stack\n        data-ui-id=\"scrollable-horizontal-gallery\"\n        horizontal={true}\n        styles={scrollableHorizontalGalleryStyles}\n        tokens={{ childrenGap: '0.5rem' }}\n      >\n        {horizontalGalleryElements}\n      </Stack>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,0CAA0C,EAC1C,iCAAiC,EAClC,MAAM,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAEnF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,eAAe,IACnB,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;QAEnF,oBAAC,KAAK,kBACO,+BAA+B,EAC1C,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iCAAiC,EACzC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,yBAAyB,CACpB,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport {\n  scrollableHorizontalGalleryContainerStyles,\n  scrollableHorizontalGalleryStyles\n} from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n  horizontalGalleryElements?: JSX.Element[];\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  containerStyles?: IStyle;\n}): JSX.Element => {\n  const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;\n\n  useEffect(() => {\n    const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray);\n    }\n  }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n\n  const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n  const { events: dragabbleEvents } = useDraggable(ref);\n\n  return (\n    <div\n      ref={ref}\n      {...dragabbleEvents}\n      className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}\n    >\n      <Stack\n        data-ui-id=\"scrollable-horizontal-gallery\"\n        horizontal={true}\n        styles={scrollableHorizontalGalleryStyles}\n        tokens={{ childrenGap: '0.5rem' }}\n      >\n        {horizontalGalleryElements}\n      </Stack>\n    </div>\n  );\n};\n"]}