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

package/lib/module/components/Modals.js

@@ -3,17 +3,12 @@ import { View, TouchableOpacity, Text, ScrollView, TextInput, StyleSheet, Image,
 import Toast from 'react-native-simple-toast';
 import { useDispatch, useSelector } from 'react-redux';
 import { HMSTrackType, HMSTrackSource, HMSAudioDevice, HMSAudioMixingMode, HMSHLSConfig } from '@100mslive/react-native-hms';
-import Feather from 'react-native-vector-icons/Feather';
-import Entypo from 'react-native-vector-icons/Entypo';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { styles } from './styles';
 import { CustomButton } from './CustomButton';
 import { Menu, MenuItem } from './MenuModal';
-import { CustomPicker } from './Picker';
 import { changeHLSAspectRatio, changeShowStats } from '../redux/actions';
 import { getTime } from '../utils/functions';
-import { ModalTypes, SUPPORTED_ASPECT_RATIOS, SortingType } from '../utils/types';
+import { ModalTypes, SUPPORTED_ASPECT_RATIOS } from '../utils/types';
 import { COLORS } from '../utils/theme';
 import { SwitchRow } from './SwitchRow';
 import { useHMSInstance } from '../hooks-util';
@@ -30,7 +25,7 @@ export 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);
       Toast.showWithGravity(e.message, Toast.LONG, Toast.TOP);
     });
@@ -50,11 +45,7 @@ export const ChangeRoleModal = _ref => {
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.participantFilterText,
       numberOfLines: 1
-    }, newRole === null || newRole === void 0 ? void 0 : newRole.name), /*#__PURE__*/React.createElement(MaterialIcons, {
-      name: visible ? 'arrow-drop-up' : 'arrow-drop-down',
-      style: styles.participantFilterIcon,
-      size: 24
-    })),
+    }, newRole === null || newRole === void 0 ? void 0 : newRole.name)),
     onRequestClose: hideMenu,
     style: styles.participantsMenuContainer
   }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
@@ -74,14 +65,10 @@ export const ChangeRoleModal = _ref => {
     onPress: () => {
       setRequest(!request);
     }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, request && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, request ? {
+      color: COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "Request permission from the user")), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(CustomButton, {
@@ -219,11 +206,7 @@ export const RtcStatsModal = () => {
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.participantFilterText,
       numberOfLines: 1
-    }, (currentTrack === null || currentTrack === void 0 ? void 0 : currentTrack.name) ?? 'Choose'), /*#__PURE__*/React.createElement(MaterialIcons, {
-      name: tracksListModalVisible ? 'arrow-drop-up' : 'arrow-drop-down',
-      style: styles.participantFilterIcon,
-      size: 24
-    })),
+    }, (currentTrack === null || currentTrack === void 0 ? void 0 : currentTrack.name) ?? 'Choose')),
     onRequestClose: hideMenu,
     style: styles.participantsMenuContainer
   }, statsList.map(trackObj => {
@@ -273,52 +256,15 @@ export const RtcStatsModal = () => {
     }, key === 'resolution' ? `Height: ${(value === null || value === void 0 ? void 0 : value.height) ?? 0}, Width: ${(value === null || value === void 0 ? void 0 : value.width) ?? 0}` : value));
   }) : null));
 };
-export const LeaveRoomModal = _ref3 => {
+export const ChangeAudioOutputModal = _ref3 => {
   let {
-    onSuccess,
     cancelModal
   } = _ref3;
-  const onLeave = () => {
-    cancelModal();
-    onSuccess();
-  };
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.volumeModalContainer
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.participantMenuItem
-  }, /*#__PURE__*/React.createElement(Feather, {
-    name: "log-out",
-    style: styles.participantMenuItemIcon,
-    size: 24
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalHeading
-  }, "Leave Studio")), /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalDescription
-  }, "Others will continue after you leave. You can join the studio again.")), /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Don\u2019t Leave",
-    onPress: cancelModal,
-    viewStyle: styles.roleChangeModalCancelButton,
-    textStyle: styles.roleChangeModalButtonText
-  }), /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Leave",
-    onPress: onLeave,
-    viewStyle: [styles.roleChangeModalSuccessButton, styles.errorContainer],
-    textStyle: styles.roleChangeModalButtonText
-  })));
-};
-export const ChangeAudioOutputModal = _ref4 => {
-  let {
-    cancelModal
-  } = _ref4;
   const instance = useHMSInstance();
   const [currentOutputDevice, setCurrentOutputDevice] = useState(HMSAudioDevice.SPEAKER_PHONE);
   const [audioOutputDevicesList, setAudioOutputDevicesList] = useState([]);
   const switchAudioOutput = () => {
-    instance === null || instance === void 0 ? void 0 : instance.switchAudioOutput(currentOutputDevice);
+    instance === null || instance === void 0 || instance.switchAudioOutput(currentOutputDevice);
     cancelModal();
   };
   useEffect(() => {
@@ -339,14 +285,10 @@ export const ChangeAudioOutputModal = _ref4 => {
       onPress: () => {
         setCurrentOutputDevice(device);
       }
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.roleChangeModalCheckBox
-    }, currentOutputDevice === device && /*#__PURE__*/React.createElement(Entypo, {
-      name: "check",
-      style: styles.roleChangeModalCheck,
-      size: 10
-    })), /*#__PURE__*/React.createElement(Text, {
-      style: styles.roleChangeModalPermission
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.roleChangeModalPermission, currentOutputDevice === device ? {
+        color: COLORS.PRIMARY.DEFAULT
+      } : null]
     }, device));
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
@@ -362,10 +304,10 @@ export const ChangeAudioOutputModal = _ref4 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeAspectRatio = _ref5 => {
+export const ChangeAspectRatio = _ref4 => {
   let {
     cancelModal
-  } = _ref5;
+  } = _ref4;
   const {
     height
   } = useWindowDimensions();
@@ -393,14 +335,10 @@ export const ChangeAspectRatio = _ref5 => {
       key: ratio.id,
       style: styles.roleChangeModalPermissionContainer,
       onPress: () => setSelectedRatio(ratio)
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.roleChangeModalCheckBox
-    }, selectedRatio.id === ratio.id ? /*#__PURE__*/React.createElement(Entypo, {
-      name: "check",
-      style: styles.roleChangeModalCheck,
-      size: 10
-    }) : null), /*#__PURE__*/React.createElement(Text, {
-      style: styles.roleChangeModalPermission
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.roleChangeModalPermission, selectedRatio.id === ratio.id ? {
+        color: COLORS.PRIMARY.DEFAULT
+      } : null]
     }, ratio.id));
   })), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
@@ -416,17 +354,17 @@ export const ChangeAspectRatio = _ref5 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeAudioModeModal = _ref6 => {
+export const ChangeAudioModeModal = _ref5 => {
   let {
     cancelModal,
     audioMode,
     setAudioMode
-  } = _ref6;
+  } = _ref5;
   const instance = useHMSInstance();
   const [currentAudioMode, setCurrentAudioMode] = 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();
   };
@@ -441,14 +379,10 @@ export const ChangeAudioModeModal = _ref6 => {
       onPress: () => {
         setCurrentAudioMode(AudioModeList.indexOf(mode));
       }
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.roleChangeModalCheckBox
-    }, currentAudioMode === AudioModeList.indexOf(mode) && /*#__PURE__*/React.createElement(Entypo, {
-      name: "check",
-      style: styles.roleChangeModalCheck,
-      size: 10
-    })), /*#__PURE__*/React.createElement(Text, {
-      style: styles.roleChangeModalPermission
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.roleChangeModalPermission, currentAudioMode === AudioModeList.indexOf(mode) ? {
+        color: COLORS.PRIMARY.DEFAULT
+      } : null]
     }, mode));
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
@@ -464,12 +398,12 @@ export const ChangeAudioModeModal = _ref6 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeAudioMixingModeModal = _ref7 => {
+export const ChangeAudioMixingModeModal = _ref6 => {
   let {
     newAudioMixingMode,
     cancelModal,
     setNewAudioMixingMode
-  } = _ref7;
+  } = _ref6;
   const instance = useHMSInstance();
   const changeAudioMixingMode = async () => {
     await (instance === null || instance === void 0 ? void 0 : instance.setAudioMixingMode(newAudioMixingMode));
@@ -488,14 +422,10 @@ export const ChangeAudioMixingModeModal = _ref7 => {
       onPress: () => {
         setNewAudioMixingMode(audioMixingMode);
       }
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.roleChangeModalCheckBox
-    }, newAudioMixingMode === audioMixingMode && /*#__PURE__*/React.createElement(Entypo, {
-      name: "check",
-      style: styles.roleChangeModalCheck,
-      size: 10
-    })), /*#__PURE__*/React.createElement(Text, {
-      style: styles.roleChangeModalPermission
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.roleChangeModalPermission, newAudioMixingMode === audioMixingMode ? {
+        color: COLORS.PRIMARY.DEFAULT
+      } : null]
     }, audioMixingMode));
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
@@ -511,81 +441,11 @@ export const ChangeAudioMixingModeModal = _ref7 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeSortingModal = _ref8 => {
-  let {
-    data,
-    selectedItem,
-    onItemSelected,
-    cancelModal
-  } = _ref8;
-  const [sortingType, setSortingType] = useState(selectedItem || SortingType.DEFAULT);
-  const changeSorting = () => {
-    onItemSelected(sortingType);
-    cancelModal();
-  };
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModal
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalHeading
-  }, "Sorting Style"), /*#__PURE__*/React.createElement(CustomPicker, {
-    data: data,
-    selectedItem: sortingType,
-    onItemSelected: setSortingType,
-    viewStyle: styles.picker
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles.sortingButtonContainer
-  }, /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Cancel",
-    onPress: cancelModal,
-    viewStyle: styles.roleChangeModalCancelButton,
-    textStyle: styles.roleChangeModalButtonText
-  }), /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Change",
-    onPress: changeSorting,
-    viewStyle: styles.roleChangeModalSuccessButton,
-    textStyle: styles.roleChangeModalButtonText
-  })));
-};
-export const ChangeLayoutModal = _ref9 => {
-  let {
-    data,
-    selectedItem,
-    onItemSelected,
-    cancelModal
-  } = _ref9;
-  const [layout, setLayout] = useState(selectedItem);
-  const changeLayout = () => {
-    onItemSelected(layout);
-    cancelModal();
-  };
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModal
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalHeading
-  }, "Layout Style"), /*#__PURE__*/React.createElement(CustomPicker, {
-    data: data,
-    selectedItem: layout,
-    onItemSelected: setLayout,
-    viewStyle: styles.picker
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles.sortingButtonContainer
-  }, /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Cancel",
-    onPress: cancelModal,
-    viewStyle: styles.roleChangeModalCancelButton,
-    textStyle: styles.roleChangeModalButtonText
-  }), /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Change",
-    onPress: changeLayout,
-    viewStyle: styles.roleChangeModalSuccessButton,
-    textStyle: styles.roleChangeModalButtonText
-  })));
-};
-export const ChangeTrackStateForRoleModal = _ref10 => {
+export const ChangeTrackStateForRoleModal = _ref7 => {
   var _localPeerRole$permis, _localPeerRole$permis2;
   let {
     cancelModal
-  } = _ref10;
+  } = _ref7;
   const instance = useHMSInstance();
   const roles = useSelector(state => state.hmsStates.roles);
   const localPeerRole = useSelector(state => {
@@ -615,11 +475,7 @@ export const ChangeTrackStateForRoleModal = _ref10 => {
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.participantFilterText,
       numberOfLines: 1
-    }, role === null || role === void 0 ? void 0 : role.name), /*#__PURE__*/React.createElement(MaterialIcons, {
-      name: visible ? 'arrow-drop-up' : 'arrow-drop-down',
-      style: styles.participantFilterIcon,
-      size: 24
-    })),
+    }, role === null || role === void 0 ? void 0 : role.name)),
     onRequestClose: hideMenu,
     style: styles.participantsMenuContainer
   }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
@@ -641,25 +497,17 @@ export 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.createElement(TouchableOpacity, {
     style: styles.changeTrackStateRoleOption,
     onPress: () => setTrackState(true)
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, trackState && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, trackState ? {
+      color: 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.createElement(TouchableOpacity, {
     style: styles.changeTrackStateRoleOption,
     onPress: () => setTrackState(false)
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, !trackState && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, !trackState ? {
+      color: COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "UNMUTE"))), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(Text, {
@@ -667,25 +515,17 @@ export const ChangeTrackStateForRoleModal = _ref10 => {
   }, 'Track Type: '), /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: styles.changeTrackStateRoleOption,
     onPress: () => setTrackType(HMSTrackType.AUDIO)
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, trackType === HMSTrackType.AUDIO && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, trackType === HMSTrackType.AUDIO ? {
+      color: COLORS.PRIMARY.DEFAULT
+    } : null]
   }, HMSTrackType.AUDIO)), /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: styles.changeTrackStateRoleOption,
     onPress: () => setTrackType(HMSTrackType.VIDEO)
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, trackType === HMSTrackType.VIDEO && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, trackType === HMSTrackType.VIDEO ? {
+      color: COLORS.PRIMARY.DEFAULT
+    } : null]
   }, HMSTrackType.VIDEO))), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(CustomButton, {
@@ -700,21 +540,21 @@ export const ChangeTrackStateForRoleModal = _ref10 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeTrackStateModal = _ref11 => {
+export const ChangeTrackStateModal = _ref8 => {
   var _roleChangeRequest$re, _roleChangeRequest$su2;
   let {
     roleChangeRequest,
     cancelModal
-  } = _ref11;
+  } = _ref8;
   const localPeer = 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();
   };
@@ -738,10 +578,10 @@ export const ChangeTrackStateModal = _ref11 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const HlsStreamingModal = _ref12 => {
+export const HlsStreamingModal = _ref9 => {
   let {
     cancelModal
-  } = _ref12;
+  } = _ref9;
   const instance = useHMSInstance();
   const roomID = useSelector(state => state.user.roomID);
   const [hlsStreamingDetails, setHLSStreamingDetails] = useState({
@@ -754,14 +594,14 @@ export 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 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);
       }
@@ -794,14 +634,10 @@ export const HlsStreamingModal = _ref12 => {
         singleFilePerLayer: !hlsRecordingDetails.singleFilePerLayer
       });
     }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, hlsRecordingDetails.singleFilePerLayer && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, hlsRecordingDetails.singleFilePerLayer ? {
+      color: COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "SingleFilePerLayer")), /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: styles.checkboxButtonContainer,
     onPress: () => {
@@ -810,14 +646,10 @@ export const HlsStreamingModal = _ref12 => {
         videoOnDemand: !hlsRecordingDetails.videoOnDemand
       });
     }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, hlsRecordingDetails.videoOnDemand && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, hlsRecordingDetails.videoOnDemand ? {
+      color: COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "VideoOnDemand")), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(CustomButton, {
@@ -832,10 +664,10 @@ export const HlsStreamingModal = _ref12 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const RecordingModal = _ref13 => {
+export const RecordingModal = _ref10 => {
   let {
     setModalVisible
-  } = _ref13;
+  } = _ref10;
   const instance = useHMSInstance();
   const roomID = useSelector(state => state.user.roomID);
   const [recordingDetails, setRecordingDetails] = useState({
@@ -843,7 +675,7 @@ export 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(ModalTypes.DEFAULT);
   };
   return /*#__PURE__*/React.createElement(View, {
@@ -893,14 +725,10 @@ export const RecordingModal = _ref13 => {
         record: !recordingDetails.record
       });
     }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalCheckBox
-  }, recordingDetails.record && /*#__PURE__*/React.createElement(Entypo, {
-    name: "check",
-    style: styles.roleChangeModalCheck,
-    size: 10
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalPermission
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.roleChangeModalPermission, recordingDetails.record ? {
+      color: COLORS.PRIMARY.DEFAULT
+    } : null]
   }, "Record")), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(CustomButton, {
@@ -915,15 +743,15 @@ export const RecordingModal = _ref13 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeRoleAccepteModal = _ref14 => {
+export 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.createElement(View, {
@@ -946,47 +774,10 @@ export const ChangeRoleAccepteModal = _ref14 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const EndHlsModal = _ref15 => {
-  let {
-    onSuccess,
-    cancelModal
-  } = _ref15;
-  const onEnd = () => {
-    cancelModal();
-    onSuccess();
-  };
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.volumeModalContainer
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.participantMenuItem
-  }, /*#__PURE__*/React.createElement(Feather, {
-    name: "alert-triangle",
-    style: [styles.participantMenuItemIcon, styles.error],
-    size: 24
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: [styles.roleChangeModalHeading, styles.error]
-  }, "End live stream for all?")), /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.roleChangeModalDescription
-  }, "Your stream will end and everone will go offline immediately in this room. You can\u2019t undo this action.")), /*#__PURE__*/React.createElement(View, {
-    style: styles.roleChangeModalPermissionContainer
-  }, /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Don\u2019t End",
-    onPress: cancelModal,
-    viewStyle: styles.roleChangeModalCancelButton,
-    textStyle: styles.roleChangeModalButtonText
-  }), /*#__PURE__*/React.createElement(CustomButton, {
-    title: "End Stream",
-    onPress: onEnd,
-    viewStyle: [styles.roleChangeModalSuccessButton, styles.errorContainer],
-    textStyle: styles.roleChangeModalButtonText
-  })));
-};
-export const RealTime = _ref16 => {
+export const RealTime = _ref12 => {
   let {
     startedAt
-  } = _ref16;
+  } = _ref12;
   const [hour, setHour] = useState(0);
   const [minute, setMinute] = useState(0);
   const [second, setSecond] = useState(0);
@@ -1040,10 +831,10 @@ var RoleSelection = /*#__PURE__*/function (RoleSelection) {
   RoleSelection["TO_CHANGE"] = "TO_CHANGE";
   return RoleSelection;
 }(RoleSelection || {});
-export const ChangeBulkRoleModal = _ref17 => {
+export const ChangeBulkRoleModal = _ref13 => {
   let {
     cancelModal
-  } = _ref17;
+  } = _ref13;
   const hmsInstance = useSelector(state => state.user.hmsInstance);
   const roles = useSelector(state => state.hmsStates.roles);
   const [showRolesSelectionView, setShowRolesSelectionView] = useState(null);
@@ -1088,11 +879,7 @@ export const ChangeBulkRoleModal = _ref17 => {
   }, /*#__PURE__*/React.createElement(Text, {
     style: bulkRoleStyles.value,
     numberOfLines: 1
-  }, rolesToChange.map(role => role.name).join(', ') || 'Select Roles'), /*#__PURE__*/React.createElement(MaterialCommunityIcons, {
-    name: "chevron-right",
-    size: 16,
-    style: bulkRoleStyles.chevronIcon
-  }))), /*#__PURE__*/React.createElement(View, {
+  }, rolesToChange.map(role => role.name).join(', ') || 'Select Roles'))), /*#__PURE__*/React.createElement(View, {
     style: bulkRoleStyles.row
   }, /*#__PURE__*/React.createElement(Text, {
     style: bulkRoleStyles.label
@@ -1101,11 +888,7 @@ export const ChangeBulkRoleModal = _ref17 => {
     onPress: () => setShowRolesSelectionView(RoleSelection.TARGET)
   }, /*#__PURE__*/React.createElement(Text, {
     style: bulkRoleStyles.value
-  }, targetRole ? targetRole.name : 'Select Role'), /*#__PURE__*/React.createElement(MaterialCommunityIcons, {
-    name: "chevron-right",
-    size: 16,
-    style: bulkRoleStyles.chevronIcon
-  })))), /*#__PURE__*/React.createElement(View, {
+  }, targetRole ? targetRole.name : 'Select Role')))), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(CustomButton, {
     title: "Cancel",
@@ -1133,18 +916,10 @@ export const ChangeBulkRoleModal = _ref17 => {
       key: role.name,
       style: bulkRoleStyles.roleBtn,
       onPress: () => handleRoleSelection(role)
-    }, /*#__PURE__*/React.createElement(View, {
-      style: bulkRoleStyles.checkboxContainer
-    }, showRolesSelectionView === RoleSelection.TARGET ? /*#__PURE__*/React.createElement(MaterialCommunityIcons, {
-      name: selected ? 'radiobox-marked' : 'radiobox-blank',
-      style: styles.roleChangeModalCheck,
-      size: 20
-    }) : /*#__PURE__*/React.createElement(MaterialCommunityIcons, {
-      name: selected ? 'checkbox-outline' : 'checkbox-blank-outline',
-      style: styles.roleChangeModalCheck,
-      size: 24
-    })), /*#__PURE__*/React.createElement(Text, {
-      style: bulkRoleStyles.checkboxLabel
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: selected ? COLORS.PRIMARY.DEFAULT : COLORS.TEXT.MEDIUM_EMPHASIS
+      }
     }, role.name));
   })), /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: bulkRoleStyles.roleSelectionDone,