Update publish-alpha (#2522)

* fix: show trophy only if peer has a score * fix: preserve attempted polls * feat: default vb set by layout
100mslive · Feb 14, 2024 · b25e9e2 · b25e9e2
1 parent 21fe3fa
commit b25e9e2
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 201 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx
@@ -96,8 +96,8 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
     ref,
   ) => {
     const reactiveStore = useRef<HMSPrebuiltRefType>();
-
     const [hydrated, setHydrated] = React.useState(false);
+
     useEffect(() => {
       setHydrated(true);
       const hms = new HMSReactiveStore();
@@ -122,14 +122,13 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       (ref as MutableRefObject<HMSPrebuiltRefType>).current = { ...reactiveStore.current };
     }, [ref]);
 
-    // leave room when component unmounts
-    useEffect(
-      () => () => {
+    useEffect(() => {
+      // leave room when component unmounts
+      return () => {
         VBHandler.reset();
         reactiveStore?.current?.hmsActions.leave();
-      },
-      [],
-    );
+      };
+    }, []);
 
     const endpointsObj = endpoints as
       | {
@@ -214,7 +213,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                         },
                       }}
                     >
-                      <AppData />
                       <Init />
                       <DialogContainerProvider dialogContainerSelector={containerSelector}>
                         <Box
@@ -291,6 +289,7 @@ function AppRoutes({
   return (
     <AppStateContext.Provider value={{ rejoin }}>
       <>
+        {activeState !== PrebuiltStates.LEAVE && <AppData />}
         <ToastContainer />
         <Notifications />
         <MwebLandscapePrompt />

diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.ts b/packages/roomkit-react/src/Prebuilt/common/constants.ts
@@ -46,8 +46,8 @@ export const APP_DATA = {
   disableNotifications: 'disableNotifications',
   pollState: 'pollState',
   background: 'background',
-  backgroundType: 'backgroundType',
 };
+
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
   maxTileCount: 'maxTileCount',

diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx
@@ -10,6 +10,7 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { LayoutMode } from '../Settings/LayoutSettings';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 //@ts-ignore
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore
@@ -60,7 +61,6 @@ const initialAppData = {
   [APP_DATA.activeScreensharePeerId]: '',
   [APP_DATA.disableNotifications]: false,
   [APP_DATA.background]: 'none',
-  [APP_DATA.backgroundType]: 'none',
   [APP_DATA.pollState]: {
     [POLL_STATE.pollInView]: '',
     [POLL_STATE.view]: '',
@@ -71,6 +71,8 @@ export const AppData = React.memo(() => {
   const hmsActions = useHMSActions();
   const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
   const appData = useHMSStore(selectFullAppData);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
 
   useEffect(() => {
     hmsActions.initAppData({
@@ -103,6 +105,19 @@ export const AppData = React.memo(() => {
     hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);
   }, [preferences.subscribedNotifications, hmsActions]);
 
+  useEffect(() => {
+    let defaultMediaURL;
+    elements?.virtual_background?.background_media?.forEach(media => {
+      if (media.default && media.url) {
+        defaultMediaURL = media.url;
+      }
+    });
+    if (defaultMediaURL) {
+      hmsActions.setAppData(APP_DATA.background, defaultMediaURL);
+      toggleVB();
+    }
+  }, [hmsActions, elements?.virtual_background?.background_media, toggleVB]);
+
   return <ResetStreamingStart />;
 });
 

diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx
@@ -103,7 +103,6 @@ const PreviewJoin = ({
     asRole,
   });
   const roomState = useHMSStore(selectRoomState);
-
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
       name,

diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx b/packages/roomkit-react/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>

diff --git a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
diff --git a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/vbutils.js b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/vbutils.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -103,7 +103,6 @@ const PreviewJoin = ({ @@
         asRole,
       });
       const roomState = useHMSStore(selectRoomState);
       const savePreferenceAndJoin = useCallback(() => {
         setPreviewPreference({
           name,
@@ Expand Down @@