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

package/lib/commonjs/components/Modals.js

@@ -3,20 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SaveScreenshot = exports.RtcStatsModal = exports.RecordingModal = exports.RealTime = exports.LeaveRoomModal = exports.HlsStreamingModal = exports.EndHlsModal = exports.ChangeTrackStateModal = exports.ChangeTrackStateForRoleModal = exports.ChangeSortingModal = exports.ChangeRoleModal = exports.ChangeRoleAccepteModal = exports.ChangeLayoutModal = exports.ChangeBulkRoleModal = exports.ChangeAudioOutputModal = exports.ChangeAudioModeModal = exports.ChangeAudioMixingModeModal = exports.ChangeAspectRatio = void 0;
+exports.SaveScreenshot = exports.RtcStatsModal = exports.RecordingModal = exports.RealTime = exports.HlsStreamingModal = exports.ChangeTrackStateModal = exports.ChangeTrackStateForRoleModal = exports.ChangeRoleModal = exports.ChangeRoleAccepteModal = exports.ChangeBulkRoleModal = exports.ChangeAudioOutputModal = exports.ChangeAudioModeModal = exports.ChangeAudioMixingModeModal = exports.ChangeAspectRatio = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSimpleToast = _interopRequireDefault(require("react-native-simple-toast"));
 var _reactRedux = require("react-redux");
 var _reactNativeHms = require("@100mslive/react-native-hms");
-var _Feather = _interopRequireDefault(require("react-native-vector-icons/Feather"));
-var _Entypo = _interopRequireDefault(require("react-native-vector-icons/Entypo"));
-var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
-var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
 var _styles = require("./styles");
 var _CustomButton = require("./CustomButton");
 var _MenuModal = require("./MenuModal");
-var _Picker = require("./Picker");
 var _actions = require("../redux/actions");
 var _functions = require("../utils/functions");
 var _types = require("../utils/types");
@@ -39,7 +34,7 @@ const ChangeRoleModal = _ref => {
   const hideMenu = () => setVisible(false);
   const showMenu = () => setVisible(true);
   const changeRole = () => {
-    instance === null || instance === void 0 ? void 0 : instance.changeRoleOfPeer(peer, newRole, !request).catch(e => {
+    instance === null || instance === void 0 || instance.changeRoleOfPeer(peer, newRole, !request).catch(e => {
       console.log('Change Role of Peer Error: ', e);
       _reactNativeSimpleToast.default.showWithGravity(e.message, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
     });
@@ -59,11 +54,7 @@ const ChangeRoleModal = _ref => {
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
       style: _styles.styles.participantFilterText,
       numberOfLines: 1
-    }, newRole === null || newRole === void 0 ? void 0 : newRole.name), /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
-      name: visible ? 'arrow-drop-up' : 'arrow-drop-down',
-      style: _styles.styles.participantFilterIcon,
-      size: 24
-    })),
+    }, newRole === null || newRole === void 0 ? void 0 : newRole.name)),
     onRequestClose: hideMenu,
     style: _styles.styles.participantsMenuContainer
   }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
@@ -83,14 +74,10 @@ const ChangeRoleModal = _ref => {
     onPress: () => {
       setRequest(!request);
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, request && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, request ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "Request permission from the user")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
@@ -230,11 +217,7 @@ const RtcStatsModal = () => {
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
       style: _styles.styles.participantFilterText,
       numberOfLines: 1
-    }, (currentTrack === null || currentTrack === void 0 ? void 0 : currentTrack.name) ?? 'Choose'), /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
-      name: tracksListModalVisible ? 'arrow-drop-up' : 'arrow-drop-down',
-      style: _styles.styles.participantFilterIcon,
-      size: 24
-    })),
+    }, (currentTrack === null || currentTrack === void 0 ? void 0 : currentTrack.name) ?? 'Choose')),
     onRequestClose: hideMenu,
     style: _styles.styles.participantsMenuContainer
   }, statsList.map(trackObj => {
@@ -285,53 +268,15 @@ const RtcStatsModal = () => {
   }) : null));
 };
 exports.RtcStatsModal = RtcStatsModal;
-const LeaveRoomModal = _ref3 => {
+const ChangeAudioOutputModal = _ref3 => {
   let {
-    onSuccess,
     cancelModal
   } = _ref3;
-  const onLeave = () => {
-    cancelModal();
-    onSuccess();
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.volumeModalContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.participantMenuItem
-  }, /*#__PURE__*/_react.default.createElement(_Feather.default, {
-    name: "log-out",
-    style: _styles.styles.participantMenuItemIcon,
-    size: 24
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalHeading
-  }, "Leave Studio")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalDescription
-  }, "Others will continue after you leave. You can join the studio again.")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "Don\u2019t Leave",
-    onPress: cancelModal,
-    viewStyle: _styles.styles.roleChangeModalCancelButton,
-    textStyle: _styles.styles.roleChangeModalButtonText
-  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "Leave",
-    onPress: onLeave,
-    viewStyle: [_styles.styles.roleChangeModalSuccessButton, _styles.styles.errorContainer],
-    textStyle: _styles.styles.roleChangeModalButtonText
-  })));
-};
-exports.LeaveRoomModal = LeaveRoomModal;
-const ChangeAudioOutputModal = _ref4 => {
-  let {
-    cancelModal
-  } = _ref4;
   const instance = (0, _hooksUtil.useHMSInstance)();
   const [currentOutputDevice, setCurrentOutputDevice] = (0, _react.useState)(_reactNativeHms.HMSAudioDevice.SPEAKER_PHONE);
   const [audioOutputDevicesList, setAudioOutputDevicesList] = (0, _react.useState)([]);
   const switchAudioOutput = () => {
-    instance === null || instance === void 0 ? void 0 : instance.switchAudioOutput(currentOutputDevice);
+    instance === null || instance === void 0 || instance.switchAudioOutput(currentOutputDevice);
     cancelModal();
   };
   (0, _react.useEffect)(() => {
@@ -352,14 +297,10 @@ const ChangeAudioOutputModal = _ref4 => {
       onPress: () => {
         setCurrentOutputDevice(device);
       }
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: _styles.styles.roleChangeModalCheckBox
-    }, currentOutputDevice === device && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-      name: "check",
-      style: _styles.styles.roleChangeModalCheck,
-      size: 10
-    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: _styles.styles.roleChangeModalPermission
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [_styles.styles.roleChangeModalPermission, currentOutputDevice === device ? {
+        color: _theme.COLORS.PRIMARY.DEFAULT
+      } : null]
     }, device));
   }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
@@ -376,10 +317,10 @@ const ChangeAudioOutputModal = _ref4 => {
   })));
 };
 exports.ChangeAudioOutputModal = ChangeAudioOutputModal;
-const ChangeAspectRatio = _ref5 => {
+const ChangeAspectRatio = _ref4 => {
   let {
     cancelModal
-  } = _ref5;
+  } = _ref4;
   const {
     height
   } = (0, _reactNative.useWindowDimensions)();
@@ -407,14 +348,10 @@ const ChangeAspectRatio = _ref5 => {
       key: ratio.id,
       style: _styles.styles.roleChangeModalPermissionContainer,
       onPress: () => setSelectedRatio(ratio)
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: _styles.styles.roleChangeModalCheckBox
-    }, selectedRatio.id === ratio.id ? /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-      name: "check",
-      style: _styles.styles.roleChangeModalCheck,
-      size: 10
-    }) : null), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: _styles.styles.roleChangeModalPermission
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [_styles.styles.roleChangeModalPermission, selectedRatio.id === ratio.id ? {
+        color: _theme.COLORS.PRIMARY.DEFAULT
+      } : null]
     }, ratio.id));
   })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
@@ -431,17 +368,17 @@ const ChangeAspectRatio = _ref5 => {
   })));
 };
 exports.ChangeAspectRatio = ChangeAspectRatio;
-const ChangeAudioModeModal = _ref6 => {
+const ChangeAudioModeModal = _ref5 => {
   let {
     cancelModal,
     audioMode,
     setAudioMode
-  } = _ref6;
+  } = _ref5;
   const instance = (0, _hooksUtil.useHMSInstance)();
   const [currentAudioMode, setCurrentAudioMode] = (0, _react.useState)(audioMode);
   const AudioModeList = ['MODE_NORMAL', 'MODE_RINGTONE', 'MODE_IN_CALL', 'MODE_IN_COMMUNICATION', 'MODE_CALL_SCREENING'];
   const switchAudioMode = () => {
-    instance === null || instance === void 0 ? void 0 : instance.setAudioMode(currentAudioMode);
+    instance === null || instance === void 0 || instance.setAudioMode(currentAudioMode);
     setAudioMode(currentAudioMode);
     cancelModal();
   };
@@ -456,14 +393,10 @@ const ChangeAudioModeModal = _ref6 => {
       onPress: () => {
         setCurrentAudioMode(AudioModeList.indexOf(mode));
       }
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: _styles.styles.roleChangeModalCheckBox
-    }, currentAudioMode === AudioModeList.indexOf(mode) && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-      name: "check",
-      style: _styles.styles.roleChangeModalCheck,
-      size: 10
-    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: _styles.styles.roleChangeModalPermission
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [_styles.styles.roleChangeModalPermission, currentAudioMode === AudioModeList.indexOf(mode) ? {
+        color: _theme.COLORS.PRIMARY.DEFAULT
+      } : null]
     }, mode));
   }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
@@ -480,12 +413,12 @@ const ChangeAudioModeModal = _ref6 => {
   })));
 };
 exports.ChangeAudioModeModal = ChangeAudioModeModal;
-const ChangeAudioMixingModeModal = _ref7 => {
+const ChangeAudioMixingModeModal = _ref6 => {
   let {
     newAudioMixingMode,
     cancelModal,
     setNewAudioMixingMode
-  } = _ref7;
+  } = _ref6;
   const instance = (0, _hooksUtil.useHMSInstance)();
   const changeAudioMixingMode = async () => {
     await (instance === null || instance === void 0 ? void 0 : instance.setAudioMixingMode(newAudioMixingMode));
@@ -504,14 +437,10 @@ const ChangeAudioMixingModeModal = _ref7 => {
       onPress: () => {
         setNewAudioMixingMode(audioMixingMode);
       }
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: _styles.styles.roleChangeModalCheckBox
-    }, newAudioMixingMode === audioMixingMode && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-      name: "check",
-      style: _styles.styles.roleChangeModalCheck,
-      size: 10
-    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: _styles.styles.roleChangeModalPermission
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [_styles.styles.roleChangeModalPermission, newAudioMixingMode === audioMixingMode ? {
+        color: _theme.COLORS.PRIMARY.DEFAULT
+      } : null]
     }, audioMixingMode));
   }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
@@ -528,83 +457,11 @@ const ChangeAudioMixingModeModal = _ref7 => {
   })));
 };
 exports.ChangeAudioMixingModeModal = ChangeAudioMixingModeModal;
-const ChangeSortingModal = _ref8 => {
-  let {
-    data,
-    selectedItem,
-    onItemSelected,
-    cancelModal
-  } = _ref8;
-  const [sortingType, setSortingType] = (0, _react.useState)(selectedItem || _types.SortingType.DEFAULT);
-  const changeSorting = () => {
-    onItemSelected(sortingType);
-    cancelModal();
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModal
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalHeading
-  }, "Sorting Style"), /*#__PURE__*/_react.default.createElement(_Picker.CustomPicker, {
-    data: data,
-    selectedItem: sortingType,
-    onItemSelected: setSortingType,
-    viewStyle: _styles.styles.picker
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.sortingButtonContainer
-  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "Cancel",
-    onPress: cancelModal,
-    viewStyle: _styles.styles.roleChangeModalCancelButton,
-    textStyle: _styles.styles.roleChangeModalButtonText
-  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "Change",
-    onPress: changeSorting,
-    viewStyle: _styles.styles.roleChangeModalSuccessButton,
-    textStyle: _styles.styles.roleChangeModalButtonText
-  })));
-};
-exports.ChangeSortingModal = ChangeSortingModal;
-const ChangeLayoutModal = _ref9 => {
-  let {
-    data,
-    selectedItem,
-    onItemSelected,
-    cancelModal
-  } = _ref9;
-  const [layout, setLayout] = (0, _react.useState)(selectedItem);
-  const changeLayout = () => {
-    onItemSelected(layout);
-    cancelModal();
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModal
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalHeading
-  }, "Layout Style"), /*#__PURE__*/_react.default.createElement(_Picker.CustomPicker, {
-    data: data,
-    selectedItem: layout,
-    onItemSelected: setLayout,
-    viewStyle: _styles.styles.picker
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.sortingButtonContainer
-  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "Cancel",
-    onPress: cancelModal,
-    viewStyle: _styles.styles.roleChangeModalCancelButton,
-    textStyle: _styles.styles.roleChangeModalButtonText
-  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "Change",
-    onPress: changeLayout,
-    viewStyle: _styles.styles.roleChangeModalSuccessButton,
-    textStyle: _styles.styles.roleChangeModalButtonText
-  })));
-};
-exports.ChangeLayoutModal = ChangeLayoutModal;
-const ChangeTrackStateForRoleModal = _ref10 => {
+const ChangeTrackStateForRoleModal = _ref7 => {
   var _localPeerRole$permis, _localPeerRole$permis2;
   let {
     cancelModal
-  } = _ref10;
+  } = _ref7;
   const instance = (0, _hooksUtil.useHMSInstance)();
   const roles = (0, _reactRedux.useSelector)(state => state.hmsStates.roles);
   const localPeerRole = (0, _reactRedux.useSelector)(state => {
@@ -634,11 +491,7 @@ const ChangeTrackStateForRoleModal = _ref10 => {
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
       style: _styles.styles.participantFilterText,
       numberOfLines: 1
-    }, role === null || role === void 0 ? void 0 : role.name), /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
-      name: visible ? 'arrow-drop-up' : 'arrow-drop-down',
-      style: _styles.styles.participantFilterIcon,
-      size: 24
-    })),
+    }, role === null || role === void 0 ? void 0 : role.name)),
     onRequestClose: hideMenu,
     style: _styles.styles.participantsMenuContainer
   }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
@@ -660,25 +513,17 @@ const ChangeTrackStateForRoleModal = _ref10 => {
   }, 'Track State: '), (localPeerRole === null || localPeerRole === void 0 || (_localPeerRole$permis = localPeerRole.permissions) === null || _localPeerRole$permis === void 0 ? void 0 : _localPeerRole$permis.mute) && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     style: _styles.styles.changeTrackStateRoleOption,
     onPress: () => setTrackState(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, trackState && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, trackState ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "MUTE")), (localPeerRole === null || localPeerRole === void 0 || (_localPeerRole$permis2 = localPeerRole.permissions) === null || _localPeerRole$permis2 === void 0 ? void 0 : _localPeerRole$permis2.unmute) && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     style: _styles.styles.changeTrackStateRoleOption,
     onPress: () => setTrackState(false)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, !trackState && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, !trackState ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "UNMUTE"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
@@ -686,25 +531,17 @@ const ChangeTrackStateForRoleModal = _ref10 => {
   }, 'Track Type: '), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     style: _styles.styles.changeTrackStateRoleOption,
     onPress: () => setTrackType(_reactNativeHms.HMSTrackType.AUDIO)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, trackType === _reactNativeHms.HMSTrackType.AUDIO && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, trackType === _reactNativeHms.HMSTrackType.AUDIO ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, _reactNativeHms.HMSTrackType.AUDIO)), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     style: _styles.styles.changeTrackStateRoleOption,
     onPress: () => setTrackType(_reactNativeHms.HMSTrackType.VIDEO)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, trackType === _reactNativeHms.HMSTrackType.VIDEO && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, trackType === _reactNativeHms.HMSTrackType.VIDEO ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, _reactNativeHms.HMSTrackType.VIDEO))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
@@ -720,21 +557,21 @@ const ChangeTrackStateForRoleModal = _ref10 => {
   })));
 };
 exports.ChangeTrackStateForRoleModal = ChangeTrackStateForRoleModal;
-const ChangeTrackStateModal = _ref11 => {
+const ChangeTrackStateModal = _ref8 => {
   var _roleChangeRequest$re, _roleChangeRequest$su2;
   let {
     roleChangeRequest,
     cancelModal
-  } = _ref11;
+  } = _ref8;
   const localPeer = (0, _reactRedux.useSelector)(state => state.hmsStates.localPeer);
   const changeLayout = () => {
     var _roleChangeRequest$su;
     if ((roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$su = roleChangeRequest.suggestedRole) === null || _roleChangeRequest$su === void 0 ? void 0 : _roleChangeRequest$su.toLocaleLowerCase()) === 'video') {
       var _localPeer$localVideo;
-      localPeer === null || localPeer === void 0 || (_localPeer$localVideo = localPeer.localVideoTrack()) === null || _localPeer$localVideo === void 0 ? void 0 : _localPeer$localVideo.setMute(false);
+      localPeer === null || localPeer === void 0 || (_localPeer$localVideo = localPeer.localVideoTrack()) === null || _localPeer$localVideo === void 0 || _localPeer$localVideo.setMute(false);
     } else {
       var _localPeer$localAudio;
-      localPeer === null || localPeer === void 0 || (_localPeer$localAudio = localPeer.localAudioTrack()) === null || _localPeer$localAudio === void 0 ? void 0 : _localPeer$localAudio.setMute(false);
+      localPeer === null || localPeer === void 0 || (_localPeer$localAudio = localPeer.localAudioTrack()) === null || _localPeer$localAudio === void 0 || _localPeer$localAudio.setMute(false);
     }
     cancelModal();
   };
@@ -759,10 +596,10 @@ const ChangeTrackStateModal = _ref11 => {
   })));
 };
 exports.ChangeTrackStateModal = ChangeTrackStateModal;
-const HlsStreamingModal = _ref12 => {
+const HlsStreamingModal = _ref9 => {
   let {
     cancelModal
-  } = _ref12;
+  } = _ref9;
   const instance = (0, _hooksUtil.useHMSInstance)();
   const roomID = (0, _reactRedux.useSelector)(state => state.user.roomID);
   const [hlsStreamingDetails, setHLSStreamingDetails] = (0, _react.useState)({
@@ -775,14 +612,14 @@ const HlsStreamingModal = _ref12 => {
     videoOnDemand: false
   });
   const changeLayout = () => {
-    instance === null || instance === void 0 ? void 0 : instance.startHLSStreaming().then(d => console.log('Start HLS Streaming Success: ', d)).catch(err => {
+    instance === null || instance === void 0 || instance.startHLSStreaming().then(d => console.log('Start HLS Streaming Success: ', d)).catch(err => {
       if (startHlsRetry) {
         setStartHlsRetry(false);
         const hmsHLSConfig = new _reactNativeHms.HMSHLSConfig({
           hlsRecordingConfig: hlsRecordingDetails,
           meetingURLVariants: [hlsStreamingDetails]
         });
-        instance === null || instance === void 0 ? void 0 : instance.startHLSStreaming(hmsHLSConfig).then(d => console.log('Start HLS Streaming Success: ', d)).catch(e => console.log('Start HLS Streaming Error: ', e));
+        instance === null || instance === void 0 || instance.startHLSStreaming(hmsHLSConfig).then(d => console.log('Start HLS Streaming Success: ', d)).catch(e => console.log('Start HLS Streaming Error: ', e));
       } else {
         console.log('Start HLS Streaming Error: ', err);
       }
@@ -815,14 +652,10 @@ const HlsStreamingModal = _ref12 => {
         singleFilePerLayer: !hlsRecordingDetails.singleFilePerLayer
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, hlsRecordingDetails.singleFilePerLayer && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, hlsRecordingDetails.singleFilePerLayer ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "SingleFilePerLayer")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     style: _styles.styles.checkboxButtonContainer,
     onPress: () => {
@@ -831,14 +664,10 @@ const HlsStreamingModal = _ref12 => {
         videoOnDemand: !hlsRecordingDetails.videoOnDemand
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, hlsRecordingDetails.videoOnDemand && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, hlsRecordingDetails.videoOnDemand ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "VideoOnDemand")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
@@ -854,10 +683,10 @@ const HlsStreamingModal = _ref12 => {
   })));
 };
 exports.HlsStreamingModal = HlsStreamingModal;
-const RecordingModal = _ref13 => {
+const RecordingModal = _ref10 => {
   let {
     setModalVisible
-  } = _ref13;
+  } = _ref10;
   const instance = (0, _hooksUtil.useHMSInstance)();
   const roomID = (0, _reactRedux.useSelector)(state => state.user.roomID);
   const [recordingDetails, setRecordingDetails] = (0, _react.useState)({
@@ -865,7 +694,7 @@ const RecordingModal = _ref13 => {
     meetingURL: roomID ? roomID + '?token=beam_recording' : undefined
   });
   const changeLayout = () => {
-    instance === null || instance === void 0 ? void 0 : instance.startRTMPOrRecording(recordingDetails).then(d => console.log('Start RTMP Or Recording Success: ', d)).catch(e => console.log('Start RTMP Or Recording Error: ', e));
+    instance === null || instance === void 0 || instance.startRTMPOrRecording(recordingDetails).then(d => console.log('Start RTMP Or Recording Success: ', d)).catch(e => console.log('Start RTMP Or Recording Error: ', e));
     setModalVisible(_types.ModalTypes.DEFAULT);
   };
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -915,14 +744,10 @@ const RecordingModal = _ref13 => {
         record: !recordingDetails.record
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalCheckBox
-  }, recordingDetails.record && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
-    name: "check",
-    style: _styles.styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalPermission
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalPermission, recordingDetails.record ? {
+      color: _theme.COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "Record")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
@@ -938,15 +763,15 @@ const RecordingModal = _ref13 => {
   })));
 };
 exports.RecordingModal = RecordingModal;
-const ChangeRoleAccepteModal = _ref14 => {
+const ChangeRoleAccepteModal = _ref11 => {
   var _roleChangeRequest$re2, _roleChangeRequest$su3;
   let {
     instance,
     roleChangeRequest,
     cancelModal
-  } = _ref14;
+  } = _ref11;
   const changeLayout = () => {
-    instance === null || instance === void 0 ? void 0 : instance.acceptRoleChange();
+    instance === null || instance === void 0 || instance.acceptRoleChange();
     cancelModal();
   };
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -970,48 +795,10 @@ const ChangeRoleAccepteModal = _ref14 => {
   })));
 };
 exports.ChangeRoleAccepteModal = ChangeRoleAccepteModal;
-const EndHlsModal = _ref15 => {
-  let {
-    onSuccess,
-    cancelModal
-  } = _ref15;
-  const onEnd = () => {
-    cancelModal();
-    onSuccess();
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.volumeModalContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.participantMenuItem
-  }, /*#__PURE__*/_react.default.createElement(_Feather.default, {
-    name: "alert-triangle",
-    style: [_styles.styles.participantMenuItemIcon, _styles.styles.error],
-    size: 24
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: [_styles.styles.roleChangeModalHeading, _styles.styles.error]
-  }, "End live stream for all?")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _styles.styles.roleChangeModalDescription
-  }, "Your stream will end and everone will go offline immediately in this room. You can\u2019t undo this action.")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: _styles.styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "Don\u2019t End",
-    onPress: cancelModal,
-    viewStyle: _styles.styles.roleChangeModalCancelButton,
-    textStyle: _styles.styles.roleChangeModalButtonText
-  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
-    title: "End Stream",
-    onPress: onEnd,
-    viewStyle: [_styles.styles.roleChangeModalSuccessButton, _styles.styles.errorContainer],
-    textStyle: _styles.styles.roleChangeModalButtonText
-  })));
-};
-exports.EndHlsModal = EndHlsModal;
-const RealTime = _ref16 => {
+const RealTime = _ref12 => {
   let {
     startedAt
-  } = _ref16;
+  } = _ref12;
   const [hour, setHour] = (0, _react.useState)(0);
   const [minute, setMinute] = (0, _react.useState)(0);
   const [second, setSecond] = (0, _react.useState)(0);
@@ -1066,10 +853,10 @@ var RoleSelection = /*#__PURE__*/function (RoleSelection) {
   RoleSelection["TO_CHANGE"] = "TO_CHANGE";
   return RoleSelection;
 }(RoleSelection || {});
-const ChangeBulkRoleModal = _ref17 => {
+const ChangeBulkRoleModal = _ref13 => {
   let {
     cancelModal
-  } = _ref17;
+  } = _ref13;
   const hmsInstance = (0, _reactRedux.useSelector)(state => state.user.hmsInstance);
   const roles = (0, _reactRedux.useSelector)(state => state.hmsStates.roles);
   const [showRolesSelectionView, setShowRolesSelectionView] = (0, _react.useState)(null);
@@ -1114,11 +901,7 @@ const ChangeBulkRoleModal = _ref17 => {
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: bulkRoleStyles.value,
     numberOfLines: 1
-  }, rolesToChange.map(role => role.name).join(', ') || 'Select Roles'), /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
-    name: "chevron-right",
-    size: 16,
-    style: bulkRoleStyles.chevronIcon
-  }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, rolesToChange.map(role => role.name).join(', ') || 'Select Roles'))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: bulkRoleStyles.row
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: bulkRoleStyles.label
@@ -1127,11 +910,7 @@ const ChangeBulkRoleModal = _ref17 => {
     onPress: () => setShowRolesSelectionView(RoleSelection.TARGET)
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: bulkRoleStyles.value
-  }, targetRole ? targetRole.name : 'Select Role'), /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
-    name: "chevron-right",
-    size: 16,
-    style: bulkRoleStyles.chevronIcon
-  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, targetRole ? targetRole.name : 'Select Role')))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
     title: "Cancel",
@@ -1159,18 +938,10 @@ const ChangeBulkRoleModal = _ref17 => {
       key: role.name,
       style: bulkRoleStyles.roleBtn,
       onPress: () => handleRoleSelection(role)
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: bulkRoleStyles.checkboxContainer
-    }, showRolesSelectionView === RoleSelection.TARGET ? /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
-      name: selected ? 'radiobox-marked' : 'radiobox-blank',
-      style: _styles.styles.roleChangeModalCheck,
-      size: 20
-    }) : /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
-      name: selected ? 'checkbox-outline' : 'checkbox-blank-outline',
-      style: _styles.styles.roleChangeModalCheck,
-      size: 24
-    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: bulkRoleStyles.checkboxLabel
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: {
+        color: selected ? _theme.COLORS.PRIMARY.DEFAULT : _theme.COLORS.TEXT.MEDIUM_EMPHASIS
+      }
     }, role.name));
   })), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     style: bulkRoleStyles.roleSelectionDone,