@100mslive/react-native-room-kit 1.0.7 → 1.0.9

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
 
-import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { COLORS } from '../utils/theme';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 export const HMSPreviewHLSLiveIndicator = () => {
-  const isHLSStreaming = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     container: {

package/src/components/HMSPrimaryButton.tsx

@@ -13,6 +13,7 @@ export interface HMSPrimaryButtonProps {
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
+  wrapWithGestureDetector?: boolean;
 }
 
 export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
@@ -23,6 +24,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
   style,
   disabled,
   leftComponent,
+  wrapWithGestureDetector,
 }) => {
   const { primary_dim: primaryDarkColor, on_primary_high: onPrimaryHighColor } =
     useHMSRoomColorPalette();
@@ -62,6 +64,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
         hmsRoomStyles.buttonText,
         disabled ? hmsRoomStyles.disabledText : null,
       ]}
+      wrapWithGestureDetector={wrapWithGestureDetector}
     />
   );
 };

package/src/components/HMSRecordingIndicator.tsx

@@ -1,30 +1,16 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { ActivityIndicator, StyleSheet } from 'react-native';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { RecordingIcon } from '../Icons';
 import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
-import { HMSRecordingState } from '@100mslive/react-native-hms';
+import { useIsAnyRecordingOn, useIsAnyRecordingPaused } from '../hooks-sdk';
 
 export const HMSRecordingIndicator = () => {
-  const isRecordingOn = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.STARTED ||
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
-
-      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.STARTED ||
-      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.RESUMED ||
-
-      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.STARTED ||
-      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.RESUMED
-  );
-  const isRecordingPaused = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED ||
-      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.PAUSED ||
-      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.PAUSED
-  );
+  const isRecordingOn = useIsAnyRecordingOn();
+  const isRecordingPaused = useIsAnyRecordingPaused();
   const startingOrStoppingRecording = useSelector(
     (state: RootState) =>
       state.app.startingOrStoppingRecording ||
@@ -52,15 +38,15 @@ export const HMSRecordingIndicator = () => {
     );
   }
 
-  if (isRecordingOn) {
+  if (isRecordingPaused) {
     return (
-      <RecordingIcon style={[styles.icon, styles.rightSpace, iconStyles]} />
+      <RecordingIcon type="pause" style={[styles.icon, styles.rightSpace]} />
     );
   }
 
-  if (isRecordingPaused) {
+  if (isRecordingOn) {
     return (
-      <RecordingIcon type='pause' style={[styles.icon, styles.rightSpace]} />
+      <RecordingIcon style={[styles.icon, styles.rightSpace, iconStyles]} />
     );
   }
 

package/src/components/HMSRoomOptions.tsx

@@ -47,7 +47,10 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
 
   return (
     <View>
-      <PressableIcon testID={TestIds.room_options_btn} onPress={onSettingsPress}>
+      <PressableIcon
+        testID={TestIds.room_options_btn}
+        onPress={onSettingsPress}
+      >
         <HamburgerIcon />
       </PressableIcon>
 

package/src/components/HMSTerminalErrorNotification.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { HMSException } from '@100mslive/react-native-hms';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { HMSNotification } from './HMSNotification';
 import { AlertTriangleIcon } from '../Icons';
@@ -34,6 +35,8 @@ export const HMSTerminalErrorNotification: React.FC<
     leave(OnLeaveReason.NETWORK_ISSUES);
   };
 
+  const tapGesture = Gesture.Tap();
+
   return (
     <HMSNotification
       id={id}
@@ -41,16 +44,18 @@ export const HMSTerminalErrorNotification: React.FC<
       text={exception.description || 'Something went wrong!'}
       dismissDelay={dismissDelay}
       autoDismiss={autoDismiss}
-      cta={(
-        <TouchableOpacity
-          style={[styles.button, hmsRoomStyles.button]}
-          onPress={handleLeaveRoomPress}
-        >
-          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-            Leave
-          </Text>
-        </TouchableOpacity>
-      )}
+      cta={
+        <GestureDetector gesture={tapGesture}>
+          <TouchableOpacity
+            style={[styles.button, hmsRoomStyles.button]}
+            onPress={handleLeaveRoomPress}
+          >
+            <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+              Leave
+            </Text>
+          </TouchableOpacity>
+        </GestureDetector>
+      }
     />
   );
 };

package/src/components/Header.tsx

@@ -37,7 +37,10 @@ export const _Header: React.FC<HeaderProps> = ({
   }));
 
   return (
-    <SafeAreaView style={transparent ? null : containerStyles} edges={['top','left','right']}>
+    <SafeAreaView
+      style={transparent ? null : containerStyles}
+      edges={['top', 'left', 'right']}
+    >
       <View style={[styles.container, transparent ? null : containerStyles]}>
         <View style={styles.logoContainer}>
           <CompanyLogo style={styles.logo} />

package/src/components/LeaveRoomBottomSheet.tsx

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
 
 import { LeaveIcon } from '../Icons';
-import { useHMSRoomStyleSheet, useLeaveMethods, useModalType } from '../hooks-util';
+import {
+  useHMSRoomStyleSheet,
+  useLeaveMethods,
+  useModalType,
+} from '../hooks-util';
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 import { StopIcon } from '../Icons';
 import { ModalTypes, OnLeaveReason } from '../utils/types';
 import { TestIds } from '../utils/constants';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 // const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
 // const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
@@ -25,10 +29,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
       state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
   );
 
-  const isStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     text: {
@@ -119,17 +120,18 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
           <LeaveIcon style={styles.icon} />
 
           <View style={styles.textContainer}>
-            <Text style={[styles.text, hmsRoomStyles.text]}>
-              Leave
-            </Text>
-            <Text testID={TestIds.leave_description} style={[styles.subtext, hmsRoomStyles.subtext]}>
+            <Text style={[styles.text, hmsRoomStyles.text]}>Leave</Text>
+            <Text
+              testID={TestIds.leave_description}
+              style={[styles.subtext, hmsRoomStyles.subtext]}
+            >
               Others will continue after you leave. You can join the session
               again.
             </Text>
           </View>
         </TouchableOpacity>
 
-        {canStream && isStreaming ? (
+        {canStream && isHLSStreaming ? (
           <TouchableOpacity
             testID={TestIds.end_stream_cta}
             style={[styles.button, hmsRoomStyles.endButton]}

package/src/components/Meeting.tsx

@@ -16,6 +16,7 @@ import {
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
   usePIPListener,
+  useSetDefaultChatRecipient,
 } from '../hooks-util';
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
@@ -34,6 +35,9 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
 
   useFetchHMSRoles();
 
+  // Handle selected (default) Chat Recipient as per dashboard config
+  useSetDefaultChatRecipient();
+
   useHMSMessages();
 
   useHMSReconnection();

package/src/components/MeetingScreenContent.tsx

@@ -51,28 +51,31 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     }
   }, []);
 
-  const toggleControls = useCallback((fromTimeout: boolean = false) => {
-    'worklet';
-    if (
-      fromTimeout !== true &&
-      (keyboardState.value === KeyboardState.OPEN ||
-        keyboardState.value === KeyboardState.OPENING)
-    ) {
-      runOnJS(dismissKeyboard)();
-    } else {
-      runOnJS(clearTimer)();
-      cancelAnimation(offset);
-      offset.value = withTiming(
-        offset.value === 1 ? 0 : 1,
-        { duration: 200, easing: Easing.ease },
-        (finished) => {
-          if (finished) {
-            runOnJS(setControlsHidden)(offset.value === 0);
+  const toggleControls = useCallback(
+    (fromTimeout: boolean = false) => {
+      'worklet';
+      if (
+        fromTimeout !== true &&
+        (keyboardState.value === KeyboardState.OPEN ||
+          keyboardState.value === KeyboardState.OPENING)
+      ) {
+        runOnJS(dismissKeyboard)();
+      } else {
+        runOnJS(clearTimer)();
+        cancelAnimation(offset);
+        offset.value = withTiming(
+          offset.value === 1 ? 0 : 1,
+          { duration: 200, easing: Easing.ease },
+          (finished) => {
+            if (finished) {
+              runOnJS(setControlsHidden)(offset.value === 0);
+            }
           }
-        }
-      );
-    }
-  }, [dismissKeyboard, clearTimer]);
+        );
+      }
+    },
+    [dismissKeyboard, clearTimer]
+  );
 
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable

package/src/components/Modals.tsx

@@ -40,7 +40,7 @@ import { ModalTypes, SUPPORTED_ASPECT_RATIOS } from '../utils/types';
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { SwitchRow } from './SwitchRow';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSConferencingScreenConfig, useHMSInstance } from '../hooks-util';
 
 export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
   const instance = useHMSInstance();
@@ -48,16 +48,31 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
   const roles = useSelector((state: RootState) => state.hmsStates.roles);
 
   const [newRole, setNewRole] = useState<HMSRole>(peer?.role!);
-  const [request, setRequest] = useState<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
 
+  const skipPreviewForRoleChange = useHMSConferencingScreenConfig(
+    (conferencingScreenConfig) => {
+      if (
+        conferencingScreenConfig?.elements &&
+        'on_stage_exp' in conferencingScreenConfig.elements
+      ) {
+        return (
+          conferencingScreenConfig.elements.on_stage_exp
+            ?.skip_preview_for_role_change || false
+        );
+      }
+      return false;
+    }
+  );
   const hideMenu = () => setVisible(false);
   const showMenu = () => setVisible(true);
   const changeRole = () => {
-    instance?.changeRoleOfPeer(peer!, newRole, !request).catch((e) => {
-      console.log('Change Role of Peer Error: ', e);
-      Toast.showWithGravity((e as Error).message, Toast.LONG, Toast.TOP);
-    });
+    instance
+      ?.changeRoleOfPeer(peer!, newRole, skipPreviewForRoleChange)
+      .catch((e) => {
+        console.log('Change Role of Peer Error: ', e);
+        Toast.showWithGravity((e as Error).message, Toast.LONG, Toast.TOP);
+      });
     cancelModal();
   };
 
@@ -100,23 +115,6 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
           );
         })}
       </Menu>
-      {!peer?.isLocal && (
-        <TouchableOpacity
-          style={styles.roleChangeModalPermissionContainer}
-          onPress={() => {
-            setRequest(!request);
-          }}
-        >
-          <Text
-            style={[
-              styles.roleChangeModalPermission,
-              request ? { color: COLORS.PRIMARY.DEFAULT } : null,
-            ]}
-          >
-            Request permission from the user
-          </Text>
-        </TouchableOpacity>
-      )}
       <View style={styles.roleChangeModalPermissionContainer}>
         <CustomButton
           title="Cancel"
@@ -347,8 +345,8 @@ export const RtcStatsModal = () => {
                                       value?.width ?? 0
                                     }`
                                   : key === 'qualityLimitationReasons'
-                                  ? value.reason
-                                  : value}
+                                    ? value.reason
+                                    : value}
                               </Text>
                             </View>
                           );

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -67,6 +67,12 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     return roles.find((role) => role.name === offStageRoleStr);
   });
 
+  const skipPreviewForRoleChange = useHMSLayoutConfig(
+    (layoutConfig) =>
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+        ?.skip_preview_for_role_change
+  );
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     divider: {
       backgroundColor: theme.palette.border_bright,
@@ -79,7 +85,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
   const handleBringOnStagePress = () => {
     if (onStageRole) {
       hmsInstance
-        .changeRoleOfPeer(peer, onStageRole)
+        .changeRoleOfPeer(peer, onStageRole, skipPreviewForRoleChange || false)
         .then((d) => console.log('Bring on Stage Success: ', d))
         .catch((e) => console.log('Bring on Stage Error: ', e));
     } else {
@@ -95,7 +101,9 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
         .then((d) => console.log('Lower Remote Peer hand Success: ', d))
         .catch((e) => console.log('Lower Remote Peer hand Error: ', e));
     } else {
-      console.warn(`peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`);
+      console.warn(
+        `peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`
+      );
     }
     onItemPress();
   };
@@ -169,8 +177,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     peer.videoTrack?.isMute();
 
   const showBringOnStageOptions =
-    offStageRoles &&
-    offStageRoles.includes(peer.role?.name || '');
+    offStageRoles && offStageRoles.includes(peer.role?.name || '');
 
   const showLowerHandOption = peer.isHandRaised;
 
@@ -189,9 +196,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
         },
         {
           id: 'lower-hand',
-          icon: (
-            <HandIcon type="off" style={{ width: 20, height: 20 }} />
-          ),
+          icon: <HandIcon type="off" style={{ width: 20, height: 20 }} />,
           label: 'Lower Hand',
           pressHandler: handleLowerHandPress,
           isActive: false,

package/src/components/PeerSettingsModalContent.tsx

@@ -47,7 +47,9 @@ export const PeerSettingsModalContent: React.FC<
     const mininode = state.app.miniviewPeerTrackNode;
     return mininode && mininode.id === peerTrackNode.id;
   });
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const removeTextStyle = useHMSRoomStyle((theme) => ({
     color: theme.palette.alert_error_default,

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -52,7 +52,9 @@ export const _PeerVideoTileView = React.forwardRef<
     const isPipModeActive = useSelector(
       (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
     );
-    const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+    const editUsernameDisabled = useSelector(
+      (state: RootState) => state.app.editUsernameDisabled
+    );
 
     const onSpotlight = useSelector((state: RootState) => {
       const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {

package/src/components/Preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   Keyboard,
   StyleSheet,
@@ -20,7 +20,7 @@ import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
 import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
-import { useCanPublishVideo } from '../hooks-sdk';
+import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import {
@@ -75,6 +75,19 @@ export const Preview = ({
     []
   );
 
+  const hmsActions = useHMSActions();
+
+  useEffect(() => {
+    async function setupAudioVideoOnPreview() {
+      // TODO: rectify the below issue,
+      // false means audio/video is enabled, true means audio/video is disabled
+      // it should have been true means audio/video is enabled, false means audio/video is disabled
+      await hmsActions.setLocalAudioEnabled(false);
+      await hmsActions.setLocalVideoEnabled(false);
+    }
+    setupAudioVideoOnPreview().then((r) => console.log(r));
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View style={[styles.container, hmsRoomStyles.container]}>

package/src/components/PreviewForRoleChangeModal.tsx

@@ -124,8 +124,9 @@ const _PreviewForRoleChangeModal = () => {
           track.type === HMSTrackType.VIDEO
       ) as HMSLocalVideoTrack;
       if (localVideoTrack) {
+        localVideoTrack.setMute(false);
         setLocalVideoTrack(localVideoTrack);
-        setIsLocalVideoMuted(localVideoTrack.isMute());
+        setIsLocalVideoMuted(false);
       }
 
       const localAudioTrack = previewForRoleTracks.find(
@@ -133,8 +134,9 @@ const _PreviewForRoleChangeModal = () => {
           track.type === HMSTrackType.AUDIO
       ) as HMSLocalAudioTrack;
       if (localAudioTrack) {
+        localAudioTrack.setMute(false);
         setLocalAudioTrack(localAudioTrack);
-        setIsLocalAudioMuted(localAudioTrack.isMute());
+        setIsLocalAudioMuted(false);
       }
 
       // lower hand
@@ -362,7 +364,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
-    backgroundColor: 'silver',
   },
   header: {
     position: 'absolute',

package/src/components/RoomSettingsModalContent.tsx

@@ -25,7 +25,11 @@ import {
   useShowChatAndParticipants,
   useStartRecording,
 } from '../hooks-util';
-import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
+import {
+  useCanPublishScreen,
+  useHMSActions,
+  useIsAnyStreamingOn,
+} from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
@@ -52,13 +56,16 @@ export const RoomSettingsModalContent: React.FC<
 
   const hmsActions = useHMSActions();
 
-  const { alert_error_default: alertErrorDefaultColor } = useHMSRoomColorPalette()
+  const { alert_error_default: alertErrorDefaultColor } =
+    useHMSRoomColorPalette();
 
   const isPublisher = useSelector((state: RootState) => {
     const localPeer = state.hmsStates.localPeer;
     return localPeer ? isPublishingAllowed(localPeer) : false;
   });
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const { registerOnModalHideAction } = useBottomSheetActions();
 
@@ -133,16 +140,27 @@ export const RoomSettingsModalContent: React.FC<
     (state: RootState) =>
       !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
   );
-
-  const isRecordingOn = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.STARTED
-  );
+  const isAnyStreamingOn = useIsAnyStreamingOn();
+
+  const isRecordingOn = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+      room?.browserRecordingState?.state === HMSRecordingState.STARTED
+    );
+  });
   const isRecordingPaused = useSelector(
     (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED
+      state.hmsStates.room?.browserRecordingState?.state ===
+      HMSRecordingState.PAUSED
   );
+  const isRecordingDisabled = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      isAnyStreamingOn ||
+      room?.browserRecordingState?.state === HMSRecordingState.STARTING
+    );
+  });
 
   const { startRecording } = useStartRecording();
 
@@ -214,7 +232,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'share-screen',
-              testID: !!isLocalScreenShared ? TestIds.room_modal_stop_screen_share_btn : TestIds.room_modal_share_screen_btn,
+              testID: !!isLocalScreenShared
+                ? TestIds.room_modal_stop_screen_share_btn
+                : TestIds.room_modal_share_screen_btn,
               icon: <ScreenShareIcon style={{ width: 20, height: 20 }} />,
               label: isLocalScreenShared ? 'Sharing Screen' : 'Share Screen',
               pressHandler: handleScreenShareTogglePress,
@@ -223,7 +243,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'brb',
-              testID: isBRBOn ? TestIds.room_modal_stop_brb_btn : TestIds.room_modal_brb_btn,
+              testID: isBRBOn
+                ? TestIds.room_modal_stop_brb_btn
+                : TestIds.room_modal_brb_btn,
               icon: <BRBIcon style={{ width: 20, height: 20 }} />,
               label: isBRBOn ? "I'm Back" : 'Be Right Back',
               pressHandler: toggleBRB,
@@ -232,7 +254,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'raise-hand',
-              testID: isHandRaised ? TestIds.room_modal_hand_raised_btn : TestIds.room_modal_hand_raise_btn,
+              testID: isHandRaised
+                ? TestIds.room_modal_hand_raised_btn
+                : TestIds.room_modal_hand_raise_btn,
               icon: <HandIcon style={{ width: 20, height: 20 }} />,
               label: isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
@@ -241,12 +265,28 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'recording',
-              testID: isRecordingOn ? TestIds.room_modal_stop_recording_btn : TestIds.room_modal_start_recording_btn,
-              icon: <RecordingIcon type={isRecordingPaused ? 'pause' : 'on'} style={[{ width: 20, height: 20 }, isRecordingOn ? { tintColor: alertErrorDefaultColor } : null]} />,
-              label: isRecordingOn ? 'Recording' : isRecordingPaused ? 'Recording Paused' : 'Record',
+              testID: isRecordingOn
+                ? TestIds.room_modal_stop_recording_btn
+                : TestIds.room_modal_start_recording_btn,
+              icon: (
+                <RecordingIcon
+                  type={isRecordingPaused ? 'pause' : 'on'}
+                  style={[
+                    { width: 20, height: 20 },
+                    isRecordingOn
+                      ? { tintColor: alertErrorDefaultColor }
+                      : null,
+                  ]}
+                />
+              ),
+              label: isRecordingOn
+                ? 'Recording'
+                : isRecordingPaused
+                  ? 'Recording Paused'
+                  : 'Record',
               pressHandler: handleRecordingTogglePress,
               isActive: false,
-              disabled: isRecordingPaused,
+              disabled: isRecordingDisabled,
               hide: !canStartRecording, // Hide if can't publish screen
             },
             {
@@ -336,7 +376,11 @@ const SettingItem: React.FC<SettingItemProps> = ({
     <TouchableOpacity
       testID={testID}
       disabled={disabled}
-      style={[styles.button, isActive ? hmsRoomStyles.button : null]}
+      style={[
+        styles.button,
+        isActive ? hmsRoomStyles.button : null,
+        disabled ? { opacity: 0.6 } : null,
+      ]}
       onPress={onPress}
     >
       {icon}