@azure/communication-react 1.4.3-alpha-202301150014.0 → 1.4.3-alpha-202301180013.0

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.4.3-alpha-202301150014.0';
+module.exports = '1.4.3-alpha-202301180013.0';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-alpha-202301150014.0';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-alpha-202301180013.0';\n"]}

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

@@ -8,7 +8,7 @@ import { isNarrowWidth } from '../utils/responsive';
 import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
 import { rootLayoutStyle } from './styles/DefaultLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { useFloatingLocalVideoLayout } from './utils/videoGalleryLayoutUtils';
+import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
 import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';
 /**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
@@ -17,22 +17,24 @@ import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiv
  * @private
  */
 export const DefaultLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+    const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent
+        isScreenShareActive: !!screenShareComponent,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
-    const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {
+    const gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
-    const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
+    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useFloatingLocalVideoLayout } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid and horizontal gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const floatingLocalVideoLayout = useFloatingLocalVideoLayout({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const horizontalGallery = useMemo(() => {\n    if (horizontalGalleryTiles.length === 0) {\n      return null;\n    }\n    /* @conditional-compile-remove(pinned-participants) */\n    if (isNarrow) {\n      return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n    }\n    return (\n      <VideoGalleryResponsiveHorizontalGallery\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\n        horizontalGalleryElements={horizontalGalleryTiles}\n        styles={styles?.horizontalGallery}\n      />\n    );\n  }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n  return (\n    <Stack horizontal={false} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {horizontalGallery}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid and horizontal gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const horizontalGallery = useMemo(() => {\n    if (horizontalGalleryTiles.length === 0) {\n      return null;\n    }\n    /* @conditional-compile-remove(pinned-participants) */\n    if (isNarrow) {\n      return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n    }\n    return (\n      <VideoGalleryResponsiveHorizontalGallery\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\n        horizontalGalleryElements={horizontalGalleryTiles}\n        styles={styles?.horizontalGallery}\n      />\n    );\n  }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n  return (\n    <Stack horizontal={false} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {horizontalGallery}\n    </Stack>\n  );\n};\n"]}

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

@@ -12,7 +12,7 @@ import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
 import { localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX } from './styles/FloatingLocalVideo.styles';
 import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { useFloatingLocalVideoLayout } from './utils/videoGalleryLayoutUtils';
+import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
 import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';
 /**
  * FloatingLocalVideoLayout displays remote participants and a screen sharing component in
@@ -21,17 +21,19 @@ import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiv
  * @private
  */
 export const FloatingLocalVideoLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight } = props;
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+    const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent
+        isScreenShareActive: !!screenShareComponent,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
-    const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {
+    const gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -41,7 +43,7 @@ export const FloatingLocalVideoLayout = (props) => {
     if (!shouldFloatLocalVideo && localVideoComponent) {
         gridTiles.push(localVideoComponent);
     }
-    const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
+    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useFloatingLocalVideoLayout } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const floatingLocalVideoLayout = useFloatingLocalVideoLayout({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const wrappedLocalVideoComponent =\n    localVideoComponent && shouldFloatLocalVideo ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : horizontalGalleryTiles.length > 0 ? (\n        <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoComponent}</Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          isNarrow={isNarrow}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const horizontalGallery = useMemo(() => {\n    if (horizontalGalleryTiles.length === 0) {\n      return null;\n    }\n    /* @conditional-compile-remove(pinned-participants) */\n    if (isNarrow) {\n      return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n    }\n    return (\n      <VideoGalleryResponsiveHorizontalGallery\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\n        horizontalGalleryElements={horizontalGalleryTiles}\n        styles={styles?.horizontalGallery}\n      />\n    );\n  }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      <Stack horizontal={false} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {horizontalGallery}\n      </Stack>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const wrappedLocalVideoComponent =\n    localVideoComponent && shouldFloatLocalVideo ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : horizontalGalleryTiles.length > 0 ? (\n        <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoComponent}</Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          isNarrow={isNarrow}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const horizontalGallery = useMemo(() => {\n    if (horizontalGalleryTiles.length === 0) {\n      return null;\n    }\n    /* @conditional-compile-remove(pinned-participants) */\n    if (isNarrow) {\n      return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n    }\n    return (\n      <VideoGalleryResponsiveHorizontalGallery\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\n        horizontalGalleryElements={horizontalGalleryTiles}\n        styles={styles?.horizontalGallery}\n      />\n    );\n  }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      <Stack horizontal={false} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {horizontalGallery}\n      </Stack>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n    </Stack>\n  );\n};\n"]}

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

@@ -30,5 +30,9 @@ export interface LayoutProps {
      * Width of parent element
      */
     parentWidth?: number;
+    /**
+     * List of pinned participant userIds
+     */
+    pinnedParticipantUserIds?: string[];
 }
 //# sourceMappingURL=Layout.d.ts.map

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

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

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

@@ -1,36 +1,27 @@
 import { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';
 /**
- * Arguments for {@link useFloatingLocalVideoLayout } to determine grid participants and horizontal participants
+ * Arguments used to determine a {@link OrganizedParticipantsResult}
  * @private
  */
-export interface UseFloatingLocalVideoLayoutArgs {
+export interface OrganizedParticipantsArgs {
     remoteParticipants: VideoGalleryRemoteParticipant[];
     dominantSpeakers?: string[];
     maxRemoteVideoStreams?: number;
     maxAudioDominantSpeakers?: number;
     isScreenShareActive?: boolean;
+    pinnedParticipantUserIds?: string[];
 }
 /**
- * Arguments for {@link usePinnedParticipantLayout } to determine grid participants and horizontal participants
+ * A result that defines grid participants and horizontal participants in the VideoGallery
  * @private
  */
-export interface UsePinnedParticipantLayoutArgs extends UseFloatingLocalVideoLayoutArgs {
-    pinnedParticipantUserIds: string[];
-}
-/**
- * A layout result that defines grid participants and horizontal participants
- * @private
- */
-export interface LayoutResult {
+export interface OrganizedParticipantsResult {
     gridParticipants: VideoGalleryParticipant[];
     horizontalGalleryParticipants: VideoGalleryParticipant[];
 }
 /**
+ * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
  * @private
  */
-export declare const useFloatingLocalVideoLayout: (props: UseFloatingLocalVideoLayoutArgs) => LayoutResult;
-/**
- * @private
- */
-export declare const usePinnedParticipantLayout: (props: UsePinnedParticipantLayoutArgs) => LayoutResult;
+export declare const useOrganizedParticipants: (args: OrganizedParticipantsArgs) => OrganizedParticipantsResult;
 //# sourceMappingURL=videoGalleryLayoutUtils.d.ts.map

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

@@ -4,10 +4,7 @@ import { useCallback, useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
 const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
-/**
- * @private
- */
-export const useFloatingLocalVideoLayout = (props) => {
+const _useOrganizedParticipants = (props) => {
     var _a, _b;
     const visibleVideoParticipants = useRef([]);
     const visibleAudioParticipants = useRef([]);
@@ -69,10 +66,9 @@ export const useFloatingLocalVideoLayout = (props) => {
     const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
     return { gridParticipants, horizontalGalleryParticipants };
 };
-/**
- * @private
- */
-export const usePinnedParticipantLayout = (props) => {
+/* @conditional-compile-remove(pinned-participants) */
+const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
+    var _a;
     // map remote participants by userId
     const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
         map[remoteParticipant.userId] = remoteParticipant;
@@ -82,7 +78,7 @@ export const usePinnedParticipantLayout = (props) => {
     let pinnedParticipantsWithVideoOnCount = 0;
     // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
     const pinnedParticipants = [];
-    props.pinnedParticipantUserIds.forEach((id) => {
+    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
         var _a;
         const pinnedParticipant = remoteParticipantMap[id];
         if (pinnedParticipant) {
@@ -95,22 +91,31 @@ export const usePinnedParticipantLayout = (props) => {
     // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
     const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
     const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
-    const floatingLocalVideoLayoutProps = Object.assign(Object.assign({}, props), { 
+    const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
         // if there are pinned participants then we should only consider unpinned participants
         remoteParticipants: unpinnedParticipants, 
         // if there is a maximum of remote video streams we need to subtract pinned participants with video
         maxRemoteVideoStreams: props.maxRemoteVideoStreams
             ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount
             : undefined });
-    const floatingLocalVideoLayout = useFloatingLocalVideoLayout(floatingLocalVideoLayoutProps);
-    if (props.pinnedParticipantUserIds.length === 0) {
-        return floatingLocalVideoLayout;
+    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
+    if (pinnedParticipants.length === 0) {
+        return useOrganizedParticipantsResult;
     }
     return {
         gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
         horizontalGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
-            : floatingLocalVideoLayout.gridParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
     };
 };
+/**
+ * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * @private
+ */
+export const useOrganizedParticipants = (args) => {
+    /* @conditional-compile-remove(pinned-participants) */
+    return _useOrganizedParticipantsWithPinnedParticipants(args);
+    return _useOrganizedParticipants(args);
+};
 //# sourceMappingURL=videoGalleryLayoutUtils.js.map

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

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

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

@@ -18,8 +18,6 @@ import { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';
 import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';
 /* @conditional-compile-remove(pinned-participants) */
 import { useId } from '@fluentui/react-hooks';
-/* @conditional-compile-remove(pinned-participants) */
-import { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -179,7 +177,6 @@ export const VideoGallery = (props) => {
             : undefined;
     const layoutProps = useMemo(() => ({
         remoteParticipants,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         screenShareComponent,
         showCameraSwitcherInLocalPreview,
         maxRemoteVideoStreams,
@@ -189,7 +186,7 @@ export const VideoGallery = (props) => {
         localVideoComponent: localVideoTile,
         parentWidth: containerWidth,
         parentHeight: containerHeight,
-        isLocalVideoFloating: layout === 'floatingLocalVideo'
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants
     }), [
         remoteParticipants,
         screenShareComponent,
@@ -202,14 +199,9 @@ export const VideoGallery = (props) => {
         containerHeight,
         onRenderRemoteVideoTile,
         defaultOnRenderVideoTile,
-        layout,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants
     ]);
     const videoGalleryLayout = useMemo(() => {
-        /* @conditional-compile-remove(pinned-participants) */
-        if (layoutProps.pinnedParticipants.length > 0) {
-            return React.createElement(PinnedParticipantsLayout, Object.assign({}, layoutProps));
-        }
         if (layout === 'floatingLocalVideo') {
             return React.createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(pinned-participants) */\nimport { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n  kind: 'contextual'\n};\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n  unpinParticipantForMe: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileDrawerMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'drawer';\n  /**\n   * The optional id property provided on an element that the drawer menu should render within when a\n   * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n   * render within the VideoGallery component.\n   */\n  hostId?: string;\n}\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    /* @conditional-compile-remove(pinned-participants) */\n    onPinParticipant: onPinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    onUnpinParticipant: onUnpinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostIdFromProp =\n    remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n      ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n      : undefined;\n  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  /* @conditional-compile-remove(pinned-participants) */\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _usePermissions();\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(rooms) */\n    if (!permissions.cameraButton) {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\n          userId={localParticipant.userId}\n          onCreateLocalStreamView={onCreateLocalStreamView}\n          onDisposeLocalStreamView={onDisposeLocalStreamView}\n          isAvailable={localParticipant?.videoStream?.isAvailable}\n          isMuted={localParticipant.isMuted}\n          renderElement={localParticipant?.videoStream?.renderElement}\n          displayName={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    styles?.localVideo,\n    theme.effects.roundedCorner4,\n    /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n  ]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const onPinParticipant = useCallback(\n    (userId: string) => {\n      if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n        return;\n      }\n      if (!pinnedParticipantsState.includes(userId)) {\n        setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n      }\n      onPinParticipantHandler?.(userId);\n    },\n    [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n  );\n  /* @conditional-compile-remove(pinned-participants) */\n  const onUnpinParticipant = useCallback(\n    (userId: string) => {\n      setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n      onUnpinParticipantHandler?.(userId);\n    },\n    [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n  );\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n\n      /* @conditional-compile-remove(pinned-participants) */\n      const isPinned = pinnedParticipants?.includes(participant.userId);\n\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          /* @conditional-compile-remove(pinned-participants) */\n          menuKind={\n            remoteVideoTileMenuOptions\n              ? remoteVideoTileMenuOptions.kind === 'drawer'\n                ? 'drawer'\n                : 'contextual'\n              : undefined\n          }\n          /* @conditional-compile-remove(pinned-participants) */\n          drawerMenuHostId={drawerMenuHostId}\n          /* @conditional-compile-remove(pinned-participants) */\n          onPinParticipant={onPinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          onUnpinParticipant={onUnpinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,\n      /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n      /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant\n    ]\n  );\n\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo(\n    () => ({\n      remoteParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      isLocalVideoFloating: layout === 'floatingLocalVideo'\n    }),\n    [\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      layout,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n    ]\n  );\n\n  const videoGalleryLayout = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    if (layoutProps.pinnedParticipants.length > 0) {\n      return <PinnedParticipantsLayout {...layoutProps} />;\n    }\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps]);\n\n  return (\n    <div\n      /* @conditional-compile-remove(pinned-participants) */\n      // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n      id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n    >\n      {videoGalleryLayout}\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n  kind: 'contextual'\n};\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n  unpinParticipantForMe: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileDrawerMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'drawer';\n  /**\n   * The optional id property provided on an element that the drawer menu should render within when a\n   * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n   * render within the VideoGallery component.\n   */\n  hostId?: string;\n}\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    /* @conditional-compile-remove(pinned-participants) */\n    onPinParticipant: onPinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    onUnpinParticipant: onUnpinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostIdFromProp =\n    remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n      ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n      : undefined;\n  /* @conditional-compile-remove(pinned-participants) */\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  /* @conditional-compile-remove(pinned-participants) */\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _usePermissions();\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(rooms) */\n    if (!permissions.cameraButton) {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\n          userId={localParticipant.userId}\n          onCreateLocalStreamView={onCreateLocalStreamView}\n          onDisposeLocalStreamView={onDisposeLocalStreamView}\n          isAvailable={localParticipant?.videoStream?.isAvailable}\n          isMuted={localParticipant.isMuted}\n          renderElement={localParticipant?.videoStream?.renderElement}\n          displayName={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    styles?.localVideo,\n    theme.effects.roundedCorner4,\n    /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n  ]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const onPinParticipant = useCallback(\n    (userId: string) => {\n      if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n        return;\n      }\n      if (!pinnedParticipantsState.includes(userId)) {\n        setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n      }\n      onPinParticipantHandler?.(userId);\n    },\n    [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n  );\n  /* @conditional-compile-remove(pinned-participants) */\n  const onUnpinParticipant = useCallback(\n    (userId: string) => {\n      setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n      onUnpinParticipantHandler?.(userId);\n    },\n    [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n  );\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n\n      /* @conditional-compile-remove(pinned-participants) */\n      const isPinned = pinnedParticipants?.includes(participant.userId);\n\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          /* @conditional-compile-remove(pinned-participants) */\n          menuKind={\n            remoteVideoTileMenuOptions\n              ? remoteVideoTileMenuOptions.kind === 'drawer'\n                ? 'drawer'\n                : 'contextual'\n              : undefined\n          }\n          /* @conditional-compile-remove(pinned-participants) */\n          drawerMenuHostId={drawerMenuHostId}\n          /* @conditional-compile-remove(pinned-participants) */\n          onPinParticipant={onPinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          onUnpinParticipant={onUnpinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,\n      /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n      /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant\n    ]\n  );\n\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo(\n    () => ({\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants\n    }),\n    [\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n    ]\n  );\n\n  const videoGalleryLayout = useMemo(() => {\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps]);\n\n  return (\n    <div\n      /* @conditional-compile-remove(pinned-participants) */\n      // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n      id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n    >\n      {videoGalleryLayout}\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.4.3-alpha-202301150014.0",
+  "version": "1.4.3-alpha-202301180013.0",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -87,13 +87,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.4.3-alpha-202301150014.0",
-    "@internal/calling-stateful-client": "1.4.3-alpha-202301150014.0",
-    "@internal/chat-component-bindings": "1.4.3-alpha-202301150014.0",
-    "@internal/chat-stateful-client": "1.4.3-alpha-202301150014.0",
-    "@internal/fake-backends": "1.4.3-alpha-202301150014.0",
-    "@internal/react-components": "1.4.3-alpha-202301150014.0",
-    "@internal/react-composites": "1.4.3-alpha-202301150014.0",
+    "@internal/calling-component-bindings": "1.4.3-alpha-202301180013.0",
+    "@internal/calling-stateful-client": "1.4.3-alpha-202301180013.0",
+    "@internal/chat-component-bindings": "1.4.3-alpha-202301180013.0",
+    "@internal/chat-stateful-client": "1.4.3-alpha-202301180013.0",
+    "@internal/fake-backends": "1.4.3-alpha-202301180013.0",
+    "@internal/react-components": "1.4.3-alpha-202301180013.0",
+    "@internal/react-composites": "1.4.3-alpha-202301180013.0",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",