@azure/communication-react 1.5.1-alpha-202304070012 → 1.5.1-alpha-202304120012

package/dist/communication-react.d.ts

@@ -217,6 +217,13 @@ export declare type AreParamEqual<A extends (props: any) => JSX.Element | undefi
  */
 export declare type AreTypeEqual<A, B> = A extends B ? (B extends A ? true : false) : false;
 
+/**
+ * @beta
+ */
+export declare interface AttachmentDownloadResult {
+    blobUrl: string;
+}
+
 /**
  * Custom data attributes for displaying avatar for a user.
  *
@@ -763,6 +770,12 @@ export declare interface CallAdapterCallOperations {
      * @beta
      */
     updateBackgroundPickerImages(backgroundImages: VideoBackgroundImage[]): void;
+    /**
+     * Update the selected video background effect.
+     *
+     * @beta
+     */
+    updateSelectedVideoBackgroundEffect(selectedVideoBackground: SelectedVideoBackgroundEffect): void;
 }
 
 /**
@@ -804,6 +817,10 @@ export declare type CallAdapterClientState = {
      * Default set of background images for background replacement effect.
      */
     videoBackgroundImages?: VideoBackgroundImage[];
+    /**
+     * State to track the selected video background effect.
+     */
+    selectedVideoBackgroundEffect?: SelectedVideoBackgroundEffect;
 };
 
 /**
@@ -2324,6 +2341,12 @@ export declare interface CallWithChatAdapterManagement {
      * @beta
      */
     updateBackgroundPickerImages(backgroundImages: VideoBackgroundImage[]): void;
+    /**
+     * Update the selected video background effect
+     *
+     * @beta
+     */
+    updateSelectedVideoBackgroundEffect(selectedVideoBackground: SelectedVideoBackgroundEffect): void;
 }
 
 /**
@@ -6348,6 +6371,12 @@ export declare type MessageThreadProps = {
      * @beta
      */
     onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    /**
+     * Optional callback to retrieve the inline image in a message.
+     * @param attachment - FileMetadata object we want to render
+     * @beta
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult>;
     /**
      * Optional callback to edit a message.
      *
@@ -7344,6 +7373,13 @@ export declare interface ScreenShareButtonStrings {
     tooltipOffContent?: string;
 }
 
+/**
+ * Contains the attibutes of a selected video background effect
+ *
+ * @beta
+ */
+export declare type SelectedVideoBackgroundEffect = VideoBackgroundNoneEffect | VideoBackgroundBlurEffect | VideoBackgroundReplacementEffect;
+
 /**
  * An optimized selector that refines {@link ClientState} updates into props for React Components in this library.
  *
@@ -8438,6 +8474,18 @@ export declare interface VerticalGalleryStyles extends BaseCustomStyles {
     controlBar?: VerticalGalleryControlBarStyles;
 }
 
+/**
+ * Contains the attibutes of the blur video background effect
+ *
+ * @beta
+ */
+export declare interface VideoBackgroundBlurEffect {
+    /**
+     * Name of effect to blur video background effect
+     */
+    effectName: 'blur';
+}
+
 /**
  * Contains the attibutes of a background image like url, name etc.
  *
@@ -8458,6 +8506,38 @@ export declare interface VideoBackgroundImage {
     tooltipText?: string;
 }
 
+/**
+ * Contains the attibutes to remove video background effect
+ *
+ * @beta
+ */
+export declare interface VideoBackgroundNoneEffect {
+    /**
+     * Name of effect to remove video background effect
+     */
+    effectName: 'none';
+}
+
+/**
+ * Contains the attibutes of a selected replacement video background effect
+ *
+ * @beta
+ */
+export declare interface VideoBackgroundReplacementEffect {
+    /**
+     * Name of effect to replace video background effect
+     */
+    effectName: 'replacement';
+    /**
+     * key for unique identification of the custom background
+     */
+    effectKey: string;
+    /**
+     * URL of the custom background image.
+     */
+    backgroundImageUrl: 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-202304070012';
+var telemetryVersion = '1.5.1-alpha-202304120012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6786,6 +6786,8 @@ const preventUnwantedDismissProps = {
 };
 
 // Copyright (c) Microsoft Corporation.
+const processNodeDefinitions = new htmlToReact.ProcessNodeDefinitions(React__default['default']);
+const isValidNode = () => true;
 /** @private */
 const ChatMessageContent = (props) => {
     switch (props.message.contentType) {
@@ -6806,9 +6808,8 @@ const MessageContentWithLiveAria = (props) => {
         props.content));
 };
 const MessageContentAsRichTextHTML = (props) => {
-    const htmlToReactParser = new htmlToReact.Parser();
     const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return (React__default['default'].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: htmlToReactParser.parse(props.message.content) }));
+    return (React__default['default'].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
     const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
@@ -6857,6 +6858,56 @@ const messageContentAriaText = (props) => {
             })
         : undefined;
 };
+const processHtmlToReact = (props) => {
+    const htmlToReactParser = new htmlToReact.Parser();
+    /* @conditional-compile-remove(teams-inline-images) */
+    const processInlineImage = {
+        // Custom <img> processing
+        shouldProcessNode: (node) => {
+            var _a;
+            // 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)));
+        },
+        processNode: (node, children, index) => {
+            var _a;
+            // logic to check id in map/list
+            const fileMetadata = (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id);
+            // if in cache, early return
+            if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
+                node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
+                return processNodeDefinitions.processDefaultNode(node, children, index);
+            }
+            // not yet in cache
+            if (fileMetadata && props.onFetchAttachment && props.attachmentsMap) {
+                props.onFetchAttachment(fileMetadata);
+                if (node.attribs.id in props.attachmentsMap) {
+                    node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
+                }
+            }
+            return processNodeDefinitions.processDefaultNode(node, children, index);
+        }
+    };
+    const addProcessingStep = () => {
+        const steps = [];
+        /* @conditional-compile-remove(teams-inline-images) */
+        steps.push(processInlineImage);
+        return steps;
+    };
+    const processingInstructions = [
+        ...addProcessingStep(),
+        {
+            shouldProcessNode: () => {
+                return true;
+            },
+            processNode: processNodeDefinitions.processDefaultNode
+        }
+    ];
+    return htmlToReactParser.parseWithInstructions(props.message.content, isValidNode, processingInstructions);
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7053,7 +7104,11 @@ const MessageBubble = (props) => {
                 React__default['default'].createElement(BlockedMessageContent, { message: message, strings: strings })));
         }
         return (React__default['default'].createElement("div", { tabIndex: 0 },
-            React__default['default'].createElement(ChatMessageContent, { message: message, strings: strings }),
+            React__default['default'].createElement(ChatMessageContent, { message: message, strings: strings, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                onFetchAttachment: props.onFetchAttachments, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                attachmentsMap: props.attachmentsMap }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
     }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
     const chatMessage = (React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -7125,7 +7180,11 @@ const ChatMessageComponent = (props) => {
     else {
         return (React__default['default'].createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
             /* @conditional-compile-remove(date-time-customization) */
-            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings })));
+            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
+            /* @conditional-compile-remove(teams-inline-images) */
+            onFetchAttachments: props.onFetchAttachments, 
+            /* @conditional-compile-remove(teams-inline-images) */
+            attachmentsMap: props.attachmentsMap })));
     }
 };
 
@@ -7417,7 +7476,9 @@ const MessageThread = (props) => {
     var _a;
     const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, 
     /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString } = props;
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(teams-inline-images) */
+    onFetchAttachments } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = React.useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -7434,6 +7495,16 @@ const MessageThread = (props) => {
     const [lastSendingChatMessage, setLastSendingChatMessage] = React.useState(undefined);
     // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
     const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = React.useState(undefined);
+    /* @conditional-compile-remove(teams-inline-images) */
+    const [inlineAttachments, setInlineAttachments] = React.useState({});
+    /* @conditional-compile-remove(teams-inline-images) */
+    const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$r(void 0, void 0, void 0, function* () {
+        if (!onFetchAttachments || attachment.id in inlineAttachments) {
+            return;
+        }
+        const attachmentDownloadResult = yield onFetchAttachments(attachment);
+        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult.blobUrl })));
+    }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = React.useRef(false);
     // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
     // onLoadPreviousChatMessages is updated when a new adapter is set
@@ -7644,7 +7715,11 @@ const MessageThread = (props) => {
                 /* @conditional-compile-remove(file-sharing) */
                 strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
                 /* @conditional-compile-remove(date-time-customization) */
-                onDisplayDateTimeString: onDisplayDateTimeString })));
+                onDisplayDateTimeString: onDisplayDateTimeString, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                onFetchAttachments: onFetchInlineAttachment, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                attachmentsMap: inlineAttachments })));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }, [
@@ -7658,7 +7733,11 @@ const MessageThread = (props) => {
         showMessageStatus,
         onActionButtonClickMemo,
         /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString
+        onDisplayDateTimeString,
+        /* @conditional-compile-remove(teams-inline-images) */
+        onFetchInlineAttachment,
+        /* @conditional-compile-remove(teams-inline-images) */
+        inlineAttachments
     ]);
     const defaultStatusRenderer = React.useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
@@ -8738,6 +8817,7 @@ const moreButtonStyles = {
         // To ensure that the button is clickable when there is a floating video tile
         zIndex: 1,
         color: 'inherit',
+        top: '-0.125rem',
         height: '100%'
     },
     rootHovered: {
@@ -16502,6 +16582,24 @@ const isCameraOn = (state) => {
     }
     return false;
 };
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @private
+ */
+const startSelectedVideoEffect = (adapter) => __awaiter$g(void 0, void 0, void 0, function* () {
+    if (adapter.getState().selectedVideoBackgroundEffect) {
+        const selectedVideoBackgroundEffect = adapter.getState().selectedVideoBackgroundEffect;
+        if ((selectedVideoBackgroundEffect === null || selectedVideoBackgroundEffect === void 0 ? void 0 : selectedVideoBackgroundEffect.effectName) === 'blur') {
+            yield adapter.blurVideoBackground();
+        }
+        else if ((selectedVideoBackgroundEffect === null || selectedVideoBackgroundEffect === void 0 ? void 0 : selectedVideoBackgroundEffect.effectName) === 'none') {
+            yield adapter.stopVideoBackgroundEffect();
+        }
+        else if ((selectedVideoBackgroundEffect === null || selectedVideoBackgroundEffect === void 0 ? void 0 : selectedVideoBackgroundEffect.effectName) === 'replacement') {
+            yield adapter.replaceVideoBackground({ backgroundImageUrl: selectedVideoBackgroundEffect.backgroundImageUrl });
+        }
+    }
+});
 /**
  * Reduce the set of call controls visible on mobile.
  * For example do not show screenshare button.
@@ -20576,6 +20674,7 @@ const MoreDrawer = (props) => {
             text: localeStrings.component.strings.holdButton.tooltipOffContent,
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
+                onLightDismiss();
             },
             iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
         });
@@ -20703,19 +20802,32 @@ const VideoEffectsPane = (props) => {
     }, [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();
+            const blurEffect = {
+                effectName: effectKey
+            };
+            props.adapter.updateSelectedVideoBackgroundEffect(blurEffect);
+            yield props.adapter.blurVideoBackground();
         }
         else if (effectKey === 'none') {
-            props.adapter.stopVideoBackgroundEffect();
+            const noneEffect = {
+                effectName: effectKey
+            };
+            props.adapter.updateSelectedVideoBackgroundEffect(noneEffect);
+            yield props.adapter.stopVideoBackgroundEffect();
         }
         else {
             const backgroundImg = selectableVideoEffects.find((effect) => {
                 return effect.key === effectKey;
             });
             if (backgroundImg && backgroundImg.backgroundProps) {
-                props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
+                const replaceEffect = {
+                    effectName: 'replacement',
+                    effectKey,
+                    backgroundImageUrl: backgroundImg.backgroundProps.url
+                };
+                props.adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
+                yield props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
             }
         }
     }), [props.adapter, selectableVideoEffects]);
@@ -22703,9 +22815,8 @@ const MainScreen = (props) => {
                 modalLayerHostId: props.modalLayerHostId, options: props.options }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        case holdPageTrampoline():
-            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options })));
+        case 'hold':
+            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options })));
             break;
     }
     /* @conditional-compile-remove(unsupported-browser) */
@@ -22776,11 +22887,6 @@ const CallComposite = (props) => {
                 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) @conditional-compile-remove(call-readiness) */
                 React__default['default'].createElement(react.LayerHost, { id: modalLayerHostId, className: react.mergeStyles(modalLayerHostStyle) })))));
 };
-const holdPageTrampoline = () => {
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    return 'hold';
-};
 const getQueryOptions = (options) => {
     /* @conditional-compile-remove(rooms) */
     if (options.role === 'Consumer') {
@@ -22956,6 +23062,7 @@ class CallContext {
             /* @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,
+            /* @conditional-compile-remove(video-background-effects) */ selectedVideoBackgroundEffect: undefined,
             cameraStatus: undefined
         };
         this.emitter.setMaxListeners((_b = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _b !== void 0 ? _b : 50);
@@ -23031,6 +23138,10 @@ class CallContext {
     setBackroundPickerImages(videoBackgroundImages) {
         this.setState(Object.assign(Object.assign({}, this.state), { videoBackgroundImages }));
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    setSelectedVideoBackgroundEffect(selectedVideoBackgroundEffect) {
+        this.setState(Object.assign(Object.assign({}, this.state), { selectedVideoBackgroundEffect }));
+    }
 }
 const findLatestEndedCall = (calls) => {
     var _a, _b, _c, _d;
@@ -23299,6 +23410,8 @@ class AzureCommunicationCallAdapter {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 if (!isCameraOn(this.getState())) {
                     yield this.handlers.onToggleCamera(options);
+                    /* @conditional-compile-remove(video-background-effects) */
+                    yield startSelectedVideoEffect(this);
                 }
             }));
         });
@@ -23381,6 +23494,10 @@ class AzureCommunicationCallAdapter {
     updateBackgroundPickerImages(backgroundImages) {
         this.context.setBackroundPickerImages(backgroundImages);
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    updateSelectedVideoBackgroundEffect(selectedVideoBackground) {
+        this.context.setSelectedVideoBackgroundEffect(selectedVideoBackground);
+    }
     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')) {
@@ -23996,6 +24113,10 @@ class CallWithChatBackedCallAdapter {
     updateBackgroundPickerImages(backgroundImages) {
         return this.callWithChatAdapter.updateBackgroundPickerImages(backgroundImages);
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    updateSelectedVideoBackgroundEffect(selectedVideoBackground) {
+        return this.callWithChatAdapter.updateSelectedVideoBackgroundEffect(selectedVideoBackground);
+    }
 }
 function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState) {
     return {
@@ -24481,6 +24602,16 @@ function mergeCallAdapterStateIntoCallWithChatAdapterState(existingCallWithChatA
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+/**
+ * @private
+ */
+const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];
+/**
+ * @private
+ */
+const TEAMS_LIMITATION_LEARN_MORE = 'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';
+
+// Copyright (c) Microsoft Corporation.
 /**
  * Get chat thread from a teams url.
  * As per documented on the Chat SDK: https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/chat/meeting-interop?pivots=platform-web#get-a-teams-meeting-chat-thread-for-a-communication-services-user
@@ -24495,6 +24626,9 @@ const getChatThreadFromTeamsLink = (teamsMeetingLink) => {
     // Extract just the chat guid from the link, stripping away the call locator ID
     threadId = threadId.split(/^(.*?@thread\.v2)/gm)[1];
     if (!threadId || threadId.length === 0) {
+        if (UNSUPPORTED_CHAT_THREAD_TYPE.some((t) => teamsMeetingLink.includes(t))) {
+            throw new Error(`Teams Channel Meetings are not currently supported, read more ${TEAMS_LIMITATION_LEARN_MORE}`);
+        }
         throw new Error('Could not get chat thread from teams link');
     }
     return threadId;
@@ -24893,6 +25027,10 @@ class AzureCommunicationCallWithChatAdapter {
     updateBackgroundPickerImages(backgroundImages) {
         return this.callAdapter.updateBackgroundPickerImages(backgroundImages);
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    updateSelectedVideoBackgroundEffect(selectedVideoBackground) {
+        return this.callAdapter.updateSelectedVideoBackgroundEffect(selectedVideoBackground);
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {