@azure/communication-react 1.5.1-alpha-202303230013 → 1.5.1-alpha-202303240013

package/dist/communication-react.d.ts

@@ -5743,6 +5743,8 @@ export declare interface _Identifiers {
     overflowGalleryLeftNavButton: string;
     /** `data-ui-id` value for overflow gallery component's right navigation button */
     overflowGalleryRightNavButton: string;
+    /** `data-ui-id` value for the video tiles in the horizontal gallery */
+    horizontalGalleryVideoTile: string;
     /** `data-ui-id` value for `VerticalGallery` Component's children video tiles */
     verticalGalleryVideoTile: string;
     /** `data-ui-id` value for `VerticalGallery` Component's page counter */

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-202303230013';
+var telemetryVersion = '1.5.1-alpha-202303240013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4326,6 +4326,7 @@ const defaultIdentifiers = {
     overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button',
     /* @conditional-compile-remove(vertical-gallery) */
     verticalGalleryVideoTile: 'vertical-gallery-video-tile',
+    horizontalGalleryVideoTile: 'horizontal-gallery-video-tile',
     /* @conditional-compile-remove(vertical-gallery) */
     verticalGalleryPageCounter: 'vertical-gallery-page-counter'
 };
@@ -9408,6 +9409,7 @@ const rootStyle$1 = {
  */
 const childrenContainerStyle$1 = {
     height: '100%',
+    width: '100%',
     gap: `${HORIZONTAL_GALLERY_GAP}rem`
 };
 
@@ -9444,7 +9446,7 @@ const DEFAULT_CHILDREN_PER_PAGE = 5;
  * @returns
  */
 const HorizontalGallery = (props) => {
-    var _a, _b;
+    var _a;
     const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;
     const ids = useIdentifiers();
     const [page, setPage] = React.useState(0);
@@ -9468,13 +9470,18 @@ const HorizontalGallery = (props) => {
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
     const disableNextButton = page === lastPage;
+    const childrenStyles = React.useMemo(() => {
+        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
+    }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     // If children per page is 0 or less return empty element
     if (childrenPerPage <= 0) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle$1, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
         showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton })),
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle$1, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle$1) }, childrenOnCurrentPage.map((child, i) => {
+            return (React__default['default'].createElement(react.Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child));
+        })),
         showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }))));
 };
 const HorizontalGalleryNavigationButton = (props) => {
@@ -9490,22 +9497,22 @@ react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
 /**
  * Small floating modal width and height in rem for small screen
  */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };
+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
  */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
+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
  */
-const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };
+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
  */
-const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 176, height: 100 };
+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.
@@ -9514,31 +9521,31 @@ const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-const localVideoTileContainerStyle = (theme, localVideoTileSize) => {
+const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
     return {
-        minWidth: _pxToRem(localVideoTileSize.width),
-        minHeight: _pxToRem(localVideoTileSize.height),
+        minWidth: `${localVideoTileSizeRem.width}rem`,
+        minHeight: `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: _pxToRem(localVideoTileOuterPaddingPX),
+        bottom: `${localVideoTileOuterPaddingRem}rem`,
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
-        right: _pxToRem(localVideoTileOuterPaddingPX)
+        right: `${localVideoTileOuterPaddingRem}rem`
     };
 };
 /**
  * @private
  */
-const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSize) => {
-    return react.concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSize), {
+const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
+    return react.concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
         root: { boxShadow: theme.effects.elevation8 }
     });
 };
 /**
  * @private
  */
-const floatingLocalVideoModalStyle = (theme, modalSize) => {
+const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, modalSize)
+        main: localVideoTileContainerStyle(theme, modalSizeRem)
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -9551,10 +9558,10 @@ const floatingLocalVideoModalStyle = (theme, modalSize) => {
 };
 /**
  * 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
  */
-const localVideoTileOuterPaddingPX = 8;
+const localVideoTileOuterPaddingRem = 0.5;
 /**
  * @private
  */
@@ -9576,6 +9583,62 @@ const localVideoModalStyles = {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+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% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`
+                : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`
+            : '100%',
+        paddingRight: '0.5rem'
+    };
+};
+/**
+ * @private
+ */
+const horizontalGalleryStyle = (isNarrow) => {
+    return {
+        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
+    };
+};
+/**
+ * Small horizontal gallery tile size in rem
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };
+/**
+ * @private
+ */
+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
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}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.maxWidth}rem`,
+    width: '100%',
+    height: '100%'
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * VerticalGallery tile size in rem:
@@ -9609,22 +9672,20 @@ const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, isShort)
     return isNarrow && isShort
         ? {
             width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
-            height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
+            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 + 1.5}rem`,
                 height: shouldFloatLocalVideo
-                    ? `calc(100% - ${_pxToRem(SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
+                    ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`
                     : '100%',
                 paddingBottom: '0.5rem'
             }
             : {
                 width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
-                height: shouldFloatLocalVideo
-                    ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
-                    : '100%',
+                height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
                 paddingBottom: '0.5rem'
             };
 };
@@ -9665,8 +9726,8 @@ const verticalGalleryStyle = (isShort) => {
  * @private
  */
 const calculateHorizontalChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = _convertRemToPx(childWidthRem);
+    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.
      *    __________________________________
@@ -9676,7 +9737,7 @@ const calculateHorizontalChildrenPerPage = (args) => {
      *   <-----------containerWidth--------->
      *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
      */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));
     // If all children fit then return numberOfChildrenInContainer
     if (numberOfChildren <= numberOfChildrenInContainer) {
         return numberOfChildrenInContainer;
@@ -9694,7 +9755,7 @@ const calculateHorizontalChildrenPerPage = (args) => {
     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) / (childWidth + gapWidth)), 1);
+    return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);
 };
 /**
  * Helper function to find the number of children for the VerticalGallery on each page.
@@ -9753,7 +9814,7 @@ const calculateVerticalChildrenPerPage = (args) => {
  * available width obtained from a ResizeObserver, width per child, gap width, and button width
  */
 const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender } = props;
+    const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender } = props;
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
@@ -9761,7 +9822,6 @@ const ResponsiveHorizontalGallery = (props) => {
     const childrenPerPage = calculateHorizontalChildrenPerPage({
         numberOfChildren: React__default['default'].Children.count(props.children),
         containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
         gapWidthRem,
         buttonWidthRem
     });
@@ -9963,60 +10023,6 @@ const ResponsiveVerticalGallery = (props) => {
         React__default['default'].createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-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
- */
-const horizontalGalleryStyle = (isNarrow) => {
-    return {
-        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
-    };
-};
-/**
- * Small horizontal gallery tile size in rem
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };
-/**
- * Large horizontal gallery tile size in rem
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
-/**
- * @private
- */
-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
- */
-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`
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -10034,7 +10040,7 @@ const scrollableHorizontalGalleryStyles = {
  */
 const scrollableHorizontalGalleryContainerStyles = react.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',
@@ -10106,7 +10112,7 @@ const OverflowGallery = (props) => {
     if (isNarrow) {
         return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements, onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
     }
-    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, 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 }, overflowGalleryElements));
+    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, overflowGalleryElements));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10870,12 +10876,15 @@ const DRAG_OPTIONS$1 = {
 // This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
 // Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
 // position the modal can be dragged to.
-const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };
+const modalMaxDragPosition = {
+    x: _convertRemToPx(localVideoTileOuterPaddingRem),
+    y: _convertRemToPx(localVideoTileOuterPaddingRem)
+};
 /**
  * @private
  */
 const FloatingLocalVideo = (props) => {
-    const { localVideoComponent, layerHostId, localVideoSize, parentWidth, parentHeight } = props;
+    const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;
     const theme = useTheme();
     // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
     // to be dragged offscreen and these are the top and left bounds of that calculation.
@@ -10883,11 +10892,11 @@ const FloatingLocalVideo = (props) => {
         ? {
             // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
             // hence (0,0) is the bottom right of the video gallery.
-            x: -parentWidth + localVideoSize.width + localVideoTileOuterPaddingPX,
-            y: -parentHeight + localVideoSize.height + localVideoTileOuterPaddingPX
+            x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),
+            y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)
         }
-        : undefined, [parentHeight, parentWidth, localVideoSize.width, localVideoSize.height]);
-    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSize), [theme, localVideoSize]);
+        : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
+    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
     const layerProps = React.useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
     return (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoComponent));
 };
@@ -10970,19 +10979,19 @@ const FloatingLocalVideoLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = reactHooks.useId('layerhost');
-    const localVideoSize = React.useMemo(() => {
+    const localVideoSizeRem = React.useMemo(() => {
         if (isNarrow) {
-            return SMALL_FLOATING_MODAL_SIZE_PX;
+            return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
         if ((horizontalGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {
             return isNarrow
-                ? SMALL_FLOATING_MODAL_SIZE_PX
+                ? SMALL_FLOATING_MODAL_SIZE_REM
                 : isShort
-                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX
-                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
+                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
-        return LARGE_FLOATING_MODAL_SIZE_PX;
+        return LARGE_FLOATING_MODAL_SIZE_REM;
     }, [
         horizontalGalleryTiles.length,
         isNarrow,
@@ -10992,10 +11001,10 @@ const FloatingLocalVideoLayout = (props) => {
     ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-    showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {
+    showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSize)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSize: localVideoSize, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = React.useMemo(() => {
         if (horizontalGalleryTiles.length === 0 && !screenShareComponent) {
             return null;