@100mslive/react-native-room-kit 0.0.3 → 0.1.0

package/src/hooks-util.ts

@@ -21,31 +21,58 @@ import {
 import type {
   HMSSessionStore,
   HMSSessionStoreValue,
+  HMSSpeaker,
 } from '@100mslive/react-native-hms';
+import type {
+  ColorPalette,
+  Theme,
+  Typography,
+} from '@100mslive/types-prebuilt';
 import Toast from 'react-native-simple-toast';
-import { useRef, useCallback, useEffect, useState, useMemo } from 'react';
-
-import { ModalTypes, PipModes } from './utils/types';
+import {
+  useRef,
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+  useContext,
+} from 'react';
+import type { DependencyList } from 'react';
+
+import { MaxTilesInOnePage, 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,
+  shallowEqual,
+  useDispatch,
+  useSelector,
+  useStore,
+} from 'react-redux';
 import type { RootState } from './redux';
 import {
   addMessage,
   addPinnedMessage,
-  addToPreviewPeersList,
+  changeMeetingState,
   changePipModeStatus,
+  changeStartingHLSStream,
   clearStore,
-  removeFromPreviewPeersList,
   saveUserData,
   setHMSLocalPeerState,
   setHMSRoleState,
   setHMSRoomState,
   setIsLocalAudioMutedState,
   setIsLocalVideoMutedState,
+  setLayoutConfig,
+  setLocalPeerTrackNode,
+  setMiniViewPeerTrackNode,
   setModalType,
+  setStartingOrStoppingRecording,
+  updateLocalPeerTrackNode,
+  updateMiniViewPeerTrackNode,
 } from './redux/actions';
 import {
+  createPeerTrackNodeUniqueId,
   degradeOrRestorePeerTrackNodes,
   peerTrackNodeExistForPeer,
   peerTrackNodeExistForPeerAndTrack,
@@ -61,7 +88,8 @@ import {
   LayoutAnimation,
   Platform,
 } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import type { ImageStyle, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { NavigationContext } from '@react-navigation/native';
 import {
   useIsLandscapeOrientation,
   useIsPortraitOrientation,
@@ -70,33 +98,27 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-import { selectIsHLSViewer } from './hooks-util-selectors';
+import { selectIsHLSViewer, selectShouldGoLive } from './hooks-util-selectors';
+import type { GridViewRefAttrs } from './components/GridView';
+import { getRoomLayout } from './modules/HMSManager';
+import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
 
 export const useHMSListeners = (
-  meetingState: MeetingState,
-  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(
-    meetingState,
-    hmsInstance,
-    updateLocalPeer,
-    setPeerTrackNodes
-  );
+  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<RootState>();
 
   useEffect(() => {
     const roomUpdateHandler = (data: {
@@ -112,16 +134,23 @@ 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().app.meetingState;
+
+        batch(() => {
+          dispatch(setHMSLocalPeerState(room.localPeer));
+          if (meetingState !== MeetingState.IN_MEETING) {
+            dispatch(changeMeetingState(MeetingState.IN_MEETING));
           }
-          return prevMeetingScreen;
         });
       }
 
       if (type === HMSRoomUpdate.BROWSER_RECORDING_STATE_UPDATED) {
+        const startingOrStoppingRecording = reduxStore.getState().app.startingOrStoppingRecording;
+
+        if (startingOrStoppingRecording) {
+          dispatch(setStartingOrStoppingRecording(false));
+        }
+
         let streaming = room?.browserRecordingState?.running;
         const startAtDate = room?.browserRecordingState?.startedAt;
 
@@ -143,6 +172,8 @@ const useHMSRoomUpdate = (
           Toast.TOP
         );
       } else if (type === HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
+        dispatch(changeStartingHLSStream(false));
+
         let streaming = room?.hlsStreamingState?.running;
 
         Toast.showWithGravity(
@@ -212,24 +243,27 @@ type PeerUpdate = {
 };
 
 const useHMSPeersUpdate = (
-  meetingState: MeetingState,
   hmsInstance: HMSSDK,
   updateLocalPeer: () => void,
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
 ) => {
   const dispatch = useDispatch();
-  const inMeeting = meetingState === MeetingState.IN_MEETING;
+  const store = useStore<RootState>();
+  // 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));
-        }
-      }
+      // TODO: When `inMeeting` becomes true Peer Update is resubscribed, we might lose some events during that time
+      // 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) {
@@ -249,6 +283,28 @@ const useHMSPeersUpdate = (
           return prevPeerTrackNodes;
         });
 
+        const reduxState = store.getState();
+        const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
+        const localPeerTrackNode = reduxState.app.localPeerTrackNode;
+
+        batch(() => {
+          if (localPeerTrackNode) {
+            dispatch(updateLocalPeerTrackNode({ peer }));
+          } else {
+            dispatch(
+              setLocalPeerTrackNode(createPeerTrackNode(peer, peer.videoTrack))
+            );
+          }
+
+          // only set `localPeerTrackNode` as miniview peer track node when we are already using it.
+          if (
+            miniviewPeerTrackNode &&
+            miniviewPeerTrackNode.peer.peerID === peer.peerID
+          ) {
+            dispatch(updateMiniViewPeerTrackNode({ peer }));
+          }
+        });
+
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
         updateLocalPeer();
@@ -292,7 +348,7 @@ const useHMSPeersUpdate = (
     return () => {
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE);
     };
-  }, [inMeeting, hmsInstance]); // TODO: When `inMeeting` becomes true Peer Update is resubscribed, we might lose some events during that time
+  }, [hmsInstance]);
 };
 
 type TrackUpdate = {
@@ -307,10 +363,22 @@ const useHMSTrackUpdate = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
 ) => {
   const dispatch = useDispatch();
+  const store = useStore<RootState>();
 
   useEffect(() => {
     const trackUpdateHandler = ({ peer, track, type }: TrackUpdate) => {
+      const reduxState = store.getState();
+      const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
+      const localPeerTrackNode = reduxState.app.localPeerTrackNode;
+
       if (type === HMSTrackUpdate.TRACK_ADDED) {
+        const newPeerTrackNode = createPeerTrackNode(peer, track);
+
+        const willCreateMiniviewPeerTrackNode =
+          !miniviewPeerTrackNode &&
+          peer.isLocal &&
+          track.source === HMSTrackSource.REGULAR;
+
         setPeerTrackNodes((prevPeerTrackNodes) => {
           if (
             peerTrackNodeExistForPeerAndTrack(prevPeerTrackNodes, peer, track)
@@ -324,14 +392,65 @@ const useHMSTrackUpdate = (
             }
             return replacePeerTrackNodes(prevPeerTrackNodes, peer);
           }
-          const newPeerTrackNode = createPeerTrackNode(peer, track);
-          return [...prevPeerTrackNodes, newPeerTrackNode];
+
+          if (
+            miniviewPeerTrackNode
+              ? newPeerTrackNode.id !== miniviewPeerTrackNode.id
+              : !willCreateMiniviewPeerTrackNode
+          ) {
+            return [...prevPeerTrackNodes, newPeerTrackNode];
+          }
+
+          return prevPeerTrackNodes;
         });
 
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
         if (peer.isLocal) {
+          if (track.source === HMSTrackSource.REGULAR) {
+            if (!localPeerTrackNode) {
+              dispatch(setLocalPeerTrackNode(newPeerTrackNode));
+            } else {
+              dispatch(
+                updateLocalPeerTrackNode(
+                  track.type === HMSTrackType.VIDEO ? { peer, track } : { peer }
+                )
+              );
+            }
+
+            // only setting `miniviewPeerTrackNode`, when:
+            // - there is no `miniviewPeerTrackNode`
+            // - if there is, then it is of regular track
+            if (!miniviewPeerTrackNode) {
+              dispatch(setMiniViewPeerTrackNode(newPeerTrackNode));
+            } else if (miniviewPeerTrackNode.id === newPeerTrackNode.id) {
+              dispatch(
+                updateMiniViewPeerTrackNode(
+                  track.type === HMSTrackType.VIDEO ? { peer, track } : { peer }
+                )
+              );
+            }
+          }
+          // else -> {
+          //    should `localPeerTrackNode` be created/updated for non-regular track addition?
+          //    should `miniviewPeerTrackNode` be created/updated for non-regular track addition?
+          // }
+
           updateLocalPeer();
+        } else {
+          // only setting `miniviewPeerTrackNode`, when:
+          // - there is already `miniviewPeerTrackNode`
+          // - and it is of same peer's regular track
+          if (
+            miniviewPeerTrackNode &&
+            miniviewPeerTrackNode.id === newPeerTrackNode.id
+          ) {
+            dispatch(
+              updateMiniViewPeerTrackNode(
+                track.type === HMSTrackType.VIDEO ? { peer, track } : { peer }
+              )
+            );
+          }
         }
         return;
       }
@@ -349,7 +468,52 @@ const useHMSTrackUpdate = (
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
         if (peer.isLocal) {
+          if (track.source === HMSTrackSource.REGULAR) {
+            if (!peer.audioTrack?.trackId && !peer.videoTrack?.trackId) {
+              dispatch(setLocalPeerTrackNode(null));
+
+              // removing `miniviewPeerTrackNode`, when:
+              // - `localPeerTrack` was used as `miniviewPeerTrackNode`
+              // - and now local peer doesn't have any tracks
+              if (
+                miniviewPeerTrackNode &&
+                miniviewPeerTrackNode.peer.peerID === peer.peerID
+              ) {
+                dispatch(setMiniViewPeerTrackNode(null));
+              }
+            } else {
+              if (track.type === HMSTrackType.VIDEO) {
+                dispatch(updateLocalPeerTrackNode({ peer, track: undefined }));
+              } else {
+                dispatch(updateLocalPeerTrackNode({ peer }));
+              }
+
+              // updating `miniviewPeerTrackNode`
+              if (
+                miniviewPeerTrackNode &&
+                miniviewPeerTrackNode.peer.peerID === peer.peerID
+              ) {
+                if (track.type === HMSTrackType.VIDEO) {
+                  dispatch(
+                    updateMiniViewPeerTrackNode({ peer, track: undefined })
+                  );
+                } else {
+                  dispatch(updateMiniViewPeerTrackNode({ peer }));
+                }
+              }
+            }
+          }
+
           updateLocalPeer();
+        } else {
+          // only removing `miniviewPeerTrackNode`, when:
+          // - there is already `miniviewPeerTrackNode`
+          // - and it is of same peer's regular track
+          const uniqueId = createPeerTrackNodeUniqueId(peer, track);
+
+          if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+            dispatch(setMiniViewPeerTrackNode(null));
+          }
         }
         return;
       }
@@ -383,10 +547,29 @@ const useHMSTrackUpdate = (
           return prevPeerTrackNodes;
         });
 
+        const uniqueId = createPeerTrackNodeUniqueId(peer, track);
+
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
         if (peer.isLocal) {
+          const updatePayload =
+            track.type === HMSTrackType.VIDEO ? { peer, track } : { peer };
+
+          dispatch(updateLocalPeerTrackNode(updatePayload));
+
+          // Take care of miniviewPeerTrackNode
+          if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+            dispatch(updateMiniViewPeerTrackNode(updatePayload));
+          }
+
           updateLocalPeer();
+        } else {
+          if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+            const updatePayload =
+              track.type === HMSTrackType.VIDEO ? { peer, track } : { peer };
+
+            dispatch(updateMiniViewPeerTrackNode(updatePayload));
+          }
         }
         return;
       }
@@ -407,6 +590,16 @@ const useHMSTrackUpdate = (
           }
           return prevPeerTrackNodes;
         });
+
+        const uniqueId = createPeerTrackNodeUniqueId(peer, track);
+
+        if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+          dispatch(
+            updateMiniViewPeerTrackNode({
+              isDegraded: type === HMSTrackUpdate.TRACK_DEGRADED,
+            })
+          );
+        }
         return;
       }
     };
@@ -547,7 +740,9 @@ export const useHMSRoleChangeRequest = (
 
 type SessionStoreListeners = Array<{ remove: () => void }>;
 
-export const useHMSSessionStoreListeners = () => {
+export const useHMSSessionStoreListeners = (
+  gridViewRef: React.MutableRefObject<GridViewRefAttrs | null>
+) => {
   const dispatch = useDispatch();
   const hmsSessionStore = useSelector(
     (state: RootState) => state.user.hmsSessionStore
@@ -564,6 +759,10 @@ export const useHMSSessionStoreListeners = () => {
         const handleSpotlightIdChange = (id: HMSSessionStoreValue) => {
           // set value to the state to rerender the component to reflect changes
           dispatch(saveUserData({ spotlightTrackId: id }));
+          // Scroll to start of the list
+          gridViewRef.current
+            ?.getFlatlistRef()
+            .current?.scrollToOffset({ animated: true, offset: 0 });
         };
 
         // Handle 'pinnedMessage' key values
@@ -737,52 +936,11 @@ export const useHMSMessages = () => {
 
 export const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
-  // TODO: What if this is undefined?
-  const navigation = useNavigation();
+  const { destroy } = useLeaveMethods();
 
   useEffect(() => {
     const pipRoomLeaveHandler = () => {
-      hmsInstance
-        .destroy()
-        .then((s) => {
-          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.canGoBack()) {
-          //   navigation.goBack();
-          // } else {
-          // TODO: remove this later
-          navigation.navigate('QRCodeScreen' as never);
-          dispatch(clearStore());
-          // }
-        })
-        .catch((e) => {
-          console.log(`Destroy HMS instance Error: ${e}`);
-          Toast.showWithGravity(
-            `Destroy HMS instance Error: ${e}`,
-            Toast.LONG,
-            Toast.TOP
-          );
-        });
+      destroy();
     };
 
     hmsInstance.addEventListener(
@@ -793,57 +951,16 @@ export const useHMSPIPRoomLeave = () => {
     return () => {
       hmsInstance.removeEventListener(HMSPIPListenerActions.ON_PIP_ROOM_LEAVE);
     };
-  }, [hmsInstance]);
+  }, [destroy, hmsInstance]);
 };
 
 export const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
-  // TODO: What if this is undefined?
-  const navigation = useNavigation();
+  const { destroy } = useLeaveMethods();
 
   useEffect(() => {
     const removedFromRoomHandler = () => {
-      hmsInstance
-        .destroy()
-        .then((s) => {
-          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.canGoBack()) {
-          //   navigation.goBack();
-          // } else {
-          // TODO: remove this later
-          navigation.navigate('QRCodeScreen' as never);
-          dispatch(clearStore());
-          // }
-        })
-        .catch((e) => {
-          console.log(`Destroy HMS instance Error: ${e}`);
-          Toast.showWithGravity(
-            `Destroy HMS instance Error: ${e}`,
-            Toast.LONG,
-            Toast.TOP
-          );
-        });
+      destroy();
     };
 
     hmsInstance.addEventListener(
@@ -856,7 +973,7 @@ export const useHMSRemovedFromRoomUpdate = () => {
         HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM
       );
     };
-  }, [hmsInstance]);
+  }, [destroy, hmsInstance]);
 };
 
 export const usePIPListener = () => {
@@ -903,6 +1020,104 @@ export const usePIPListener = () => {
   }, [isPipModeActive, hmsInstance]);
 };
 
+export const useHMSNetworkQualityUpdate = () => {
+  const hmsInstance = useHMSInstance();
+
+  useEffect(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, [hmsInstance]);
+};
+
+export const useHMSActiveSpeakerUpdates = (
+  setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>,
+  active?: boolean
+) => {
+  const hmsInstance = useHMSInstance();
+  const reduxStore = useStore<RootState>();
+  const isPortraitOrientation = useIsPortraitOrientation();
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+
+    const handleActiveSpeaker = (data: HMSSpeaker[]) => {
+      const activePage = reduxStore.getState().app.gridViewActivePage;
+      if (activePage !== 0) {
+        return;
+      }
+
+      setPeerTrackNodes((prevPeerTrackNodes) => {
+        // list of active speakers which are not in first page
+        const activeSpeakers = data.filter((speaker) => {
+          const uniquePeerTrackNodeId = createPeerTrackNodeUniqueId(
+            speaker.peer,
+            speaker.track
+          );
+
+          const inFirstPage = prevPeerTrackNodes.some(
+            (prevPeerTrackNode, _idx) => {
+              // we are on index which is not in current page
+              if (
+                _idx >=
+                (isPortraitOrientation
+                  ? MaxTilesInOnePage.IN_PORTRAIT
+                  : MaxTilesInOnePage.IN_LANDSCAPE)
+              ) {
+                return false;
+              }
+
+              return prevPeerTrackNode.id === uniquePeerTrackNodeId;
+            }
+          );
+
+          return !inFirstPage;
+        });
+
+        // All active speakers are in first page already, Do nothing
+        if (activeSpeakers.length === 0) {
+          return prevPeerTrackNodes;
+        }
+
+        // Updated list with all Active Speakers in first page
+        return prevPeerTrackNodes.reduce<PeerTrackNode[]>(
+          (accumulated, current) => {
+            if (
+              activeSpeakers.findIndex(
+                (activeSpeaker) =>
+                  createPeerTrackNodeUniqueId(
+                    activeSpeaker.peer,
+                    activeSpeaker.track
+                  ) === current.id
+              ) >= 0
+            ) {
+              // return [current, ...accumulated];
+              accumulated.unshift(current);
+              return accumulated;
+            }
+
+            // return [...accumulated, current];
+            accumulated.push(current);
+            return accumulated;
+          },
+          []
+        );
+      });
+    };
+
+    hmsInstance.addEventListener(
+      HMSUpdateListenerActions.ON_SPEAKER,
+      handleActiveSpeaker
+    );
+
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_SPEAKER);
+    };
+  }, [isPortraitOrientation, active, hmsInstance]);
+};
+
 let modalTaskRef: { current: any } = { current: null };
 
 export const clearPendingModalTasks = () => {
@@ -992,6 +1207,7 @@ export const clearConfig = () => {
 
 export const useHMSConfig = () => {
   const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
   const store = useStore();
 
   const getConfig = useCallback(async () => {
@@ -1005,6 +1221,18 @@ export const useHMSConfig = () => {
       storeState.user.endPoints?.token
     );
 
+    // TODO: [REMOVE LATER] added trycatch block so that we can join rooms where we are getting error from Layout API
+    try {
+      const roomLayout = await getRoomLayout(
+        hmsInstance,
+        token,
+        'https://api-nonprod.100ms.live'
+      );
+      dispatch(setLayoutConfig(roomLayout));
+    } catch (error) {
+      console.warn('# getRoomLayout error: ', error);
+    }
+
     hmsConfig = new HMSConfig({
       authToken: token,
       username: storeState.user.userName,
@@ -1016,7 +1244,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 = () => {
@@ -1031,7 +1270,7 @@ export const useSafeDimensions = () => {
 
 export const useShowChat = (): [
   'none' | 'inset' | 'modal',
-  (show: boolean) => void,
+  (show: boolean) => void
 ] => {
   const dispatch = useDispatch();
   const isHLSViewer = useIsHLSViewer();
@@ -1152,3 +1391,182 @@ 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 reduxStore = useStore<RootState>();
+
+  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());
+
+      const onLeave = reduxStore.getState().user.onLeave;
+
+      if (typeof onLeave === 'function') {
+        onLeave();
+        dispatch(clearStore());
+      } else 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 };
+};
+
+export const useHMSLayoutConfig = () => {
+  return useSelector((state: RootState) => state.hmsStates.layoutConfig);
+};
+
+export const useHMSRoomTheme = <S>(
+  selector?: (theme: Required<Theme>) => S
+): Required<Theme> | S => {
+  return useSelector((state: RootState) => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+
+    const roomTheme = layoutConfig?.themes.find((theme) => theme.default);
+
+    const defaultTheme: Required<Theme> = roomTheme
+      ? roomTheme.palette
+        ? (roomTheme as Required<Theme>)
+        : { ...roomTheme, palette: DEFAULT_THEME.palette }
+      : DEFAULT_THEME;
+
+    if (!selector) {
+      return defaultTheme;
+    }
+
+    return selector(defaultTheme);
+  }, shallowEqual);
+};
+
+export const useHMSRoomColorPalette = (): ColorPalette => {
+  return useHMSRoomTheme((theme) => theme.palette) as ColorPalette;
+};
+
+export const useHMSRoomTypography = (): Typography => {
+  return useSelector((state: RootState) => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+
+    const typography = layoutConfig?.typography;
+
+    if (!typography) {
+      return DEFAULT_TYPOGRAPHY;
+    }
+
+    if (!typography.font_family) {
+      return {
+        ...DEFAULT_TYPOGRAPHY,
+        ...typography,
+      };
+    }
+
+    return typography;
+  }, shallowEqual);
+};
+
+export const useHMSRoomStyleSheet = <
+  T extends { [key: string]: StyleProp<ViewStyle | TextStyle | ImageStyle> }
+>(
+  updater: (theme: Required<Theme>, typography: Required<Typography>) => T,
+  deps: DependencyList = []
+): T => {
+  const theme = useHMSRoomTheme<Required<Theme>>();
+  const typography = useHMSRoomTypography();
+
+  return useMemo(
+    () => updater(theme, typography),
+    [theme, typography, ...deps]
+  );
+};
+
+export const useHMSRoomStyle = <
+  T extends StyleProp<ViewStyle | TextStyle | ImageStyle>
+>(
+  updater: (theme: Required<Theme>, typography: Required<Typography>) => T,
+  deps: DependencyList = []
+): T => {
+  return useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      default: updater(theme, typography),
+    }),
+    deps
+  ).default;
+};