@azure/communication-react 1.5.1-alpha-202303090014 → 1.5.1-alpha-202303100015

package/dist/dist-cjs/communication-react/index.js

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303090014';
+var telemetryVersion = '1.5.1-alpha-202303100015';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7033,12 +7033,19 @@ const _useContainerHeight = (containerRef) => {
     return height;
 };
 const NARROW_WIDTH_REM = 30;
+const SHORT_HEIGHT_REM = 23.75;
 /**
  * Utility function to determine if container width is narrow
  * @param containerWidthRem  container width in rem
  * @returns boolean
  */
 const isNarrowWidth = (containerWidthRem) => containerWidthRem <= _convertRemToPx(NARROW_WIDTH_REM);
+/**
+ * Utility function to determine if container width is short
+ * @param containerWidthRem  container height in rem
+ * @returns boolean
+ */
+const isShortHeight = (containerHeightRem) => containerHeightRem <= _convertRemToPx(SHORT_HEIGHT_REM);
 
 /**
  * @private
@@ -9695,7 +9702,12 @@ const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };
+const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };
+/**
+ * Vertical gallery floating modal width and height in rem
+ * Aspect ratio: 16:9
+ */
+const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 176, height: 100 };
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -9775,7 +9787,16 @@ const localVideoModalStyles = {
  *
  * @private
  */
-const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };
+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
+ */
+const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width: 11 };
 /**
  * Styles for the VerticalGallery's container set in parent.
  *
@@ -9784,20 +9805,39 @@ const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width:
  * @param shouldFloatLocalVideo whether rendered in floating layout or not
  * @returns Style set for VerticalGallery container.
  */
-const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
-    return isNarrow
+const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, isShort) => {
+    return isNarrow && isShort
         ? {
-            width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
             height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
             paddingBottom: '0.5rem'
         }
-        : {
-            width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
-            height: shouldFloatLocalVideo
-                ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
-                : '100%',
-            paddingBottom: '0.5rem'
-        };
+        : !isNarrow && isShort
+            ? {
+                width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                height: shouldFloatLocalVideo
+                    ? `calc(100% - ${_pxToRem(SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
+                    : '100%',
+                paddingBottom: '0.5rem'
+            }
+            : {
+                width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                height: shouldFloatLocalVideo
+                    ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
+                    : '100%',
+                paddingBottom: '0.5rem'
+            };
+};
+/**
+ * @private
+ */
+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
@@ -9813,8 +9853,8 @@ const VERTICAL_GALLERY_TILE_STYLE = {
 /**
  * @private
  */
-const verticalGalleryStyle = {
-    children: VERTICAL_GALLERY_TILE_STYLE
+const verticalGalleryStyle = (isShort) => {
+    return isShort ? { children: SHORT_VERTICAL_GALLERY_TILE_STYLE } : { children: VERTICAL_GALLERY_TILE_STYLE };
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9826,7 +9866,7 @@ const verticalGalleryStyle = {
  * @beta
  */
 const ResponsiveVerticalGallery = (props) => {
-    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem } = props;
+    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort } = props;
     const containerRef = React.useRef(null);
     const containerHeight = _useContainerHeight(containerRef);
     const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
@@ -9835,7 +9875,8 @@ const ResponsiveVerticalGallery = (props) => {
         numberOfChildren: React__default['default'].Children.count(children),
         containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
         gapHeightRem,
-        controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2
+        controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
+        isShort: isShort !== null && isShort !== void 0 ? isShort : false
     });
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerStyles) },
         React__default['default'].createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles }, children)));
@@ -9844,8 +9885,8 @@ const ResponsiveVerticalGallery = (props) => {
  * Helper function to find the number of children for the VerticalGallery on each page.
  */
 const calculateChildrenPerPage = (args) => {
-    const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight } = args;
-    const childMinHeightPx = _convertRemToPx(VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);
+    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.
@@ -9988,31 +10029,39 @@ const ScrollableHorizontalGallery = (props) => {
  * @private
  */
 const OverflowGallery = (props) => {
-    const { shouldFloatLocalVideo = false, isNarrow = false, overflowGalleryElements, horizontalGalleryStyles, 
+    const { shouldFloatLocalVideo = false, isNarrow = false, 
+    /* @conditional-compile-remove(vertical-gallery) */
+    isShort = false, overflowGalleryElements, horizontalGalleryStyles, 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom', 
     /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles } = props;
     const containerStyles = React.useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryLayout === 'VerticalRight') {
-            return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
+            return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
         }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
-    }, [shouldFloatLocalVideo, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout]);
+    }, [
+        shouldFloatLocalVideo,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+    ]);
     const galleryStyles = React.useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryLayout === 'VerticalRight') {
-            return react.concatStyleSets(verticalGalleryStyle, veritcalGalleryStyles);
+            return react.concatStyleSets(verticalGalleryStyle(isShort), veritcalGalleryStyles);
         }
         return react.concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
     }, [
         isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
         horizontalGalleryStyles,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
         /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles
     ]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryLayout === 'VerticalRight') {
-        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP }, overflowGalleryElements));
+        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort }, overflowGalleryElements));
     }
     /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
@@ -10030,9 +10079,13 @@ const OverflowGallery = (props) => {
  */
 const DefaultLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    /* @conditional-compile-remove(vertical-gallery) */
+    parentHeight, 
     /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds, 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    /* @conditional-compile-remove(vertical-gallery) */
+    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
@@ -10060,13 +10113,16 @@ const DefaultLayout = (props) => {
         if (horizontalGalleryTiles.length === 0) {
             return null;
         }
-        return (React__default['default'].createElement(OverflowGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: false, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+        return (React__default['default'].createElement(OverflowGallery, { isNarrow: isNarrow, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
             veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(pinned-participants) */
             overflowGalleryLayout: overflowGalleryLayout }));
     }, [
         isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
         horizontalGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
@@ -10827,6 +10883,8 @@ const FloatingLocalVideoLayout = (props) => {
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    /* @conditional-compile-remove(vertical-gallery) */
+    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
@@ -10858,12 +10916,17 @@ const FloatingLocalVideoLayout = (props) => {
         }
         /* @conditional-compile-remove(vertical-gallery) */
         if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {
-            return isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+            return isNarrow
+                ? SMALL_FLOATING_MODAL_SIZE_PX
+                : isShort
+                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX
+                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
         }
         return LARGE_FLOATING_MODAL_SIZE_PX;
     }, [
         horizontalGalleryTiles.length,
         isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
     ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
@@ -10876,13 +10939,18 @@ const FloatingLocalVideoLayout = (props) => {
         if (horizontalGalleryTiles.length === 0) {
             return null;
         }
-        return (React__default['default'].createElement(OverflowGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+        return (React__default['default'].createElement(OverflowGallery
+        /* @conditional-compile-remove(vertical-gallery) */
+        , { 
+            /* @conditional-compile-remove(vertical-gallery) */
+            isShort: isShort, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
             veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryLayout: overflowGalleryLayout }));
     }, [
         isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
         horizontalGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,