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

package/lib/commonjs/hooks-util-selectors.js.map

@@ -1 +1 @@
-{"version":3,"names":["selectIsHLSViewer","peer","_peer$role","role","name","includes","exports","selectShouldGoLive","state","_state$hmsStates$room","_state$hmsStates$loca","isHLSStreaming","hmsStates","room","hlsStreamingState","running","canStartHLSStreaming","localPeer","permissions","hlsStreaming"],"sourceRoot":"../../src","sources":["hooks-util-selectors.tsx"],"mappings":";;;;;;AAIO,MAAMA,iBAAiB,GAAIC,IAAgC;EAAA,IAAAC,UAAA;EAAA,OAChE,CAAAD,IAAI,aAAJA,IAAI,gBAAAC,UAAA,GAAJD,IAAI,CAAEE,IAAI,cAAAD,UAAA,gBAAAA,UAAA,GAAVA,UAAA,CAAYE,IAAI,cAAAF,UAAA,uBAAhBA,UAAA,CAAkBG,QAAQ,CAAC,KAAK,CAAC,KAAI,KAAK;AAAA;AAACC,OAAA,CAAAN,iBAAA,GAAAA,iBAAA;AAEtC,MAAMO,kBAAkB,GAAIC,KAAgB,IAAK;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACtD,MAAMC,cAAc,IAAAF,qBAAA,GAAGD,KAAK,CAACI,SAAS,CAACC,IAAI,cAAAJ,qBAAA,uBAApBA,qBAAA,CAAsBK,iBAAiB,CAACC,OAAO;EACtE,MAAMC,oBAAoB,IAAAN,qBAAA,GACxBF,KAAK,CAACI,SAAS,CAACK,SAAS,cAAAP,qBAAA,gBAAAA,qBAAA,GAAzBA,qBAAA,CAA2BP,IAAI,cAAAO,qBAAA,gBAAAA,qBAAA,GAA/BA,qBAAA,CAAiCQ,WAAW,cAAAR,qBAAA,uBAA5CA,qBAAA,CAA8CS,YAAY;EAE5D,OAAOH,oBAAoB,IAAI,CAACL,cAAc;AAChD,CAAC;AAACL,OAAA,CAAAC,kBAAA,GAAAA,kBAAA"}
+{"version":3,"names":["_join_form","require","selectIsHLSViewer","peer","_peer$role","role","name","includes","exports","selectShouldGoLive","state","_state$hmsStates$room","_layoutConfig$screens","_state$hmsStates$loca","layoutConfig","hmsStates","isHLSStreaming","room","hlsStreamingState","running","joinButtonType","screens","preview","default","elements","join_form","join_btn_type","canStartHLSStreaming","JoinForm_JoinBtnType","JOIN_BTN_TYPE_JOIN_AND_GO_LIVE","JOIN_BTN_TYPE_JOIN_ONLY","localPeer","permissions","hlsStreaming"],"sourceRoot":"../../src","sources":["hooks-util-selectors.tsx"],"mappings":";;;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AAIO,MAAMC,iBAAiB,GAAIC,IAAgC;EAAA,IAAAC,UAAA;EAAA,OAChE,CAAAD,IAAI,aAAJA,IAAI,gBAAAC,UAAA,GAAJD,IAAI,CAAEE,IAAI,cAAAD,UAAA,gBAAAA,UAAA,GAAVA,UAAA,CAAYE,IAAI,cAAAF,UAAA,uBAAhBA,UAAA,CAAkBG,QAAQ,CAAC,KAAK,CAAC,KAAI,KAAK;AAAA;AAACC,OAAA,CAAAN,iBAAA,GAAAA,iBAAA;AAEtC,MAAMO,kBAAkB,GAAIC,KAAgB,IAAK;EAAA,IAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA;EACtD,MAAMC,YAAY,GAAGJ,KAAK,CAACK,SAAS,CAACD,YAAY;EACjD,MAAME,cAAc,IAAAL,qBAAA,GAAGD,KAAK,CAACK,SAAS,CAACE,IAAI,cAAAN,qBAAA,uBAApBA,qBAAA,CAAsBO,iBAAiB,CAACC,OAAO;EAEtE,MAAMC,cAAc,GAClBN,YAAY,aAAZA,YAAY,gBAAAF,qBAAA,GAAZE,YAAY,CAAEO,OAAO,cAAAT,qBAAA,gBAAAA,qBAAA,GAArBA,qBAAA,CAAuBU,OAAO,cAAAV,qBAAA,gBAAAA,qBAAA,GAA9BA,qBAAA,CAAgCW,OAAO,cAAAX,qBAAA,gBAAAA,qBAAA,GAAvCA,qBAAA,CAAyCY,QAAQ,cAAAZ,qBAAA,gBAAAA,qBAAA,GAAjDA,qBAAA,CAAmDa,SAAS,cAAAb,qBAAA,uBAA5DA,qBAAA,CAA8Dc,aAAa;EAE7E,MAAMC,oBAAoB,GACxBP,cAAc,KAAKQ,+BAAoB,CAACC,8BAA8B,IACtET,cAAc,KAAKQ,+BAAoB,CAACE,uBAAuB;EAC3D;EACAV,cAAc,KAAKQ,+BAAoB,CAACC,8BAA8B,GACtE;EAAA,CAAAhB,qBAAA,GACAH,KAAK,CAACK,SAAS,CAACgB,SAAS,cAAAlB,qBAAA,gBAAAA,qBAAA,GAAzBA,qBAAA,CAA2BR,IAAI,cAAAQ,qBAAA,gBAAAA,qBAAA,GAA/BA,qBAAA,CAAiCmB,WAAW,cAAAnB,qBAAA,uBAA5CA,qBAAA,CAA8CoB,YAAY;EAEhE,OAAON,oBAAoB,IAAI,CAACX,cAAc;AAChD,CAAC;AAACR,OAAA,CAAAC,kBAAA,GAAAA,kBAAA"}

package/lib/commonjs/hooks-util.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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.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,6 +18,8 @@ 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 = setPeerTrackNodes => {
   const hmsInstance = useHMSInstance();
@@ -54,6 +56,10 @@ const useHMSRoomUpdate = hmsInstance => {
       }
       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;
@@ -103,7 +109,11 @@ const useHMSRoomUpdate = hmsInstance => {
 };
 const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
   const dispatch = (0, _reactRedux.useDispatch)();
-  const inMeeting = (0, _reactRedux.useSelector)(state => state.app.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 {
@@ -111,13 +121,14 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
         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) {
@@ -134,6 +145,25 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           }
           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
@@ -166,11 +196,11 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
     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 {
@@ -178,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) {
@@ -186,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;
       }
@@ -206,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;
       }
@@ -229,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;
       }
@@ -244,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;
       }
     };
@@ -329,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)([]);
@@ -341,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
@@ -476,102 +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, _react.useContext)(_native.NavigationContext);
+  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 && 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);
-      });
+      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, _react.useContext)(_native.NavigationContext);
+  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 && 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);
-      });
+      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 = () => {
@@ -611,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
 };
@@ -687,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,
@@ -833,6 +996,7 @@ 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();
@@ -857,7 +1021,11 @@ const useLeaveMethods = () => {
       // dispatch(clearPeerData());
       // dispatch(clearHmsReference());
 
-      if (navigation && navigation.canGoBack()) {
+      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 {
@@ -908,4 +1076,58 @@ const useLeaveMethods = () => {
   };
 };
 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