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

package/src/modules/HMSManager.ts

@@ -0,0 +1,25 @@
+import { HMSManagerModule, getLogger } from '@100mslive/react-native-hms';
+import type { HMSSDK } from '@100mslive/react-native-hms';
+import type { Layout } from '@100mslive/types-prebuilt';
+
+import { parseRoomLayout } from './parser';
+
+export async function getRoomLayout(
+  hmsInstance: HMSSDK,
+  authToken: string,
+  endpoint?: string
+): Promise<Layout> {
+  getLogger()?.verbose('#Function getRoomLayout', {
+    id: hmsInstance.id,
+    authToken,
+    endpoint,
+  });
+
+  const layputAPIResponse: string = await HMSManagerModule.getRoomLayout({
+    id: hmsInstance.id,
+    authToken,
+    endpoint,
+  });
+
+  return parseRoomLayout(layputAPIResponse);
+}

package/src/modules/parser.ts

@@ -0,0 +1,22 @@
+import type {
+  GetResponse as LayoutAPIResponse,
+  Layout,
+} from '@100mslive/types-prebuilt';
+
+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) {
+      return Promise.reject('No Layout found for the Room!');
+    }
+
+    return firstLayout;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}

package/src/peerTrackNodeUtils.tsx

@@ -13,11 +13,7 @@ export const degradeOrRestorePeerTrackNodes = (
   track: HMSTrack,
   isDegraded: boolean
 ): PeerTrackNode[] => {
-  const uniqueId =
-    peer.peerID +
-    (track.type === HMSTrackType.VIDEO
-      ? track?.source || HMSTrackSource.REGULAR
-      : HMSTrackSource.REGULAR);
+  const uniqueId = createPeerTrackNodeUniqueId(peer, track);
 
   return peerTrackNodes.map((peerTrackNode) => {
     if (peerTrackNode.id !== uniqueId) {
@@ -101,14 +97,21 @@ export const peerTrackNodeExistForPeerAndTrack = (
   peer: HMSPeer,
   track: HMSTrack
 ): boolean => {
-  const uniqueId =
-    peer.peerID +
-    (track.type === HMSTrackType.VIDEO
-      ? track?.source || HMSTrackSource.REGULAR
-      : HMSTrackSource.REGULAR);
+  const uniqueId = createPeerTrackNodeUniqueId(peer, track);
+
   return (
     peerTrackNodes.findIndex(
       (peerTrackNode) => peerTrackNode.id === uniqueId
     ) >= 0
   );
 };
+
+export const createPeerTrackNodeUniqueId = (peer: HMSPeer, track: HMSTrack) => {
+  const uniqueId =
+    peer.peerID +
+    (track.type === HMSTrackType.VIDEO
+      ? track?.source || HMSTrackSource.REGULAR
+      : HMSTrackSource.REGULAR);
+
+  return uniqueId;
+};

package/src/redux/actionTypes.ts

@@ -50,8 +50,22 @@ const SET_PEER_TO_UPDATE = 'SET_PEER_TO_UPDATE';
 
 const SET_MEETING_STATE = 'SET_MEETING_STATE';
 
+const SET_INSET_VIEW_MINIMIZED = 'SET_INSET_VIEW_MINIMIZED';
+
+const SET_MINI_VIEW_PEERTRACKNODE = 'SET_MINI_VIEW_PEERTRACKNODE';
+
+const UPDATE_MINI_VIEW_PEERTRACKNODE = 'UPDATE_MINI_VIEW_PEERTRACKNODE';
+
+const SET_LOCAL_PEERTRACKNODE = 'SET_LOCAL_PEERTRACKNODE';
+
+const UPDATE_LOCAL_PEERTRACKNODE = 'UPDATE_LOCAL_PEERTRACKNODE';
+
 const SET_STARTING_HLS_STREAM = 'SET_STARTING_HLS_STREAM';
 
+const SET_GRID_VIEW_ACTIVE_PAGE = 'SET_GRID_VIEW_ACTIVE_PAGE';
+
+const SET_STARTING_OR_STOPPING_RECORDING = 'SET_STARTING_OR_STOPPING_RECORDING';
+
 export default {
   ADD_PINNED_MESSAGE,
   ADD_MESSAGE,
@@ -74,7 +88,14 @@ export default {
   SET_MODAL_TYPE,
   SET_PEER_TO_UPDATE,
   SET_MEETING_STATE,
+  SET_INSET_VIEW_MINIMIZED,
+  SET_MINI_VIEW_PEERTRACKNODE,
+  UPDATE_MINI_VIEW_PEERTRACKNODE,
+  SET_LOCAL_PEERTRACKNODE,
+  UPDATE_LOCAL_PEERTRACKNODE,
   SET_STARTING_HLS_STREAM,
+  SET_GRID_VIEW_ACTIVE_PAGE,
+  SET_STARTING_OR_STOPPING_RECORDING,
 };
 
 export enum HmsStateActionTypes {
@@ -90,4 +111,5 @@ export enum HmsStateActionTypes {
   SET_USER_NAME = 'SET_USER_NAME',
   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',
 }

package/src/redux/actions/index.ts

@@ -10,6 +10,8 @@ import type {
   HMSSDK,
   HMSSessionStore,
 } from '@100mslive/react-native-hms';
+import type { Layout } from '@100mslive/types-prebuilt';
+
 import type {
   HMSIOSScreenShareConfig,
   ModalTypes,
@@ -31,6 +33,7 @@ export const setPrebuiltData = (data: {
     };
     ios?: HMSIOSScreenShareConfig;
   };
+  onLeave?: () => void;
 }) => ({
   type: HmsStateActionTypes.SET_PREBUILT_DATA,
   payload: data,
@@ -211,7 +214,57 @@ export const changeMeetingState = (meetingState: MeetingState) => ({
   payload: { meetingState },
 });
 
+export const setInsetViewMinimized = (insetViewMinimized: boolean) => ({
+  type: actionTypes.SET_INSET_VIEW_MINIMIZED,
+  payload: { insetViewMinimized },
+});
+
+export const setMiniViewPeerTrackNode = (
+  miniviewPeerTrackNode: PeerTrackNode | null
+) => ({
+  type: actionTypes.SET_MINI_VIEW_PEERTRACKNODE,
+  payload: { miniviewPeerTrackNode },
+});
+
+export const updateMiniViewPeerTrackNode = (
+  data: Partial<Omit<PeerTrackNode, 'id'>>
+) => ({
+  type: actionTypes.UPDATE_MINI_VIEW_PEERTRACKNODE,
+  payload: data,
+});
+
+export const setLocalPeerTrackNode = (
+  localPeerTrackNode: PeerTrackNode | null
+) => ({
+  type: actionTypes.SET_LOCAL_PEERTRACKNODE,
+  payload: { localPeerTrackNode },
+});
+
+export const updateLocalPeerTrackNode = (
+  data: Partial<Omit<PeerTrackNode, 'id' | 'isDegraded'>>
+) => ({
+  type: actionTypes.UPDATE_LOCAL_PEERTRACKNODE,
+  payload: data,
+});
+
 export const changeStartingHLSStream = (startingHLSStream: boolean) => ({
   type: actionTypes.SET_STARTING_HLS_STREAM,
   payload: { startingHLSStream },
 });
+
+export const setLayoutConfig = (layoutConfig: Layout) => ({
+  type: HmsStateActionTypes.SET_LAYOUT_CONFIG,
+  layoutConfig,
+});
+
+export const setGridViewActivePage = (pageNumber: number) => ({
+  type: actionTypes.SET_GRID_VIEW_ACTIVE_PAGE,
+  payload: { gridViewActivePage: pageNumber },
+});
+
+export const setStartingOrStoppingRecording = (
+  startingOrStoppingRecording: boolean
+) => ({
+  type: actionTypes.SET_STARTING_OR_STOPPING_RECORDING,
+  payload: { startingOrStoppingRecording },
+});

package/src/redux/reducers/appState.ts

@@ -40,6 +40,11 @@ type IntialStateType = {
   peerToUpdate: HMSPeer | null;
   meetingState: MeetingState;
   startingHLSStream: boolean;
+  insetViewMinimized: boolean;
+  miniviewPeerTrackNode: null | PeerTrackNode;
+  localPeerTrackNode: null | PeerTrackNode;
+  gridViewActivePage: number;
+  startingOrStoppingRecording: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -59,6 +64,11 @@ const INITIAL_STATE: IntialStateType = {
   peerToUpdate: null,
   meetingState: MeetingState.NOT_JOINED,
   startingHLSStream: false,
+  insetViewMinimized: false,
+  miniviewPeerTrackNode: null,
+  localPeerTrackNode: null,
+  gridViewActivePage: 0,
+  startingOrStoppingRecording: false,
 };
 
 const appReducer = (
@@ -140,8 +150,57 @@ const appReducer = (
       };
     case ActionTypes.SET_MEETING_STATE:
       return { ...state, meetingState: action.payload.meetingState };
+    case ActionTypes.SET_INSET_VIEW_MINIMIZED:
+      return {
+        ...state,
+        insetViewMinimized: action.payload.insetViewMinimized,
+      };
+    case ActionTypes.SET_MINI_VIEW_PEERTRACKNODE:
+      return {
+        ...state,
+        miniviewPeerTrackNode: action.payload.miniviewPeerTrackNode,
+      };
+    case ActionTypes.UPDATE_MINI_VIEW_PEERTRACKNODE: {
+      if (!state.miniviewPeerTrackNode) {
+        return state;
+      }
+      return {
+        ...state,
+        miniviewPeerTrackNode: {
+          ...state.miniviewPeerTrackNode,
+          ...action.payload,
+        },
+      };
+    }
+    case ActionTypes.SET_LOCAL_PEERTRACKNODE:
+      return {
+        ...state,
+        localPeerTrackNode: action.payload.localPeerTrackNode,
+      };
+    case ActionTypes.UPDATE_LOCAL_PEERTRACKNODE: {
+      if (!state.localPeerTrackNode) {
+        return state;
+      }
+      return {
+        ...state,
+        localPeerTrackNode: {
+          ...state.localPeerTrackNode,
+          ...action.payload,
+        },
+      };
+    }
     case ActionTypes.SET_STARTING_HLS_STREAM:
       return { ...state, startingHLSStream: action.payload.startingHLSStream };
+    case ActionTypes.SET_GRID_VIEW_ACTIVE_PAGE:
+      return {
+        ...state,
+        gridViewActivePage: action.payload.gridViewActivePage,
+      };
+    case ActionTypes.SET_STARTING_OR_STOPPING_RECORDING:
+      return {
+        ...state,
+        startingOrStoppingRecording: action.payload.startingOrStoppingRecording,
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/hmsStates.ts

@@ -4,6 +4,7 @@ import type {
   HMSRole,
   HMSRoom,
 } from '@100mslive/react-native-hms';
+import type { Layout } from '@100mslive/types-prebuilt';
 import { HmsStateActionTypes } from '../actionTypes';
 
 type ActionType =
@@ -16,7 +17,8 @@ type ActionType =
   | SetRoomLocallyMutedAction
   | ResetAction
   | AddToPreviewPeersList
-  | RemoveFromPreviewPeersList;
+  | RemoveFromPreviewPeersList
+  | SetLayoutConfig;
 
 type SetRoomAction = {
   type: HmsStateActionTypes.SET_ROOM_STATE;
@@ -67,6 +69,11 @@ type RemoveFromPreviewPeersList = {
   peerId: string;
 };
 
+type SetLayoutConfig = {
+  type: HmsStateActionTypes.SET_LAYOUT_CONFIG;
+  layoutConfig: Layout;
+};
+
 type IntialStateType = {
   isLocalAudioMuted: boolean | undefined;
   isLocalVideoMuted: boolean | undefined;
@@ -76,6 +83,7 @@ type IntialStateType = {
   localPeer: HMSLocalPeer | null;
   roles: HMSRole[];
   previewPeersList: HMSPeer[];
+  layoutConfig: Layout | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -87,6 +95,7 @@ const INITIAL_STATE: IntialStateType = {
   localPeer: null,
   roles: [],
   previewPeersList: [],
+  layoutConfig: null,
 };
 
 const hmsStatesReducer = (
@@ -143,6 +152,11 @@ const hmsStatesReducer = (
           (prevPeer) => prevPeer.peerID !== action.peerId
         ),
       };
+    case HmsStateActionTypes.SET_LAYOUT_CONFIG:
+      return {
+        ...state,
+        layoutConfig: action.layoutConfig,
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/userState.ts

@@ -25,6 +25,7 @@ type IntialStateType = {
   isHLSFlow: boolean;
   roles: HMSRole[];
   iosBuildConfig: HMSIOSScreenShareConfig | null;
+  onLeave: (() => void) | undefined;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -40,6 +41,7 @@ const INITIAL_STATE: IntialStateType = {
   hmsSessionStore: null,
   spotlightTrackId: null,
   iosBuildConfig: null,
+  onLeave: undefined,
 };
 
 const userReducer = (
@@ -76,6 +78,7 @@ 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.CLEAR_STATES:

package/src/utils/functions.ts

@@ -520,3 +520,51 @@ export const getTimeStringin12HourFormat = (time: Date) => {
     notation
   );
 };
+
+/**
+ * @param totalNumber total number of tiles
+ * @returns list of pairs that can be made from total number of tiles
+ *
+ * Example: If totalNumber is `5`, then output will be = `[ [0, 1], [2, 3], [4] ]`;
+ */
+export function groupIntoPairs(totalNumber: number) {
+  const pairs = [];
+  for (let i = 0; i < totalNumber; i += 2) {
+    if (i + 1 < totalNumber) {
+      pairs.push([i, i + 1]);
+    } else {
+      pairs.push([i]);
+    }
+  }
+  return pairs;
+}
+
+/**
+ * @param list array of items
+ * @returns list of triplets
+ *
+ * Example: If list is `[a, b, c, d]`, then output will be `[ [a, b, c], [d] ]`
+ */
+export function groupIntoTriplets<T>(list: T[], fill?: boolean) {
+  const pairs = [];
+  const listLength = list.length;
+
+  for (let i = 0; i < listLength; i += 3) {
+    if (i + 2 < listLength) {
+      pairs.push([list[i], list[i + 1], list[i + 2]]);
+    } else if (i + 1 < listLength) {
+      const t = [list[i], list[i + 1]];
+      if (fill) {
+        t.push(undefined);
+      }
+      pairs.push(t);
+    } else {
+      const t = [list[i]];
+      if (fill) {
+        t.splice(1, 0, undefined, undefined);
+      }
+      pairs.push(t);
+    }
+  }
+  return pairs;
+}

package/src/utils/theme.ts

@@ -1,5 +1,9 @@
 import { StyleSheet } from 'react-native';
-import { Theme } from './types';
+import type {
+  ColorPalette,
+  Theme,
+  Typography,
+} from '@100mslive/types-prebuilt';
 
 export const FONTS = StyleSheet.create({
   H1: {
@@ -45,9 +49,48 @@ export const FONTS = StyleSheet.create({
   },
 });
 
-var APP_THEME: Theme = Theme.LIGHT;
-export const getAppTheme = () => APP_THEME;
-export const setAppTheme = (theme: Theme) => (APP_THEME = theme);
+export const STATIC_COLOR_PALETTE: ColorPalette = {
+  primary_default: '#2572ED',
+  primary_bright: '#538DFF',
+  primary_dim: '#002D6D',
+  primary_disabled: '#004299',
+
+  on_primary_high: '#FFFFFF',
+  on_primary_medium: '#CCDAFF',
+  on_primary_low: '#84AAFF',
+
+  secondary_default: '#444954',
+  secondary_bright: '#70778B',
+  secondary_dim: '#293042',
+  secondary_disabled: '#404759',
+
+  on_secondary_high: '#ffffff',
+  on_secondary_medium: '#D3D9F0',
+  on_secondary_low: '#A4ABC0',
+
+  background_default: '#0B0E15',
+  background_dim: '#000000',
+
+  surface_default: '#191B23',
+  surface_bright: '#272A31',
+  surface_brighter: '#2E3038',
+  surface_dim: '#11131A',
+
+  on_surface_high: '#EFF0FA',
+  on_surface_medium: '#C5C6D0',
+  on_surface_low: '#8F9099',
+
+  border_default: '#1D1F27',
+  border_bright: '#272A31',
+  // border_primary: '#2471ED',
+
+  alert_success: '#36B37E',
+  alert_warning: '#FFAB00',
+  alert_error_default: '#C74E5B',
+  alert_error_bright: '#FFB2B6',
+  alert_error_brighter: '#FFEDEC',
+  alert_error_dim: '#270005',
+};
 
 export const COLORS = {
   PRIMARY: {
@@ -98,7 +141,8 @@ export const COLORS = {
   },
   BACKGROUND: {
     DIM: '#000000',
-    DIM_80: 'rgba(0, 0, 0, 0.8)',
+    DIM_80: 'rgba(0, 0, 0, 0.80)',
+    DIM_64: 'rgba(0, 0, 0, 0.64)',
     DEFAULT: '#0B0E15',
     DARK: '#090B0D',
     DARKER: '#040405',
@@ -133,3 +177,28 @@ export const COLORS = {
     },
   },
 };
+
+export function hexToRgbA(hex: string, alpha: number = 1) {
+  if (!/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    return `rgba(0, 0, 0, ${alpha})`;
+  }
+  let c: any = hex.substring(1).split('');
+  if (c.length == 3) {
+    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+  }
+  c = '0x' + c.join('');
+
+  return `rgba(${[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(
+    ', '
+  )}, ${alpha})`;
+}
+
+export const DEFAULT_TYPOGRAPHY: Typography = {
+  font_family: 'Inter',
+};
+
+export const DEFAULT_THEME: Required<Theme> = {
+  default: true,
+  name: 'static',
+  palette: STATIC_COLOR_PALETTE,
+};

package/src/utils/types.ts

@@ -55,6 +55,7 @@ export enum ModalTypes {
   PEER_SETTINGS = 'peerSettings',
   STREAMING_QUALITY_SETTING = 'streamingQualitySetting',
   HLS_PLAYER_ASPECT_RATIO = 'hlsPlayerAspectRatio',
+  STOP_RECORDING = 'stopRecording',
   DEFAULT = '',
 }
 
@@ -92,3 +93,8 @@ export const SUPPORTED_ASPECT_RATIOS = [
   { value: 4 / 3, id: '4:3' },
   { value: 3 / 4, id: '3:4' },
 ];
+
+export enum MaxTilesInOnePage {
+  IN_PORTRAIT = 6,
+  IN_LANDSCAPE = 2,
+}