@azure/communication-react 1.5.1-beta.1 → 1.5.1-beta.2

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

@@ -15,12 +15,22 @@ export const videoGalleryContainerStyle = {
 /**
  * Small floating modal width and height in rem for small screen
  */
-export const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };
+export const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };
 /**
  * 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 };
+export const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };
+/**
+ * Vertical gallery floating modal width and height in rem
+ * Aspect ratio: 16:9
+ */
+export const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };
+/**
+ * Vertical gallery floating modal width and height in rem
+ * Aspect ratio: 16:9
+ */
+export const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -29,25 +39,31 @@ 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) }));
+export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
+    return {
+        minWidth: `${localVideoTileSizeRem.width}rem`,
+        minHeight: `${localVideoTileSizeRem.height}rem`,
+        position: 'absolute',
+        bottom: `${localVideoTileOuterPaddingRem}rem`,
+        borderRadius: theme.effects.roundedCorner4,
+        overflow: 'hidden',
+        right: `${localVideoTileOuterPaddingRem}rem`
+    };
 };
 /**
  * @private
  */
-export const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
+export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
+    return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
         root: { boxShadow: theme.effects.elevation8 }
     });
 };
 /**
  * @private
  */
-export const floatingLocalVideoModalStyle = (theme, isNarrow) => {
+export const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return concatStyleSets({
-        main: localVideoTileContainerStyle(theme, isNarrow)
+        main: localVideoTileContainerStyle(theme, modalSizeRem)
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -60,10 +76,10 @@ export const floatingLocalVideoModalStyle = (theme, isNarrow) => {
 };
 /**
  * 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.
+ * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
  * @private
  */
-export const localVideoTileOuterPaddingPX = 8;
+export const localVideoTileOuterPaddingRem = 0.5;
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../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: 58, height: 104 };\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\""]}
+{"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_REM = { width: 3.625, height: 6.5 };\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };\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 = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number }\n): IStyle => {\n  return {\n    minWidth: `${localVideoTileSizeRem.width}rem`,\n    minHeight: `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: `${localVideoTileOuterPaddingRem}rem`,\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${localVideoTileOuterPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number }\n): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  modalSizeRem: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: localVideoTileContainerStyle(theme, modalSizeRem)\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 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.\n * @private\n */\nexport const localVideoTileOuterPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // 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/ScrollableHorizontalGallery.style.js

@@ -1,7 +1,7 @@
 // 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_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
 import { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_STYLE } from './VideoGalleryResponsiveHorizontalGallery.styles';
 /**
  * @private
@@ -19,7 +19,7 @@ export const scrollableHorizontalGalleryStyles = {
  */
 export const scrollableHorizontalGalleryContainerStyles = mergeStyles({
     display: 'flex',
-    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_PX.width}px)`,
+    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
     minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
     overflow: 'scroll',
     '-ms-overflow-style': 'none',

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

@@ -1 +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"]}
+{"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,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAC5E,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,6BAA6B,CAAC,KAAK,MAAM;IAC/D,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_REM } 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_REM.width}rem)`,\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

@@ -22,7 +22,8 @@ export declare const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
  */
 export declare const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
     height: number;
-    width: number;
+    minWidth: number;
+    maxWidth: number;
 };
 /**
  * @private
@@ -41,5 +42,7 @@ export declare const LARGE_HORIZONTAL_GALLERY_TILE_STYLE: {
     minWidth: string;
     maxHeight: string;
     maxWidth: string;
+    width: string;
+    height: string;
 };
 //# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.d.ts.map

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

@@ -1,7 +1,6 @@
 // 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';
+import { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
 /**
  * @private
  */
@@ -12,8 +11,8 @@ export const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow)
             : `${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)})`
+                ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`
+                : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`
             : '100%',
         paddingRight: '0.5rem'
     };
@@ -35,7 +34,7 @@ export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5
  * Large horizontal gallery tile size in rem
  * @private
  */
-export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
+export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };
 /**
  * @private
  */
@@ -50,8 +49,10 @@ export const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
  */
 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`,
+    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,
     maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,
+    width: '100%',
+    height: '100%'
 };
 //# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.js.map

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

@@ -1 +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;AAElF;;;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: 6.5, width: 6.5 };\n\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\""]}
+{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAE3G;;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,6BAA6B,CAAC,KAAK,MAAM;gBAC1D,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;YAC5D,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;AAElF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEtG;;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,QAAQ,KAAK;IACjE,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } 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% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`\n        : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`\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: 6.5, width: 6.5 };\n\n/**\n * Large horizontal gallery tile size in rem\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };\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.minWidth}rem`,\n  maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,\n  width: '100%',\n  height: '100%'\n};\n"]}

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

@@ -0,0 +1,64 @@
+import { IStyle } from '@fluentui/react';
+import { VerticalGalleryStyles } from '../../VerticalGallery';
+/**
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
+ */
+export declare const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM: {
+    minHeight: number;
+    maxHeight: number;
+    width: number;
+};
+/**
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
+ */
+export declare const VERTICAL_GALLERY_TILE_SIZE_REM: {
+    minHeight: number;
+    maxHeight: number;
+    width: number;
+};
+/**
+ * Styles for the VerticalGallery's container set in parent.
+ *
+ * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.
+ *
+ * @param shouldFloatLocalVideo whether rendered in floating layout or not
+ * @returns Style set for VerticalGallery container.
+ */
+export declare const verticalGalleryContainerStyle: (shouldFloatLocalVideo: boolean, isNarrow: boolean, isShort: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const SHORT_VERTICAL_GALLERY_TILE_STYLE: {
+    minHeight: string;
+    minWidth: string;
+    maxHeight: string;
+    maxWidth: string;
+    width: string;
+    height: string;
+};
+/**
+ * @private
+ */
+export declare const VERTICAL_GALLERY_TILE_STYLE: {
+    minHeight: string;
+    minWidth: string;
+    maxHeight: string;
+    maxWidth: string;
+    width: string;
+    height: string;
+};
+/**
+ * @private
+ */
+export declare const verticalGalleryStyle: (isShort: boolean) => VerticalGalleryStyles;
+//# sourceMappingURL=VideoGalleryResponsiveVerticalGallery.styles.d.ts.map

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

@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
+/**
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
+ */
+export const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };
+/**
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
+ */
+export const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width: 11 };
+/**
+ * Styles for the VerticalGallery's container set in parent.
+ *
+ * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.
+ *
+ * @param shouldFloatLocalVideo whether rendered in floating layout or not
+ * @returns Style set for VerticalGallery container.
+ */
+export const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, isShort) => {
+    return isNarrow && isShort
+        ? {
+            width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
+            paddingBottom: '0.5rem'
+        }
+        : !isNarrow && isShort
+            ? {
+                width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                height: shouldFloatLocalVideo
+                    ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`
+                    : '100%',
+                paddingBottom: '0.5rem'
+            }
+            : {
+                width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
+                paddingBottom: '0.5rem'
+            };
+};
+/**
+ * @private
+ */
+export const SHORT_VERTICAL_GALLERY_TILE_STYLE = {
+    minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,
+    minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,
+    maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    width: '100%',
+    height: '100%'
+};
+/**
+ * @private
+ */
+export const VERTICAL_GALLERY_TILE_STYLE = {
+    minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,
+    minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,
+    maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    width: '100%',
+    height: '100%'
+};
+/**
+ * @private
+ */
+export const verticalGalleryStyle = (isShort) => {
+    return isShort ? { children: SHORT_VERTICAL_GALLERY_TILE_STYLE } : { children: VERTICAL_GALLERY_TILE_STYLE };
+};
+//# sourceMappingURL=VideoGalleryResponsiveVerticalGallery.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,OAAO,EACL,8CAA8C,EAC9C,6BAA6B,EAC7B,wCAAwC,EACzC,MAAM,6BAA6B,CAAC;AAErC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAEjG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAE5F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,qBAA8B,EAC9B,QAAiB,EACjB,OAAgB,EACR,EAAE;IACV,OAAO,QAAQ,IAAI,OAAO;QACxB,CAAC,CAAC;YACE,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;YACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;YAClG,aAAa,EAAE,QAAQ;SACxB;QACH,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO;YACtB,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;gBACzD,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,eAAe,8CAA8C,CAAC,MAAM,MAAM;oBAC5E,CAAC,CAAC,MAAM;gBACV,aAAa,EAAE,QAAQ;aACxB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;gBACnD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,wCAAwC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;gBAC7G,aAAa,EAAE,QAAQ;aACxB,CAAC;AACR,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAyB,EAAE;IAC9E,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,iCAAiC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,2BAA2B,EAAE,CAAC;AAC/G,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VerticalGalleryStyles } from '../../VerticalGallery';\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  SMALL_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './FloatingLocalVideo.styles';\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width: 11 };\n\n/**\n * Styles for the VerticalGallery's container set in parent.\n *\n * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n *\n * @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n */\nexport const verticalGalleryContainerStyle = (\n  shouldFloatLocalVideo: boolean,\n  isNarrow: boolean,\n  isShort: boolean\n): IStyle => {\n  return isNarrow && isShort\n    ? {\n        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n        height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n        paddingBottom: '0.5rem'\n      }\n    : !isNarrow && isShort\n    ? {\n        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n        height: shouldFloatLocalVideo\n          ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`\n          : '100%',\n        paddingBottom: '0.5rem'\n      }\n    : {\n        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n        height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n        paddingBottom: '0.5rem'\n      };\n};\n\n/**\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_STYLE = {\n  minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n  minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n  maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  width: '100%',\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_STYLE = {\n  minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n  minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n  maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  width: '100%',\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const verticalGalleryStyle = (isShort: boolean): VerticalGalleryStyles => {\n  return isShort ? { children: SHORT_VERTICAL_GALLERY_TILE_STYLE } : { children: VERTICAL_GALLERY_TILE_STYLE };\n};\n\"../../../../../acs-ui-common/src\""]}

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

@@ -0,0 +1,25 @@
+/**
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
+ *
+ * @private
+ */
+export declare const calculateHorizontalChildrenPerPage: (args: {
+    numberOfChildren: number;
+    containerWidth: number;
+    gapWidthRem: number;
+    buttonWidthRem: number;
+}) => number;
+/**
+ * Helper function to find the number of children for the VerticalGallery on each page.
+ *
+ * @private
+ */
+export declare const calculateVerticalChildrenPerPage: (args: {
+    numberOfChildren: number;
+    containerHeight: number;
+    gapHeightRem: number;
+    controlBarHeight: number;
+    isShort: boolean;
+}) => number;
+//# sourceMappingURL=OverflowGalleryUtils.d.ts.map

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

@@ -0,0 +1,94 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { _convertRemToPx as convertRemToPx } from "../../../../../acs-ui-common/src";
+import { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';
+import { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveVerticalGallery.styles';
+/**
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
+ *
+ * @private
+ */
+export const calculateHorizontalChildrenPerPage = (args) => {
+    const { numberOfChildren, containerWidth, buttonWidthRem, gapWidthRem } = args;
+    const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);
+    const gapWidth = convertRemToPx(gapWidthRem);
+    /** First check how many children can fit in containerWidth.
+     *    __________________________________
+     *   |                ||                |
+     *   |                ||                |
+     *   |________________||________________|
+     *   <-----------containerWidth--------->
+     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+     */
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
+    if (numberOfChildren <= numberOfChildrenInContainer) {
+        return numberOfChildrenInContainer;
+    }
+    const buttonWidth = convertRemToPx(buttonWidthRem);
+    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
+     * containerWidth to compute childrenSpace
+     *   <-----------containerWidth--------->
+     *    __________________________________
+     *   | ||             ||             || |
+     *   |<||             ||             ||>|
+     *   |_||_____________||_____________||_|
+     *       <-------childrenSpace------>
+     */
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);
+};
+/**
+ * Helper function to find the number of children for the VerticalGallery on each page.
+ *
+ * @private
+ */
+export const calculateVerticalChildrenPerPage = (args) => {
+    const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight, isShort } = args;
+    const childMinHeightPx = convertRemToPx(isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);
+    const gapHeightPx = convertRemToPx(gapHeightRem);
+    const controlBarHeightPx = convertRemToPx(controlBarHeight);
+    /** First check how many children can fit in containerHeight.
+     *
+     *   _________________
+     *   |                |
+     *   |                |
+     *   |________________|
+     *    _________________
+     *   |                |
+     *   |                |
+     *   |________________|
+     *
+     *      <   n/m   >
+     *
+     * number of children = container height - (2* gap height + button height) / childMinHeight
+     *
+     * we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them
+     * to fill in the space as much as possible
+     *
+     * First we will find the max number of children without any controls we can fit.
+     */
+    const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));
+    // if all of the children fit in the container just return the number of children
+    if (numberOfChildren <= maxNumberOfChildrenInContainer) {
+        return maxNumberOfChildrenInContainer;
+    }
+    /**
+     * For the pagination we know the container height, the height of the button bar and the 2 times the gap
+     * height, top tile and bottom tile above control bar. So the child space is calculated as:
+     *
+     *      space = height - controlbar - (2 * gap)
+     */
+    const childSpace = containerHeight - controlBarHeightPx - 2 * gapHeightPx;
+    /**
+     * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.
+     * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.
+     *
+     * We want to always return at least one video tile if there are children present.So we take the max.
+     */
+    return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);
+};
+//# sourceMappingURL=OverflowGalleryUtils.js.map

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

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

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

@@ -7,20 +7,20 @@ export interface OrganizedParticipantsArgs {
     remoteParticipants: VideoGalleryRemoteParticipant[];
     dominantSpeakers?: string[];
     maxRemoteVideoStreams?: number;
-    maxAudioDominantSpeakers?: number;
+    maxOverflowGalleryDominantSpeakers?: number;
     isScreenShareActive?: boolean;
     pinnedParticipantUserIds?: string[];
 }
 /**
- * A result that defines grid participants and horizontal participants in the VideoGallery
+ * A result that defines grid participants and overflow gallery participants in the VideoGallery
  * @private
  */
 export interface OrganizedParticipantsResult {
     gridParticipants: VideoGalleryParticipant[];
-    horizontalGalleryParticipants: VideoGalleryParticipant[];
+    overflowGalleryParticipants: VideoGalleryParticipant[];
 }
 /**
- * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
 export declare const useOrganizedParticipants: (args: OrganizedParticipantsArgs) => OrganizedParticipantsResult;