@azure/communication-react 1.5.1-alpha-202304172318 → 1.5.1-alpha-202304180012

package/dist/communication-react.d.ts

@@ -2646,6 +2646,8 @@ export declare interface CallWithChatClientState {
     environmentInfo?: EnvironmentInfo;
     /** Default set of background images for background replacement effect */
     videoBackgroundImages?: VideoBackgroundImage[];
+    /** State to track the selected video background effect */
+    selectedVideoBackgroundEffect?: SelectedVideoBackgroundEffect;
 }
 
 /**

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-202304172318';
+var telemetryVersion = '1.5.1-alpha-202304180012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -19365,6 +19365,11 @@ const getDominantSpeakerInfo = (state) => { var _a; return (_a = state.call) ===
  * @private
  */
 const getRemoteParticipants = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.remoteParticipants; };
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @private
+ */
+const getSelectedVideoEffect = (state) => state.selectedVideoBackgroundEffect;
 /* @conditional-compile-remove(close-captions) */
 /**
  * @private
@@ -21788,6 +21793,22 @@ const PreparedMoreDrawer = (props) => {
     return React__default['default'].createElement(MoreDrawer, Object.assign({}, props, deviceProps, callHandlers, { strings: moreDrawerStrings }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @private
+ */
+const activeVideoBackgroundEffectSelector = reselect__namespace.createSelector([getSelectedVideoEffect], (selectedVideoBackgroundEffect) => {
+    if (selectedVideoBackgroundEffect &&
+        (selectedVideoBackgroundEffect.effectName === 'blur' || selectedVideoBackgroundEffect.effectName === 'none')) {
+        return selectedVideoBackgroundEffect.effectName;
+    }
+    else if (selectedVideoBackgroundEffect && selectedVideoBackgroundEffect.effectName === 'replacement') {
+        return selectedVideoBackgroundEffect === null || selectedVideoBackgroundEffect === void 0 ? void 0 : selectedVideoBackgroundEffect.effectKey;
+    }
+    return 'none';
+});
+
 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) {
@@ -21807,6 +21828,8 @@ const VideoEffectsPane = (props) => {
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(video-background-effects) */
     const strings = locale.strings.call;
     /* @conditional-compile-remove(video-background-effects) */
     const selectableVideoEffects = React.useMemo(() => {
@@ -21832,7 +21855,7 @@ const VideoEffectsPane = (props) => {
                 }
             }
         ];
-        const videoEffectImages = props.adapter.getState().videoBackgroundImages;
+        const videoEffectImages = adapter.getState().videoBackgroundImages;
         if (videoEffectImages) {
             videoEffectImages.forEach((img) => {
                 var _a;
@@ -21848,22 +21871,22 @@ const VideoEffectsPane = (props) => {
             });
         }
         return videoEffects;
-    }, [strings, props.adapter]);
+    }, [strings, adapter]);
     /* @conditional-compile-remove(video-background-effects) */
     const onEffectChange = React.useCallback((effectKey) => __awaiter$9(void 0, void 0, void 0, function* () {
         if (effectKey === 'blur') {
             const blurEffect = {
                 effectName: effectKey
             };
-            props.adapter.updateSelectedVideoBackgroundEffect(blurEffect);
-            yield props.adapter.blurVideoBackground();
+            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
+            yield adapter.blurVideoBackground();
         }
         else if (effectKey === 'none') {
             const noneEffect = {
                 effectName: effectKey
             };
-            props.adapter.updateSelectedVideoBackgroundEffect(noneEffect);
-            yield props.adapter.stopVideoBackgroundEffect();
+            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
+            yield adapter.stopVideoBackgroundEffect();
         }
         else {
             const backgroundImg = selectableVideoEffects.find((effect) => {
@@ -21875,11 +21898,11 @@ const VideoEffectsPane = (props) => {
                     effectKey,
                     backgroundImageUrl: backgroundImg.backgroundProps.url
                 };
-                props.adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
-                yield props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
+                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
+                yield adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
             }
         }
-    }), [props.adapter, selectableVideoEffects]);
+    }), [adapter, selectableVideoEffects]);
     return VideoEffectsPaneTrampoline(showVideoEffectsOptions, setshowVideoEffectsOptions, 
     /* @conditional-compile-remove(video-background-effects) */
     selectableVideoEffects, 
@@ -21890,7 +21913,9 @@ const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffects
     /* @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 }))));
+    const selectedEffect = useSelector$1(activeVideoBackgroundEffectSelector);
+    /* @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, selectedEffectKey: selectedEffect }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22045,7 +22070,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                     callPaneContent()),
                 /* @conditional-compile-remove(video-background-effects) */
-                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane, adapter: adapter })))));
+                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane })))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
@@ -23383,7 +23408,7 @@ const ConfigurationPage = (props) => {
                 React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
                     React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton })))),
         /* @conditional-compile-remove(video-background-effects) */
-        React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setVideoEffectsPane, adapter: adapter })));
+        React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setVideoEffectsPane })));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
     /* @conditional-compile-remove(rooms) */
@@ -25275,7 +25300,9 @@ function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
         /* @conditional-compile-remove(unsupported-browser) */
         environmentInfo: callWithChatAdapterState.environmentInfo,
         /* @conditional-compile-remove(video-background-effects) */
-        videoBackgroundImages: callWithChatAdapterState.videoBackgroundImages
+        videoBackgroundImages: callWithChatAdapterState.videoBackgroundImages,
+        /* @conditional-compile-remove(video-background-effects) */
+        selectedVideoBackgroundEffect: callWithChatAdapterState.selectedVideoBackgroundEffect
     };
 }
 
@@ -25628,7 +25655,8 @@ const CallWithChatScreen = (props) => {
                     style: callCompositeContainerCSS },
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme }))),
                 /* @conditional-compile-remove(video-background-effects) */
-                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane, adapter: callAdapter }),
+                React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
+                    React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane })),
                 chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
                     fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),
@@ -25728,7 +25756,9 @@ function callWithChatAdapterStateFromBackingStates(callAdapter, chatAdapter) {
         /* @conditional-compile-remove(unsupported-browser) */
         environmentInfo: callAdapterState.environmentInfo,
         /* @conditional-compile-remove(video-background-effects) */
-        videoBackgroundImages: callAdapterState.videoBackgroundImages
+        videoBackgroundImages: callAdapterState.videoBackgroundImages,
+        /* @conditional-compile-remove(video-background-effects) */
+        selectedVideoBackgroundEffect: callAdapterState.selectedVideoBackgroundEffect
     };
 }
 /**
@@ -25745,7 +25775,9 @@ function mergeChatAdapterStateIntoCallWithChatAdapterState(existingCallWithChatA
 function mergeCallAdapterStateIntoCallWithChatAdapterState(existingCallWithChatAdapterState, callAdapterState) {
     return Object.assign(Object.assign({}, existingCallWithChatAdapterState), { userId: callAdapterState.userId, page: callAdapterState.page, displayName: callAdapterState.displayName, devices: callAdapterState.devices, call: callAdapterState.call, isLocalPreviewMicrophoneEnabled: callAdapterState.isLocalPreviewMicrophoneEnabled, isTeamsCall: callAdapterState.isTeamsCall, latestCallErrors: callAdapterState.latestErrors, 
         /* @conditional-compile-remove(video-background-effects) */
-        videoBackgroundImages: callAdapterState.videoBackgroundImages });
+        videoBackgroundImages: callAdapterState.videoBackgroundImages, 
+        /* @conditional-compile-remove(video-background-effects) */
+        selectedVideoBackgroundEffect: callAdapterState.selectedVideoBackgroundEffect });
 }
 
 // Copyright (c) Microsoft Corporation.