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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.8-alpha.0",
+  "version": "0.3.8-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.8-alpha.0",
+    "@100mslive/hls-player": "0.3.8-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.8-alpha.0",
-    "@100mslive/react-icons": "0.10.8-alpha.0",
-    "@100mslive/react-sdk": "0.10.8-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.8-alpha.2",
+    "@100mslive/react-icons": "0.10.8-alpha.2",
+    "@100mslive/react-sdk": "0.10.8-alpha.2",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "01f2b5f23cc814beb7f077b46b6736f1e00ceaad"
+  "gitHead": "43ee35cc85faabb5a827f7f41a5affebffcfca18"
 }

package/src/Prebuilt/common/constants.ts

@@ -47,6 +47,8 @@ export const APP_DATA = {
   pollState: 'pollState',
   background: 'background',
   sheet: 'sheet',
+  caption: 'caption',
+  loadingEffects: 'loadingEffects',
 };
 
 export const UI_SETTINGS = {

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,11 +62,13 @@ 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]: '',
     [POLL_STATE.view]: '',
   },
+  [APP_DATA.caption]: true,
 };
 
 export const AppData = React.memo(() => {

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -107,6 +107,16 @@ export const useSetSubscribedNotifications = notificationKey => {
   return [value, setValue];
 };
 
+export const useIsCaptionEnabled = () => {
+  const isCaptionEnabled = useHMSStore(selectAppDataByPath(APP_DATA.caption));
+  return isCaptionEnabled;
+};
+
+export const useSetIsCaptionEnabled = () => {
+  const [value, setValue] = useSetAppDataByKey(APP_DATA.caption);
+  return [value, setValue];
+};
+
 export const useSubscribeChatSelector = chatSelectorKey => {
   const chatSelectorPreference = useHMSStore(selectAppDataByPath(APP_DATA.chatSelector, chatSelectorKey));
   return chatSelectorPreference;

package/src/Prebuilt/components/CaptionIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { selectIsTranscriptionEnabled, useHMSStore } from '@100mslive/react-sdk';
+import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../Tooltip';
+// @ts-ignore: No implicit Any
+import IconButton from '../IconButton';
+// @ts-ignore: No implicit Any
+import { useSetIsCaptionEnabled } from './AppData/useUISettings.js';
+
+export const CaptionIcon = () => {
+  const isCaptionPresent = useHMSStore(selectIsTranscriptionEnabled);
+  const [isCaption, setIsCaption] = useSetIsCaptionEnabled();
+
+  const onClick = () => {
+    setIsCaption(!isCaption);
+  };
+  if (!isCaptionPresent) {
+    return null;
+  }
+  return (
+    <Tooltip title={isCaption ? 'Disable caption' : 'Enable caption'}>
+      <IconButton data-testid="caption_btn" onClick={onClick}>
+        {isCaption ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import { v4 as uuid } from 'uuid';
 import {
@@ -18,27 +19,30 @@ import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
 import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
 import { Box, Flex } from '../../Layout';
+import { config } from '../../Theme';
 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';
 import { RaiseHand } from './RaiseHand';
+import { CaptionsViewer } from '../plugins/CaptionsViewer';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
-import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
+import { useIsSidepaneTypeOpen } from './AppData/useSidepane';
 // @ts-ignore: No implicit Any
-import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
+import { useAuthToken, useIsCaptionEnabled, useSetAppDataByKey } from './AppData/useUISettings';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
+import { APP_DATA, isAndroid, isIOS, isIPadOS, SIDE_PANE_OPTIONS } from '../common/constants';
 
 export const ConferenceScreen = () => {
   const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
+  const isMobile = useMedia(config.media.md);
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
@@ -59,6 +63,10 @@ export const ConferenceScreen = () => {
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
+  const isCaptionEnabled = useIsCaptionEnabled();
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+
+  const showCaptionAtTop = screenProps.elements?.chat?.is_overlay && isChatOpen;
 
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0 && isMobileDevice && !isMwebHLSStream) {
@@ -126,6 +134,28 @@ export const ConferenceScreen = () => {
           <FullPageProgress text="Starting live stream..." css={{ opacity: 0.8, bg: '$background_dim' }} />
         </Box>
       ) : null}
+      {isCaptionEnabled && screenProps.screenType !== 'hls_live_streaming' && (
+        <Box
+          css={{
+            position: 'fixed',
+            maxWidth: isMobile ? '100%' : '40%',
+            bottom: showCaptionAtTop ? '' : hideControlsForStreaming ? '5%' : '10%',
+            top: showCaptionAtTop ? (hideControlsForStreaming ? '5%' : '10%') : '',
+            left: isMobile ? 0 : '50%',
+            transform: isMobile ? '' : 'translateX(-50%)',
+            background: '#000000A3',
+            overflow: 'clip',
+            zIndex: 10,
+            height: 'fit-content',
+            r: '$1',
+            p: '$6',
+            transition: 'bottom 0.3s ease-in-out',
+            '&:empty': { display: 'none' },
+          }}
+        >
+          <CaptionsViewer />
+        </Box>
+      )}
       <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
         {!(screenProps.hideSections.includes('header') || isMwebHLSStream) && (
           <Box

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -5,6 +5,7 @@ import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
+import { CaptionIcon } from '../CaptionIcon';
 // @ts-ignore: No implicit Any
 import { EmojiReaction } from '../EmojiReaction';
 // @ts-ignore: No implicit Any
@@ -96,6 +97,7 @@ export const Footer = ({
           <>
             <ScreenshareToggle />
             <RaiseHand />
+            {screenType !== 'hls_live_streaming' && <CaptionIcon />}
             {elements?.emoji_reactions && <EmojiReaction />}
             <LeaveRoom screenType={screenType} />
           </>

package/src/Prebuilt/components/Footer/RoleAccordion.tsx

@@ -109,7 +109,7 @@ export const RoleAccordion = ({
           },
         }}
       >
-        <Flex justify="between" css={{ flexGrow: 1, pr: '$6' }}>
+        <Flex justify="between" align="center" css={{ flexGrow: 1, pr: '$6' }}>
           <Text
             variant="sm"
             css={{ fontWeight: '$semiBold', textTransform: 'capitalize', color: '$on_surface_medium' }}

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/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

@@ -5,6 +5,7 @@ import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
   selectIsLocalVideoEnabled,
+  selectIsTranscriptionEnabled,
   selectPeerCount,
   selectPermissions,
   useHMSActions,
@@ -13,12 +14,14 @@ import {
 } from '@100mslive/react-sdk';
 import {
   BrbIcon,
+  ClosedCaptionIcon,
   CrossIcon,
   EmojiIcon,
   HamburgerMenuIcon,
   HandIcon,
   HandRaiseSlashedIcon,
   InfoIcon,
+  OpenCaptionIcon,
   PeopleIcon,
   QuizActiveIcon,
   QuizIcon,
@@ -49,12 +52,12 @@ import { useSheetToggle } from '../../AppData/useSheet';
 // @ts-ignore: No implicit any
 import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
 // @ts-ignore: No implicit Any
-import { useShowPolls } from '../../AppData/useUISettings';
+import { useSetIsCaptionEnabled, useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 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 +91,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 +104,11 @@ export const MwebOptions = ({
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
+  const { startRecording, isRecordingLoading } = useRecordingHandler();
 
+  const isCaptionPresent = useHMSStore(selectIsTranscriptionEnabled);
+
+  const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
   const updateState = (modalName: string, value: boolean) => {
@@ -187,6 +193,20 @@ export const MwebOptions = ({
                 <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
               </ActionTile.Root>
             ) : null}
+            {isCaptionPresent && screenType !== 'hls_live_streaming' ? (
+              <ActionTile.Root
+                onClick={() => {
+                  setIsCaptionEnabled(!isCaptionEnabled);
+                }}
+              >
+                {isCaptionEnabled ? (
+                  <ClosedCaptionIcon width="20" height="20px" />
+                ) : (
+                  <OpenCaptionIcon width="20" height="20px" />
+                )}
+                <ActionTile.Title>{isCaptionEnabled ? 'Hide Captions' : 'Captions Disabled'}</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
 
             {isLocalVideoEnabled && !!elements?.virtual_background ? (
               <ActionTile.Root
@@ -260,29 +280,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);
           }}
         >