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

package/dist/communication-react.d.ts

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

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202304020014';
+var telemetryVersion = '1.5.1-alpha-202304040013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6935,7 +6935,11 @@ const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    if (!fileMetadata || fileMetadata.length === 0) {
+    // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.
+    // Since you can't have both fileSharing and teamsInlineImage in the same message.
+    if (!fileMetadata ||
+        fileMetadata.length === 0 ||
+        /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing') {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
@@ -20610,6 +20614,98 @@ const PreparedMoreDrawer = (props) => {
     return React__default['default'].createElement(MoreDrawer, Object.assign({}, props, deviceProps, callHandlers, { strings: moreDrawerStrings }));
 };
 
+var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Pane that is used to show video effects button
+ * @private
+ */
+/** @beta */
+const VideoEffectsPane = (props) => {
+    const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    const strings = locale.strings.call;
+    /* @conditional-compile-remove(video-background-effects) */
+    const selectableVideoEffects = React.useMemo(() => {
+        const videoEffects = [
+            {
+                key: 'none',
+                iconProps: {
+                    iconName: 'RemoveVideoBackgroundEffect'
+                },
+                title: strings.removeBackgroundEffectButtonLabel,
+                tooltipProps: {
+                    content: strings.removeBackgroundTooltip
+                }
+            },
+            {
+                key: 'blur',
+                iconProps: {
+                    iconName: 'BlurVideoBackground'
+                },
+                title: strings.blurBackgroundEffectButtonLabel,
+                tooltipProps: {
+                    content: strings.blurBackgroundTooltip
+                }
+            }
+        ];
+        const videoEffectImages = props.adapter.getState().videoBackgroundImages;
+        if (videoEffectImages) {
+            videoEffectImages.forEach((img) => {
+                var _a;
+                videoEffects.push({
+                    key: img.key,
+                    backgroundProps: {
+                        url: img.url
+                    },
+                    tooltipProps: {
+                        content: (_a = img.tooltipText) !== null && _a !== void 0 ? _a : ''
+                    }
+                });
+            });
+        }
+        return videoEffects;
+    }, [strings, props.adapter]);
+    /* @conditional-compile-remove(video-background-effects) */
+    const onEffectChange = React.useCallback((effectKey) => __awaiter$9(void 0, void 0, void 0, function* () {
+        console.log(props.adapter.getState());
+        if (effectKey === 'blur') {
+            props.adapter.blurVideoBackground();
+        }
+        else if (effectKey === 'none') {
+            props.adapter.stopVideoBackgroundEffect();
+        }
+        else {
+            const backgroundImg = selectableVideoEffects.find((effect) => {
+                return effect.key === effectKey;
+            });
+            if (backgroundImg && backgroundImg.backgroundProps) {
+                props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
+            }
+        }
+    }), [props.adapter, selectableVideoEffects]);
+    return VideoEffectsPaneTrampoline(showVideoEffectsOptions, setshowVideoEffectsOptions, 
+    /* @conditional-compile-remove(video-background-effects) */
+    selectableVideoEffects, 
+    /* @conditional-compile-remove(video-background-effects) */
+    onEffectChange);
+};
+const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions, selectableVideoEffects, onEffectChange) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    return (React__default['default'].createElement(react.Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React__default['default'].createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -20650,6 +20746,12 @@ const CallArrangement = (props) => {
         dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
         placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
     }), [callWithChatStrings]);
+    /* @conditional-compile-remove(video-background-effects) */
+    const [showVideoEffectsPane, setVideoEffectsPane] = React.useState(false);
+    /* @conditional-compile-remove(video-background-effects) */
+    const setShowVideoEffectsPane = React.useCallback((showVideoEffectsOptions) => {
+        setVideoEffectsPane(showVideoEffectsOptions);
+    }, [setVideoEffectsPane]);
     const [showDrawer, setShowDrawer] = React.useState(false);
     const onMoreButtonClicked = React.useCallback(() => {
         closePane();
@@ -20720,7 +20822,9 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: activePane === 'people', 
                     /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked }))))),
+                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
+                    /* @conditional-compile-remove(video-background-effects) */
+                    onShowVideoEffectsPicker: setShowVideoEffectsPane }))))),
                 ((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */
@@ -20742,7 +20846,9 @@ const CallArrangement = (props) => {
                                     canUnmute && !!props.mutedNotificationProps && (React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 props.onRenderGalleryContent && props.onRenderGalleryContent()))),
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                    callPaneContent())))));
+                    callPaneContent()),
+                /* @conditional-compile-remove(video-background-effects) */
+                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane, adapter: adapter })))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
@@ -21652,7 +21758,7 @@ const localPreviewTileStyle = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -21672,7 +21778,7 @@ const LocalPreview = (props) => {
     const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const adapter = useAdapter();
-    const onToggleMic = React.useCallback(() => __awaiter$9(void 0, void 0, void 0, function* () {
+    const onToggleMic = React.useCallback(() => __awaiter$8(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
@@ -21925,98 +22031,6 @@ const CallReadinessModalFallBack = (props) => {
     }
 };
 
-var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/**
- * Pane that is used to show video effects button
- * @private
- */
-/** @beta */
-const VideoEffectsPane = (props) => {
-    const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;
-    /* @conditional-compile-remove(video-background-effects) */
-    const locale = useLocale();
-    /* @conditional-compile-remove(video-background-effects) */
-    const strings = locale.strings.call;
-    /* @conditional-compile-remove(video-background-effects) */
-    const selectableVideoEffects = React.useMemo(() => {
-        const videoEffects = [
-            {
-                key: 'none',
-                iconProps: {
-                    iconName: 'RemoveVideoBackgroundEffect'
-                },
-                title: strings.removeBackgroundEffectButtonLabel,
-                tooltipProps: {
-                    content: strings.removeBackgroundTooltip
-                }
-            },
-            {
-                key: 'blur',
-                iconProps: {
-                    iconName: 'BlurVideoBackground'
-                },
-                title: strings.blurBackgroundEffectButtonLabel,
-                tooltipProps: {
-                    content: strings.blurBackgroundTooltip
-                }
-            }
-        ];
-        const videoEffectImages = props.adapter.getState().videoBackgroundImages;
-        if (videoEffectImages) {
-            videoEffectImages.forEach((img) => {
-                var _a;
-                videoEffects.push({
-                    key: img.key,
-                    backgroundProps: {
-                        url: img.url
-                    },
-                    tooltipProps: {
-                        content: (_a = img.tooltipText) !== null && _a !== void 0 ? _a : ''
-                    }
-                });
-            });
-        }
-        return videoEffects;
-    }, [strings, props.adapter]);
-    /* @conditional-compile-remove(video-background-effects) */
-    const onEffectChange = React.useCallback((effectKey) => __awaiter$8(void 0, void 0, void 0, function* () {
-        console.log(props.adapter.getState());
-        if (effectKey === 'blur') {
-            props.adapter.blurVideoBackground();
-        }
-        else if (effectKey === 'none') {
-            props.adapter.stopVideoBackgroundEffect();
-        }
-        else {
-            const backgroundImg = selectableVideoEffects.find((effect) => {
-                return effect.key === effectKey;
-            });
-            if (backgroundImg && backgroundImg.backgroundProps) {
-                props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
-            }
-        }
-    }), [props.adapter, selectableVideoEffects]);
-    return VideoEffectsPaneTrampoline(showVideoEffectsOptions, setshowVideoEffectsOptions, 
-    /* @conditional-compile-remove(video-background-effects) */
-    selectableVideoEffects, 
-    /* @conditional-compile-remove(video-background-effects) */
-    onEffectChange);
-};
-const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions, selectableVideoEffects, onEffectChange) => {
-    /* @conditional-compile-remove(video-background-effects) */
-    const locale = useLocale();
-    /* @conditional-compile-remove(video-background-effects) */
-    return (React__default['default'].createElement(react.Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React__default['default'].createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange }))));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private