@azure/communication-react 1.5.1-alpha-202304010014 → 1.5.1-alpha-202304040013

package/dist/communication-react.d.ts

@@ -5417,6 +5417,8 @@ export declare type FileDownloadHandler = (userId: string, fileMetadata: FileMet
  * @beta
  */
 export declare interface FileMetadata {
+    attachmentType: FileMetadataAttachmentType;
+    id: string;
     /**
      * File name to be displayed.
      */
@@ -5431,8 +5433,14 @@ export declare interface FileMetadata {
      * Download URL for the file.
      */
     url: string;
+    previewUrl?: string;
 }
 
+/**
+ * @beta
+ */
+export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage' | 'unknown';
+
 /**
  * Properties for configuring the File Sharing feature.
  * @beta

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-202304010014';
+var telemetryVersion = '1.5.1-alpha-202304040013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6935,7 +6935,11 @@ const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    if (!fileMetadata || fileMetadata.length === 0) {
+    // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.
+    // Since you can't have both fileSharing and teamsInlineImage in the same message.
+    if (!fileMetadata ||
+        fileMetadata.length === 0 ||
+        /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing') {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
@@ -11886,37 +11890,40 @@ const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
+    const splitButtonMenuItems = [
+        {
+            key: 'cameraPrimaryAction',
+            text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
+            onClick: () => {
+                onToggleClick();
+            },
+            iconProps: {
+                iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
+                styles: { root: { lineHeight: 0 } }
+            }
+        }
+    ];
+    /* @conditional-compile-remove(video-background-effects) */
+    if (props.onShowVideoEffectsPicker) {
+        splitButtonMenuItems.push({
+            key: 'effects',
+            text: 'Effects',
+            title: 'Video Effects',
+            iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },
+            onClick: () => {
+                if (props.onShowVideoEffectsPicker) {
+                    props.onShowVideoEffectsPicker(true);
+                }
+            }
+        });
+    }
     const splitButtonPrimaryAction = {
         key: 'primaryAction',
         title: 'toggle camera',
         itemType: react.ContextualMenuItemType.Section,
         sectionProps: {
             topDivider: true,
-            items: [
-                {
-                    key: 'cameraPrimaryAction',
-                    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
-                    onClick: () => {
-                        onToggleClick();
-                    },
-                    iconProps: {
-                        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);
-                        }
-                    }
-                }
-            ]
+            items: splitButtonMenuItems
         }
     };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -13516,23 +13523,15 @@ const _VideoBackgroundEffectsPicker = (props) => {
  * @private
  */
 react.mergeStyles({
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    width: '100%',
-    height: _pxToRem(60),
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr',
-    alignItems: 'stretch',
-    columnGap: _pxToRem(16),
-    padding: _pxToRem(8)
+    marginRight: _pxToRem(8)
 });
 /**
  * @private
  */
 react.mergeStyles({
-    fontWeight: 600,
+    fontWeight: 400,
     fontSize: _pxToRem(12),
-    lineHeight: _pxToRem(30)
+    lineHeight: _pxToRem(16)
 });
 /**
  * @private
@@ -13540,7 +13539,21 @@ react.mergeStyles({
 react.mergeStyles({
     fontWeight: 400,
     fontSize: _pxToRem(16),
-    lineHeight: _pxToRem(30)
+    lineHeight: _pxToRem(22)
+});
+/**
+ * @private
+ */
+react.mergeStyles({
+    marginTop: _pxToRem(6),
+    marginBottom: _pxToRem(6)
+});
+/**
+ * @private
+ */
+react.mergeStyles({
+    height: _pxToRem(100),
+    overflow: 'scroll'
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -19253,8 +19266,42 @@ const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) =>
 const CommonCallControlBar = (props) => {
     var _a, _b, _c;
     const theme = react.useTheme();
+    const controlBarContainerRef = React.useRef(null);
+    const sidepaneControlsRef = React.useRef(null);
+    const controlBarSizeRef = React.useRef(null);
+    const [controlBarButtonsWidth, setControlBarButtonsWidth] = React.useState(0);
+    const [panelsButtonsWidth, setPanelsButtonsWidth] = React.useState(0);
+    const [controlBarContainerWidth, setControlBarContainerWidth] = React.useState(0);
+    const [totalButtonsWidth, setTotalButtonsWidth] = React.useState(0);
+    const [isOutOfSpace, setIsOutOfSpace] = React.useState(false);
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
+    const handleResize = React.useCallback(() => {
+        setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
+        setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
+        setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);
+    }, []);
+    // on load set inital width
+    React.useEffect(() => {
+        setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
+        setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
+        setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);
+    }, []);
+    // get the current width of control bar buttons and panel control buttons when browser size change
+    React.useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [handleResize]);
+    /* when size change, reset total buttons width and compare with the control bar container width
+    if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width
+    Instead let them take up the remaining white space on the left */
+    React.useEffect(() => {
+        // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width
+        setTotalButtonsWidth((controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth);
+    }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);
+    React.useEffect(() => {
+        setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);
+    }, [totalButtonsWidth, controlBarContainerWidth]);
     const chatButtonStrings = React.useMemo(() => ({
         label: callWithChatStrings.chatButtonLabel,
         tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,
@@ -19281,6 +19328,11 @@ const CommonCallControlBar = (props) => {
     const screenShareButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const commonButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const endCallButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const controlBarWrapperDesktopStyles = React.useMemo(
+    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
+    () => (!props.mobileView && !isOutOfSpace ? (props.rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}), [props.mobileView, props.rtl, isOutOfSpace]);
+    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
+    const controlBarDesktopContainerStyles = React.useMemo(() => (!props.mobileView && !isOutOfSpace ? { position: 'relative' } : {}), [props.mobileView, isOutOfSpace]);
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customButtons = React.useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
     // when options is false then we want to hide the whole control bar.
@@ -19288,47 +19340,51 @@ const CommonCallControlBar = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     const chatButton = props.chatAdapter ? (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: (_a = props.chatButtonChecked) !== null && _a !== void 0 ? _a : false, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel })) : (React__default['default'].createElement(React__default['default'].Fragment, null));
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles$1) },
-        React__default['default'].createElement(react.Stack.Item, { grow: true },
-            React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
-                React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
-                    React__default['default'].createElement(HiddenFocusStartPoint, null),
-                    React__default['default'].createElement(react.Stack.Item, null,
-                        React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
-                            isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { 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.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), 
-                                /* @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) */
-                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), 
-                        /* @conditional-compile-remove(control-bar-button-injection) */
-                        (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
-                            _b.slice(0, props.mobileView
-                                ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
-                                : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                                return (React__default['default'].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
-                            }),
-                            props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
-                            /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
-                                /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
-                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
+    return (React__default['default'].createElement("div", { ref: controlBarSizeRef },
+        React__default['default'].createElement(react.Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles$1, controlBarDesktopContainerStyles) },
+            React__default['default'].createElement(react.Stack.Item, { grow: true, className: react.mergeStyles(controlBarWrapperDesktopStyles) },
+                React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
+                    React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+                        React__default['default'].createElement(HiddenFocusStartPoint, null),
+                        React__default['default'].createElement(react.Stack.Item, null,
+                            React__default['default'].createElement("div", { ref: controlBarContainerRef },
+                                React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
+                                    isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { 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.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), 
+                                        /* @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) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), 
                                 /* @conditional-compile-remove(control-bar-button-injection) */
-                                callControls: props.callControls })),
-                            React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
-        !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
-        /* @conditional-compile-remove(control-bar-button-injection) */
-        (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
-            _c.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, 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))));
+                                (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
+                                    _b.slice(0, props.mobileView
+                                        ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
+                                        : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
+                                        return (React__default['default'].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
+                                    }),
+                                    props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
+                                    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
+                                        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
+                                        !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
+                                        /* @conditional-compile-remove(control-bar-button-injection) */
+                                        callControls: props.callControls })),
+                                    React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
+            !props.mobileView && (React__default['default'].createElement(react.Stack.Item, null,
+                React__default['default'].createElement("div", { ref: sidepaneControlsRef },
+                    React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
+                    /* @conditional-compile-remove(control-bar-button-injection) */
+                    (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
+                        _c.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, 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 = {
     padding: '0.75rem',
@@ -19337,6 +19393,16 @@ const desktopButtonContainerStyle = {
 const desktopControlBarStyles = {
     root: desktopButtonContainerStyle
 };
+const wrapperDesktopStyles = {
+    position: 'absolute',
+    left: '50%',
+    transform: 'translate(-50%, 0)'
+};
+const wrapperDesktopRtlStyles = {
+    position: 'absolute',
+    right: '50%',
+    transform: 'translate(-50%, 0)'
+};
 const getDesktopCommonButtonStyles = (theme) => ({
     root: {
         border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,
@@ -20548,6 +20614,98 @@ const PreparedMoreDrawer = (props) => {
     return React__default['default'].createElement(MoreDrawer, Object.assign({}, props, deviceProps, callHandlers, { strings: moreDrawerStrings }));
 };
 
+var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Pane that is used to show video effects button
+ * @private
+ */
+/** @beta */
+const VideoEffectsPane = (props) => {
+    const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    const strings = locale.strings.call;
+    /* @conditional-compile-remove(video-background-effects) */
+    const selectableVideoEffects = React.useMemo(() => {
+        const videoEffects = [
+            {
+                key: 'none',
+                iconProps: {
+                    iconName: 'RemoveVideoBackgroundEffect'
+                },
+                title: strings.removeBackgroundEffectButtonLabel,
+                tooltipProps: {
+                    content: strings.removeBackgroundTooltip
+                }
+            },
+            {
+                key: 'blur',
+                iconProps: {
+                    iconName: 'BlurVideoBackground'
+                },
+                title: strings.blurBackgroundEffectButtonLabel,
+                tooltipProps: {
+                    content: strings.blurBackgroundTooltip
+                }
+            }
+        ];
+        const videoEffectImages = props.adapter.getState().videoBackgroundImages;
+        if (videoEffectImages) {
+            videoEffectImages.forEach((img) => {
+                var _a;
+                videoEffects.push({
+                    key: img.key,
+                    backgroundProps: {
+                        url: img.url
+                    },
+                    tooltipProps: {
+                        content: (_a = img.tooltipText) !== null && _a !== void 0 ? _a : ''
+                    }
+                });
+            });
+        }
+        return videoEffects;
+    }, [strings, props.adapter]);
+    /* @conditional-compile-remove(video-background-effects) */
+    const onEffectChange = React.useCallback((effectKey) => __awaiter$9(void 0, void 0, void 0, function* () {
+        console.log(props.adapter.getState());
+        if (effectKey === 'blur') {
+            props.adapter.blurVideoBackground();
+        }
+        else if (effectKey === 'none') {
+            props.adapter.stopVideoBackgroundEffect();
+        }
+        else {
+            const backgroundImg = selectableVideoEffects.find((effect) => {
+                return effect.key === effectKey;
+            });
+            if (backgroundImg && backgroundImg.backgroundProps) {
+                props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
+            }
+        }
+    }), [props.adapter, selectableVideoEffects]);
+    return VideoEffectsPaneTrampoline(showVideoEffectsOptions, setshowVideoEffectsOptions, 
+    /* @conditional-compile-remove(video-background-effects) */
+    selectableVideoEffects, 
+    /* @conditional-compile-remove(video-background-effects) */
+    onEffectChange);
+};
+const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions, selectableVideoEffects, onEffectChange) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    return (React__default['default'].createElement(react.Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React__default['default'].createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -20588,6 +20746,12 @@ const CallArrangement = (props) => {
         dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
         placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
     }), [callWithChatStrings]);
+    /* @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]);
     const [showDrawer, setShowDrawer] = React.useState(false);
     const onMoreButtonClicked = React.useCallback(() => {
         closePane();
@@ -20658,7 +20822,9 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: activePane === 'people', 
                     /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked }))))),
+                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
+                    /* @conditional-compile-remove(video-background-effects) */
+                    onShowVideoEffectsPicker: setShowVideoEffectsPane }))))),
                 ((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */
@@ -20680,7 +20846,9 @@ const CallArrangement = (props) => {
                                     canUnmute && !!props.mutedNotificationProps && (React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 props.onRenderGalleryContent && props.onRenderGalleryContent()))),
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                    callPaneContent())))));
+                    callPaneContent()),
+                /* @conditional-compile-remove(video-background-effects) */
+                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane, adapter: adapter })))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
@@ -21590,7 +21758,7 @@ const localPreviewTileStyle = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -21610,7 +21778,7 @@ const LocalPreview = (props) => {
     const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const adapter = useAdapter();
-    const onToggleMic = React.useCallback(() => __awaiter$9(void 0, void 0, void 0, function* () {
+    const onToggleMic = React.useCallback(() => __awaiter$8(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
@@ -21863,98 +22031,6 @@ const CallReadinessModalFallBack = (props) => {
     }
 };
 
-var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/**
- * Pane that is used to show video effects button
- * @private
- */
-/** @beta */
-const VideoEffectsPane = (props) => {
-    const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;
-    /* @conditional-compile-remove(video-background-effects) */
-    const locale = useLocale();
-    /* @conditional-compile-remove(video-background-effects) */
-    const strings = locale.strings.call;
-    /* @conditional-compile-remove(video-background-effects) */
-    const selectableVideoEffects = React.useMemo(() => {
-        const videoEffects = [
-            {
-                key: 'none',
-                iconProps: {
-                    iconName: 'RemoveVideoBackgroundEffect'
-                },
-                title: strings.removeBackgroundEffectButtonLabel,
-                tooltipProps: {
-                    content: strings.removeBackgroundTooltip
-                }
-            },
-            {
-                key: 'blur',
-                iconProps: {
-                    iconName: 'BlurVideoBackground'
-                },
-                title: strings.blurBackgroundEffectButtonLabel,
-                tooltipProps: {
-                    content: strings.blurBackgroundTooltip
-                }
-            }
-        ];
-        const videoEffectImages = props.adapter.getState().videoBackgroundImages;
-        if (videoEffectImages) {
-            videoEffectImages.forEach((img) => {
-                var _a;
-                videoEffects.push({
-                    key: img.key,
-                    backgroundProps: {
-                        url: img.url
-                    },
-                    tooltipProps: {
-                        content: (_a = img.tooltipText) !== null && _a !== void 0 ? _a : ''
-                    }
-                });
-            });
-        }
-        return videoEffects;
-    }, [strings, props.adapter]);
-    /* @conditional-compile-remove(video-background-effects) */
-    const onEffectChange = React.useCallback((effectKey) => __awaiter$8(void 0, void 0, void 0, function* () {
-        console.log(props.adapter.getState());
-        if (effectKey === 'blur') {
-            props.adapter.blurVideoBackground();
-        }
-        else if (effectKey === 'none') {
-            props.adapter.stopVideoBackgroundEffect();
-        }
-        else {
-            const backgroundImg = selectableVideoEffects.find((effect) => {
-                return effect.key === effectKey;
-            });
-            if (backgroundImg && backgroundImg.backgroundProps) {
-                props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
-            }
-        }
-    }), [props.adapter, selectableVideoEffects]);
-    return VideoEffectsPaneTrampoline(showVideoEffectsOptions, setshowVideoEffectsOptions, 
-    /* @conditional-compile-remove(video-background-effects) */
-    selectableVideoEffects, 
-    /* @conditional-compile-remove(video-background-effects) */
-    onEffectChange);
-};
-const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions, selectableVideoEffects, onEffectChange) => {
-    /* @conditional-compile-remove(video-background-effects) */
-    const locale = useLocale();
-    /* @conditional-compile-remove(video-background-effects) */
-    return (React__default['default'].createElement(react.Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React__default['default'].createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange }))));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -24273,7 +24349,7 @@ const CallWithChatScreen = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
                         /* @conditional-compile-remove(video-background-effects) */
-                        onShowVideoEffectsPicker: setShowVideoEffectsPane })))),
+                        onShowVideoEffectsPicker: setShowVideoEffectsPane, rtl: props.rtl })))),
             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() },