@100mslive/roomkit-react 0.2.6-alpha.2 → 0.2.6-alpha.3

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { selectEffectsKey, selectIsEffectsEnabled, selectLocalPeerRole } from '@100mslive/hms-video-store';
+import {
+  selectAppData,
+  selectEffectsKey,
+  selectIsEffectsEnabled,
+  selectLocalPeerRole,
+} from '@100mslive/hms-video-store';
 import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
 import {
@@ -22,7 +27,7 @@ import { VBHandler } from './VBHandler';
 import { useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore
 import { useUISettings } from '../AppData/useUISettings';
-import { SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
+import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
 import { defaultMedia } from './constants';
 
 const iconDims = { height: '40px', width: '40px' };
@@ -42,9 +47,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const effectsKey = useHMSStore(selectEffectsKey);
   const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
-  const [activeBackground, setActiveBackground] = useState<string | HMSVirtualBackgroundTypes>(
-    (VBHandler?.getBackground() as string | HMSVirtualBackgroundTypes) || HMSVirtualBackgroundTypes.NONE,
-  );
+  const background = useHMSStore(selectAppData(APP_DATA.background));
   const mediaList = backgroundMedia.length
     ? backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || '')
     : defaultMedia;
@@ -71,8 +74,22 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
           hmsActions.addPluginToVideoTrack(vbObject as HMSVBPlugin, Math.floor(role.publishParams.video.frameRate / 2));
         }
       }
+      const handleDefaultBackground = async () => {
+        switch (background) {
+          case HMSVirtualBackgroundTypes.NONE: {
+            break;
+          }
+          case HMSVirtualBackgroundTypes.BLUR: {
+            await VBHandler.setBlur(blurAmount);
+            break;
+          }
+          default:
+            await VBHandler.setBackground(background);
+        }
+      };
+      handleDefaultBackground();
     }
-  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id]);
+  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id, background, blurAmount]);
 
   useEffect(() => {
     if (!isVideoOn) {
@@ -120,7 +137,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               value: HMSVirtualBackgroundTypes.NONE,
               onClick: async () => {
                 await VBHandler.removeEffects();
-                setActiveBackground(HMSVirtualBackgroundTypes.NONE);
+                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
               },
             },
             {
@@ -129,16 +146,16 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               value: HMSVirtualBackgroundTypes.BLUR,
               onClick: async () => {
                 await VBHandler?.setBlur(blurAmount);
-                setActiveBackground(HMSVirtualBackgroundTypes.BLUR);
+                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
               },
             },
           ]}
-          activeBackground={activeBackground}
+          activeBackground={background}
         />
 
         {/* Slider */}
         <Flex direction="column" css={{ w: '100%', gap: '$8', mt: '$8' }}>
-          {activeBackground === HMSVirtualBackgroundTypes.BLUR && isEffectsEnabled && effectsKey ? (
+          {background === HMSVirtualBackgroundTypes.BLUR && isEffectsEnabled && effectsKey ? (
             <Box>
               <Text variant="sm" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mb: '$4' }}>
                 Blur intensity
@@ -173,10 +190,10 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
             value: mediaURL,
             onClick: async () => {
               await VBHandler?.setBackground(mediaURL);
-              setActiveBackground(mediaURL);
+              hmsActions.setAppData(APP_DATA.background, mediaURL);
             },
           }))}
-          activeBackground={activeBackground}
+          activeBackground={background}
         />
       </Box>
     </Flex>