@100mslive/react-native-room-kit 1.0.0 → 1.0.2-beta.0

package/src/HMSPrebuilt.tsx

@@ -1,47 +1,27 @@
 import React, { memo } from 'react';
 import { Provider } from 'react-redux';
+import { Platform } from 'react-native';
 import {
   SafeAreaInsetsContext,
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
-import { KeyboardProvider } from 'react-native-keyboard-controller';
 
 import { store } from './redux/index';
 import { HMSContainer } from './HMSContainer';
-import { setPrebuiltData } from './redux/actions';
-import type { HMSIOSScreenShareConfig } from './utils/types';
-
-export interface HMSPrebuiltProps {
-  roomCode: string;
-  options?: {
-    userName?: string;
-    userId?: string;
-    endPoints?: {
-      init: string;
-      token: string;
-      layout: string;
-    };
-    debugMode?: boolean;
-    ios?: HMSIOSScreenShareConfig;
-  };
-  onLeave?: () => void;
-}
+import { useSavePropsToStore } from './hooks-util';
+import type { HMSPrebuiltProps } from './types';
 
 const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
-  const { roomCode, options, onLeave } = props;
-
-  store.dispatch(setPrebuiltData({ roomCode, options, onLeave }));
+  useSavePropsToStore(props, store.dispatch);
 
   // @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;
 
   const content = (
-    <KeyboardProvider>
-      <Provider store={store}>
-        <HMSContainer />
-      </Provider>
-    </KeyboardProvider>
+    <Provider store={store}>
+      <HMSContainer />
+    </Provider>
   );
 
   if (safeAreaProviderExists) {
@@ -51,5 +31,31 @@ const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
   return <SafeAreaProvider>{content}</SafeAreaProvider>;
 };
 
-// TODO: handle props change
-export const HMSPrebuilt = memo(_HMSPrebuilt);
+const arePropsEqual = (
+  prevProps: Readonly<HMSPrebuiltProps>,
+  nextProps: Readonly<HMSPrebuiltProps>
+): boolean => {
+  if (
+    Platform.OS === 'android' &&
+    !Object.is(prevProps.handleBackButton, nextProps.handleBackButton)
+  ) {
+    return false;
+  }
+
+  if (
+    Platform.OS === 'android' &&
+    !Object.is(prevProps.autoEnterPipMode, nextProps.autoEnterPipMode)
+  ) {
+    return false;
+  }
+
+  if (!Object.is(prevProps.onLeave, nextProps.onLeave)) {
+    return false;
+  }
+
+  return true;
+};
+
+export const HMSPrebuilt = memo(_HMSPrebuilt, arePropsEqual);
+
+export { type HMSPrebuiltProps };

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

@@ -5,7 +5,7 @@ import type { ImageProps } from 'react-native';
 import { useHMSRoomStyle } from '../../hooks-util';
 
 interface ChevronIconProps extends Omit<ImageProps, 'source'> {
-  direction: 'left' | 'down';
+  direction: 'left' | 'down' | 'right' | 'top';
 }
 
 export const ChevronIcon: React.FC<ChevronIconProps> = ({
@@ -24,7 +24,14 @@ export const ChevronIcon: React.FC<ChevronIconProps> = ({
           ? require('./assets/chevron-down.png')
           : require('./assets/chevron-left.png')
       }
-      style={[styles.icon, iconStyles, style]}
+      style={[
+        styles.icon,
+        direction === 'right' || direction === 'top' ? {
+          transform: [{rotateZ: direction === 'right' ? '180deg' : '90deg' }]
+        } : null,
+        iconStyles,
+        style,
+      ]}
       {...restProps}
     />
   );

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

@@ -2,16 +2,22 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface LeaveIconProps extends Omit<ImageProps, 'source'> {}
 
 export const LeaveIcon: React.FC<LeaveIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/leave.png')}
-      style={[styles.icon, style]}
+      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/Icons/WelcomeHand/index.tsx

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

package/src/Icons/index.ts

@@ -37,3 +37,4 @@ export * from './Hamburger';
 export * from './Stop';
 export * from './Eye';
 export * from './Search';
+export * from './WelcomeHand';

package/src/components/ChangeNameModalContent.tsx

@@ -9,12 +9,13 @@ import {
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { useHMSRoomStyleSheet } from '../hooks-util';
-import { BottomSheet } from './BottomSheet';
+import { isPublishingAllowed, useHMSRoomStyleSheet, useModalType } from '../hooks-util';
+import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import { ChevronIcon, CloseIcon } from '../Icons';
 import { HMSTextInput } from './HMSTextInput';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 import { useHMSActions } from '../hooks-sdk';
+import { ModalTypes } from '../utils/types';
 
 export interface ChangeNameModalContentProps {
   dismissModal(): void;
@@ -27,10 +28,18 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
   const localPeerName = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.name || ''
   );
+  const isPublisher = useSelector((state: RootState) => {
+    const localPeer = state.hmsStates.localPeer;
+    return localPeer ? isPublishingAllowed(localPeer) : false;
+  });
 
   const [name, setName] = React.useState(localPeerName);
   const [nameChangeLoading, setNameChangeLoading] = React.useState(false);
 
+  const { handleModalVisibleType } = useModalType();
+
+  const { registerOnModalHideAction } = useBottomSheetActions();
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {
       color: theme.palette.on_surface_high,
@@ -44,6 +53,11 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
   const handleBackPress = () => {
     Keyboard.dismiss();
 
+    // Open SETTINGS bottom sheet when current sheet is closed
+    registerOnModalHideAction(() => {
+      handleModalVisibleType(ModalTypes.SETTINGS);
+    });
+
     // Close current bottom sheet
     dismissModal();
   };
@@ -71,12 +85,15 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
       {/* Header */}
       <View style={styles.header}>
         <View style={styles.headerControls}>
-          <TouchableOpacity
-            onPress={handleBackPress}
-            hitSlop={styles.closeIconHitSlop}
-          >
-            <ChevronIcon direction="left" />
-          </TouchableOpacity>
+          {isPublisher ? null : (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              hitSlop={styles.closeIconHitSlop}
+              style={styles.backIcon}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          )}
 
           <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
             Change Name
@@ -130,7 +147,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     lineHeight: 24,
     letterSpacing: 0.15,
-    marginLeft: 8,
   },
   closeIconHitSlop: {
     bottom: 16,
@@ -138,6 +154,9 @@ const styles = StyleSheet.create({
     right: 16,
     top: 16,
   },
+  backIcon: {
+    marginRight: 8,
+  },
   contentContainer: {
     marginHorizontal: 24,
   },

package/src/components/ChatAndParticipants/ChatAndParticipantsHeader.tsx

@@ -8,7 +8,6 @@ import {
   useShowChatAndParticipants,
 } from '../../hooks-util';
 import type { RootState } from '../../redux';
-import { COLORS } from '../../utils/theme';
 import { ChatBottomSheetTabs } from '../../utils/types';
 import { setActiveChatBottomSheetTab } from '../../redux/actions';
 
@@ -25,6 +24,9 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerTitleWrapper: {
+      backgroundColor: theme.palette.surface_default,
+    },
     tab: {
       backgroundColor: theme.palette.surface_bright,
     },
@@ -67,7 +69,9 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
             : null}
         </Text>
       ) : (
-        <View style={styles.headerTitleWrapper}>
+        <View
+          style={[styles.headerTitleWrapper, hmsRoomStyles.headerTitleWrapper]}
+        >
           {visibleChatBottomSheetTabs.map((tab) => {
             const isActive = activeChatBottomSheetTab === tab;
 
@@ -118,7 +122,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     padding: 4,
     borderRadius: 8,
-    backgroundColor: COLORS.SURFACE.DEFAULT,
     marginRight: 16,
   },
   tab: {

package/src/components/ChatAndParticipants/ParticipantsView.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import { useFilteredParticipants } from '../../hooks-util';
 import { ParticipantsList, ParticipantsSearchInput } from '../Participants';
+import { MultiRoleParticipantsList } from '../Participants/MultiRoleParticipantsList';
 
 type ParticipantsViewProps = {};
 
 export const ParticipantsView: React.FC<ParticipantsViewProps> = () => {
-  const {
-    data,
-    searchText,
-    formattedSearchText,
-    setSearchText,
-    setExpandedGroups,
-  } = useFilteredParticipants();
+  const [searchText, setSearchText] = React.useState('');
+  const [selectedGroupId, setSelectedGroupId] = React.useState<string | null>(
+    null
+  );
+
+  const clearSelectedGroup = React.useCallback(() => {
+    setSelectedGroupId(null);
+  }, []);
 
   return (
     <>
@@ -23,11 +24,18 @@ export const ParticipantsView: React.FC<ParticipantsViewProps> = () => {
       />
 
       <View style={styles.listWrapper}>
-        <ParticipantsList
-          data={data}
-          setExpandedGroups={setExpandedGroups}
-          searchTextExists={formattedSearchText.length > 0}
-        />
+        {selectedGroupId === null ? (
+          <MultiRoleParticipantsList
+            searchText={searchText}
+            onViewAllPress={setSelectedGroupId}
+          />
+        ) : (
+          <ParticipantsList
+            searchText={searchText}
+            selectedGroupId={selectedGroupId}
+            onBackPress={clearSelectedGroup}
+          />
+        )}
       </View>
     </>
   );