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

package/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',

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -1,15 +1,19 @@
 import React, { useEffect } from 'react';
+import { useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectFullAppData,
   selectHLSState,
   selectRoomState,
   selectRTMPState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
 import { LayoutMode } from '../Settings/LayoutSettings';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 //@ts-ignore
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore
@@ -60,7 +64,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 +74,10 @@ 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);
+  const isMobile = useMedia(cssConfig.media.md);
+  const { isLocalVideoEnabled } = useAVToggle();
 
   useEffect(() => {
     hmsActions.initAppData({
@@ -103,6 +110,21 @@ 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);
+      if (isLocalVideoEnabled && !isMobile) {
+        toggleVB();
+      }
+    }
+  }, [hmsActions, elements?.virtual_background?.background_media, toggleVB, isLocalVideoEnabled, isMobile]);
+
   return <ResetStreamingStart />;
 });
 

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -12,7 +12,7 @@ export const SpeakerTag = () => {
       <Flex
         align="center"
         justify="center"
-        css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
+        css={{ flex: '1 1 0', color: '$on_surface_high', '@md': { display: 'none' } }}
       >
         <VerticalDivider css={{ ml: '$8' }} />
         <VolumeOneIcon />

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -22,7 +22,6 @@ import {
   QuizIcon,
   RecordIcon,
   SettingsIcon,
-  VirtualBackgroundIcon,
 } from '@100mslive/react-icons';
 import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
@@ -91,10 +90,10 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { toggleAudio, toggleVideo, isLocalVideoEnabled } = useAVToggle();
+  const { toggleAudio, toggleVideo } = useAVToggle();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  // const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -181,7 +180,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null}
 
-            {isLocalVideoEnabled && !!elements?.virtual_background ? (
+            {/* {isLocalVideoEnabled && !!elements?.virtual_background ? (
               <ActionTile.Root
                 onClick={() => {
                   toggleVB();
@@ -191,7 +190,7 @@ export const MwebOptions = ({
                 <VirtualBackgroundIcon />
                 <ActionTile.Title>Virtual Background</ActionTile.Title>
               </ActionTile.Root>
-            ) : null}
+            ) : null} */}
 
             {elements?.emoji_reactions && (
               <ActionTile.Root

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -103,7 +103,6 @@ const PreviewJoin = ({
     asRole,
   });
   const roomState = useHMSStore(selectRoomState);
-
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
       name,
@@ -268,7 +267,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {vbEnabled ? <VBToggle /> : null}
+        {vbEnabled && !isMobile ? <VBToggle /> : null}
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/ScreenshareTile.tsx

@@ -95,7 +95,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; wid
             {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
           </StyledVideoTile.FullScreenButton>
         ) : null}
-        {!isMobile && isMouseHovered && (
+        {!isMobile && isMouseHovered && !isFullscreen && (
           <Box
             css={{
               position: 'absolute',

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

@@ -70,9 +70,9 @@ export class VBPlugin {
     }
   };
 
-  setPreset = (preset: string) => {
+  setPreset = async (preset: string) => {
     if (this.effectsPlugin) {
-      this.effectsPlugin.setPreset(preset);
+      await this.effectsPlugin.setPreset(preset);
     }
   };
 

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>

package/src/Prebuilt/layouts/HLSView.jsx

@@ -308,8 +308,7 @@ const HLSView = () => {
           align="center"
           justify="center"
           css={{
-            width:
-              videoRef.current && videoRef.current.clientWidth <= 720 ? `${videoRef.current.clientWidth}px` : '100%',
+            width: '100%',
             margin: '0 auto',
             height: '100%',
           }}