@100mslive/react-native-room-kit 0.0.4 → 0.2.0

package/lib/commonjs/components/RoomSettingsModalContent.js

@@ -4,413 +4,284 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RoomSettingsModalContent = void 0;
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _reactNativeHms = require("@100mslive/react-native-hms");
 var _reactRedux = require("react-redux");
-var _reactNativeSimpleToast = _interopRequireDefault(require("react-native-simple-toast"));
-var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
-var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
-var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
-var _Entypo = _interopRequireDefault(require("react-native-vector-icons/Entypo"));
-var _reactNativePermissions = require("react-native-permissions");
-var _theme = require("../utils/theme");
-var _actions = require("../redux/actions");
 var _types = require("../utils/types");
 var _functions = require("../utils/functions");
-var _HMSShareScreen = require("./HMSShareScreen");
 var _Icons = require("../Icons");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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;
-  let {
-    newAudioMixingMode,
-    isAudioShared,
-    //
-    audioDeviceListenerAdded,
-    muteAllTracksAudio,
+var _BottomSheet = require("./BottomSheet");
+var _hooksUtil = require("../hooks-util");
+var _hooksSdk = require("../hooks-sdk");
+var _RoomSettingsModalDebugModeContent = require("./RoomSettingsModalDebugModeContent");
+var _actions = require("../redux/actions");
+var _ParticipantsCount = require("./ParticipantsCount");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const RoomSettingsModalContent = props => {
+  const {
     closeRoomSettingsModal,
-    setModalVisible,
-    setIsAudioShared,
-    setAudioDeviceListenerAdded,
-    setMuteAllTracksAudio
-  } = _ref;
-  // REDUX STATES & DISPATCH
+    setModalVisible
+  } = props;
   const dispatch = (0, _reactRedux.useDispatch)();
-  const hmsInstance = (0, _reactRedux.useSelector)(state => state.user.hmsInstance);
+  const hmsInstance = (0, _hooksUtil.useHMSInstance)();
   const debugMode = (0, _reactRedux.useSelector)(state => state.user.debugMode);
-  const localPeerRole = (0, _reactRedux.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 = (0, _reactRedux.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 = (0, _reactRedux.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 = (0, _reactRedux.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 = (0, _reactRedux.useSelector)(state => state.app.pipModeStatus);
-  const showHLSStats = (0, _reactRedux.useSelector)(state => state.app.joinConfig.showHLSStats);
-  const enableHLSPlayerControls = (0, _reactRedux.useSelector)(state => state.app.joinConfig.enableHLSPlayerControls);
-  const showCustomHLSPlayerControls = (0, _reactRedux.useSelector)(state => state.app.joinConfig.showCustomHLSPlayerControls);
+  const isHLSViewer = (0, _hooksUtil.useIsHLSViewer)();
+  const hmsActions = (0, _hooksSdk.useHMSActions)();
+  const {
+    registerOnModalHideAction
+  } = (0, _BottomSheet.useBottomSheetActions)();
 
-  // CONSTANTS
-  const parsedMetadata = (0, _functions.parseMetadata)(localPeerMetadata);
-  const isPipModeUnavailable = pipModeStatus === _types.PipModes.NOT_AVAILABLE;
-
-  //#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 = () => {
-    _reactNative.InteractionManager.runAfterInteractions(() => {
-      setModalVisible(_types.ModalTypes.PARTICIPANTS, true);
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      setModalVisible(_types.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 === 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((0, _actions.changePipModeStatus)(_types.PipModes.ACTIVE));
-      }
-    } catch (error) {
-      console.log(error);
-    }
   };
-  const handleLocalRemoteAudiosMute = () => {
+  // #endregion
+
+  // #region Screen Share related states and functions
+  const canPublishScreen = (0, _hooksSdk.useCanPublishScreen)();
+  const isLocalScreenShared = (0, _reactRedux.useSelector)(state => state.hmsStates.isLocalScreenShared);
+  const handleScreenShareTogglePress = async () => {
     closeRoomSettingsModal();
-    hmsInstance === null || hmsInstance === void 0 ? void 0 : hmsInstance.setPlaybackForAllAudio(!muteAllTracksAudio);
-    setMuteAllTracksAudio(!muteAllTracksAudio);
+    await hmsActions.setScreenShareEnabled(!isLocalScreenShared);
   };
-  const handleRemoteAudiosMute = async () => {
+  // #endregion
+
+  // #region "BRB" and "Hand Raise" related states and functions
+  const localPeerMetadata = (0, _reactRedux.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 = (0, _functions.parseMetadata)(localPeerMetadata);
+  const isBRBOn = !!parsedMetadata.isBRBOn;
+  const isHandRaised = !!parsedMetadata.isHandRaised;
+  const toggleRaiseHand = async () => {
+    const newMetadata = {
+      ...parsedMetadata,
+      isBRBOn: false,
+      isHandRaised: !isHandRaised
+    };
     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)));
+    await hmsActions.changeMetadata(newMetadata);
   };
-  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(_types.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(_types.ModalTypes.RECORDING, true);
-    }
-  };
-  const addRemoveAudioDeviceChangeListener = () => {
+  const toggleBRB = async () => {
+    const newMetadata = {
+      ...parsedMetadata,
+      isHandRaised: false,
+      isBRBOn: !isBRBOn
+    };
     closeRoomSettingsModal();
-    if (hmsInstance) {
-      if (audioDeviceListenerAdded) {
-        setAudioDeviceListenerAdded(false);
-        hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_AUDIO_DEVICE_CHANGED);
-      } else {
-        setAudioDeviceListenerAdded(true);
-        hmsInstance.setAudioDeviceChangeListener(data => {
-          _reactNativeSimpleToast.default.showWithGravity(`Audio Device Output changed to ${data === null || data === void 0 ? void 0 : data.device}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
-        });
-      }
-    }
+    await hmsActions.changeMetadata(newMetadata);
   };
-  const changeBulkRole = () => setModalVisible(_types.ModalTypes.BULK_ROLE_CHANGE, true);
-  const changeTrackState = () => setModalVisible(_types.ModalTypes.CHANGE_TRACK_ROLE, true);
-  const switchAudioOutput = () => {
-    if (_reactNative.Platform.OS === 'android') {
-      setModalVisible(_types.ModalTypes.SWITCH_AUDIO_OUTPUT, true);
+  // #endregion
+
+  // #region Recording related states and functions
+  const canStartRecording = (0, _reactRedux.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 = (0, _reactRedux.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(_types.ModalTypes.STOP_RECORDING);
+      });
+      closeRoomSettingsModal();
     } else {
+      dispatch((0, _actions.setStartingOrStoppingRecording)(true));
+      hmsInstance.startRTMPOrRecording({
+        record: true
+      }).catch(() => dispatch((0, _actions.setStartingOrStoppingRecording)(false)));
       closeRoomSettingsModal();
-      hmsInstance === null || hmsInstance === void 0 ? void 0 : hmsInstance.switchAudioOutputUsingIOSUI();
     }
   };
-  const changeAudioMode = () => setModalVisible(_types.ModalTypes.CHANGE_AUDIO_MODE, true);
-  const setAudioMixingMode = () => setModalVisible(_types.ModalTypes.AUDIO_MIXING_MODE, true);
-  const handleHLSPlayerAspectRatio = () => {
-    setModalVisible(_types.ModalTypes.HLS_PLAYER_ASPECT_RATIO, true);
-  };
-  const showRTCStats = () => setModalVisible(_types.ModalTypes.RTC_STATS, true);
-  const toggleShowHLSStats = () => {
-    dispatch((0, _actions.changeShowHLSStats)(!showHLSStats));
-    setModalVisible(_types.ModalTypes.DEFAULT);
-  };
-  const toggleEnableHLSPlayerControls = () => {
-    dispatch((0, _actions.changeEnableHLSPlayerControls)(!enableHLSPlayerControls));
-    setModalVisible(_types.ModalTypes.DEFAULT);
-  };
-  const toggleShowCustomHLSPlayerControls = () => {
-    dispatch((0, _actions.changeShowCustomHLSPlayerControls)(!showCustomHLSPlayerControls));
-    setModalVisible(_types.ModalTypes.DEFAULT);
-  };
+  // #endregion
 
-  // Android Audioshare
-  const handleAudioShare = async () => {
+  // #region Change Name functions
+  const changeName = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      setModalVisible(_types.ModalTypes.CHANGE_NAME);
+    });
+
+    // Close the current bottom sheet
     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 (_reactNative.Platform.OS === 'android') {
-        const result = await (0, _reactNativePermissions.requestNotifications)(['alert', 'sound']);
-        console.log('Notification Permission Result: ', result);
-        if (result.status === 'blocked') {
-          _reactNative.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: () => (0, _reactNativePermissions.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));
-    }
   };
-  //#endregion
+  // #endregion
 
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.container
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.chatHeaderContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.chatHeading
-  }, "More Options")), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
-    style: styles.contentContainer,
-    contentContainerStyle: styles.scrollContentContainer
-  }, /*#__PURE__*/_react.default.createElement(_HMSShareScreen.HMSShareScreen, {
-    screenShareDelegate: /*#__PURE__*/_react.default.createElement(ScreenShareDelegate, {
-      closeRoomSettingsModal: closeRoomSettingsModal
-    })
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    onPress: handleBRB,
-    style: styles.button
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-    source: require('../assets/brb.png'),
-    style: styles.brbIcon
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isBRBOn ? 'Remove BRB' : 'Set BRB')), /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: onRaiseHandPress,
-    text: parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isHandRaised ? 'Low Your Hand' : 'Raise Hand',
-    IconType: _Ionicons.default,
-    iconName: 'hand-left-outline'
-  }), /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: onParticipantsPress,
-    text: 'Participants',
-    IconType: _Ionicons.default,
-    iconName: 'people'
-  }), localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$name = localPeerRole.name) !== null && _localPeerRole$name !== void 0 && _localPeerRole$name.includes('hls-') ? /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: handleHLSPlayerAspectRatio,
-    text: 'Change Aspect Ratio',
-    IconType: _MaterialCommunityIcons.default,
-    iconName: 'aspect-ratio'
-  }) : null, !(localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$name2 = localPeerRole.name) !== null && _localPeerRole$name2 !== void 0 && _localPeerRole$name2.includes('hls-')) ? /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: handleLocalRemoteAudiosMute,
-    text: `${muteAllTracksAudio ? 'Unmute' : 'Mute'} Room`,
-    IconType: _Ionicons.default,
-    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.default.createElement(SettingItem, {
-    onPress: handleHLSStreaming,
-    text: `${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`,
-    IconType: _Ionicons.default,
-    iconName: "radio-outline"
-  }) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis2 = localPeerRole.permissions) !== null && _localPeerRole$permis2 !== void 0 && _localPeerRole$permis2.rtmpStreaming ? /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: handleRTMPAndRecording,
-    text: rtmpAndRecording === true ? 'Stop RTMP And Recording' : 'Start RTMP or Recording',
-    IconType: _Ionicons.default,
-    iconName: "recording-outline"
-  }) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis3 = localPeerRole.permissions) !== null && _localPeerRole$permis3 !== void 0 && _localPeerRole$permis3.changeRole ? /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: changeBulkRole,
-    text: "Bulk Role Change",
-    IconType: _Ionicons.default,
-    iconName: "people-outline"
-  }) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis4 = localPeerRole.permissions) !== null && _localPeerRole$permis4 !== void 0 && _localPeerRole$permis4.mute ? /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: handleRemoteAudiosMute,
-    text: "Remote Mute All Audio Tracks",
-    IconType: _Ionicons.default,
-    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.default.createElement(SettingItem, {
-    onPress: changeTrackState,
-    text: "Change Track State For Role",
-    IconType: _MaterialIcons.default,
-    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.default.createElement(SettingItem, {
-    onPress: switchAudioOutput,
-    text: "Switch Audio Output",
-    IconType: _MaterialCommunityIcons.default,
-    iconName: "cast-audio"
-  }) : null, !isPipModeUnavailable ? /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: enterPipMode,
-    text: "Picture in Picture (PIP) Mode",
-    IconType: _MaterialCommunityIcons.default,
-    iconName: "picture-in-picture-bottom-right"
-  }) : null, debugMode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$name3 = localPeerRole.name) !== null && _localPeerRole$name3 !== void 0 && _localPeerRole$name3.includes('hls-') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: toggleShowHLSStats,
-    text: showHLSStats ? 'Hide HLS Stats' : 'Show HLS Stats',
-    IconType: _MaterialCommunityIcons.default,
-    iconName: 'clipboard-pulse-outline'
-  }), /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: toggleEnableHLSPlayerControls,
-    text: enableHLSPlayerControls ? 'Disable HLS Player Controls' : 'Enable HLS Player Controls',
-    IconType: _Ionicons.default,
-    iconName: 'ios-settings-outline'
-  }), /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: toggleShowCustomHLSPlayerControls,
-    text: showCustomHLSPlayerControls ? 'Hide Custom HLS Player Controls' : 'Show Custom HLS Player Controls',
-    IconType: _Ionicons.default,
-    iconName: 'ios-settings-outline'
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: showRTCStats,
-    text: "Show RTC Stats",
-    IconType: _MaterialCommunityIcons.default,
-    iconName: 'clipboard-pulse-outline'
-  })), _reactNative.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: addRemoveAudioDeviceChangeListener,
-    text: `${audioDeviceListenerAdded ? 'Remove' : 'Set'} Audio Output Change Listener`,
-    IconType: _MaterialCommunityIcons.default,
-    iconName: "video-input-component"
-  }), /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: handleAudioShare,
-    text: `${isAudioShared ? 'Stop' : 'Start'} Audioshare`,
-    IconType: _Ionicons.default,
-    iconName: "share-social-outline"
-  }), /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: changeAudioMode,
-    text: "Set Audio Mode",
-    IconType: _MaterialCommunityIcons.default,
-    iconName: "call-split"
-  }), /*#__PURE__*/_react.default.createElement(SettingItem, {
-    onPress: setAudioMixingMode,
-    text: "Set Audio Mixing Mode",
-    IconType: _Entypo.default,
-    iconName: "sound-mix"
-  })) : null) : null));
+  return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_BottomSheet.BottomSheet.Header, {
+    dismissModal: closeRoomSettingsModal,
+    heading: "Options"
+  }), /*#__PURE__*/React.createElement(_BottomSheet.BottomSheet.Divider, null), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.contentContainer
+  }, (0, _functions.groupIntoTriplets)([{
+    id: 'participants',
+    icon: /*#__PURE__*/React.createElement(_Icons.ParticipantsIcon, {
+      style: {
+        width: 20,
+        height: 20
+      }
+    }),
+    label: 'Participants',
+    pressHandler: onParticipantsPress,
+    isActive: false,
+    hide: false,
+    sibling: /*#__PURE__*/React.createElement(_ParticipantsCount.ParticipantsCount, null)
+    // parent
+    // children
+  }, {
+    id: 'share-screen',
+    icon: /*#__PURE__*/React.createElement(_Icons.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(_Icons.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(_Icons.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: isHLSViewer // Hide if can't publish screen
+  }, {
+    id: 'start-recording',
+    icon: /*#__PURE__*/React.createElement(_Icons.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(_Icons.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(_reactNative.View, {
+      style: styles.rowSpacer
+    }), /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.View, {
+        style: styles.colSpacer
+      }), /*#__PURE__*/React.createElement(_reactNative.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.RoomSettingsModalDebugModeContent, props) : null);
 };
 exports.RoomSettingsModalContent = RoomSettingsModalContent;
-const SettingItem = _ref2 => {
+const SettingItem = _ref => {
   let {
-    onPress,
     text,
-    iconName,
-    IconType
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
+    icon,
+    onPress,
+    isActive = false
+  } = _ref;
+  const hmsRoomStyles = (0, _hooksUtil.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(_reactNative.TouchableOpacity, {
+    style: [styles.button, isActive ? hmsRoomStyles.button : null],
     onPress: onPress
-  }, /*#__PURE__*/_react.default.createElement(IconType, {
-    name: iconName,
-    size: 24,
-    style: styles.icon
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
+  }, icon, /*#__PURE__*/React.createElement(_reactNative.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.default.createElement(_reactNative.TouchableOpacity, {
-    onPress: handleScreenSharePress,
-    style: styles.button
-  }, /*#__PURE__*/_react.default.createElement(_Icons.ScreenShareIcon, {
-    style: styles.icon
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, isLocalScreenShared ? 'Stop Screen Share' : 'Screen Share'));
-};
 const styles = _reactNative.StyleSheet.create({
-  container: {
-    height: '100%',
-    width: '100%',
-    backgroundColor: _theme.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: _theme.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: _theme.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: _theme.COLORS.TEXT.HIGH_EMPHASIS
-  },
-  icon: {
-    color: _theme.COLORS.WHITE,
-    marginRight: 12
+    textAlign: 'center',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginTop: 8
   }
 });
 //# sourceMappingURL=RoomSettingsModalContent.js.map