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

package/lib/commonjs/hooks-util.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useShowLandscapeLayout = exports.useShowChat = exports.useSafeDimensions = exports.usePortraitChatViewVisible = exports.usePIPListener = exports.useModalType = exports.useLandscapeChatViewVisible = exports.useIsHLSViewer = exports.useHMSSessionStoreListeners = exports.useHMSSessionStore = exports.useHMSRoleChangeRequest = exports.useHMSRemovedFromRoomUpdate = exports.useHMSPIPRoomLeave = exports.useHMSMessages = exports.useHMSListeners = exports.useHMSInstance = exports.useHMSConfig = exports.useHMSChangeTrackStateRequest = exports.useFilteredParticipants = exports.useFetchHMSRoles = exports.clearPendingModalTasks = exports.clearConfig = void 0;
+exports.useShowLandscapeLayout = exports.useShowChat = exports.useShouldGoLive = exports.useSafeDimensions = exports.usePortraitChatViewVisible = exports.usePIPListener = exports.useModalType = exports.useLeaveMethods = exports.useLandscapeChatViewVisible = exports.useIsHLSViewer = exports.useHMSSessionStoreListeners = exports.useHMSSessionStore = exports.useHMSRoomTypography = exports.useHMSRoomTheme = exports.useHMSRoomStyleSheet = exports.useHMSRoomStyle = exports.useHMSRoomColorPalette = exports.useHMSRoleChangeRequest = exports.useHMSRemovedFromRoomUpdate = exports.useHMSPIPRoomLeave = exports.useHMSNetworkQualityUpdate = exports.useHMSMessages = exports.useHMSListeners = exports.useHMSLayoutConfig = exports.useHMSInstance = exports.useHMSConfig = exports.useHMSChangeTrackStateRequest = exports.useHMSActiveSpeakerUpdates = exports.useFilteredParticipants = exports.useFetchHMSRoles = exports.clearPendingModalTasks = exports.clearConfig = void 0;
 var _reactNativeHms = require("@100mslive/react-native-hms");
 var _reactNativeSimpleToast = _interopRequireDefault(require("react-native-simple-toast"));
 var _react = require("react");
@@ -18,17 +18,20 @@ var _native = require("@react-navigation/native");
 var _dimension = require("./utils/dimension");
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _hooksUtilSelectors = require("./hooks-util-selectors");
+var _HMSManager = require("./modules/HMSManager");
+var _theme = require("./utils/theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const useHMSListeners = (meetingState, setPeerTrackNodes, setMeetingState) => {
+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);
 };
 exports.useHMSListeners = useHMSListeners;
-const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
+const useHMSRoomUpdate = hmsInstance => {
   const dispatch = (0, _reactRedux.useDispatch)();
+  const reduxStore = (0, _reactRedux.useStore)();
   (0, _react.useEffect)(() => {
     const roomUpdateHandler = data => {
       var _room$localPeer$role;
@@ -43,16 +46,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((0, _actions.setHMSLocalPeerState)(room.localPeer));
-        setMeetingState(prevMeetingScreen => {
-          if (prevMeetingScreen !== _types2.MeetingState.IN_MEETING) {
-            return _types2.MeetingState.IN_MEETING;
+        const meetingState = reduxStore.getState().app.meetingState;
+        (0, _reactRedux.batch)(() => {
+          dispatch((0, _actions.setHMSLocalPeerState)(room.localPeer));
+          if (meetingState !== _types2.MeetingState.IN_MEETING) {
+            dispatch((0, _actions.changeMeetingState)(_types2.MeetingState.IN_MEETING));
           }
-          return prevMeetingScreen;
         });
       }
       if (type === _reactNativeHms.HMSRoomUpdate.BROWSER_RECORDING_STATE_UPDATED) {
         var _room$browserRecordin, _room$browserRecordin2;
+        const startingOrStoppingRecording = reduxStore.getState().app.startingOrStoppingRecording;
+        if (startingOrStoppingRecording) {
+          dispatch((0, _actions.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;
@@ -65,6 +72,7 @@ const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
         _reactNativeSimpleToast.default.showWithGravity(`Browser Recording ${streaming ? `Started ${startTime ? 'At ' + startTime : ''}` : 'Stopped'}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
       } else if (type === _reactNativeHms.HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
         var _room$hlsStreamingSta;
+        dispatch((0, _actions.changeStartingHLSStream)(false));
         let streaming = room === null || room === void 0 || (_room$hlsStreamingSta = room.hlsStreamingState) === null || _room$hlsStreamingSta === void 0 ? void 0 : _room$hlsStreamingSta.running;
         _reactNativeSimpleToast.default.showWithGravity(`HLS Streaming ${streaming ? 'Started' : 'Stopped'}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
       } else if (type === _reactNativeHms.HMSRoomUpdate.RTMP_STREAMING_STATE_UPDATED) {
@@ -99,9 +107,13 @@ const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
     };
   }, [hmsInstance]);
 };
-const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
+const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
   const dispatch = (0, _reactRedux.useDispatch)();
-  const inMeeting = meetingState === _types2.MeetingState.IN_MEETING;
+  const store = (0, _reactRedux.useStore)();
+  // const inMeeting = useSelector(
+  //   (state: RootState) => state.app.meetingState === MeetingState.IN_MEETING
+  // );
+
   (0, _react.useEffect)(() => {
     const peerUpdateHandler = _ref => {
       let {
@@ -109,13 +121,14 @@ const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTr
         type
       } = _ref;
       // Handle State from Preview screen
-      if (!inMeeting) {
-        if (type === _reactNativeHms.HMSPeerUpdate.PEER_JOINED) {
-          dispatch((0, _actions.addToPreviewPeersList)(peer));
-        } else if (type === _reactNativeHms.HMSPeerUpdate.PEER_LEFT) {
-          dispatch((0, _actions.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 === _reactNativeHms.HMSPeerUpdate.PEER_JOINED) {
@@ -132,6 +145,25 @@ const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTr
           }
           return prevPeerTrackNodes;
         });
+        const reduxState = store.getState();
+        const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
+        const localPeerTrackNode = reduxState.app.localPeerTrackNode;
+        (0, _reactRedux.batch)(() => {
+          if (localPeerTrackNode) {
+            dispatch((0, _actions.updateLocalPeerTrackNode)({
+              peer
+            }));
+          } else {
+            dispatch((0, _actions.setLocalPeerTrackNode)((0, _functions.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((0, _actions.updateMiniViewPeerTrackNode)({
+              peer
+            }));
+          }
+        });
 
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
@@ -164,11 +196,11 @@ const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTr
     return () => {
       hmsInstance.removeEventListener(_reactNativeHms.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 = (0, _reactRedux.useDispatch)();
+  const store = (0, _reactRedux.useStore)();
   (0, _react.useEffect)(() => {
     const trackUpdateHandler = _ref2 => {
       let {
@@ -176,7 +208,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 === _reactNativeHms.HMSTrackUpdate.TRACK_ADDED) {
+        const newPeerTrackNode = (0, _functions.createPeerTrackNode)(peer, track);
+        const willCreateMiniviewPeerTrackNode = !miniviewPeerTrackNode && peer.isLocal && track.source === _reactNativeHms.HMSTrackSource.REGULAR;
         setPeerTrackNodes(prevPeerTrackNodes => {
           if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeerAndTrack)(prevPeerTrackNodes, peer, track)) {
             if (track.type === _reactNativeHms.HMSTrackType.VIDEO) {
@@ -184,14 +221,59 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
             }
             return (0, _peerTrackNodeUtils.replacePeerTrackNodes)(prevPeerTrackNodes, peer);
           }
-          const newPeerTrackNode = (0, _functions.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 === _reactNativeHms.HMSTrackSource.REGULAR) {
+            if (!localPeerTrackNode) {
+              dispatch((0, _actions.setLocalPeerTrackNode)(newPeerTrackNode));
+            } else {
+              dispatch((0, _actions.updateLocalPeerTrackNode)(track.type === _reactNativeHms.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((0, _actions.setMiniViewPeerTrackNode)(newPeerTrackNode));
+            } else if (miniviewPeerTrackNode.id === newPeerTrackNode.id) {
+              dispatch((0, _actions.updateMiniViewPeerTrackNode)(track.type === _reactNativeHms.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((0, _actions.updateMiniViewPeerTrackNode)(track.type === _reactNativeHms.HMSTrackType.VIDEO ? {
+              peer,
+              track
+            } : {
+              peer
+            }));
+          }
         }
         return;
       }
@@ -204,7 +286,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 === _reactNativeHms.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((0, _actions.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((0, _actions.setMiniViewPeerTrackNode)(null));
+              }
+            } else {
+              if (track.type === _reactNativeHms.HMSTrackType.VIDEO) {
+                dispatch((0, _actions.updateLocalPeerTrackNode)({
+                  peer,
+                  track: undefined
+                }));
+              } else {
+                dispatch((0, _actions.updateLocalPeerTrackNode)({
+                  peer
+                }));
+              }
+
+              // updating `miniviewPeerTrackNode`
+              if (miniviewPeerTrackNode && miniviewPeerTrackNode.peer.peerID === peer.peerID) {
+                if (track.type === _reactNativeHms.HMSTrackType.VIDEO) {
+                  dispatch((0, _actions.updateMiniViewPeerTrackNode)({
+                    peer,
+                    track: undefined
+                  }));
+                } else {
+                  dispatch((0, _actions.updateMiniViewPeerTrackNode)({
+                    peer
+                  }));
+                }
+              }
+            }
+          }
           updateLocalPeer();
+        } else {
+          // only removing `miniviewPeerTrackNode`, when:
+          // - there is already `miniviewPeerTrackNode`
+          // - and it is of same peer's regular track
+          const uniqueId = (0, _peerTrackNodeUtils.createPeerTrackNodeUniqueId)(peer, track);
+          if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+            dispatch((0, _actions.setMiniViewPeerTrackNode)(null));
+          }
         }
         return;
       }
@@ -227,11 +355,34 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           }
           return prevPeerTrackNodes;
         });
+        const uniqueId = (0, _peerTrackNodeUtils.createPeerTrackNodeUniqueId)(peer, track);
 
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
         if (peer.isLocal) {
+          const updatePayload = track.type === _reactNativeHms.HMSTrackType.VIDEO ? {
+            peer,
+            track
+          } : {
+            peer
+          };
+          dispatch((0, _actions.updateLocalPeerTrackNode)(updatePayload));
+
+          // Take care of miniviewPeerTrackNode
+          if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+            dispatch((0, _actions.updateMiniViewPeerTrackNode)(updatePayload));
+          }
           updateLocalPeer();
+        } else {
+          if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+            const updatePayload = track.type === _reactNativeHms.HMSTrackType.VIDEO ? {
+              peer,
+              track
+            } : {
+              peer
+            };
+            dispatch((0, _actions.updateMiniViewPeerTrackNode)(updatePayload));
+          }
         }
         return;
       }
@@ -242,6 +393,12 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           }
           return prevPeerTrackNodes;
         });
+        const uniqueId = (0, _peerTrackNodeUtils.createPeerTrackNodeUniqueId)(peer, track);
+        if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+          dispatch((0, _actions.updateMiniViewPeerTrackNode)({
+            isDegraded: type === _reactNativeHms.HMSTrackUpdate.TRACK_DEGRADED
+          }));
+        }
         return;
       }
     };
@@ -327,7 +484,7 @@ const useHMSRoleChangeRequest = (callback, deps) => {
   return roleChangeRequest;
 };
 exports.useHMSRoleChangeRequest = useHMSRoleChangeRequest;
-const useHMSSessionStoreListeners = () => {
+const useHMSSessionStoreListeners = gridViewRef => {
   const dispatch = (0, _reactRedux.useDispatch)();
   const hmsSessionStore = (0, _reactRedux.useSelector)(state => state.user.hmsSessionStore);
   const sessionStoreListenersRef = (0, _react.useRef)([]);
@@ -339,10 +496,16 @@ 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((0, _actions.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
@@ -474,98 +637,34 @@ const useHMSMessages = () => {
 exports.useHMSMessages = useHMSMessages;
 const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
-  const dispatch = (0, _reactRedux.useDispatch)();
-  // TODO: What if this is undefined?
-  const navigation = (0, _native.useNavigation)();
+  const {
+    destroy
+  } = useLeaveMethods();
   (0, _react.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((0, _actions.clearStore)());
-        // }
-      }).catch(e => {
-        console.log(`Destroy HMS instance Error: ${e}`);
-        _reactNativeSimpleToast.default.showWithGravity(`Destroy HMS instance Error: ${e}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
-      });
+      destroy();
     };
     hmsInstance.addEventListener(_reactNativeHms.HMSPIPListenerActions.ON_PIP_ROOM_LEAVE, pipRoomLeaveHandler);
     return () => {
       hmsInstance.removeEventListener(_reactNativeHms.HMSPIPListenerActions.ON_PIP_ROOM_LEAVE);
     };
-  }, [hmsInstance]);
+  }, [destroy, hmsInstance]);
 };
 exports.useHMSPIPRoomLeave = useHMSPIPRoomLeave;
 const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
-  const dispatch = (0, _reactRedux.useDispatch)();
-  // TODO: What if this is undefined?
-  const navigation = (0, _native.useNavigation)();
+  const {
+    destroy
+  } = useLeaveMethods();
   (0, _react.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((0, _actions.clearStore)());
-        // }
-      }).catch(e => {
-        console.log(`Destroy HMS instance Error: ${e}`);
-        _reactNativeSimpleToast.default.showWithGravity(`Destroy HMS instance Error: ${e}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
-      });
+      destroy();
     };
     hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM, removedFromRoomHandler);
     return () => {
       hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM);
     };
-  }, [hmsInstance]);
+  }, [destroy, hmsInstance]);
 };
 exports.useHMSRemovedFromRoomUpdate = useHMSRemovedFromRoomUpdate;
 const usePIPListener = () => {
@@ -605,6 +704,67 @@ const usePIPListener = () => {
   }, [isPipModeActive, hmsInstance]);
 };
 exports.usePIPListener = usePIPListener;
+const useHMSNetworkQualityUpdate = () => {
+  const hmsInstance = useHMSInstance();
+  (0, _react.useEffect)(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, [hmsInstance]);
+};
+exports.useHMSNetworkQualityUpdate = useHMSNetworkQualityUpdate;
+const useHMSActiveSpeakerUpdates = (setPeerTrackNodes, active) => {
+  const hmsInstance = useHMSInstance();
+  const reduxStore = (0, _reactRedux.useStore)();
+  const isPortraitOrientation = (0, _dimension.useIsPortraitOrientation)();
+  (0, _react.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 = (0, _peerTrackNodeUtils.createPeerTrackNodeUniqueId)(speaker.peer, speaker.track);
+          const inFirstPage = prevPeerTrackNodes.some((prevPeerTrackNode, _idx) => {
+            // we are on index which is not in current page
+            if (_idx >= (isPortraitOrientation ? _types.MaxTilesInOnePage.IN_PORTRAIT : _types.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 => (0, _peerTrackNodeUtils.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(_reactNativeHms.HMSUpdateListenerActions.ON_SPEAKER, handleActiveSpeaker);
+    return () => {
+      hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_SPEAKER);
+    };
+  }, [isPortraitOrientation, active, hmsInstance]);
+};
+exports.useHMSActiveSpeakerUpdates = useHMSActiveSpeakerUpdates;
 let modalTaskRef = {
   current: null
 };
@@ -681,12 +841,21 @@ const clearConfig = () => {
 exports.clearConfig = clearConfig;
 const useHMSConfig = () => {
   const hmsInstance = useHMSInstance();
+  const dispatch = (0, _reactRedux.useDispatch)();
   const store = (0, _reactRedux.useStore)();
   const getConfig = (0, _react.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 (0, _HMSManager.getRoomLayout)(hmsInstance, token, 'https://api-nonprod.100ms.live');
+      dispatch((0, _actions.setLayoutConfig)(roomLayout));
+    } catch (error) {
+      console.warn('# getRoomLayout error: ', error);
+    }
     hmsConfig = new _reactNativeHms.HMSConfig({
       authToken: token,
       username: storeState.user.userName,
@@ -697,8 +866,19 @@ const useHMSConfig = () => {
 
     return hmsConfig;
   }, [hmsInstance]);
+  const updateConfig = (0, _react.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
   };
 };
@@ -807,4 +987,147 @@ const useFilteredParticipants = () => {
   };
 };
 exports.useFilteredParticipants = useFilteredParticipants;
+const useShouldGoLive = () => {
+  const shouldGoLive = (0, _reactRedux.useSelector)(_hooksUtilSelectors.selectShouldGoLive);
+  return shouldGoLive;
+};
+exports.useShouldGoLive = useShouldGoLive;
+const useLeaveMethods = () => {
+  const navigation = (0, _react.useContext)(_native.NavigationContext);
+  const hmsInstance = useHMSInstance();
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const reduxStore = (0, _reactRedux.useStore)();
+  const destroy = (0, _react.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((0, _actions.clearStore)());
+      } else if (navigation && navigation.canGoBack()) {
+        navigation.goBack();
+        dispatch((0, _actions.clearStore)());
+      } else {
+        // TODO: call onLeave Callback if provided
+        // Otherwise default action is to show "Meeting Ended" screen
+        dispatch((0, _actions.clearStore)()); // TODO: We need different clearStore for MeetingEnded
+        dispatch((0, _actions.changeMeetingState)(_types2.MeetingState.MEETING_ENDED));
+      }
+    } catch (e) {
+      console.log(`Destroy HMS instance Error: ${e}`);
+      _reactNativeSimpleToast.default.showWithGravity(`Destroy HMS instance Error: ${e}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
+      return Promise.reject(e);
+    }
+  }, [hmsInstance]);
+  const leave = (0, _react.useCallback)(async () => {
+    try {
+      const d = await hmsInstance.leave();
+      console.log('Leave Success: ', d);
+      await destroy();
+    } catch (e) {
+      console.log(`Leave Room Error: ${e}`);
+      _reactNativeSimpleToast.default.showWithGravity(`Leave Room Error: ${e}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
+    }
+  }, [destroy, hmsInstance]);
+  const goToPreview = (0, _react.useCallback)(async () => {
+    try {
+      await hmsInstance.leave();
+      await hmsInstance.destroy();
+      dispatch((0, _actions.clearStore)());
+    } catch (error) {
+      _reactNativeSimpleToast.default.showWithGravity(`Unable to go to Preview: ${error}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
+    }
+  }, [hmsInstance]);
+  const endRoom = (0, _react.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
+  };
+};
+exports.useLeaveMethods = useLeaveMethods;
+const useHMSLayoutConfig = () => {
+  return (0, _reactRedux.useSelector)(state => state.hmsStates.layoutConfig);
+};
+exports.useHMSLayoutConfig = useHMSLayoutConfig;
+const useHMSRoomTheme = selector => {
+  return (0, _reactRedux.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: _theme.DEFAULT_THEME.palette
+    } : _theme.DEFAULT_THEME;
+    if (!selector) {
+      return defaultTheme;
+    }
+    return selector(defaultTheme);
+  }, _reactRedux.shallowEqual);
+};
+exports.useHMSRoomTheme = useHMSRoomTheme;
+const useHMSRoomColorPalette = () => {
+  return useHMSRoomTheme(theme => theme.palette);
+};
+exports.useHMSRoomColorPalette = useHMSRoomColorPalette;
+const useHMSRoomTypography = () => {
+  return (0, _reactRedux.useSelector)(state => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+    const typography = layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.typography;
+    if (!typography) {
+      return _theme.DEFAULT_TYPOGRAPHY;
+    }
+    if (!typography.font_family) {
+      return {
+        ..._theme.DEFAULT_TYPOGRAPHY,
+        ...typography
+      };
+    }
+    return typography;
+  }, _reactRedux.shallowEqual);
+};
+exports.useHMSRoomTypography = useHMSRoomTypography;
+const useHMSRoomStyleSheet = function (updater) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const theme = useHMSRoomTheme();
+  const typography = useHMSRoomTypography();
+  return (0, _react.useMemo)(() => updater(theme, typography), [theme, typography, ...deps]);
+};
+exports.useHMSRoomStyleSheet = useHMSRoomStyleSheet;
+const useHMSRoomStyle = function (updater) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return useHMSRoomStyleSheet((theme, typography) => ({
+    default: updater(theme, typography)
+  }), deps).default;
+};
+exports.useHMSRoomStyle = useHMSRoomStyle;
 //# sourceMappingURL=hooks-util.js.map