npm - @100mslive/react-native-room-kit - Versions diffs - 0.0.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1111) hide show

package/lib/commonjs/components/Modals.js ADDED Viewed

@@ -0,0 +1,1640 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SaveScreenshot = exports.RtcStatsModal = exports.RecordingModal = exports.RealTime = exports.LeaveRoomModal = exports.HlsStreamingModal = exports.EndRoomModal = exports.EndHlsModal = exports.ChangeVolumeModal = exports.ChangeTrackStateModal = exports.ChangeTrackStateForRoleModal = exports.ChangeSortingModal = exports.ChangeRoleModal = exports.ChangeRoleAccepteModal = exports.ChangeNameModal = exports.ChangeLayoutModal = exports.ChangeBulkRoleModal = exports.ChangeAudioOutputModal = exports.ChangeAudioModeModal = exports.ChangeAudioMixingModeModal = exports.ChangeAspectRatio = exports.AudioShareSetVolumeModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSimpleToast = _interopRequireDefault(require("react-native-simple-toast"));
+var _reactRedux = require("react-redux");
+var _reactNativeHms = require("@100mslive/react-native-hms");
+var _Feather = _interopRequireDefault(require("react-native-vector-icons/Feather"));
+var _Entypo = _interopRequireDefault(require("react-native-vector-icons/Entypo"));
+var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
+var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
+var _reactNativeSlider = require("@miblanchard/react-native-slider");
+var _rnFetchBlob = _interopRequireDefault(require("rn-fetch-blob"));
+var _reactNativeFs = _interopRequireDefault(require("react-native-fs"));
+var _reactNativeShare = _interopRequireDefault(require("react-native-share"));
+var _styles = require("./styles");
+var _CustomButton = require("./CustomButton");
+var _CustomInput = require("./CustomInput");
+var _MenuModal = require("./MenuModal");
+var _Picker = require("./Picker");
+var _actions = require("../redux/actions");
+var _functions = require("../utils/functions");
+var _types = require("../utils/types");
+var _theme = require("../utils/theme");
+var _SwitchRow = require("./SwitchRow");
+var _hooksUtil = require("../hooks-util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const ChangeRoleModal = _ref => {
+  let {
+    cancelModal
+  } = _ref;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const peer = (0, _reactRedux.useSelector)(state => state.app.peerToUpdate);
+  const roles = (0, _reactRedux.useSelector)(state => state.hmsStates.roles);
+  const [newRole, setNewRole] = (0, _react.useState)(peer === null || peer === void 0 ? void 0 : peer.role);
+  const [request, setRequest] = (0, _react.useState)(false);
+  const [visible, setVisible] = (0, _react.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);
+      _reactNativeSimpleToast.default.showWithGravity(e.message, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
+    });
+    cancelModal();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Change Role"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalDescription
+  }, "Change the role of '", peer === null || peer === void 0 ? void 0 : peer.name, "' to"), /*#__PURE__*/_react.default.createElement(_MenuModal.Menu, {
+    visible: visible,
+    anchor: /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      style: _styles.styles.participantChangeRoleContainer,
+      onPress: showMenu
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.participantFilterText,
+      numberOfLines: 1
+    }, newRole === null || newRole === void 0 ? void 0 : newRole.name), /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
+      name: visible ? 'arrow-drop-up' : 'arrow-drop-down',
+      style: _styles.styles.participantFilterIcon,
+      size: 24
+    })),
+    onRequestClose: hideMenu,
+    style: _styles.styles.participantsMenuContainer
+  }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
+    return /*#__PURE__*/_react.default.createElement(_MenuModal.MenuItem, {
+      onPress: () => {
+        hideMenu();
+        setNewRole(knownRole);
+      },
+      key: knownRole.name
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _styles.styles.participantMenuItem
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.participantMenuItemName
+    }, knownRole === null || knownRole === void 0 ? void 0 : knownRole.name)));
+  })), !(peer !== null && peer !== void 0 && peer.isLocal) && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.roleChangeModalPermissionContainer,
+    onPress: () => {
+      setRequest(!request);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, request && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, "Request permission from the user")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeRole,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeRoleModal = ChangeRoleModal;
+const SaveScreenshot = _ref2 => {
+  let {
+    imageSource,
+    cancelModal
+  } = _ref2;
+  const peer = (0, _reactRedux.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 = _reactNative.Platform.OS === 'ios' ? _rnFetchBlob.default.fs.dirs.DocumentDir : _rnFetchBlob.default.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 (0, _functions.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
+        _reactNative.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 && _reactNative.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 (_reactNative.Platform.OS === 'android') {
+              await _reactNativeFs.default.copyFile(source,
+              // Source Dir
+              targetLocation // Target Dir
+              );
+            }
+          }
+          // if source is not local file, then we write to target path
+          else {
+            await _rnFetchBlob.default.fs.writeFile(targetLocation,
+            // Target Dir
+            source.replace('data:image/png;base64,', ''),
+            // Data to write to "Target Dir"
+            'base64');
+          }
+          _reactNativeShare.default.open({
+            url: 'file://' + targetLocation
+          }).then(_ref3 => {
+            let {
+              message
+            } = _ref3;
+            if (message.includes('SaveToCameraRoll')) {
+              _reactNativeSimpleToast.default.showWithGravity('Snapshot has been saved successfully', _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.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 (_reactNative.Platform.OS === 'android') {
+              _reactNativeSimpleToast.default.showWithGravity('Snapshot has been saved successfully', _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
+              cancelModal();
+            }
+          });
+        });
+      }
+    } catch (error) {
+      console.warn('Snapshot Save Error: ', error);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [{
+      flexGrow: 1
+    }, _styles.styles.volumeModalContainer]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, peer ? `${peer.name}'s Snapshot` : 'Snapshot'), imageSource ? /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: imageSource,
+    style: _styles.styles.screenshotImage,
+    resizeMode: "contain"
+  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: [_styles.styles.roleChangeModalCancelButton, {
+      width: '40%'
+    }],
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Save to Disk",
+    onPress: saveToDisk,
+    viewStyle: [_styles.styles.roleChangeModalSuccessButton, {
+      width: '56%'
+    }],
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.SaveScreenshot = SaveScreenshot;
+const ChangeVolumeModal = _ref4 => {
+  let {
+    cancelModal
+  } = _ref4;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const peer = (0, _reactRedux.useSelector)(state => state.app.peerToUpdate);
+  const [volume, setVolume] = (0, _react.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.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Set Volume"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalSlider
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalDescription
+  }, "Volume: ", volume), /*#__PURE__*/_react.default.createElement(_reactNativeSlider.Slider, {
+    value: volume,
+    maximumValue: 10,
+    minimumValue: 0,
+    step: 1,
+    onValueChange: value => setVolume(value[0])
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeVolume,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeVolumeModal = ChangeVolumeModal;
+const ChangeNameModal = _ref5 => {
+  let {
+    cancelModal
+  } = _ref5;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const peer = (0, _reactRedux.useSelector)(state => state.app.peerToUpdate);
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const [name, setName] = (0, _react.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((0, _actions.saveUserData)({
+          userName: name
+        }));
+        console.log('Change Name Success: ', d);
+      }).catch(e => console.log('Change Name Error: ', e));
+    }
+    cancelModal();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Change Name"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalSlider
+  }, /*#__PURE__*/_react.default.createElement(_CustomInput.CustomInput, {
+    value: name,
+    onChangeText: setName,
+    inputStyle: _styles.styles.participantChangeNameInput,
+    placeholderTextColor: _theme.COLORS.TEXT.DISABLED,
+    placeholder: "Find what you\u2019re looking for"
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeName,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeNameModal = ChangeNameModal;
+const RtcStatsModal = () => {
+  var _currentTrack$track;
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const instance = (0, _reactRedux.useSelector)(state => state.user.hmsInstance);
+  const showStatsOnTiles = (0, _reactRedux.useSelector)(state => state.app.joinConfig.showStats);
+  const [localPeer, setLocalPeer] = (0, _react.useState)(null);
+  const [remotePeers, setRemotePeers] = (0, _react.useState)([]);
+  const [tracksListModalVisible, setTracksListModalVisible] = (0, _react.useState)(false);
+  const [currentTrack, setCurrentTrack] = (0, _react.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
+  (0, _react.useEffect)(() => {
+    if (instance) {
+      const updateLocalPeer = async () => {
+        setLocalPeer(await instance.getLocalPeer());
+      };
+      updateLocalPeer();
+    }
+  }, [instance]);
+  // Getting Remote Peers from hms instance
+  (0, _react.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
+  (0, _react.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 = (0, _reactRedux.useSelector)(state => selectedTrackId ? state.app.rtcStats[selectedTrackId] : null);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.participantContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.participantsHeaderContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.participantsHeading
+  }, "Stats for Nerds")), /*#__PURE__*/_react.default.createElement(_SwitchRow.SwitchRow, {
+    text: "Show Stats on Tiles",
+    value: showStatsOnTiles,
+    onChange: value => dispatch((0, _actions.changeShowStats)(value))
+  }), /*#__PURE__*/_react.default.createElement(_MenuModal.Menu, {
+    visible: tracksListModalVisible,
+    anchor: /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      style: _styles.styles.statsModalMenu,
+      onPress: showMenu
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.participantFilterText,
+      numberOfLines: 1
+    }, (currentTrack === null || currentTrack === void 0 ? void 0 : currentTrack.name) ?? 'Choose'), /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
+      name: tracksListModalVisible ? 'arrow-drop-up' : 'arrow-drop-down',
+      style: _styles.styles.participantFilterIcon,
+      size: 24
+    })),
+    onRequestClose: hideMenu,
+    style: _styles.styles.participantsMenuContainer
+  }, statsList.map(trackObj => {
+    var _trackObj$track;
+    return /*#__PURE__*/_react.default.createElement(_MenuModal.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.default.createElement(_reactNative.View, {
+      style: _styles.styles.participantMenuItem
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.participantMenuItemName
+    }, trackObj === null || trackObj === void 0 ? void 0 : trackObj.name)));
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    contentContainerStyle: Array.isArray(rtcStatsData) ? null : _styles.styles.statsModalCardContainer
+  }, rtcStatsData ? Array.isArray(rtcStatsData) ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, rtcStatsData.map(rtcStatsItem => {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: {
+        marginBottom: 12
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.statsModalCardDescription
+    }, rtcStatsItem.layer), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _styles.styles.statsModalCardContainer
+    }, Object.entries(rtcStatsItem).filter(item => item[0] !== 'layer').map(item => {
+      const [key, value] = item;
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _styles.styles.statsModalCard,
+        key: key
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: _styles.styles.statsModalCardHeading
+      }, key), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: _styles.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.default.createElement(_reactNative.View, {
+      style: _styles.styles.statsModalCard,
+      key: key
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.statsModalCardHeading
+    }, key), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.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));
+};
+exports.RtcStatsModal = RtcStatsModal;
+const LeaveRoomModal = _ref6 => {
+  let {
+    onSuccess,
+    cancelModal
+  } = _ref6;
+  const onLeave = () => {
+    cancelModal();
+    onSuccess();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.participantMenuItem
+  }, /*#__PURE__*/_react.default.createElement(_Feather.default, {
+    name: "log-out",
+    style: _styles.styles.participantMenuItemIcon,
+    size: 24
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Leave Studio")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalDescription
+  }, "Others will continue after you leave. You can join the studio again.")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Don\u2019t Leave",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Leave",
+    onPress: onLeave,
+    viewStyle: [_styles.styles.roleChangeModalSuccessButton, _styles.styles.errorContainer],
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.LeaveRoomModal = LeaveRoomModal;
+const EndRoomModal = _ref7 => {
+  let {
+    onSuccess,
+    cancelModal
+  } = _ref7;
+  const onEnd = () => {
+    cancelModal();
+    onSuccess();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.participantMenuItem
+  }, /*#__PURE__*/_react.default.createElement(_Feather.default, {
+    name: "alert-triangle",
+    style: [_styles.styles.participantMenuItemIcon, _styles.styles.error],
+    size: 24
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalHeading, _styles.styles.error]
+  }, "End Session")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalDescription
+  }, "The session will end for everyone and all the activities will stop. You can\u2019t undo this action.")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Don\u2019t End",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "End Session",
+    onPress: onEnd,
+    viewStyle: [_styles.styles.roleChangeModalSuccessButton, _styles.styles.errorContainer],
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.EndRoomModal = EndRoomModal;
+const ChangeAudioOutputModal = _ref8 => {
+  let {
+    cancelModal
+  } = _ref8;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const [currentOutputDevice, setCurrentOutputDevice] = (0, _react.useState)(_reactNativeHms.HMSAudioDevice.SPEAKER_PHONE);
+  const [audioOutputDevicesList, setAudioOutputDevicesList] = (0, _react.useState)([]);
+  const switchAudioOutput = () => {
+    instance === null || instance === void 0 ? void 0 : instance.switchAudioOutput(currentOutputDevice);
+    cancelModal();
+  };
+  (0, _react.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.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Switch Audio Output"), audioOutputDevicesList.map(device => {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      key: device,
+      style: _styles.styles.roleChangeModalPermissionContainer,
+      onPress: () => {
+        setCurrentOutputDevice(device);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _styles.styles.roleChangeModalCheckBox
+    }, currentOutputDevice === device && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+      name: "check",
+      style: _styles.styles.roleChangeModalCheck,
+      size: 10
+    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.roleChangeModalPermission
+    }, device));
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: switchAudioOutput,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeAudioOutputModal = ChangeAudioOutputModal;
+const ChangeAspectRatio = _ref9 => {
+  let {
+    cancelModal
+  } = _ref9;
+  const {
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const hlsPlayerAspectRatio = (0, _reactRedux.useSelector)(state => state.app.hlsAspectRatio);
+  const [selectedRatio, setSelectedRatio] = (0, _react.useState)(hlsPlayerAspectRatio);
+  const handleChangePress = () => {
+    cancelModal();
+    if (hlsPlayerAspectRatio.id !== selectedRatio.id) {
+      dispatch((0, _actions.changeHLSAspectRatio)(selectedRatio));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Change Aspect Ratio"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalDescription
+  }, "Current: ", hlsPlayerAspectRatio.id), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    style: {
+      maxHeight: height * 0.4
+    }
+  }, _types.SUPPORTED_ASPECT_RATIOS.map(ratio => {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      key: ratio.id,
+      style: _styles.styles.roleChangeModalPermissionContainer,
+      onPress: () => setSelectedRatio(ratio)
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _styles.styles.roleChangeModalCheckBox
+    }, selectedRatio.id === ratio.id ? /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+      name: "check",
+      style: _styles.styles.roleChangeModalCheck,
+      size: 10
+    }) : null), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.roleChangeModalPermission
+    }, ratio.id));
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: handleChangePress,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeAspectRatio = ChangeAspectRatio;
+const ChangeAudioModeModal = _ref10 => {
+  let {
+    cancelModal,
+    audioMode,
+    setAudioMode
+  } = _ref10;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const [currentAudioMode, setCurrentAudioMode] = (0, _react.useState)(audioMode);
+  const AudioModeList = ['MODE_NORMAL', 'MODE_RINGTONE', 'MODE_IN_CALL', 'MODE_IN_COMMUNICATION', 'MODE_CALL_SCREENING'];
+  const switchAudioMode = () => {
+    instance === null || instance === void 0 ? void 0 : instance.setAudioMode(currentAudioMode);
+    setAudioMode(currentAudioMode);
+    cancelModal();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Switch Audio Output"), AudioModeList.map(mode => {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      key: mode,
+      style: _styles.styles.roleChangeModalPermissionContainer,
+      onPress: () => {
+        setCurrentAudioMode(AudioModeList.indexOf(mode));
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _styles.styles.roleChangeModalCheckBox
+    }, currentAudioMode === AudioModeList.indexOf(mode) && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+      name: "check",
+      style: _styles.styles.roleChangeModalCheck,
+      size: 10
+    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.roleChangeModalPermission
+    }, mode));
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: switchAudioMode,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeAudioModeModal = ChangeAudioModeModal;
+const ChangeAudioMixingModeModal = _ref11 => {
+  let {
+    newAudioMixingMode,
+    cancelModal,
+    setNewAudioMixingMode
+  } = _ref11;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const changeAudioMixingMode = async () => {
+    await (instance === null || instance === void 0 ? void 0 : instance.setAudioMixingMode(newAudioMixingMode));
+    cancelModal();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Change Audio Mixing Mode"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.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(_reactNativeHms.HMSAudioMixingMode).map(audioMixingMode => {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      key: audioMixingMode,
+      style: _styles.styles.roleChangeModalPermissionContainer,
+      onPress: () => {
+        setNewAudioMixingMode(audioMixingMode);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _styles.styles.roleChangeModalCheckBox
+    }, newAudioMixingMode === audioMixingMode && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+      name: "check",
+      style: _styles.styles.roleChangeModalCheck,
+      size: 10
+    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.roleChangeModalPermission
+    }, audioMixingMode));
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeAudioMixingMode,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeAudioMixingModeModal = ChangeAudioMixingModeModal;
+const ChangeSortingModal = _ref12 => {
+  let {
+    data,
+    selectedItem,
+    onItemSelected,
+    cancelModal
+  } = _ref12;
+  const [sortingType, setSortingType] = (0, _react.useState)(selectedItem || _types.SortingType.DEFAULT);
+  const changeSorting = () => {
+    onItemSelected(sortingType);
+    cancelModal();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Sorting Style"), /*#__PURE__*/_react.default.createElement(_Picker.CustomPicker, {
+    data: data,
+    selectedItem: sortingType,
+    onItemSelected: setSortingType,
+    viewStyle: _styles.styles.picker
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.sortingButtonContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeSorting,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeSortingModal = ChangeSortingModal;
+const ChangeLayoutModal = _ref13 => {
+  let {
+    data,
+    selectedItem,
+    onItemSelected,
+    cancelModal
+  } = _ref13;
+  const [layout, setLayout] = (0, _react.useState)(selectedItem);
+  const changeLayout = () => {
+    onItemSelected(layout);
+    cancelModal();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Layout Style"), /*#__PURE__*/_react.default.createElement(_Picker.CustomPicker, {
+    data: data,
+    selectedItem: layout,
+    onItemSelected: setLayout,
+    viewStyle: _styles.styles.picker
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.sortingButtonContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeLayout,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeLayoutModal = ChangeLayoutModal;
+const ChangeTrackStateForRoleModal = _ref14 => {
+  var _localPeerRole$permis, _localPeerRole$permis2;
+  let {
+    cancelModal
+  } = _ref14;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const roles = (0, _reactRedux.useSelector)(state => state.hmsStates.roles);
+  const localPeerRole = (0, _reactRedux.useSelector)(state => {
+    var _state$hmsStates$loca;
+    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.role;
+  });
+  const [role, setRole] = (0, _react.useState)(localPeerRole);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const [trackType, setTrackType] = (0, _react.useState)(_reactNativeHms.HMSTrackType.VIDEO);
+  const [trackState, setTrackState] = (0, _react.useState)(false);
+  const hideMenu = () => setVisible(false);
+  const showMenu = () => setVisible(true);
+  const changeTrackState = async () => {
+    const source = _reactNativeHms.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.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Change Track State For Role"), /*#__PURE__*/_react.default.createElement(_MenuModal.Menu, {
+    visible: visible,
+    anchor: /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      style: _styles.styles.participantChangeRoleContainer,
+      onPress: showMenu
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.participantFilterText,
+      numberOfLines: 1
+    }, role === null || role === void 0 ? void 0 : role.name), /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
+      name: visible ? 'arrow-drop-up' : 'arrow-drop-down',
+      style: _styles.styles.participantFilterIcon,
+      size: 24
+    })),
+    onRequestClose: hideMenu,
+    style: _styles.styles.participantsMenuContainer
+  }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
+    return /*#__PURE__*/_react.default.createElement(_MenuModal.MenuItem, {
+      onPress: () => {
+        hideMenu();
+        setRole(knownRole);
+      },
+      key: knownRole.name
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _styles.styles.participantMenuItem
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _styles.styles.participantMenuItemName
+    }, knownRole === null || knownRole === void 0 ? void 0 : knownRole.name)));
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.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.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.changeTrackStateRoleOption,
+    onPress: () => setTrackState(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, trackState && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, "MUTE")), (localPeerRole === null || localPeerRole === void 0 || (_localPeerRole$permis2 = localPeerRole.permissions) === null || _localPeerRole$permis2 === void 0 ? void 0 : _localPeerRole$permis2.unmute) && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.changeTrackStateRoleOption,
+    onPress: () => setTrackState(false)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, !trackState && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, "UNMUTE"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.changeTrackStateRoleOptionHeading
+  }, 'Track Type: '), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.changeTrackStateRoleOption,
+    onPress: () => setTrackType(_reactNativeHms.HMSTrackType.AUDIO)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, trackType === _reactNativeHms.HMSTrackType.AUDIO && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, _reactNativeHms.HMSTrackType.AUDIO)), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.changeTrackStateRoleOption,
+    onPress: () => setTrackType(_reactNativeHms.HMSTrackType.VIDEO)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, trackType === _reactNativeHms.HMSTrackType.VIDEO && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, _reactNativeHms.HMSTrackType.VIDEO))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeTrackState,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeTrackStateForRoleModal = ChangeTrackStateForRoleModal;
+const ChangeTrackStateModal = _ref15 => {
+  var _roleChangeRequest$re, _roleChangeRequest$su2;
+  let {
+    roleChangeRequest,
+    cancelModal
+  } = _ref15;
+  const localPeer = (0, _reactRedux.useSelector)(state => state.hmsStates.localPeer);
+  const changeLayout = () => {
+    var _roleChangeRequest$su;
+    if ((roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$su = roleChangeRequest.suggestedRole) === null || _roleChangeRequest$su === void 0 ? void 0 : _roleChangeRequest$su.toLocaleLowerCase()) === 'video') {
+      var _localPeer$localVideo;
+      localPeer === null || localPeer === void 0 || (_localPeer$localVideo = localPeer.localVideoTrack()) === null || _localPeer$localVideo === void 0 ? void 0 : _localPeer$localVideo.setMute(false);
+    } 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.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Change Track State Request"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.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.default.createElement(_reactNative.View, {
+    style: _styles.styles.sortingButtonContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Reject",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Accept",
+    onPress: changeLayout,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeTrackStateModal = ChangeTrackStateModal;
+const HlsStreamingModal = _ref16 => {
+  let {
+    cancelModal
+  } = _ref16;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const roomID = (0, _reactRedux.useSelector)(state => state.user.roomID);
+  const [hlsStreamingDetails, setHLSStreamingDetails] = (0, _react.useState)({
+    meetingUrl: roomID ? roomID + '?skip_preview=true' : '',
+    metadata: ''
+  });
+  const [startHlsRetry, setStartHlsRetry] = (0, _react.useState)(true);
+  const [hlsRecordingDetails, setHLSRecordingDetails] = (0, _react.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 _reactNativeHms.HMSHLSConfig({
+          hlsRecordingConfig: hlsRecordingDetails,
+          meetingURLVariants: [hlsStreamingDetails]
+        });
+        instance === null || instance === void 0 ? void 0 : instance.startHLSStreaming(hmsHLSConfig).then(d => console.log('Start HLS Streaming Success: ', d)).catch(e => console.log('Start HLS Streaming Error: ', e));
+      } else {
+        console.log('Start HLS Streaming Error: ', err);
+      }
+    });
+    cancelModal();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "HLS Streaming Details"), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
+    onChangeText: value => {
+      setHLSStreamingDetails({
+        ...hlsStreamingDetails,
+        meetingUrl: value
+      });
+    },
+    placeholderTextColor: _theme.COLORS.SECONDARY.DEFAULT,
+    placeholder: "Enter meeting url",
+    style: _styles.styles.input,
+    defaultValue: hlsStreamingDetails.meetingUrl,
+    returnKeyType: "done",
+    multiline: true,
+    blurOnSubmit: true
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.checkboxButtonContainer,
+    onPress: () => {
+      setHLSRecordingDetails({
+        ...hlsRecordingDetails,
+        singleFilePerLayer: !hlsRecordingDetails.singleFilePerLayer
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, hlsRecordingDetails.singleFilePerLayer && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, "SingleFilePerLayer")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.checkboxButtonContainer,
+    onPress: () => {
+      setHLSRecordingDetails({
+        ...hlsRecordingDetails,
+        videoOnDemand: !hlsRecordingDetails.videoOnDemand
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, hlsRecordingDetails.videoOnDemand && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, "VideoOnDemand")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Start",
+    onPress: changeLayout,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.HlsStreamingModal = HlsStreamingModal;
+const RecordingModal = _ref17 => {
+  var _recordingDetails$res, _recordingDetails$res2, _recordingDetails$res4, _recordingDetails$res5;
+  let {
+    recordingModal,
+    setModalVisible
+  } = _ref17;
+  const instance = (0, _hooksUtil.useHMSInstance)();
+  const roomID = (0, _reactRedux.useSelector)(state => state.user.roomID);
+  const [resolutionDetails, setResolutionDetails] = (0, _react.useState)(false);
+  const [recordingDetails, setRecordingDetails] = (0, _react.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(_types.ModalTypes.DEFAULT);
+  };
+  return recordingModal ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Recording Details"), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
+    onChangeText: value => {
+      setRecordingDetails({
+        ...recordingDetails,
+        meetingURL: value
+      });
+    },
+    placeholderTextColor: _theme.COLORS.SECONDARY.DEFAULT,
+    placeholder: "Enter meeting url",
+    style: _styles.styles.input,
+    defaultValue: recordingDetails.meetingURL || '',
+    returnKeyType: "done",
+    multiline: true,
+    blurOnSubmit: true
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
+    onChangeText: value => {
+      if (value === '') {
+        setRecordingDetails({
+          ...recordingDetails,
+          rtmpURLs: undefined
+        });
+      } else {
+        setRecordingDetails({
+          ...recordingDetails,
+          rtmpURLs: [value]
+        });
+      }
+    },
+    placeholderTextColor: _theme.COLORS.SECONDARY.DEFAULT,
+    placeholder: "Enter rtmp url",
+    style: _styles.styles.input,
+    defaultValue: recordingDetails.rtmpURLs ? recordingDetails.rtmpURLs[0] : '',
+    returnKeyType: "done",
+    multiline: true,
+    blurOnSubmit: true
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.checkboxButtonContainer,
+    onPress: () => {
+      setRecordingDetails({
+        ...recordingDetails,
+        record: !recordingDetails.record
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, recordingDetails.record && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, "Record")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: _styles.styles.checkboxButtonContainer,
+    onPress: () => {
+      setResolutionDetails(!resolutionDetails);
+      if (!resolutionDetails) {
+        setModalVisible(_types.ModalTypes.RESOLUTION, true);
+        setRecordingDetails({
+          ...recordingDetails,
+          resolution: {
+            height: 720,
+            width: 1280
+          }
+        });
+      } else {
+        setRecordingDetails({
+          ...recordingDetails,
+          resolution: undefined
+        });
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalCheckBox
+  }, resolutionDetails && /*#__PURE__*/_react.default.createElement(_Entypo.default, {
+    name: "check",
+    style: _styles.styles.roleChangeModalCheck,
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalPermission
+  }, "Resolution")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: () => setModalVisible(_types.ModalTypes.DEFAULT),
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Start",
+    onPress: changeLayout,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }))) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Resolution Details"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.resolutionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.resolutionDetails
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.interRegular
+  }, "Height :"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.resolutionValue
+  }, (_recordingDetails$res = recordingDetails.resolution) === null || _recordingDetails$res === void 0 ? void 0 : _recordingDetails$res.height)), /*#__PURE__*/_react.default.createElement(_reactNativeSlider.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.default.createElement(_reactNative.View, {
+    style: _styles.styles.resolutionDetails
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.interRegular
+  }, "Width :"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.resolutionValue
+  }, (_recordingDetails$res4 = recordingDetails.resolution) === null || _recordingDetails$res4 === void 0 ? void 0 : _recordingDetails$res4.width)), /*#__PURE__*/_react.default.createElement(_reactNativeSlider.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.default.createElement(_reactNative.View, {
+    style: _styles.styles.sortingButtonContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Back",
+    onPress: () => setModalVisible(_types.ModalTypes.RECORDING, true),
+    viewStyle: _styles.styles.backButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.RecordingModal = RecordingModal;
+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.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModal
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Role Change Details"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.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.default.createElement(_reactNative.View, {
+    style: _styles.styles.sortingButtonContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Reject",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Accept",
+    onPress: changeLayout,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.ChangeRoleAccepteModal = ChangeRoleAccepteModal;
+const EndHlsModal = _ref19 => {
+  let {
+    onSuccess,
+    cancelModal
+  } = _ref19;
+  const onEnd = () => {
+    cancelModal();
+    onSuccess();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.participantMenuItem
+  }, /*#__PURE__*/_react.default.createElement(_Feather.default, {
+    name: "alert-triangle",
+    style: [_styles.styles.participantMenuItemIcon, _styles.styles.error],
+    size: 24
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [_styles.styles.roleChangeModalHeading, _styles.styles.error]
+  }, "End live stream for all?")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalDescription
+  }, "Your stream will end and everone will go offline immediately in this room. You can\u2019t undo this action.")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Don\u2019t End",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "End Stream",
+    onPress: onEnd,
+    viewStyle: [_styles.styles.roleChangeModalSuccessButton, _styles.styles.errorContainer],
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.EndHlsModal = EndHlsModal;
+const RealTime = _ref20 => {
+  let {
+    startedAt
+  } = _ref20;
+  const [hour, setHour] = (0, _react.useState)(0);
+  const [minute, setMinute] = (0, _react.useState)(0);
+  const [second, setSecond] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (startedAt) {
+      const millisecs = Date.now() - startedAt.getTime();
+      const [h, min, sec] = (0, _functions.getTime)(Math.abs(millisecs));
+      if (h > 0) {
+        setHour(h);
+      }
+      if (min > 0) {
+        setMinute(min);
+      }
+      if (sec > 0) {
+        setSecond(sec);
+      }
+    }
+  }, [startedAt]);
+  (0, _react.useEffect)(() => {
+    const updatePostInfo = setInterval(() => {
+      setSecond(sec => sec + 1);
+    }, 1000);
+    return () => {
+      clearInterval(updatePostInfo);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (second === 60) {
+      setSecond(0);
+      setMinute(min => min + 1);
+    }
+  }, [second]);
+  (0, _react.useEffect)(() => {
+    if (minute === 60) {
+      setMinute(0);
+      setHour(hr => hr + 1);
+    }
+  }, [minute]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.liveTextContainer
+  }, hour > 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.liveTimeText
+  }, hour < 10 ? '0' + hour : hour, ":"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.liveTimeText
+  }, minute < 10 ? '0' + minute : minute, ":"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.liveTimeText
+  }, second < 10 ? '0' + second : second));
+};
+exports.RealTime = RealTime;
+const AudioShareSetVolumeModal = _ref21 => {
+  let {
+    success,
+    cancel
+  } = _ref21;
+  const [volume, setVolume] = (0, _react.useState)(0);
+  const changeVolume = () => {
+    success(volume);
+    cancel();
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Set Volume"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.volumeModalSlider
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalDescription
+  }, "Volume: ", volume), /*#__PURE__*/_react.default.createElement(_reactNativeSlider.Slider, {
+    value: volume,
+    maximumValue: 1,
+    minimumValue: 0,
+    step: 0.1,
+    onValueChange: value => setVolume(value[0])
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancel,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Change",
+    onPress: changeVolume,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })));
+};
+exports.AudioShareSetVolumeModal = AudioShareSetVolumeModal;
+var RoleSelection = /*#__PURE__*/function (RoleSelection) {
+  RoleSelection["TARGET"] = "TARGET";
+  RoleSelection["TO_CHANGE"] = "TO_CHANGE";
+  return RoleSelection;
+}(RoleSelection || {});
+const ChangeBulkRoleModal = _ref22 => {
+  let {
+    cancelModal
+  } = _ref22;
+  const hmsInstance = (0, _reactRedux.useSelector)(state => state.user.hmsInstance);
+  const roles = (0, _reactRedux.useSelector)(state => state.hmsStates.roles);
+  const [showRolesSelectionView, setShowRolesSelectionView] = (0, _react.useState)(null);
+  const [targetRole, setTargetRole] = (0, _react.useState)(null);
+  const [rolesToChange, setRolesToChange] = (0, _react.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.default.createElement(_reactNative.View, {
+    style: bulkRoleStyles.container
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _styles.styles.roleChangeModalHeading
+  }, "Bulk Role Change"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: bulkRoleStyles.contentContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: bulkRoleStyles.row
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: bulkRoleStyles.label
+  }, "Select Roles to Change"), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: bulkRoleStyles.btn,
+    onPress: () => setShowRolesSelectionView(RoleSelection.TO_CHANGE)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: bulkRoleStyles.value,
+    numberOfLines: 1
+  }, rolesToChange.map(role => role.name).join(', ') || 'Select Roles'), /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
+    name: "chevron-right",
+    size: 16,
+    style: bulkRoleStyles.chevronIcon
+  }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: bulkRoleStyles.row
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: bulkRoleStyles.label
+  }, "Target Role"), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: bulkRoleStyles.btn,
+    onPress: () => setShowRolesSelectionView(RoleSelection.TARGET)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: bulkRoleStyles.value
+  }, targetRole ? targetRole.name : 'Select Role'), /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
+    name: "chevron-right",
+    size: 16,
+    style: bulkRoleStyles.chevronIcon
+  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _styles.styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: _styles.styles.roleChangeModalCancelButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.CustomButton, {
+    disabled: changeSubmitDisabled,
+    title: "Change",
+    onPress: changeRole,
+    viewStyle: _styles.styles.roleChangeModalSuccessButton,
+    textStyle: _styles.styles.roleChangeModalButtonText
+  })), showRolesSelectionView ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: bulkRoleStyles.roleSelectionBackdrop
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: bulkRoleStyles.roleSelectionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: bulkRoleStyles.heading
+  }, showRolesSelectionView === RoleSelection.TARGET ? 'Select Target Role' : 'Select Role to Change'), /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.TouchableOpacity, {
+      key: role.name,
+      style: bulkRoleStyles.roleBtn,
+      onPress: () => handleRoleSelection(role)
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: bulkRoleStyles.checkboxContainer
+    }, showRolesSelectionView === RoleSelection.TARGET ? /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
+      name: selected ? 'radiobox-marked' : 'radiobox-blank',
+      style: _styles.styles.roleChangeModalCheck,
+      size: 20
+    }) : /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
+      name: selected ? 'checkbox-outline' : 'checkbox-blank-outline',
+      style: _styles.styles.roleChangeModalCheck,
+      size: 24
+    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: bulkRoleStyles.checkboxLabel
+    }, role.name));
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: bulkRoleStyles.roleSelectionDone,
+    onPress: () => setShowRolesSelectionView(null)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: bulkRoleStyles.roleSelectionDoneText
+  }, "Done")))) : null);
+};
+exports.ChangeBulkRoleModal = ChangeBulkRoleModal;
+const bulkRoleStyles = _reactNative.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: _theme.COLORS.TEXT.HIGH_EMPHASIS
+  },
+  value: {
+    flex: 1,
+    color: _theme.COLORS.TEXT.MEDIUM_EMPHASIS,
+    textAlign: 'right'
+  },
+  toggleContainer: {
+    width: 160,
+    borderRadius: 6,
+    backgroundColor: _theme.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: _theme.COLORS.SECONDARY.DEFAULT
+  },
+  btn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginLeft: 4
+  },
+  chevronIcon: {
+    color: _theme.COLORS.TEXT.MEDIUM_EMPHASIS
+  },
+  roleSelectionBackdrop: {
+    position: 'absolute',
+    top: 24,
+    left: 24,
+    width: '100%',
+    height: '100%',
+    shadowColor: _theme.COLORS.SURFACE.LIGHT,
+    shadowOpacity: 0.5,
+    shadowRadius: 24,
+    padding: 8
+  },
+  roleSelectionContainer: {
+    flex: 1,
+    padding: 12,
+    backgroundColor: _theme.COLORS.SURFACE.LIGHT,
+    borderRadius: 8,
+    borderWidth: 0.5,
+    borderColor: _theme.COLORS.BORDER.LIGHT
+  },
+  heading: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: _theme.COLORS.TEXT.HIGH_EMPHASIS,
+    marginVertical: 4,
+    marginLeft: 4
+  },
+  scrollContainer: {
+    paddingHorizontal: 12
+  },
+  checkboxContainer: {
+    marginRight: 12,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  checkboxLabel: {
+    color: _theme.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: _theme.COLORS.TEXT.HIGH_EMPHASIS
+  }
+});
+//# sourceMappingURL=Modals.js.map