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

package/src/components/HMSRoomOptions.tsx

@@ -54,7 +54,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
       <BottomSheet
         isVisible={modalVisible === ModalTypes.SETTINGS}
         dismissModal={dismissModal}
-        animationOutTiming={700}
       >
         <RoomSettingsModalContent
           newAudioMixingMode={newAudioMixingMode}
@@ -73,7 +72,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}
         avoidKeyboard={true}
-        animationOutTiming={700}
       >
         <ChangeNameModalContent dismissModal={dismissModal} />
       </BottomSheet>
@@ -81,7 +79,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
       <BottomSheet
         isVisible={modalVisible === ModalTypes.STOP_RECORDING}
         dismissModal={dismissModal}
-        animationOutTiming={800}
       >
         <StopRecordingModalContent dismissModal={dismissModal} />
       </BottomSheet>

package/src/components/HMSTextInput.tsx

@@ -130,6 +130,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
       selectionColor={resetProps.selectionColor ?? onSurfaceHighColor}
       onFocus={resetProps.onFocus ?? handleInputFocus}
       onBlur={resetProps.onBlur ?? handleInputBlur}
+      disableFullscreenUI={true}
     />
   );
 

package/src/components/Header.tsx

@@ -1,6 +1,9 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
 import { useHMSRoomStyle } from '../hooks-util';
@@ -8,6 +11,7 @@ import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSRecordingIndicator } from './HMSRecordingIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import { HMSLiveIndicator } from './HMSLiveIndicator';
+import { HMSLiveViewerCount } from './HMSLiveViewerCount';
 
 interface HeaderProps {
   transparent?: boolean;
@@ -19,6 +23,11 @@ const BOTTOM_PADDING = 16;
 const CONTENT_HEIGHT = 42;
 export const HEADER_HEIGHT = TOP_PADDING + CONTENT_HEIGHT + BOTTOM_PADDING;
 
+export const useHeaderHeight = (excludeSafeArea: boolean = false) => {
+  const { top } = useSafeAreaInsets();
+  return (excludeSafeArea ? 0 : top) + HEADER_HEIGHT;
+};
+
 export const _Header: React.FC<HeaderProps> = ({
   transparent = false,
   showControls = true,
@@ -28,14 +37,16 @@ export const _Header: React.FC<HeaderProps> = ({
   }));
 
   return (
-    <SafeAreaView style={transparent ? null : containerStyles} edges={['top']}>
+    <SafeAreaView style={transparent ? null : containerStyles} edges={['top','left','right']}>
       <View style={[styles.container, transparent ? null : containerStyles]}>
         <View style={styles.logoContainer}>
           <CompanyLogo style={styles.logo} />
 
+          <HMSLiveIndicator />
+
           <HMSRecordingIndicator />
 
-          <HMSLiveIndicator />
+          <HMSLiveViewerCount />
         </View>
 
         {showControls ? (

package/src/components/LeaveRoomBottomSheet.tsx

@@ -1,6 +1,7 @@
 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';
@@ -26,7 +27,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
 
   const isStreaming = useSelector(
     (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
+      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -105,10 +106,9 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
   return (
     <BottomSheet
       isVisible={modalVisibleType === ModalTypes.LEAVE_ROOM}
-      containerStyle={styles.container}
+      bottomOffsetSpace={0}
       dismissModal={onPopupDismiss}
       onModalHide={handlePopupHide}
-      animationOutTiming={700}
     >
       <View>
         <TouchableOpacity
@@ -176,9 +176,6 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    paddingBottom: 0,
-  },
   button: {
     flexDirection: 'row',
     padding: 24,

package/src/components/Meeting.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { PeerTrackNode } from '../utils/types';
 import { useRTCStatsListeners } from '../utils/hooks';
@@ -16,7 +15,6 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
-  useIsHLSViewer,
   usePIPListener,
 } from '../hooks-util';
 import { MeetingScreenContent } from './MeetingScreenContent';
@@ -32,8 +30,6 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     (state: RootState) => state.app.startingHLSStream
   );
 
-  const isHLSViewer = useIsHLSViewer();
-
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
@@ -76,23 +72,10 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     return <HMSHLSStreamLoading />;
   }
 
-  const Container = isHLSViewer ? View : SafeAreaView;
-
-  /**
-   * TODO: disbaled Expended View animation in Webrtc flow
-   *
-   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
-   * Solution: Try using Tab Gesture detector instead on Pressable component
-   */
   return (
-    <Container
-      style={[styles.container, containerStyles]}
-      edges={['left', 'right']}
-    >
+    <View style={[styles.container, containerStyles]}>
       <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
-
-      {/* {landscapeChatViewVisible ? <ChatView /> : null} */}
-    </Container>
+    </View>
   );
 };
 

package/src/components/MeetingScreenContent.tsx

@@ -1,21 +1,23 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { StyleSheet, Pressable, View } from 'react-native';
+import React, { useCallback, useRef, useState, useEffect } from 'react';
+import { StyleSheet, View, Keyboard } from 'react-native';
 import { useSelector } from 'react-redux';
 import {
   Easing,
+  KeyboardState,
   cancelAnimation,
   runOnJS,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
-import { PipModes } from '../utils/types';
+import { HeaderFooterHideDelayMs, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
 import type { RootState } from '../redux';
 import { Footer } from './Footer';
 import { DisplayView } from './DisplayView';
 import { Header } from './Header';
-import { useIsHLSViewer } from '../hooks-util';
+import { useIsHLSViewer, useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { HLSFooter } from './HLSFooter';
@@ -36,79 +38,82 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
+  const { keyboardState } = useKeyboardState();
 
-  const toggleControls = useCallback(() => {
-    'worklet';
-    if (timerIdRef.current) {
+  const dismissKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const clearTimer = useCallback(() => {
+    if (timerIdRef.current !== null) {
       clearTimeout(timerIdRef.current);
       timerIdRef.current = null;
     }
-    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]);
+
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable
-  // useEffect(() => {
-  //   if (false && !isHLSViewer) {
-  //     if (timerIdRef.current) {
-  //       clearTimeout(timerIdRef.current);
-  //     }
-  //     timerIdRef.current = setTimeout(() => {
-  //       timerIdRef.current = null;
-  //       toggleControls();
-  //     }, 3000); d
+  useEffect(() => {
+    clearTimer();
+    timerIdRef.current = setTimeout(() => {
+      timerIdRef.current = null;
+      toggleControls(true);
+    }, HeaderFooterHideDelayMs);
 
-  //     return () => {
-  //       if (timerIdRef.current) {
-  //         clearTimeout(timerIdRef.current);
-  //       }
-  //     };
-  //   }
-  // }, [isHLSViewer]);
+    return clearTimer;
+  }, [clearTimer, toggleControls]);
+
+  const tapGesture = Gesture.Tap()
+    .onEnd(() => toggleControls())
+    .requireExternalGestureToFail();
 
-  /**
-   * TODO: disbaled Expended View animation in Webrtc flow
-   *
-   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
-   * Solution: Try using Tab Gesture detector instead on Pressable component
-   */
   return (
-    <Pressable
-      onPress={toggleControls}
-      style={styles.container}
-      disabled={isHLSViewer || true}
-    >
+    <View style={styles.container}>
       <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />
 
-      <View style={styles.reconnectionWrapper}>
-        {isPipModeActive ? null : (
-          <AnimatedHeader offset={offset}>
-            <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
-          </AnimatedHeader>
-        )}
-
-        <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
+      <GestureDetector gesture={tapGesture}>
+        <View collapsable={false} style={styles.container}>
+          {isPipModeActive ? null : (
+            <AnimatedHeader offset={offset}>
+              <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
+            </AnimatedHeader>
+          )}
 
-        {/* <ReconnectionView /> */}
-      </View>
+          <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-      {isPipModeActive ? null : isHLSViewer ? (
-        <HLSFooter offset={offset} />
-      ) : (
-        <AnimatedFooter offset={offset}>
-          <Footer />
-        </AnimatedFooter>
-      )}
-    </Pressable>
+          {isPipModeActive ? null : isHLSViewer ? (
+            <HLSFooter offset={offset} />
+          ) : (
+            <AnimatedFooter offset={offset}>
+              <Footer />
+            </AnimatedFooter>
+          )}
+        </View>
+      </GestureDetector>
+    </View>
   );
 };
 

package/src/components/MiniView.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import type { MutableRefObject } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { StyleSheet, View, LayoutAnimation } from 'react-native';
-import type { LayoutRectangle } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, {
   cancelAnimation,
@@ -20,6 +18,7 @@ import {
 import type { RootState } from '../redux';
 import { setInsetViewMinimized } from '../redux/actions';
 import { isPublishingAllowed } from '../hooks-util';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 
 const cornerOffset = {
   x: 8, // rightX
@@ -30,13 +29,16 @@ const cornerOffset = {
 
 export interface MiniViewProps
   extends Omit<PeerVideoTileViewProps, 'peerTrackNode'> {
-  boundingBoxRef: MutableRefObject<LayoutRectangle | null>;
+  boundingBoxWidth: number | null;
+  boundingBoxHeight: number | null;
 }
 
 export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
-  boundingBoxRef,
+  boundingBoxWidth,
+  boundingBoxHeight,
   onMoreOptionsPress,
 }) => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
   const isPressed = useSharedValue(false);
   const xOffset = useSharedValue(0);
   const yOffset = useSharedValue(0);
@@ -54,8 +56,8 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
     usePeerMinimizedViewDimensions();
 
   const size = {
-    width: minimized ? minimizedViewWidth : 104,
-    height: minimized ? minimizedViewHeigth : 186,
+    width: minimized ? minimizedViewWidth : isLandscapeOrientation ? 178 : 104,
+    height: minimized ? minimizedViewHeigth : isLandscapeOrientation ? 98 : 186,
   };
 
   const dimensionStyles = {
@@ -83,7 +85,8 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
       size.height,
       cornerOffset.x,
       cornerOffset.topY,
-      boundingBoxRef.current
+      boundingBoxWidth,
+      boundingBoxHeight
     );
 
     const finalX = snapPointX;
@@ -130,7 +133,7 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
       cancelAnimation(xOffset);
       cancelAnimation(yOffset);
     };
-  }, [minimized]);
+  }, [boundingBoxWidth, boundingBoxHeight, minimized]);
 
   const handleMaximize = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
@@ -195,25 +198,25 @@ const getSnappingPoints = (
   compHeight: number,
   xCornerOffset: number,
   yCornerOffset: number,
-  boundingBox: null | { width: number; height: number }
+  boundingBoxWidth: number | null,
+  boundingBoxHeight: number | null
 ) => {
   'worklet';
-  if (!boundingBox) {
+  if (!boundingBoxWidth || !boundingBoxHeight) {
     return {
       snapPointX: 0,
       snapPointY: 0,
     };
   }
-  const { height, width } = boundingBox;
 
   return {
     snapPointX:
-      Math.abs(currentValueX) + compWidth < width / 2
+      Math.abs(currentValueX) + compWidth < boundingBoxWidth / 2
         ? 0
-        : -width + compWidth + xCornerOffset * 2,
+        : -boundingBoxWidth + compWidth + xCornerOffset * 2,
     snapPointY:
-      Math.abs(currentValueY) + compHeight < height / 2
+      Math.abs(currentValueY) + compHeight < boundingBoxHeight / 2
         ? 0
-        : -height + compHeight + yCornerOffset * 2,
+        : -boundingBoxHeight + compHeight + yCornerOffset * 2,
   };
 };

package/src/components/OverlayedViews.tsx

@@ -1,18 +1,21 @@
 import * as React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
 
 import { HMSNotifications } from './HMSNotifications';
 import { OverlayContainer } from './OverlayContainer';
 import { HLSChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 
-export type OverlayedViewsProps = {};
+export type OverlayedViewsProps = {
+  offset: SharedValue<number>;
+};
 
-const _OverlayedViews: React.FC<OverlayedViewsProps> = () => {
+const _OverlayedViews: React.FC<OverlayedViewsProps> = ({ offset }) => {
   const { overlayChatVisible } = useShowChatAndParticipants();
 
   return (
     <OverlayContainer.Overlay>
-      {overlayChatVisible ? <HLSChatView /> : null}
+      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />
     </OverlayContainer.Overlay>

package/src/components/PeerSettingsModalContent.tsx

@@ -47,6 +47,7 @@ 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 removeTextStyle = useHMSRoomStyle((theme) => ({
     color: theme.palette.alert_error_default,
@@ -123,7 +124,7 @@ export const PeerSettingsModalContent: React.FC<
 
       {/* Content */}
       <View style={styles.contentContainer}>
-        {peer.isLocal ? (
+        {peer.isLocal && !editUsernameDisabled ? (
           <SettingItem
             testID={TestIds.tile_modal_change_name_btn}
             text={'Change Name'}

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -52,6 +52,7 @@ export const _PeerVideoTileView = React.forwardRef<
     const isPipModeActive = useSelector(
       (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
     );
+    const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
     const onSpotlight = useSelector((state: RootState) => {
       const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {
@@ -101,7 +102,7 @@ export const _PeerVideoTileView = React.forwardRef<
 
     const canTakeActionOnPeer = useSelector((state: RootState) => {
       if (peer.isLocal) {
-        return true;
+        return !editUsernameDisabled || insetMode;
       }
 
       const permissions = state.hmsStates.localPeer?.role?.permissions;

package/src/components/PressableIcon.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
 import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 import { hexToRgbA } from '../utils/theme';
@@ -41,24 +42,28 @@ export const PressableIcon: React.FC<PressableIconProps> = ({
     [isHLSViewer]
   );
 
+  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
+
   return (
-    <TouchableOpacity
-      style={[
-        styles.pressable,
-        hmsRoomStyles.pressable,
-        {
-          borderRadius: rounded ? 20 : 8,
-          ...(border && !isHLSViewer
-            ? { ...styles.withBorder, ...hmsRoomStyles.border }
-            : undefined),
-          ...(active ? hmsRoomStyles.active : undefined),
-        },
-        style,
-      ]}
-      {...restProps}
-    >
-      {children}
-    </TouchableOpacity>
+    <GestureDetector gesture={tapGesture}>
+      <TouchableOpacity
+        style={[
+          styles.pressable,
+          hmsRoomStyles.pressable,
+          {
+            borderRadius: rounded ? 20 : 8,
+            ...(border && !isHLSViewer
+              ? { ...styles.withBorder, ...hmsRoomStyles.border }
+              : undefined),
+            ...(active ? hmsRoomStyles.active : undefined),
+          },
+          style,
+        ]}
+        {...restProps}
+      >
+        {children}
+      </TouchableOpacity>
+    </GestureDetector>
   );
 };
 

package/src/components/Preview.tsx

@@ -114,7 +114,7 @@ export const Preview = ({
           <BackButton />
         </SafeAreaView>
 
-        <View style={styles.footerWrapper}>
+        <SafeAreaView edges={['left', 'right']} style={styles.footerWrapper}>
           <HMSPreviewNetworkQuality />
 
           <HMSKeyboardAvoidingView
@@ -145,7 +145,7 @@ export const Preview = ({
               />
             </View>
           </HMSKeyboardAvoidingView>
-        </View>
+        </SafeAreaView>
       </View>
     </TouchableWithoutFeedback>
   );

package/src/components/RoomSettingsModalContent.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
@@ -19,6 +20,7 @@ import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
   useHMSLayoutConfig,
+  useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
   useShowChatAndParticipants,
   useStartRecording,
@@ -50,10 +52,13 @@ export const RoomSettingsModalContent: React.FC<
 
   const hmsActions = useHMSActions();
 
+  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 { registerOnModalHideAction } = useBottomSheetActions();
 
@@ -130,7 +135,13 @@ export const RoomSettingsModalContent: React.FC<
   );
 
   const isRecordingOn = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
+    (state: RootState) =>
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.STARTED
+  );
+  const isRecordingPaused = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED
   );
 
   const { startRecording } = useStartRecording();
@@ -229,12 +240,13 @@ export const RoomSettingsModalContent: React.FC<
               hide: !showHandRaiseIcon, // Hide if can't publish screen
             },
             {
-              id: 'start-recording',
+              id: 'recording',
               testID: isRecordingOn ? TestIds.room_modal_stop_recording_btn : TestIds.room_modal_start_recording_btn,
-              icon: <RecordingIcon style={{ width: 20, height: 20 }} />,
-              label: isRecordingOn ? 'Stop Recording' : 'Start Recording',
+              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: isRecordingOn,
+              isActive: false,
+              disabled: isRecordingPaused,
               hide: !canStartRecording, // Hide if can't publish screen
             },
             {
@@ -244,7 +256,7 @@ export const RoomSettingsModalContent: React.FC<
               label: 'Change Name',
               pressHandler: changeName,
               isActive: false,
-              hide: isPublisher,
+              hide: isPublisher || editUsernameDisabled,
             },
           ].filter((itm) => !itm.hide),
           true
@@ -272,6 +284,7 @@ export const RoomSettingsModalContent: React.FC<
                               onPress={item.pressHandler}
                               text={item.label}
                               isActive={item.isActive}
+                              disabled={item.disabled}
                             />
 
                             {item.sibling}
@@ -296,6 +309,7 @@ type SettingItemProps = {
   text: string;
   icon: React.ReactElement;
   onPress(): void;
+  disabled?: TouchableOpacityProps['disabled'];
   testID?: TouchableOpacityProps['testID'];
   isActive?: boolean;
 };
@@ -305,6 +319,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   text,
   icon,
   onPress,
+  disabled,
   isActive = false,
 }) => {
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -320,6 +335,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   return (
     <TouchableOpacity
       testID={testID}
+      disabled={disabled}
       style={[styles.button, isActive ? hmsRoomStyles.button : null]}
       onPress={onPress}
     >