@100mslive/react-native-room-kit 1.0.1 → 1.0.2-beta.1

package/src/HMSRoomSetup.tsx

@@ -5,22 +5,15 @@ import {
   HMSUpdateListenerActions,
 } from '@100mslive/react-native-hms';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  Alert,
-  Keyboard,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Alert, Keyboard, StatusBar, StyleSheet, View } from 'react-native';
 import Toast from 'react-native-simple-toast';
 import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 
 import { Preview } from './components';
 import {
+  addNotification,
   changeMeetingState,
   changeStartingHLSStream,
-  clearStore,
   setHMSLocalPeerState,
   setHMSRoomState,
   setLocalPeerTrackNode,
@@ -28,6 +21,7 @@ import {
   updateLocalPeerTrackNode,
 } from './redux/actions';
 import { createPeerTrackNode } from './utils/functions';
+import { OnLeaveReason, TerminalExceptionCodes } from './utils/types';
 import type { PeerTrackNode } from './utils/types';
 import { Meeting } from './components/Meeting';
 import {
@@ -47,7 +41,7 @@ import {
   replacePeerTrackNodes,
   peerTrackNodeExistForPeer,
 } from './peerTrackNodeUtils';
-import { MeetingState } from './types';
+import { MeetingState, NotificationTypes } from './types';
 import { getJoinConfig } from './utils';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
 import { HMSMeetingEnded } from './components/HMSMeetingEnded';
@@ -72,7 +66,7 @@ export const HMSRoomSetup = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const reduxStore = useStore<RootState>();
-  const { goToPreview } = useLeaveMethods(true);
+  const { leave, destroy, prebuiltCleanUp } = useLeaveMethods();
 
   const { getConfig, clearConfig } = useHMSConfig();
   const meetingState = useSelector(
@@ -82,18 +76,52 @@ export const HMSRoomSetup = () => {
   const [loading, setLoading] = useState(false);
 
   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);
+    try {
+      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);
+    } catch (error: any) {
+      Alert.alert(
+        error.code,
+        error.message,
+        [
+          {
+            text: 'Leave',
+            style: 'destructive',
+            onPress: () => {
+              leave(OnLeaveReason.LEAVE);
+            },
+          },
+        ],
+        { cancelable: false }
+      );
+    }
   }, [getConfig, hmsInstance]);
 
   const previewMeeting = useCallback(async () => {
-    setLoading(true);
-    const hmsConfig = await getConfig();
-    // TODO: handle case when promise returned from `getConfig()` is resolved when Root component has been unmounted
-    hmsInstance.preview(hmsConfig);
+    try {
+      setLoading(true);
+      const hmsConfig = await getConfig();
+      // TODO: handle case when promise returned from `getConfig()` is resolved when Root component has been unmounted
+      hmsInstance.preview(hmsConfig);
+    } catch (error: any) {
+      Alert.alert(
+        error.code,
+        error.message,
+        [
+          {
+            text: 'Leave',
+            style: 'destructive',
+            onPress: () => {
+              destroy(OnLeaveReason.LEAVE);
+            },
+          },
+        ],
+        { cancelable: false }
+      );
+    }
   }, [getConfig, hmsInstance]);
 
   const startHLSStreaming = useCallback(async () => {
@@ -105,10 +133,13 @@ export const HMSRoomSetup = () => {
       console.log('Start HLS Streaming Error: ', e);
       if (!ignoreHLSStreamPromise.current) {
         console.log('Unable to go live at the moment: ', e);
-        // goToPreview();
+        // prebuiltCleanUp();
       }
     }
-  }, [goToPreview, hmsInstance]);
+  }, [
+    // prebuiltCleanUp,
+    hmsInstance
+  ]);
 
   // HMS Room, Peers, Track Listeners
   useHMSListeners(setPeerTrackNodes);
@@ -126,34 +157,60 @@ export const HMSRoomSetup = () => {
    */
   useHMSSessionStore();
 
+  const meetingJoined = meetingState === MeetingState.IN_MEETING;
+  const previewing = meetingState === MeetingState.IN_PREVIEW;
+
   // HMS Error Listener
   useEffect(() => {
     const hmsErrorHandler = (error: HMSException) => {
-      setLoading(false);
-
-      // TODO: 424 error is not recoverable
-      // (Leave Meeting and Destroy Instance) ???
-      // Inform user with Alert or Error screen and send user back
-      if (error.code === 424) {
-        Alert.alert('Error', error.description || 'Something went wrong', [
-          { text: 'OK', style: 'cancel', onPress: () => {} },
-        ]);
-      } else if (
-        Platform.OS === 'android'
-          ? error.code === 4005 || error.code === 1003
-          : error.code === 2000
-      ) {
-        // TODO: come up with Error Handle mechanism
-        // (Leave Meeting and Destroy Instance) ???
-        // Clear Redux Store?
-        // Inform user with Alert or Error screen and send user back (Navigation)
+      const terminalError =
+        error.isTerminal || TerminalExceptionCodes.includes(error.code);
+
+      if (meetingJoined) {
+        const uid = Math.random().toString(16).slice(2);
+        const notificationPayload = terminalError
+          ? {
+              id: uid,
+              type: NotificationTypes.TERMINAL_ERROR,
+              exception: error,
+            }
+          : {
+              id: uid,
+              type: NotificationTypes.ERROR,
+              message: error.description,
+            };
+
+        dispatch(addNotification(notificationPayload));
+      } else {
+        setLoading(false);
+
+        if (terminalError) {
+          Alert.alert(
+            error.code.toString(),
+            error.description || 'Something went wrong',
+            [
+              {
+                text: 'Leave',
+                style: 'destructive',
+                onPress: () => {
+                  if (previewing) {
+                    leave(OnLeaveReason.NETWORK_ISSUES);
+                  } else {
+                    destroy(OnLeaveReason.NETWORK_ISSUES);
+                  }
+                },
+              },
+            ],
+            { cancelable: false }
+          );
+        } else {
+          Toast.showWithGravity(
+            `${error?.code} ${error?.description}` || 'Something went wrong',
+            Toast.LONG,
+            Toast.TOP
+          );
+        }
       }
-
-      Toast.showWithGravity(
-        `${error?.code} ${error?.description}` || 'Something went wrong',
-        Toast.LONG,
-        Toast.TOP
-      );
     };
 
     hmsInstance.addEventListener(
@@ -164,7 +221,7 @@ export const HMSRoomSetup = () => {
     return () => {
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_ERROR);
     };
-  }, [hmsInstance]);
+  }, [previewing, meetingJoined, hmsInstance]);
 
   // HMS Preview Listener
   useEffect(() => {
@@ -294,8 +351,6 @@ export const HMSRoomSetup = () => {
     };
   }, [startHLSStreaming, hmsInstance]);
 
-  const meetingJoined = meetingState === MeetingState.IN_MEETING;
-
   // HMS Active Speaker Listener
   // dev-note: This is added here because we have `setPeerTrackNodes` here
   useHMSActiveSpeakerUpdates(setPeerTrackNodes, meetingJoined);
@@ -333,13 +388,10 @@ export const HMSRoomSetup = () => {
     }
   }, [meetingEnded]);
 
-  const { leave } = useLeaveMethods(true);
-
   useEffect(() => {
     return () => {
       ignoreHLSStreamPromise.current = true;
-      leave();
-      dispatch(clearStore());
+      prebuiltCleanUp();
     };
   }, []);
 

package/src/Icons/Hand/index.tsx

@@ -4,16 +4,26 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface HandIconProps extends Omit<ImageProps, 'source'> {}
+interface HandIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'off' | 'on';
+}
 
-export const HandIcon: React.FC<HandIconProps> = ({ style, ...restProps }) => {
+export const HandIcon: React.FC<HandIconProps> = ({
+  style,
+  type = 'on',
+  ...restProps
+}) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
     tintColor: theme.palette.on_surface_high,
   }));
 
   return (
     <Image
-      source={require('./assets/hand.png')}
+      source={
+        type === 'on'
+          ? require('./assets/hand.png')
+          : require('./assets/hand-off.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/Icons/Recording/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface RecordingIconProps extends Omit<ImageProps, 'source'> {}
+interface RecordingIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'off' | 'on';
+}
 
 export const RecordingIcon: React.FC<RecordingIconProps> = ({
   style,
+  type = 'on',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,7 +19,11 @@ export const RecordingIcon: React.FC<RecordingIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/recording.png')}
+      source={
+        type === 'on'
+          ? require('./assets/recording.png')
+          : require('./assets/recording-off.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/components/DisplayView.tsx

@@ -36,6 +36,8 @@ import { BottomSheet } from './BottomSheet';
 import { FullScreenVideoView } from './FullScreenVideoView';
 import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
 import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
+import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
+import { EndRoomModal } from './EndRoomModal';
 
 type CapturedImagePath = { uri: string } | null;
 
@@ -150,6 +152,10 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 
       {isPipModeActive ? null : (
         <>
+          <LeaveRoomBottomSheet />
+
+          <EndRoomModal />
+
           <PreviewForRoleChangeModal />
 
           <FullScreenVideoView />

package/src/components/EndRoomModal.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { ModalTypes } from '../utils/types';
+import { BottomSheet } from './BottomSheet';
+import { useModalType } from '../hooks-util';
+import { EndRoomModalContent } from './EndRoomModalContent';
+
+interface EndRoomModalProps {}
+
+export const EndRoomModal: React.FC<EndRoomModalProps> = () => {
+  const { modalVisibleType, handleModalVisibleType } = useModalType();
+
+  const dismissModal = () => handleModalVisibleType(ModalTypes.DEFAULT);
+
+  return (
+    <BottomSheet
+      dismissModal={dismissModal}
+      isVisible={modalVisibleType === ModalTypes.END_ROOM}
+      animationOutTiming={700}
+    >
+      <EndRoomModalContent dismissModal={dismissModal} />
+    </BottomSheet>
+  );
+};

package/src/components/EndRoomModalContent.tsx

@@ -6,6 +6,7 @@ import { AlertTriangleIcon, CloseIcon } from '../Icons';
 import { HMSDangerButton } from './HMSDangerButton';
 import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
+import { OnLeaveReason } from '../utils/types';
 
 export interface EndRoomModalContentProps {
   dismissModal(): void;
@@ -14,7 +15,7 @@ export interface EndRoomModalContentProps {
 export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
   dismissModal,
 }) => {
-  const { endRoom, leave } = useLeaveMethods(false);
+  const { endRoom, leave } = useLeaveMethods();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {
@@ -72,7 +73,13 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
       </Text>
       <HMSDangerButton
         loading={false}
-        onPress={canStream && isStreaming ? () => leave(true) : endRoom}
+        onPress={() => {
+          if (canStream && isStreaming) {
+            leave(OnLeaveReason.LEAVE, true)
+          } else {
+            endRoom(OnLeaveReason.ROOM_END);
+          }
+        }}
         title={canStream && isStreaming ? 'End Stream' : 'End Session'}
       />
     </View>

package/src/components/Footer.tsx

@@ -1,6 +1,9 @@
 import React, { memo, useMemo } from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import {
   useHMSLayoutConfig,
@@ -50,7 +53,11 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 
   const canShowOptions =
-    isViewer || canPublishScreen || canShowParticipants || canShowBRB || canStartRecording;
+    isViewer ||
+    canPublishScreen ||
+    canShowParticipants ||
+    canShowBRB ||
+    canStartRecording;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];
@@ -129,6 +136,15 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 };
 
+export const useFooterHeight = () => {
+  const isHLSViewer = useIsHLSViewer();
+  const { bottom } = useSafeAreaInsets();
+
+  return (
+    bottom + (isHLSViewer ? 8 : 16) + (Platform.OS === 'android' ? 16 : 0) + 40
+  ); // bottomSafeArea + paddingTop + marginBottom + content
+};
+
 const styles = StyleSheet.create({
   container: {
     paddingTop: 16,

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -1,36 +1,22 @@
 import * as React from 'react';
-import { Platform, StatusBar, useWindowDimensions } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
   useAnimatedKeyboard,
   useAnimatedStyle,
-  useSharedValue,
+  useDerivedValue,
 } from 'react-native-reanimated';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  bottomOffset?: number;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style }) => {
-  const animatedViewRef = React.useRef<Animated.View>(null);
-  const { height: windowHeight } = useWindowDimensions();
+> = ({ children, style, bottomOffset=0 }) => {
   const animatedKeyboard = useAnimatedKeyboard();
 
-  const initialPageY = useSharedValue(0);
-
-  const _handleViewOnLayout = React.useCallback(() => {
-    animatedViewRef.current?.measureInWindow((_fx, fy, _width, height) => {
-      if (height > 0) {
-        const finalWindowHeight =
-          Platform.OS === 'android' && Platform.Version < 29
-            ? windowHeight - (StatusBar.currentHeight ?? 0)
-            : windowHeight;
-        initialPageY.value = finalWindowHeight - (height + fy);
-      }
-    });
-  }, []);
+  const initialPageY = useDerivedValue(() => bottomOffset, [bottomOffset]);
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
     const keyboardHeight = animatedKeyboard.height.value;
@@ -47,11 +33,7 @@ export const HMSKeyboardAvoidingView: React.FC<
   });
 
   return (
-    <Animated.View
-      ref={animatedViewRef}
-      onLayout={_handleViewOnLayout}
-      style={[style, keyboardAvoidStyle]}
-    >
+    <Animated.View style={[style, keyboardAvoidStyle]}>
       {children}
     </Animated.View>
   );

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -5,7 +5,7 @@ import { ScreenShareIcon } from '../Icons';
 import { HMSDangerButton } from './HMSDangerButton';
 import { HMSNotification } from './HMSNotification';
 import { useHMSRoomStyle } from '../hooks-util';
-import { NotificationTypes } from '../utils';
+import { NotificationTypes } from '../types';
 
 export interface HMSLocalScreenshareNotificationProps {}