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

package/src/hooks-util.ts

@@ -18,10 +18,13 @@ import {
   HMSTrackUpdate,
   HMSUpdateListenerActions,
   HMSMessageRecipient,
+  useHMSHLSPlayerResolution,
+  useHmsViewsResolutionsState,
   // useHMSPeerUpdates,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
 import type {
+  HMSPIPConfig,
   HMSRole,
   HMSSessionStore,
   HMSSessionStoreValue,
@@ -49,10 +52,11 @@ import type { DependencyList } from 'react';
 import {
   MaxTilesInOnePage,
   ModalTypes,
+  OnLeaveReason,
   PeerListRefreshInterval,
   PipModes,
 } from './utils/types';
-import type { ChatBroadcastFilter, PeerTrackNode } from './utils/types';
+import type { ChatBroadcastFilter, OnLeaveHandler, PeerTrackNode } from './utils/types';
 import { createPeerTrackNode } from './utils/functions';
 import {
   batch,
@@ -61,7 +65,7 @@ import {
   useSelector,
   useStore,
 } from 'react-redux';
-import type { RootState } from './redux';
+import type { AppDispatch, RootState } from './redux';
 import {
   addMessage,
   addNotification,
@@ -82,16 +86,20 @@ import {
   saveUserData,
   setActiveChatBottomSheetTab,
   setActiveSpeakers,
+  setAutoEnterPipMode,
   setFullScreenPeerTrackNode,
   setHMSLocalPeerState,
   setHMSRoleState,
   setHMSRoomState,
+  setHandleBackButton,
   setIsLocalAudioMutedState,
   setIsLocalVideoMutedState,
   setLayoutConfig,
   setLocalPeerTrackNode,
   setMiniViewPeerTrackNode,
   setModalType,
+  setOnLeaveHandler,
+  setPrebuiltData,
   setReconnecting,
   setRoleChangeRequest,
   setStartingOrStoppingRecording,
@@ -111,7 +119,13 @@ import {
   replacePeerTrackNodesWithTrack,
 } from './peerTrackNodeUtils';
 import { MeetingState } from './types';
-import { InteractionManager, Keyboard, Platform } from 'react-native';
+import type { HMSPrebuiltProps } from './types';
+import {
+  BackHandler,
+  InteractionManager,
+  Keyboard,
+  Platform,
+} from 'react-native';
 import type { ImageStyle, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 import {
@@ -129,7 +143,7 @@ import {
 import type { GridViewRefAttrs } from './components/GridView';
 import { getRoomLayout } from './modules/HMSManager';
 import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
-import { NotificationTypes } from './utils';
+import { NotificationTypes } from './types';
 
 export const useHMSListeners = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
@@ -1240,12 +1254,21 @@ export const useHMSReconnection = () => {
 
     hmsInstance.addEventListener(HMSUpdateListenerActions.RECONNECTING, () => {
       if (mounted) {
-        dispatch(setReconnecting(true));
+        batch(() => {
+          dispatch(setReconnecting(true));
+          dispatch(addNotification({
+            id: NotificationTypes.RECONNECTING,
+            type: NotificationTypes.RECONNECTING
+          }))
+        });
       }
     });
     hmsInstance.addEventListener(HMSUpdateListenerActions.RECONNECTED, () => {
       if (mounted) {
-        dispatch(setReconnecting(false));
+        batch(() => {
+          dispatch(setReconnecting(false));
+          dispatch(removeNotification(NotificationTypes.RECONNECTING));
+        })
       }
     });
 
@@ -1259,11 +1282,11 @@ export const useHMSReconnection = () => {
 
 export const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
-  const { destroy } = useLeaveMethods(true);
+  const { destroy } = useLeaveMethods();
 
   useEffect(() => {
     const pipRoomLeaveHandler = () => {
-      destroy();
+      destroy(OnLeaveReason.PIP);
     };
 
     hmsInstance.addEventListener(
@@ -1279,11 +1302,17 @@ export const useHMSPIPRoomLeave = () => {
 
 export const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
-  const { destroy } = useLeaveMethods(true);
+  const { destroy } = useLeaveMethods();
 
   useEffect(() => {
-    const removedFromRoomHandler = () => {
-      destroy();
+    const removedFromRoomHandler = (data: {
+      requestedBy?: HMSPeer | null;
+      reason?: string;
+      roomEnded?: boolean;
+    }) => {
+      destroy(
+        data.roomEnded ? OnLeaveReason.ROOM_END : OnLeaveReason.PEER_KICKED
+      );
     };
 
     hmsInstance.addEventListener(
@@ -1360,6 +1389,93 @@ export const useHMSNetworkQualityUpdate = () => {
   }, [hmsInstance]);
 };
 
+export type PIPConfig = Omit<HMSPIPConfig, 'autoEnterPipMode'>;
+
+export const useEnableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+
+  const enableAutoPip = useCallback(
+    (data?: PIPConfig) => {
+      hmsInstance.setPipParams({ ...data, autoEnterPipMode: true });
+    },
+    [hmsInstance]
+  );
+
+  return enableAutoPip;
+};
+
+export const useDisableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+
+  const disableAutoPip = useCallback(
+    (data?: PIPConfig) => {
+      hmsInstance.setPipParams({ ...data, autoEnterPipMode: false });
+    },
+    [hmsInstance]
+  );
+
+  return disableAutoPip;
+};
+
+export const useAutoPip = (oneToOneCall: boolean) => {
+  const enableAutoPip = useEnableAutoPip();
+  const disableAutoPip = useDisableAutoPip();
+
+  const autoEnterPipMode = useSelector(
+    (state: RootState) => state.app.autoEnterPipMode
+  );
+  const [numerator, denominator] = usePipAspectRatio(oneToOneCall);
+
+  useEffect(() => {
+    if (autoEnterPipMode) {
+      enableAutoPip({ aspectRatio: [numerator, denominator] });
+
+      return disableAutoPip;
+    }
+  }, [
+    numerator,
+    denominator,
+    autoEnterPipMode,
+    enableAutoPip,
+    disableAutoPip,
+  ]);
+};
+
+export const usePipAspectRatio = (oneToOneCall: boolean): [number, number] => {
+  const isHLSViewer = useIsHLSViewer();
+  const hlsPlayerResolution = useHMSHLSPlayerResolution();
+
+  const firstSSNodeId = useSelector((state: RootState) => {
+    const ssPeerTrackNode = state.app.screensharePeerTrackNodes[0];
+    return ssPeerTrackNode?.track?.trackId;
+  });
+
+  const ssResolution = useHmsViewsResolutionsState(firstSSNodeId);
+
+  const aspectRatio = useMemo((): [number, number] => {
+    // When user is hlsviewer and we have stream resolution
+    if (isHLSViewer && hlsPlayerResolution) {
+      return [hlsPlayerResolution.width, hlsPlayerResolution.height];
+    }
+    // When user is hlsviewer and we don't have stream resolution
+    if (isHLSViewer) {
+      return [9, 16];
+    }
+    // When we have screenshare resolution, use it
+    if (ssResolution) {
+      return [ssResolution.width, ssResolution.height];
+    }
+    // When there is no screenshare and one-to-one call is happening
+    if (!firstSSNodeId && oneToOneCall) {
+      return [9, 16];
+    }
+    // default aspect ratio
+    return [16, 9];
+  }, [isHLSViewer, firstSSNodeId, oneToOneCall, ssResolution, hlsPlayerResolution]);
+
+  return aspectRatio;
+}
+
 export const useHMSActiveSpeakerUpdates = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>,
   active?: boolean
@@ -1821,7 +1937,6 @@ export const useFilteredParticipants = (filterText: string) => {
           : list;
 
       if (Array.isArray(filteredList) && filteredList.length > 0) {
-
         filteredHandRaisedPeers.push(filteredList);
         const offStageRoleTotalCount =
           offStageParticipantsTotalCounts[role.name!];
@@ -1886,13 +2001,13 @@ export const useShouldGoLive = () => {
   return shouldGoLive;
 };
 
-export const useLeaveMethods = (isUnmounted: boolean) => {
+export const useLeaveMethods = () => {
   const navigation = useContext(NavigationContext);
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const reduxStore = useStore<RootState>();
 
-  const destroy = useCallback(() => {
+  const destroy = useCallback((reason: Parameters<OnLeaveHandler>[0]) => {
     try {
       const s = hmsInstance.destroy();
       console.log('Destroy Success: ', s);
@@ -1919,9 +2034,13 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
       const onLeave = reduxStore.getState().user.onLeave;
 
       if (typeof onLeave === 'function') {
-        onLeave();
+        onLeave(reason);
         dispatch(clearStore());
-      } else if (navigation && navigation.canGoBack() && !isUnmounted) {
+      } else if (
+        navigation &&
+        typeof navigation.canGoBack === 'function' &&
+        navigation.canGoBack()
+      ) {
         navigation.goBack();
         dispatch(clearStore());
       } else {
@@ -1941,7 +2060,7 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
   }, [hmsInstance]);
 
   const leave = useCallback(
-    async (shouldEndStream: boolean = false) => {
+    async (reason: OnLeaveReason, shouldEndStream: boolean = false) => {
       if (shouldEndStream) {
         hmsInstance.stopHLSStreaming().catch((error) => {
           console.log('Stop HLS Streaming Error: ', error);
@@ -1950,7 +2069,7 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
       try {
         const d = await hmsInstance.leave();
         console.log('Leave Success: ', d);
-        await destroy();
+        await destroy(reason);
       } catch (e) {
         console.log(`Leave Room Error: ${e}`);
         Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
@@ -1959,31 +2078,31 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
     [destroy, hmsInstance]
   );
 
-  const goToPreview = useCallback(async () => {
+  const prebuiltCleanUp = useCallback(async () => {
     try {
       await hmsInstance.leave();
       await hmsInstance.destroy();
       dispatch(clearStore());
     } catch (error) {
       Toast.showWithGravity(
-        `Unable to go to Preview: ${error}`,
+        `Unable to leave or destroy: ${error}`,
         Toast.LONG,
         Toast.TOP
       );
     }
   }, [hmsInstance]);
 
-  const endRoom = useCallback(async () => {
+  const endRoom = useCallback(async (reason: OnLeaveReason) => {
     try {
       const d = await hmsInstance.endRoom('Host ended the room');
       console.log('EndRoom Success: ', d);
-      await destroy();
+      await destroy(reason);
     } catch (e) {
       console.log('EndRoom Error: ', e);
     }
   }, [destroy, hmsInstance]);
 
-  return { destroy, leave, endRoom, goToPreview };
+  return { destroy, leave, endRoom, prebuiltCleanUp };
 };
 
 // Returns layout config as it is returned from server
@@ -2189,3 +2308,101 @@ export const useHMSConferencingScreenConfig = <Selected = unknown>(
     return selector(conferencingScreenConfig);
   }, equalityFn);
 };
+
+export const useBackButtonPress = () => {
+  const { handleModalVisibleType } = useModalType();
+
+  const handleBackPress = useSelector(
+    (state: RootState) => state.app.handleBackButton
+  );
+
+  useEffect(() => {
+    if (handleBackPress) {
+      const backPressHandler = () => {
+        handleModalVisibleType(ModalTypes.LEAVE_ROOM);
+
+        /**
+         * When true is returned the event will not be bubbled up
+         * & no other back action will execute
+         */
+        return true;
+
+        /**
+         * Returning false will let the event to bubble up & let other event listeners
+         * or the system's default back action to be executed.
+         */
+        // return false;
+      };
+
+      const subscription = BackHandler.addEventListener(
+        'hardwareBackPress',
+        backPressHandler
+      );
+
+      return () => {
+        if (typeof subscription.remove === 'function') {
+          subscription.remove();
+        } else {
+          BackHandler.removeEventListener(
+            'hardwareBackPress',
+            backPressHandler
+          );
+        }
+      };
+    }
+  }, [handleBackPress, handleModalVisibleType]);
+};
+
+export const useSavePropsToStore = (
+  props: HMSPrebuiltProps,
+  dispatch: AppDispatch
+) => {
+  const { roomCode, options, onLeave, handleBackButton, autoEnterPipMode } =
+    props;
+
+  useEffect(() => {
+    dispatch(setPrebuiltData({ roomCode, options }));
+  }, [roomCode, options]);
+
+  useEffect(() => {
+    dispatch(setOnLeaveHandler(onLeave));
+  }, [onLeave]);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      dispatch(setHandleBackButton(handleBackButton));
+    }
+  }, [handleBackButton]);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      dispatch(setAutoEnterPipMode(autoEnterPipMode));
+    }
+  }, [autoEnterPipMode]);
+};
+
+export const useStartRecording = () => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+
+  const startRecording = useCallback(() => {
+    dispatch(setStartingOrStoppingRecording(true));
+
+    hmsInstance.startRTMPOrRecording({ record: true }).catch((error) => {
+      batch(() => {
+        dispatch(setStartingOrStoppingRecording(false));
+        dispatch(
+          addNotification({
+            id: Math.random().toString(16).slice(2),
+            type: NotificationTypes.ERROR,
+            message: error.message
+          })
+        );
+      });
+    });
+  }, [hmsInstance]);
+
+  return {
+    startRecording,
+  };
+};

package/src/index.ts

@@ -1 +1,3 @@
 export * from './HMSPrebuilt';
+export { OnLeaveReason } from './utils/types';
+export type { OnLeaveHandler, HMSIOSScreenShareConfig } from './utils/types';

package/src/redux/actionTypes.ts

@@ -84,6 +84,10 @@ const SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB = 'SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB';
 
 const SET_CHAT_FILTER_SHEET_VISIBLE = 'SET_CHAT_FILTER_SHEET_VISIBLE';
 
+const SET_HANDLE_BACK_BUTTON = 'SET_HANDLE_BACK_BUTTON';
+
+const SET_AUTO_ENTER_PIP_MODE = 'SET_AUTO_ENTER_PIP_MODE';
+
 export default {
   ADD_PINNED_MESSAGE,
   ADD_MESSAGE,
@@ -123,11 +127,14 @@ export default {
   REMOVE_NOTIFICATION,
   SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB,
   SET_CHAT_FILTER_SHEET_VISIBLE,
+  SET_HANDLE_BACK_BUTTON,
+  SET_AUTO_ENTER_PIP_MODE,
 };
 
 export enum HmsStateActionTypes {
   CLEAR_STATES = 'CLEAR_STATES',
   SET_PREBUILT_DATA = 'SET_PREBUILT_DATA',
+  SET_ON_LEAVE_HANDLER = 'SET_ON_LEAVE_HANDLER',
   SET_ROOM_STATE = 'SET_ROOM_STATE',
   SET_LOCAL_PEER_STATE = 'SET_LOCAL_PEER_STATE',
   SET_ROLES_STATE = 'SET_ROLES_STATE',

package/src/redux/actions/index.ts

@@ -18,11 +18,13 @@ import type {
   ChatBottomSheetTabs,
   HMSIOSScreenShareConfig,
   ModalTypes,
+  OnLeaveHandler,
   PeerTrackNode,
   PipModes,
 } from '../../utils/types';
 import actionTypes, { HmsStateActionTypes } from '../actionTypes';
 import { MeetingState } from '../../types';
+import type { Notification } from '../../types';
 
 export const setPrebuiltData = (data: {
   roomCode: string;
@@ -37,12 +39,16 @@ export const setPrebuiltData = (data: {
     };
     ios?: HMSIOSScreenShareConfig;
   };
-  onLeave?: () => void;
 }) => ({
   type: HmsStateActionTypes.SET_PREBUILT_DATA,
   payload: data,
 });
 
+export const setOnLeaveHandler = (onLeave?: OnLeaveHandler) => ({
+  type: HmsStateActionTypes.SET_ON_LEAVE_HANDLER,
+  payload: { onLeave },
+});
+
 export const clearStore = () => ({
   type: HmsStateActionTypes.CLEAR_STATES,
 });
@@ -306,16 +312,12 @@ export const updateScreenshareTile = (
   payload: data,
 });
 
-export const addNotification = (notification: {
-  id: string;
-  type: string;
-  peer: HMSPeer;
-}) => ({
+export const addNotification = (notification: Notification) => ({
   type: actionTypes.ADD_NOTIFICATION,
   payload: { notification },
 });
 
-export const removeNotification = (notificationId: string) => ({
+export const removeNotification = (notificationId: Notification['id']) => ({
   type: actionTypes.REMOVE_NOTIFICATION,
   payload: { id: notificationId },
 });
@@ -379,3 +381,13 @@ export const setReconnecting = (reconnecting: boolean) => ({
   type: HmsStateActionTypes.SET_RECONNECTING,
   reconnecting,
 });
+
+export const setHandleBackButton = (handleBackButton?: boolean) => ({
+  type: actionTypes.SET_HANDLE_BACK_BUTTON,
+  payload: { handleBackButton },
+});
+
+export const setAutoEnterPipMode = (autoEnterPipMode?: boolean) => ({
+  type: actionTypes.SET_AUTO_ENTER_PIP_MODE,
+  payload: { autoEnterPipMode },
+});

package/src/redux/reducers/appState.ts

@@ -11,6 +11,7 @@ import {
   HMSRemoteVideoStats,
 } from '@100mslive/react-native-hms';
 import { MeetingState } from '../../types';
+import type { Notification } from '../../types';
 
 type ActionType = {
   payload: { [key: string]: any };
@@ -48,9 +49,11 @@ type IntialStateType = {
   startingOrStoppingRecording: boolean;
   fullScreenPeerTrackNode: null | PeerTrackNode;
   screensharePeerTrackNodes: PeerTrackNode[];
-  notifications: { id: string; type: string; peer: HMSPeer }[];
+  notifications: Notification[];
   activeChatBottomSheetTab: (typeof ChatBottomSheetTabs)[number];
   chatFilterSheetVisible: boolean;
+  handleBackButton: boolean;
+  autoEnterPipMode: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -80,6 +83,8 @@ const INITIAL_STATE: IntialStateType = {
   notifications: [],
   activeChatBottomSheetTab: ChatBottomSheetTabs[0],
   chatFilterSheetVisible: false,
+  handleBackButton: false,
+  autoEnterPipMode: false,
 };
 
 const appReducer = (
@@ -283,6 +288,18 @@ const appReducer = (
         chatFilterSheetVisible: action.payload.chatFilterSheetVisible,
       };
     }
+    case ActionTypes.SET_HANDLE_BACK_BUTTON: {
+      return {
+        ...state,
+        handleBackButton: action.payload.handleBackButton ?? INITIAL_STATE.handleBackButton,
+      };
+    }
+    case ActionTypes.SET_AUTO_ENTER_PIP_MODE: {
+      return {
+        ...state,
+        autoEnterPipMode: action.payload.autoEnterPipMode ?? INITIAL_STATE.autoEnterPipMode,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/userState.ts

@@ -5,7 +5,7 @@ import type {
 } from '@100mslive/react-native-hms';
 import { getMeetingCode, getMeetingUrl } from '../../utils/functions';
 import ActionTypes, { HmsStateActionTypes } from '../actionTypes';
-import type { HMSIOSScreenShareConfig } from '../../utils/types';
+import type { HMSIOSScreenShareConfig, OnLeaveHandler } from '../../utils/types';
 
 type ActionType = {
   payload: any;
@@ -25,7 +25,7 @@ type IntialStateType = {
   isHLSFlow: boolean;
   roles: HMSRole[];
   iosBuildConfig: HMSIOSScreenShareConfig | null;
-  onLeave: (() => void) | undefined;
+  onLeave: OnLeaveHandler | undefined;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -78,9 +78,13 @@ const userReducer = (
       state.endPoints = action.payload.options.endPoints;
       state.debugMode = action.payload.options.debugMode ?? false;
       state.iosBuildConfig = action.payload.options.ios ?? null;
-      state.onLeave = action.payload.onLeave;
 
       return state;
+    case HmsStateActionTypes.SET_ON_LEAVE_HANDLER:
+      return {
+        ...state,
+        onLeave: action.payload.onLeave,
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/types.ts

@@ -1,3 +1,6 @@
+import type { HMSException, HMSPeer } from "@100mslive/react-native-hms";
+import type { HMSIOSScreenShareConfig, OnLeaveHandler } from "./utils/types";
+
 export enum MeetingState {
   NOT_JOINED,
   IN_PREVIEW,
@@ -5,3 +8,71 @@ export enum MeetingState {
   MEETING_ENDED,
   ERROR,
 }
+export interface HMSPrebuiltProps {
+  roomCode: string;
+  options?: {
+    userName?: string;
+    userId?: string;
+    endPoints?: {
+      init: string;
+      token: string;
+      layout: string;
+    };
+    debugMode?: boolean;
+    ios?: HMSIOSScreenShareConfig;
+  };
+  /**
+   * onLeave - Optional callback function
+   *
+   * It will be invoked when user leaves meeting or user is removed from the room
+   */
+  onLeave?: OnLeaveHandler;
+  /**
+   * [Android Only] handleBackButton - `Optional<Boolean>` | Default value - `false`
+   *
+   * When `true`, Leave modal will open on press of back button on android
+   * otherwise user will leave meeting immediately without any confirmation modal opening
+   *
+   * Example usage:
+   * ```jsx
+   * const isScreenFocused = useIsFocused();
+   *
+   * ...
+   *
+   * <HMSPrebuilt
+   *  {...}
+   *  handleBackButton={isScreenFocused}
+   * />
+   * ```
+   */
+  handleBackButton?: boolean;
+  /**
+   * [Android Only] autoEnterPipMode - `Optional<Boolean>` | Default value - `false`
+   *
+   * When `true`, App will go into PIP mode automatically when user tries to leave or minimize app while it is inside room
+   *
+   * Example usage:
+   * ```jsx
+   * <HMSPrebuilt
+   *  {...}
+   *  autoEnterPipMode={true}
+   * />
+   * ```
+   */
+  autoEnterPipMode?: boolean;
+}
+
+export enum NotificationTypes {
+  ROLE_CHANGE_DECLINED = 'role_change_declined',
+  RECONNECTING = 'reconnecting',
+  HAND_RAISE = 'hand_raise',
+  LOCAL_SCREENSHARE = 'local_screenshare',
+  ERROR = 'error',
+  TERMINAL_ERROR = 'terminal_error',
+}
+
+export type Notification =
+  | { id: string; type: NotificationTypes; }
+  | { id: string; type: NotificationTypes; message: string; }
+  | { id: string; type: NotificationTypes; peer: HMSPeer; }
+  | { id: string; type: NotificationTypes; exception: HMSException; }