@azure/communication-react 1.7.0-alpha-202307140015 → 1.7.0-alpha-202307180021

package/dist/communication-react.d.ts

@@ -428,6 +428,36 @@ export declare interface BaseCustomStyles {
     root?: IStyle;
 }
 
+/**
+ * Base interface that all Meta Data should extend.
+ * Typically used for ACS to ACS file transfers.
+ * @beta
+ */
+export declare interface BaseFileMetadata {
+    /**
+     * File name to be displayed.
+     */
+    name: string;
+    /**
+     * Extension is used for rendering the file icon.
+     * An unknown extension will be rendered as a generic icon.
+     * Example: `jpeg`
+     */
+    extension: string;
+    /**
+     * Download URL for the file.
+     */
+    url: string;
+    /**
+     * Unique ID of the file.
+     */
+    id: string;
+    /**
+     * Attachment Type
+     */
+    attachmentType: FileMetadataAttachmentType;
+}
+
 /**
  * Content blocked message type.
  *
@@ -6097,30 +6127,22 @@ export declare type FileDownloadHandler = (userId: string, fileMetadata: FileMet
  * Meta Data containing information about the uploaded file.
  * @beta
  */
-export declare interface FileMetadata {
-    attachmentType: FileMetadataAttachmentType;
-    id: string;
-    /**
-     * File name to be displayed.
-     */
-    name: string;
-    /**
-     * Extension is used for rendering the file icon.
-     * An unknown extension will be rendered as a generic icon.
-     * Example: `jpeg`
-     */
-    extension: string;
-    /**
-     * Download URL for the file.
-     */
-    url: string;
-    previewUrl?: string;
-}
+export declare type FileMetadata = FileSharingMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ ImageFileMetadata;
 
 /**
  * @beta
  */
-export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'teamsInlineImage' | 'unknown';
+export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | 'unknown';
+
+/**
+ * Meta Data containing basic information about the uploaded file.
+ * Typically used for ACS to ACS file transfers.
+ * @beta
+ */
+export declare interface FileSharingMetadata extends BaseFileMetadata {
+    attachmentType: 'fileSharing';
+    payload?: Record<string, string>;
+}
 
 /**
  * Properties for configuring the File Sharing feature.
@@ -6501,6 +6523,15 @@ export declare interface _Identifiers {
     mentionSuggestionItem: string;
 }
 
+/**
+ * Meta Data containing data for images.
+ * @beta
+ */
+export declare interface ImageFileMetadata extends BaseFileMetadata {
+    attachmentType: 'inlineImage';
+    previewUrl?: string;
+}
+
 /**
  * @beta
  * This contains a readonly array that returns all the active `incomingCalls`.

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.0-alpha-202307140015';
+var telemetryVersion = '1.7.0-alpha-202307180021';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9085,7 +9085,10 @@ const MessageContentAsRichTextHTML = (props) => {
     React.useEffect(() => {
         var _a;
         (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((fileMetadata) => {
-            if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
+            if (props.onFetchAttachment &&
+                props.attachmentsMap &&
+                fileMetadata.attachmentType === 'inlineImage' &&
+                props.attachmentsMap[fileMetadata.id] === undefined) {
                 props.onFetchAttachment(fileMetadata);
             }
         });
@@ -9146,12 +9149,15 @@ const processInlineImage = (props) => ({
     // Custom <img> processing
     shouldProcessNode: (node) => {
         var _a;
+        function isImageNode(file) {
+            return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;
+        }
         // Process img node with id in attachments list
         return (node.name &&
             node.name === 'img' &&
             node.attribs &&
             node.attribs.id &&
-            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id)));
+            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode)));
     },
     processNode: (node, children, index) => {
         // logic to check id in map/list
@@ -9257,14 +9263,24 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
+    const isFileSharingAttachment = React.useCallback((attachment) => {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return attachment.attachmentType === 'fileSharing';
+    }, []);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const isShowDownloadIcon = React.useCallback((attachment) => {
+        var _a;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return attachment.attachmentType === 'fileSharing' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
+    }, []);
     const fileCardGroupDescription = React.useMemo(() => () => {
         var _a, _b;
         const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         return _formatString(fileGroupLocaleString, {
-            fileCount: `${fileMetadata.filter((file) => file.attachmentType === 'fileSharing').length}`
+            fileCount: `${fileMetadata.filter(isFileSharingAttachment).length}`
         });
-    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]);
+    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
     const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
@@ -9288,7 +9304,7 @@ const _FileDownloadCards = (props) => {
     }), [props]);
     if (!fileMetadata ||
         fileMetadata.length === 0 ||
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some((attachment) => attachment.attachmentType === 'fileSharing')) {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
         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" },
@@ -9296,9 +9312,10 @@ const _FileDownloadCards = (props) => {
             fileMetadata
                 .filter((attachment) => {
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                return attachment.attachmentType === 'fileSharing';
+                return isFileSharingAttachment(attachment);
             })
-                .map((file) => (React__default['default'].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React__default['default'].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !file.previewUrl ? (React__default['default'].createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
+                .map((file) => (React__default['default'].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React__default['default'].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    isShowDownloadIcon(file) ? (React__default['default'].createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
                     React__default['default'].createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) }))))));
 };
 /**
@@ -9879,9 +9896,7 @@ const MessageThread = (props) => {
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$t(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments ||
-            attachment.id in inlineAttachments ||
-            attachment.attachmentType !== 'teamsInlineImage') {
+        if (!onFetchAttachments || attachment.attachmentType !== 'inlineImage' || attachment.id in inlineAttachments) {
             return;
         }
         setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
@@ -16169,7 +16184,11 @@ const captionContainerClassName = react.mergeStyles({
 /**
  * @private
  */
-const captionsBannerClassName = react.mergeStyles(Object.assign({ height: _pxToRem(100), overflowY: 'auto', overflowX: 'hidden' }, scrollbarStyles));
+const captionsBannerClassName = (formFactor) => {
+    return {
+        root: Object.assign({ overflowX: 'hidden', height: formFactor === 'compact' ? '4.5rem' : '6.25rem', overflowY: 'auto' }, scrollbarStyles)
+    };
+};
 /**
  * @private
  */
@@ -16224,7 +16243,7 @@ const _Caption = (props) => {
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 const _CaptionsBanner = (props) => {
-    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings } = props;
+    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings, formFactor = 'default' } = props;
     const captionsScrollDivRef = React.useRef(null);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = React.useState(true);
     const scrollToBottom = () => {
@@ -16255,7 +16274,7 @@ const _CaptionsBanner = (props) => {
     }, [captions, isAtBottomOfScroll]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null, startCaptionsInProgress && (React__default['default'].createElement(react.FocusZone, { as: "ul", className: captionsContainerClassName },
         isCaptionsOn && (React__default['default'].createElement(c, { innerRef: captionsScrollDivRef },
-            React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption) => {
+            React__default['default'].createElement(react.Stack, { verticalAlign: "start", styles: captionsBannerClassName(formFactor) }, captions.map((caption) => {
                 return (React__default['default'].createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
                     React__default['default'].createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
             })))),
@@ -17409,22 +17428,37 @@ const extractAttachedFilesMetadata = (metadata) => {
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractTeamsAttachmentsMetadata = (attachments) => {
-    return attachments.map((attachment) => {
-        var _a, _b;
-        return ({
-            attachmentType: mapAttachmentType(attachment.attachmentType),
-            id: attachment.id,
-            name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
-            extension: (_b = attachment.contentType) !== null && _b !== void 0 ? _b : '',
-            url: extractAttachmentUrl(attachment),
-            previewUrl: attachment.previewUrl
-        });
+    const fileMetadata = [];
+    attachments.forEach((attachment) => {
+        var _a, _b, _c, _d;
+        const attachmentType = mapAttachmentType(attachment.attachmentType);
+        if (attachmentType === 'inlineImage') {
+            fileMetadata.push({
+                attachmentType: attachmentType,
+                id: attachment.id,
+                name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
+                extension: (_b = attachment.contentType) !== null && _b !== void 0 ? _b : '',
+                url: extractAttachmentUrl(attachment),
+                previewUrl: attachment.previewUrl
+            });
+        }
+        else if (attachmentType === 'fileSharing') {
+            fileMetadata.push({
+                attachmentType: attachmentType,
+                id: attachment.id,
+                name: (_c = attachment.name) !== null && _c !== void 0 ? _c : '',
+                extension: (_d = attachment.contentType) !== null && _d !== void 0 ? _d : '',
+                url: extractAttachmentUrl(attachment),
+                payload: { teamsFileAttachment: 'true' }
+            });
+        }
     });
+    return fileMetadata;
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const mapAttachmentType = (attachmentType) => {
     if (attachmentType === 'teamsImage' || attachmentType === 'teamsInlineImage') {
-        return 'teamsInlineImage';
+        return 'inlineImage';
     }
     else if (attachmentType === 'file') {
         return 'fileSharing';
@@ -20662,7 +20696,7 @@ const ChatScreen = (props) => {
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$g(void 0, void 0, void 0, function* () {
-        if (attachment.previewUrl) {
+        if (attachment.attachmentType === 'inlineImage' && attachment.previewUrl) {
             const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
             return blob;
         }
@@ -21606,11 +21640,10 @@ const CaptionsBanner = (props) => {
     };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
-        /* @conditional-compile-remove(close-captions) */
-        React__default['default'].createElement("div", { className: containerClassName },
+        /* @conditional-compile-remove(close-captions) */ React__default['default'].createElement("div", { className: containerClassName },
             React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
                 React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
-                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { strings: captionsBannerStrings })))),
+                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
             !props.isMobile && captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: floatingChildClassName },
                 React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
 };
@@ -22113,12 +22146,14 @@ const bannerNotificationStyles = {
 /**
  * @private
  */
-const callArrangementContainerStyles = {
-    root: {
-        width: '100%',
-        height: '100%',
-        flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
-    }
+const callArrangementContainerStyles = (verticalControlBar) => {
+    return {
+        root: {
+            width: '100%',
+            height: '100%',
+            flexDirection: verticalControlBar ? 'unset' : 'column-reverse' // to allow first initial keyboard focus on ControlBar
+        }
+    };
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22232,7 +22267,7 @@ const CallControls = (props) => {
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
-            React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
+            React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
                 cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) })),
                 screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
@@ -22693,7 +22728,7 @@ const CommonCallControlBar = (props) => {
                         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 },
+                                React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
                                     microphoneButtonIsEnabled && (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) })),
@@ -23351,8 +23386,8 @@ const PeopleAndChatHeader = (props) => {
     }, [theme, haveMultipleTabs]);
     return (React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
         React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -23973,7 +24008,9 @@ const localVideoSelector = reselect__namespace.createSelector([callStatusSelecto
     return {
         isAvailable: !!localVideoStream,
         isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
-        renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
+        renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target,
+        /* @conditional-compile-remove(video-background-effects) */
+        activeVideoEffects: localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.videoEffects
     };
 });
 
@@ -23992,6 +24029,7 @@ var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments,
  */
 /** @beta */
 const VideoEffectsPaneContent = (props) => {
+    var _a;
     const { onDismissError, activeVideoEffectError, 
     /* @conditional-compile-remove(video-background-effects) */
     activeVideoEffectChange } = props;
@@ -24002,6 +24040,8 @@ const VideoEffectsPaneContent = (props) => {
     /* @conditional-compile-remove(video-background-effects) */
     const strings = locale.strings.call;
     /* @conditional-compile-remove(video-background-effects) */
+    const activeVideoEffects = (_a = useSelector$1(localVideoSelector).activeVideoEffects) === null || _a === void 0 ? void 0 : _a.activeEffects;
+    /* @conditional-compile-remove(video-background-effects) */
     const selectableVideoEffects = React.useMemo(() => {
         const videoEffects = [
             {
@@ -24048,19 +24088,19 @@ const VideoEffectsPaneContent = (props) => {
             const blurEffect = {
                 effectName: effectKey
             };
-            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
             activeVideoEffectChange({
                 type: 'blur',
                 timestamp: new Date(Date.now())
             });
             yield adapter.startVideoBackgroundEffect(blurEffect);
+            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
         }
         else if (effectKey === 'none') {
             const noneEffect = {
                 effectName: effectKey
             };
-            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
             yield adapter.stopVideoBackgroundEffects();
+            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
         }
         else {
             const backgroundImg = selectableVideoEffects.find((effect) => {
@@ -24072,15 +24112,22 @@ const VideoEffectsPaneContent = (props) => {
                     key: effectKey,
                     backgroundImageUrl: backgroundImg.backgroundProps.url
                 };
-                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
                 activeVideoEffectChange({
                     type: 'replacement',
                     timestamp: new Date(Date.now())
                 });
                 yield adapter.startVideoBackgroundEffect(replaceEffect);
+                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
             }
         }
     }), [adapter, activeVideoEffectChange, selectableVideoEffects]);
+    /* @conditional-compile-remove(video-background-effects) */
+    if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {
+        const noneEffect = {
+            effectName: 'none'
+        };
+        adapter.updateSelectedVideoBackgroundEffect(noneEffect);
+    }
     return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, 
     /* @conditional-compile-remove(video-background-effects) */
     selectableVideoEffects, 
@@ -24569,14 +24616,18 @@ const CallArrangement = (props) => {
     const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
+    const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
-            React__default['default'].createElement(react.Stack, { grow: true, styles: callArrangementContainerStyles },
-                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles({ zIndex: CONTROL_BAR_Z_INDEX }) }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+            React__default['default'].createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
+                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                        zIndex: CONTROL_BAR_Z_INDEX,
+                        padding: verticalControlBar ? '0.25rem' : 'unset'
+                    }) }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: isPeoplePaneOpen, 
                     /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, 
+                    onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, 
                     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                     disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
                     /* @conditional-compile-remove(close-captions) */
@@ -24584,7 +24635,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(video-background-effects) */
                     onShowVideoEffectsPicker: openVideoEffectsPane, 
                     /* @conditional-compile-remove(PSTN-calls) */
-                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined }))))),
+                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar }))))),
                 ((_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) */
@@ -28597,11 +28648,6 @@ const notificationTextStyles = react.memoizeFunction((theme) => ({
 }));
 
 // Copyright (c) Microsoft Corporation.
-/**
- * Helper function to determine if the message in the event is a valid one from a user.
- * Display name is used since system messages will not have one.
- */
-const validNewChatMessage = (message) => !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');
 const filledIcon = React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarChatButtonActive' });
 const regularIcon = React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarChatButtonInactive' });
 /**
@@ -28609,8 +28655,7 @@ const regularIcon = React__default['default'].createElement(CallWithChatComposit
  */
 const ChatButtonWithUnreadMessagesBadge = (props) => {
     var _a, _b, _c, _d;
-    const { chatAdapter, isChatPaneVisible, newMessageLabel } = props;
-    const [unreadChatMessagesCount, setUnreadChatMessagesCount] = React.useState(0);
+    const { newMessageLabel, unreadChatMessagesCount, hideUnreadChatMessagesBadge } = props;
     const baseIcon = props.showLabel ? regularIcon : filledIcon;
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const numberOfMsgToolTip = ((_a = props.strings) === null || _a === void 0 ? void 0 : _a.tooltipOffContent) && unreadChatMessagesCount > 0
@@ -28629,9 +28674,25 @@ const ChatButtonWithUnreadMessagesBadge = (props) => {
     const onRenderOnIcon = React.useCallback(() => baseIcon, [baseIcon]);
     const notificationOnIcon = React.useCallback(() => {
         return (React__default['default'].createElement(react.Stack, { styles: chatNotificationContainerStyles },
-            unreadChatMessagesCount > 0 && (React__default['default'].createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel })),
+            unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && (React__default['default'].createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel })),
             baseIcon));
-    }, [unreadChatMessagesCount, newMessageLabel, baseIcon]);
+    }, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);
+    return (React__default['default'].createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings })));
+};
+const chatNotificationContainerStyles = {
+    root: {
+        display: 'inline',
+        position: 'relative'
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Used by the CallWithChatComposite to track unread messages for showing as a badge on the Chat Button.
+ * @private
+ */
+const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible) => {
+    const [unreadChatMessagesCount, setUnreadChatMessagesCount] = React.useState(0);
     React.useEffect(() => {
         if (isChatPaneVisible) {
             setUnreadChatMessagesCount(0);
@@ -28647,14 +28708,13 @@ const ChatButtonWithUnreadMessagesBadge = (props) => {
             chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);
         };
     }, [chatAdapter, setUnreadChatMessagesCount, isChatPaneVisible, unreadChatMessagesCount]);
-    return (React__default['default'].createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings })));
-};
-const chatNotificationContainerStyles = {
-    root: {
-        display: 'inline',
-        position: 'relative'
-    }
+    return unreadChatMessagesCount;
 };
+/**
+ * Helper function to determine if the message in the event is a valid one from a user.
+ * Display name is used since system messages will not have one.
+ */
+const validNewChatMessage = (message) => !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');
 
 // Copyright (c) Microsoft Corporation.
 const CallWithChatScreen = (props) => {
@@ -28732,18 +28792,22 @@ const CallWithChatScreen = (props) => {
             disabled: chatButtonDisabled
         }
         : undefined, [chatButtonDisabled, mobileView, toggleChat, showChatButton]);
+    const unreadChatMessagesCount = useUnreadMessagesTracker(chatProps.adapter, isChatOpen);
     const customChatButton = React.useCallback((args) => ({
         placement: mobileView ? 'primary' : 'secondary',
-        onRenderButton: () => (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: chatProps.adapter, isChatPaneVisible: isChatOpen, checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }))
+        onRenderButton: () => (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel, unreadChatMessagesCount: unreadChatMessagesCount, 
+            // As chat is disabled when on hold, we don't want to show the unread badge when on hold
+            hideUnreadChatMessagesBadge: isOnHold }))
     }), [
         callWithChatStrings.chatButtonNewMessageNotificationLabel,
         chatButtonStrings,
-        chatProps.adapter,
         commonButtonStyles,
         isChatOpen,
         chatButtonDisabled,
         mobileView,
-        toggleChat
+        toggleChat,
+        unreadChatMessagesCount,
+        isOnHold
     ]);
     const callControlOptionsFromProps = React.useMemo(() => (Object.assign({}, (typeof props.callControls === 'object' ? props.callControls : {}))), [props.callControls]);
     const injectedCustomButtonsFromProps = React.useMemo(() => {