@azure/communication-react 1.5.1-alpha-202303260014 → 1.5.1-alpha-202303280014

package/dist/communication-react.d.ts

@@ -713,6 +713,24 @@ export declare interface CallAdapterCallOperations {
      * Continues into a call when the browser version is not supported.
      */
     allowUnsupportedBrowserVersion(): void;
+    /**
+     * Start the blur video background effect.
+     *
+     * @beta
+     */
+    blurVideoBackground(bgBlurConfig?: BackgroundBlurConfig): Promise<void>;
+    /**
+     * Start the video background replacement effect.
+     *
+     * @beta
+     */
+    replaceVideoBackground(bgReplacementConfig: BackgroundReplacementConfig): Promise<void>;
+    /**
+     * Stop the video background effect.
+     *
+     * @beta
+     */
+    stopVideoBackgroundEffect(): Promise<void>;
 }
 
 /**
@@ -750,6 +768,10 @@ export declare type CallAdapterClientState = {
      * control bar with the CallComposite.
      */
     cameraStatus?: 'On' | 'Off';
+    /**
+     * Default set of background images for background replacement effect.
+     */
+    videoBackgroundImages?: VideoBackgroundImage[];
 };
 
 /**
@@ -2277,6 +2299,24 @@ export declare interface CallWithChatAdapterManagement {
      * Continues into a call when the browser version is not supported.
      */
     allowUnsupportedBrowserVersion(): void;
+    /**
+     * Start the blur video background effect.
+     *
+     * @beta
+     */
+    blurVideoBackground(bgBlurConfig?: BackgroundBlurConfig): Promise<void>;
+    /**
+     * Start the video background replacement effect.
+     *
+     * @beta
+     */
+    replaceVideoBackground(bgReplacementConfig: BackgroundReplacementConfig): Promise<void>;
+    /**
+     * Stop the video background effect.
+     *
+     * @beta
+     */
+    stopVideoBackgroundEffect(): Promise<void>;
 }
 
 /**
@@ -8337,6 +8377,26 @@ export declare interface VerticalGalleryStyles extends BaseCustomStyles {
     controlBar?: VerticalGalleryControlBarStyles;
 }
 
+/**
+ * Contains the attibutes of a background image like url, name etc.
+ *
+ * @beta
+ */
+export declare interface VideoBackgroundImage {
+    /**
+     * key for unique identification of the custom background
+     */
+    key: string;
+    /**
+     * URL of the uploaded background image.
+     */
+    url: string;
+    /**
+     * Image name to be displayed.
+     */
+    tooltipText?: string;
+}
+
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.

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-202303260014';
+var telemetryVersion = '1.5.1-alpha-202303280014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6128,7 +6128,7 @@ const FailedMyChatMessageContainer = Object.assign(Object.assign({}, defaultChat
 /**
  * @private
  */
-const defaultChatMessageContainer = {
+const defaultChatMessageContainer = (theme) => ({
     maxWidth: '100%',
     minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
     marginRight: '0rem',
@@ -6141,9 +6141,37 @@ const defaultChatMessageContainer = {
         // For more info see https://github.com/Azure/communication-ui-library/pull/1507
         marginBlock: '0.125rem'
     },
+    '& blockquote': {
+        backgroundColor: theme.palette.white,
+        clear: 'left',
+        minHeight: '2.25rem',
+        width: 'fit-content',
+        margin: '7px 0px',
+        padding: '7px 15px',
+        border: 'solid',
+        borderRadius: '4px',
+        borderWidth: '1px',
+        borderColor: theme.palette.neutralQuaternary,
+        borderLeftWidth: '4px'
+    },
+    '& table': {
+        backgroundColor: theme.palette.white,
+        border: theme.palette.neutralQuaternary,
+        borderCollapse: 'collapse',
+        tableLayout: 'auto',
+        width: '100%',
+        '& tr': {
+            border: `1px solid ${theme.palette.neutralQuaternary}`,
+            '& td': {
+                border: `1px solid ${theme.palette.neutralQuaternary}`,
+                wordBreak: 'normal',
+                padding: '0px 5px'
+            }
+        }
+    },
     // This makes message bubble show border in high contrast mode making each message distinguishable
     border: '1px solid transparent'
-};
+});
 /**
  * @private
  */
@@ -7178,7 +7206,7 @@ const DefaultSystemMessage = (props) => {
     }
     return React__default['default'].createElement(React__default['default'].Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const messageProps = {
         message,
@@ -7194,7 +7222,7 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
             const myChatMessageStyle = message.status === 'failed'
                 ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
                 : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
-            const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer;
+            const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer(theme);
             messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
             const chatMessageComponent = onRenderMessage === undefined
                 ? defaultChatMessageRenderer(messageProps)
@@ -7521,6 +7549,7 @@ const MessageThread = (props) => {
             // -1 because participant count does not include myself
             remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
     }, []);
+    const theme = useTheme();
     const messagesToDisplay = React.useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
         return messages.map((message, index) => {
             let key = message.messageId;
@@ -7549,7 +7578,7 @@ const MessageThread = (props) => {
                     statusToRender = 'failed';
                 }
             }
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
+            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
             message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
@@ -7565,6 +7594,7 @@ const MessageThread = (props) => {
         defaultStatusRenderer,
         defaultChatMessageRenderer,
         strings,
+        theme,
         participantCount,
         readCountForHoveredIndicator,
         onRenderMessage,
@@ -7576,7 +7606,6 @@ const MessageThread = (props) => {
         lastDeliveredChatMessage,
         props.disableEditing
     ]);
-    const theme = useTheme();
     const chatBody = React.useMemo(() => {
         var _a;
         return (React__default['default'].createElement(reactAriaLive.LiveAnnouncer, null,
@@ -17839,15 +17868,15 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     }),
     /* @conditional-compile-remove(video-background-effects) */
     onRemoveVideoBackgroundEffects: () => __awaiter$b(void 0, void 0, void 0, function* () {
-        throw new Error('Not implemented');
+        return yield adapter.stopVideoBackgroundEffect();
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: () => __awaiter$b(void 0, void 0, void 0, function* () {
-        throw new Error('Not implemented');
+    onBlurVideoBackground: (bgBlurConfig) => __awaiter$b(void 0, void 0, void 0, function* () {
+        return yield adapter.blurVideoBackground(bgBlurConfig);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: () => __awaiter$b(void 0, void 0, void 0, function* () {
-        throw new Error('Not implemented');
+    onReplaceVideoBackground: (bgReplacementConfig) => __awaiter$b(void 0, void 0, void 0, function* () {
+        return yield adapter.replaceVideoBackground(bgReplacementConfig);
     })
 }));
 
@@ -20822,7 +20851,7 @@ const ConfigurationPage = (props) => {
         }
     }
     const locale = useLocale();
-    const title = (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop }, locale.strings.call.configurationPageTitle));
+    const title = (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop, role: "heading", "aria-level": 1 }, locale.strings.call.configurationPageTitle));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
@@ -21658,6 +21687,7 @@ class CallContext {
             /* @conditional-compile-remove(unsupported-browser) */ environmentInfo: clientState.environmentInfo,
             /* @conditional-compile-remove(unsupported-browser) */ unsupportedBrowserVersionsAllowed: false,
             /* @conditional-compile-remove(rooms) */ roleHint: options === null || options === void 0 ? void 0 : options.roleHint,
+            /* @conditional-compile-remove(video-background-effects) */ videoBackgroundImages: options === null || options === void 0 ? void 0 : options.videoBackgroundImages,
             cameraStatus: undefined
         };
         this.emitter.setMaxListeners((_b = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _b !== void 0 ? _b : 50);
@@ -21841,6 +21871,12 @@ class AzureCommunicationCallAdapter {
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.blurVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.replaceVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.stopVideoBackgroundEffect.bind(this);
     }
     dispose() {
         this.resetDiagnosticsForwarder();
@@ -22049,6 +22085,24 @@ class AzureCommunicationCallAdapter {
         this.context.setAllowedUnsupportedBrowser();
         this.context.updateClientState(this.callClient.getState());
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    blurVideoBackground(bgBlurConfig) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            yield this.handlers.onBlurVideoBackground(bgBlurConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    replaceVideoBackground(bgReplacementConfig) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            yield this.handlers.onReplaceVideoBackground(bgReplacementConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    stopVideoBackgroundEffect() {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            yield this.handlers.onRemoveVideoBackgroundEffects();
+        });
+    }
     startCall(participants, options) {
         var _a, _b;
         if (_isInCall((_b = (_a = this.getState().call) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : 'None')) {
@@ -23148,6 +23202,24 @@ class CallWithChatBackedCallAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callWithChatAdapter.allowUnsupportedBrowserVersion();
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    blurVideoBackground(bgBlurConfig) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.blurVideoBackground(bgBlurConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    replaceVideoBackground(bgReplacementConfig) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.replaceVideoBackground(bgReplacementConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    stopVideoBackgroundEffect() {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.stopVideoBackgroundEffect();
+        });
+    }
 }
 function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState) {
     return {
@@ -23971,6 +24043,12 @@ class AzureCommunicationCallWithChatAdapter {
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.blurVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.replaceVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.stopVideoBackgroundEffect.bind(this);
     }
     /** Join existing Call. */
     joinCall(microphoneOn) {
@@ -24187,6 +24265,24 @@ class AzureCommunicationCallWithChatAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callAdapter.allowUnsupportedBrowserVersion();
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    blurVideoBackground(bgBlurConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.blurVideoBackground(bgBlurConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    replaceVideoBackground(bgReplacementConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.replaceVideoBackground(bgReplacementConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    stopVideoBackgroundEffect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.stopVideoBackgroundEffect();
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {