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

package/dist/communication-react.d.ts

@@ -2888,6 +2888,10 @@ export declare interface CameraButtonProps extends ControlBarButtonProps {
      * Styles for {@link CameraButton} and the device selection flyout.
      */
     styles?: Partial<CameraButtonStyles>;
+    /**
+     * Callback when a effects is clicked
+     */
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
 }
 
 /**
@@ -4628,6 +4632,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 /**
@@ -4735,6 +4740,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 /**
@@ -5737,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-202303220012';
+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'
 };
@@ -5332,7 +5333,9 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(vertical-gallery) */
     VerticalGalleryLeftButton: React__default['default'].createElement(reactIcons.ChevronLeft20Regular, null),
     /* @conditional-compile-remove(vertical-gallery) */
-    VerticalGalleryRightButton: React__default['default'].createElement(reactIcons.ChevronRight20Regular, null)
+    VerticalGalleryRightButton: React__default['default'].createElement(reactIcons.ChevronRight20Regular, null),
+    /* @conditional-compile-remove(video-background-effects) */
+    OptionsVideoBackgroundEffect: React__default['default'].createElement(reactIcons.VideoBackgroundEffect20Regular, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9406,6 +9409,7 @@ const rootStyle$1 = {
  */
 const childrenContainerStyle$1 = {
     height: '100%',
+    width: '100%',
     gap: `${HORIZONTAL_GALLERY_GAP}rem`
 };
 
@@ -9442,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);
@@ -9466,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) => {
@@ -9488,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.
@@ -9512,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,
@@ -9549,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
  */
@@ -9574,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:
@@ -9607,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'
             };
 };
@@ -9663,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.
      *    __________________________________
@@ -9674,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;
@@ -9692,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.
@@ -9751,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;
@@ -9759,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
     });
@@ -9961,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
@@ -10032,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',
@@ -10104,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.
@@ -10868,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.
@@ -10881,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));
 };
@@ -10968,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,
@@ -10990,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;
@@ -11727,6 +11738,18 @@ const CameraButton = (props) => {
                         iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
                         styles: { root: { lineHeight: 0 } }
                     }
+                },
+                /* @conditional-compile-remove(video-background-effects) */
+                {
+                    key: 'effects',
+                    text: 'Effects',
+                    title: 'Video Effects',
+                    iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },
+                    onClick: () => {
+                        if (props.onShowVideoEffectsPicker) {
+                            props.onShowVideoEffectsPicker(true);
+                        }
+                    }
                 }
             ]
         }
@@ -17880,7 +17903,9 @@ const concatButtonBaseStyles = (...styles) => {
 const Camera = (props) => {
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled })));
+    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled, 
+        /* @conditional-compile-remove(video-background-effects) */
+        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18358,7 +18383,7 @@ const CallControls = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                     !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
@@ -22810,7 +22835,9 @@ const CallWithChatControlBar = (props) => {
                                 disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
                             isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton) })),
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton), 
+                                /* @conditional-compile-remove(video-background-effects) */
+                                onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
                             props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
                             isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -22835,7 +22862,7 @@ const CallWithChatControlBar = (props) => {
             _b.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                 return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
             }),
-            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
+            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
             isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton))));
 };
 const desktopButtonContainerStyle = {
@@ -23435,10 +23462,30 @@ const CallWithChatPane = (props) => {
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * Pane that is used to show video effects button
+ * @private
+ */
+/** @beta */
+const VideoEffectsPane = (props) => {
+    return VideoEffectsPaneTrampoline(props.showVideoEffectsOptions, props.setshowVideoEffectsOptions);
+};
+const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    return (React__default['default'].createElement(react.Panel, { headerText: "Effects", isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }));
+};
+
 // Copyright (c) Microsoft Corporation.
 const CallWithChatScreen = (props) => {
     const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;
     const mobileView = formFactor === 'mobile';
+    /* @conditional-compile-remove(video-background-effects) */
+    const [showVideoEffectsPane, setVideoEffectsPane] = React.useState(false);
+    /* @conditional-compile-remove(video-background-effects) */
+    const setShowVideoEffectsPane = React.useCallback((showVideoEffectsOptions) => {
+        setVideoEffectsPane(showVideoEffectsOptions);
+    }, [setVideoEffectsPane]);
     if (!callWithChatAdapter) {
         throw new Error('CallWithChatAdapter is undefined');
     }
@@ -23583,6 +23630,8 @@ const CallWithChatScreen = (props) => {
                     // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.
                     style: callCompositeContainerCSS },
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme }))),
+                /* @conditional-compile-remove(video-background-effects) */
+                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane }),
                 chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
                     fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),
@@ -23592,7 +23641,9 @@ const CallWithChatScreen = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
                         /* @conditional-compile-remove(PSTN-calls) */
-                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined })))),
+                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
+                        /* @conditional-compile-remove(video-background-effects) */
+                        onShowVideoEffectsPicker: setShowVideoEffectsPane })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },