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

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',
@@ -141,8 +148,11 @@ export enum HmsStateActionTypes {
   SET_LAYOUT_CONFIG = 'SET_LAYOUT_CONFIG',
   SET_ROLE_CHANGE_REQUEST = 'SET_ROLE_CHANGE_REQUEST',
   ADD_PARTICIPANT = 'ADD_PARTICIPANT',
+  ADD_PARTICIPANTS = 'ADD_PARTICIPANTS',
   REMOVE_PARTICIPANT = 'REMOVE_PARTICIPANT',
-  ADD_UPDATE_PARTICIPANT = 'ADD_UPDATE_PARTICIPANT',
+  REMOVE_PARTICIPANTS = 'REMOVE_PARTICIPANTS',
+  UPDATE_PARTICIPANT = 'UPDATE_PARTICIPANT',
+  REPLACE_PARTICIPANTS_LIST = 'REPLACE_PARTICIPANTS_LIST',
   SET_ACTIVE_SPEAKERS = 'SET_ACTIVE_SPEAKERS',
   SET_RECONNECTING = 'SET_RECONNECTING',
 }

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 },
 });
@@ -344,16 +346,32 @@ export const addParticipant = (participant: HMSPeer) => ({
   participant,
 });
 
+export const addParticipants = (participants: HMSPeer[]) => ({
+  type: HmsStateActionTypes.ADD_PARTICIPANTS,
+  participants,
+});
+
 export const removeParticipant = (participant: HMSPeer) => ({
   type: HmsStateActionTypes.REMOVE_PARTICIPANT,
   participant,
 });
 
+export const removeParticipants = (participants: HMSPeer[]) => ({
+  type: HmsStateActionTypes.REMOVE_PARTICIPANTS,
+  participants,
+});
+
 export const addUpdateParticipant = (participant: HMSPeer) => ({
-  type: HmsStateActionTypes.ADD_UPDATE_PARTICIPANT,
+  type: HmsStateActionTypes.UPDATE_PARTICIPANT,
   participant,
 });
 
+export const replaceParticipantsList = (participants: HMSPeer[], roleName: string) => ({
+  type: HmsStateActionTypes.REPLACE_PARTICIPANTS_LIST,
+  participants,
+  roleName,
+});
+
 export const setActiveSpeakers = (activeSpeakers: HMSSpeaker[]) => ({
   type: HmsStateActionTypes.SET_ACTIVE_SPEAKERS,
   activeSpeakers,
@@ -363,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/hmsStates.ts

@@ -23,8 +23,11 @@ type ActionType =
   | SetLayoutConfig
   | SetRoleChangeRequest
   | AddParticipant
+  | AddParticipants
   | RemoveParticipant
+  | RemoveParticipants
   | AddUpdateParticipant
+  | ReplaceParticipantsList
   | SetActiveSpeakers
   | SetReconnecting;
 
@@ -92,16 +95,32 @@ type AddParticipant = {
   participant: HMSPeer;
 };
 
+type AddParticipants = {
+  type: HmsStateActionTypes.ADD_PARTICIPANTS;
+  participants: HMSPeer[];
+};
+
 type RemoveParticipant = {
   type: HmsStateActionTypes.REMOVE_PARTICIPANT;
   participant: HMSPeer;
 };
 
+type RemoveParticipants = {
+  type: HmsStateActionTypes.REMOVE_PARTICIPANTS;
+  participants: HMSPeer[];
+};
+
 type AddUpdateParticipant = {
-  type: HmsStateActionTypes.ADD_UPDATE_PARTICIPANT;
+  type: HmsStateActionTypes.UPDATE_PARTICIPANT;
   participant: HMSPeer;
 };
 
+type ReplaceParticipantsList = {
+  type: HmsStateActionTypes.REPLACE_PARTICIPANTS_LIST;
+  roleName: string;
+  participants: HMSPeer[];
+};
+
 type SetActiveSpeakers = {
   type: HmsStateActionTypes.SET_ACTIVE_SPEAKERS;
   activeSpeakers: HMSSpeaker[];
@@ -120,7 +139,7 @@ type IntialStateType = {
   roomLocallyMuted: boolean;
   room: HMSRoom | null;
   localPeer: HMSLocalPeer | null;
-  participants: (HMSPeer | HMSLocalPeer)[];
+  groupedParticipants: Record<string, (HMSPeer | HMSLocalPeer)[]>;
   activeSpeakers: HMSSpeaker[];
   roles: HMSRole[];
   previewPeersList: HMSPeer[];
@@ -136,7 +155,7 @@ const INITIAL_STATE: IntialStateType = {
   roomLocallyMuted: false,
   room: null,
   localPeer: null,
-  participants: [],
+  groupedParticipants: {},
   activeSpeakers: [],
   roles: [],
   previewPeersList: [],
@@ -155,12 +174,70 @@ const hmsStatesReducer = (
         room: action.room,
       };
     case HmsStateActionTypes.SET_LOCAL_PEER_STATE: {
-      const participantsHasLocalPeer =
-        action.localPeer !== null
-          ? state.participants.findIndex(
-              (participant) => participant.peerID === action.localPeer?.peerID
-            ) >= 0
-          : false;
+      let updatedGroupedParticipants = state.groupedParticipants;
+
+      if (action.localPeer !== null) {
+        const savedLocalPeer = Object.values(state.groupedParticipants)
+          .flat()
+          .find(
+            (participant) => participant.peerID === action.localPeer?.peerID
+          );
+
+        // update peer or check if  role change happened
+        if (savedLocalPeer) {
+          const previousRoleName = savedLocalPeer.role?.name!;
+          const currentRoleName = action.localPeer.role?.name!;
+
+          const roleChanged = previousRoleName !== currentRoleName;
+
+          if (roleChanged) {
+            const previousList = state.groupedParticipants[previousRoleName];
+            const currentList = state.groupedParticipants[currentRoleName];
+
+            updatedGroupedParticipants = {
+              ...state.groupedParticipants,
+              // add to new list
+              [currentRoleName]: Array.isArray(currentList)
+                ? [action.localPeer, ...currentList]
+                : [action.localPeer],
+              // delete from old list
+              [previousRoleName]: Array.isArray(previousList)
+                ? previousList.filter(
+                    (peer) => peer.peerID !== action.localPeer?.peerID
+                  )
+                : [],
+            };
+          } else {
+            const participants = state.groupedParticipants[currentRoleName];
+
+            updatedGroupedParticipants = {
+              ...state.groupedParticipants,
+              [currentRoleName]: Array.isArray(participants)
+                ? participants.map((participant) =>
+                    participant.peerID === action.localPeer?.peerID
+                      ? action.localPeer
+                      : participant
+                  )
+                : [action.localPeer],
+            };
+          }
+        }
+        // add peer
+        else {
+          const localPeerRoleName = action.localPeer.role?.name;
+
+          if (localPeerRoleName) {
+            const participants = state.groupedParticipants[localPeerRoleName];
+
+            updatedGroupedParticipants = {
+              ...state.groupedParticipants,
+              [localPeerRoleName]: Array.isArray(participants)
+                ? [action.localPeer, ...participants]
+                : [action.localPeer],
+            };
+          }
+        }
+      }
 
       return {
         ...state,
@@ -169,21 +246,21 @@ const hmsStatesReducer = (
         isLocalVideoMuted: action.localPeer?.videoTrack?.isMute(),
 
         // Adding or updating local peer in participants list
-        participants:
-          action.localPeer !== null
-            ? participantsHasLocalPeer
-              ? state.participants.map((participant) =>
-                  participant.peerID === action.localPeer?.peerID
-                    ? action.localPeer
-                    : participant
-                )
-              : [action.localPeer, ...state.participants]
-            : state.participants,
+        groupedParticipants: updatedGroupedParticipants,
       };
     }
     case HmsStateActionTypes.ADD_PARTICIPANT: {
+      const participantRoleName = action.participant.role?.name;
+
+      if (!participantRoleName) {
+        return state;
+      }
+
+      const participants = state.groupedParticipants[participantRoleName];
+
       if (
-        state.participants.findIndex(
+        Array.isArray(participants) &&
+        participants.findIndex(
           (participant) => participant.peerID === action.participant.peerID
         ) >= 0
       ) {
@@ -192,44 +269,200 @@ const hmsStatesReducer = (
 
       return {
         ...state,
-        participants: [...state.participants, action.participant],
+        groupedParticipants: {
+          ...state.groupedParticipants,
+          [participantRoleName]: Array.isArray(participants)
+            ? [...participants, action.participant]
+            : [action.participant],
+        },
+      };
+    }
+    case HmsStateActionTypes.ADD_PARTICIPANTS: {
+      const participantsToAdd = new Map<string, (HMSPeer | HMSLocalPeer)[]>();
+
+      const participants = Object.values(state.groupedParticipants).flat();
+
+      action.participants.forEach((peerToAdd) => {
+        // check if `peerToAdd` already exists
+        const exists =
+          participants.findIndex(
+            (participant) => participant.peerID === peerToAdd.peerID
+          ) >= 0;
+
+        // if not exists, push to existing list or create new against the role
+        if (!exists) {
+          const list = participantsToAdd.get(peerToAdd.role?.name!);
+
+          if (list) {
+            list.push(peerToAdd);
+          } else {
+            participantsToAdd.set(peerToAdd.role?.name!, [peerToAdd]);
+          }
+        }
+      });
+
+      if (participantsToAdd.size === 0) {
+        return state;
+      }
+
+      let updatedGroupedParticipants = { ...state.groupedParticipants };
+
+      participantsToAdd.forEach((list, roleName) => {
+        const oldList = updatedGroupedParticipants[roleName];
+        updatedGroupedParticipants[roleName] = Array.isArray(oldList)
+          ? [...oldList, ...list]
+          : list;
+      });
+
+      return {
+        ...state,
+        groupedParticipants: updatedGroupedParticipants,
       };
     }
     case HmsStateActionTypes.REMOVE_PARTICIPANT: {
+      const participantRoleName = action.participant.role?.name;
+
+      if (!participantRoleName) {
+        return state;
+      }
+
+      const participants = state.groupedParticipants[participantRoleName];
+
       if (
-        state.participants.findIndex(
+        Array.isArray(participants) &&
+        participants.findIndex(
           (participant) => participant.peerID === action.participant.peerID
         ) >= 0
       ) {
         return {
           ...state,
-          participants: state.participants.filter(
-            (participant) => participant.peerID !== action.participant.peerID
-          ),
+          groupedParticipants: {
+            ...state.groupedParticipants,
+            [participantRoleName]: participants.filter(
+              (participant) => participant.peerID !== action.participant.peerID
+            ),
+          },
         };
       }
 
       return state;
     }
-    case HmsStateActionTypes.ADD_UPDATE_PARTICIPANT: {
-      if (
-        state.participants.findIndex(
+    case HmsStateActionTypes.REMOVE_PARTICIPANTS: {
+      const participantsToRemove = new Map<
+        string,
+        (HMSPeer | HMSLocalPeer)[]
+      >();
+
+      const participants = Object.values(state.groupedParticipants).flat();
+
+      action.participants.forEach((peerToAdd) => {
+        // check if `peerToAdd` already exists
+        const exists =
+          participants.findIndex(
+            (participant) => participant.peerID === peerToAdd.peerID
+          ) >= 0;
+
+        // if exists, push to existing list or create new against the role
+        if (exists) {
+          const list = participantsToRemove.get(peerToAdd.role?.name!);
+
+          if (list) {
+            list.push(peerToAdd);
+          } else {
+            participantsToRemove.set(peerToAdd.role?.name!, [peerToAdd]);
+          }
+        }
+      });
+
+      if (participantsToRemove.size === 0) {
+        return state;
+      }
+
+      let updatedGroupedParticipants = { ...state.groupedParticipants };
+
+      participantsToRemove.forEach((list, roleName) => {
+        const oldList = updatedGroupedParticipants[roleName];
+        updatedGroupedParticipants[roleName] = Array.isArray(oldList)
+          ? oldList.filter((participant) => {
+              const notExists =
+                list.findIndex(
+                  (peerToRemove) => peerToRemove.peerID === participant.peerID
+                ) < 0;
+
+              // if `participant` is not in `removedPeers` list
+              // then keep it, otherwise remove it
+              return notExists;
+            })
+          : [];
+      });
+
+      return {
+        ...state,
+        groupedParticipants: updatedGroupedParticipants,
+      };
+    }
+    case HmsStateActionTypes.UPDATE_PARTICIPANT: {
+      const previousParticipant = Object.values(state.groupedParticipants)
+        .flat()
+        .find(
           (participant) => participant.peerID === action.participant.peerID
-        ) >= 0
-      ) {
+        );
+
+      if (!previousParticipant) {
+        return state;
+      }
+
+      const previousRoleName = previousParticipant.role?.name!;
+      const currentRoleName = action.participant.role?.name!;
+
+      // check if role change
+      if (previousRoleName !== currentRoleName) {
+        const previousRoleList = state.groupedParticipants[previousRoleName];
+        const currentRoleList = state.groupedParticipants[currentRoleName];
+
         return {
           ...state,
-          participants: state.participants.map((participant) =>
-            participant.peerID === action.participant.peerID
-              ? action.participant
-              : participant
-          ),
+          groupedParticipants: {
+            ...state.groupedParticipants,
+            // - add to new
+            [currentRoleName]: Array.isArray(currentRoleList)
+              ? [...currentRoleList, action.participant]
+              : [action.participant],
+            // - delete from old
+            [previousRoleName]: Array.isArray(previousRoleList)
+              ? previousRoleList.filter(
+                  (p) => p.peerID !== action.participant.peerID
+                )
+              : [],
+          },
         };
       }
 
+      // update existing
+
+      const currentList = state.groupedParticipants[currentRoleName];
+
+      return {
+        ...state,
+        groupedParticipants: {
+          ...state.groupedParticipants,
+          [currentRoleName]: Array.isArray(currentList)
+            ? currentList.map((p) =>
+                p.peerID === action.participant.peerID
+                  ? action.participant
+                  : p
+              )
+            : [action.participant],
+        },
+      };
+    }
+    case HmsStateActionTypes.REPLACE_PARTICIPANTS_LIST: {
       return {
         ...state,
-        participants: [...state.participants, action.participant],
+        groupedParticipants: {
+          ...state.groupedParticipants,
+          [action.roleName]: action.participants
+        },
       };
     }
     case HmsStateActionTypes.SET_ROLES_STATE:

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; }

package/src/utils/functions.ts

@@ -52,7 +52,6 @@ export const getInitials = (name?: String): String => {
 export const parseMetadata = (
   metadata?: string
 ): {
-  isHandRaised?: boolean;
   isBRBOn?: boolean;
   prevRole?: string;
 } => {