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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -51,23 +51,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@100mslive/react-native-hms": "1.7.0",
-    "@miblanchard/react-native-slider": "^2.0.2",
     "@react-navigation/native": "^6.0.8",
-    "@shopify/flash-list": "^1.4.3",
-    "react-native-avoid-softinput": "^2.4.8",
-    "react-native-device-info": "^9.0.2",
-    "react-native-document-picker": "^8.1.1",
-    "react-native-fs": "^2.19.0",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-linear-gradient": "^2.7.3",
-    "react-native-modal": "^12.1.0",
-    "react-native-safe-area-context": "^3.3.0",
-    "react-native-share": "^8.2.2",
-    "react-native-simple-toast": "^1.1.3",
     "react-redux": "^7.2.4",
-    "redux": "^4.1.0",
-    "rn-fetch-blob": "^0.12.0"
+    "redux": "^4.1.0"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
@@ -93,10 +79,17 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
+    "@100mslive/react-native-hms": "github:100mslive/100ms-react-native#release1.8.0",
+    "@shopify/flash-list": "^1.4.3",
     "react": "*",
     "react-native": "*",
+    "react-native-avoid-softinput": "^2.4.8",
+    "react-native-linear-gradient": "^2.7.3",
+    "react-native-modal": "^12.1.0",
     "react-native-permissions": "3.4.0",
     "react-native-reanimated": "^2.17.0",
+    "react-native-safe-area-context": "^3.3.0",
+    "react-native-simple-toast": "^1.1.3",
     "react-native-vector-icons": "^9.1.0"
   },
   "resolutions": {

package/src/HMSInstanceSetup.tsx

@@ -12,7 +12,6 @@ import {
   HMSVideoTrackSettings,
 } from '@100mslive/react-native-hms';
 import React, { useEffect } from 'react';
-import { getModel } from 'react-native-device-info';
 import { batch, useDispatch } from 'react-redux';
 
 import { getJoinConfig } from './utils';
@@ -20,26 +19,11 @@ import { saveUserData, setHMSInstance } from './redux/actions';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
 import { clearConfig } from './hooks-util';
 import { store } from './redux';
+import type { HMSIOSScreenShareConfig } from './utils/types';
 
 const getTrackSettings = () => {
   const joinConfig = getJoinConfig();
 
-  const listOfFaultyDevices = [
-    'Pixel',
-    'Pixel XL',
-    'Moto G5',
-    'Moto G (5S) Plus',
-    'Moto G4',
-    'TA-1053',
-    'Mi A1',
-    'Mi A2',
-    'E5823', // Sony z5 compact
-    'Redmi Note 5',
-    'FP2', // Fairphone FP2
-    'MI 5',
-  ];
-  const deviceModal = getModel();
-
   /**
    * Customize local peer's Audio track settings before Joining the Room.
    *
@@ -49,15 +33,8 @@ const getTrackSettings = () => {
     initialState: joinConfig.mutedAudio
       ? HMSTrackSettingsInitState.MUTED
       : HMSTrackSettingsInitState.UNMUTED,
-    useHardwareEchoCancellation: listOfFaultyDevices.includes(deviceModal)
-      ? true
-      : false,
     audioSource: joinConfig.audioMixer
-      ? [
-          'mic_node',
-          'screen_broadcast_audio_receiver_node',
-          'audio_file_player_node',
-        ]
+      ? ['mic_node', 'screen_broadcast_audio_receiver_node']
       : undefined,
     /**
      * `audioMode` param allows you to capture audio in its highest quality
@@ -96,7 +73,8 @@ const getLogSettings = (): HMSLogSettings => {
   });
 };
 
-const getIOSBuildConfig = () => store.getState().user.iosBuildConfig || {};
+const getIOSBuildConfig = (): Partial<HMSIOSScreenShareConfig> =>
+  store.getState().user.iosBuildConfig || {};
 
 /**
  * Regular Usage:
@@ -160,19 +138,14 @@ export const HMSInstanceSetup = () => {
       clearConfig();
       getHmsInstance()
         .then((hmssdkInstance) => {
-          console.log('$$$ hmssdkInstance id = ', hmssdkInstance.id);
           if (!ignore) {
             // If this component is mounted
             // save instance in store
-            console.log('$$$ before batch');
             batch(() => {
-              console.log('$$$ setHMSInstance call');
               dispatch(setHMSInstance(hmssdkInstance));
               // TODO: remove this from user reducer
-              console.log('$$$ saveUserData call');
               dispatch(saveUserData({ hmsInstance: hmssdkInstance }));
             });
-            console.log('$$$ after batch');
           } else {
             // If this component is not mounted when this response is received
             // that means Root componnet is unmounted, we can destroy instance safely

package/src/HMSPrebuilt.tsx

@@ -1,10 +1,14 @@
 import React, { memo } from 'react';
 import { Provider } from 'react-redux';
+import {
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
 
 import { store } from './redux/index';
 import { HMSContainer } from './HMSContainer';
 import { setPrebuiltData } from './redux/actions';
-import type { IOSBuildConfig } from './utils/types';
+import type { HMSIOSScreenShareConfig } from './utils/types';
 
 export interface HMSPrebuiltProps {
   roomCode: string;
@@ -16,19 +20,33 @@ export interface HMSPrebuiltProps {
       token: string;
     };
     debugMode?: boolean;
-    ios?: IOSBuildConfig;
+    ios?: HMSIOSScreenShareConfig;
   };
 }
 
-export const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
+const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
   const { roomCode, options } = props;
 
   store.dispatch(setPrebuiltData({ roomCode, options }));
 
+  // @ts-ignore Not using `useContext` hook because we don't want to subscribe to updates
+  // We just want to check if SafeAreaProvider exists or not
+  const safeAreaProviderExists = !!SafeAreaInsetsContext.Consumer._currentValue;
+
+  if (safeAreaProviderExists) {
+    return (
+      <Provider store={store}>
+        <HMSContainer />
+      </Provider>
+    );
+  }
+
   return (
-    <Provider store={store}>
-      <HMSContainer />
-    </Provider>
+    <SafeAreaProvider>
+      <Provider store={store}>
+        <HMSContainer />
+      </Provider>
+    </SafeAreaProvider>
   );
 };
 

package/src/HMSRoomSetup.tsx

@@ -5,12 +5,21 @@ import {
   HMSUpdateListenerActions,
 } from '@100mslive/react-native-hms';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Alert, Platform, StatusBar, StyleSheet, View } from 'react-native';
+import {
+  Alert,
+  Keyboard,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
 import Toast from 'react-native-simple-toast';
-import { batch, useDispatch } from 'react-redux';
+import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 
 import { Preview } from './components';
 import {
+  changeMeetingState,
+  changeStartingHLSStream,
   clearStore,
   setHMSLocalPeerState,
   setHMSRoomState,
@@ -23,6 +32,7 @@ import {
   useHMSInstance,
   useHMSListeners,
   useHMSSessionStore,
+  useLeaveMethods,
 } from './hooks-util';
 import {
   peerTrackNodeExistForPeerAndTrack,
@@ -34,7 +44,9 @@ import { MeetingState } from './types';
 import { getJoinConfig } from './utils';
 import { COLORS } from './utils/theme';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
-import { selectIsHLSViewer } from './hooks-util-selectors';
+import { HMSMeetingEnded } from './components/HMSMeetingEnded';
+import { selectIsHLSViewer, selectShouldGoLive } from './hooks-util-selectors';
+import type { RootState } from './redux';
 
 type PreviewData = {
   room: HMSRoom;
@@ -42,19 +54,23 @@ type PreviewData = {
 };
 
 export const HMSRoomSetup = () => {
-  console.log('### Inside HMSRoomSetup');
+  const ignoreHLSStreamPromise = useRef(false);
   const didInitMeetingAction = useRef(false);
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
-  console.log('### after dispatch');
+  const reduxStore = useStore();
 
   const { getConfig, clearConfig } = useHMSConfig();
-  const [meetingState, setMeetingState] = useState(MeetingState.NOT_JOINED);
+  const meetingState = useSelector(
+    (state: RootState) => state.app.meetingState
+  );
   const [peerTrackNodes, setPeerTrackNodes] = useState<PeerTrackNode[]>([]);
   const [loading, setLoading] = useState(false);
+  const { goToPreview } = useLeaveMethods();
 
   const joinMeeting = useCallback(async () => {
     setLoading(true);
+    Keyboard.dismiss();
     const hmsConfig = await getConfig();
     // TODO: handle case when promise returned from `getConfig()` is resolved when Root component has been unmounted
     hmsInstance.join(hmsConfig);
@@ -67,8 +83,22 @@ export const HMSRoomSetup = () => {
     hmsInstance.preview(hmsConfig);
   }, [getConfig, hmsInstance]);
 
+  const startHLSStreaming = useCallback(async () => {
+    dispatch(changeStartingHLSStream(true));
+    try {
+      const d = await hmsInstance.startHLSStreaming();
+      console.log('Start HLS Streaming Success: ', d);
+    } catch (e) {
+      console.log('Start HLS Streaming Error: ', e);
+      if (!ignoreHLSStreamPromise.current) {
+        console.log('Unable to go live at the moment: ', e);
+        goToPreview();
+      }
+    }
+  }, [goToPreview, hmsInstance]);
+
   // HMS Room, Peers, Track Listeners
-  useHMSListeners(meetingState, setPeerTrackNodes, setMeetingState);
+  useHMSListeners(setPeerTrackNodes);
 
   /**
    * Session store is a shared realtime key-value store that is accessible by everyone in the room.
@@ -126,24 +156,20 @@ export const HMSRoomSetup = () => {
   // HMS Preview Listener
   useEffect(() => {
     const onPreviewHandler = (data: PreviewData) => {
-      console.log('ON_PREVIEW called');
+      setLoading(false);
       batch(() => {
         dispatch(setHMSRoomState(data.room));
         dispatch(setHMSLocalPeerState(data.room.localPeer));
+        dispatch(changeMeetingState(MeetingState.IN_PREVIEW));
       });
-
-      setLoading(false);
-      setMeetingState(MeetingState.IN_PREVIEW);
     };
 
-    console.log('HMSUpdateListenerActions.ON_PREVIEW registered');
     hmsInstance.addEventListener(
       HMSUpdateListenerActions.ON_PREVIEW,
       onPreviewHandler
     );
 
     return () => {
-      console.log('HMSUpdateListenerActions.ON_PREVIEW removed');
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PREVIEW);
     };
   }, [hmsInstance]);
@@ -186,7 +212,12 @@ export const HMSRoomSetup = () => {
         return [hmsLocalPeer, ...prevPeerTrackNodes];
       });
 
-      setMeetingState(MeetingState.IN_MEETING);
+      const shouldGoLive = selectShouldGoLive(reduxStore.getState());
+
+      if (shouldGoLive) {
+        startHLSStreaming();
+      }
+      dispatch(changeMeetingState(MeetingState.IN_MEETING));
     };
 
     hmsInstance.addEventListener(
@@ -197,10 +228,13 @@ export const HMSRoomSetup = () => {
     return () => {
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_JOIN);
     };
-  }, [hmsInstance]);
+  }, [startHLSStreaming, hmsInstance]);
+
+  const meetingEnded = meetingState === MeetingState.MEETING_ENDED;
 
+  // Handling Automatically calling Preview or Join API
   useEffect(() => {
-    if (!didInitMeetingAction.current) {
+    if (!meetingEnded && !didInitMeetingAction.current) {
       didInitMeetingAction.current = true;
 
       // let ignore = false;
@@ -227,10 +261,12 @@ export const HMSRoomSetup = () => {
         // ignore = true;
       };
     }
-  }, []);
+  }, [meetingEnded]);
 
   useEffect(() => {
     return () => {
+      ignoreHLSStreamPromise.current = true;
+
       // TODOS:
       // - Check If we have already left meeting, or destroyed native HMSSDK
       //    - No need to reset redux state?
@@ -264,6 +300,8 @@ export const HMSRoomSetup = () => {
         <Preview join={joinMeeting} loadingButtonState={loading} />
       ) : meetingState === MeetingState.IN_MEETING ? (
         <Meeting peerTrackNodes={peerTrackNodes} />
+      ) : meetingState === MeetingState.MEETING_ENDED ? (
+        <HMSMeetingEnded />
       ) : loading ? (
         <FullScreenIndicator />
       ) : (

package/src/Icons/Check/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface CheckIconProps extends Omit<ImageProps, 'source'> {}
+
+export const CheckIcon: React.FC<CheckIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/check.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Radio/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface RadioIconProps extends Omit<ImageProps, 'source'> {}
+
+export const RadioIcon: React.FC<RadioIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/radio.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -23,3 +23,5 @@ export * from './Bluetooth';
 export * from './Headphones';
 export * from './Wave';
 export * from './GenericLogo';
+export * from './Radio';
+export * from './Check';

package/src/components/BackButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { NavigationContext } from '@react-navigation/native';
 
 import { COLORS } from '../utils/theme';
 import { PressableIcon } from './PressableIcon';
@@ -9,9 +9,9 @@ import { ChevronIcon } from '../Icons';
 export interface BackButtonProps {}
 
 export const BackButton: React.FC<BackButtonProps> = () => {
-  const navigation = useNavigation();
+  const navigation = React.useContext(NavigationContext);
 
-  if (!navigation.canGoBack()) {
+  if (!navigation || !navigation.canGoBack()) {
     return null;
   }
 

package/src/components/DisplayView.tsx

@@ -19,7 +19,6 @@ import {
   ChangeRoleAccepteModal,
   ChangeRoleModal,
   ChangeTrackStateModal,
-  ChangeVolumeModal,
   SaveScreenshot,
 } from './Modals';
 import type { RootState } from '../redux';
@@ -289,15 +288,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
             />
           </DefaultModal>
-          <DefaultModal
-            modalPosiion="center"
-            modalVisible={modalVisible === ModalTypes.VOLUME}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
-          >
-            <ChangeVolumeModal
-              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
-            />
-          </DefaultModal>
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.CHANGE_NAME}

package/src/components/HMSHLSStreamLoading.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import { HMSLocalVideoView } from './HMSLocalVideoView';
+
+export const HMSHLSStreamLoading = () => {
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+
+  return (
+    <View style={styles.container}>
+      {isLocalVideoMuted ? null : <HMSLocalVideoView />}
+
+      <View style={styles.hlsLoaderContainer}>
+        <ActivityIndicator
+          style={styles.hlsLoader}
+          size={'large'}
+          color={COLORS.PRIMARY.DEFAULT}
+        />
+
+        <Text style={styles.hlsLoaderText}>Starting live stream...</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: COLORS.BACKGROUND.DIM,
+  },
+  hlsLoaderContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.LOADING_BACKDROP,
+    zIndex: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  hlsLoader: {
+    marginBottom: 30,
+  },
+  hlsLoaderText: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 24,
+    letterSpacing: 0.5,
+  },
+});

package/src/components/HMSLocalVideoView.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSVideoViewMode } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { useHMSInstance } from '../hooks-util';
+
+export const HMSLocalVideoView = () => {
+  const hmsInstance = useHMSInstance();
+  const HmsView = hmsInstance.HmsView;
+  const mirrorCamera = useSelector(
+    (state: RootState) => state.app.joinConfig.mirrorCamera
+  );
+  const autoSimulcast = useSelector(
+    (state: RootState) => state.app.joinConfig.autoSimulcast
+  );
+  const localVideoTrackId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.videoTrack?.trackId
+  );
+
+  if (!localVideoTrackId) {
+    return null;
+  }
+
+  return (
+    <HmsView
+      trackId={localVideoTrackId}
+      key={localVideoTrackId}
+      mirror={mirrorCamera}
+      autoSimulcast={autoSimulcast}
+      scaleType={HMSVideoViewMode.ASPECT_FILL}
+      style={styles.hmsView}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  hmsView: {
+    flex: 1,
+  },
+});