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

package/src/modules/HMSManager.ts

@@ -8,18 +8,18 @@ export async function getRoomLayout(
   hmsInstance: HMSSDK,
   authToken: string,
   endpoint?: string
-): Promise<Layout> {
+): Promise<Layout[]> {
   getLogger()?.verbose('#Function getRoomLayout', {
     id: hmsInstance.id,
     authToken,
     endpoint,
   });
 
-  const layputAPIResponse: string = await HMSManagerModule.getRoomLayout({
+  const layoutAPIResponse: string = await HMSManagerModule.getRoomLayout({
     id: hmsInstance.id,
     authToken,
     endpoint,
   });
 
-  return parseRoomLayout(layputAPIResponse);
+  return parseRoomLayout(layoutAPIResponse);
 }

package/src/modules/parser.ts

@@ -3,19 +3,18 @@ import type {
   Layout,
 } from '@100mslive/types-prebuilt';
 
-export async function parseRoomLayout(response: string): Promise<Layout> {
+export async function parseRoomLayout(response: string): Promise<Layout[]> {
   try {
     const parsedResponse: LayoutAPIResponse = JSON.parse(response);
     if (!parsedResponse.data) {
       return Promise.reject('Layout API response is corrupted!');
     }
 
-    const firstLayout = parsedResponse.data[0];
-    if (!firstLayout) {
+    if (parsedResponse.data.length <= 0) {
       return Promise.reject('No Layout found for the Room!');
     }
 
-    return firstLayout;
+    return parsedResponse.data;
   } catch (error) {
     return Promise.reject(error);
   }

package/src/redux/actionTypes.ts

@@ -56,6 +56,10 @@ const SET_MINI_VIEW_PEERTRACKNODE = 'SET_MINI_VIEW_PEERTRACKNODE';
 
 const UPDATE_MINI_VIEW_PEERTRACKNODE = 'UPDATE_MINI_VIEW_PEERTRACKNODE';
 
+const SET_FULLSCREEN_PEERTRACKNODE = 'SET_FULLSCREEN_PEERTRACKNODE';
+
+const UPDATE_FULLSCREEN_PEERTRACKNODE = 'UPDATE_FULLSCREEN_PEERTRACKNODE';
+
 const SET_LOCAL_PEERTRACKNODE = 'SET_LOCAL_PEERTRACKNODE';
 
 const UPDATE_LOCAL_PEERTRACKNODE = 'UPDATE_LOCAL_PEERTRACKNODE';
@@ -66,6 +70,20 @@ const SET_GRID_VIEW_ACTIVE_PAGE = 'SET_GRID_VIEW_ACTIVE_PAGE';
 
 const SET_STARTING_OR_STOPPING_RECORDING = 'SET_STARTING_OR_STOPPING_RECORDING';
 
+const ADD_SCREENSHARE_TILE = 'ADD_SCREENSHARE_TILE';
+
+const REMOVE_SCREENSHARE_TILE = 'REMOVE_SCREENSHARE_TILE';
+
+const UPDATE_SCREENSHARE_TILE = 'UPDATE_SCREENSHARE_TILE';
+
+const ADD_NOTIFICATION = 'ADD_NOTIFICATION';
+
+const REMOVE_NOTIFICATION = 'REMOVE_NOTIFICATION';
+
+const SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB = 'SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB';
+
+const SET_CHAT_FILTER_SHEET_VISIBLE = 'SET_CHAT_FILTER_SHEET_VISIBLE';
+
 export default {
   ADD_PINNED_MESSAGE,
   ADD_MESSAGE,
@@ -91,11 +109,20 @@ export default {
   SET_INSET_VIEW_MINIMIZED,
   SET_MINI_VIEW_PEERTRACKNODE,
   UPDATE_MINI_VIEW_PEERTRACKNODE,
+  SET_FULLSCREEN_PEERTRACKNODE,
+  UPDATE_FULLSCREEN_PEERTRACKNODE,
   SET_LOCAL_PEERTRACKNODE,
   UPDATE_LOCAL_PEERTRACKNODE,
   SET_STARTING_HLS_STREAM,
   SET_GRID_VIEW_ACTIVE_PAGE,
   SET_STARTING_OR_STOPPING_RECORDING,
+  ADD_SCREENSHARE_TILE,
+  REMOVE_SCREENSHARE_TILE,
+  UPDATE_SCREENSHARE_TILE,
+  ADD_NOTIFICATION,
+  REMOVE_NOTIFICATION,
+  SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB,
+  SET_CHAT_FILTER_SHEET_VISIBLE,
 };
 
 export enum HmsStateActionTypes {
@@ -112,4 +139,13 @@ export enum HmsStateActionTypes {
   ADD_TO_PREVIEW_PEERS_LIST = 'ADD_TO_PREVIEW_PEERS_LIST',
   REMOVE_FROM_PREVIEW_PEERS_LIST = 'REMOVE_FROM_PREVIEW_PEERS_LIST',
   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',
+  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

@@ -7,12 +7,15 @@ import type {
   HMSRemoteAudioStats,
   HMSRemoteVideoStats,
   HMSRole,
+  HMSRoleChangeRequest,
   HMSSDK,
   HMSSessionStore,
+  HMSSpeaker,
 } from '@100mslive/react-native-hms';
 import type { Layout } from '@100mslive/types-prebuilt';
 
 import type {
+  ChatBottomSheetTabs,
   HMSIOSScreenShareConfig,
   ModalTypes,
   PeerTrackNode,
@@ -30,6 +33,7 @@ export const setPrebuiltData = (data: {
     endPoints?: {
       init: string;
       token: string;
+      layout: string;
     };
     ios?: HMSIOSScreenShareConfig;
   };
@@ -233,6 +237,20 @@ export const updateMiniViewPeerTrackNode = (
   payload: data,
 });
 
+export const setFullScreenPeerTrackNode = (
+  fullScreenPeerTrackNode: PeerTrackNode | null
+) => ({
+  type: actionTypes.SET_FULLSCREEN_PEERTRACKNODE,
+  payload: { fullScreenPeerTrackNode },
+});
+
+export const updateFullScreenPeerTrackNode = (
+  data: Partial<Omit<PeerTrackNode, 'id'>>
+) => ({
+  type: actionTypes.UPDATE_FULLSCREEN_PEERTRACKNODE,
+  payload: data,
+});
+
 export const setLocalPeerTrackNode = (
   localPeerTrackNode: PeerTrackNode | null
 ) => ({
@@ -252,7 +270,7 @@ export const changeStartingHLSStream = (startingHLSStream: boolean) => ({
   payload: { startingHLSStream },
 });
 
-export const setLayoutConfig = (layoutConfig: Layout) => ({
+export const setLayoutConfig = (layoutConfig: Layout[]) => ({
   type: HmsStateActionTypes.SET_LAYOUT_CONFIG,
   layoutConfig,
 });
@@ -268,3 +286,96 @@ export const setStartingOrStoppingRecording = (
   type: actionTypes.SET_STARTING_OR_STOPPING_RECORDING,
   payload: { startingOrStoppingRecording },
 });
+
+export const addScreenshareTile = (screenshareNode: PeerTrackNode) => ({
+  type: actionTypes.ADD_SCREENSHARE_TILE,
+  payload: { screenshareNode },
+});
+
+export const removeScreenshareTile = (
+  peerTrackNodeId: PeerTrackNode['id']
+) => ({
+  type: actionTypes.REMOVE_SCREENSHARE_TILE,
+  payload: { id: peerTrackNodeId },
+});
+
+export const updateScreenshareTile = (
+  data: Partial<PeerTrackNode> & { id: string }
+) => ({
+  type: actionTypes.UPDATE_SCREENSHARE_TILE,
+  payload: data,
+});
+
+export const addNotification = (notification: {
+  id: string;
+  type: string;
+  peer: HMSPeer;
+}) => ({
+  type: actionTypes.ADD_NOTIFICATION,
+  payload: { notification },
+});
+
+export const removeNotification = (notificationId: string) => ({
+  type: actionTypes.REMOVE_NOTIFICATION,
+  payload: { id: notificationId },
+});
+
+export const setRoleChangeRequest = (
+  roleChangeRequest: HMSRoleChangeRequest | null
+) => ({
+  type: HmsStateActionTypes.SET_ROLE_CHANGE_REQUEST,
+  roleChangeRequest,
+});
+
+export const setActiveChatBottomSheetTab = (
+  activeChatBottomSheetTab: (typeof ChatBottomSheetTabs)[number]
+) => ({
+  type: actionTypes.SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB,
+  payload: { activeChatBottomSheetTab },
+});
+
+export const setChatFilterSheetVisible = (chatFilterSheetVisible: boolean) => ({
+  type: actionTypes.SET_CHAT_FILTER_SHEET_VISIBLE,
+  payload: { chatFilterSheetVisible },
+});
+
+export const addParticipant = (participant: HMSPeer) => ({
+  type: HmsStateActionTypes.ADD_PARTICIPANT,
+  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.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,
+});
+
+export const setReconnecting = (reconnecting: boolean) => ({
+  type: HmsStateActionTypes.SET_RECONNECTING,
+  reconnecting,
+});

package/src/redux/reducers/appState.ts

@@ -1,4 +1,5 @@
 import ActionTypes, { HmsStateActionTypes } from '../actionTypes';
+import { ChatBottomSheetTabs } from '../../utils/types';
 import type { PeerTrackNode } from '../../utils/types';
 import { SUPPORTED_ASPECT_RATIOS, ModalTypes } from '../../utils/types';
 import { PipModes } from '../../utils/types';
@@ -45,6 +46,11 @@ type IntialStateType = {
   localPeerTrackNode: null | PeerTrackNode;
   gridViewActivePage: number;
   startingOrStoppingRecording: boolean;
+  fullScreenPeerTrackNode: null | PeerTrackNode;
+  screensharePeerTrackNodes: PeerTrackNode[];
+  notifications: { id: string; type: string; peer: HMSPeer }[];
+  activeChatBottomSheetTab: (typeof ChatBottomSheetTabs)[number];
+  chatFilterSheetVisible: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -57,7 +63,7 @@ const INITIAL_STATE: IntialStateType = {
     autoSimulcast: true,
     showStats: false,
     showHLSStats: false,
-    enableHLSPlayerControls: true,
+    enableHLSPlayerControls: false,
     showCustomHLSPlayerControls: false,
   },
   modalType: ModalTypes.DEFAULT,
@@ -69,6 +75,11 @@ const INITIAL_STATE: IntialStateType = {
   localPeerTrackNode: null,
   gridViewActivePage: 0,
   startingOrStoppingRecording: false,
+  fullScreenPeerTrackNode: null,
+  screensharePeerTrackNodes: [],
+  notifications: [],
+  activeChatBottomSheetTab: ChatBottomSheetTabs[0],
+  chatFilterSheetVisible: false,
 };
 
 const appReducer = (
@@ -189,6 +200,23 @@ const appReducer = (
         },
       };
     }
+    case ActionTypes.SET_FULLSCREEN_PEERTRACKNODE:
+      return {
+        ...state,
+        fullScreenPeerTrackNode: action.payload.fullScreenPeerTrackNode,
+      };
+    case ActionTypes.UPDATE_FULLSCREEN_PEERTRACKNODE: {
+      if (!state.fullScreenPeerTrackNode) {
+        return state;
+      }
+      return {
+        ...state,
+        fullScreenPeerTrackNode: {
+          ...state.fullScreenPeerTrackNode,
+          ...action.payload,
+        },
+      };
+    }
     case ActionTypes.SET_STARTING_HLS_STREAM:
       return { ...state, startingHLSStream: action.payload.startingHLSStream };
     case ActionTypes.SET_GRID_VIEW_ACTIVE_PAGE:
@@ -201,6 +229,60 @@ const appReducer = (
         ...state,
         startingOrStoppingRecording: action.payload.startingOrStoppingRecording,
       };
+    case ActionTypes.ADD_SCREENSHARE_TILE: {
+      return {
+        ...state,
+        screensharePeerTrackNodes: [
+          ...state.screensharePeerTrackNodes,
+          action.payload.screenshareNode,
+        ],
+      };
+    }
+    case ActionTypes.REMOVE_SCREENSHARE_TILE: {
+      return {
+        ...state,
+        screensharePeerTrackNodes: state.screensharePeerTrackNodes.filter(
+          (node) => node.id !== action.payload.id
+        ),
+      };
+    }
+    case ActionTypes.UPDATE_SCREENSHARE_TILE: {
+      return {
+        ...state,
+        screensharePeerTrackNodes: state.screensharePeerTrackNodes.map(
+          (node) =>
+            node.id === action.payload.id
+              ? { ...node, ...action.payload }
+              : node
+        ),
+      };
+    }
+    case ActionTypes.ADD_NOTIFICATION: {
+      return {
+        ...state,
+        notifications: [action.payload.notification, ...state.notifications],
+      };
+    }
+    case ActionTypes.REMOVE_NOTIFICATION: {
+      return {
+        ...state,
+        notifications: state.notifications.filter(
+          (notification) => notification.id !== action.payload.id
+        ),
+      };
+    }
+    case ActionTypes.SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB: {
+      return {
+        ...state,
+        activeChatBottomSheetTab: action.payload.activeChatBottomSheetTab,
+      };
+    }
+    case ActionTypes.SET_CHAT_FILTER_SHEET_VISIBLE: {
+      return {
+        ...state,
+        chatFilterSheetVisible: action.payload.chatFilterSheetVisible,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/chatWindow.ts

@@ -1,19 +1,26 @@
+import type { HMSRemotePeer, HMSRole } from '@100mslive/react-native-hms';
+
 import { HmsStateActionTypes } from '../actionTypes';
+import { ChatBroadcastFilter } from '../../utils/types';
+
+type InitialType = {
+  showChatView: boolean;
+  typedMessage: string;
+  sendTo: HMSRemotePeer | HMSRole | typeof ChatBroadcastFilter;
+};
 
-const INITIAL_STATE = {
+const INITIAL_STATE: InitialType = {
   showChatView: false,
   typedMessage: '',
-  sendTo: { name: 'everyone' },
-  sendToType: 'everyone', // 'everyone' | 'role' | 'direct'
+  sendTo: ChatBroadcastFilter,
 };
 
-const chatWindowReducer = (state = INITIAL_STATE, action: any): any => {
+const chatWindowReducer = (state = INITIAL_STATE, action: any): InitialType => {
   switch (action.type) {
     case 'SET_SENDTO':
       return {
         ...state,
         sendTo: action.sendTo,
-        sendToType: action.sendToType,
       };
     case 'SET_TYPED_MESSAGE':
       return {