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

package/lib/module/hooks-util.js

@@ -3,17 +3,19 @@ import { HMSConfig, HMSPIPListenerActions, HMSPeerUpdate, HMSRoomUpdate, HMSTrac
 } from '@100mslive/react-native-hms';
 import Toast from 'react-native-simple-toast';
 import { useRef, useCallback, useEffect, useState, useMemo, useContext } from 'react';
-import { ModalTypes, PipModes } from './utils/types';
+import { MaxTilesInOnePage, ModalTypes, PipModes } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
-import { batch, useDispatch, useSelector, useStore } from 'react-redux';
-import { addMessage, addPinnedMessage, addToPreviewPeersList, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, removeFromPreviewPeersList, saveUserData, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setModalType } from './redux/actions';
-import { degradeOrRestorePeerTrackNodes, peerTrackNodeExistForPeer, peerTrackNodeExistForPeerAndTrack, removePeerTrackNodes, removePeerTrackNodesWithTrack, replacePeerTrackNodes, replacePeerTrackNodesWithTrack } from './peerTrackNodeUtils';
+import { batch, shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
+import { addMessage, addPinnedMessage, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, saveUserData, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setLayoutConfig, setLocalPeerTrackNode, setMiniViewPeerTrackNode, setModalType, setStartingOrStoppingRecording, updateLocalPeerTrackNode, updateMiniViewPeerTrackNode } from './redux/actions';
+import { createPeerTrackNodeUniqueId, degradeOrRestorePeerTrackNodes, peerTrackNodeExistForPeer, peerTrackNodeExistForPeerAndTrack, removePeerTrackNodes, removePeerTrackNodesWithTrack, replacePeerTrackNodes, replacePeerTrackNodesWithTrack } from './peerTrackNodeUtils';
 import { MeetingState } from './types';
 import { AppState, InteractionManager, LayoutAnimation, Platform } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 import { useIsLandscapeOrientation, useIsPortraitOrientation } from './utils/dimension';
 import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { selectIsHLSViewer, selectShouldGoLive } from './hooks-util-selectors';
+import { getRoomLayout } from './modules/HMSManager';
+import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
 export const useHMSListeners = setPeerTrackNodes => {
   const hmsInstance = useHMSInstance();
   const updateLocalPeer = useUpdateHMSLocalPeer(hmsInstance);
@@ -48,6 +50,10 @@ const useHMSRoomUpdate = hmsInstance => {
       }
       if (type === HMSRoomUpdate.BROWSER_RECORDING_STATE_UPDATED) {
         var _room$browserRecordin, _room$browserRecordin2;
+        const startingOrStoppingRecording = reduxStore.getState().app.startingOrStoppingRecording;
+        if (startingOrStoppingRecording) {
+          dispatch(setStartingOrStoppingRecording(false));
+        }
         let streaming = room === null || room === void 0 || (_room$browserRecordin = room.browserRecordingState) === null || _room$browserRecordin === void 0 ? void 0 : _room$browserRecordin.running;
         const startAtDate = room === null || room === void 0 || (_room$browserRecordin2 = room.browserRecordingState) === null || _room$browserRecordin2 === void 0 ? void 0 : _room$browserRecordin2.startedAt;
         let startTime = null;
@@ -97,7 +103,11 @@ const useHMSRoomUpdate = hmsInstance => {
 };
 const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
   const dispatch = useDispatch();
-  const inMeeting = useSelector(state => state.app.meetingState === MeetingState.IN_MEETING);
+  const store = useStore();
+  // const inMeeting = useSelector(
+  //   (state: RootState) => state.app.meetingState === MeetingState.IN_MEETING
+  // );
+
   useEffect(() => {
     const peerUpdateHandler = _ref => {
       let {
@@ -105,13 +115,14 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
         type
       } = _ref;
       // 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) {
@@ -128,6 +139,25 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           }
           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
@@ -160,11 +190,11 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
     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]);
 };
-
 const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
   const dispatch = useDispatch();
+  const store = useStore();
   useEffect(() => {
     const trackUpdateHandler = _ref2 => {
       let {
@@ -172,7 +202,12 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
         track,
         type
       } = _ref2;
+      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)) {
             if (track.type === HMSTrackType.VIDEO) {
@@ -180,14 +215,59 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
             }
             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;
       }
@@ -200,7 +280,53 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
         if (peer.isLocal) {
+          if (track.source === HMSTrackSource.REGULAR) {
+            var _peer$audioTrack2, _peer$videoTrack2;
+            if (!((_peer$audioTrack2 = peer.audioTrack) !== null && _peer$audioTrack2 !== void 0 && _peer$audioTrack2.trackId) && !((_peer$videoTrack2 = peer.videoTrack) !== null && _peer$videoTrack2 !== void 0 && _peer$videoTrack2.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;
       }
@@ -223,11 +349,34 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           }
           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;
       }
@@ -238,6 +387,12 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           }
           return prevPeerTrackNodes;
         });
+        const uniqueId = createPeerTrackNodeUniqueId(peer, track);
+        if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+          dispatch(updateMiniViewPeerTrackNode({
+            isDegraded: type === HMSTrackUpdate.TRACK_DEGRADED
+          }));
+        }
         return;
       }
     };
@@ -319,7 +474,7 @@ export const useHMSRoleChangeRequest = (callback, deps) => {
   }, [...(deps || []), hmsInstance]);
   return roleChangeRequest;
 };
-export const useHMSSessionStoreListeners = () => {
+export const useHMSSessionStoreListeners = gridViewRef => {
   const dispatch = useDispatch();
   const hmsSessionStore = useSelector(state => state.user.hmsSessionStore);
   const sessionStoreListenersRef = useRef([]);
@@ -331,10 +486,16 @@ export const useHMSSessionStoreListeners = () => {
       const addSessionStoreListeners = () => {
         // Handle 'spotlight' key values
         const handleSpotlightIdChange = id => {
+          var _gridViewRef$current;
           // set value to the state to rerender the component to reflect changes
           dispatch(saveUserData({
             spotlightTrackId: id
           }));
+          // Scroll to start of the list
+          (_gridViewRef$current = gridViewRef.current) === null || _gridViewRef$current === void 0 || (_gridViewRef$current = _gridViewRef$current.getFlatlistRef().current) === null || _gridViewRef$current === void 0 ? void 0 : _gridViewRef$current.scrollToOffset({
+            animated: true,
+            offset: 0
+          });
         };
 
         // Handle 'pinnedMessage' key values
@@ -463,101 +624,33 @@ 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(HMSPIPListenerActions.ON_PIP_ROOM_LEAVE, pipRoomLeaveHandler);
     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(HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM, removedFromRoomHandler);
     return () => {
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM);
     };
-  }, [hmsInstance]);
+  }, [destroy, hmsInstance]);
 };
 export const usePIPListener = () => {
   const hmsInstance = useHMSInstance();
@@ -595,6 +688,65 @@ export const usePIPListener = () => {
     }
   }, [isPipModeActive, hmsInstance]);
 };
+export const useHMSNetworkQualityUpdate = () => {
+  const hmsInstance = useHMSInstance();
+  useEffect(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, [hmsInstance]);
+};
+export const useHMSActiveSpeakerUpdates = (setPeerTrackNodes, active) => {
+  const hmsInstance = useHMSInstance();
+  const reduxStore = useStore();
+  const isPortraitOrientation = useIsPortraitOrientation();
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const handleActiveSpeaker = data => {
+      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((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: null
 };
@@ -666,12 +818,21 @@ export const clearConfig = () => {
 };
 export const useHMSConfig = () => {
   const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
   const store = useStore();
   const getConfig = useCallback(async () => {
     var _storeState$user$endP, _storeState$user$endP2;
     if (hmsConfig) return hmsConfig;
     const storeState = store.getState();
     const token = await hmsInstance.getAuthTokenByRoomCode(storeState.user.roomCode, storeState.user.userId, (_storeState$user$endP = storeState.user.endPoints) === null || _storeState$user$endP === void 0 ? void 0 : _storeState$user$endP.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,
@@ -805,6 +966,7 @@ export const useLeaveMethods = () => {
   const navigation = useContext(NavigationContext);
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
+  const reduxStore = useStore();
   const destroy = useCallback(async () => {
     try {
       const s = await hmsInstance.destroy();
@@ -829,7 +991,11 @@ 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 {
@@ -879,4 +1045,52 @@ export const useLeaveMethods = () => {
     goToPreview
   };
 };
+export const useHMSLayoutConfig = () => {
+  return useSelector(state => state.hmsStates.layoutConfig);
+};
+export const useHMSRoomTheme = selector => {
+  return useSelector(state => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+    const roomTheme = layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.themes.find(theme => theme.default);
+    const defaultTheme = roomTheme ? roomTheme.palette ? roomTheme : {
+      ...roomTheme,
+      palette: DEFAULT_THEME.palette
+    } : DEFAULT_THEME;
+    if (!selector) {
+      return defaultTheme;
+    }
+    return selector(defaultTheme);
+  }, shallowEqual);
+};
+export const useHMSRoomColorPalette = () => {
+  return useHMSRoomTheme(theme => theme.palette);
+};
+export const useHMSRoomTypography = () => {
+  return useSelector(state => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+    const typography = layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.typography;
+    if (!typography) {
+      return DEFAULT_TYPOGRAPHY;
+    }
+    if (!typography.font_family) {
+      return {
+        ...DEFAULT_TYPOGRAPHY,
+        ...typography
+      };
+    }
+    return typography;
+  }, shallowEqual);
+};
+export const useHMSRoomStyleSheet = function (updater) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const theme = useHMSRoomTheme();
+  const typography = useHMSRoomTypography();
+  return useMemo(() => updater(theme, typography), [theme, typography, ...deps]);
+};
+export const useHMSRoomStyle = function (updater) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return useHMSRoomStyleSheet((theme, typography) => ({
+    default: updater(theme, typography)
+  }), deps).default;
+};
 //# sourceMappingURL=hooks-util.js.map