@100mslive/react-native-room-kit 0.0.3 → 0.1.0

package/src/components/RoomSettingsModalContent.tsx

@@ -1,42 +1,25 @@
-import React, { useRef } from 'react';
-import {
-  View,
-  StyleSheet,
-  Text,
-  Platform,
-  ScrollView,
-  Image,
-  TouchableOpacity,
-  Alert,
-  InteractionManager,
-} from 'react-native';
-import {
-  HMSAudioFilePlayerNode,
-  HMSAudioMixingMode,
-  HMSUpdateListenerActions,
-} from '@100mslive/react-native-hms';
+import * as React from 'react';
+import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
 import { useDispatch, useSelector } from 'react-redux';
-import Toast from 'react-native-simple-toast';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import EntypoIcons from 'react-native-vector-icons/Entypo';
-import DocumentPicker from 'react-native-document-picker';
-import { openSettings, requestNotifications } from 'react-native-permissions';
-
-import { COLORS } from '../utils/theme';
+
 import type { RootState } from '../redux';
+import { ModalTypes } from '../utils/types';
+import { groupIntoTriplets, parseMetadata } from '../utils/functions';
 import {
-  changePipModeStatus,
-  changeEnableHLSPlayerControls,
-  changeShowHLSStats,
-  changeShowCustomHLSPlayerControls,
-} from '../redux/actions';
-import { ModalTypes, PipModes } from '../utils/types';
-import { parseMetadata } from '../utils/functions';
-import { getJoinConfig } from '../utils';
-import { HMSShareScreen } from './HMSShareScreen';
-import { ScreenShareIcon } from '../Icons';
+  BRBIcon,
+  HandIcon,
+  ParticipantsIcon,
+  PencilIcon,
+  RecordingIcon,
+  ScreenShareIcon,
+} from '../Icons';
+import { BottomSheet, useBottomSheetActions } from './BottomSheet';
+import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
+import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
+import { setStartingOrStoppingRecording } from '../redux/actions';
+import { ParticipantsCount } from './ParticipantsCount';
 
 interface RoomSettingsModalContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -52,693 +35,285 @@ interface RoomSettingsModalContentProps {
 
 export const RoomSettingsModalContent: React.FC<
   RoomSettingsModalContentProps
-> = ({
-  newAudioMixingMode,
-  isAudioShared, //
-  audioDeviceListenerAdded,
-  muteAllTracksAudio,
-  closeRoomSettingsModal,
-  setModalVisible,
-  setIsAudioShared,
-  setAudioDeviceListenerAdded,
-  setMuteAllTracksAudio,
-}) => {
-  // REFS
-  const audioFilePlayerNodeRef = useRef(
-    new HMSAudioFilePlayerNode('audio_file_player_node')
-  );
+> = (props) => {
+  const { closeRoomSettingsModal, setModalVisible } = props;
 
-  // REDUX STATES & DISPATCH
   const dispatch = useDispatch();
-  const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
+  const hmsInstance = useHMSInstance();
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
-  const localPeerRole = useSelector(
-    (state: RootState) => state.hmsStates.localPeer?.role
-  );
-  const localPeerMetadata = useSelector(
-    (state: RootState) => state.hmsStates.localPeer?.metadata
-  );
-  const isHLSStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
-  );
-  const rtmpAndRecording = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.running ?? false
-  );
 
-  const pipModeStatus = useSelector(
-    (state: RootState) => state.app.pipModeStatus
-  );
-  const showHLSStats = useSelector(
-    (state: RootState) => state.app.joinConfig.showHLSStats
-  );
-  const enableHLSPlayerControls = useSelector(
-    (state: RootState) => state.app.joinConfig.enableHLSPlayerControls
-  );
-  const showCustomHLSPlayerControls = useSelector(
-    (state: RootState) => state.app.joinConfig.showCustomHLSPlayerControls
-  );
-
-  // CONSTANTS
-  const parsedMetadata = parseMetadata(localPeerMetadata);
-  const isPipModeUnavailable = pipModeStatus === PipModes.NOT_AVAILABLE;
-
-  //#region FUNCTIONS
-  const handleBRB = async () => {
-    closeRoomSettingsModal();
-
-    await hmsInstance
-      ?.changeMetadata(
-        JSON.stringify({
-          ...parsedMetadata,
-          isBRBOn: !parsedMetadata?.isBRBOn,
-          isHandRaised: false,
-        })
-      )
-      .then((d) => console.log('Change Metadata Success: ', d))
-      .catch((e) => console.log('Change Metadata Error: ', e));
-  };
+  const hmsActions = useHMSActions();
 
-  const onRaiseHandPress = async () => {
-    closeRoomSettingsModal();
-
-    await hmsInstance
-      ?.changeMetadata(
-        JSON.stringify({
-          ...parsedMetadata,
-          isHandRaised: !parsedMetadata?.isHandRaised,
-          isBRBOn: false,
-        })
-      )
-      .then((d) => console.log('Change Metadata Success: ', d))
-      .catch((e) => console.log('Change Metadata Error: ', e));
-  };
+  const { registerOnModalHideAction } = useBottomSheetActions();
 
+  // #region Participants realted states and functions
   const onParticipantsPress = () => {
-    InteractionManager.runAfterInteractions(() => {
-      setModalVisible(ModalTypes.PARTICIPANTS, true);
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      setModalVisible(ModalTypes.PARTICIPANTS);
     });
-  };
-
-  const enterPipMode = async () => {
-    if (isPipModeUnavailable) {
-      return console.log('PIP mode unavailable on Deice!');
-    }
 
+    // Close the current bottom sheet
     closeRoomSettingsModal();
-
-    try {
-      const isEnabled = await hmsInstance?.enablePipMode({
-        aspectRatio: [16, 9], // for 16:9 aspect ratio
-        endButton: true,
-        videoButton: true,
-        audioButton: true,
-      });
-      if (isEnabled === true) {
-        dispatch(changePipModeStatus(PipModes.ACTIVE));
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const handleLocalRemoteAudiosMute = () => {
-    closeRoomSettingsModal();
-    hmsInstance?.setPlaybackForAllAudio(!muteAllTracksAudio);
-    setMuteAllTracksAudio(!muteAllTracksAudio);
   };
+  // #endregion
 
-  const handleRemoteAudiosMute = async () => {
-    closeRoomSettingsModal();
-    await hmsInstance
-      ?.remoteMuteAllAudio()
-      .then((d) => console.log('Remote Mute All Audio Success: ', d))
-      .catch((e) => console.log('Remote Mute All Audio Error: ', e));
-  };
+  // #region Screen Share related states and functions
+  const canPublishScreen = useCanPublishScreen();
 
-  const handleHLSStreaming = () => {
-    if (isHLSStreaming) {
-      closeRoomSettingsModal();
-      hmsInstance
-        ?.stopHLSStreaming()
-        .then((d) => console.log('Stop HLS Streaming Success: ', d))
-        .catch((e) => console.log('Stop HLS Streaming Error: ', e));
-    } else {
-      setModalVisible(ModalTypes.HLS_STREAMING, true);
-    }
-  };
-
-  const handleRTMPAndRecording = () => {
-    if (rtmpAndRecording) {
-      closeRoomSettingsModal();
-      hmsInstance
-        ?.stopRtmpAndRecording()
-        .then((d) => console.log('Stop RTMP And Recording Success: ', d))
-        .catch((e) => console.log('Stop RTMP And Recording Error: ', e));
-    } else {
-      setModalVisible(ModalTypes.RECORDING, true);
-    }
-  };
+  const isLocalScreenShared = useSelector(
+    (state: RootState) => state.hmsStates.isLocalScreenShared
+  );
 
-  const addRemoveAudioDeviceChangeListener = () => {
+  const handleScreenShareTogglePress = async () => {
     closeRoomSettingsModal();
-    if (hmsInstance) {
-      if (audioDeviceListenerAdded) {
-        setAudioDeviceListenerAdded(false);
-
-        hmsInstance.removeEventListener(
-          HMSUpdateListenerActions.ON_AUDIO_DEVICE_CHANGED
-        );
-      } else {
-        setAudioDeviceListenerAdded(true);
-
-        hmsInstance.setAudioDeviceChangeListener((data: any) => {
-          Toast.showWithGravity(
-            `Audio Device Output changed to ${data?.device}`,
-            Toast.LONG,
-            Toast.TOP
-          );
-        });
-      }
-    }
+    await hmsActions.setScreenShareEnabled(!isLocalScreenShared);
   };
+  // #endregion
 
-  const changeBulkRole = () =>
-    setModalVisible(ModalTypes.BULK_ROLE_CHANGE, true);
-
-  const changeTrackState = () =>
-    setModalVisible(ModalTypes.CHANGE_TRACK_ROLE, true);
-
-  const switchAudioOutput = () => {
-    if (Platform.OS === 'android') {
-      setModalVisible(ModalTypes.SWITCH_AUDIO_OUTPUT, true);
-    } else {
-      closeRoomSettingsModal();
-      hmsInstance?.switchAudioOutputUsingIOSUI();
-    }
-  };
-
-  const changeAudioMode = () =>
-    setModalVisible(ModalTypes.CHANGE_AUDIO_MODE, true);
+  // #region "BRB" and "Hand Raise" related states and functions
+  const localPeerMetadata = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.metadata
+  );
+  const parsedMetadata = parseMetadata(localPeerMetadata);
 
-  const setAudioMixingMode = () =>
-    setModalVisible(ModalTypes.AUDIO_MIXING_MODE, true);
+  const isBRBOn = !!parsedMetadata.isBRBOn;
+  const isHandRaised = !!parsedMetadata.isHandRaised;
 
-  const handleHLSPlayerAspectRatio = () => {
-    setModalVisible(ModalTypes.HLS_PLAYER_ASPECT_RATIO, true);
+  const toggleRaiseHand = async () => {
+    const newMetadata = {
+      ...parsedMetadata,
+      isBRBOn: false,
+      isHandRaised: !isHandRaised,
+    };
+    closeRoomSettingsModal();
+    await hmsActions.changeMetadata(newMetadata);
   };
 
-  const showRTCStats = () => setModalVisible(ModalTypes.RTC_STATS, true);
-
-  const toggleShowHLSStats = () => {
-    dispatch(changeShowHLSStats(!showHLSStats));
-    setModalVisible(ModalTypes.DEFAULT);
+  const toggleBRB = async () => {
+    const newMetadata = {
+      ...parsedMetadata,
+      isHandRaised: false,
+      isBRBOn: !isBRBOn,
+    };
+    closeRoomSettingsModal();
+    await hmsActions.changeMetadata(newMetadata);
   };
+  // #endregion
 
-  const toggleEnableHLSPlayerControls = () => {
-    dispatch(changeEnableHLSPlayerControls(!enableHLSPlayerControls));
-    setModalVisible(ModalTypes.DEFAULT);
-  };
+  // #region Recording related states and functions
+  const canStartRecording = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
+  );
 
-  const toggleShowCustomHLSPlayerControls = () => {
-    dispatch(changeShowCustomHLSPlayerControls(!showCustomHLSPlayerControls));
-    setModalVisible(ModalTypes.DEFAULT);
-  };
+  const isRecordingOn = useSelector(
+    (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
+  );
 
-  // Android Audioshare
-  const handleAudioShare = async () => {
-    closeRoomSettingsModal();
-    if (isAudioShared) {
-      hmsInstance
-        ?.stopAudioshare()
-        .then((d) => {
-          setIsAudioShared(false);
-          console.log('Stop Audioshare Success: ', d);
-        })
-        .catch((e) => console.log('Stop Audioshare Error: ', e));
+  const handleRecordingTogglePress = () => {
+    if (isRecordingOn) {
+      registerOnModalHideAction(() => {
+        setModalVisible(ModalTypes.STOP_RECORDING);
+      });
+      closeRoomSettingsModal();
     } else {
-      // check notification permission on android platform
-      // Audio share feature needs foreground service running. for Foreground service to keep running, we need active notification.
-      if (Platform.OS === 'android') {
-        const result = await requestNotifications(['alert', 'sound']);
-
-        console.log('Notification Permission Result: ', result);
-
-        if (result.status === 'blocked') {
-          Alert.alert(
-            'Notification Permission is Blocked!',
-            '100ms SDK needs notification permission to start audio share. Please allow notification from settings and try again!',
-            [
-              { text: 'cancel' },
-              { text: 'Go to Settings', onPress: () => openSettings() },
-            ],
-            { cancelable: true }
-          );
-          return;
-        }
-      }
-
+      dispatch(setStartingOrStoppingRecording(true));
       hmsInstance
-        ?.startAudioshare(newAudioMixingMode)
-        .then((d) => {
-          setIsAudioShared(true);
-          console.log('Start Audioshare Success: ', d);
-        })
-        .catch((e) => console.log('Start Audioshare Error: ', e));
+        .startRTMPOrRecording({ record: true })
+        .catch(() => dispatch(setStartingOrStoppingRecording(false)));
+      closeRoomSettingsModal();
     }
   };
+  // #endregion
 
-  // iOS Audioshare
-  const setAudioShareVolume = () =>
-    setModalVisible(ModalTypes.SET_AUDIO_SHARE_VOLUME, true);
-
-  // iOS Audioshare
-  const playAudioShare = () => {
-    closeRoomSettingsModal();
-    setTimeout(() => {
-      DocumentPicker.pickSingle()
-        .then((result) => {
-          console.log('Document Picker Success: ', result);
-          audioFilePlayerNodeRef.current
-            .play(result?.uri, false, false)
-            .then((d) => {
-              console.log('Start Audioshare Success: ', d);
-            })
-            .catch((e) => console.log('Start Audioshare Error: ', e));
-        })
-        .catch((e) => console.log('Document Picker Error: ', e));
-    }, 500);
-  };
-
-  // iOS Audioshare
-  const stopAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.stop();
-  };
-
-  // iOS Audioshare
-  const pauseAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.pause();
-  };
-
-  // iOS Audioshare
-  const resumeAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.resume();
-  };
-
-  // iOS Audioshare
-  const isAudioSharePlaying = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .isPlaying()
-      .then((d) => console.log('Audioshare isPlaying: ', d))
-      .catch((e) => console.log('Audioshare isPlaying: ', e));
-  };
-
-  // iOS Audioshare
-  const getAudioShareDuration = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .duration()
-      .then((d) => console.log('Audioshare duration: ', d))
-      .catch((e) => console.log('Audioshare duration: ', e));
-  };
+  // #region Change Name functions
+  const changeName = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      setModalVisible(ModalTypes.CHANGE_NAME);
+    });
 
-  // iOS Audioshare
-  const getAudioShareCurrentDuration = () => {
+    // Close the current bottom sheet
     closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .currentDuration()
-      .then((d) => console.log('Audioshare currentDuration: ', d))
-      .catch((e) => console.log('Audioshare currentDuration: ', e));
   };
-  //#endregion
+  // #endregion
 
   return (
-    <View style={styles.container}>
-      <View style={styles.chatHeaderContainer}>
-        <Text style={styles.chatHeading}>More Options</Text>
+    <View>
+      <BottomSheet.Header
+        dismissModal={closeRoomSettingsModal}
+        heading="Options"
+      />
+
+      <BottomSheet.Divider />
+
+      <View style={styles.contentContainer}>
+        {groupIntoTriplets(
+          [
+            {
+              id: 'participants',
+              icon: <ParticipantsIcon style={{ width: 20, height: 20 }} />,
+              label: 'Participants',
+              pressHandler: onParticipantsPress,
+              isActive: false,
+              hide: false,
+              sibling: <ParticipantsCount />,
+              // parent
+              // children
+            },
+            {
+              id: 'share-screen',
+              icon: <ScreenShareIcon style={{ width: 20, height: 20 }} />,
+              label: isLocalScreenShared ? 'Sharing Screen' : 'Share Screen',
+              pressHandler: handleScreenShareTogglePress,
+              isActive: !!isLocalScreenShared, // Show active if screen is shared
+              hide: !canPublishScreen, // Hide if can't publish screen
+            },
+            {
+              id: 'brb',
+              icon: <BRBIcon style={{ width: 20, height: 20 }} />,
+              label: isBRBOn ? "I'm Back" : 'Be Right Back',
+              pressHandler: toggleBRB,
+              isActive: isBRBOn, // Show active if `isBRBOn` is set on metadata
+              hide: false, // Hide if can't publish screen
+            },
+            {
+              id: 'raise-hand',
+              icon: <HandIcon style={{ width: 20, height: 20 }} />,
+              label: parsedMetadata.isHandRaised ? 'Hand Raised' : 'Raise Hand',
+              pressHandler: toggleRaiseHand,
+              isActive: isHandRaised, // Show active if `isHandRaised` is set on metadata
+              hide: false, // Hide if can't publish screen
+            },
+            {
+              id: 'start-recording',
+              icon: <RecordingIcon style={{ width: 20, height: 20 }} />,
+              label: isRecordingOn ? 'Stop Recording' : 'Start Recording',
+              pressHandler: handleRecordingTogglePress,
+              isActive: !!isRecordingOn,
+              hide: !canStartRecording, // Hide if can't publish screen
+            },
+            {
+              id: 'change-name',
+              icon: <PencilIcon style={{ width: 20, height: 20 }} />,
+              label: 'Change Name',
+              pressHandler: changeName,
+              isActive: false,
+              hide: false,
+            },
+          ].filter((itm) => !itm.hide),
+          true
+        ).map((itm, idx) => {
+          const isFirst = idx === 0;
+
+          return (
+            <React.Fragment key={idx.toString()}>
+              {isFirst ? null : <View style={styles.rowSpacer} />}
+
+              <View style={styles.row}>
+                {itm.map((item, index) => {
+                  const isFirst = index === 0;
+
+                  return (
+                    <React.Fragment key={item ? item.id : index.toString()}>
+                      {isFirst ? null : <View style={styles.colSpacer} />}
+
+                      <View style={styles.col}>
+                        {item ? (
+                          <>
+                            <SettingItem
+                              icon={item.icon}
+                              onPress={item.pressHandler}
+                              text={item.label}
+                              isActive={item.isActive}
+                            />
+
+                            {item.sibling}
+                          </>
+                        ) : null}
+                      </View>
+                    </React.Fragment>
+                  );
+                })}
+              </View>
+            </React.Fragment>
+          );
+        })}
       </View>
 
-      <ScrollView
-        style={styles.contentContainer}
-        contentContainerStyle={styles.scrollContentContainer}
-      >
-        <HMSShareScreen
-          screenShareDelegate={
-            <ScreenShareDelegate
-              closeRoomSettingsModal={closeRoomSettingsModal}
-            />
-          }
-        />
-
-        <TouchableOpacity onPress={handleBRB} style={styles.button}>
-          <Image source={require('../assets/brb.png')} style={styles.brbIcon} />
-
-          <Text style={styles.text}>
-            {parsedMetadata?.isBRBOn ? 'Remove BRB' : 'Set BRB'}
-          </Text>
-        </TouchableOpacity>
-
-        <SettingItem
-          onPress={onRaiseHandPress}
-          text={parsedMetadata?.isHandRaised ? 'Low Your Hand' : 'Raise Hand'}
-          IconType={Ionicons}
-          iconName={'hand-left-outline'}
-        />
-
-        <SettingItem
-          onPress={onParticipantsPress}
-          text={'Participants'}
-          IconType={Ionicons}
-          iconName={'people'}
-        />
-
-        {localPeerRole?.name?.includes('hls-') ? (
-          <SettingItem
-            onPress={handleHLSPlayerAspectRatio}
-            text={'Change Aspect Ratio'}
-            IconType={MaterialCommunityIcons}
-            iconName={'aspect-ratio'}
-          />
-        ) : null}
-
-        {!localPeerRole?.name?.includes('hls-') ? (
-          <SettingItem
-            onPress={handleLocalRemoteAudiosMute}
-            text={`${muteAllTracksAudio ? 'Unmute' : 'Mute'} Room`}
-            IconType={Ionicons}
-            iconName={muteAllTracksAudio ? 'mic-off-outline' : 'mic-outline'}
-          />
-        ) : null}
-
-        {debugMode && localPeerRole?.permissions?.hlsStreaming ? (
-          <SettingItem
-            onPress={handleHLSStreaming}
-            text={`${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`}
-            IconType={Ionicons}
-            iconName="radio-outline"
-          />
-        ) : null}
-
-        {debugMode && localPeerRole?.permissions?.rtmpStreaming ? (
-          <SettingItem
-            onPress={handleRTMPAndRecording}
-            text={
-              rtmpAndRecording === true
-                ? 'Stop RTMP And Recording'
-                : 'Start RTMP or Recording'
-            }
-            IconType={Ionicons}
-            iconName="recording-outline"
-          />
-        ) : null}
-
-        {debugMode && localPeerRole?.permissions?.changeRole ? (
-          <SettingItem
-            onPress={changeBulkRole}
-            text="Bulk Role Change"
-            IconType={Ionicons}
-            iconName="people-outline"
-          />
-        ) : null}
-
-        {debugMode && localPeerRole?.permissions?.mute ? (
-          <SettingItem
-            onPress={handleRemoteAudiosMute}
-            text="Remote Mute All Audio Tracks"
-            IconType={Ionicons}
-            iconName="mic-off-outline"
-          />
-        ) : null}
-
-        {debugMode &&
-        (localPeerRole?.permissions?.mute ||
-          localPeerRole?.permissions?.unmute) ? (
-          <SettingItem
-            onPress={changeTrackState}
-            text="Change Track State For Role"
-            IconType={MaterialIcons}
-            iconName="track-changes"
-          />
-        ) : null}
-
-        {localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
-          <SettingItem
-            onPress={switchAudioOutput}
-            text="Switch Audio Output"
-            IconType={MaterialCommunityIcons}
-            iconName="cast-audio"
-          />
-        ) : null}
-
-        {!isPipModeUnavailable ? (
-          <SettingItem
-            onPress={enterPipMode}
-            text="Picture in Picture (PIP) Mode"
-            IconType={MaterialCommunityIcons}
-            iconName="picture-in-picture-bottom-right"
-          />
-        ) : null}
-
-        {debugMode ? (
-          <>
-            {localPeerRole?.name?.includes('hls-') ? (
-              <>
-                <SettingItem
-                  onPress={toggleShowHLSStats}
-                  text={showHLSStats ? 'Hide HLS Stats' : 'Show HLS Stats'}
-                  IconType={MaterialCommunityIcons}
-                  iconName={'clipboard-pulse-outline'}
-                />
-
-                <SettingItem
-                  onPress={toggleEnableHLSPlayerControls}
-                  text={
-                    enableHLSPlayerControls
-                      ? 'Disable HLS Player Controls'
-                      : 'Enable HLS Player Controls'
-                  }
-                  IconType={Ionicons}
-                  iconName={'ios-settings-outline'}
-                />
-
-                <SettingItem
-                  onPress={toggleShowCustomHLSPlayerControls}
-                  text={
-                    showCustomHLSPlayerControls
-                      ? 'Hide Custom HLS Player Controls'
-                      : 'Show Custom HLS Player Controls'
-                  }
-                  IconType={Ionicons}
-                  iconName={'ios-settings-outline'}
-                />
-              </>
-            ) : (
-              <>
-                <SettingItem
-                  onPress={showRTCStats}
-                  text="Show RTC Stats"
-                  IconType={MaterialCommunityIcons}
-                  iconName={'clipboard-pulse-outline'}
-                />
-              </>
-            )}
-
-            {Platform.OS === 'android' &&
-            localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
-              <>
-                <SettingItem
-                  onPress={addRemoveAudioDeviceChangeListener}
-                  text={`${
-                    audioDeviceListenerAdded ? 'Remove' : 'Set'
-                  } Audio Output Change Listener`}
-                  IconType={MaterialCommunityIcons}
-                  iconName="video-input-component"
-                />
-
-                <SettingItem
-                  onPress={handleAudioShare}
-                  text={`${isAudioShared ? 'Stop' : 'Start'} Audioshare`}
-                  IconType={Ionicons}
-                  iconName="share-social-outline"
-                />
-
-                <SettingItem
-                  onPress={changeAudioMode}
-                  text="Set Audio Mode"
-                  IconType={MaterialCommunityIcons}
-                  iconName="call-split"
-                />
-
-                <SettingItem
-                  onPress={setAudioMixingMode}
-                  text="Set Audio Mixing Mode"
-                  IconType={EntypoIcons}
-                  iconName="sound-mix"
-                />
-              </>
-            ) : null}
-
-            {Platform.OS === 'ios' &&
-            getJoinConfig().audioMixer &&
-            localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
-              <>
-                <SettingItem
-                  onPress={playAudioShare}
-                  text="Play Audio Share"
-                  IconType={Ionicons}
-                  iconName="play-outline"
-                />
-
-                <SettingItem
-                  onPress={stopAudioShare}
-                  text="Stop Audio Share"
-                  IconType={Ionicons}
-                  iconName="stop-outline"
-                />
-
-                <SettingItem
-                  onPress={setAudioShareVolume}
-                  text="Set Audio Share Volume"
-                  IconType={Ionicons}
-                  iconName="volume-high-outline"
-                />
-
-                <SettingItem
-                  onPress={pauseAudioShare}
-                  text="Pause Audio Share"
-                  IconType={Ionicons}
-                  iconName="pause-outline"
-                />
-
-                <SettingItem
-                  onPress={resumeAudioShare}
-                  text="Resume Audio Share"
-                  IconType={Ionicons}
-                  iconName="play-skip-forward-outline"
-                />
-
-                <SettingItem
-                  onPress={isAudioSharePlaying}
-                  text="Is Audio Share Playing"
-                  IconType={MaterialCommunityIcons}
-                  iconName="file-question-outline"
-                />
-
-                <SettingItem
-                  onPress={getAudioShareDuration}
-                  text="Audio Share Duration"
-                  IconType={Ionicons}
-                  iconName="timer-outline"
-                />
-
-                <SettingItem
-                  onPress={getAudioShareCurrentDuration}
-                  text="Audio Share Current Duration"
-                  IconType={Ionicons}
-                  iconName="timer-outline"
-                />
-              </>
-            ) : null}
-          </>
-        ) : null}
-      </ScrollView>
+      {debugMode ? <RoomSettingsModalDebugModeContent {...props} /> : null}
     </View>
   );
 };
 
-interface SettingItemProps {
-  onPress(): void;
+type SettingItemProps = {
   text: string;
-  iconName: string;
-  IconType: any;
-}
+  icon: React.ReactElement;
+  onPress(): void;
+  isActive?: boolean;
+};
 
 const SettingItem: React.FC<SettingItemProps> = ({
-  onPress,
   text,
-  iconName,
-  IconType,
-}) => {
-  return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
-      <IconType name={iconName} size={24} style={styles.icon} />
-
-      <Text style={styles.text}>{text}</Text>
-    </TouchableOpacity>
-  );
-};
-
-const ScreenShareDelegate = ({
-  isLocalScreenShared,
+  icon,
   onPress,
-  closeRoomSettingsModal,
-}: any) => {
-  const handleScreenSharePress = () => {
-    closeRoomSettingsModal();
-    onPress?.();
-  };
+  isActive = false,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
 
   return (
-    <TouchableOpacity onPress={handleScreenSharePress} style={styles.button}>
-      <ScreenShareIcon style={styles.icon} />
-      <Text style={styles.text}>
-        {isLocalScreenShared ? 'Stop Screen Share' : 'Screen Share'}
+    <TouchableOpacity
+      style={[styles.button, isActive ? hmsRoomStyles.button : null]}
+      onPress={onPress}
+    >
+      {icon}
+
+      <Text style={[styles.text, hmsRoomStyles.text]} numberOfLines={2}>
+        {text}
       </Text>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-    width: '100%',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
+  contentContainer: {
+    marginHorizontal: 20,
   },
-  chatHeaderContainer: {
-    height: 48,
-    width: '80%',
+  row: {
     flexDirection: 'row',
-    alignItems: 'center',
   },
-  chatHeading: {
-    fontFamily: 'Inter-Medium',
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    paddingRight: 12,
+  rowSpacer: {
+    height: 16,
+    width: '100%',
   },
-  contentContainer: {
+  col: {
     flex: 1,
-    marginVertical: 4,
-  },
-  scrollContentContainer: {
-    paddingBottom: 52,
+    position: 'relative',
   },
-  brbIcon: {
-    width: 24,
-    height: 24,
-    tintColor: COLORS.WHITE,
-    marginRight: 12,
+  colSpacer: {
+    width: 12,
+    height: '100%',
   },
   button: {
-    flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: 12,
+    borderRadius: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
   },
   text: {
-    fontFamily: 'Inter-Medium',
-    fontSize: 14,
-    lineHeight: 24,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-  },
-  icon: {
-    color: COLORS.WHITE,
-    marginRight: 12,
+    textAlign: 'center',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginTop: 8,
   },
 });