@azure/communication-react 1.4.3-alpha-202212060013.0 → 1.4.3-alpha-202212070014.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-202212060013.0';
+module.exports = '1.4.3-alpha-202212070014.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-202212060013.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-202212070014.0';\n"]}

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { VideoGalleryRemoteParticipant } from '../../types';
+import { VideoGalleryStyles } from '../VideoGallery';
+/**
+ * Props for {@link DefaultLayout}.
+ *
+ * @private
+ */
+export interface DefaultLayoutProps {
+    /**
+     * Styles for the {@link DefaultLayout}
+     */
+    styles?: Omit<VideoGalleryStyles, 'root'>;
+    /** List of remote video particpants */
+    remoteParticipants?: VideoGalleryRemoteParticipant[];
+    /** Callback to render each remote participant */
+    onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;
+    /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */
+    dominantSpeakers?: string[];
+    /** Component that contains local video content */
+    localVideoComponent?: JSX.Element;
+    /** Component that contains screen share content */
+    screenShareComponent?: JSX.Element;
+    /**
+     * Maximum number of participant remote video streams that is rendered.
+     * @defaultValue 4
+     */
+    maxRemoteVideoStreams?: number;
+    /**
+     * Width of parent element
+     */
+    parentWidth?: number;
+}
+/**
+ * DefaultLayout displays remote participants, local video component, and screen sharing component in
+ * a grid and horizontal gallery.
+ *
+ * @private
+ */
+export declare const DefaultLayout: (props: DefaultLayoutProps) => JSX.Element;
+//# sourceMappingURL=DefaultLayout.d.ts.map

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

@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Stack } from '@fluentui/react';
+import React from 'react';
+import { GridLayout } from '../GridLayout';
+import { isNarrowWidth } from '../utils/responsive';
+import { rootLayoutStyle } from './styles/DefaultLayout.styles';
+import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';
+import { useFloatingLocalVideoLayout } from './videoGalleryUtils';
+/**
+ * DefaultLayout displays remote participants, local video component, and screen sharing component in
+ * a grid and horizontal gallery.
+ *
+ * @private
+ */
+export const DefaultLayout = (props) => {
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+        remoteParticipants,
+        dominantSpeakers,
+        maxRemoteVideoStreams,
+        isScreenShareActive: !!screenShareComponent
+    });
+    let activeVideoStreams = 0;
+    const gridTiles = floatingLocalVideoLayout.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) => {
+        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);
+    });
+    if (localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
+    return (React.createElement(Stack, { horizontal: false, styles: rootLayoutStyle },
+        screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        horizontalGalleryTiles.length > 0 && (React.createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
+};
+//# sourceMappingURL=DefaultLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,uCAAuC,EAAE,MAAM,2CAA2C,CAAC;AACpG,OAAO,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AAiClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,MAAM,wBAAwB,GAAG,2BAA2B,CAAC;QAC3D,kBAAkB;QAClB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;KAC5C,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,wBAAwB,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,sBAAsB,GAAG,wBAAwB,CAAC,6BAA6B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QAC9F,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,mBAAmB,EAAE;QACvB,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe;QAC9C,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAoB,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IACrD,SAAS,CACC,CACd;QACA,sBAAsB,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC,oBAAC,uCAAuC,IACtC,QAAQ,EAAE,QAAQ,EAClB,yBAAyB,EAAE,sBAAsB,EACjD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,GACjC,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\nimport { VideoGalleryRemoteParticipant } from '../../types';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { VideoGalleryStyles } from '../VideoGallery';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\nimport { useFloatingLocalVideoLayout } from './videoGalleryUtils';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport interface DefaultLayoutProps {\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\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  return (\n    <Stack horizontal={false} styles={rootLayoutStyle}>\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {horizontalGalleryTiles.length > 0 && (\n        <VideoGalleryResponsiveHorizontalGallery\n          isNarrow={isNarrow}\n          horizontalGalleryElements={horizontalGalleryTiles}\n          styles={styles?.horizontalGallery}\n        />\n      )}\n    </Stack>\n  );\n};\n"]}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HorizontalGalleryStyles } from '../HorizontalGallery';
+/**
+ * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
+ */
+export declare const VideoGalleryResponsiveHorizontalGallery: (props: {
+    shouldFloatLocalVideo?: boolean;
+    isNarrow?: boolean;
+    horizontalGalleryElements?: JSX.Element[];
+    styles?: HorizontalGalleryStyles;
+}) => JSX.Element;
+//# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.d.ts.map

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

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { concatStyleSets, Stack } from '@fluentui/react';
+import React, { useMemo } from 'react';
+import { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';
+import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';
+import { horizontalGalleryContainerStyle, horizontalGalleryStyle, LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';
+/**
+ * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
+ */
+export const VideoGalleryResponsiveHorizontalGallery = (props) => {
+    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
+    const containerStyles = useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
+    const galleryStyles = useMemo(() => concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
+    return (React.createElement(Stack, { styles: { root: { paddingTop: '0.5rem' } } },
+        React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
+};
+//# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/VideoGalleryResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC7G,OAAO,EACL,+BAA+B,EAC/B,sBAAsB,EACtB,sCAAsC,EACtC,sCAAsC,EACvC,MAAM,yDAAyD,CAAC;AAEjE;;GAEG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,KAKvD,EAAe,EAAE;IAChB,MAAM,EAAE,qBAAqB,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAErG,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,EACtE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAClC,CAAC;IACF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnH,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE;QAC/C,oBAAC,2BAA2B,IAC1B,GAAG,EAAC,+BAA+B,EACnC,eAAe,EAAE,eAAe,EAChC,uBAAuB,EAAE,aAAa,EACtC,aAAa,EACX,QAAQ,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,EAExG,cAAc,EAAE,+BAA+B,EAC/C,WAAW,EAAE,sBAAsB,IAElC,yBAAyB,CACE,CACxB,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\nimport {\n  horizontalGalleryContainerStyle,\n  horizontalGalleryStyle,\n  LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n\n/**\n * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}\n */\nexport const VideoGalleryResponsiveHorizontalGallery = (props: {\n  shouldFloatLocalVideo?: boolean;\n  isNarrow?: boolean;\n  horizontalGalleryElements?: JSX.Element[];\n  styles?: HorizontalGalleryStyles;\n}): JSX.Element => {\n  const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;\n\n  const containerStyles = useMemo(\n    () => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow),\n    [shouldFloatLocalVideo, isNarrow]\n  );\n  const galleryStyles = useMemo(() => concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);\n\n  return (\n    <Stack styles={{ root: { paddingTop: '0.5rem' } }}>\n      <ResponsiveHorizontalGallery\n        key=\"responsive-horizontal-gallery\"\n        containerStyles={containerStyles}\n        horizontalGalleryStyles={galleryStyles}\n        childWidthRem={\n          isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width\n        }\n        buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n        gapWidthRem={HORIZONTAL_GALLERY_GAP}\n      >\n        {horizontalGalleryElements}\n      </ResponsiveHorizontalGallery>\n    </Stack>\n  );\n};\n"]}

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

@@ -0,0 +1,6 @@
+import { IStackStyles } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const rootLayoutStyle: IStackStyles;
+//# sourceMappingURL=DefaultLayout.styles.d.ts.map

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

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+export const rootLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+//# sourceMappingURL=DefaultLayout.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultLayout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/DefaultLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n"]}

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

@@ -0,0 +1,59 @@
+import { IStyle } from '@fluentui/react';
+import { HorizontalGalleryStyles } from '../../HorizontalGallery';
+/**
+ * Small floating modal width and height in rem for small screen
+ */
+export declare const SMALL_FLOATING_MODAL_SIZE_PX: {
+    width: number;
+    height: number;
+};
+/**
+ * Large floating modal width and height in rem for large screen
+ */
+export declare const LARGE_FLOATING_MODAL_SIZE_PX: {
+    width: number;
+    height: number;
+};
+/**
+ * @private
+ */
+export declare const horizontalGalleryContainerStyle: (shouldFloatLocalVideo: boolean, isNarrow: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const horizontalGalleryStyle: (isNarrow: boolean) => HorizontalGalleryStyles;
+/**
+ * Small horizontal gallery tile size in rem
+ * @private
+ */
+export declare const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
+    height: number;
+    width: number;
+};
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+export declare const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
+    height: number;
+    width: number;
+};
+/**
+ * @private
+ */
+export declare const SMALL_HORIZONTAL_GALLERY_TILE_STYLE: {
+    minHeight: string;
+    minWidth: string;
+    maxHeight: string;
+    maxWidth: string;
+};
+/**
+ * @private
+ */
+export declare const LARGE_HORIZONTAL_GALLERY_TILE_STYLE: {
+    minHeight: string;
+    minWidth: string;
+    maxHeight: string;
+    maxWidth: string;
+};
+//# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.d.ts.map

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

@@ -0,0 +1,64 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+/**
+ * Small floating modal width and height in rem for small screen
+ */
+export const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+/**
+ * Large floating modal width and height in rem for large screen
+ */
+export const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
+/**
+ * @private
+ */
+export const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
+    return {
+        minHeight: isNarrow
+            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
+            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        width: shouldFloatLocalVideo
+            ? isNarrow
+                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
+                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
+            : '100%',
+        paddingRight: '0.5rem'
+    };
+};
+/**
+ * @private
+ */
+export const horizontalGalleryStyle = (isNarrow) => {
+    return {
+        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
+    };
+};
+/**
+ * Small horizontal gallery tile size in rem
+ * @private
+ */
+export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
+/**
+ * @private
+ */
+export const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+/**
+ * @private
+ */
+export const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+//# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAGnD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;AAEtE;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAExE;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAU,EAAE;IAC3G,OAAO;QACL,SAAS,EAAE,QAAQ;YACjB,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;YACvD,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;QACzD,KAAK,EAAE,qBAAqB;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,eAAe,QAAQ,CAAC,4BAA4B,CAAC,KAAK,CAAC,GAAG;gBAChE,CAAC,CAAC,eAAe,QAAQ,CAAC,4BAA4B,CAAC,KAAK,CAAC,GAAG;YAClE,CAAC,CAAC,MAAM;QACV,YAAY,EAAE,QAAQ;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAA2B,EAAE;IACnF,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,mCAAmC;KAC/F,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAClF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };\n\n/**\n * Large floating modal width and height in rem for large screen\n */\nexport const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };\n\n/**\n * @private\n */\nexport const horizontalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {\n  return {\n    minHeight: isNarrow\n      ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`\n      : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n    width: shouldFloatLocalVideo\n      ? isNarrow\n        ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`\n        : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`\n      : '100%',\n    paddingRight: '0.5rem'\n  };\n};\n\n/**\n * @private\n */\nexport const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyles => {\n  return {\n    children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE\n  };\n};\n\n/**\n * Small horizontal gallery tile size in rem\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };\n/**\n * Large horizontal gallery tile size in rem\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };\n\n/**\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n/**\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n\"../../../../../acs-ui-common/src\""]}

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

@@ -0,0 +1,17 @@
+import { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../types';
+declare type LayoutResult = {
+    gridParticipants: VideoGalleryParticipant[];
+    horizontalGalleryParticipants: VideoGalleryParticipant[];
+};
+/**
+ * @private
+ */
+export declare const useFloatingLocalVideoLayout: (props: {
+    remoteParticipants: VideoGalleryRemoteParticipant[];
+    dominantSpeakers?: string[];
+    maxRemoteVideoStreams?: number;
+    maxAudioDominantSpeakers?: number;
+    isScreenShareActive?: boolean;
+}) => LayoutResult;
+export {};
+//# sourceMappingURL=videoGalleryUtils.d.ts.map

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

@@ -0,0 +1,68 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+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) => {
+    var _a, _b;
+    const visibleVideoParticipants = useRef([]);
+    const visibleAudioParticipants = useRef([]);
+    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
+    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleVideoParticipants.current,
+        maxDominantSpeakers: maxRemoteVideoStreams
+    }).slice(0, maxRemoteVideoStreams);
+    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleAudioParticipants.current,
+        maxDominantSpeakers: maxAudioDominantSpeakers
+    });
+    const getGridParticipants = useCallback(() => {
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current.concat(callingParticipants);
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current;
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    ]);
+    const gridParticipants = getGridParticipants();
+    const getHorizontalGalleryRemoteParticipants = useCallback(() => {
+        if (isScreenShareActive) {
+            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current);
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.length > 0
+                ? visibleAudioParticipants.current.concat(callingParticipants)
+                : [];
+            return visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];
+        }
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
+    return { gridParticipants, horizontalGalleryParticipants };
+};
+//# sourceMappingURL=videoGalleryUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"videoGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/videoGalleryUtils.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\ntype 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: {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxAudioDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n}): 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    /* @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  ]);\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"]}

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

@@ -8,9 +8,7 @@ import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { GridLayout } from './GridLayout';
 import { _RemoteVideoTile } from './RemoteVideoTile';
-import { ResponsiveHorizontalGallery } from './ResponsiveHorizontalGallery';
-import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from './styles/HorizontalGallery.styles';
-import { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, floatingLocalVideoModalStyle, floatingLocalVideoTileStyle, horizontalGalleryContainerStyle, horizontalGalleryStyle, layerHostStyle, localVideoTileContainerStyle, videoGalleryContainerStyle, videoGalleryOuterDivStyle, localVideoTileOuterPaddingPX, SMALL_FLOATING_MODAL_SIZE_PX, LARGE_FLOATING_MODAL_SIZE_PX } from './styles/VideoGallery.styles';
+import { floatingLocalVideoModalStyle, floatingLocalVideoTileStyle, layerHostStyle, localVideoTileContainerStyle, videoGalleryContainerStyle, videoGalleryOuterDivStyle, localVideoTileOuterPaddingPX, SMALL_FLOATING_MODAL_SIZE_PX, LARGE_FLOATING_MODAL_SIZE_PX } from './styles/VideoGallery.styles';
 import { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';
 import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
 import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
@@ -20,6 +18,8 @@ import { _ModalClone } from './ModalClone/ModalClone';
 import { _LocalVideoTile } from './LocalVideoTile';
 /* @conditional-compile-remove(rooms) */
 import { _usePermissions } from '../permissions';
+import { DefaultLayout } from './VideoGallery/DefaultLayout';
+import { VideoGalleryResponsiveHorizontalGallery } from './VideoGallery/VideoGalleryResponsiveHorizontalGallery';
 /**
  * @private
  * Currently the Calling JS SDK supports up to 4 remote video streams
@@ -189,20 +189,28 @@ export const VideoGallery = (props) => {
     const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_e = screenShareParticipant.screenShareStream) === null || _e === void 0 ? void 0 : _e.isReceiving })));
     const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
     const layerHostId = useId('layerhost');
+    if (layout === 'floatingLocalVideo') {
+        return (React.createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+            shouldFloatLocalVideo &&
+                !shouldFloatNonDraggableLocalVideo &&
+                localVideoTile &&
+                (horizontalGalleryPresent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
+            // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
+            shouldFloatNonDraggableLocalVideo && localVideoTile && remoteParticipants.length > 0 && (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
+                    boxShadow: theme.effects.elevation8,
+                    zIndex: LOCAL_VIDEO_TILE_ZINDEX
+                }) }, localVideoTile)),
+            React.createElement(Stack, { horizontal: false, styles: videoGalleryContainerStyle },
+                screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+                horizontalGalleryPresent && (React.createElement(VideoGalleryResponsiveHorizontalGallery, { shouldFloatLocalVideo: true, isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
+                React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }))));
+    }
+    const screenShareComponent = remoteScreenShareComponent
+        ? remoteScreenShareComponent
+        : localParticipant.isScreenSharingOn
+            ? localScreenShareStreamComponent
+            : undefined;
     return (React.createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
-        shouldFloatLocalVideo &&
-            !shouldFloatNonDraggableLocalVideo &&
-            localVideoTile &&
-            (horizontalGalleryPresent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
-        // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-        shouldFloatNonDraggableLocalVideo && localVideoTile && remoteParticipants.length > 0 && (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
-                boxShadow: theme.effects.elevation8,
-                zIndex: LOCAL_VIDEO_TILE_ZINDEX
-            }) }, localVideoTile)),
-        React.createElement(Stack, { horizontal: false, styles: videoGalleryContainerStyle },
-            screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGalleryPresent && (React.createElement("div", { style: { paddingTop: '0.5rem' } },
-                React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryTiles))),
-            React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }))));
+        React.createElement(DefaultLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, styles: styles })));
 };
 //# sourceMappingURL=VideoGallery.js.map