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

package/src/components/Modals.tsx

@@ -7,8 +7,6 @@ import {
   TextInput,
   StyleSheet,
   Image,
-  Platform,
-  InteractionManager,
   useWindowDimensions,
 } from 'react-native';
 import type { ImageURISource } from 'react-native';
@@ -34,24 +32,15 @@ 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 { changeHLSAspectRatio, changeShowStats } from '../redux/actions';
+import { getTime } from '../utils/functions';
 import {
   LayoutParams,
   ModalTypes,
@@ -176,106 +165,6 @@ export const SaveScreenshot = ({
     (state: RootState) => 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: string, peerName?: string) => {
-    // 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(({ message }) => {
-              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 (
     <View style={[{ flexGrow: 1 }, styles.volumeModalContainer]}>
       <Text style={styles.roleChangeModalHeading}>
@@ -290,116 +179,9 @@ export const SaveScreenshot = ({
       ) : null}
       <View style={styles.roleChangeModalPermissionContainer}>
         <CustomButton
-          title="Cancel"
-          onPress={cancelModal}
-          viewStyle={[styles.roleChangeModalCancelButton, { width: '40%' }]}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="Save to Disk"
-          onPress={saveToDisk}
-          viewStyle={[styles.roleChangeModalSuccessButton, { width: '56%' }]}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
-export const ChangeVolumeModal = ({
-  cancelModal,
-}: {
-  cancelModal: Function;
-}) => {
-  const instance = useHMSInstance();
-  const peer = useSelector((state: RootState) => state.app.peerToUpdate);
-  const [volume, setVolume] = useState<number>(0);
-
-  const changeVolume = () => {
-    if (peer?.audioTrack) {
-      instance?.setVolume(peer?.audioTrack, volume);
-    }
-    cancelModal();
-  };
-
-  return (
-    <View style={styles.volumeModalContainer}>
-      <Text style={styles.roleChangeModalHeading}>Set Volume</Text>
-      <View style={styles.volumeModalSlider}>
-        <Text style={styles.roleChangeModalDescription}>Volume: {volume}</Text>
-        <Slider
-          value={volume}
-          maximumValue={10}
-          minimumValue={0}
-          step={1}
-          onValueChange={(value: any) => setVolume(value[0])}
-        />
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Cancel"
-          onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="Change"
-          onPress={changeVolume}
-          viewStyle={styles.roleChangeModalSuccessButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
-export const ChangeNameModal = ({ cancelModal }: { cancelModal: Function }) => {
-  const instance = useHMSInstance();
-  const peer = useSelector((state: RootState) => state.app.peerToUpdate);
-  const dispatch = useDispatch();
-
-  const [name, setName] = useState<string>(peer?.name!);
-
-  const changeName = () => {
-    if (name.length > 0) {
-      instance
-        ?.changeName(name)
-        .then((d) => {
-          dispatch(
-            saveUserData({
-              userName: name,
-            })
-          );
-          console.log('Change Name Success: ', d);
-        })
-        .catch((e) => console.log('Change Name Error: ', e));
-    }
-    cancelModal();
-  };
-
-  return (
-    <View style={styles.volumeModalContainer}>
-      <Text style={styles.roleChangeModalHeading}>Change Name</Text>
-      <View style={styles.volumeModalSlider}>
-        <CustomInput
-          value={name}
-          onChangeText={setName}
-          inputStyle={styles.participantChangeNameInput}
-          placeholderTextColor={COLORS.TEXT.DISABLED}
-          placeholder="Find what you’re looking for"
-        />
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Cancel"
+          title="Done"
           onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="Change"
-          onPress={changeName}
-          viewStyle={styles.roleChangeModalSuccessButton}
+          viewStyle={[styles.roleChangeModalCancelButton, { width: '100%' }]}
           textStyle={styles.roleChangeModalButtonText}
         />
       </View>
@@ -674,56 +456,6 @@ export const LeaveRoomModal = ({
   );
 };
 
-export const EndRoomModal = ({
-  onSuccess,
-  cancelModal,
-}: {
-  onSuccess: Function;
-  cancelModal: Function;
-}) => {
-  const onEnd = () => {
-    cancelModal();
-    onSuccess();
-  };
-  return (
-    <View style={styles.volumeModalContainer}>
-      <View style={styles.participantMenuItem}>
-        <Feather
-          name="alert-triangle"
-          style={[styles.participantMenuItemIcon, styles.error]}
-          size={24}
-        />
-        <Text style={[styles.roleChangeModalHeading, styles.error]}>
-          End Session
-        </Text>
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <Text style={styles.roleChangeModalDescription}>
-          The session will end for everyone and all the activities will stop.
-          You can’t undo this action.
-        </Text>
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Don’t End"
-          onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="End Session"
-          onPress={onEnd}
-          viewStyle={[
-            styles.roleChangeModalSuccessButton,
-            styles.errorContainer,
-          ]}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
 export const ChangeAudioOutputModal = ({
   cancelModal,
 }: {
@@ -1423,15 +1155,12 @@ export const HlsStreamingModal = ({
 };
 
 export const RecordingModal = ({
-  recordingModal,
   setModalVisible,
 }: {
-  recordingModal: boolean;
   setModalVisible(modalType: ModalTypes, delay?: any): void;
 }) => {
   const instance = useHMSInstance();
   const roomID = useSelector((state: RootState) => state.user.roomID);
-  const [resolutionDetails, setResolutionDetails] = useState<boolean>(false);
   const [recordingDetails, setRecordingDetails] = useState<HMSRTMPConfig>({
     record: false,
     meetingURL: roomID ? roomID + '?token=beam_recording' : undefined,
@@ -1445,7 +1174,7 @@ export const RecordingModal = ({
     setModalVisible(ModalTypes.DEFAULT);
   };
 
-  return recordingModal ? (
+  return (
     <View style={styles.roleChangeModal}>
       <Text style={styles.roleChangeModalHeading}>Recording Details</Text>
       <TextInput
@@ -1498,38 +1227,6 @@ export const RecordingModal = ({
         </View>
         <Text style={styles.roleChangeModalPermission}>Record</Text>
       </TouchableOpacity>
-      <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,
-            });
-          }
-        }}
-      >
-        <View style={styles.roleChangeModalCheckBox}>
-          {resolutionDetails && (
-            <Entypo
-              name="check"
-              style={styles.roleChangeModalCheck}
-              size={10}
-            />
-          )}
-        </View>
-        <Text style={styles.roleChangeModalPermission}>Resolution</Text>
-      </TouchableOpacity>
       <View style={styles.roleChangeModalPermissionContainer}>
         <CustomButton
           title="Cancel"
@@ -1545,62 +1242,6 @@ export const RecordingModal = ({
         />
       </View>
     </View>
-  ) : (
-    <View style={styles.roleChangeModal}>
-      <Text style={styles.roleChangeModalHeading}>Resolution Details</Text>
-      <View style={styles.resolutionContainer}>
-        <View style={styles.resolutionDetails}>
-          <Text style={styles.interRegular}>Height :</Text>
-          <Text style={styles.resolutionValue}>
-            {recordingDetails.resolution?.height}
-          </Text>
-        </View>
-        <Slider
-          value={recordingDetails.resolution?.height}
-          maximumValue={1280}
-          minimumValue={480}
-          step={10}
-          onValueChange={(value: any) => {
-            setRecordingDetails({
-              ...recordingDetails,
-              resolution: {
-                height: parseInt(value),
-                width: recordingDetails.resolution?.width ?? 1280,
-              },
-            });
-          }}
-        />
-        <View style={styles.resolutionDetails}>
-          <Text style={styles.interRegular}>Width :</Text>
-          <Text style={styles.resolutionValue}>
-            {recordingDetails.resolution?.width}
-          </Text>
-        </View>
-        <Slider
-          value={recordingDetails.resolution?.width}
-          maximumValue={1280}
-          minimumValue={500}
-          step={10}
-          onValueChange={(value: any) => {
-            setRecordingDetails({
-              ...recordingDetails,
-              resolution: {
-                width: parseInt(value),
-                height: recordingDetails.resolution?.height ?? 720,
-              },
-            });
-          }}
-        />
-      </View>
-      <View style={styles.sortingButtonContainer}>
-        <CustomButton
-          title="Back"
-          onPress={() => setModalVisible(ModalTypes.RECORDING, true)}
-          viewStyle={styles.backButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
   );
 };
 
@@ -1757,51 +1398,6 @@ export const RealTime = ({ startedAt }: { startedAt?: Date }) => {
   );
 };
 
-export const AudioShareSetVolumeModal = ({
-  success,
-  cancel,
-}: {
-  success: Function;
-  cancel: Function;
-}) => {
-  const [volume, setVolume] = useState<number>(0);
-
-  const changeVolume = () => {
-    success(volume);
-    cancel();
-  };
-
-  return (
-    <View style={styles.volumeModalContainer}>
-      <Text style={styles.roleChangeModalHeading}>Set Volume</Text>
-      <View style={styles.volumeModalSlider}>
-        <Text style={styles.roleChangeModalDescription}>Volume: {volume}</Text>
-        <Slider
-          value={volume}
-          maximumValue={1}
-          minimumValue={0}
-          step={0.1}
-          onValueChange={(value: any) => setVolume(value[0])}
-        />
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Cancel"
-          onPress={cancel}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="Change"
-          onPress={changeVolume}
-          viewStyle={styles.roleChangeModalSuccessButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
 interface ChangeBulkRoleModalProps {
   cancelModal(): void;
 }

package/src/components/PaginationDots.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+
+export interface PaginationDotsProps {
+  list: any[];
+}
+
+const _PaginationDots: React.FC<PaginationDotsProps> = ({ list }) => {
+  const activeIndex = useSelector(
+    (state: RootState) => state.app.gridViewActivePage
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme) => ({
+      dot: { backgroundColor: theme.palette.on_surface_low },
+      activeDot: { backgroundColor: theme.palette.on_surface_high },
+    }),
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      {list.map((listItem, idx) => {
+        const isActive = activeIndex === idx;
+        const isFirst = idx === 0;
+
+        return (
+          <View
+            key={listItem?.id || idx.toString()}
+            style={[
+              styles.dot,
+              hmsRoomStyles.dot,
+              isFirst ? styles.firstDot : null,
+              isActive ? hmsRoomStyles.activeDot : null,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 16,
+  },
+  dot: {
+    width: 8,
+    aspectRatio: 1,
+    borderRadius: 4,
+    marginLeft: 12,
+  },
+  firstDot: {
+    marginLeft: 0,
+  },
+});
+
+export const PaginationDots = React.memo(_PaginationDots);

package/src/components/Participants/ParticipantsList.tsx

@@ -88,16 +88,6 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({ data }) => {
     }
   };
 
-  const onSetVolumePress = (peer: HMSPeer) => {
-    hideMenu();
-    setTimeout(() => {
-      batch(() => {
-        dispatch(setPeerToUpdate(peer));
-        setModalVisible(ModalTypes.VOLUME, true);
-      });
-    }, 500);
-  };
-
   return (
     <FlatList
       data={data}
@@ -226,20 +216,6 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({ data }) => {
                   </View>
                 </MenuItem>
               ) : null}
-              {peer.isLocal === false && !!peer.audioTrack ? (
-                <MenuItem onPress={() => onSetVolumePress(peer)}>
-                  <View style={styles.participantMenuItem}>
-                    <Ionicons
-                      name="volume-high-outline"
-                      style={styles.participantMenuItemIcon}
-                      size={24}
-                    />
-                    <Text style={styles.participantMenuItemName}>
-                      Set Volume
-                    </Text>
-                  </View>
-                </MenuItem>
-              ) : null}
             </Menu>
           </View>
         );

package/src/components/ParticipantsCount.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+
+const _ParticipantsCount = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    count: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const peerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+
+  if (typeof peerCount !== 'number') {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <Text style={[styles.count, hmsRoomStyles.count]}>{peerCount}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: 0,
+    borderRadius: 40,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  count: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+  },
+});
+
+export const ParticipantsCount = React.memo(_ParticipantsCount);