fix: vb not applying on rejoin

100mslive · Jan 5, 2024 · 2616c7f · 2616c7f
1 parent 208feb5
commit 2616c7f
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json
diff --git a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { usePreviousDistinct } from 'react-use';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
+import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { useRoomLayout } from './provider/roomLayoutProvider';
 import { useRedirectToLeave } from './components/hooks/useRedirectToLeave';
 import {
@@ -60,6 +61,7 @@ export const useAppStateManager = () => {
     ) {
       const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
       setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
+      VBHandler.reset();
       redirectToLeave(1000); // to clear toasts after 1 second
     } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
       setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);

diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBHandler.tsx b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBHandler.tsx
@@ -67,6 +67,11 @@ export class VBPlugin {
       await this.hmsPlugin?.setBackground(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
     }
   };
+
+  reset = () => {
+    this.effectsPlugin = undefined;
+    this.hmsPlugin = undefined;
+  };
 }
 
 export const VBHandler = new VBPlugin();
diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx
@@ -53,6 +53,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
 
   useEffect(() => {
+    if (!track?.id) {
+      return;
+    }
     if (!isPluginAdded) {
       let vbObject = VBHandler.getVBObject();
       if (!vbObject) {
@@ -68,7 +71,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
         }
       }
     }
-  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey]);
+  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id]);
 
   useEffect(() => {
     if (!isVideoOn) {

diff --git a/yarn.lock b/yarn.lock
@@ -8787,7 +8787,7 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-effects-sdk@^2.5.3:
+effects-sdk@2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/effects-sdk/-/effects-sdk-2.6.8.tgz#ab34f9c83ce28d6b2d5db9fe522611db697009d4"
   integrity sha512-zNJxruPxmbyTc+T43PBmCqQ4m//FvSr90DzYnuWu7r8C78tle9Ile35xmFfNBuKixbEt0ul4IDAmpqQkO3IrcQ==