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

package/lib/module/components/Modals.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, TouchableOpacity, Text, ScrollView, TextInput, StyleSheet, Image, Platform, InteractionManager, useWindowDimensions } from 'react-native';
+import { View, TouchableOpacity, Text, ScrollView, TextInput, StyleSheet, Image, 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';
@@ -7,17 +7,13 @@ 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 { getTime } from '../utils/functions';
 import { ModalTypes, SUPPORTED_ASPECT_RATIOS, SortingType } from '../utils/types';
 import { COLORS } from '../utils/theme';
 import { SwitchRow } from './SwitchRow';
@@ -107,88 +103,6 @@ export const SaveScreenshot = _ref2 => {
     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
@@ -202,66 +116,18 @@ export const SaveScreenshot = _ref2 => {
   }) : null, /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(CustomButton, {
-    title: "Cancel",
+    title: "Done",
     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%'
+      width: '100%'
     }],
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeVolumeModal = _ref4 => {
+export const ChangeNameModal = _ref3 => {
   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;
+  } = _ref3;
   const instance = useHMSInstance();
   const peer = useSelector(state => state.app.peerToUpdate);
   const dispatch = useDispatch();
@@ -453,11 +319,11 @@ export const RtcStatsModal = () => {
     }, key === 'resolution' ? `Height: ${(value === null || value === void 0 ? void 0 : value.height) ?? 0}, Width: ${(value === null || value === void 0 ? void 0 : value.width) ?? 0}` : value));
   }) : null));
 };
-export const LeaveRoomModal = _ref6 => {
+export const LeaveRoomModal = _ref4 => {
   let {
     onSuccess,
     cancelModal
-  } = _ref6;
+  } = _ref4;
   const onLeave = () => {
     cancelModal();
     onSuccess();
@@ -490,11 +356,11 @@ export const LeaveRoomModal = _ref6 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const EndRoomModal = _ref7 => {
+export const EndRoomModal = _ref5 => {
   let {
     onSuccess,
     cancelModal
-  } = _ref7;
+  } = _ref5;
   const onEnd = () => {
     cancelModal();
     onSuccess();
@@ -527,10 +393,10 @@ export const EndRoomModal = _ref7 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeAudioOutputModal = _ref8 => {
+export const ChangeAudioOutputModal = _ref6 => {
   let {
     cancelModal
-  } = _ref8;
+  } = _ref6;
   const instance = useHMSInstance();
   const [currentOutputDevice, setCurrentOutputDevice] = useState(HMSAudioDevice.SPEAKER_PHONE);
   const [audioOutputDevicesList, setAudioOutputDevicesList] = useState([]);
@@ -579,10 +445,10 @@ export const ChangeAudioOutputModal = _ref8 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeAspectRatio = _ref9 => {
+export const ChangeAspectRatio = _ref7 => {
   let {
     cancelModal
-  } = _ref9;
+  } = _ref7;
   const {
     height
   } = useWindowDimensions();
@@ -633,12 +499,12 @@ export const ChangeAspectRatio = _ref9 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeAudioModeModal = _ref10 => {
+export const ChangeAudioModeModal = _ref8 => {
   let {
     cancelModal,
     audioMode,
     setAudioMode
-  } = _ref10;
+  } = _ref8;
   const instance = useHMSInstance();
   const [currentAudioMode, setCurrentAudioMode] = useState(audioMode);
   const AudioModeList = ['MODE_NORMAL', 'MODE_RINGTONE', 'MODE_IN_CALL', 'MODE_IN_COMMUNICATION', 'MODE_CALL_SCREENING'];
@@ -681,12 +547,12 @@ export const ChangeAudioModeModal = _ref10 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeAudioMixingModeModal = _ref11 => {
+export const ChangeAudioMixingModeModal = _ref9 => {
   let {
     newAudioMixingMode,
     cancelModal,
     setNewAudioMixingMode
-  } = _ref11;
+  } = _ref9;
   const instance = useHMSInstance();
   const changeAudioMixingMode = async () => {
     await (instance === null || instance === void 0 ? void 0 : instance.setAudioMixingMode(newAudioMixingMode));
@@ -728,13 +594,13 @@ export const ChangeAudioMixingModeModal = _ref11 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeSortingModal = _ref12 => {
+export const ChangeSortingModal = _ref10 => {
   let {
     data,
     selectedItem,
     onItemSelected,
     cancelModal
-  } = _ref12;
+  } = _ref10;
   const [sortingType, setSortingType] = useState(selectedItem || SortingType.DEFAULT);
   const changeSorting = () => {
     onItemSelected(sortingType);
@@ -763,13 +629,13 @@ export const ChangeSortingModal = _ref12 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeLayoutModal = _ref13 => {
+export const ChangeLayoutModal = _ref11 => {
   let {
     data,
     selectedItem,
     onItemSelected,
     cancelModal
-  } = _ref13;
+  } = _ref11;
   const [layout, setLayout] = useState(selectedItem);
   const changeLayout = () => {
     onItemSelected(layout);
@@ -798,11 +664,11 @@ export const ChangeLayoutModal = _ref13 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeTrackStateForRoleModal = _ref14 => {
+export const ChangeTrackStateForRoleModal = _ref12 => {
   var _localPeerRole$permis, _localPeerRole$permis2;
   let {
     cancelModal
-  } = _ref14;
+  } = _ref12;
   const instance = useHMSInstance();
   const roles = useSelector(state => state.hmsStates.roles);
   const localPeerRole = useSelector(state => {
@@ -917,12 +783,12 @@ export const ChangeTrackStateForRoleModal = _ref14 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const ChangeTrackStateModal = _ref15 => {
+export const ChangeTrackStateModal = _ref13 => {
   var _roleChangeRequest$re, _roleChangeRequest$su2;
   let {
     roleChangeRequest,
     cancelModal
-  } = _ref15;
+  } = _ref13;
   const localPeer = useSelector(state => state.hmsStates.localPeer);
   const changeLayout = () => {
     var _roleChangeRequest$su;
@@ -955,10 +821,10 @@ export const ChangeTrackStateModal = _ref15 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const HlsStreamingModal = _ref16 => {
+export const HlsStreamingModal = _ref14 => {
   let {
     cancelModal
-  } = _ref16;
+  } = _ref14;
   const instance = useHMSInstance();
   const roomID = useSelector(state => state.user.roomID);
   const [hlsStreamingDetails, setHLSStreamingDetails] = useState({
@@ -1049,15 +915,12 @@ export const HlsStreamingModal = _ref16 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const RecordingModal = _ref17 => {
-  var _recordingDetails$res, _recordingDetails$res2, _recordingDetails$res4, _recordingDetails$res5;
+export const RecordingModal = _ref15 => {
   let {
-    recordingModal,
     setModalVisible
-  } = _ref17;
+  } = _ref15;
   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
@@ -1066,7 +929,7 @@ export const RecordingModal = _ref17 => {
     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, {
+  return /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModal
   }, /*#__PURE__*/React.createElement(Text, {
     style: styles.roleChangeModalHeading
@@ -1121,35 +984,7 @@ export const RecordingModal = _ref17 => {
     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, {
+  }, "Record")), /*#__PURE__*/React.createElement(View, {
     style: styles.roleChangeModalPermissionContainer
   }, /*#__PURE__*/React.createElement(CustomButton, {
     title: "Cancel",
@@ -1161,70 +996,15 @@ export const RecordingModal = _ref17 => {
     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 => {
+export const ChangeRoleAccepteModal = _ref16 => {
   var _roleChangeRequest$re2, _roleChangeRequest$su3;
   let {
     instance,
     roleChangeRequest,
     cancelModal
-  } = _ref18;
+  } = _ref16;
   const changeLayout = () => {
     instance === null || instance === void 0 ? void 0 : instance.acceptRoleChange();
     cancelModal();
@@ -1249,11 +1029,11 @@ export const ChangeRoleAccepteModal = _ref18 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const EndHlsModal = _ref19 => {
+export const EndHlsModal = _ref17 => {
   let {
     onSuccess,
     cancelModal
-  } = _ref19;
+  } = _ref17;
   const onEnd = () => {
     cancelModal();
     onSuccess();
@@ -1286,10 +1066,10 @@ export const EndHlsModal = _ref19 => {
     textStyle: styles.roleChangeModalButtonText
   })));
 };
-export const RealTime = _ref20 => {
+export const RealTime = _ref18 => {
   let {
     startedAt
-  } = _ref20;
+  } = _ref18;
   const [hour, setHour] = useState(0);
   const [minute, setMinute] = useState(0);
   const [second, setSecond] = useState(0);
@@ -1338,53 +1118,15 @@ export const RealTime = _ref20 => {
     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 => {
+export const ChangeBulkRoleModal = _ref19 => {
   let {
     cancelModal
-  } = _ref22;
+  } = _ref19;
   const hmsInstance = useSelector(state => state.user.hmsInstance);
   const roles = useSelector(state => state.hmsStates.roles);
   const [showRolesSelectionView, setShowRolesSelectionView] = useState(null);