If video effect fails, none effect in picker is highlighted (#3334)

* If video effect fails, none effect in picker is highlighted

* Change files

* Duplicate change files for beta release

* Minor changes

Author: prabhjot-msft

change-beta/@azure-communication-react-abbcdab6-5d50-4d8d-b687-1508eea7dbf6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "If video effect fails, none effect in picker is highlighted",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-abbcdab6-5d50-4d8d-b687-1508eea7dbf6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "If video effect fails, none effect in picker is highlighted",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/adapter/CallAdapter.ts

@@ -300,7 +300,6 @@ export type VideoBackgroundEffect =
   | VideoBackgroundBlurEffect
   | VideoBackgroundReplacementEffect;
 
-/* @conditional-compile-remove(video-background-effects) */
 /**
  * Contains the attibutes to remove video background effect
  *

packages/react-composites/src/composites/CallComposite/selectors/localVideoStreamSelector.ts

@@ -25,7 +25,9 @@ export const localVideoSelector = reselect.createSelector(
     return {
       isAvailable: !!localVideoStream,
       isMirrored: localVideoStream?.view?.isMirrored,
-      renderElement: localVideoStream?.view?.target
+      renderElement: localVideoStream?.view?.target,
+      /* @conditional-compile-remove(video-background-effects) */
+      activeVideoEffects: localVideoStream?.videoEffects
     };
   }
 );

packages/react-composites/src/composites/common/VideoEffectsPane.tsx

@@ -50,6 +50,8 @@ export const VideoEffectsPaneContent = (props: {
   /* @conditional-compile-remove(video-background-effects) */
   const strings = locale.strings.call;
   /* @conditional-compile-remove(video-background-effects) */
+  const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;
+  /* @conditional-compile-remove(video-background-effects) */
   const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {
     const videoEffects: _VideoEffectsItemProps[] = [
       {
@@ -98,18 +100,18 @@ export const VideoEffectsPaneContent = (props: {
         const blurEffect: VideoBackgroundBlurEffect = {
           effectName: effectKey
         };
-        adapter.updateSelectedVideoBackgroundEffect(blurEffect);
         activeVideoEffectChange({
           type: 'blur',
           timestamp: new Date(Date.now())
         });
         await adapter.startVideoBackgroundEffect(blurEffect);
+        adapter.updateSelectedVideoBackgroundEffect(blurEffect);
       } else if (effectKey === 'none') {
         const noneEffect: VideoBackgroundNoEffect = {
           effectName: effectKey
         };
-        adapter.updateSelectedVideoBackgroundEffect(noneEffect);
         await adapter.stopVideoBackgroundEffects();
+        adapter.updateSelectedVideoBackgroundEffect(noneEffect);
       } else {
         const backgroundImg = selectableVideoEffects.find((effect) => {
           return effect.itemKey === effectKey;
@@ -120,17 +122,25 @@ export const VideoEffectsPaneContent = (props: {
             key: effectKey,
             backgroundImageUrl: backgroundImg.backgroundProps.url
           };
-          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
           activeVideoEffectChange({
             type: 'replacement',
             timestamp: new Date(Date.now())
           });
           await adapter.startVideoBackgroundEffect(replaceEffect);
+          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
         }
       }
     },
     [adapter, activeVideoEffectChange, selectableVideoEffects]
   );
+
+  /* @conditional-compile-remove(video-background-effects) */
+  if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {
+    const noneEffect: VideoBackgroundNoEffect = {
+      effectName: 'none'
+    };
+    adapter.updateSelectedVideoBackgroundEffect(noneEffect);
+  }
   return VideoEffectsPaneTrampoline(
     onDismissError,
     activeVideoEffectError,