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

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,10 +32,6 @@ 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';
 
@@ -51,7 +45,7 @@ import {
   changeShowStats,
   saveUserData,
 } from '../redux/actions';
-import { requestExternalStoragePermission, getTime } from '../utils/functions';
+import { getTime } from '../utils/functions';
 import {
   LayoutParams,
   ModalTypes,
@@ -176,106 +170,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,62 +184,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"
+          title="Done"
           onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="Change"
-          onPress={changeVolume}
-          viewStyle={styles.roleChangeModalSuccessButton}
+          viewStyle={[styles.roleChangeModalCancelButton, { width: '100%' }]}
           textStyle={styles.roleChangeModalButtonText}
         />
       </View>
@@ -1423,15 +1264,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 +1283,7 @@ export const RecordingModal = ({
     setModalVisible(ModalTypes.DEFAULT);
   };
 
-  return recordingModal ? (
+  return (
     <View style={styles.roleChangeModal}>
       <Text style={styles.roleChangeModalHeading}>Recording Details</Text>
       <TextInput
@@ -1498,38 +1336,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 +1351,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 +1507,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/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/PeerSettingsModalContent.tsx

@@ -93,13 +93,6 @@ export const PeerSettingsModalContent: React.FC<
     });
   };
 
-  const changeVolumeLevelOfPeer = () => {
-    batch(() => {
-      dispatch(setPeerToUpdate(peerTrackNode.peer));
-      setModalVisible(ModalTypes.VOLUME, true);
-    });
-  };
-
   // Check if selected tile is "On Spotlight"
   const { onSpotlight, tileVideoTrackId, tileAudioTrackId } = isTileOnSpotlight(
     spotlightTrackId,
@@ -147,13 +140,15 @@ export const PeerSettingsModalContent: React.FC<
       <Text style={styles.participantRole}>{peer.role?.name}</Text>
 
       <View style={styles.contentContainer}>
-        <SettingItem
-          text={onSpotlight ? 'Remove from Spotlight' : 'Add to Spotlight'}
-          IconType={Ionicons}
-          iconName={onSpotlight ? 'ios-star' : 'ios-star-outline'}
-          onPress={handleSpotlightPress}
-          disabled={!peerTrackNode.track?.trackId}
-        />
+        {debugMode ? (
+          <SettingItem
+            text={onSpotlight ? 'Remove from Spotlight' : 'Add to Spotlight'}
+            IconType={Ionicons}
+            iconName={onSpotlight ? 'ios-star' : 'ios-star-outline'}
+            onPress={handleSpotlightPress}
+            disabled={!peerTrackNode.track?.trackId}
+          />
+        ) : null}
 
         {!peer.isLocal &&
         (localPeerPermissions?.mute || localPeerPermissions?.unmute) ? (
@@ -232,15 +227,6 @@ export const PeerSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {!peer.isLocal ? (
-          <SettingItem
-            text="Set Volume"
-            IconType={Ionicons}
-            iconName={'volume-high-outline'}
-            onPress={() => changeVolumeLevelOfPeer()}
-          />
-        ) : null}
-
         {/* Don't show Capture Screenshot option, if track is screenshare of local peer */}
         {!debugMode ||
         (peerTrackNode.peer.isLocal &&

package/src/components/Preview.tsx

@@ -1,11 +1,16 @@
-import React, { useEffect } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-import { AvoidSoftInput } from 'react-native-avoid-softinput';
-
+import React from 'react';
 import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+  Keyboard,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useAnimatedKeyboard,
+} from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import LinearGradient from 'react-native-linear-gradient';
 
 import { COLORS } from '../utils/theme';
 
@@ -19,7 +24,23 @@ import { HMSPreviewPeersList } from './HMSPreviewPeersList';
 import { HMSPreviewSubtitle } from './HMSPreviewSubtitle';
 import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
-import { HMSPreviewDeviceSettings } from './HMSPreviewDeviceSettings';
+import { HMSManageAudioOutput } from './HMSManageAudioOutput';
+import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
+import { useCanPublishVideo } from '../hooks-sdk';
+import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
+
+const backButtonEdges = ['top'] as const;
+const headerEdges = ['top', 'left', 'right'] as const;
+
+const gradientColorShades = [
+  '#000000',
+  'rgba(0, 0, 0, 0.9)',
+  'rgba(0, 0, 0, 0.7)',
+  'rgba(0, 0, 0, 0.1)',
+  'rgba(0, 0, 0, 0.05)',
+  'rgba(0, 0, 0, 0)',
+];
+const gradientColorShadeLocations = [0.45, 0.55, 0.7, 0.9, 0.95, 1];
 
 export const Preview = ({
   join,
@@ -28,72 +49,117 @@ export const Preview = ({
   join(): void;
   loadingButtonState: boolean;
 }) => {
-  const { bottom } = useSafeAreaInsets();
-
-  useEffect(() => {
-    AvoidSoftInput.setAdjustNothing();
-    AvoidSoftInput.setEnabled(true);
+  const canPublishVideo = useCanPublishVideo();
+  const animatedKeyboard = useAnimatedKeyboard();
 
-    return () => AvoidSoftInput.setEnabled(false);
-  }, []);
+  const keyboardAvoidStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: -animatedKeyboard.height.value }],
+    };
+  });
 
   return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView
-        contentContainerStyle={styles.scrollContainer}
-        bounces={false}
-      >
-        <BackButton />
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={styles.container}>
+        {canPublishVideo ? <HMSPreviewTile /> : null}
+
+        {canPublishVideo ? (
+          <LinearGradient
+            colors={gradientColorShades}
+            locations={gradientColorShadeLocations}
+            style={styles.headerGradient}
+          />
+        ) : null}
+
+        <SafeAreaView
+          style={canPublishVideo ? styles.header : null}
+          edges={headerEdges}
+          mode="margin"
+        >
+          <HMSPreviewTitle />
 
-        <HMSPreviewTitle />
+          <HMSPreviewSubtitle />
 
-        <HMSPreviewSubtitle />
+          <View style={styles.peerListWrapper}>
+            <HMSPreviewHLSLiveIndicator />
 
-        <HMSPreviewPeersList />
+            <HMSPreviewPeersList />
+          </View>
+        </SafeAreaView>
 
-        <HMSPreviewTile />
+        <SafeAreaView
+          style={styles.backButtonContainer}
+          edges={backButtonEdges}
+          mode="margin"
+        >
+          <BackButton />
+        </SafeAreaView>
 
-        <View style={styles.controlsContainer}>
-          <View style={styles.micAndCameraControls}>
-            <HMSManageLocalAudio />
+        <View style={styles.footerWrapper}>
+          <HMSPreviewNetworkQuality />
 
-            <View style={styles.manageLocalVideoWrapper}>
-              <HMSManageLocalVideo />
-            </View>
+          <Animated.View style={[styles.footer, keyboardAvoidStyle]}>
+            <View style={styles.controlsContainer}>
+              <View style={styles.micAndCameraControls}>
+                <HMSManageLocalAudio />
 
-            <HMSManageCameraRotation />
-          </View>
+                <View style={styles.manageLocalVideoWrapper}>
+                  <HMSManageLocalVideo />
+                </View>
 
-          <HMSPreviewDeviceSettings />
-        </View>
+                <HMSManageCameraRotation />
+              </View>
 
-        <View
-          style={[styles.joinButtonRow, { marginBottom: 34 - bottom + 12 }]}
-        >
-          <HMSPreviewEditName />
+              <HMSManageAudioOutput />
+            </View>
+
+            <View style={styles.joinButtonRow}>
+              <HMSPreviewEditName />
 
-          <HMSPreviewJoinButton onJoin={join} loading={loadingButtonState} />
+              <HMSPreviewJoinButton
+                onJoin={join}
+                loading={loadingButtonState}
+              />
+            </View>
+          </Animated.View>
         </View>
-      </ScrollView>
-    </SafeAreaView>
+      </View>
+    </TouchableWithoutFeedback>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    position: 'relative',
     backgroundColor: COLORS.BACKGROUND.DIM,
+    justifyContent: 'center',
   },
-  scrollContainer: {
-    flexGrow: 1,
+  header: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    marginTop: 24,
+    zIndex: 20,
+    alignItems: 'center',
+  },
+  headerGradient: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: 260,
+    zIndex: 10,
   },
   controlsContainer: {
-    marginHorizontal: 24,
-    marginTop: 24,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  peerListWrapper: {
+    flexDirection: 'row',
+    marginTop: 16,
+    alignSelf: 'center',
+  },
   micAndCameraControls: {
     flexDirection: 'row',
   },
@@ -101,8 +167,25 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
   },
   joinButtonRow: {
-    marginHorizontal: 24,
-    marginTop: 16,
+    marginVertical: 16,
     flexDirection: 'row',
   },
+  backButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    zIndex: 40,
+  },
+  footerWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 30,
+  },
+  footer: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DEFAULT,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+  },
 });