@azure/communication-react 1.5.1-alpha-202211250013.0 → 1.5.2-alpha-202301190014.0

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { HorizontalGalleryStyles } from '../HorizontalGallery';
+/**
+ * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
+ *
+ * @private
+ */
+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,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { concatStyleSets } 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}
+ *
+ * @private
+ */
+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(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,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC7G,OAAO,EACL,+BAA+B,EAC/B,sBAAsB,EACtB,sCAAsC,EACtC,sCAAsC,EACvC,MAAM,yDAAyD,CAAC;AAEjE;;;;GAIG;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,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,CAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\nimport {\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 *\n * @private\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    <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  );\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/FloatingLocalVideo.styles.d.ts

@@ -0,0 +1,62 @@
+import { IButtonStyles, IModalStyleProps, IModalStyles, IStackStyles, IStyle, IStyleFunctionOrObject, Theme } from '@fluentui/react';
+import { VideoTileStylesProps } from '../../VideoTile';
+/**
+ * @private
+ */
+export declare const videoGalleryOuterDivStyle: string;
+/**
+ * @private
+ */
+export declare const videoGalleryContainerStyle: IStackStyles;
+/**
+ * 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
+ * Aspect ratio: 16:9
+ */
+export declare const LARGE_FLOATING_MODAL_SIZE_PX: {
+    width: number;
+    height: number;
+};
+/**
+ * @private
+ * z-index to ensure that the local video tile is above the video gallery.
+ */
+export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
+/**
+ * @private
+ */
+export declare const localVideoTileContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyle;
+/**
+ * @private
+ */
+export declare const localVideoTileWithControlsContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStackStyles;
+/**
+ * @private
+ */
+export declare const floatingLocalVideoModalStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
+/**
+ * Padding equal to the amount the modal should stay inside the bounds of the container.
+ * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * @private
+ */
+export declare const localVideoTileOuterPaddingPX = 8;
+/**
+ * @private
+ */
+export declare const floatingLocalVideoTileStyle: VideoTileStylesProps;
+/**
+ * @private
+ */
+export declare const localVideoCameraCycleButtonStyles: (theme: Theme) => IButtonStyles;
+/**
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * @private
+ */
+export declare const localVideoModalStyles: Partial<IModalStyles>;
+//# sourceMappingURL=FloatingLocalVideo.styles.d.ts.map

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

@@ -0,0 +1,118 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { concatStyleSets, mergeStyles } from '@fluentui/react';
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+/**
+ * @private
+ */
+export const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+/**
+ * @private
+ */
+export const videoGalleryContainerStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+/**
+ * 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
+ * Aspect ratio: 16:9
+ */
+export const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
+/**
+ * @private
+ * z-index to ensure that the local video tile is above the video gallery.
+ */
+export const LOCAL_VIDEO_TILE_ZINDEX = 2;
+/**
+ * @private
+ */
+export const localVideoTileContainerStyle = (theme, isNarrow) => {
+    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
+        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
+        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
+};
+/**
+ * @private
+ */
+export const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
+    return concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
+        root: { boxShadow: theme.effects.elevation8 }
+    });
+};
+/**
+ * @private
+ */
+export const floatingLocalVideoModalStyle = (theme, isNarrow) => {
+    return concatStyleSets({
+        main: localVideoTileContainerStyle(theme, isNarrow)
+    }, {
+        main: {
+            boxShadow: theme.effects.elevation8,
+            ':focus-within': {
+                boxShadow: theme.effects.elevation16,
+                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
+            }
+        }
+    }, localVideoModalStyles);
+};
+/**
+ * Padding equal to the amount the modal should stay inside the bounds of the container.
+ * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * @private
+ */
+export const localVideoTileOuterPaddingPX = 8;
+/**
+ * @private
+ */
+export const floatingLocalVideoTileStyle = {
+    root: {
+        position: 'absolute',
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
+        height: '100%',
+        width: '100%'
+    }
+};
+/**
+ * @private
+ */
+export const localVideoCameraCycleButtonStyles = (theme) => {
+    return {
+        root: {
+            position: 'absolute',
+            width: _pxToRem(32),
+            height: _pxToRem(32),
+            right: '0rem',
+            top: '0rem',
+            color: '#FFFFFF',
+            zIndex: 2,
+            background: 'rgba(0,0,0,0.4)',
+            borderRadius: theme.effects.roundedCorner2
+        },
+        rootFocused: {
+            // styles to remove the unwanted white highlight and blue colour after tapping on button.
+            color: '#FFFFFF',
+            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
+        },
+        icon: {
+            paddingLeft: _pxToRem(3),
+            paddingRight: _pxToRem(3),
+            margin: 0
+        },
+        flexContainer: {
+            paddingBottom: _pxToRem(8)
+        }
+    };
+};
+/**
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * @private
+ */
+export const localVideoModalStyles = {
+    keyboardMoveIconContainer: {
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
+    }
+};
+//# sourceMappingURL=FloatingLocalVideo.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  concatStyleSets,\n  IButtonStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStackStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\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 * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };\n\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (theme: Theme, isNarrow?: boolean): IStyle => {\n  return {\n    minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width),\n    minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height),\n    position: 'absolute',\n    bottom: _pxToRem(localVideoTileOuterPaddingPX),\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    ...(theme.rtl\n      ? { left: _pxToRem(localVideoTileOuterPaddingPX) }\n      : { right: _pxToRem(localVideoTileOuterPaddingPX) })\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (theme: Theme, isNarrow?: boolean): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  isNarrow?: boolean\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: localVideoTileContainerStyle(theme, isNarrow)\n    },\n    {\n      main: {\n        boxShadow: theme.effects.elevation8,\n        ':focus-within': {\n          boxShadow: theme.effects.elevation16,\n          border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n        }\n      }\n    },\n    localVideoModalStyles\n  );\n};\n\n/**\n * Padding equal to the amount the modal should stay inside the bounds of the container.\n * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.\n * @private\n */\nexport const localVideoTileOuterPaddingPX = 8;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\n\"../../../../../acs-ui-common/src\""]}

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

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

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

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+export const rootLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%' }
+};
+/**
+ * @private
+ */
+export const innerLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+/**
+ * @private
+ */
+export const layerHostStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    // pointer events for layerHost set to none to make descendants interactive
+    pointerEvents: 'none'
+};
+//# sourceMappingURL=FloatingLocalVideoLayout.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLocalVideoLayout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.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;CAC9D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%' }\n};\n\n/**\n * @private\n */\nexport const innerLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * @private\n */\nexport const layerHostStyle: IStyle = {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  // pointer events for layerHost set to none to make descendants interactive\n  pointerEvents: 'none'\n};\n"]}

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

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

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

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+export const videoGalleryLayoutGap = {
+    childrenGap: '0.5rem'
+};
+//# sourceMappingURL=Layout.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/Layout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiB;IACjD,WAAW,EAAE,QAAQ;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackTokens } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const videoGalleryLayoutGap: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n"]}

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

@@ -0,0 +1,9 @@
+import { IStyle } from '@fluentui/react';
+import { CSSProperties } from 'react';
+/** @private */
+export declare const remoteVideoTileWrapperStyle: CSSProperties;
+/** @private */
+export declare const drawerMenuWrapperStyles: {
+    root: IStyle;
+};
+//# sourceMappingURL=RemoteVideoTile.styles.d.ts.map

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

@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/** @private */
+export const remoteVideoTileWrapperStyle = {
+    height: '100%',
+    width: '100%',
+    position: 'relative'
+};
+/** @private */
+export const drawerMenuWrapperStyles = {
+    root: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        // Any zIndex > 0 will work because this is the only absolutely
+        // positioned element in the container.
+        zIndex: 2
+    }
+};
+//# sourceMappingURL=RemoteVideoTile.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteVideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/RemoteVideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAkB;IACxD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,uBAAuB,GAAqB;IACvD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,+DAA+D;QAC/D,uCAAuC;QACvC,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { CSSProperties } from 'react';\n\n/** @private */\nexport const remoteVideoTileWrapperStyle: CSSProperties = {\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n};\n\n/** @private */\nexport const drawerMenuWrapperStyles: { root: IStyle } = {\n  root: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    // Any zIndex > 0 will work because this is the only absolutely\n    // positioned element in the container.\n    zIndex: 2\n  }\n};\n"]}

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

@@ -0,0 +1,10 @@
+import { IStackStyles } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const scrollableHorizontalGalleryStyles: IStackStyles;
+/**
+ * @private
+ */
+export declare const scrollableHorizontalGalleryContainerStyles: string;
+//# sourceMappingURL=ScrollableHorizontalGallery.style.d.ts.map

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

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { mergeStyles } from '@fluentui/react';
+import { SMALL_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
+import { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_STYLE } from './VideoGalleryResponsiveHorizontalGallery.styles';
+/**
+ * @private
+ */
+export const scrollableHorizontalGalleryStyles = {
+    root: {
+        width: '100%',
+        minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        paddingRight: '0.5rem',
+        '> *': SMALL_HORIZONTAL_GALLERY_TILE_STYLE
+    }
+};
+/**
+ * @private
+ */
+export const scrollableHorizontalGalleryContainerStyles = mergeStyles({
+    display: 'flex',
+    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_PX.width}px)`,
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    overflow: 'scroll',
+    '-ms-overflow-style': 'none',
+    'scrollbar-width': 'none',
+    '::-webkit-scrollbar': { display: 'none' }
+});
+//# sourceMappingURL=ScrollableHorizontalGallery.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableHorizontalGallery.style.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,4BAA4B,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EACL,sCAAsC,EACtC,mCAAmC,EACpC,MAAM,kDAAkD,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAiB;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;QAChE,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,mCAAmC;KAC3C;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAAG,WAAW,CAAC;IACpE,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,eAAe,4BAA4B,CAAC,KAAK,KAAK;IAC7D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,QAAQ;IAClB,oBAAoB,EAAE,MAAM;IAC5B,iBAAiB,EAAE,MAAM;IACzB,qBAAqB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles } from '@fluentui/react';\nimport { SMALL_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';\nimport {\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n} from './VideoGalleryResponsiveHorizontalGallery.styles';\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n    paddingRight: '0.5rem',\n    '> *': SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n  }\n};\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryContainerStyles = mergeStyles({\n  display: 'flex',\n  width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_PX.width}px)`,\n  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  overflow: 'scroll',\n  '-ms-overflow-style': 'none',\n  'scrollbar-width': 'none',\n  '::-webkit-scrollbar': { display: 'none' }\n});\n"]}

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

@@ -0,0 +1,45 @@
+import { IStyle } from '@fluentui/react';
+import { HorizontalGalleryStyles } from '../../HorizontalGallery';
+/**
+ * @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,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+import { LARGE_FLOATING_MODAL_SIZE_PX, SMALL_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
+/**
+ * @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;AAEnD,OAAO,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,MAAM,6BAA6B,CAAC;AAEzG;;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';\nimport { LARGE_FLOATING_MODAL_SIZE_PX, SMALL_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';\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/useVideoStreamLifecycleMaintainer.d.ts

@@ -17,7 +17,7 @@ export interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLif
  *
  * @private
  */
-export declare const useLocalVideoStreamLifecycleMaintainer: (props: LocalVideoStreamLifecycleMaintainerProps) => void;
+export declare const useLocalVideoStreamLifecycleMaintainer: (props: LocalVideoStreamLifecycleMaintainerProps) => CreateVideoStreamViewResult | undefined;
 /** @private */
 export interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {
     onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
@@ -29,5 +29,5 @@ export interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLi
  *
  * @private
  */
-export declare const useRemoteVideoStreamLifecycleMaintainer: (props: RemoteVideoStreamLifecycleMaintainerProps) => void;
+export declare const useRemoteVideoStreamLifecycleMaintainer: (props: RemoteVideoStreamLifecycleMaintainerProps) => CreateVideoStreamViewResult | undefined;
 //# sourceMappingURL=useVideoStreamLifecycleMaintainer.d.ts.map

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 /**
  * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView
  * appropriately based on react lifecycle events and prop changes.
@@ -21,9 +21,13 @@ import { useEffect, useMemo } from 'react';
  */
 const useVideoStreamLifecycleMaintainer = (props) => {
     const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode } = props;
+    const [videoStreamViewResult, setVideoStreamViewResult] = useState();
     useEffect(() => {
+        var _a;
         if (isStreamAvailable && !renderElementExists) {
-            onCreateStreamView === null || onCreateStreamView === void 0 ? void 0 : onCreateStreamView({ isMirrored, scalingMode });
+            (_a = onCreateStreamView === null || onCreateStreamView === void 0 ? void 0 : onCreateStreamView({ isMirrored, scalingMode })) === null || _a === void 0 ? void 0 : _a.then((result) => {
+                result && setVideoStreamViewResult(result);
+            });
         }
         // Always clean up element to make tile up to date and be able to dispose correctly
         return () => {
@@ -54,6 +58,7 @@ const useVideoStreamLifecycleMaintainer = (props) => {
             }
         };
     }, [isScreenSharingOn, onDisposeStreamView]);
+    return videoStreamViewResult;
 };
 /**
  * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams

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

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