@100mslive/react-native-room-kit 0.0.1

package/lib/module/components/Modals.js

@@ -0,0 +1,1609 @@
+import React, { useEffect, useState } from 'react';
+import { View, TouchableOpacity, Text, ScrollView, TextInput, StyleSheet, Image, Platform, InteractionManager, useWindowDimensions } from 'react-native';
+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 { Slider } from '@miblanchard/react-native-slider';
+import RNFetchBlob from 'rn-fetch-blob';
+import RNFS from 'react-native-fs';
+import Share from 'react-native-share';
+import { styles } from './styles';
+import { CustomButton } from './CustomButton';
+import { CustomInput } from './CustomInput';
+import { Menu, MenuItem } from './MenuModal';
+import { CustomPicker } from './Picker';
+import { changeHLSAspectRatio, changeShowStats, saveUserData } from '../redux/actions';
+import { requestExternalStoragePermission, getTime } from '../utils/functions';
+import { ModalTypes, SUPPORTED_ASPECT_RATIOS, SortingType } from '../utils/types';
+import { COLORS } from '../utils/theme';
+import { SwitchRow } from './SwitchRow';
+import { useHMSInstance } from '../hooks-util';
+export const ChangeRoleModal = _ref => {
+  let {
+    cancelModal
+  } = _ref;
+  const instance = useHMSInstance();
+  const peer = useSelector(state => state.app.peerToUpdate);
+  const roles = useSelector(state => state.hmsStates.roles);
+  const [newRole, setNewRole] = useState(peer === null || peer === void 0 ? void 0 : peer.role);
+  const [request, setRequest] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const hideMenu = () => setVisible(false);
+  const showMenu = () => setVisible(true);
+  const changeRole = () => {
+    instance === null || instance === void 0 ? 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);
+    });
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Change Role"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalDescription
+  }, "Change the role of '", peer === null || peer === void 0 ? void 0 : peer.name, "' to"), /*#__PURE__*/React.createElement(Menu, {
+    visible: visible,
+    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.participantChangeRoleContainer,
+      onPress: showMenu
+    }, /*#__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
+    })),
+    onRequestClose: hideMenu,
+    style: styles.participantsMenuContainer
+  }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      onPress: () => {
+        hideMenu();
+        setNewRole(knownRole);
+      },
+      key: knownRole.name
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.participantMenuItem
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.participantMenuItemName
+    }, knownRole === null || knownRole === void 0 ? void 0 : knownRole.name)));
+  })), !(peer !== null && peer !== void 0 && peer.isLocal) && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.roleChangeModalPermissionContainer,
+    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
+  }, "Request permission from the user")), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: changeRole,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const SaveScreenshot = _ref2 => {
+  let {
+    imageSource,
+    cancelModal
+  } = _ref2;
+  const peer = useSelector(state => state.hmsStates.localPeer || undefined);
+
+  /**
+   * Get target path on external storage to save image
+   * @param {string} imageExtension file extension to use for image
+   * @param {string} peerName name of peer to use in image name
+   * @returns string - path on external storage to save image
+   */
+  const getTargetPath = (imageExtension, peerName) => {
+    // formatting peer name
+    const formattedPeerName = peerName ? peerName.replace(/ /g, '-').toLowerCase() : '';
+
+    // name to use for image
+    const imageName = `${formattedPeerName}-snapshot-${Date.now()}.${imageExtension}`;
+
+    // directory for saving image
+    const targetDir = Platform.OS === 'ios' ? RNFetchBlob.fs.dirs.DocumentDir : RNFetchBlob.fs.dirs.DCIMDir;
+    const targetLocation = `${targetDir}/${imageName}`;
+    return targetLocation;
+  };
+  const saveToDisk = async () => {
+    try {
+      // Requesting External Storage permission to save image to disk
+      const permission = await requestExternalStoragePermission();
+
+      // checking External Storage permission and availability of image source that we have to save to disk
+      if (permission && peer && imageSource) {
+        // Waiting for Interactions (Modal Close Animation) to finish
+        InteractionManager.runAfterInteractions(async () => {
+          // image extension to use
+          const imageExtension = 'png';
+
+          // Removing `file://` from URI if it exists, to keep it consistent with `base64` image case
+          const source = imageSource.uri.replace('file://', '');
+
+          // Checking if source is the local file on device
+          const isSourceLocalFile = imageSource.uri.startsWith('file://');
+
+          // if source is local file on ios device then we don't need to do any file system operation
+          // We can use that local file to show preview window to user on ios
+          const targetLocation = isSourceLocalFile && Platform.OS === 'ios' ? source : getTargetPath(imageExtension, peer.name);
+
+          // if source is local file on android device, then we copy source file to target path
+          if (isSourceLocalFile) {
+            if (Platform.OS === 'android') {
+              await RNFS.copyFile(source,
+              // Source Dir
+              targetLocation // Target Dir
+              );
+            }
+          }
+          // if source is not local file, then we write to target path
+          else {
+            await RNFetchBlob.fs.writeFile(targetLocation,
+            // Target Dir
+            source.replace('data:image/png;base64,', ''),
+            // Data to write to "Target Dir"
+            'base64');
+          }
+          Share.open({
+            url: 'file://' + targetLocation
+          }).then(_ref3 => {
+            let {
+              message
+            } = _ref3;
+            if (message.includes('SaveToCameraRoll')) {
+              Toast.showWithGravity('Snapshot has been saved successfully', Toast.LONG, Toast.TOP);
+            }
+            cancelModal();
+          }).catch(error => console.log('share error -> ', error)).finally(() => {
+            // On Android, We have already saved image into DCIM dir
+            // Therefore, we can notify user about "save success" and close modal
+            if (Platform.OS === 'android') {
+              Toast.showWithGravity('Snapshot has been saved successfully', Toast.LONG, Toast.TOP);
+              cancelModal();
+            }
+          });
+        });
+      }
+    } catch (error) {
+      console.warn('Snapshot Save Error: ', error);
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      flexGrow: 1
+    }, styles.volumeModalContainer]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, peer ? `${peer.name}'s Snapshot` : 'Snapshot'), imageSource ? /*#__PURE__*/React.createElement(Image, {
+    source: imageSource,
+    style: styles.screenshotImage,
+    resizeMode: "contain"
+  }) : null, /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: [styles.roleChangeModalCancelButton, {
+      width: '40%'
+    }],
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Save to Disk",
+    onPress: saveToDisk,
+    viewStyle: [styles.roleChangeModalSuccessButton, {
+      width: '56%'
+    }],
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeVolumeModal = _ref4 => {
+  let {
+    cancelModal
+  } = _ref4;
+  const instance = useHMSInstance();
+  const peer = useSelector(state => state.app.peerToUpdate);
+  const [volume, setVolume] = useState(0);
+  const changeVolume = () => {
+    if (peer !== null && peer !== void 0 && peer.audioTrack) {
+      instance === null || instance === void 0 ? void 0 : instance.setVolume(peer === null || peer === void 0 ? void 0 : peer.audioTrack, volume);
+    }
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.volumeModalContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Set Volume"), /*#__PURE__*/React.createElement(View, {
+    style: styles.volumeModalSlider
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalDescription
+  }, "Volume: ", volume), /*#__PURE__*/React.createElement(Slider, {
+    value: volume,
+    maximumValue: 10,
+    minimumValue: 0,
+    step: 1,
+    onValueChange: value => setVolume(value[0])
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: changeVolume,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeNameModal = _ref5 => {
+  let {
+    cancelModal
+  } = _ref5;
+  const instance = useHMSInstance();
+  const peer = useSelector(state => state.app.peerToUpdate);
+  const dispatch = useDispatch();
+  const [name, setName] = useState(peer === null || peer === void 0 ? void 0 : peer.name);
+  const changeName = () => {
+    if (name.length > 0) {
+      instance === null || instance === void 0 ? void 0 : instance.changeName(name).then(d => {
+        dispatch(saveUserData({
+          userName: name
+        }));
+        console.log('Change Name Success: ', d);
+      }).catch(e => console.log('Change Name Error: ', e));
+    }
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.volumeModalContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Change Name"), /*#__PURE__*/React.createElement(View, {
+    style: styles.volumeModalSlider
+  }, /*#__PURE__*/React.createElement(CustomInput, {
+    value: name,
+    onChangeText: setName,
+    inputStyle: styles.participantChangeNameInput,
+    placeholderTextColor: COLORS.TEXT.DISABLED,
+    placeholder: "Find what you\u2019re looking for"
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: changeName,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const RtcStatsModal = () => {
+  var _currentTrack$track;
+  const dispatch = useDispatch();
+  const instance = useSelector(state => state.user.hmsInstance);
+  const showStatsOnTiles = useSelector(state => state.app.joinConfig.showStats);
+  const [localPeer, setLocalPeer] = useState(null);
+  const [remotePeers, setRemotePeers] = useState([]);
+  const [tracksListModalVisible, setTracksListModalVisible] = useState(false);
+  const [currentTrack, setCurrentTrack] = useState(null);
+  const hideMenu = () => setTracksListModalVisible(false);
+  const showMenu = () => setTracksListModalVisible(true);
+  const getStatsList = () => {
+    var _localPeer$audioTrack, _localPeer$videoTrack;
+    const list = [];
+    if (localPeer !== null && localPeer !== void 0 && (_localPeer$audioTrack = localPeer.audioTrack) !== null && _localPeer$audioTrack !== void 0 && _localPeer$audioTrack.trackId) {
+      list.push({
+        name: (localPeer === null || localPeer === void 0 ? void 0 : localPeer.name) + "'s audio",
+        peerId: localPeer === null || localPeer === void 0 ? void 0 : localPeer.peerID,
+        track: localPeer === null || localPeer === void 0 ? void 0 : localPeer.audioTrack
+      });
+    }
+    if (localPeer !== null && localPeer !== void 0 && (_localPeer$videoTrack = localPeer.videoTrack) !== null && _localPeer$videoTrack !== void 0 && _localPeer$videoTrack.trackId) {
+      list.push({
+        name: (localPeer === null || localPeer === void 0 ? void 0 : localPeer.name) + "'s video",
+        track: localPeer === null || localPeer === void 0 ? void 0 : localPeer.videoTrack
+      });
+    }
+    remotePeers.forEach(remotePeer => {
+      var _remotePeer$audioTrac, _remotePeer$videoTrac;
+      if (remotePeer !== null && remotePeer !== void 0 && (_remotePeer$audioTrac = remotePeer.audioTrack) !== null && _remotePeer$audioTrac !== void 0 && _remotePeer$audioTrac.trackId) {
+        list.push({
+          name: (remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.name) + "'s audio",
+          peerId: remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.peerID,
+          track: remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.audioTrack
+        });
+      }
+      if (remotePeer !== null && remotePeer !== void 0 && (_remotePeer$videoTrac = remotePeer.videoTrack) !== null && _remotePeer$videoTrac !== void 0 && _remotePeer$videoTrac.trackId) {
+        list.push({
+          name: (remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.name) + "'s video",
+          track: remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.videoTrack
+        });
+      }
+    });
+    return list;
+  };
+
+  // Getting Local Peer from hms instance
+  useEffect(() => {
+    if (instance) {
+      const updateLocalPeer = async () => {
+        setLocalPeer(await instance.getLocalPeer());
+      };
+      updateLocalPeer();
+    }
+  }, [instance]);
+
+  // Getting Remote Peers from hms instance
+  useEffect(() => {
+    if (instance) {
+      const updateRemotePeers = async () => {
+        setRemotePeers(await instance.getRemotePeers());
+      };
+      updateRemotePeers();
+    }
+  }, [instance]);
+  const isCurrentTrackSelected = currentTrack !== null;
+  const statsList = getStatsList();
+  const firstTrackInStatsList = statsList.length > 0 ? statsList[0] : null;
+
+  // If currentTrack is null and we have valid item in StatsList
+  // then showing stats for the first valid item in StatsList
+  useEffect(() => {
+    if (!isCurrentTrackSelected && firstTrackInStatsList) {
+      setCurrentTrack(firstTrackInStatsList);
+    }
+  }, [isCurrentTrackSelected, firstTrackInStatsList]);
+  const selectedTrackId = currentTrack ? currentTrack.peerId || ((_currentTrack$track = currentTrack.track) === null || _currentTrack$track === void 0 ? void 0 : _currentTrack$track.trackId) : null;
+  const rtcStatsData = useSelector(state => selectedTrackId ? state.app.rtcStats[selectedTrackId] : null);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.participantContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.participantsHeaderContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.participantsHeading
+  }, "Stats for Nerds")), /*#__PURE__*/React.createElement(SwitchRow, {
+    text: "Show Stats on Tiles",
+    value: showStatsOnTiles,
+    onChange: value => dispatch(changeShowStats(value))
+  }), /*#__PURE__*/React.createElement(Menu, {
+    visible: tracksListModalVisible,
+    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.statsModalMenu,
+      onPress: showMenu
+    }, /*#__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
+    })),
+    onRequestClose: hideMenu,
+    style: styles.participantsMenuContainer
+  }, statsList.map(trackObj => {
+    var _trackObj$track;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      onPress: () => {
+        hideMenu();
+        setCurrentTrack(trackObj);
+      },
+      key: trackObj === null || trackObj === void 0 || (_trackObj$track = trackObj.track) === null || _trackObj$track === void 0 ? void 0 : _trackObj$track.trackId
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.participantMenuItem
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.participantMenuItemName
+    }, trackObj === null || trackObj === void 0 ? void 0 : trackObj.name)));
+  })), /*#__PURE__*/React.createElement(ScrollView, {
+    contentContainerStyle: Array.isArray(rtcStatsData) ? null : styles.statsModalCardContainer
+  }, rtcStatsData ? Array.isArray(rtcStatsData) ? /*#__PURE__*/React.createElement(View, null, rtcStatsData.map(rtcStatsItem => {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        marginBottom: 12
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.statsModalCardDescription
+    }, rtcStatsItem.layer), /*#__PURE__*/React.createElement(View, {
+      style: styles.statsModalCardContainer
+    }, Object.entries(rtcStatsItem).filter(item => item[0] !== 'layer').map(item => {
+      const [key, value] = item;
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.statsModalCard,
+        key: key
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.statsModalCardHeading
+      }, key), /*#__PURE__*/React.createElement(Text, {
+        style: styles.statsModalCardDescription
+      }, key === 'resolution' ? `Height: ${(value === null || value === void 0 ? void 0 : value.height) ?? 0}, Width: ${(value === null || value === void 0 ? void 0 : value.width) ?? 0}` : key === 'qualityLimitationReasons' ? value.reason : value));
+    })));
+  })) : Object.entries(rtcStatsData).map(item => {
+    const [key, value] = item;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.statsModalCard,
+      key: key
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.statsModalCardHeading
+    }, key), /*#__PURE__*/React.createElement(Text, {
+      style: styles.statsModalCardDescription
+    }, 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 = _ref6 => {
+  let {
+    onSuccess,
+    cancelModal
+  } = _ref6;
+  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 EndRoomModal = _ref7 => {
+  let {
+    onSuccess,
+    cancelModal
+  } = _ref7;
+  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 Session")), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalDescription
+  }, "The session will end for everyone and all the activities will stop. 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 Session",
+    onPress: onEnd,
+    viewStyle: [styles.roleChangeModalSuccessButton, styles.errorContainer],
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeAudioOutputModal = _ref8 => {
+  let {
+    cancelModal
+  } = _ref8;
+  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);
+    cancelModal();
+  };
+  useEffect(() => {
+    const getList = async () => {
+      setAudioOutputDevicesList(await (instance === null || instance === void 0 ? void 0 : instance.getAudioDevicesList()));
+      setCurrentOutputDevice(await (instance === null || instance === void 0 ? void 0 : instance.getAudioOutputRouteType()));
+    };
+    getList();
+  }, [instance]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Switch Audio Output"), audioOutputDevicesList.map(device => {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      key: device,
+      style: styles.roleChangeModalPermissionContainer,
+      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
+    }, device));
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: switchAudioOutput,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeAspectRatio = _ref9 => {
+  let {
+    cancelModal
+  } = _ref9;
+  const {
+    height
+  } = useWindowDimensions();
+  const dispatch = useDispatch();
+  const hlsPlayerAspectRatio = useSelector(state => state.app.hlsAspectRatio);
+  const [selectedRatio, setSelectedRatio] = useState(hlsPlayerAspectRatio);
+  const handleChangePress = () => {
+    cancelModal();
+    if (hlsPlayerAspectRatio.id !== selectedRatio.id) {
+      dispatch(changeHLSAspectRatio(selectedRatio));
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Change Aspect Ratio"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalDescription
+  }, "Current: ", hlsPlayerAspectRatio.id), /*#__PURE__*/React.createElement(ScrollView, {
+    style: {
+      maxHeight: height * 0.4
+    }
+  }, SUPPORTED_ASPECT_RATIOS.map(ratio => {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      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
+    }, ratio.id));
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: handleChangePress,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeAudioModeModal = _ref10 => {
+  let {
+    cancelModal,
+    audioMode,
+    setAudioMode
+  } = _ref10;
+  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);
+    setAudioMode(currentAudioMode);
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Switch Audio Output"), AudioModeList.map(mode => {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      key: mode,
+      style: styles.roleChangeModalPermissionContainer,
+      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
+    }, mode));
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: switchAudioMode,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeAudioMixingModeModal = _ref11 => {
+  let {
+    newAudioMixingMode,
+    cancelModal,
+    setNewAudioMixingMode
+  } = _ref11;
+  const instance = useHMSInstance();
+  const changeAudioMixingMode = async () => {
+    await (instance === null || instance === void 0 ? void 0 : instance.setAudioMixingMode(newAudioMixingMode));
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Change Audio Mixing Mode"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalDescription
+  }, "TALK_ONLY : only data captured by mic will be streamed in the room, TALK_AND_MUSIC : data captured by mic as well as playback audio being captured from device will be streamed in the room, MUSIC_ONLY : only the playback audio being captured from device will be streamed in the room"), Object.keys(HMSAudioMixingMode).map(audioMixingMode => {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      key: audioMixingMode,
+      style: styles.roleChangeModalPermissionContainer,
+      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
+    }, audioMixingMode));
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: changeAudioMixingMode,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeSortingModal = _ref12 => {
+  let {
+    data,
+    selectedItem,
+    onItemSelected,
+    cancelModal
+  } = _ref12;
+  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 = _ref13 => {
+  let {
+    data,
+    selectedItem,
+    onItemSelected,
+    cancelModal
+  } = _ref13;
+  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 = _ref14 => {
+  var _localPeerRole$permis, _localPeerRole$permis2;
+  let {
+    cancelModal
+  } = _ref14;
+  const instance = useHMSInstance();
+  const roles = useSelector(state => state.hmsStates.roles);
+  const localPeerRole = useSelector(state => {
+    var _state$hmsStates$loca;
+    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.role;
+  });
+  const [role, setRole] = useState(localPeerRole);
+  const [visible, setVisible] = useState(false);
+  const [trackType, setTrackType] = useState(HMSTrackType.VIDEO);
+  const [trackState, setTrackState] = useState(false);
+  const hideMenu = () => setVisible(false);
+  const showMenu = () => setVisible(true);
+  const changeTrackState = async () => {
+    const source = HMSTrackSource.REGULAR;
+    await (instance === null || instance === void 0 ? void 0 : instance.changeTrackStateForRoles(trackState, trackType, source, [role]).then(d => console.log('Change Track State For Role Success: ', d)).catch(e => console.log('Change Track State For Role Error: ', e)));
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Change Track State For Role"), /*#__PURE__*/React.createElement(Menu, {
+    visible: visible,
+    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.participantChangeRoleContainer,
+      onPress: showMenu
+    }, /*#__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
+    })),
+    onRequestClose: hideMenu,
+    style: styles.participantsMenuContainer
+  }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      onPress: () => {
+        hideMenu();
+        setRole(knownRole);
+      },
+      key: knownRole.name
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.participantMenuItem
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.participantMenuItemName
+    }, knownRole === null || knownRole === void 0 ? void 0 : knownRole.name)));
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.changeTrackStateRoleOptionHeading
+  }, '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
+  }, "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
+  }, "UNMUTE"))), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.changeTrackStateRoleOptionHeading
+  }, '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
+  }, 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
+  }, HMSTrackType.VIDEO))), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: changeTrackState,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeTrackStateModal = _ref15 => {
+  var _roleChangeRequest$re, _roleChangeRequest$su2;
+  let {
+    roleChangeRequest,
+    cancelModal
+  } = _ref15;
+  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);
+    } else {
+      var _localPeer$localAudio;
+      localPeer === null || localPeer === void 0 || (_localPeer$localAudio = localPeer.localAudioTrack()) === null || _localPeer$localAudio === void 0 ? void 0 : _localPeer$localAudio.setMute(false);
+    }
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Change Track State Request"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeText
+  }, `${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$re = roleChangeRequest.requestedBy) === null || _roleChangeRequest$re === void 0 ? void 0 : _roleChangeRequest$re.toLocaleUpperCase()} requested to unmute your regular ${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$su2 = roleChangeRequest.suggestedRole) === null || _roleChangeRequest$su2 === void 0 ? void 0 : _roleChangeRequest$su2.toLocaleUpperCase()}`), /*#__PURE__*/React.createElement(View, {
+    style: styles.sortingButtonContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Reject",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Accept",
+    onPress: changeLayout,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const HlsStreamingModal = _ref16 => {
+  let {
+    cancelModal
+  } = _ref16;
+  const instance = useHMSInstance();
+  const roomID = useSelector(state => state.user.roomID);
+  const [hlsStreamingDetails, setHLSStreamingDetails] = useState({
+    meetingUrl: roomID ? roomID + '?skip_preview=true' : '',
+    metadata: ''
+  });
+  const [startHlsRetry, setStartHlsRetry] = useState(true);
+  const [hlsRecordingDetails, setHLSRecordingDetails] = useState({
+    singleFilePerLayer: false,
+    videoOnDemand: false
+  });
+  const changeLayout = () => {
+    instance === null || instance === void 0 ? 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));
+      } else {
+        console.log('Start HLS Streaming Error: ', err);
+      }
+    });
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "HLS Streaming Details"), /*#__PURE__*/React.createElement(TextInput, {
+    onChangeText: value => {
+      setHLSStreamingDetails({
+        ...hlsStreamingDetails,
+        meetingUrl: value
+      });
+    },
+    placeholderTextColor: COLORS.SECONDARY.DEFAULT,
+    placeholder: "Enter meeting url",
+    style: styles.input,
+    defaultValue: hlsStreamingDetails.meetingUrl,
+    returnKeyType: "done",
+    multiline: true,
+    blurOnSubmit: true
+  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.checkboxButtonContainer,
+    onPress: () => {
+      setHLSRecordingDetails({
+        ...hlsRecordingDetails,
+        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
+  }, "SingleFilePerLayer")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.checkboxButtonContainer,
+    onPress: () => {
+      setHLSRecordingDetails({
+        ...hlsRecordingDetails,
+        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
+  }, "VideoOnDemand")), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Start",
+    onPress: changeLayout,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const RecordingModal = _ref17 => {
+  var _recordingDetails$res, _recordingDetails$res2, _recordingDetails$res4, _recordingDetails$res5;
+  let {
+    recordingModal,
+    setModalVisible
+  } = _ref17;
+  const instance = useHMSInstance();
+  const roomID = useSelector(state => state.user.roomID);
+  const [resolutionDetails, setResolutionDetails] = useState(false);
+  const [recordingDetails, setRecordingDetails] = useState({
+    record: false,
+    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));
+    setModalVisible(ModalTypes.DEFAULT);
+  };
+  return recordingModal ? /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Recording Details"), /*#__PURE__*/React.createElement(TextInput, {
+    onChangeText: value => {
+      setRecordingDetails({
+        ...recordingDetails,
+        meetingURL: value
+      });
+    },
+    placeholderTextColor: COLORS.SECONDARY.DEFAULT,
+    placeholder: "Enter meeting url",
+    style: styles.input,
+    defaultValue: recordingDetails.meetingURL || '',
+    returnKeyType: "done",
+    multiline: true,
+    blurOnSubmit: true
+  }), /*#__PURE__*/React.createElement(TextInput, {
+    onChangeText: value => {
+      if (value === '') {
+        setRecordingDetails({
+          ...recordingDetails,
+          rtmpURLs: undefined
+        });
+      } else {
+        setRecordingDetails({
+          ...recordingDetails,
+          rtmpURLs: [value]
+        });
+      }
+    },
+    placeholderTextColor: COLORS.SECONDARY.DEFAULT,
+    placeholder: "Enter rtmp url",
+    style: styles.input,
+    defaultValue: recordingDetails.rtmpURLs ? recordingDetails.rtmpURLs[0] : '',
+    returnKeyType: "done",
+    multiline: true,
+    blurOnSubmit: true
+  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.checkboxButtonContainer,
+    onPress: () => {
+      setRecordingDetails({
+        ...recordingDetails,
+        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
+  }, "Record")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.checkboxButtonContainer,
+    onPress: () => {
+      setResolutionDetails(!resolutionDetails);
+      if (!resolutionDetails) {
+        setModalVisible(ModalTypes.RESOLUTION, true);
+        setRecordingDetails({
+          ...recordingDetails,
+          resolution: {
+            height: 720,
+            width: 1280
+          }
+        });
+      } else {
+        setRecordingDetails({
+          ...recordingDetails,
+          resolution: undefined
+        });
+      }
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalCheckBox
+  }, resolutionDetails && /*#__PURE__*/React.createElement(Entypo, {
+    name: "check",
+    style: styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalPermission
+  }, "Resolution")), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: () => setModalVisible(ModalTypes.DEFAULT),
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Start",
+    onPress: changeLayout,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  }))) : /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Resolution Details"), /*#__PURE__*/React.createElement(View, {
+    style: styles.resolutionContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.resolutionDetails
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.interRegular
+  }, "Height :"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.resolutionValue
+  }, (_recordingDetails$res = recordingDetails.resolution) === null || _recordingDetails$res === void 0 ? void 0 : _recordingDetails$res.height)), /*#__PURE__*/React.createElement(Slider, {
+    value: (_recordingDetails$res2 = recordingDetails.resolution) === null || _recordingDetails$res2 === void 0 ? void 0 : _recordingDetails$res2.height,
+    maximumValue: 1280,
+    minimumValue: 480,
+    step: 10,
+    onValueChange: value => {
+      var _recordingDetails$res3;
+      setRecordingDetails({
+        ...recordingDetails,
+        resolution: {
+          height: parseInt(value),
+          width: ((_recordingDetails$res3 = recordingDetails.resolution) === null || _recordingDetails$res3 === void 0 ? void 0 : _recordingDetails$res3.width) ?? 1280
+        }
+      });
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.resolutionDetails
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.interRegular
+  }, "Width :"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.resolutionValue
+  }, (_recordingDetails$res4 = recordingDetails.resolution) === null || _recordingDetails$res4 === void 0 ? void 0 : _recordingDetails$res4.width)), /*#__PURE__*/React.createElement(Slider, {
+    value: (_recordingDetails$res5 = recordingDetails.resolution) === null || _recordingDetails$res5 === void 0 ? void 0 : _recordingDetails$res5.width,
+    maximumValue: 1280,
+    minimumValue: 500,
+    step: 10,
+    onValueChange: value => {
+      var _recordingDetails$res6;
+      setRecordingDetails({
+        ...recordingDetails,
+        resolution: {
+          width: parseInt(value),
+          height: ((_recordingDetails$res6 = recordingDetails.resolution) === null || _recordingDetails$res6 === void 0 ? void 0 : _recordingDetails$res6.height) ?? 720
+        }
+      });
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.sortingButtonContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Back",
+    onPress: () => setModalVisible(ModalTypes.RECORDING, true),
+    viewStyle: styles.backButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const ChangeRoleAccepteModal = _ref18 => {
+  var _roleChangeRequest$re2, _roleChangeRequest$su3;
+  let {
+    instance,
+    roleChangeRequest,
+    cancelModal
+  } = _ref18;
+  const changeLayout = () => {
+    instance === null || instance === void 0 ? void 0 : instance.acceptRoleChange();
+    cancelModal();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModal
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Role Change Details"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeText
+  }, `Role change requested by ${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$re2 = roleChangeRequest.requestedBy) === null || _roleChangeRequest$re2 === void 0 ? void 0 : _roleChangeRequest$re2.toLocaleUpperCase()}. Changing role to ${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$su3 = roleChangeRequest.suggestedRole) === null || _roleChangeRequest$su3 === void 0 ? void 0 : _roleChangeRequest$su3.toLocaleUpperCase()}`), /*#__PURE__*/React.createElement(View, {
+    style: styles.sortingButtonContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Reject",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Accept",
+    onPress: changeLayout,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+export const EndHlsModal = _ref19 => {
+  let {
+    onSuccess,
+    cancelModal
+  } = _ref19;
+  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 = _ref20 => {
+  let {
+    startedAt
+  } = _ref20;
+  const [hour, setHour] = useState(0);
+  const [minute, setMinute] = useState(0);
+  const [second, setSecond] = useState(0);
+  useEffect(() => {
+    if (startedAt) {
+      const millisecs = Date.now() - startedAt.getTime();
+      const [h, min, sec] = getTime(Math.abs(millisecs));
+      if (h > 0) {
+        setHour(h);
+      }
+      if (min > 0) {
+        setMinute(min);
+      }
+      if (sec > 0) {
+        setSecond(sec);
+      }
+    }
+  }, [startedAt]);
+  useEffect(() => {
+    const updatePostInfo = setInterval(() => {
+      setSecond(sec => sec + 1);
+    }, 1000);
+    return () => {
+      clearInterval(updatePostInfo);
+    };
+  }, []);
+  useEffect(() => {
+    if (second === 60) {
+      setSecond(0);
+      setMinute(min => min + 1);
+    }
+  }, [second]);
+  useEffect(() => {
+    if (minute === 60) {
+      setMinute(0);
+      setHour(hr => hr + 1);
+    }
+  }, [minute]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.liveTextContainer
+  }, hour > 0 && /*#__PURE__*/React.createElement(Text, {
+    style: styles.liveTimeText
+  }, hour < 10 ? '0' + hour : hour, ":"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.liveTimeText
+  }, minute < 10 ? '0' + minute : minute, ":"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.liveTimeText
+  }, second < 10 ? '0' + second : second));
+};
+export const AudioShareSetVolumeModal = _ref21 => {
+  let {
+    success,
+    cancel
+  } = _ref21;
+  const [volume, setVolume] = useState(0);
+  const changeVolume = () => {
+    success(volume);
+    cancel();
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.volumeModalContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Set Volume"), /*#__PURE__*/React.createElement(View, {
+    style: styles.volumeModalSlider
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalDescription
+  }, "Volume: ", volume), /*#__PURE__*/React.createElement(Slider, {
+    value: volume,
+    maximumValue: 1,
+    minimumValue: 0,
+    step: 0.1,
+    onValueChange: value => setVolume(value[0])
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancel,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Change",
+    onPress: changeVolume,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+var RoleSelection = /*#__PURE__*/function (RoleSelection) {
+  RoleSelection["TARGET"] = "TARGET";
+  RoleSelection["TO_CHANGE"] = "TO_CHANGE";
+  return RoleSelection;
+}(RoleSelection || {});
+export const ChangeBulkRoleModal = _ref22 => {
+  let {
+    cancelModal
+  } = _ref22;
+  const hmsInstance = useSelector(state => state.user.hmsInstance);
+  const roles = useSelector(state => state.hmsStates.roles);
+  const [showRolesSelectionView, setShowRolesSelectionView] = useState(null);
+  const [targetRole, setTargetRole] = useState(null);
+  const [rolesToChange, setRolesToChange] = useState([]);
+  const changeRole = async () => {
+    if (!hmsInstance || !targetRole) {
+      return;
+    }
+    hmsInstance.changeRoleOfPeersWithRoles(rolesToChange.filter(roleToChange => roleToChange.name !== targetRole.name), targetRole);
+    cancelModal();
+  };
+  const handleRoleSelection = roleSelected => {
+    if (showRolesSelectionView === RoleSelection.TARGET) {
+      setTargetRole(roleSelected);
+    } else {
+      setRolesToChange(prevRolesToChange => {
+        if (prevRolesToChange.findIndex(role => role.name === roleSelected.name) >= 0) {
+          return prevRolesToChange.filter(role => role.name !== roleSelected.name);
+        }
+        return [...prevRolesToChange, roleSelected];
+      });
+    }
+  };
+
+  // if targetRole is not available, OR
+  // role or rolesToChange is not available. then "Change" button should be disabled
+  const changeSubmitDisabled = !targetRole || rolesToChange.length === 0;
+  return /*#__PURE__*/React.createElement(View, {
+    style: bulkRoleStyles.container
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Bulk Role Change"), /*#__PURE__*/React.createElement(View, {
+    style: bulkRoleStyles.contentContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: bulkRoleStyles.row
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: bulkRoleStyles.label
+  }, "Select Roles to Change"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: bulkRoleStyles.btn,
+    onPress: () => setShowRolesSelectionView(RoleSelection.TO_CHANGE)
+  }, /*#__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, {
+    style: bulkRoleStyles.row
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: bulkRoleStyles.label
+  }, "Target Role"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: bulkRoleStyles.btn,
+    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, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    disabled: changeSubmitDisabled,
+    title: "Change",
+    onPress: changeRole,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })), showRolesSelectionView ? /*#__PURE__*/React.createElement(View, {
+    style: bulkRoleStyles.roleSelectionBackdrop
+  }, /*#__PURE__*/React.createElement(View, {
+    style: bulkRoleStyles.roleSelectionContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: bulkRoleStyles.heading
+  }, showRolesSelectionView === RoleSelection.TARGET ? 'Select Target Role' : 'Select Role to Change'), /*#__PURE__*/React.createElement(ScrollView, {
+    centerContent: true,
+    contentContainerStyle: bulkRoleStyles.scrollContainer
+  }, roles.map(role => {
+    const selected = showRolesSelectionView === RoleSelection.TARGET ? role.name === (targetRole === null || targetRole === void 0 ? void 0 : targetRole.name) : rolesToChange.findIndex(roleToChange => roleToChange.name === role.name) >= 0;
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      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
+    }, role.name));
+  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: bulkRoleStyles.roleSelectionDone,
+    onPress: () => setShowRolesSelectionView(null)
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: bulkRoleStyles.roleSelectionDoneText
+  }, "Done")))) : null);
+};
+const bulkRoleStyles = StyleSheet.create({
+  container: {
+    padding: 24,
+    position: 'relative',
+    height: 320
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginTop: 24
+  },
+  row: {
+    // flexGrow: 1,
+    marginVertical: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  label: {
+    color: COLORS.TEXT.HIGH_EMPHASIS
+  },
+  value: {
+    flex: 1,
+    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+    textAlign: 'right'
+  },
+  toggleContainer: {
+    width: 160,
+    borderRadius: 6,
+    backgroundColor: COLORS.SECONDARY.DARK,
+    flexDirection: 'row',
+    paddingVertical: 2,
+    paddingHorizontal: 2
+  },
+  toggleItem: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 6
+  },
+  toggleActiveItem: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: COLORS.SECONDARY.DEFAULT
+  },
+  btn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginLeft: 4
+  },
+  chevronIcon: {
+    color: COLORS.TEXT.MEDIUM_EMPHASIS
+  },
+  roleSelectionBackdrop: {
+    position: 'absolute',
+    top: 24,
+    left: 24,
+    width: '100%',
+    height: '100%',
+    shadowColor: COLORS.SURFACE.LIGHT,
+    shadowOpacity: 0.5,
+    shadowRadius: 24,
+    padding: 8
+  },
+  roleSelectionContainer: {
+    flex: 1,
+    padding: 12,
+    backgroundColor: COLORS.SURFACE.LIGHT,
+    borderRadius: 8,
+    borderWidth: 0.5,
+    borderColor: COLORS.BORDER.LIGHT
+  },
+  heading: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    marginVertical: 4,
+    marginLeft: 4
+  },
+  scrollContainer: {
+    paddingHorizontal: 12
+  },
+  checkboxContainer: {
+    marginRight: 12,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  checkboxLabel: {
+    color: COLORS.TEXT.MEDIUM_EMPHASIS
+  },
+  roleBtn: {
+    paddingVertical: 12,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  roleSelectionDone: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 4,
+    paddingVertical: 6
+  },
+  roleSelectionDoneText: {
+    fontSize: 14,
+    lineHeight: 22,
+    fontFamily: 'Inter-Medium',
+    color: COLORS.TEXT.HIGH_EMPHASIS
+  }
+});
+//# sourceMappingURL=Modals.js.map