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

package/dist/communication-react.d.ts

@@ -6132,7 +6132,7 @@ export declare type FileMetadata = FileSharingMetadata | /* @conditional-compile
 /**
  * @beta
  */
-export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'attachedImage' | '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.
@@ -6141,7 +6141,7 @@ export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional
  */
 export declare interface FileSharingMetadata extends BaseFileMetadata {
     attachmentType: 'fileSharing';
-    payload?: Record<string, string> | undefined;
+    payload?: Record<string, string>;
 }
 
 /**
@@ -6528,7 +6528,7 @@ export declare interface _Identifiers {
  * @beta
  */
 export declare interface ImageFileMetadata extends BaseFileMetadata {
-    attachmentType: 'inlineImage' | 'attachedImage';
+    attachmentType: 'inlineImage';
     previewUrl?: string;
 }
 

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-202307150015';
+var telemetryVersion = '1.7.0-alpha-202307180021';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -16184,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
  */
@@ -16239,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 = () => {
@@ -16270,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 }))));
             })))),
@@ -21636,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 }))))));
 };
@@ -22143,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.
@@ -22262,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) })),
@@ -22723,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) })),
@@ -24003,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
     };
 });
 
@@ -24022,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;
@@ -24032,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 = [
             {
@@ -24078,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) => {
@@ -24102,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, 
@@ -24599,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) */
@@ -24614,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) */
@@ -28627,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' });
 /**
@@ -28639,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
@@ -28659,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);
@@ -28677,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) => {
@@ -28762,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(() => {