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

package/lib/module/hooks-util.js

@@ -2,27 +2,30 @@ import { HMSConfig, HMSPIPListenerActions, HMSPeerUpdate, HMSRoomUpdate, HMSTrac
 // useHMSPeerUpdates,
 } from '@100mslive/react-native-hms';
 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 { MaxTilesInOnePage, ModalTypes, PipModes } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
-import { useDispatch, useSelector, useStore } from 'react-redux';
-import { addMessage, addPinnedMessage, addToPreviewPeersList, changePipModeStatus, 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 { useNavigation } from '@react-navigation/native';
+import { NavigationContext } from '@react-navigation/native';
 import { useIsLandscapeOrientation, useIsPortraitOrientation } from './utils/dimension';
 import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { selectIsHLSViewer } from './hooks-util-selectors';
-export const useHMSListeners = (meetingState, setPeerTrackNodes, setMeetingState) => {
+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);
-  useHMSRoomUpdate(hmsInstance, setMeetingState);
-  useHMSPeersUpdate(meetingState, hmsInstance, updateLocalPeer, setPeerTrackNodes);
+  useHMSRoomUpdate(hmsInstance);
+  useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
   useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 };
-const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
+const useHMSRoomUpdate = hmsInstance => {
   const dispatch = useDispatch();
+  const reduxStore = useStore();
   useEffect(() => {
     const roomUpdateHandler = data => {
       var _room$localPeer$role;
@@ -37,16 +40,20 @@ const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
        * before ON_JOIN, if ON_ROOM comes then we can show Meeting screen to user, instead of Loader or Preview
        */
       if (((_room$localPeer$role = room.localPeer.role) === null || _room$localPeer$role === void 0 || (_room$localPeer$role = _room$localPeer$role.name) === null || _room$localPeer$role === void 0 ? void 0 : _room$localPeer$role.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) {
         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;
@@ -59,6 +66,7 @@ const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
         Toast.showWithGravity(`Browser Recording ${streaming ? `Started ${startTime ? 'At ' + startTime : ''}` : 'Stopped'}`, Toast.LONG, Toast.TOP);
       } else if (type === HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
         var _room$hlsStreamingSta;
+        dispatch(changeStartingHLSStream(false));
         let streaming = room === null || room === void 0 || (_room$hlsStreamingSta = room.hlsStreamingState) === null || _room$hlsStreamingSta === void 0 ? void 0 : _room$hlsStreamingSta.running;
         Toast.showWithGravity(`HLS Streaming ${streaming ? 'Started' : 'Stopped'}`, Toast.LONG, Toast.TOP);
       } else if (type === HMSRoomUpdate.RTMP_STREAMING_STATE_UPDATED) {
@@ -93,9 +101,13 @@ const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
     };
   }, [hmsInstance]);
 };
-const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
+const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
   const dispatch = useDispatch();
-  const inMeeting = meetingState === MeetingState.IN_MEETING;
+  const store = useStore();
+  // const inMeeting = useSelector(
+  //   (state: RootState) => state.app.meetingState === MeetingState.IN_MEETING
+  // );
+
   useEffect(() => {
     const peerUpdateHandler = _ref => {
       let {
@@ -103,13 +115,14 @@ const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTr
         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) {
@@ -126,6 +139,25 @@ const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTr
           }
           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
@@ -158,11 +190,11 @@ const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTr
     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 {
@@ -170,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) {
@@ -178,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;
       }
@@ -198,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;
       }
@@ -221,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;
       }
@@ -236,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;
       }
     };
@@ -317,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([]);
@@ -329,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
@@ -461,97 +624,33 @@ 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');
-        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(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 = 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');
-        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(HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM, removedFromRoomHandler);
     return () => {
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM);
     };
-  }, [hmsInstance]);
+  }, [destroy, hmsInstance]);
 };
 export const usePIPListener = () => {
   const hmsInstance = useHMSInstance();
@@ -589,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
 };
@@ -660,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,
@@ -676,8 +843,19 @@ export const useHMSConfig = () => {
 
     return hmsConfig;
   }, [hmsInstance]);
+  const updateConfig = useCallback(data => {
+    if (!hmsConfig) {
+      throw new Error('No HMSConfig is available to update!');
+    }
+    Object.entries(data).forEach(_ref4 => {
+      let [key, value] = _ref4;
+      // @ts-ignore
+      hmsConfig[key] = value;
+    });
+  }, []);
   return {
     clearConfig,
+    updateConfig,
     getConfig
   };
 };
@@ -780,4 +958,139 @@ 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();
+  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 => 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