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

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(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/AnswerPhone/index.tsx

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

package/src/Icons/Bluetooth/index.tsx

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

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/GenericLogo/index.tsx

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

package/src/Icons/Headphones/index.tsx

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

package/src/Icons/Person/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface PersonIconProps extends Omit<ImageProps, 'source'> {}
+
+export const PersonIcon: React.FC<PersonIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/person.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/Speaker/index.tsx

@@ -4,9 +4,11 @@ import type { ImageProps } from 'react-native';
 
 interface SpeakerIconProps extends Omit<ImageProps, 'source'> {
   muted: boolean;
+  size?: 'normal' | 'large';
 }
 
 export const SpeakerIcon: React.FC<SpeakerIconProps> = ({
+  size = 'normal',
   muted,
   style,
   ...restProps
@@ -16,9 +18,11 @@ export const SpeakerIcon: React.FC<SpeakerIconProps> = ({
       source={
         muted
           ? require('./assets/speaker-muted.png')
-          : require('./assets/speaker.png')
+          : size === 'normal'
+          ? require('./assets/speaker.png')
+          : require('./assets/speaker-large.png')
       }
-      style={[styles.icon, style]}
+      style={[styles.icon, style, size === 'large' ? styles.large : null]}
       {...restProps}
     />
   );
@@ -31,4 +35,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  large: {
+    width: 32,
+    height: 32,
+  },
 });

package/src/Icons/Wave/index.tsx

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

package/src/Icons/index.ts

@@ -17,3 +17,11 @@ export * from './Clock';
 export * from './End';
 export * from './100ms';
 export * from './Hand';
+export * from './Person';
+export * from './AnswerPhone';
+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;
   }
 
@@ -36,7 +36,7 @@ export const BackButton: React.FC<BackButtonProps> = () => {
 const styles = StyleSheet.create({
   button: {
     marginTop: 16,
-    marginLeft: 8,
+    marginLeft: 16,
     backgroundColor: COLORS.SURFACE.DEFAULT,
   },
 });

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,
+  },
+});