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

package/src/hooks-util.ts

@@ -21,7 +21,13 @@ 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,
@@ -31,30 +37,42 @@ import {
   useMemo,
   useContext,
 } from 'react';
+import type { DependencyList } from 'react';
 
-import { ModalTypes, PipModes } from './utils/types';
+import { MaxTilesInOnePage, ModalTypes, PipModes } from './utils/types';
 import type { PeerTrackNode } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
-import { batch, 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,
@@ -70,6 +88,7 @@ import {
   LayoutAnimation,
   Platform,
 } from 'react-native';
+import type { ImageStyle, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 import {
   useIsLandscapeOrientation,
@@ -80,6 +99,9 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 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 = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
@@ -96,7 +118,7 @@ export const useHMSListeners = (
 
 const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
   const dispatch = useDispatch();
-  const reduxStore = useStore();
+  const reduxStore = useStore<RootState>();
 
   useEffect(() => {
     const roomUpdateHandler = (data: {
@@ -112,8 +134,7 @@ const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
        * 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) {
-        const meetingState = (reduxStore.getState() as RootState).app
-          .meetingState;
+        const meetingState = reduxStore.getState().app.meetingState;
 
         batch(() => {
           dispatch(setHMSLocalPeerState(room.localPeer));
@@ -124,6 +145,13 @@ const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
       }
 
       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;
 
@@ -221,20 +249,22 @@ const useHMSPeersUpdate = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
 ) => {
   const dispatch = useDispatch();
-  const inMeeting = useSelector(
-    (state: RootState) => state.app.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) {
@@ -254,6 +284,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();
@@ -297,7 +349,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 = {
@@ -312,10 +364,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)
@@ -329,14 +393,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;
       }
@@ -354,7 +469,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;
       }
@@ -388,10 +548,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;
       }
@@ -412,6 +591,16 @@ const useHMSTrackUpdate = (
           }
           return prevPeerTrackNodes;
         });
+
+        const uniqueId = createPeerTrackNodeUniqueId(peer, track);
+
+        if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+          dispatch(
+            updateMiniViewPeerTrackNode({
+              isDegraded: type === HMSTrackUpdate.TRACK_DEGRADED,
+            })
+          );
+        }
         return;
       }
     };
@@ -552,7 +741,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
@@ -569,6 +760,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
@@ -742,54 +937,11 @@ export const useHMSMessages = () => {
 
 export const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
-  // TODO: What if this is undefined?
-  const navigation = useContext(NavigationContext);
+  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 && 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
-          );
-        });
+      destroy();
     };
 
     hmsInstance.addEventListener(
@@ -800,59 +952,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 = useContext(NavigationContext);
+  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 && 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
-          );
-        });
+      destroy();
     };
 
     hmsInstance.addEventListener(
@@ -865,7 +974,7 @@ export const useHMSRemovedFromRoomUpdate = () => {
         HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM
       );
     };
-  }, [hmsInstance]);
+  }, [destroy, hmsInstance]);
 };
 
 export const usePIPListener = () => {
@@ -912,6 +1021,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 = () => {
@@ -1001,6 +1208,7 @@ export const clearConfig = () => {
 
 export const useHMSConfig = () => {
   const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
   const store = useStore();
 
   const getConfig = useCallback(async () => {
@@ -1014,6 +1222,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,
@@ -1183,6 +1403,7 @@ export const useLeaveMethods = () => {
   const navigation = useContext(NavigationContext);
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
+  const reduxStore = useStore<RootState>();
 
   const destroy = useCallback(async () => {
     try {
@@ -1208,7 +1429,12 @@ export const useLeaveMethods = () => {
       // dispatch(clearPeerData());
       // dispatch(clearHmsReference());
 
-      if (navigation && navigation.canGoBack()) {
+      const onLeave = reduxStore.getState().user.onLeave;
+
+      if (typeof onLeave === 'function') {
+        onLeave();
+        dispatch(clearStore());
+      } else if (navigation && navigation.canGoBack()) {
         navigation.goBack();
         dispatch(clearStore());
       } else {
@@ -1265,3 +1491,83 @@ export const useLeaveMethods = () => {
 
   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;
+};