@azure/communication-react 1.11.0-beta.1 → 1.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"SpeakerVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,mDAAmD;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,4BAA4B,EAAE,MAAM,oCAAoC,CAAC;AAChJ,mDAAmD;AACnD,OAAO,EAAE,wCAAwC,EAAE,8CAA8C,EAAE,MAAM,oCAAoC,CAAC;AAC9I,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAuB9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW;IACX,mDAAmD,CAAA,YAAY;IAC/D,mDAAmD,CAAA,uBAAuB,GAAG,kBAAkB,EAC/F,wBAAwB,GAAG,EAAE;IAC7B,gDAAgD,CAAA,kBAAkB,EACnE,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;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,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,EACJ,gBAAgB,EAChB,2BAA2B,EAC5B,GAAG,wBAAwB,CAAC;QAC3B,kBAAkB;QAClB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,wBAAwB,CAAC,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;QACxK,sDAAsD,CAAA,wBAAwB;QAC9E,kDAAkD,CAAA,MAAM,EAAE,SAAS;KACpE,CAAC,CAAC;IACH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QACzC,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACrM,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5D,IAAI,CAAC,qBAAqB,IAAI,mBAAmB,EAAE;QACjD,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACrE,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACvP,CAAC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,QAAQ,IAAI,+CAA+C,CAAA,kBAAkB,KAAK,MAAM,EAAE;YAC5F,OAAO,6BAA6B,CAAC;SACtC;QACD,mDAAmD;QACnD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,eAAe,EAAE;YAC5G,OAAO,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,wCAAwC,CAAC;SACvJ;QACD,+CAA+C;QAC/C,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,kBAAkB,EAAE;YAC/G,OAAO,kBAAkB,KAAK,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,6BAA6B,CAAC;SACnH;QACD,OAAO,6BAA6B,CAAC;IACvC,CAAC,EAAE,CAAC,oBAAoB,CAAC,MAAM,EAAE,QAAQ,EAAE,oBAAoB,EAAE,mDAAmD,CAAA,OAAO,EAAE,mDAAmD,CAAA,uBAAuB,EAAE,gDAAgD,CAAA,kBAAkB,CAAC,CAAC,CAAC;IAC9Q,MAAM,0BAA0B,GAAG,mBAAmB,IAAI,oBAAoB,IAAI,mBAAmB,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC,oBAAoB,EAAE,kDAAkD,CAAA,uBAAuB,CAAC,CAAC,IACzR,mBAAmB,CACd,CAAC,CAAC,CAAC,SAAS,CAAC;IACzB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC9D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,oBAAC,eAAe;QACvB,mDAAmD;YAAnD,mDAAmD,CAAC,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,IAAI,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;YAClQ,mDAAmD,CAAC,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;YAClG,mDAAmD,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBAC3I,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,mDAAmD,CAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,mDAAmD,CAAA,uBAAuB,EAAE,kBAAkB,EAAE,mDAAmD,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC;IAC3U,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAChC,0BAA0B;QAC3B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK;QACR,mDAAmD;YAAnD,mDAAmD,CAAC,UAAU,EAAE,uBAAuB,KAAK,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB;YAC7G,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK;YAC7H,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IAClG,SAAS,CACC;YACd,yBAAyB,CAAC,eAAe,EAAE,kDAAkD,CAAA,KAAK,CAAC,uBAAuB,CAAC,CACtH,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,OAA2B,EAAE,eAAwE,EAAsB,EAAE;IAC9J,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 { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileSize } from '../VideoGallery';\nimport { LayoutProps } from './Layout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { OverflowGallery } from './OverflowGallery';\nimport { SMALL_FLOATING_MODAL_SIZE_REM, LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle } from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { GridLayout } from '../GridLayout';\nimport { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link SpeakerVideoLayout}.\n *\n * @private\n */\nexport interface SpeakerVideoLayoutProps 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 * Layout for the gallery mode to highlight the current dominant speaker\n *\n * @private\n */\nexport const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    /* @conditional-compile-remove(vertical-gallery) */parentHeight,\n    /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(click-to-call) */localVideoTileSize\n  } = props;\n  const theme = useTheme();\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */layout: 'speaker'\n  });\n  let activeVideoStreams = 0;\n  const gridTiles = gridParticipants.map(p => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n  const layerHostId = useId('layerhost');\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || /*@conditional-compile-remove(click-to-call) */localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    /* @conditional-compile-remove(vertical-gallery) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    /*@conditional-compile-remove(click-to-call) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, /* @conditional-compile-remove(vertical-gallery) */isShort, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */localVideoTileSize]);\n  const wrappedLocalVideoComponent = localVideoComponent || screenShareComponent && localVideoComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, /* @conditional-compile-remove(gallery-layouts) */overflowGalleryPosition))}>\n        {localVideoComponent}\n      </Stack> : undefined;\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return <OverflowGallery\n    /* @conditional-compile-remove(vertical-gallery) */ isShort={isShort} onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={true} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery}\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles={styles?.verticalGallery}\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition={overflowGalleryPosition} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */isShort, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition, setIndexesToRender, /* @conditional-compile-remove(vertical-gallery) */styles?.verticalGallery, parentWidth]);\n  return <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n    /* @conditional-compile-remove(vertical-gallery) */ horizontal={overflowGalleryPosition === 'verticalRight'} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {/* @conditional-compile-remove(gallery-layouts) */props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>}\n        {overflowGalleryTrampoline(overflowGallery, /* @conditional-compile-remove(gallery-layouts) */props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};"]}
+{"version":3,"file":"SpeakerVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,mDAAmD;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,4BAA4B,EAAE,MAAM,oCAAoC,CAAC;AAChJ,mDAAmD;AACnD,OAAO,EAAE,wCAAwC,EAAE,8CAA8C,EAAE,MAAM,oCAAoC,CAAC;AAC9I,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAkB9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW;IACX,mDAAmD,CAAA,YAAY;IAC/D,mDAAmD,CAAA,uBAAuB,GAAG,kBAAkB,EAC/F,wBAAwB,GAAG,EAAE,EAC9B,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;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,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,EACJ,gBAAgB,EAChB,2BAA2B,EAC5B,GAAG,wBAAwB,CAAC;QAC3B,kBAAkB;QAClB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,wBAAwB,CAAC,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;QACxK,sDAAsD,CAAA,wBAAwB;QAC9E,kDAAkD,CAAA,MAAM,EAAE,SAAS;KACpE,CAAC,CAAC;IACH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QACzC,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACrM,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5D,IAAI,CAAC,qBAAqB,IAAI,mBAAmB,EAAE,CAAC;QAClD,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtC,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACrE,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAAC,CAAC,EAAE,qBAAqB,IAAI,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAC,CAAC;IACvP,CAAC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,6BAA6B,CAAC;QACvC,CAAC;QACD,mDAAmD;QACnD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAC7G,OAAO,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,wCAAwC,CAAC;QACxJ,CAAC;QACD,OAAO,6BAA6B,CAAC;IACvC,CAAC,EAAE,CAAC,oBAAoB,CAAC,MAAM,EAAE,QAAQ,EAAE,oBAAoB,EAAE,mDAAmD,CAAA,OAAO,EAAE,mDAAmD,CAAA,uBAAuB,CAAC,CAAC,CAAC;IAC1M,MAAM,0BAA0B,GAAG,mBAAmB,IAAI,oBAAoB,IAAI,mBAAmB,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC,oBAAoB,EAAE,kDAAkD,CAAA,uBAAuB,CAAC,CAAC,IACzR,mBAAmB,CACd,CAAC,CAAC,CAAC,SAAS,CAAC;IACzB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,oBAAC,eAAe;QACvB,mDAAmD;YAAnD,mDAAmD,CAAC,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,CAAC,CAAC,mBAAmB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;YACnR,mDAAmD,CAAC,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;YAClG,mDAAmD,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBAC3I,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,mDAAmD,CAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,mDAAmD,CAAA,uBAAuB,EAAE,kBAAkB,EAAE,mDAAmD,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAChW,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAChC,0BAA0B;QAC3B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK;QACR,mDAAmD;YAAnD,mDAAmD,CAAC,UAAU,EAAE,uBAAuB,KAAK,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB,IAC/J,kDAAkD;YAAA,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK;YAC7H,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IAClG,SAAS,CACC;YACd,yBAAyB,CAAC,eAAe,EAAE,kDAAkD,CAAA,KAAK,CAAC,uBAAuB,CAAC,CACtH,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,OAA2B,EAAE,eAAwE,EAAsB,EAAE;IAC9J,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 { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { LayoutProps } from './Layout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { OverflowGallery } from './OverflowGallery';\nimport { SMALL_FLOATING_MODAL_SIZE_REM, LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle } from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { GridLayout } from '../GridLayout';\nimport { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link SpeakerVideoLayout}.\n *\n * @private\n */\nexport interface SpeakerVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n}\n\n/**\n * Layout for the gallery mode to highlight the current dominant speaker\n *\n * @private\n */\nexport const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    /* @conditional-compile-remove(vertical-gallery) */parentHeight,\n    /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = []\n  } = props;\n  const theme = useTheme();\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */layout: 'speaker'\n  });\n  let activeVideoStreams = 0;\n  const gridTiles = gridParticipants.map(p => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n  const layerHostId = useId('layerhost');\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow) {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    /* @conditional-compile-remove(vertical-gallery) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, /* @conditional-compile-remove(vertical-gallery) */isShort, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition]);\n  const wrappedLocalVideoComponent = localVideoComponent || screenShareComponent && localVideoComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, /* @conditional-compile-remove(gallery-layouts) */overflowGalleryPosition))}>\n        {localVideoComponent}\n      </Stack> : undefined;\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return <OverflowGallery\n    /* @conditional-compile-remove(vertical-gallery) */ isShort={isShort} onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={!!localVideoComponent} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery}\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles={styles?.verticalGallery}\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition={overflowGalleryPosition} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */isShort, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition, setIndexesToRender, /* @conditional-compile-remove(vertical-gallery) */styles?.verticalGallery, parentWidth, localVideoComponent]);\n  return <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n    /* @conditional-compile-remove(vertical-gallery) */ horizontal={overflowGalleryPosition === 'verticalRight'} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {/* @conditional-compile-remove(gallery-layouts) */props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>}\n        {overflowGalleryTrampoline(overflowGallery, /* @conditional-compile-remove(gallery-layouts) */props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IButtonStyles, IModalStyleProps, IModalStyles, IStackStyles, IStyle, IStyleFunctionOrObject, mergeStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = {\n  width: 3.625,\n  height: 6.5\n};\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = {\n  width: 13.438,\n  height: 7.5\n};\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {\n  width: 9,\n  height: 5.063\n};\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {\n  width: 11,\n  height: 6.25\n};\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}, screenSharePresent?: boolean, overflowGalleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${dockedlocalVideoTileContainerPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: {\n      boxShadow: theme.effects.elevation8\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (theme: Theme, modalSizeRem: {\n  width: number;\n  height: number;\n}): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets({\n    main: mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {\n      bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,\n      right: `${floatinglocalVideoModalInitialPositionGapRem}rem`\n    })\n  }, {\n    main: {\n      boxShadow: theme.effects.elevation8,\n      ':focus-within': {\n        boxShadow: theme.effects.elevation16,\n        border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n      }\n    }\n  }, localVideoModalStyles);\n};\n\n/**\n * Initial position gap of the floating local video modal.\n * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from\n * the bottom and 1rem from the right.\n * @private\n */\nexport const floatinglocalVideoModalInitialPositionGapRem = 1;\n\n/**\n * Padding of the docked local video tile container.\n * @private\n */\nexport const dockedlocalVideoTileContainerPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF',\n      // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2,\n      // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IButtonStyles, IModalStyleProps, IModalStyles, IStackStyles, IStyle, IStyleFunctionOrObject, mergeStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = {\n  width: 3.625,\n  height: 6.5\n};\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = {\n  width: 13.438,\n  height: 7.5\n};\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {\n  width: 9,\n  height: 5.063\n};\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {\n  width: 11,\n  height: 6.25\n};\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}, screenSharePresent?: boolean, overflowGalleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${dockedlocalVideoTileContainerPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: {\n      boxShadow: theme.effects.elevation8\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (theme: Theme, modalSizeRem: {\n  width: number;\n  height: number;\n}): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets({\n    main: mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {\n      bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,\n      right: `${floatinglocalVideoModalInitialPositionGapRem}rem`\n    })\n  }, {\n    main: {\n      boxShadow: theme.effects.elevation8,\n      ':focus-within': {\n        boxShadow: theme.effects.elevation16,\n        border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n      }\n    }\n  }, localVideoModalStyles);\n};\n\n/**\n * Initial position gap of the floating local video modal.\n * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from\n * the bottom and 1rem from the right.\n * @private\n */\nexport const floatinglocalVideoModalInitialPositionGapRem = 1;\n\n/**\n * Padding of the docked local video tile container.\n * @private\n */\nexport const dockedlocalVideoTileContainerPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF',\n      // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2,\n      // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,OAAO,EAAE,8CAA8C,EAAE,6BAA6B,EAAE,wCAAwC,EAAE,MAAM,6BAA6B,CAAC;AAEtK;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,CAAC;CACT,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC5C,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,EAAE;CACV,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAE,OAAgB,EAAU,EAAE;IAC3H,OAAO,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC;QAC3B,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;QACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;QAClG,aAAa,EAAE,QAAQ;KACxB,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC;QACzB,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;QACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,8CAA8C,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;QACnH,aAAa,EAAE,QAAQ;KACxB,CAAC,CAAC,CAAC;QACF,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;QACnD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,wCAAwC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;QAC7G,aAAa,EAAE,QAAQ;KACxB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAyB,EAAE;IAC9E,OAAO,OAAO,CAAC,CAAC,CAAC;QACf,QAAQ,EAAE,iCAAiC;KAC5C,CAAC,CAAC,CAAC;QACF,QAAQ,EAAE,2BAA2B;KACtC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VerticalGalleryStyles } from '../../VerticalGallery';\nimport { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = {\n  minHeight: 5.625,\n  maxHeight: 9,\n  width: 9\n};\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_SIZE_REM = {\n  minHeight: 6.75,\n  maxHeight: 11,\n  width: 11\n};\n\n/**\n * Styles for the VerticalGallery's container set in parent.\n *\n * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n *\n * @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n */\nexport const verticalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean, isShort: boolean): IStyle => {\n  return isNarrow && isShort ? {\n    width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n    height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n    paddingBottom: '0.5rem'\n  } : !isNarrow && isShort ? {\n    width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n    height: shouldFloatLocalVideo ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n    paddingBottom: '0.5rem'\n  } : {\n    width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n    height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n    paddingBottom: '0.5rem'\n  };\n};\n\n/**\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_STYLE = {\n  minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n  minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n  maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  width: '100%',\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_STYLE = {\n  minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n  minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n  maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  width: '100%',\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const verticalGalleryStyle = (isShort: boolean): VerticalGalleryStyles => {\n  return isShort ? {\n    children: SHORT_VERTICAL_GALLERY_TILE_STYLE\n  } : {\n    children: VERTICAL_GALLERY_TILE_STYLE\n  };\n};\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,OAAO,EAAE,8CAA8C,EAAE,6BAA6B,EAAE,wCAAwC,EAAE,MAAM,6BAA6B,CAAC;AAEtK;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,CAAC;CACT,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC5C,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,EAAE;CACV,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAE,OAAgB,EAAU,EAAE;IAC3H,OAAO,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC;QAC3B,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;QACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;QAClG,aAAa,EAAE,QAAQ;KACxB,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC;QACzB,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;QACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,8CAA8C,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;QACnH,aAAa,EAAE,QAAQ;KACxB,CAAC,CAAC,CAAC;QACF,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;QACnD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,wCAAwC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;QAC7G,aAAa,EAAE,QAAQ;KACxB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAyB,EAAE;IAC9E,OAAO,OAAO,CAAC,CAAC,CAAC;QACf,QAAQ,EAAE,iCAAiC;KAC5C,CAAC,CAAC,CAAC;QACF,QAAQ,EAAE,2BAA2B;KACtC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VerticalGalleryStyles } from '../../VerticalGallery';\nimport { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = {\n  minHeight: 5.625,\n  maxHeight: 9,\n  width: 9\n};\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_SIZE_REM = {\n  minHeight: 6.75,\n  maxHeight: 11,\n  width: 11\n};\n\n/**\n * Styles for the VerticalGallery's container set in parent.\n *\n * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n *\n * @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n */\nexport const verticalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean, isShort: boolean): IStyle => {\n  return isNarrow && isShort ? {\n    width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n    height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n    paddingBottom: '0.5rem'\n  } : !isNarrow && isShort ? {\n    width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n    height: shouldFloatLocalVideo ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n    paddingBottom: '0.5rem'\n  } : {\n    width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n    height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n    paddingBottom: '0.5rem'\n  };\n};\n\n/**\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_STYLE = {\n  minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n  minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n  maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  width: '100%',\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_STYLE = {\n  minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n  minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n  maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  width: '100%',\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const verticalGalleryStyle = (isShort: boolean): VerticalGalleryStyles => {\n  return isShort ? {\n    children: SHORT_VERTICAL_GALLERY_TILE_STYLE\n  } : {\n    children: VERTICAL_GALLERY_TILE_STYLE\n  };\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\n\n/** @private */\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n  isStreamAvailable?: boolean;\n  renderElementExists?: boolean;\n  isMirrored?: boolean;\n  scalingMode?: ViewScalingMode;\n  isScreenSharingOn?: boolean;\n}\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateStreamView: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult> | undefined;\n  onDisposeStreamView: () => void | undefined;\n}\n\n/**\n * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n *\n * @remarks\n *\n * Notes on handling changes to scaling mode:\n *\n * Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n *\n * Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n *\n * @private\n */\nconst useVideoStreamLifecycleMaintainer = (props: VideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode\n  } = props;\n  const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult | undefined>();\n  useEffect(() => {\n    if (isStreamAvailable && !renderElementExists) {\n      onCreateStreamView?.({\n        isMirrored,\n        scalingMode\n      })?.then(result => {\n        result && setVideoStreamViewResult(result);\n      });\n    }\n\n    // Always clean up element to make tile up to date and be able to dispose correctly\n    return () => {\n      if (renderElementExists) {\n        // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n        if (!isScreenSharingOn) {\n          onDisposeStreamView?.();\n        }\n      }\n    };\n  }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode]);\n\n  // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n  // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n  // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n  useEffect(() => {\n    return () => {\n      // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n      if (!isScreenSharingOn) {\n        onDisposeStreamView?.();\n      }\n    };\n  }, [isScreenSharingOn, onDisposeStreamView]);\n  return videoStreamViewResult;\n};\n\n/** @private */\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n *\n * @private\n */\nexport const useLocalVideoStreamLifecycleMaintainer = (props: LocalVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateLocalStreamView?.(options);\n  }, [onCreateLocalStreamView]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeLocalStreamView?.();\n  }, [onDisposeLocalStreamView]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n\n/** @private */\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  remoteParticipantId: string;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n *\n * @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (props: RemoteVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    remoteParticipantId,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateRemoteStreamView?.(remoteParticipantId, options);\n  }, [onCreateRemoteStreamView, remoteParticipantId]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeRemoteStreamView?.(remoteParticipantId);\n  }, [onDisposeRemoteStreamView, remoteParticipantId]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};"]}
+{"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\n\n/** @private */\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n  isStreamAvailable?: boolean;\n  renderElementExists?: boolean;\n  isMirrored?: boolean;\n  scalingMode?: ViewScalingMode;\n  isScreenSharingOn?: boolean;\n}\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateStreamView: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult> | undefined;\n  onDisposeStreamView: () => void | undefined;\n}\n\n/**\n * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n *\n * @remarks\n *\n * Notes on handling changes to scaling mode:\n *\n * Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n *\n * Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n *\n * @private\n */\nconst useVideoStreamLifecycleMaintainer = (props: VideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode\n  } = props;\n  const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult | undefined>();\n  useEffect(() => {\n    if (isStreamAvailable && !renderElementExists) {\n      onCreateStreamView?.({\n        isMirrored,\n        scalingMode\n      })?.then(result => {\n        result && setVideoStreamViewResult(result);\n      });\n    }\n\n    // Always clean up element to make tile up to date and be able to dispose correctly\n    return () => {\n      if (renderElementExists) {\n        // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n        if (!isScreenSharingOn) {\n          onDisposeStreamView?.();\n        }\n      }\n    };\n  }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode]);\n\n  // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n  // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n  // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n  useEffect(() => {\n    return () => {\n      // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n      if (!isScreenSharingOn) {\n        onDisposeStreamView?.();\n      }\n    };\n  }, [isScreenSharingOn, onDisposeStreamView]);\n  return videoStreamViewResult;\n};\n\n/** @private */\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n *\n * @private\n */\nexport const useLocalVideoStreamLifecycleMaintainer = (props: LocalVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateLocalStreamView?.(options);\n  }, [onCreateLocalStreamView]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeLocalStreamView?.();\n  }, [onDisposeLocalStreamView]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n\n/** @private */\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  remoteParticipantId: string;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n *\n * @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (props: RemoteVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    remoteParticipantId,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateRemoteStreamView?.(remoteParticipantId, options);\n  }, [onCreateRemoteStreamView, remoteParticipantId]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeRemoteStreamView?.(remoteParticipantId);\n  }, [onDisposeRemoteStreamView, remoteParticipantId]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,sCAAgC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAsB/C,EAAoC,EAAE;;IACrC,MAAM,EACJ,iBAAiB,EACjB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC/B,sDAAsD;QACtD,OAAO,MAAA,KAAK,CAAC,iBAAiB,CAAC,WAAW,0CAAE,WAAW,CAAC;QACxD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE;QACH,MAAA,KAAK,CAAC,iBAAiB,CAAC,WAAW,0CAAE,WAAW;KAAC,CAAC,CAAC;IACnD,MAAM,mBAAmB,GAAqC,OAAO,CAAC,GAAG,EAAE;QACzE,MAAM,KAAK,GAA0B,EAAE,CAAC;QACxC,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,IAAI,QAAQ,IAAI,kBAAkB,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,CAAA,EAAE;gBACpE,IAAI,iBAAiB,GAAuB,SAAS,CAAC;gBACtD,IAAI,qBAAqB,IAAI,OAAO,CAAC,iCAAiC,IAAI,iBAAiB,CAAC,WAAW,EAAE;oBACvG,iBAAiB,GAAG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iCAAiC,EAAE;wBAC5E,eAAe,EAAE,iBAAiB,CAAC,WAAW;qBAC/C,CAAC,CAAC;iBACJ;gBACD,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,OAAO;oBACZ,IAAI,EAAE,OAAO,CAAC,qBAAqB;oBACnC,SAAS,EAAE;wBACT,QAAQ,EAAE,kBAAkB;wBAC5B,MAAM,EAAE;4BACN,IAAI,EAAE;gCACJ,UAAU,EAAE,MAAM;gCAClB,SAAS,EAAE,QAAQ;6BACpB;yBACF;qBACF;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,kBAAkB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAC7C,iBAAiB,KAAI,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,iBAAiB,CAAC,CAAA,CAAC;oBAClE,CAAC;oBACD,YAAY,EAAE,qCAAqC;oBACnD,SAAS,EAAE,iBAAiB;iBAC7B,CAAC,CAAC;aACJ;YACD,IAAI,CAAC,QAAQ,IAAI,gBAAgB,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAA,EAAE;gBACjE,IAAI,eAAe,GAAuB,SAAS,CAAC;gBACpD,IAAI,qBAAqB,IAAI,OAAO,CAAC,sCAAsC,IAAI,iBAAiB,CAAC,WAAW,EAAE;oBAC5G,eAAe,GAAG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sCAAsC,EAAE;wBAC/E,eAAe,EAAE,iBAAiB,CAAC,WAAW;qBAC/C,CAAC,CAAC;iBACJ;gBACD,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,KAAK;oBACV,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC,CAAC,OAAO,CAAC,mBAAmB;oBAChG,SAAS,EAAE;wBACT,QAAQ,EAAE,gBAAgB;wBAC1B,MAAM,EAAE;4BACN,IAAI,EAAE;gCACJ,UAAU,EAAE,MAAM;gCAClB,SAAS,EAAE,QAAQ;6BACpB;yBACF;qBACF;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,gBAAgB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAC3C,eAAe,KAAI,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,eAAe,CAAC,CAAA,CAAC;oBAC9D,CAAC;oBACD,YAAY,EAAE,mCAAmC;oBACjD,QAAQ,EAAE,kBAAkB;oBAC5B,SAAS,EAAE,eAAe;iBAC3B,CAAC,CAAC;aACJ;SACF;QACD,IAAI,WAAW,EAAE;YACf,IAAI,WAAW,KAAK,MAAM,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,2BAA2B,CAAA,EAAE;gBAClE,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,6BAA6B;oBAClC,IAAI,EAAE,OAAO,CAAC,2BAA2B;oBACzC,SAAS,EAAE;wBACT,QAAQ,EAAE,mBAAmB;wBAC7B,MAAM,EAAE;4BACN,IAAI,EAAE;gCACJ,UAAU,EAAE,MAAM;gCAClB,SAAS,EAAE,QAAQ;6BACpB;yBACF;qBACF;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,iBAAiB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBACvD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;oBACD,YAAY,EAAE,yBAAyB;oBACvC,SAAS,EAAE,OAAO,CAAC,2BAA2B;iBAC/C,CAAC,CAAC;aACJ;iBAAM,IAAI,WAAW,KAAK,KAAK,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B,CAAA,EAAE;gBACvE;oBACE,KAAK,CAAC,IAAI,CAAC;wBACT,GAAG,EAAE,4BAA4B;wBACjC,IAAI,EAAE,OAAO,CAAC,0BAA0B;wBACxC,SAAS,EAAE;4BACT,QAAQ,EAAE,oBAAoB;4BAC9B,MAAM,EAAE;gCACN,IAAI,EAAE;oCACJ,UAAU,EAAE,MAAM;oCAClB,SAAS,EAAE,QAAQ;iCACpB;6BACF;yBACF;wBACD,OAAO,EAAE,GAAG,EAAE;4BACZ,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;4BACxD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAClC,CAAC;wBACD,YAAY,EAAE,uBAAuB;wBACrC,SAAS,EAAE,OAAO,CAAC,0BAA0B;qBAC9C,CAAC,CAAC;iBACJ;aACF;SACF;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,OAAO,SAAS,CAAC;SAClB;QACD,OAAO;YACL,KAAK;YACL,MAAM,EAAE,EAAE;YACV,YAAY,EAAE;gBACZ,qBAAqB;aACtB;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAAC,WAAW,EAAE,kBAAkB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAC1M,OAAO,mBAAmB,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n  };\n  view?: {\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    remoteParticipant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString\n  } = props;\n  const scalingMode = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    return props.remoteParticipant.videoStream?.scalingMode;\n    return undefined;\n  }, [/* @conditional-compile-remove(pinned-participants) */\n  props.remoteParticipant.videoStream?.scalingMode]);\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUnpinParticipant(remoteParticipant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onPinParticipant(remoteParticipant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem,\n          ariaLabel: pinActionString\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(remoteParticipant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        {\n          items.push({\n            key: 'fillRemoteParticipantFrame',\n            text: strings.fillRemoteParticipantFrame,\n            iconProps: {\n              iconName: 'VideoTileScaleFill',\n              styles: {\n                root: {\n                  lineHeight: '1rem',\n                  textAlign: 'center'\n                }\n              }\n            },\n            onClick: () => {\n              onUpdateScalingMode?.(remoteParticipant.userId, 'Crop');\n              view?.updateScalingMode('Crop');\n            },\n            'data-ui-id': 'video-tile-fill-frame',\n            ariaLabel: strings.fillRemoteParticipantFrame\n          });\n        }\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n    return {\n      items,\n      styles: {},\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n  }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, remoteParticipant.userId, remoteParticipant.displayName, disablePinMenuItem, toggleAnnouncerString]);\n  return contextualMenuProps;\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n  };\n  view?: {\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    remoteParticipant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString\n  } = props;\n  const scalingMode = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    return props.remoteParticipant.videoStream?.scalingMode;\n    return undefined;\n  }, [/* @conditional-compile-remove(pinned-participants) */\n  props.remoteParticipant.videoStream?.scalingMode]);\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUnpinParticipant(remoteParticipant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onPinParticipant(remoteParticipant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem,\n          ariaLabel: pinActionString\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(remoteParticipant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        {\n          items.push({\n            key: 'fillRemoteParticipantFrame',\n            text: strings.fillRemoteParticipantFrame,\n            iconProps: {\n              iconName: 'VideoTileScaleFill',\n              styles: {\n                root: {\n                  lineHeight: '1rem',\n                  textAlign: 'center'\n                }\n              }\n            },\n            onClick: () => {\n              onUpdateScalingMode?.(remoteParticipant.userId, 'Crop');\n              view?.updateScalingMode('Crop');\n            },\n            'data-ui-id': 'video-tile-fill-frame',\n            ariaLabel: strings.fillRemoteParticipantFrame\n          });\n        }\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n    return {\n      items,\n      styles: {},\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n  }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, remoteParticipant.userId, remoteParticipant.displayName, disablePinMenuItem, toggleAnnouncerString]);\n  return contextualMenuProps;\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,EAAE,oCAAoC,EAAE,8BAA8B,EAAE,MAAM,wDAAwD,CAAC;AAE9I;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAKlD,EAAU,EAAE;IACX,MAAM,EACJ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACZ,GAAG,IAAI,CAAC;IACT,MAAM,aAAa,GAAG,cAAc,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;IACzG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;IACD,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,IAMhD,EAAU,EAAE;IACX,MAAM,EACJ,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACR,GAAG,IAAI,CAAC;IACT,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,CAAC,CAAC;IAC7I,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAE5D;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,MAAM,8BAA8B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC;IACtH,iFAAiF;IACjF,IAAI,gBAAgB,IAAI,8BAA8B,EAAE;QACtD,OAAO,8BAA8B,CAAC;KACvC;IAED;;;;;OAKG;IACH,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC;IAE1E;;;;;OAKG;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';\nimport { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n *\n * @private\n */\nexport const calculateHorizontalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerWidth: number;\n  gapWidthRem: number;\n  buttonWidthRem: number;\n}): number => {\n  const {\n    numberOfChildren,\n    containerWidth,\n    buttonWidthRem,\n    gapWidthRem\n  } = args;\n  const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);\n  const gapWidth = convertRemToPx(gapWidthRem);\n\n  /** First check how many children can fit in containerWidth.\n   *    __________________________________\n   *   |                ||                |\n   *   |                ||                |\n   *   |________________||________________|\n   *   <-----------containerWidth--------->\n   *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n   */\n  const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));\n  // If all children fit then return numberOfChildrenInContainer\n  if (numberOfChildren <= numberOfChildrenInContainer) {\n    return numberOfChildrenInContainer;\n  }\n  const buttonWidth = convertRemToPx(buttonWidthRem);\n\n  /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n   * containerWidth to compute childrenSpace\n   *   <-----------containerWidth--------->\n   *    __________________________________\n   *   | ||             ||             || |\n   *   |<||             ||             ||>|\n   *   |_||_____________||_____________||_|\n   *       <-------childrenSpace------>\n   */\n  const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;\n  // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n  // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n  return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);\n};\n\n/**\n * Helper function to find the number of children for the VerticalGallery on each page.\n *\n * @private\n */\nexport const calculateVerticalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerHeight: number;\n  gapHeightRem: number;\n  controlBarHeight: number;\n  isShort: boolean;\n}): number => {\n  const {\n    numberOfChildren,\n    containerHeight,\n    gapHeightRem,\n    controlBarHeight,\n    isShort\n  } = args;\n  const childMinHeightPx = convertRemToPx(isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);\n  const gapHeightPx = convertRemToPx(gapHeightRem);\n  const controlBarHeightPx = convertRemToPx(controlBarHeight);\n\n  /** First check how many children can fit in containerHeight.\n   *\n   *   _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *    _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *\n   *      <   n/m   >\n   *\n   * number of children = container height - (2* gap height + button height) / childMinHeight\n   *\n   * we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them\n   * to fill in the space as much as possible\n   *\n   * First we will find the max number of children without any controls we can fit.\n   */\n\n  const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));\n  // if all of the children fit in the container just return the number of children\n  if (numberOfChildren <= maxNumberOfChildrenInContainer) {\n    return maxNumberOfChildrenInContainer;\n  }\n\n  /**\n   * For the pagination we know the container height, the height of the button bar and the 2 times the gap\n   * height, top tile and bottom tile above control bar. So the child space is calculated as:\n   *\n   *      space = height - controlbar - (2 * gap)\n   */\n  const childSpace = containerHeight - controlBarHeightPx - 2 * gapHeightPx;\n\n  /**\n   * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.\n   * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.\n   *\n   * We want to always return at least one video tile if there are children present.So we take the max.\n   */\n  return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);\n};\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,EAAE,oCAAoC,EAAE,8BAA8B,EAAE,MAAM,wDAAwD,CAAC;AAE9I;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAKlD,EAAU,EAAE;IACX,MAAM,EACJ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACZ,GAAG,IAAI,CAAC;IACT,MAAM,aAAa,GAAG,cAAc,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;IACzG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE,CAAC;QACpD,OAAO,2BAA2B,CAAC;IACrC,CAAC;IACD,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,IAMhD,EAAU,EAAE;IACX,MAAM,EACJ,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACR,GAAG,IAAI,CAAC;IACT,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,CAAC,CAAC;IAC7I,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAE5D;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,MAAM,8BAA8B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC;IACtH,iFAAiF;IACjF,IAAI,gBAAgB,IAAI,8BAA8B,EAAE,CAAC;QACvD,OAAO,8BAA8B,CAAC;IACxC,CAAC;IAED;;;;;OAKG;IACH,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC;IAE1E;;;;;OAKG;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';\nimport { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n *\n * @private\n */\nexport const calculateHorizontalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerWidth: number;\n  gapWidthRem: number;\n  buttonWidthRem: number;\n}): number => {\n  const {\n    numberOfChildren,\n    containerWidth,\n    buttonWidthRem,\n    gapWidthRem\n  } = args;\n  const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);\n  const gapWidth = convertRemToPx(gapWidthRem);\n\n  /** First check how many children can fit in containerWidth.\n   *    __________________________________\n   *   |                ||                |\n   *   |                ||                |\n   *   |________________||________________|\n   *   <-----------containerWidth--------->\n   *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n   */\n  const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));\n  // If all children fit then return numberOfChildrenInContainer\n  if (numberOfChildren <= numberOfChildrenInContainer) {\n    return numberOfChildrenInContainer;\n  }\n  const buttonWidth = convertRemToPx(buttonWidthRem);\n\n  /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n   * containerWidth to compute childrenSpace\n   *   <-----------containerWidth--------->\n   *    __________________________________\n   *   | ||             ||             || |\n   *   |<||             ||             ||>|\n   *   |_||_____________||_____________||_|\n   *       <-------childrenSpace------>\n   */\n  const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;\n  // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n  // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n  return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);\n};\n\n/**\n * Helper function to find the number of children for the VerticalGallery on each page.\n *\n * @private\n */\nexport const calculateVerticalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerHeight: number;\n  gapHeightRem: number;\n  controlBarHeight: number;\n  isShort: boolean;\n}): number => {\n  const {\n    numberOfChildren,\n    containerHeight,\n    gapHeightRem,\n    controlBarHeight,\n    isShort\n  } = args;\n  const childMinHeightPx = convertRemToPx(isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);\n  const gapHeightPx = convertRemToPx(gapHeightRem);\n  const controlBarHeightPx = convertRemToPx(controlBarHeight);\n\n  /** First check how many children can fit in containerHeight.\n   *\n   *   _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *    _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *\n   *      <   n/m   >\n   *\n   * number of children = container height - (2* gap height + button height) / childMinHeight\n   *\n   * we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them\n   * to fill in the space as much as possible\n   *\n   * First we will find the max number of children without any controls we can fit.\n   */\n\n  const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));\n  // if all of the children fit in the container just return the number of children\n  if (numberOfChildren <= maxNumberOfChildrenInContainer) {\n    return maxNumberOfChildrenInContainer;\n  }\n\n  /**\n   * For the pagination we know the container height, the height of the button bar and the 2 times the gap\n   * height, top tile and bottom tile above control bar. So the child space is calculated as:\n   *\n   *      space = height - controlbar - (2 * gap)\n   */\n  const childSpace = containerHeight - controlBarHeightPx - 2 * gapHeightPx;\n\n  /**\n   * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.\n   * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.\n   *\n   * We want to always return at least one video tile if there are children present.So we take the max.\n   */\n  return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);\n};"]}

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

@@ -43,12 +43,8 @@ const _useOrganizedParticipants = (props) => {
     }
     const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));
     const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipantsOrdered.filter(p => p.state === ('Connecting' || 'Ringing'));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map(p => p.userId));
     visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId) && /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
+        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
         lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
@@ -60,23 +56,17 @@ const _useOrganizedParticipants = (props) => {
         // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
         // we will use the max streams provided to the function to find the max participants that can go in the grid
         // if there are less participants than max streams then we will use all participants including joining in the grid
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse) : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
         return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);
+    }, [isScreenShareActive, maxRemoteVideoStreamsToUse]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = useCallback(() => {
         if (isScreenShareActive && localParticipant) {
             const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return localParticipantPlusOverflow.concat(callingParticipants);
             return localParticipantPlusOverflow;
         }
         else if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
             return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);
         }
         else {
@@ -84,11 +74,9 @@ const _useOrganizedParticipants = (props) => {
             // If there are no video tiles, then assign audio tiles as grid tiles.
             // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
             // overflow should be empty if total participants including calling participants is less than max streams
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current.concat(callingParticipants) : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants) : [];
             return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);
         }
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, localParticipant, maxRemoteVideoStreamsToUse]);
+    }, [isScreenShareActive, localParticipant, maxRemoteVideoStreamsToUse]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
     return {
         gridParticipants,

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

@@ -1 +1 @@
-{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(gallery-layouts) */\n  layout?: VideoGalleryLayout;\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/* @conditional-compile-remove(gallery-layouts) */\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(gallery-layouts) */\n    layout\n  } = props;\n  const calculateMaxRemoteVideoStreams = (): number => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {\n      return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;\n    } else {\n      return maxRemoteVideoStreams;\n    }\n    return maxRemoteVideoStreams;\n  };\n  const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();\n  const videoParticipants = remoteParticipants.filter(p => p.videoStream?.isAvailable);\n  const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;\n    return videoParticipants;\n  };\n  visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : smartDominantSpeakerParticipants({\n    participants: participantsToSortTrampoline(),\n    dominantSpeakers,\n    lastVisibleParticipants: visibleGridParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreamsToUse\n  }).slice(0, maxRemoteVideoStreamsToUse);\n\n  /* @conditional-compile-remove(gallery-layouts) */\n  const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];\n  /* @conditional-compile-remove(gallery-layouts) */\n  if (dominantSpeakerToGrid[0]) {\n    visibleGridParticipants.current = dominantSpeakerToGrid;\n  }\n  const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipantsOrdered.filter(p => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map(p => p.userId));\n  visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId) && /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */!callingParticipantsSet.has(p.userId)),\n    dominantSpeakers: dominantSpeakers,\n    lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n    // we will use the max streams provided to the function to find the max participants that can go in the grid\n    // if there are less participants than max streams then we will use all participants including joining in the grid\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse) : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);\n    return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n  }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);\n  const gridParticipants = getGridParticipants();\n  const getOverflowGalleryRemoteParticipants = useCallback((): (VideoGalleryParticipant | VideoGalleryRemoteParticipant)[] => {\n    if (isScreenShareActive && localParticipant) {\n      const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return localParticipantPlusOverflow.concat(callingParticipants);\n      return localParticipantPlusOverflow;\n    } else if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));\n      return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n      // overflow should be empty if total participants including calling participants is less than max streams\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current.concat(callingParticipants) : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants) : [];\n      return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n    }\n  }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */callingParticipants, isScreenShareActive, localParticipant, maxRemoteVideoStreamsToUse]);\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n  return {\n    gridParticipants,\n    overflowGalleryParticipants: overflowGalleryParticipants\n  };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithPinnedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {});\n\n  // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n  const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n  props.pinnedParticipantUserIds?.forEach(id => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      pinnedParticipants.push(pinnedParticipant);\n    }\n  });\n\n  // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n  const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n  const unpinnedParticipants = props.remoteParticipants.filter(p => !pinnedParticipantUserIdSet.has(p.userId));\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants\n  };\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n  if (pinnedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    overflowGalleryParticipants: props.isScreenShareActive ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n  };\n};\nconst putVideoParticipantsFirst = (remoteParticipants: VideoGalleryRemoteParticipant[]): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach(p => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  /* @conditional-compile-remove(pinned-participants) */\n  return _useOrganizedParticipantsWithPinnedParticipants(args);\n  return _useOrganizedParticipants(args);\n};"]}
+{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(gallery-layouts) */\n  layout?: VideoGalleryLayout;\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/* @conditional-compile-remove(gallery-layouts) */\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(gallery-layouts) */\n    layout\n  } = props;\n  const calculateMaxRemoteVideoStreams = (): number => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {\n      return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;\n    } else {\n      return maxRemoteVideoStreams;\n    }\n    return maxRemoteVideoStreams;\n  };\n  const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();\n  const videoParticipants = remoteParticipants.filter(p => p.videoStream?.isAvailable);\n  const participantsToSortTrampoline = (): VideoGalleryRemoteParticipant[] => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;\n    return videoParticipants;\n  };\n  visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : smartDominantSpeakerParticipants({\n    participants: participantsToSortTrampoline(),\n    dominantSpeakers,\n    lastVisibleParticipants: visibleGridParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreamsToUse\n  }).slice(0, maxRemoteVideoStreamsToUse);\n\n  /* @conditional-compile-remove(gallery-layouts) */\n  const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];\n  /* @conditional-compile-remove(gallery-layouts) */\n  if (dominantSpeakerToGrid[0]) {\n    visibleGridParticipants.current = dominantSpeakerToGrid;\n  }\n  const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId)),\n    dominantSpeakers: dominantSpeakers,\n    lastVisibleParticipants: visibleOverflowGalleryParticipants.current,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n    // we will use the max streams provided to the function to find the max participants that can go in the grid\n    // if there are less participants than max streams then we will use all participants including joining in the grid\n    return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);\n  }, [isScreenShareActive, maxRemoteVideoStreamsToUse]);\n  const gridParticipants = getGridParticipants();\n  const getOverflowGalleryRemoteParticipants = useCallback((): (VideoGalleryParticipant | VideoGalleryRemoteParticipant)[] => {\n    if (isScreenShareActive && localParticipant) {\n      const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      return localParticipantPlusOverflow;\n    } else if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as overflow gallery participants\n      return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n      // overflow should be empty if total participants including calling participants is less than max streams\n      return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);\n    }\n  }, [isScreenShareActive, localParticipant, maxRemoteVideoStreamsToUse]);\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();\n  return {\n    gridParticipants,\n    overflowGalleryParticipants: overflowGalleryParticipants\n  };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithPinnedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {});\n\n  // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n  const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n  props.pinnedParticipantUserIds?.forEach(id => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      pinnedParticipants.push(pinnedParticipant);\n    }\n  });\n\n  // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n  const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n  const unpinnedParticipants = props.remoteParticipants.filter(p => !pinnedParticipantUserIdSet.has(p.userId));\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants\n  };\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n  if (pinnedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    overflowGalleryParticipants: props.isScreenShareActive ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n  };\n};\nconst putVideoParticipantsFirst = (remoteParticipants: VideoGalleryRemoteParticipant[]): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach(p => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  /* @conditional-compile-remove(pinned-participants) */\n  return _useOrganizedParticipantsWithPinnedParticipants(args);\n  return _useOrganizedParticipants(args);\n};"]}

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

@@ -78,7 +78,7 @@ export interface VideoGalleryStrings {
 /**
  * @public
  */
-export declare type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker' | /* @conditional-compile-remove(gallery-layouts) */ 'focusedContent';
+export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker' | /* @conditional-compile-remove(gallery-layouts) */ 'focusedContent';
 /**
  * {@link VideoGallery} Component Styles.
  * @public
@@ -98,13 +98,13 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
  *
  * @public
  */
-export declare type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | /* @conditional-compile-remove(gallery-layouts) */ 'horizontalTop';
+export type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | /* @conditional-compile-remove(gallery-layouts) */ 'horizontalTop';
 /**
  * different modes of the local video tile
  *
- * @beta
+ * @public
  */
-export declare type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
+export type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
 /**
  * Props for {@link VideoGallery}.
  *

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

@@ -85,7 +85,7 @@ export const VideoGallery = (props) => {
     const drawerMenuHostIdFromProp = remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer' ? remoteVideoTileMenu.hostId : undefined;
     /* @conditional-compile-remove(pinned-participants) */
     const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
-    const localTileNotInGrid = !!((layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') && remoteParticipants.length > 0);
+    const localTileNotInGrid = (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') && remoteParticipants.length > 0;
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -115,15 +115,12 @@ export const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
     const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
+    const showLocalVideoTileLabel = !(localTileNotInGrid && isNarrow || /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize === '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
     const localVideoTile = useMemo(() => {
         var _a, _b;
-        /* @conditional-compile-remove(click-to-call) */
-        if (localVideoTileSize === 'hidden') {
-            return undefined;
-        }
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
@@ -139,11 +136,10 @@ export const VideoGallery = (props) => {
             return isNarrow ? '' : strings.localVideoLabel;
         };
         return React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(localTileNotInGrid && isNarrow || /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize === '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default', showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
+            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
                 /* @conditional-compile-remove(raise-hand) */ raisedHand: localParticipant.raisedHand }));
-    }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, strings.localVideoCameraSwitcherLabel, strings.localVideoLabel, strings.localVideoMovementLabel, strings.localVideoSelectedDescription, styles === null || styles === void 0 ? void 0 : styles.localVideo, theme.effects.roundedCorner4,
-        localVideoTileSize,
-        layout]);
+    }, [isNarrow, localParticipant, localVideoCameraCycleButtonProps, localVideoViewOptions, onCreateLocalStreamView, onDisposeLocalStreamView, onRenderAvatar, onRenderLocalVideoTile, localTileNotInGrid, showCameraSwitcherInLocalPreview, showMuteIndicator, strings.localVideoCameraSwitcherLabel, strings.localVideoLabel, strings.localVideoMovementLabel, strings.localVideoSelectedDescription, styles === null || styles === void 0 ? void 0 : styles.localVideo, theme.effects.roundedCorner4, /* @conditional-compile-remove(gallery-layouts) */
+        layout, showLocalVideoTileLabel]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
@@ -193,9 +189,7 @@ export const VideoGallery = (props) => {
             } : remoteVideoViewOptions;
             return remoteVideoViewOptions;
         };
-        return React.createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant && createViewOptions() ? createViewOptions() : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
-            /* @conditional-compile-remove(PSTN-calls) */ participantState: participant.state, 
-            /* @conditional-compile-remove(pinned-participants) */ menuKind: participant.userId === localParticipant.userId ? undefined : remoteVideoTileMenu ? remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual' : undefined, 
+        return React.createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant && createViewOptions() ? createViewOptions() : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, menuKind: participant.userId === localParticipant.userId ? undefined : remoteVideoTileMenu ? remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual' : undefined, 
             /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(pinned-participants) */ onPinParticipant: onPinParticipant, 
             /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant: onUnpinParticipant, 
@@ -221,9 +215,8 @@ export const VideoGallery = (props) => {
         parentWidth: containerWidth,
         parentHeight: containerHeight,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
-    }), [remoteParticipants, localParticipant, screenShareComponent, showCameraSwitcherInLocalPreview, maxRemoteVideoStreams, dominantSpeakers, styles, localVideoTile, containerWidth, containerHeight, onRenderRemoteVideoTile, defaultOnRenderVideoTile, /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */ localVideoTileSize]);
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
+    }), [remoteParticipants, localParticipant, screenShareComponent, showCameraSwitcherInLocalPreview, maxRemoteVideoStreams, dominantSpeakers, styles, localVideoTile, containerWidth, containerHeight, onRenderRemoteVideoTile, defaultOnRenderVideoTile, /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition]);
     const videoGalleryLayout = useMemo(() => {
         /* @conditional-compile-remove(gallery-layouts) */
         if (screenShareParticipant && layout === 'focusedContent') {
@@ -242,7 +235,7 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(pinned-participants) */
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
         id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) },
-        videoGalleryLayout,
+        videoGalleryLayout, /* @conditional-compile-remove(pinned-participants) */
         React.createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" }));
 };
 //# sourceMappingURL=VideoGallery.js.map