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

package/src/Prebuilt/common/hooks.ts

@@ -3,20 +3,27 @@ import { useMedia } from 'react-use';
 import { HMSHLSPlayer } from '@100mslive/hls-player';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
+  HMSRecording,
   parsedUserAgent,
   selectAvailableRoleNames,
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPeerMetadata,
   selectPeers,
+  selectRecordingState,
   selectRemotePeers,
+  useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit any
+import { ToastManager } from '../components/Toast/ToastManager';
 import { config } from '../../Theme';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
+// @ts-ignore
+import { useSetAppDataByKey } from '../components/AppData/useUISettings';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { CHAT_SELECTOR } from './constants';
+import { APP_DATA, CHAT_SELECTOR, RTMP_RECORD_DEFAULT_RESOLUTION } from './constants';
 /**
  * Hook to execute a callback when alone in room(after a certain 5d of time)
  * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,
@@ -147,3 +154,67 @@ export const useKeyboardHandler = (isPaused: boolean, hlsPlayer: HMSHLSPlayer) =
 
   return handleKeyEvent;
 };
+export interface RTMPRecordingResolution {
+  width: number;
+  height: number;
+}
+export const useRecordingHandler = () => {
+  const hmsActions = useHMSActions();
+  const recordingState: HMSRecording = useHMSStore(selectRecordingState);
+  const [isRecordingLoading, setIsRecordingLoading] = useState(false);
+  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  useEffect(() => {
+    if (recordingState.browser.error && recordingStarted) {
+      setRecordingState(false);
+    }
+  }, [recordingStarted, recordingState.browser.error, setRecordingState]);
+  const startRecording = useCallback(
+    async (resolution: RTMPRecordingResolution | null = null) => {
+      try {
+        setRecordingState(true);
+        setIsRecordingLoading(true);
+        await hmsActions.startRTMPOrRecording({
+          resolution: getResolution(resolution),
+          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);
+      }
+      setIsRecordingLoading(false);
+    },
+    [hmsActions, setRecordingState],
+  );
+  return {
+    recordingStarted,
+    startRecording,
+    isRecordingLoading,
+  };
+};
+
+export function getResolution(
+  recordingResolution: RTMPRecordingResolution | null,
+): RTMPRecordingResolution | undefined {
+  if (!recordingResolution) {
+    return undefined;
+  }
+  const resolution: RTMPRecordingResolution = RTMP_RECORD_DEFAULT_RESOLUTION;
+  if (recordingResolution.width) {
+    resolution.width = recordingResolution.width;
+  }
+  if (recordingResolution.height) {
+    resolution.height = recordingResolution.height;
+  }
+  return resolution;
+}

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

@@ -62,6 +62,7 @@ const initialAppData = {
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
   [APP_DATA.disableNotifications]: false,
+  [APP_DATA.loadingEffects]: false,
   [APP_DATA.background]: 'none',
   [APP_DATA.pollState]: {
     [POLL_STATE.pollInView]: '',

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -22,7 +22,6 @@ import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
 import { EmojiReaction } from './EmojiReaction';
-// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
@@ -34,7 +33,6 @@ import {
 // @ts-ignore: No implicit Any
 import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-// @ts-ignore: No implicit Any
 import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 export const ConferenceScreen = () => {

package/src/Prebuilt/components/{FullPageProgress.jsx → FullPageProgress.tsx}

@@ -2,8 +2,17 @@ import React from 'react';
 import { Flex } from '../../Layout';
 import { Loading } from '../../Loading';
 import { Text } from '../../Text';
+import { CSS } from '../../Theme';
 
-const FullPageProgress = ({ loaderColor = '$primary_default', text = '', css = {} }) => (
+const FullPageProgress = ({
+  loaderColor = '$primary_default',
+  text = '',
+  css = {},
+}: {
+  loaderColor?: string;
+  text?: string;
+  css?: CSS;
+}) => (
   <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor, ...css }}>
     <Loading color="currentColor" size={100} />
     {text ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{text}</Text> : null}

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
-import { getPercentage } from './utils';
+import { getDuration, getPercentage } from './utils';
 
 export const VideoProgress = ({
   seekProgress,
@@ -19,7 +19,7 @@ export const VideoProgress = ({
     if (!videoEl) {
       return;
     }
-    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+    const duration = getDuration(videoEl);
     const videoProgress = Math.floor(getPercentage(videoEl.currentTime, duration));
     let bufferProgress = 0;
     if (videoEl.buffered.length > 0) {
@@ -42,6 +42,7 @@ export const VideoProgress = ({
     if (!videoEl) {
       return;
     }
+    setProgress();
     videoEl.addEventListener('timeupdate', timeupdateHandler);
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);

package/src/Prebuilt/components/HMSVideo/VideoTime.tsx

@@ -1,30 +1,39 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import { Text } from '../../../Text';
 import { useHMSPlayerContext } from './PlayerContext';
-import { getDurationFromSeconds } from './utils';
+import { getDuration, getDurationFromSeconds } from './utils';
 
 export const VideoTime = () => {
   const { hlsPlayer } = useHMSPlayerContext();
-  const [videoTime, setVideoTime] = useState('');
 
-  useEffect(() => {
-    const timeupdateHandler = (currentTime: number) => {
+  const [videoTime, setVideoTime] = useState(getDurationFromSeconds(0));
+
+  const updateTime = useCallback(
+    (currentTime: number) => {
       const videoEl = hlsPlayer?.getVideoElement();
       if (videoEl) {
-        const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
+        const duration = getDuration(videoEl);
         setVideoTime(getDurationFromSeconds(duration - currentTime));
       } else {
         setVideoTime(getDurationFromSeconds(currentTime));
       }
+    },
+    [hlsPlayer],
+  );
+  useEffect(() => {
+    const timeupdateHandler = (currentTime: number) => {
+      updateTime(currentTime);
     };
     if (hlsPlayer) {
       hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+      const videoEl = hlsPlayer?.getVideoElement();
+      updateTime(videoEl.currentTime);
     }
     return function cleanup() {
       hlsPlayer?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
-  }, [hlsPlayer]);
+  }, [hlsPlayer, updateTime]);
 
   return hlsPlayer ? (
     <Text

package/src/Prebuilt/components/HMSVideo/utils.ts

@@ -25,3 +25,13 @@ export function getDurationFromSeconds(timeInSeconds: number) {
   }
   return videoTimeStr;
 }
+
+export function getDuration(videoEl: HTMLVideoElement): number {
+  if (isFinite(videoEl.duration)) {
+    return videoEl.duration;
+  }
+  if (videoEl.seekable.length > 0) {
+    return videoEl.seekable.end(0);
+  }
+  return 0;
+}

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/RoomDetails/RoomDetailsPane.tsx

@@ -15,7 +15,7 @@ export const RoomDetailsPane = () => {
   const { description } = useRoomLayoutHeader();
   const isMwebHLSStream = useMobileHLSStream();
   return (
-    <Box css={{ flex: '1 1 0' }}>
+    <Box css={{ flex: '1 1 0', position: 'relative' }}>
       {isMwebHLSStream ? (
         <Flex direction="row" align="center" gap="2">
           <Logo />
@@ -41,7 +41,7 @@ const ShowRoomDetailHeader = () => {
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const isMwebHLSStream = useMobileHLSStream();
   return (
-    <Flex direction="column">
+    <Flex direction="column" css={{ position: 'sticky', top: 0, bg: '$surface_dim' }}>
       <Flex justify="between" align="center" css={{ w: '100%' }}>
         <Text variant="h6">{title}</Text>
         {!isMwebHLSStream && (

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>