@100mslive/roomkit-react 0.3.8-alpha.0 → 0.3.8-alpha.1

package/src/Prebuilt/components/Header/StreamActions.tsx

@@ -20,12 +20,9 @@ import { ToastManager } from '../Toast/ToastManager';
 // @ts-ignore
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
-import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { useRecordingHandler } from '../../common/hooks';
 // @ts-ignore
 import { formatTime } from '../../common/utils';
-// @ts-ignore
-import { APP_DATA } from '../../common/constants';
 
 export const LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
@@ -147,7 +144,7 @@ export const RecordingPauseStatus = () => {
 const StartRecording = () => {
   const permissions = useHMSStore(selectPermissions);
   const [open, setOpen] = useState(false);
-  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  const { startRecording, recordingStarted } = useRecordingHandler();
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
   const hmsActions = useHMSActions();
   if (!permissions?.browserRecording || isHLSRunning) {
@@ -201,26 +198,7 @@ const StartRecording = () => {
       icon
       disabled={recordingStarted || isStreamingOn}
       onClick={async () => {
-        try {
-          setRecordingState(true);
-          await hmsActions.startRTMPOrRecording({
-            record: true,
-          });
-        } catch (error) {
-          const err = error as Error;
-          if (err.message.includes('stream already running')) {
-            ToastManager.addToast({
-              title: 'Recording already running',
-              variant: 'error',
-            });
-          } else {
-            ToastManager.addToast({
-              title: err.message,
-              variant: 'error',
-            });
-          }
-          setRecordingState(false);
-        }
+        await startRecording();
       }}
     >
       {recordingStarted ? <Loading size={24} color="currentColor" /> : <RecordIcon />}

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

@@ -54,7 +54,7 @@ import { useShowPolls } from '../../AppData/useUISettings';
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
+import { useLandscapeHLSStream, useMobileHLSStream, useRecordingHandler } from '../../../common/hooks';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
@@ -88,7 +88,6 @@ export const MwebOptions = ({
   const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
   const [showEmojiCard, setShowEmojiCard] = useState(false);
   const [showRecordingOn, setShowRecordingOn] = useState(false);
-  const [isRecordingLoading, setIsRecordingLoading] = useState(false);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const { showPolls } = useShowPolls();
   const togglePollView = usePollViewToggle();
@@ -102,7 +101,7 @@ export const MwebOptions = ({
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
-
+  const { startRecording, isRecordingLoading } = useRecordingHandler();
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
   const updateState = (modalName: string, value: boolean) => {
@@ -260,29 +259,8 @@ export const MwebOptions = ({
                     setShowRecordingOn(true);
                   } else {
                     // start recording
-                    setIsRecordingLoading(true);
-                    try {
-                      await hmsActions.startRTMPOrRecording({
-                        record: true,
-                      });
-                      setOpenOptionsSheet(false);
-                      setIsRecordingLoading(false);
-                    } catch (error) {
-                      // @ts-ignore
-                      if (error.message.includes('stream already running')) {
-                        ToastManager.addToast({
-                          title: 'Recording already running',
-                          variant: 'error',
-                        });
-                      } else {
-                        ToastManager.addToast({
-                          // @ts-ignore
-                          title: error.message,
-                          variant: 'error',
-                        });
-                      }
-                      setIsRecordingLoading(false);
-                    }
+                    await startRecording();
+                    setOpenOptionsSheet(false);
                   }
                   if (isHLSRunning) {
                     setOpenOptionsSheet(false);

package/src/Prebuilt/components/Notifications/PeerNotifications.tsx

@@ -7,11 +7,7 @@ import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../App
 // @ts-ignore: No implicit Any
 import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
-const notificationTypes = [
-  HMSNotificationTypes.PEER_LIST,
-  HMSNotificationTypes.PEER_JOINED,
-  HMSNotificationTypes.PEER_LEFT,
-];
+const notificationTypes = [HMSNotificationTypes.PEER_JOINED, HMSNotificationTypes.PEER_LEFT];
 
 export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
@@ -26,11 +22,6 @@ export const PeerNotifications = () => {
 
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
-      case HMSNotificationTypes.PEER_LIST:
-        if (!isPeerJoinSubscribed || notification.data.length === 0) {
-          return;
-        }
-        break;
       case HMSNotificationTypes.PEER_JOINED:
         if (!isPeerJoinSubscribed) {
           return;
@@ -47,7 +38,6 @@ export const PeerNotifications = () => {
       default:
         return;
     }
-
     ToastBatcher.showToast({ notification });
   }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]);
 

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

@@ -2,6 +2,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'reac
 import { useMeasure, useMedia } from 'react-use';
 import {
   HMSRoomState,
+  selectAppData,
   selectIsLocalVideoEnabled,
   selectLocalPeer,
   selectRoomState,
@@ -16,24 +17,17 @@ import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
 import { AudioLevel } from '../../../AudioLevel';
 import { useHMSPrebuiltContext } from '../../AppContext';
-// @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import SidePane from '../../layouts/SidePane';
-// @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
-// @ts-ignore: No implicit Any
 import Chip from '../Chip';
-// @ts-ignore: No implicit Any
 import TileConnection from '../Connection/TileConnection';
-// @ts-ignore: No implicit Any
 import FullPageProgress from '../FullPageProgress';
 // @ts-ignore: No implicit Any
 import { Logo } from '../Header/HeaderComponents';
 // @ts-ignore: No implicit Any
 import SettingsModal from '../Settings/SettingsModal';
-// @ts-ignore: No implicit Any
 import { VBToggle } from '../VirtualBackground/VBToggle';
-// @ts-ignore: No implicit Any
 import PreviewForm from './PreviewForm';
 import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
@@ -42,7 +36,7 @@ import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore: No implicit Any
 import { calculateAvatarAndAttribBoxSize, getFormattedCount } from '../../common/utils';
-import { UI_SETTINGS } from '../../common/constants';
+import { APP_DATA, UI_SETTINGS } from '../../common/constants';
 
 const getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
@@ -85,6 +79,7 @@ const PreviewJoin = ({
   const [previewError, setPreviewError] = useState(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants();
+  const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
   const { enableJoin, preview, join } = usePreviewJoin({
     name,
     token: authToken,
@@ -166,7 +161,7 @@ const PreviewJoin = ({
             name={name}
             disabled={!!initialName}
             onChange={setName}
-            enableJoin={enableJoin}
+            enableJoin={enableJoin && !loadingEffects}
             onJoin={savePreferenceAndJoin}
             cannotPublishVideo={!toggleVideo}
             cannotPublishAudio={!toggleAudio}

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

@@ -3,14 +3,11 @@ import { useSearchParam } from 'react-use';
 import { Flex } from '../../..';
 import { useHMSPrebuiltContext } from '../../AppContext';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
-// @ts-ignore: No implicit Any
 import FullPageProgress from '../FullPageProgress';
-// @ts-ignore: No implicit Any
 import PreviewJoin from './PreviewJoin';
 import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useAuthToken } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
 export const PreviewScreen = () => {

package/src/Prebuilt/components/Settings/StartRecording.jsx

@@ -4,27 +4,13 @@ import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
 import { ToastManager } from '../Toast/ToastManager';
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
-
-export function getResolution(recordingResolution) {
-  const resolution = {};
-  if (recordingResolution.width) {
-    resolution.width = recordingResolution.width;
-  }
-  if (recordingResolution.height) {
-    resolution.height = recordingResolution.height;
-  }
-  if (Object.keys(resolution).length > 0) {
-    return resolution;
-  }
-}
+import { useRecordingHandler } from '../../common/hooks';
+import { RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
 
 const StartRecording = ({ open, onOpenChange }) => {
   const permissions = useHMSStore(selectPermissions);
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
-
-  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  const { startRecording, recordingStarted } = useRecordingHandler();
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
   const hmsActions = useHMSActions();
   if (!permissions?.browserRecording || isHLSRunning) {
@@ -101,26 +87,7 @@ const StartRecording = ({ open, onOpenChange }) => {
           type="submit"
           disabled={recordingStarted || isStreamingOn}
           onClick={async () => {
-            try {
-              setRecordingState(true);
-              await hmsActions.startRTMPOrRecording({
-                resolution: getResolution(resolution),
-                record: true,
-              });
-            } catch (error) {
-              if (error.message.includes('stream already running')) {
-                ToastManager.addToast({
-                  title: 'Recording already running',
-                  variant: 'error',
-                });
-              } else {
-                ToastManager.addToast({
-                  title: error.message,
-                  variant: 'error',
-                });
-              }
-              setRecordingState(false);
-            }
+            await startRecording(resolution);
             onOpenChange(false);
           }}
         >

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -72,28 +72,6 @@ const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true },
 });
 
 export const ToastConfig = {
-  PEER_LIST: {
-    single: function (notification) {
-      if (notification.data.length === 1) {
-        return {
-          title: `${notification.data[0]?.name} joined`,
-          icon: <PeopleAddIcon />,
-        };
-      }
-      return {
-        title: `${notification.data[notification.data.length - 1]?.name} and ${
-          notification.data.length - 1
-        } others joined`,
-        icon: <PeopleAddIcon />,
-      };
-    },
-    multiple: notifications => {
-      return {
-        title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-        icon: <PeopleAddIcon />,
-      };
-    },
-  },
   PEER_JOINED: {
     single: function (notification) {
       return {

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

@@ -4,12 +4,12 @@ export class VBPlugin {
   private hmsPlugin?: HMSVBPlugin;
   private effectsPlugin?: HMSEffectsPlugin | undefined;
 
-  initialisePlugin = (effectsSDKKey?: string) => {
+  initialisePlugin = (effectsSDKKey?: string, onInit?: () => void) => {
     if (this.getVBObject()) {
       return;
     }
     if (effectsSDKKey) {
-      this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey);
+      this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
     } else {
       this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
     }
@@ -70,7 +70,7 @@ export class VBPlugin {
     }
   };
 
-  setPreset = async (preset: string) => {
+  setPreset = async (preset: 'quality' | 'balanced') => {
     if (this.effectsPlugin) {
       await this.effectsPlugin.setPreset(preset);
     }

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

@@ -28,7 +28,9 @@ const Root = ({
       '&:hover': { border: '4px solid $primary_dim' },
       ...(mediaURL ? { height: '$20', backgroundImage: `url(${mediaURL})`, backgroundSize: 'cover' } : {}),
     }}
-    onClick={async () => await onClick?.()}
+    onClick={async () => {
+      await onClick?.();
+    }}
   >
     {children}
   </Flex>

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   selectAppData,
   selectEffectsKey,
@@ -19,14 +20,14 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex, Slider, Video } from '../../../index';
+import { Box, config as cssConfig, Flex, Loading, Slider, Video } from '../../../index';
 import { Text } from '../../../Text';
 import { VBCollection } from './VBCollection';
 import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore
-import { useUISettings } from '../AppData/useUISettings';
+import { useSetAppDataByKey, useUISettings } from '../AppData/useUISettings';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
 import { defaultMedia } from './constants';
 
@@ -46,6 +47,8 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const effectsKey = useHMSStore(selectEffectsKey);
+  const isMobile = useMedia(cssConfig.media.md);
+  const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
   const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
   const background = useHMSStore(selectAppData(APP_DATA.background));
   const mediaList = backgroundMedia.length
@@ -61,13 +64,15 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
       return;
     }
     if (!isPluginAdded) {
+      setLoadingEffects(true);
       let vbObject = VBHandler.getVBObject();
       if (!vbObject) {
-        VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : '');
+        VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : '', () => setLoadingEffects(false));
         vbObject = VBHandler.getVBObject();
         if (isEffectsEnabled && effectsKey) {
           hmsActions.addPluginsToVideoStream([vbObject as HMSEffectsPlugin]);
         } else {
+          setLoadingEffects(false);
           if (!role) {
             return;
           }
@@ -89,19 +94,30 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
       };
       handleDefaultBackground();
     }
-  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id, background, blurAmount]);
+  }, [
+    hmsActions,
+    role,
+    isPluginAdded,
+    isEffectsEnabled,
+    effectsKey,
+    track?.id,
+    background,
+    blurAmount,
+    setLoadingEffects,
+  ]);
 
   useEffect(() => {
     if (!isVideoOn) {
       toggleVB();
     }
-  }, [isVideoOn, toggleVB]);
+    return () => setLoadingEffects(false);
+  }, [isVideoOn, setLoadingEffects, toggleVB]);
 
   return (
     <Flex css={{ pr: '$6', size: '100%' }} direction="column">
       <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
-        <Text variant="h6" css={{ color: '$on_surface_high' }}>
-          Virtual Background
+        <Text variant="h6" css={{ color: '$on_surface_high', display: 'flex', alignItems: 'center' }}>
+          Virtual Background {isMobile && loadingEffects ? <Loading size={18} style={{ marginLeft: '0.5rem' }} /> : ''}
         </Text>
         <Box
           css={{ color: '$on_surface_high', '&:hover': { color: '$on_surface_medium' }, cursor: 'pointer' }}

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

@@ -1,17 +1,19 @@
 import React from 'react';
-import { selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
+import { selectAppData, selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
+import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
 // @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-import { isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
+import { APP_DATA, isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const VBToggle = () => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
+  const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
 
   if (!isVideoOn || (!isEffectsEnabled && isSafari)) {
     return null;
@@ -20,7 +22,7 @@ export const VBToggle = () => {
   return (
     <Tooltip side="top" disabled={isVBOpen} title="Configure Virtual Background">
       <IconButton active={!isVBOpen} onClick={toggleVB} data-testid="virtual_bg_btn">
-        <VirtualBackgroundIcon />
+        {loadingEffects ? <Loading size={18} /> : <VirtualBackgroundIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -6,7 +6,6 @@ import {
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
@@ -25,7 +24,6 @@ import {
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-// @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
 // @ts-ignore: No implicit Any