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

package/lib/module/components/RoomSettingsModalContent.js

@@ -1,505 +1,277 @@
-import React, { useRef } from 'react';
-import { View, StyleSheet, Text, Platform, ScrollView, Image, TouchableOpacity, Alert, InteractionManager } from 'react-native';
-import { HMSAudioFilePlayerNode, HMSUpdateListenerActions } from '@100mslive/react-native-hms';
+import * as React from 'react';
+import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 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 { 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';
-export const RoomSettingsModalContent = _ref => {
-  var _localPeerRole$name, _localPeerRole$name2, _localPeerRole$permis, _localPeerRole$permis2, _localPeerRole$permis3, _localPeerRole$permis4, _localPeerRole$permis5, _localPeerRole$permis6, _localPeerRole$publis, _localPeerRole$name3, _localPeerRole$publis2, _localPeerRole$publis3;
-  let {
-    newAudioMixingMode,
-    isAudioShared,
-    //
-    audioDeviceListenerAdded,
-    muteAllTracksAudio,
+import { ModalTypes } from '../utils/types';
+import { groupIntoTriplets, parseMetadata } from '../utils/functions';
+import { 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';
+export const RoomSettingsModalContent = props => {
+  const {
     closeRoomSettingsModal,
-    setModalVisible,
-    setIsAudioShared,
-    setAudioDeviceListenerAdded,
-    setMuteAllTracksAudio
-  } = _ref;
-  // REFS
-  const audioFilePlayerNodeRef = useRef(new HMSAudioFilePlayerNode('audio_file_player_node'));
-
-  // REDUX STATES & DISPATCH
+    setModalVisible
+  } = props;
   const dispatch = useDispatch();
-  const hmsInstance = useSelector(state => state.user.hmsInstance);
+  const hmsInstance = useHMSInstance();
   const debugMode = useSelector(state => state.user.debugMode);
-  const localPeerRole = useSelector(state => {
-    var _state$hmsStates$loca;
-    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.role;
-  });
-  const localPeerMetadata = useSelector(state => {
-    var _state$hmsStates$loca2;
-    return (_state$hmsStates$loca2 = state.hmsStates.localPeer) === null || _state$hmsStates$loca2 === void 0 ? void 0 : _state$hmsStates$loca2.metadata;
-  });
-  const isHLSStreaming = useSelector(state => {
-    var _state$hmsStates$room;
-    return ((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room.hlsStreamingState) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.running) ?? false;
-  });
-  const rtmpAndRecording = useSelector(state => {
-    var _state$hmsStates$room2;
-    return ((_state$hmsStates$room2 = state.hmsStates.room) === null || _state$hmsStates$room2 === void 0 || (_state$hmsStates$room2 = _state$hmsStates$room2.browserRecordingState) === null || _state$hmsStates$room2 === void 0 ? void 0 : _state$hmsStates$room2.running) ?? false;
-  });
-  const pipModeStatus = useSelector(state => state.app.pipModeStatus);
-  const showHLSStats = useSelector(state => state.app.joinConfig.showHLSStats);
-  const enableHLSPlayerControls = useSelector(state => state.app.joinConfig.enableHLSPlayerControls);
-  const showCustomHLSPlayerControls = useSelector(state => state.app.joinConfig.showCustomHLSPlayerControls);
-
-  // CONSTANTS
-  const parsedMetadata = parseMetadata(localPeerMetadata);
-  const isPipModeUnavailable = pipModeStatus === PipModes.NOT_AVAILABLE;
+  const hmsActions = useHMSActions();
+  const {
+    registerOnModalHideAction
+  } = useBottomSheetActions();
 
-  //#region FUNCTIONS
-  const handleBRB = async () => {
-    closeRoomSettingsModal();
-    await (hmsInstance === null || hmsInstance === void 0 ? void 0 : hmsInstance.changeMetadata(JSON.stringify({
-      ...parsedMetadata,
-      isBRBOn: !(parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isBRBOn),
-      isHandRaised: false
-    })).then(d => console.log('Change Metadata Success: ', d)).catch(e => console.log('Change Metadata Error: ', e)));
-  };
-  const onRaiseHandPress = async () => {
-    closeRoomSettingsModal();
-    await (hmsInstance === null || hmsInstance === void 0 ? void 0 : hmsInstance.changeMetadata(JSON.stringify({
-      ...parsedMetadata,
-      isHandRaised: !(parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isHandRaised),
-      isBRBOn: false
-    })).then(d => console.log('Change Metadata Success: ', d)).catch(e => console.log('Change Metadata Error: ', e)));
-  };
+  // #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!');
-    }
-    closeRoomSettingsModal();
-    try {
-      const isEnabled = await (hmsInstance === null || hmsInstance === void 0 ? void 0 : 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 === null || hmsInstance === void 0 ? void 0 : hmsInstance.setPlaybackForAllAudio(!muteAllTracksAudio);
-    setMuteAllTracksAudio(!muteAllTracksAudio);
-  };
-  const handleRemoteAudiosMute = async () => {
-    closeRoomSettingsModal();
-    await (hmsInstance === null || hmsInstance === void 0 ? void 0 : hmsInstance.remoteMuteAllAudio().then(d => console.log('Remote Mute All Audio Success: ', d)).catch(e => console.log('Remote Mute All Audio Error: ', e)));
-  };
-  const handleHLSStreaming = () => {
-    if (isHLSStreaming) {
-      closeRoomSettingsModal();
-      hmsInstance === null || hmsInstance === void 0 ? void 0 : 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 === null || hmsInstance === void 0 ? void 0 : 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 addRemoveAudioDeviceChangeListener = () => {
-    closeRoomSettingsModal();
-    if (hmsInstance) {
-      if (audioDeviceListenerAdded) {
-        setAudioDeviceListenerAdded(false);
-        hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_AUDIO_DEVICE_CHANGED);
-      } else {
-        setAudioDeviceListenerAdded(true);
-        hmsInstance.setAudioDeviceChangeListener(data => {
-          Toast.showWithGravity(`Audio Device Output changed to ${data === null || data === void 0 ? void 0 : data.device}`, Toast.LONG, Toast.TOP);
-        });
-      }
-    }
-  };
-  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 === null || hmsInstance === void 0 ? void 0 : hmsInstance.switchAudioOutputUsingIOSUI();
-    }
-  };
-  const changeAudioMode = () => setModalVisible(ModalTypes.CHANGE_AUDIO_MODE, true);
-  const setAudioMixingMode = () => setModalVisible(ModalTypes.AUDIO_MIXING_MODE, true);
-  const handleHLSPlayerAspectRatio = () => {
-    setModalVisible(ModalTypes.HLS_PLAYER_ASPECT_RATIO, true);
-  };
-  const showRTCStats = () => setModalVisible(ModalTypes.RTC_STATS, true);
-  const toggleShowHLSStats = () => {
-    dispatch(changeShowHLSStats(!showHLSStats));
-    setModalVisible(ModalTypes.DEFAULT);
-  };
-  const toggleEnableHLSPlayerControls = () => {
-    dispatch(changeEnableHLSPlayerControls(!enableHLSPlayerControls));
-    setModalVisible(ModalTypes.DEFAULT);
-  };
-  const toggleShowCustomHLSPlayerControls = () => {
-    dispatch(changeShowCustomHLSPlayerControls(!showCustomHLSPlayerControls));
-    setModalVisible(ModalTypes.DEFAULT);
-  };
-
-  // Android Audioshare
-  const handleAudioShare = async () => {
-    closeRoomSettingsModal();
-    if (isAudioShared) {
-      hmsInstance === null || hmsInstance === void 0 ? void 0 : hmsInstance.stopAudioshare().then(d => {
-        setIsAudioShared(false);
-        console.log('Stop Audioshare Success: ', d);
-      }).catch(e => console.log('Stop Audioshare Error: ', e));
-    } 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;
-        }
-      }
-      hmsInstance === null || hmsInstance === void 0 ? void 0 : hmsInstance.startAudioshare(newAudioMixingMode).then(d => {
-        setIsAudioShared(true);
-        console.log('Start Audioshare Success: ', d);
-      }).catch(e => console.log('Start Audioshare Error: ', e));
-    }
-  };
-
-  // iOS Audioshare
-  const setAudioShareVolume = () => setModalVisible(ModalTypes.SET_AUDIO_SHARE_VOLUME, true);
 
-  // iOS Audioshare
-  const playAudioShare = () => {
+    // Close the current bottom sheet
     closeRoomSettingsModal();
-    setTimeout(() => {
-      DocumentPicker.pickSingle().then(result => {
-        console.log('Document Picker Success: ', result);
-        audioFilePlayerNodeRef.current.play(result === null || result === void 0 ? void 0 : 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);
   };
+  // #endregion
 
-  // iOS Audioshare
-  const stopAudioShare = () => {
+  // #region Screen Share related states and functions
+  const canPublishScreen = useCanPublishScreen();
+  const isLocalScreenShared = useSelector(state => state.hmsStates.isLocalScreenShared);
+  const handleScreenShareTogglePress = async () => {
     closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.stop();
+    await hmsActions.setScreenShareEnabled(!isLocalScreenShared);
   };
+  // #endregion
 
-  // iOS Audioshare
-  const pauseAudioShare = () => {
+  // #region "BRB" and "Hand Raise" related states and functions
+  const localPeerMetadata = useSelector(state => {
+    var _state$hmsStates$loca;
+    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.metadata;
+  });
+  const parsedMetadata = parseMetadata(localPeerMetadata);
+  const isBRBOn = !!parsedMetadata.isBRBOn;
+  const isHandRaised = !!parsedMetadata.isHandRaised;
+  const toggleRaiseHand = async () => {
+    const newMetadata = {
+      ...parsedMetadata,
+      isBRBOn: false,
+      isHandRaised: !isHandRaised
+    };
     closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.pause();
+    await hmsActions.changeMetadata(newMetadata);
   };
-
-  // iOS Audioshare
-  const resumeAudioShare = () => {
+  const toggleBRB = async () => {
+    const newMetadata = {
+      ...parsedMetadata,
+      isHandRaised: false,
+      isBRBOn: !isBRBOn
+    };
     closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.resume();
+    await hmsActions.changeMetadata(newMetadata);
   };
+  // #endregion
 
-  // iOS Audioshare
-  const isAudioSharePlaying = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.isPlaying().then(d => console.log('Audioshare isPlaying: ', d)).catch(e => console.log('Audioshare isPlaying: ', e));
+  // #region Recording related states and functions
+  const canStartRecording = useSelector(state => {
+    var _state$hmsStates$loca2;
+    return !!((_state$hmsStates$loca2 = state.hmsStates.localPeer) !== null && _state$hmsStates$loca2 !== void 0 && (_state$hmsStates$loca2 = _state$hmsStates$loca2.role) !== null && _state$hmsStates$loca2 !== void 0 && (_state$hmsStates$loca2 = _state$hmsStates$loca2.permissions) !== null && _state$hmsStates$loca2 !== void 0 && _state$hmsStates$loca2.browserRecording);
+  });
+  const isRecordingOn = useSelector(state => {
+    var _state$hmsStates$room;
+    return !!((_state$hmsStates$room = state.hmsStates.room) !== null && _state$hmsStates$room !== void 0 && (_state$hmsStates$room = _state$hmsStates$room.browserRecordingState) !== null && _state$hmsStates$room !== void 0 && _state$hmsStates$room.running);
+  });
+  const handleRecordingTogglePress = () => {
+    if (isRecordingOn) {
+      registerOnModalHideAction(() => {
+        setModalVisible(ModalTypes.STOP_RECORDING);
+      });
+      closeRoomSettingsModal();
+    } else {
+      dispatch(setStartingOrStoppingRecording(true));
+      hmsInstance.startRTMPOrRecording({
+        record: true
+      }).catch(() => dispatch(setStartingOrStoppingRecording(false)));
+      closeRoomSettingsModal();
+    }
   };
+  // #endregion
 
-  // 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 /*#__PURE__*/React.createElement(View, {
-    style: styles.container
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.chatHeaderContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.chatHeading
-  }, "More Options")), /*#__PURE__*/React.createElement(ScrollView, {
-    style: styles.contentContainer,
-    contentContainerStyle: styles.scrollContentContainer
-  }, /*#__PURE__*/React.createElement(HMSShareScreen, {
-    screenShareDelegate: /*#__PURE__*/React.createElement(ScreenShareDelegate, {
-      closeRoomSettingsModal: closeRoomSettingsModal
-    })
-  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: handleBRB,
-    style: styles.button
-  }, /*#__PURE__*/React.createElement(Image, {
-    source: require('../assets/brb.png'),
-    style: styles.brbIcon
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isBRBOn ? 'Remove BRB' : 'Set BRB')), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: onRaiseHandPress,
-    text: parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isHandRaised ? 'Low Your Hand' : 'Raise Hand',
-    IconType: Ionicons,
-    iconName: 'hand-left-outline'
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: onParticipantsPress,
-    text: 'Participants',
-    IconType: Ionicons,
-    iconName: 'people'
-  }), localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$name = localPeerRole.name) !== null && _localPeerRole$name !== void 0 && _localPeerRole$name.includes('hls-') ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: handleHLSPlayerAspectRatio,
-    text: 'Change Aspect Ratio',
-    IconType: MaterialCommunityIcons,
-    iconName: 'aspect-ratio'
-  }) : null, !(localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$name2 = localPeerRole.name) !== null && _localPeerRole$name2 !== void 0 && _localPeerRole$name2.includes('hls-')) ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: handleLocalRemoteAudiosMute,
-    text: `${muteAllTracksAudio ? 'Unmute' : 'Mute'} Room`,
-    IconType: Ionicons,
-    iconName: muteAllTracksAudio ? 'mic-off-outline' : 'mic-outline'
-  }) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis = localPeerRole.permissions) !== null && _localPeerRole$permis !== void 0 && _localPeerRole$permis.hlsStreaming ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: handleHLSStreaming,
-    text: `${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`,
-    IconType: Ionicons,
-    iconName: "radio-outline"
-  }) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis2 = localPeerRole.permissions) !== null && _localPeerRole$permis2 !== void 0 && _localPeerRole$permis2.rtmpStreaming ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: handleRTMPAndRecording,
-    text: rtmpAndRecording === true ? 'Stop RTMP And Recording' : 'Start RTMP or Recording',
-    IconType: Ionicons,
-    iconName: "recording-outline"
-  }) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis3 = localPeerRole.permissions) !== null && _localPeerRole$permis3 !== void 0 && _localPeerRole$permis3.changeRole ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: changeBulkRole,
-    text: "Bulk Role Change",
-    IconType: Ionicons,
-    iconName: "people-outline"
-  }) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis4 = localPeerRole.permissions) !== null && _localPeerRole$permis4 !== void 0 && _localPeerRole$permis4.mute ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: handleRemoteAudiosMute,
-    text: "Remote Mute All Audio Tracks",
-    IconType: Ionicons,
-    iconName: "mic-off-outline"
-  }) : null, debugMode && (localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis5 = localPeerRole.permissions) !== null && _localPeerRole$permis5 !== void 0 && _localPeerRole$permis5.mute || localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis6 = localPeerRole.permissions) !== null && _localPeerRole$permis6 !== void 0 && _localPeerRole$permis6.unmute) ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: changeTrackState,
-    text: "Change Track State For Role",
-    IconType: MaterialIcons,
-    iconName: "track-changes"
-  }) : null, localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$publis = localPeerRole.publishSettings) !== null && _localPeerRole$publis !== void 0 && (_localPeerRole$publis = _localPeerRole$publis.allowed) !== null && _localPeerRole$publis !== void 0 && _localPeerRole$publis.includes('audio') ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: switchAudioOutput,
-    text: "Switch Audio Output",
-    IconType: MaterialCommunityIcons,
-    iconName: "cast-audio"
-  }) : null, !isPipModeUnavailable ? /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: enterPipMode,
-    text: "Picture in Picture (PIP) Mode",
-    IconType: MaterialCommunityIcons,
-    iconName: "picture-in-picture-bottom-right"
-  }) : null, debugMode ? /*#__PURE__*/React.createElement(React.Fragment, null, localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$name3 = localPeerRole.name) !== null && _localPeerRole$name3 !== void 0 && _localPeerRole$name3.includes('hls-') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: toggleShowHLSStats,
-    text: showHLSStats ? 'Hide HLS Stats' : 'Show HLS Stats',
-    IconType: MaterialCommunityIcons,
-    iconName: 'clipboard-pulse-outline'
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: toggleEnableHLSPlayerControls,
-    text: enableHLSPlayerControls ? 'Disable HLS Player Controls' : 'Enable HLS Player Controls',
-    IconType: Ionicons,
-    iconName: 'ios-settings-outline'
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: toggleShowCustomHLSPlayerControls,
-    text: showCustomHLSPlayerControls ? 'Hide Custom HLS Player Controls' : 'Show Custom HLS Player Controls',
-    IconType: Ionicons,
-    iconName: 'ios-settings-outline'
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: showRTCStats,
-    text: "Show RTC Stats",
-    IconType: MaterialCommunityIcons,
-    iconName: 'clipboard-pulse-outline'
-  })), Platform.OS === 'android' && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$publis2 = localPeerRole.publishSettings) !== null && _localPeerRole$publis2 !== void 0 && (_localPeerRole$publis2 = _localPeerRole$publis2.allowed) !== null && _localPeerRole$publis2 !== void 0 && _localPeerRole$publis2.includes('audio') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: addRemoveAudioDeviceChangeListener,
-    text: `${audioDeviceListenerAdded ? 'Remove' : 'Set'} Audio Output Change Listener`,
-    IconType: MaterialCommunityIcons,
-    iconName: "video-input-component"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: handleAudioShare,
-    text: `${isAudioShared ? 'Stop' : 'Start'} Audioshare`,
-    IconType: Ionicons,
-    iconName: "share-social-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: changeAudioMode,
-    text: "Set Audio Mode",
-    IconType: MaterialCommunityIcons,
-    iconName: "call-split"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: setAudioMixingMode,
-    text: "Set Audio Mixing Mode",
-    IconType: EntypoIcons,
-    iconName: "sound-mix"
-  })) : null, Platform.OS === 'ios' && getJoinConfig().audioMixer && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$publis3 = localPeerRole.publishSettings) !== null && _localPeerRole$publis3 !== void 0 && (_localPeerRole$publis3 = _localPeerRole$publis3.allowed) !== null && _localPeerRole$publis3 !== void 0 && _localPeerRole$publis3.includes('audio') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: playAudioShare,
-    text: "Play Audio Share",
-    IconType: Ionicons,
-    iconName: "play-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: stopAudioShare,
-    text: "Stop Audio Share",
-    IconType: Ionicons,
-    iconName: "stop-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: setAudioShareVolume,
-    text: "Set Audio Share Volume",
-    IconType: Ionicons,
-    iconName: "volume-high-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: pauseAudioShare,
-    text: "Pause Audio Share",
-    IconType: Ionicons,
-    iconName: "pause-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: resumeAudioShare,
-    text: "Resume Audio Share",
-    IconType: Ionicons,
-    iconName: "play-skip-forward-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: isAudioSharePlaying,
-    text: "Is Audio Share Playing",
-    IconType: MaterialCommunityIcons,
-    iconName: "file-question-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: getAudioShareDuration,
-    text: "Audio Share Duration",
-    IconType: Ionicons,
-    iconName: "timer-outline"
-  }), /*#__PURE__*/React.createElement(SettingItem, {
-    onPress: getAudioShareCurrentDuration,
-    text: "Audio Share Current Duration",
-    IconType: Ionicons,
-    iconName: "timer-outline"
-  })) : null) : null));
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(BottomSheet.Header, {
+    dismissModal: closeRoomSettingsModal,
+    heading: "Options"
+  }), /*#__PURE__*/React.createElement(BottomSheet.Divider, null), /*#__PURE__*/React.createElement(View, {
+    style: styles.contentContainer
+  }, groupIntoTriplets([{
+    id: 'participants',
+    icon: /*#__PURE__*/React.createElement(ParticipantsIcon, {
+      style: {
+        width: 20,
+        height: 20
+      }
+    }),
+    label: 'Participants',
+    pressHandler: onParticipantsPress,
+    isActive: false,
+    hide: false,
+    sibling: /*#__PURE__*/React.createElement(ParticipantsCount, null)
+    // parent
+    // children
+  }, {
+    id: 'share-screen',
+    icon: /*#__PURE__*/React.createElement(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: /*#__PURE__*/React.createElement(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: /*#__PURE__*/React.createElement(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: /*#__PURE__*/React.createElement(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: /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(React.Fragment, {
+      key: idx.toString()
+    }, isFirst ? null : /*#__PURE__*/React.createElement(View, {
+      style: styles.rowSpacer
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.row
+    }, itm.map((item, index) => {
+      const isFirst = index === 0;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: item ? item.id : index.toString()
+      }, isFirst ? null : /*#__PURE__*/React.createElement(View, {
+        style: styles.colSpacer
+      }), /*#__PURE__*/React.createElement(View, {
+        style: styles.col
+      }, item ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
+        icon: item.icon,
+        onPress: item.pressHandler,
+        text: item.label,
+        isActive: item.isActive
+      }), item.sibling) : null));
+    })));
+  })), debugMode ? /*#__PURE__*/React.createElement(RoomSettingsModalDebugModeContent, props) : null);
 };
-const SettingItem = _ref2 => {
+const SettingItem = _ref => {
   let {
-    onPress,
     text,
-    iconName,
-    IconType
-  } = _ref2;
+    icon,
+    onPress,
+    isActive = false
+  } = _ref;
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.surface_bright
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`
+    }
+  }));
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
+    style: [styles.button, isActive ? hmsRoomStyles.button : null],
     onPress: onPress
-  }, /*#__PURE__*/React.createElement(IconType, {
-    name: iconName,
-    size: 24,
-    style: styles.icon
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
+  }, icon, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, hmsRoomStyles.text],
+    numberOfLines: 2
   }, text));
 };
-const ScreenShareDelegate = _ref3 => {
-  let {
-    isLocalScreenShared,
-    onPress,
-    closeRoomSettingsModal
-  } = _ref3;
-  const handleScreenSharePress = () => {
-    closeRoomSettingsModal();
-    onPress === null || onPress === void 0 ? void 0 : onPress();
-  };
-  return /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: handleScreenSharePress,
-    style: styles.button
-  }, /*#__PURE__*/React.createElement(ScreenShareIcon, {
-    style: styles.icon
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, isLocalScreenShared ? 'Stop Screen Share' : 'Screen Share'));
-};
 const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-    width: '100%',
-    backgroundColor: COLORS.SURFACE.DEFAULT
+  contentContainer: {
+    marginHorizontal: 20
   },
-  chatHeaderContainer: {
-    height: 48,
-    width: '80%',
-    flexDirection: 'row',
-    alignItems: 'center'
+  row: {
+    flexDirection: 'row'
   },
-  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
+    position: 'relative'
   },
-  scrollContentContainer: {
-    paddingBottom: 52
-  },
-  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
   }
 });
 //# sourceMappingURL=RoomSettingsModalContent.js.map