@100mslive/react-native-room-kit 0.2.0 → 1.0.1

package/src/redux/reducers/hmsStates.ts

@@ -2,7 +2,9 @@ import type {
   HMSLocalPeer,
   HMSPeer,
   HMSRole,
+  HMSRoleChangeRequest,
   HMSRoom,
+  HMSSpeaker,
 } from '@100mslive/react-native-hms';
 import type { Layout } from '@100mslive/types-prebuilt';
 import { HmsStateActionTypes } from '../actionTypes';
@@ -18,7 +20,16 @@ type ActionType =
   | ResetAction
   | AddToPreviewPeersList
   | RemoveFromPreviewPeersList
-  | SetLayoutConfig;
+  | SetLayoutConfig
+  | SetRoleChangeRequest
+  | AddParticipant
+  | AddParticipants
+  | RemoveParticipant
+  | RemoveParticipants
+  | AddUpdateParticipant
+  | ReplaceParticipantsList
+  | SetActiveSpeakers
+  | SetReconnecting;
 
 type SetRoomAction = {
   type: HmsStateActionTypes.SET_ROOM_STATE;
@@ -71,31 +82,85 @@ type RemoveFromPreviewPeersList = {
 
 type SetLayoutConfig = {
   type: HmsStateActionTypes.SET_LAYOUT_CONFIG;
-  layoutConfig: Layout;
+  layoutConfig: Layout[];
+};
+
+type SetRoleChangeRequest = {
+  type: HmsStateActionTypes.SET_ROLE_CHANGE_REQUEST;
+  roleChangeRequest: HMSRoleChangeRequest | null;
+};
+
+type AddParticipant = {
+  type: HmsStateActionTypes.ADD_PARTICIPANT;
+  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.UPDATE_PARTICIPANT;
+  participant: HMSPeer;
+};
+
+type ReplaceParticipantsList = {
+  type: HmsStateActionTypes.REPLACE_PARTICIPANTS_LIST;
+  roleName: string;
+  participants: HMSPeer[];
+};
+
+type SetActiveSpeakers = {
+  type: HmsStateActionTypes.SET_ACTIVE_SPEAKERS;
+  activeSpeakers: HMSSpeaker[];
+};
+
+type SetReconnecting = {
+  type: HmsStateActionTypes.SET_RECONNECTING;
+  reconnecting: boolean;
 };
 
 type IntialStateType = {
   isLocalAudioMuted: boolean | undefined;
   isLocalVideoMuted: boolean | undefined;
   isLocalScreenShared: boolean | undefined;
+  reconnecting: boolean;
   roomLocallyMuted: boolean;
   room: HMSRoom | null;
   localPeer: HMSLocalPeer | null;
+  groupedParticipants: Record<string, (HMSPeer | HMSLocalPeer)[]>;
+  activeSpeakers: HMSSpeaker[];
   roles: HMSRole[];
   previewPeersList: HMSPeer[];
-  layoutConfig: Layout | null;
+  layoutConfig: Layout[] | null;
+  roleChangeRequest: HMSRoleChangeRequest | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
   isLocalAudioMuted: undefined,
   isLocalVideoMuted: undefined,
   isLocalScreenShared: undefined,
+  reconnecting: false,
   roomLocallyMuted: false,
   room: null,
   localPeer: null,
+  groupedParticipants: {},
+  activeSpeakers: [],
   roles: [],
   previewPeersList: [],
   layoutConfig: null,
+  roleChangeRequest: null,
 };
 
 const hmsStatesReducer = (
@@ -108,18 +173,308 @@ const hmsStatesReducer = (
         ...state,
         room: action.room,
       };
-    case HmsStateActionTypes.SET_LOCAL_PEER_STATE:
+    case HmsStateActionTypes.SET_LOCAL_PEER_STATE: {
+      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,
         localPeer: action.localPeer,
         isLocalAudioMuted: action.localPeer?.audioTrack?.isMute(),
         isLocalVideoMuted: action.localPeer?.videoTrack?.isMute(),
+
+        // Adding or updating local peer in participants list
+        groupedParticipants: updatedGroupedParticipants,
       };
+    }
+    case HmsStateActionTypes.ADD_PARTICIPANT: {
+      const participantRoleName = action.participant.role?.name;
+
+      if (!participantRoleName) {
+        return state;
+      }
+
+      const participants = state.groupedParticipants[participantRoleName];
+
+      if (
+        Array.isArray(participants) &&
+        participants.findIndex(
+          (participant) => participant.peerID === action.participant.peerID
+        ) >= 0
+      ) {
+        return state;
+      }
+
+      return {
+        ...state,
+        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 (
+        Array.isArray(participants) &&
+        participants.findIndex(
+          (participant) => participant.peerID === action.participant.peerID
+        ) >= 0
+      ) {
+        return {
+          ...state,
+          groupedParticipants: {
+            ...state.groupedParticipants,
+            [participantRoleName]: participants.filter(
+              (participant) => participant.peerID !== action.participant.peerID
+            ),
+          },
+        };
+      }
+
+      return state;
+    }
+    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
+        );
+
+      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,
+          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,
+        groupedParticipants: {
+          ...state.groupedParticipants,
+          [action.roleName]: action.participants
+        },
+      };
+    }
     case HmsStateActionTypes.SET_ROLES_STATE:
       return {
         ...state,
         roles: action.roles,
       };
+    case HmsStateActionTypes.SET_ACTIVE_SPEAKERS:
+      return {
+        ...state,
+        activeSpeakers: action.activeSpeakers,
+      };
     case HmsStateActionTypes.SET_IS_LOCAL_AUDIO_MUTED_STATE:
       return {
         ...state,
@@ -157,6 +512,16 @@ const hmsStatesReducer = (
         ...state,
         layoutConfig: action.layoutConfig,
       };
+    case HmsStateActionTypes.SET_ROLE_CHANGE_REQUEST:
+      return {
+        ...state,
+        roleChangeRequest: action.roleChangeRequest,
+      };
+    case HmsStateActionTypes.SET_RECONNECTING:
+      return {
+        ...state,
+        reconnecting: action.reconnecting,
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/userState.ts

@@ -15,7 +15,7 @@ type ActionType = {
 type IntialStateType = {
   userName: string;
   userId: string | undefined;
-  endPoints: { init: string; token: string } | undefined;
+  endPoints: { init: string; token: string; layout: string; } | undefined;
   debugMode: boolean;
   roomID: string;
   hmsInstance?: HMSSDK;

package/src/utils/functions.ts

@@ -11,6 +11,7 @@ import {
   HMSTrackType,
   HMSTrackSource,
   HMSVideoTrack,
+  HMSRole,
 } from '@100mslive/react-native-hms';
 
 import type { PeerTrackNode } from './types';
@@ -51,8 +52,8 @@ export const getInitials = (name?: String): String => {
 export const parseMetadata = (
   metadata?: string
 ): {
-  isHandRaised?: boolean;
   isBRBOn?: boolean;
+  prevRole?: string;
 } => {
   try {
     if (metadata) {
@@ -568,3 +569,10 @@ export function groupIntoTriplets<T>(list: T[], fill?: boolean) {
   }
   return pairs;
 }
+
+export const isParticipantHostOrBroadcaster = (role: HMSRole): boolean => {
+  const allowed = role.publishSettings?.allowed;
+  const canChangeRole = role.permissions?.changeRole;
+
+  return Boolean(allowed && allowed.length > 0 && canChangeRole);
+};

package/src/utils/theme.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { Theme_ThemeType } from '@100mslive/types-prebuilt';
 import type {
   ColorPalette,
   Theme,
@@ -193,12 +194,13 @@ export function hexToRgbA(hex: string, alpha: number = 1) {
   )}, ${alpha})`;
 }
 
-export const DEFAULT_TYPOGRAPHY: Typography = {
+export const DEFAULT_TYPOGRAPHY: Required<Typography> = {
   font_family: 'Inter',
 };
 
 export const DEFAULT_THEME: Required<Theme> = {
   default: true,
   name: 'static',
+  theme_type: Theme_ThemeType.THEME_TYPE_DARK,
   palette: STATIC_COLOR_PALETTE,
 };

package/src/utils/types.ts

@@ -44,10 +44,9 @@ export enum ModalTypes {
   LEAVE_ROOM = 'leaveRoom',
   END_ROOM = 'endRoom',
   SETTINGS = 'settings',
-  CHAT = 'chat',
   ZOOM = 'zoom',
   PREVIEW = 'preview',
-  PARTICIPANTS = 'participants',
+  CHAT_AND_PARTICIPANTS = 'chat_and_participants',
   AUDIO_MIXING_MODE = 'audioMixingMode',
   SET_AUDIO_SHARE_VOLUME = 'setAudioShareVolume',
   WELCOME_SETTINGS = 'welcomeSettings',
@@ -95,6 +94,13 @@ export const SUPPORTED_ASPECT_RATIOS = [
 ];
 
 export enum MaxTilesInOnePage {
+  IN_PORTRAIT_WITH_SCREENSHARES = 2,
   IN_PORTRAIT = 6,
   IN_LANDSCAPE = 2,
 }
+
+export const ChatBottomSheetTabs = ['Chat', 'Participants'] as const;
+
+export const ChatBroadcastFilter = { name: 'everyone' } as const;
+
+export const PeerListRefreshInterval = 5000; // in milliseconds

package/src/utils.ts

@@ -22,3 +22,9 @@ export const getJoinConfig = (): typeof DEFAULT_JOINING_CONFIG => {
 
   return config;
 };
+
+export enum NotificationTypes {
+  ROLE_CHANGE_DECLINED = 'role_change_declined',
+  HAND_RAISE = 'hand_raise',
+  LOCAL_SCREENSHARE = 'local_screenshare',
+}