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

package/src/components/RoomSettingsModalContent.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import {
   View,
   StyleSheet,
@@ -11,7 +11,6 @@ import {
   InteractionManager,
 } from 'react-native';
 import {
-  HMSAudioFilePlayerNode,
   HMSAudioMixingMode,
   HMSUpdateListenerActions,
 } from '@100mslive/react-native-hms';
@@ -21,7 +20,6 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import EntypoIcons from 'react-native-vector-icons/Entypo';
-import DocumentPicker from 'react-native-document-picker';
 import { openSettings, requestNotifications } from 'react-native-permissions';
 
 import { COLORS } from '../utils/theme';
@@ -34,7 +32,6 @@ import {
 } from '../redux/actions';
 import { ModalTypes, PipModes } from '../utils/types';
 import { parseMetadata } from '../utils/functions';
-import { getJoinConfig } from '../utils';
 import { HMSShareScreen } from './HMSShareScreen';
 import { ScreenShareIcon } from '../Icons';
 
@@ -63,11 +60,6 @@ export const RoomSettingsModalContent: React.FC<
   setAudioDeviceListenerAdded,
   setMuteAllTracksAudio,
 }) => {
-  // REFS
-  const audioFilePlayerNodeRef = useRef(
-    new HMSAudioFilePlayerNode('audio_file_player_node')
-  );
-
   // REDUX STATES & DISPATCH
   const dispatch = useDispatch();
   const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
@@ -308,73 +300,6 @@ export const RoomSettingsModalContent: React.FC<
         .catch((e) => console.log('Start Audioshare Error: ', e));
     }
   };
-
-  // iOS Audioshare
-  const setAudioShareVolume = () =>
-    setModalVisible(ModalTypes.SET_AUDIO_SHARE_VOLUME, true);
-
-  // iOS Audioshare
-  const playAudioShare = () => {
-    closeRoomSettingsModal();
-    setTimeout(() => {
-      DocumentPicker.pickSingle()
-        .then((result) => {
-          console.log('Document Picker Success: ', result);
-          audioFilePlayerNodeRef.current
-            .play(result?.uri, false, false)
-            .then((d) => {
-              console.log('Start Audioshare Success: ', d);
-            })
-            .catch((e) => console.log('Start Audioshare Error: ', e));
-        })
-        .catch((e) => console.log('Document Picker Error: ', e));
-    }, 500);
-  };
-
-  // iOS Audioshare
-  const stopAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.stop();
-  };
-
-  // iOS Audioshare
-  const pauseAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.pause();
-  };
-
-  // iOS Audioshare
-  const resumeAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.resume();
-  };
-
-  // iOS Audioshare
-  const isAudioSharePlaying = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .isPlaying()
-      .then((d) => console.log('Audioshare isPlaying: ', d))
-      .catch((e) => console.log('Audioshare isPlaying: ', e));
-  };
-
-  // iOS Audioshare
-  const getAudioShareDuration = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .duration()
-      .then((d) => console.log('Audioshare duration: ', d))
-      .catch((e) => console.log('Audioshare duration: ', e));
-  };
-
-  // iOS Audioshare
-  const getAudioShareCurrentDuration = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .currentDuration()
-      .then((d) => console.log('Audioshare currentDuration: ', d))
-      .catch((e) => console.log('Audioshare currentDuration: ', e));
-  };
   //#endregion
 
   return (
@@ -582,68 +507,6 @@ export const RoomSettingsModalContent: React.FC<
                 />
               </>
             ) : null}
-
-            {Platform.OS === 'ios' &&
-            getJoinConfig().audioMixer &&
-            localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
-              <>
-                <SettingItem
-                  onPress={playAudioShare}
-                  text="Play Audio Share"
-                  IconType={Ionicons}
-                  iconName="play-outline"
-                />
-
-                <SettingItem
-                  onPress={stopAudioShare}
-                  text="Stop Audio Share"
-                  IconType={Ionicons}
-                  iconName="stop-outline"
-                />
-
-                <SettingItem
-                  onPress={setAudioShareVolume}
-                  text="Set Audio Share Volume"
-                  IconType={Ionicons}
-                  iconName="volume-high-outline"
-                />
-
-                <SettingItem
-                  onPress={pauseAudioShare}
-                  text="Pause Audio Share"
-                  IconType={Ionicons}
-                  iconName="pause-outline"
-                />
-
-                <SettingItem
-                  onPress={resumeAudioShare}
-                  text="Resume Audio Share"
-                  IconType={Ionicons}
-                  iconName="play-skip-forward-outline"
-                />
-
-                <SettingItem
-                  onPress={isAudioSharePlaying}
-                  text="Is Audio Share Playing"
-                  IconType={MaterialCommunityIcons}
-                  iconName="file-question-outline"
-                />
-
-                <SettingItem
-                  onPress={getAudioShareDuration}
-                  text="Audio Share Duration"
-                  IconType={Ionicons}
-                  iconName="timer-outline"
-                />
-
-                <SettingItem
-                  onPress={getAudioShareCurrentDuration}
-                  text="Audio Share Current Duration"
-                  IconType={Ionicons}
-                  iconName="timer-outline"
-                />
-              </>
-            ) : null}
           </>
         ) : null}
       </ScrollView>

package/src/components/index.ts

@@ -1,7 +1,6 @@
 export * from './ChatWindow';
 export * from './Preview';
 export * from './Picker';
-export * from './ZoomableView';
 export * from './CustomInput';
 export * from './CustomButton';
 export * from './DefaultModal';

package/src/hooks/useHmsInstance.ts

@@ -12,7 +12,6 @@
 //   HMSVideoTrackSettings,
 // } from '@100mslive/react-native-hms';
 // import { useEffect, useState } from 'react';
-// import { getModel } from 'react-native-device-info';
 
 // export const useHmsInstance = () => {
 //   const [hmsInstance, setHmsInstance] = useState(null);

package/src/hooks-util-selectors.tsx

@@ -1,4 +1,14 @@
 import type { HMSPeer } from '@100mslive/react-native-hms';
 
+import type { RootState } from './redux';
+
 export const selectIsHLSViewer = (peer: HMSPeer | null | undefined) =>
   peer?.role?.name?.includes('hls') ?? false;
+
+export const selectShouldGoLive = (state: RootState) => {
+  const isHLSStreaming = state.hmsStates.room?.hlsStreamingState.running;
+  const canStartHLSStreaming =
+    state.hmsStates.localPeer?.role?.permissions?.hlsStreaming;
+
+  return canStartHLSStreaming && !isHLSStreaming;
+};

package/src/hooks-util.ts

@@ -23,18 +23,29 @@ import type {
   HMSSessionStoreValue,
 } from '@100mslive/react-native-hms';
 import Toast from 'react-native-simple-toast';
-import { useRef, useCallback, useEffect, useState, useMemo } from 'react';
+import {
+  useRef,
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+  useContext,
+} from 'react';
 
 import { ModalTypes, PipModes } from './utils/types';
 import type { PeerTrackNode } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
-import { useDispatch, useSelector, useStore } from 'react-redux';
+import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 import type { RootState } from './redux';
 import {
   addMessage,
   addPinnedMessage,
+  addToPreviewPeersList,
+  changeMeetingState,
   changePipModeStatus,
+  changeStartingHLSStream,
   clearStore,
+  removeFromPreviewPeersList,
   saveUserData,
   setHMSLocalPeerState,
   setHMSRoleState,
@@ -59,7 +70,7 @@ import {
   LayoutAnimation,
   Platform,
 } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { NavigationContext } from '@react-navigation/native';
 import {
   useIsLandscapeOrientation,
   useIsPortraitOrientation,
@@ -68,27 +79,24 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-import { selectIsHLSViewer } from './hooks-util-selectors';
+import { selectIsHLSViewer, selectShouldGoLive } from './hooks-util-selectors';
 
 export const useHMSListeners = (
-  setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>,
-  setMeetingState: React.Dispatch<React.SetStateAction<MeetingState>>
+  setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
 ) => {
   const hmsInstance = useHMSInstance();
   const updateLocalPeer = useUpdateHMSLocalPeer(hmsInstance);
 
-  useHMSRoomUpdate(hmsInstance, setMeetingState);
+  useHMSRoomUpdate(hmsInstance);
 
   useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 
   useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 };
 
-const useHMSRoomUpdate = (
-  hmsInstance: HMSSDK,
-  setMeetingState: React.Dispatch<React.SetStateAction<MeetingState>>
-) => {
+const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
   const dispatch = useDispatch();
+  const reduxStore = useStore();
 
   useEffect(() => {
     const roomUpdateHandler = (data: {
@@ -104,12 +112,14 @@ const useHMSRoomUpdate = (
        * before ON_JOIN, if ON_ROOM comes then we can show Meeting screen to user, instead of Loader or Preview
        */
       if (room.localPeer.role?.name?.includes('hls-') ?? false) {
-        dispatch(setHMSLocalPeerState(room.localPeer));
-        setMeetingState((prevMeetingScreen) => {
-          if (prevMeetingScreen !== MeetingState.IN_MEETING) {
-            return MeetingState.IN_MEETING;
+        const meetingState = (reduxStore.getState() as RootState).app
+          .meetingState;
+
+        batch(() => {
+          dispatch(setHMSLocalPeerState(room.localPeer));
+          if (meetingState !== MeetingState.IN_MEETING) {
+            dispatch(changeMeetingState(MeetingState.IN_MEETING));
           }
-          return prevMeetingScreen;
         });
       }
 
@@ -135,6 +145,8 @@ const useHMSRoomUpdate = (
           Toast.TOP
         );
       } else if (type === HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
+        dispatch(changeStartingHLSStream(false));
+
         let streaming = room?.hlsStreamingState?.running;
 
         Toast.showWithGravity(
@@ -208,64 +220,23 @@ const useHMSPeersUpdate = (
   updateLocalPeer: () => void,
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
 ) => {
-  // useHMSPeerUpdates(
-  //   ({ peer, type }: PeerUpdate) => {
-  //     if (type === HMSPeerUpdate.PEER_JOINED) {
-  //       return;
-  //     }
-  //     if (type === HMSPeerUpdate.PEER_LEFT) {
-  //       setPeerTrackNodes((prevPeerTrackNodes) =>
-  //         removePeerTrackNodes(prevPeerTrackNodes, peer)
-  //       );
-  //       return;
-  //     }
-  //     if (peer.isLocal) {
-  //       setPeerTrackNodes((prevPeerTrackNodes) => {
-  //         if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
-  //           return replacePeerTrackNodes(prevPeerTrackNodes, peer);
-  //         }
-  //         return prevPeerTrackNodes;
-  //       });
-
-  //       // - TODO: update local localPeer state
-  //       // - Pass this updated data to Meeting component -> DisplayView component
-  //       updateLocalPeer();
-  //       return;
-  //     }
-  //     if (type === HMSPeerUpdate.ROLE_CHANGED) {
-  //       if (
-  //         peer.role?.publishSettings?.allowed === undefined ||
-  //         (peer.role?.publishSettings?.allowed &&
-  //           peer.role?.publishSettings?.allowed.length < 1)
-  //       ) {
-  //         setPeerTrackNodes((prevPeerTrackNodes) => {
-  //           if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
-  //             return removePeerTrackNodes(prevPeerTrackNodes, peer);
-  //           }
-  //           return prevPeerTrackNodes;
-  //         });
-  //       }
-  //       return;
-  //     }
-  //     if (
-  //       type === HMSPeerUpdate.METADATA_CHANGED ||
-  //       type === HMSPeerUpdate.NAME_CHANGED ||
-  //       type === HMSPeerUpdate.NETWORK_QUALITY_UPDATED
-  //     ) {
-  //       setPeerTrackNodes((prevPeerTrackNodes) => {
-  //         if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
-  //           return replacePeerTrackNodes(prevPeerTrackNodes, peer);
-  //         }
-  //         return prevPeerTrackNodes;
-  //       });
-  //       return;
-  //     }
-  //   },
-  //   [hmsInstance]
-  // );
+  const dispatch = useDispatch();
+  const inMeeting = useSelector(
+    (state: RootState) => state.app.meetingState === MeetingState.IN_MEETING
+  );
 
   useEffect(() => {
     const peerUpdateHandler = ({ peer, type }: PeerUpdate) => {
+      // Handle State from Preview screen
+      if (!inMeeting) {
+        if (type === HMSPeerUpdate.PEER_JOINED) {
+          dispatch(addToPreviewPeersList(peer));
+        } else if (type === HMSPeerUpdate.PEER_LEFT) {
+          dispatch(removeFromPreviewPeersList(peer));
+        }
+      }
+
+      // Handle State for Meeting screen
       if (type === HMSPeerUpdate.PEER_JOINED) {
         return;
       }
@@ -326,7 +297,7 @@ const useHMSPeersUpdate = (
     return () => {
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE);
     };
-  }, [hmsInstance]);
+  }, [inMeeting, hmsInstance]); // TODO: When `inMeeting` becomes true Peer Update is resubscribed, we might lose some events during that time
 };
 
 type TrackUpdate = {
@@ -773,7 +744,7 @@ export const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   // TODO: What if this is undefined?
-  const navigation = useNavigation();
+  const navigation = useContext(NavigationContext);
 
   useEffect(() => {
     const pipRoomLeaveHandler = () => {
@@ -801,13 +772,15 @@ export const useHMSPIPRoomLeave = () => {
           // dispatch(clearPeerData());
           // dispatch(clearHmsReference());
 
-          // if (navigation.canGoBack()) {
-          //   navigation.goBack();
-          // } else {
-          // TODO: remove this later
-          navigation.navigate('QRCodeScreen' as never);
-          dispatch(clearStore());
-          // }
+          if (navigation && navigation.canGoBack()) {
+            navigation.goBack();
+            dispatch(clearStore());
+          } else {
+            // TODO: call onLeave Callback if provided
+            // Otherwise default action is to show "Meeting Ended" screen
+            dispatch(clearStore()); // TODO: We need different clearStore for MeetingEnded
+            dispatch(changeMeetingState(MeetingState.MEETING_ENDED));
+          }
         })
         .catch((e) => {
           console.log(`Destroy HMS instance Error: ${e}`);
@@ -834,7 +807,7 @@ export const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   // TODO: What if this is undefined?
-  const navigation = useNavigation();
+  const navigation = useContext(NavigationContext);
 
   useEffect(() => {
     const removedFromRoomHandler = () => {
@@ -862,13 +835,15 @@ export const useHMSRemovedFromRoomUpdate = () => {
           // dispatch(clearPeerData());
           // dispatch(clearHmsReference());
 
-          // if (navigation.canGoBack()) {
-          //   navigation.goBack();
-          // } else {
-          // TODO: remove this later
-          navigation.navigate('QRCodeScreen' as never);
-          dispatch(clearStore());
-          // }
+          if (navigation && navigation.canGoBack()) {
+            navigation.goBack();
+            dispatch(clearStore());
+          } else {
+            // TODO: call onLeave Callback if provided
+            // Otherwise default action is to show "Meeting Ended" screen
+            dispatch(clearStore()); // TODO: We need different clearStore for MeetingEnded
+            dispatch(changeMeetingState(MeetingState.MEETING_ENDED));
+          }
         })
         .catch((e) => {
           console.log(`Destroy HMS instance Error: ${e}`);
@@ -1050,7 +1025,18 @@ export const useHMSConfig = () => {
     return hmsConfig;
   }, [hmsInstance]);
 
-  return { clearConfig, getConfig };
+  const updateConfig = useCallback((data: Partial<HMSConfig>) => {
+    if (!hmsConfig) {
+      throw new Error('No HMSConfig is available to update!');
+    }
+
+    Object.entries(data).forEach(([key, value]) => {
+      // @ts-ignore
+      hmsConfig[key] = value;
+    });
+  }, []);
+
+  return { clearConfig, updateConfig, getConfig };
 };
 
 export const useSafeDimensions = () => {
@@ -1186,3 +1172,96 @@ export const useFilteredParticipants = () => {
     setSearchText: setParticipantsSearchInput,
   };
 };
+
+export const useShouldGoLive = () => {
+  const shouldGoLive = useSelector(selectShouldGoLive);
+
+  return shouldGoLive;
+};
+
+export const useLeaveMethods = () => {
+  const navigation = useContext(NavigationContext);
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+
+  const destroy = useCallback(async () => {
+    try {
+      const s = await hmsInstance.destroy();
+      console.log('Destroy Success: ', s);
+      // TODOS:
+      // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
+      //    - Reset Redux States
+      //    - HMSInstance will not be available now
+      //    - When your presses "Re Join" Action button, restart process from root component
+      //    - When your presses "Done" Action button
+      //        - If we have callback fn, call it
+      //        - Otherwise try our best to navigate away from current screen
+      //
+      // - No screen to show
+      //    - No need to reset redux state?
+      //    - HMSInstance will be available till this point
+      //    - If we have callback fn, call it
+      //    - Otherwise try our best to navigate away from current screen
+      //    - When we are navigated away from screen, HMSInstance will be not available
+
+      // dispatch(clearMessageData());
+      // dispatch(clearPeerData());
+      // dispatch(clearHmsReference());
+
+      if (navigation && navigation.canGoBack()) {
+        navigation.goBack();
+        dispatch(clearStore());
+      } else {
+        // TODO: call onLeave Callback if provided
+        // Otherwise default action is to show "Meeting Ended" screen
+        dispatch(clearStore()); // TODO: We need different clearStore for MeetingEnded
+        dispatch(changeMeetingState(MeetingState.MEETING_ENDED));
+      }
+    } catch (e) {
+      console.log(`Destroy HMS instance Error: ${e}`);
+      Toast.showWithGravity(
+        `Destroy HMS instance Error: ${e}`,
+        Toast.LONG,
+        Toast.TOP
+      );
+      return Promise.reject(e);
+    }
+  }, [hmsInstance]);
+
+  const leave = useCallback(async () => {
+    try {
+      const d = await hmsInstance.leave();
+      console.log('Leave Success: ', d);
+      await destroy();
+    } catch (e) {
+      console.log(`Leave Room Error: ${e}`);
+      Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
+    }
+  }, [destroy, hmsInstance]);
+
+  const goToPreview = useCallback(async () => {
+    try {
+      await hmsInstance.leave();
+      await hmsInstance.destroy();
+      dispatch(clearStore());
+    } catch (error) {
+      Toast.showWithGravity(
+        `Unable to go to Preview: ${error}`,
+        Toast.LONG,
+        Toast.TOP
+      );
+    }
+  }, [hmsInstance]);
+
+  const endRoom = useCallback(async () => {
+    try {
+      const d = await hmsInstance.endRoom('Host ended the room');
+      console.log('EndRoom Success: ', d);
+      await destroy();
+    } catch (e) {
+      console.log('EndRoom Error: ', e);
+    }
+  }, [destroy, hmsInstance]);
+
+  return { destroy, leave, endRoom, goToPreview };
+};

package/src/redux/actionTypes.ts

@@ -48,6 +48,10 @@ const SET_MODAL_TYPE = 'SET_MODAL_TYPE';
 
 const SET_PEER_TO_UPDATE = 'SET_PEER_TO_UPDATE';
 
+const SET_MEETING_STATE = 'SET_MEETING_STATE';
+
+const SET_STARTING_HLS_STREAM = 'SET_STARTING_HLS_STREAM';
+
 export default {
   ADD_PINNED_MESSAGE,
   ADD_MESSAGE,
@@ -69,6 +73,8 @@ export default {
   SET_RTC_STATS,
   SET_MODAL_TYPE,
   SET_PEER_TO_UPDATE,
+  SET_MEETING_STATE,
+  SET_STARTING_HLS_STREAM,
 };
 
 export enum HmsStateActionTypes {
@@ -82,4 +88,6 @@ export enum HmsStateActionTypes {
   SET_IS_LOCAL_SCREEN_SHARED_STATE = 'SET_IS_LOCAL_SCREEN_SHARED_STATE',
   SET_ROOM_LOCALLY_MUTED = 'SET_ROOM_LOCALLY_MUTED',
   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',
 }

package/src/redux/actions/index.ts

@@ -11,12 +11,13 @@ import type {
   HMSSessionStore,
 } from '@100mslive/react-native-hms';
 import type {
-  IOSBuildConfig,
+  HMSIOSScreenShareConfig,
   ModalTypes,
   PeerTrackNode,
   PipModes,
 } from '../../utils/types';
 import actionTypes, { HmsStateActionTypes } from '../actionTypes';
+import { MeetingState } from '../../types';
 
 export const setPrebuiltData = (data: {
   roomCode: string;
@@ -28,7 +29,7 @@ export const setPrebuiltData = (data: {
       init: string;
       token: string;
     };
-    ios?: IOSBuildConfig;
+    ios?: HMSIOSScreenShareConfig;
   };
 }) => ({
   type: HmsStateActionTypes.SET_PREBUILT_DATA,
@@ -194,3 +195,23 @@ export const setPeerToUpdate = (peerToUpdate: HMSPeer) => ({
   type: actionTypes.SET_PEER_TO_UPDATE,
   payload: { peerToUpdate },
 });
+
+export const addToPreviewPeersList = (peer: HMSPeer) => ({
+  type: HmsStateActionTypes.ADD_TO_PREVIEW_PEERS_LIST,
+  peer,
+});
+
+export const removeFromPreviewPeersList = (peer: HMSPeer) => ({
+  type: HmsStateActionTypes.REMOVE_FROM_PREVIEW_PEERS_LIST,
+  peerId: peer.peerID,
+});
+
+export const changeMeetingState = (meetingState: MeetingState) => ({
+  type: actionTypes.SET_MEETING_STATE,
+  payload: { meetingState },
+});
+
+export const changeStartingHLSStream = (startingHLSStream: boolean) => ({
+  type: actionTypes.SET_STARTING_HLS_STREAM,
+  payload: { startingHLSStream },
+});

package/src/redux/reducers/appState.ts

@@ -9,6 +9,7 @@ import {
   HMSRemoteAudioStats,
   HMSRemoteVideoStats,
 } from '@100mslive/react-native-hms';
+import { MeetingState } from '../../types';
 
 type ActionType = {
   payload: { [key: string]: any };
@@ -37,6 +38,8 @@ type IntialStateType = {
   };
   modalType: ModalTypes;
   peerToUpdate: HMSPeer | null;
+  meetingState: MeetingState;
+  startingHLSStream: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -54,6 +57,8 @@ const INITIAL_STATE: IntialStateType = {
   },
   modalType: ModalTypes.DEFAULT,
   peerToUpdate: null,
+  meetingState: MeetingState.NOT_JOINED,
+  startingHLSStream: false,
 };
 
 const appReducer = (
@@ -133,6 +138,10 @@ const appReducer = (
           [action.payload.trackId]: action.payload.stats,
         },
       };
+    case ActionTypes.SET_MEETING_STATE:
+      return { ...state, meetingState: action.payload.meetingState };
+    case ActionTypes.SET_STARTING_HLS_STREAM:
+      return { ...state, startingHLSStream: action.payload.startingHLSStream };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default: