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

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.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;
+exports.useShowLandscapeLayout = exports.useShowChatAndParticipants = exports.useShouldGoLive = exports.useSendMessage = exports.usePortraitChatViewVisible = exports.usePIPListener = exports.useOffStageParticipants = 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.useHMSReconnection = exports.useHMSPIPRoomLeave = exports.useHMSNetworkQualityUpdate = exports.useHMSMessages = exports.useHMSListeners = exports.useHMSLayoutConfig = exports.useHMSInstance = exports.useHMSConfig = exports.useHMSConferencingScreenConfig = exports.useHMSChatLayoutConfig = exports.useHMSChangeTrackStateRequest = exports.useHMSActiveSpeakerUpdates = exports.useFilteredParticipants = exports.useFetchHMSRoles = exports.isPublishingAllowed = 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");
@@ -16,16 +16,17 @@ var _types2 = require("./types");
 var _reactNative = require("react-native");
 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");
+var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const useHMSListeners = setPeerTrackNodes => {
   const hmsInstance = useHMSInstance();
   const updateLocalPeer = useUpdateHMSLocalPeer(hmsInstance);
   useHMSRoomUpdate(hmsInstance);
   useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
+  useHMSPeerListUpdated(hmsInstance);
   useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 };
 exports.useHMSListeners = useHMSListeners;
@@ -34,56 +35,27 @@ const useHMSRoomUpdate = hmsInstance => {
   const reduxStore = (0, _reactRedux.useStore)();
   (0, _react.useEffect)(() => {
     const roomUpdateHandler = data => {
-      var _room$localPeer$role;
       const {
         room,
         type
       } = data;
       dispatch((0, _actions.setHMSRoomState)(room));
-
-      /**
-       * Handle case when User is joining as HLSViewer,
-       * 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) {
-        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));
-          }
-        });
-      }
       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;
-        if (startAtDate) {
-          var _startAtDate$getMinut;
-          let hours = startAtDate.getHours().toString();
-          let minutes = (_startAtDate$getMinut = startAtDate.getMinutes()) === null || _startAtDate$getMinut === void 0 ? void 0 : _startAtDate$getMinut.toString();
-          startTime = hours + ':' + minutes;
-        }
-        _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) {
         var _room$rtmpHMSRtmpStre, _room$rtmpHMSRtmpStre2;
         let streaming = room === null || room === void 0 || (_room$rtmpHMSRtmpStre = room.rtmpHMSRtmpStreamingState) === null || _room$rtmpHMSRtmpStre === void 0 ? void 0 : _room$rtmpHMSRtmpStre.running;
         const startAtDate = room === null || room === void 0 || (_room$rtmpHMSRtmpStre2 = room.rtmpHMSRtmpStreamingState) === null || _room$rtmpHMSRtmpStre2 === void 0 ? void 0 : _room$rtmpHMSRtmpStre2.startedAt;
         let startTime = null;
         if (startAtDate) {
-          var _startAtDate$getMinut2;
+          var _startAtDate$getMinut;
           let hours = startAtDate.getHours().toString();
-          let minutes = (_startAtDate$getMinut2 = startAtDate.getMinutes()) === null || _startAtDate$getMinut2 === void 0 ? void 0 : _startAtDate$getMinut2.toString();
+          let minutes = (_startAtDate$getMinut = startAtDate.getMinutes()) === null || _startAtDate$getMinut === void 0 ? void 0 : _startAtDate$getMinut.toString();
           startTime = hours + ':' + minutes;
         }
         _reactNativeSimpleToast.default.showWithGravity(`RTMP Streaming ${streaming ? `Started ${startTime ? 'At ' + startTime : ''}` : 'Stopped'}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
@@ -93,9 +65,9 @@ const useHMSRoomUpdate = hmsInstance => {
         const startAtDate = room === null || room === void 0 || (_room$serverRecording2 = room.serverRecordingState) === null || _room$serverRecording2 === void 0 ? void 0 : _room$serverRecording2.startedAt;
         let startTime = null;
         if (startAtDate) {
-          var _startAtDate$getMinut3;
+          var _startAtDate$getMinut2;
           let hours = startAtDate.getHours().toString();
-          let minutes = (_startAtDate$getMinut3 = startAtDate.getMinutes()) === null || _startAtDate$getMinut3 === void 0 ? void 0 : _startAtDate$getMinut3.toString();
+          let minutes = (_startAtDate$getMinut2 = startAtDate.getMinutes()) === null || _startAtDate$getMinut2 === void 0 ? void 0 : _startAtDate$getMinut2.toString();
           startTime = hours + ':' + minutes;
         }
         _reactNativeSimpleToast.default.showWithGravity(`Server Recording ${streaming ? `Started ${startTime ? 'At ' + startTime : ''}` : 'Stopped'}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
@@ -132,37 +104,85 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
 
       // Handle State for Meeting screen
       if (type === _reactNativeHms.HMSPeerUpdate.PEER_JOINED) {
+        dispatch((0, _actions.addParticipant)(peer));
         return;
       }
       if (type === _reactNativeHms.HMSPeerUpdate.PEER_LEFT) {
+        dispatch((0, _actions.removeParticipant)(peer));
+
+        // Handling regular tiles list
         setPeerTrackNodes(prevPeerTrackNodes => (0, _peerTrackNodeUtils.removePeerTrackNodes)(prevPeerTrackNodes, peer));
+        const reduxState = store.getState();
+
+        // Handling Screenshare tiles list
+        const screensharePeerTrackNodes = reduxState.app.screensharePeerTrackNodes;
+        const nodeToRemove = screensharePeerTrackNodes.find(node => node.peer.peerID === peer.peerID);
+        if (nodeToRemove) {
+          dispatch((0, _actions.removeScreenshareTile)(nodeToRemove.id));
+        }
+
+        // Handling Full screen view
+        const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
+        if (fullScreenPeerTrackNode !== null && fullScreenPeerTrackNode.peer.peerID === peer.peerID) {
+          dispatch((0, _actions.setFullScreenPeerTrackNode)(null));
+        }
         return;
       }
       if (peer.isLocal) {
-        setPeerTrackNodes(prevPeerTrackNodes => {
-          if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeer)(prevPeerTrackNodes, peer)) {
-            return (0, _peerTrackNodeUtils.replacePeerTrackNodes)(prevPeerTrackNodes, peer);
-          }
-          return prevPeerTrackNodes;
-        });
+        var _selectVideoTileLayou;
         const reduxState = store.getState();
+        const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
         const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
         const localPeerTrackNode = reduxState.app.localPeerTrackNode;
+
+        // Currently Applied Layout config
+        const currentLayoutConfig = (0, _hooksUtilSelectors.selectLayoutConfigForRole)(reduxState.hmsStates.layoutConfig, peer.role || null);
+
+        // Local Tile Inset layout is enabled
+        const enableLocalTileInset = (_selectVideoTileLayou = (0, _hooksUtilSelectors.selectVideoTileLayoutConfig)(currentLayoutConfig)) === null || _selectVideoTileLayou === void 0 || (_selectVideoTileLayou = _selectVideoTileLayou.grid) === null || _selectVideoTileLayou === void 0 ? void 0 : _selectVideoTileLayou.enable_local_tile_inset;
+
+        // Local Tile Inset layout is disabled
+        const localTileInsetDisbaled = !enableLocalTileInset;
+
+        // Local Tile Inset layout is disabled
+        // then update local peer track node available in list of peer track nodes
+        if (localTileInsetDisbaled) {
+          setPeerTrackNodes(prevPeerTrackNodes => {
+            if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeer)(prevPeerTrackNodes, peer)) {
+              return (0, _peerTrackNodeUtils.replacePeerTrackNodes)(prevPeerTrackNodes, peer);
+            }
+            return prevPeerTrackNodes;
+          });
+        }
         (0, _reactRedux.batch)(() => {
           if (localPeerTrackNode) {
             dispatch((0, _actions.updateLocalPeerTrackNode)({
               peer
             }));
-          } else {
+          } else if (isPublishingAllowed(peer)) {
             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)({
+          if (fullScreenPeerTrackNode && fullScreenPeerTrackNode.peer.peerID === peer.peerID) {
+            dispatch((0, _actions.updateFullScreenPeerTrackNode)({
               peer
             }));
           }
+
+          // If Local Tile Inset layout is enabled, then update or set it
+          if (enableLocalTileInset) {
+            var _peer$role;
+            if (miniviewPeerTrackNode !== null && miniviewPeerTrackNode.peer.peerID === peer.peerID) {
+              dispatch((0, _actions.updateMiniViewPeerTrackNode)({
+                peer
+              }));
+            } else if (miniviewPeerTrackNode === null && (_peer$role = peer.role) !== null && _peer$role !== void 0 && (_peer$role = _peer$role.publishSettings) !== null && _peer$role !== void 0 && _peer$role.allowed && peer.role.publishSettings.allowed.length > 0) {
+              dispatch((0, _actions.setMiniViewPeerTrackNode)((0, _functions.createPeerTrackNode)(peer, peer.videoTrack)));
+            }
+          }
+          // If Local Tile Inset layout is disabled, then remove it if it exists
+          else if (miniviewPeerTrackNode) {
+            dispatch((0, _actions.setMiniViewPeerTrackNode)(null));
+          }
         });
 
         // - TODO: update local localPeer state
@@ -171,8 +191,11 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
         return;
       }
       if (type === _reactNativeHms.HMSPeerUpdate.ROLE_CHANGED) {
-        var _peer$role, _peer$role2, _peer$role3;
-        if (((_peer$role = peer.role) === null || _peer$role === void 0 || (_peer$role = _peer$role.publishSettings) === null || _peer$role === void 0 ? void 0 : _peer$role.allowed) === undefined || (_peer$role2 = peer.role) !== null && _peer$role2 !== void 0 && (_peer$role2 = _peer$role2.publishSettings) !== null && _peer$role2 !== void 0 && _peer$role2.allowed && ((_peer$role3 = peer.role) === null || _peer$role3 === void 0 || (_peer$role3 = _peer$role3.publishSettings) === null || _peer$role3 === void 0 ? void 0 : _peer$role3.allowed.length) < 1) {
+        var _peer$role2, _peer$role3, _peer$role4, _peer$role5, _peer$role6, _peer$role7, _peer$role8, _peer$role9, _peer$role10;
+        dispatch((0, _actions.addUpdateParticipant)(peer));
+
+        // Handling regular tiles list
+        if (((_peer$role2 = peer.role) === null || _peer$role2 === void 0 || (_peer$role2 = _peer$role2.publishSettings) === null || _peer$role2 === void 0 ? void 0 : _peer$role2.allowed) === undefined || (_peer$role3 = peer.role) !== null && _peer$role3 !== void 0 && (_peer$role3 = _peer$role3.publishSettings) !== null && _peer$role3 !== void 0 && _peer$role3.allowed && ((_peer$role4 = peer.role) === null || _peer$role4 === void 0 || (_peer$role4 = _peer$role4.publishSettings) === null || _peer$role4 === void 0 ? void 0 : _peer$role4.allowed.length) < 1) {
           setPeerTrackNodes(prevPeerTrackNodes => {
             if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeer)(prevPeerTrackNodes, peer)) {
               return (0, _peerTrackNodeUtils.removePeerTrackNodes)(prevPeerTrackNodes, peer);
@@ -180,15 +203,84 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
             return prevPeerTrackNodes;
           });
         }
+        const reduxState = store.getState();
+
+        // Handling screenshare tiles list
+        if (((_peer$role5 = peer.role) === null || _peer$role5 === void 0 || (_peer$role5 = _peer$role5.publishSettings) === null || _peer$role5 === void 0 ? void 0 : _peer$role5.allowed) === undefined || (_peer$role6 = peer.role) !== null && _peer$role6 !== void 0 && (_peer$role6 = _peer$role6.publishSettings) !== null && _peer$role6 !== void 0 && _peer$role6.allowed && !((_peer$role7 = peer.role) !== null && _peer$role7 !== void 0 && (_peer$role7 = _peer$role7.publishSettings) !== null && _peer$role7 !== void 0 && _peer$role7.allowed.includes('screen'))) {
+          const screensharePeerTrackNodes = reduxState.app.screensharePeerTrackNodes;
+          const nodeToRemove = screensharePeerTrackNodes.find(node => node.peer.peerID === peer.peerID);
+          if (nodeToRemove) {
+            dispatch((0, _actions.removeScreenshareTile)(nodeToRemove.id));
+          }
+        }
+
+        // Handling full screen view
+        if (((_peer$role8 = peer.role) === null || _peer$role8 === void 0 || (_peer$role8 = _peer$role8.publishSettings) === null || _peer$role8 === void 0 ? void 0 : _peer$role8.allowed) === undefined || (_peer$role9 = peer.role) !== null && _peer$role9 !== void 0 && (_peer$role9 = _peer$role9.publishSettings) !== null && _peer$role9 !== void 0 && _peer$role9.allowed && !((_peer$role10 = peer.role) !== null && _peer$role10 !== void 0 && (_peer$role10 = _peer$role10.publishSettings) !== null && _peer$role10 !== void 0 && _peer$role10.allowed.includes('video'))) {
+          const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
+          if (fullScreenPeerTrackNode !== null && fullScreenPeerTrackNode.peer.peerID === peer.peerID) {
+            dispatch((0, _actions.setFullScreenPeerTrackNode)(null));
+          }
+        }
         return;
       }
-      if (type === _reactNativeHms.HMSPeerUpdate.METADATA_CHANGED || type === _reactNativeHms.HMSPeerUpdate.NAME_CHANGED || type === _reactNativeHms.HMSPeerUpdate.NETWORK_QUALITY_UPDATED) {
+      if (type === _reactNativeHms.HMSPeerUpdate.METADATA_CHANGED || type === _reactNativeHms.HMSPeerUpdate.HAND_RAISED_CHANGED || type === _reactNativeHms.HMSPeerUpdate.NAME_CHANGED || type === _reactNativeHms.HMSPeerUpdate.NETWORK_QUALITY_UPDATED) {
+        dispatch((0, _actions.addUpdateParticipant)(peer));
+        const reduxState = store.getState();
+        if (type === _reactNativeHms.HMSPeerUpdate.HAND_RAISED_CHANGED) {
+          const handRaised = peer.isHandRaised;
+          if (handRaised) {
+            var _selectedLayoutConfig, _peer$role11, _reduxState$hmsStates;
+            const {
+              layoutConfig,
+              localPeer
+            } = reduxState.hmsStates;
+            const selectedLayoutConfig = (0, _hooksUtilSelectors.selectLayoutConfigForRole)(layoutConfig, (localPeer === null || localPeer === void 0 ? void 0 : localPeer.role) || null);
+
+            // list of roles which should be brought on stage when they raise hand
+            const offStageRoles = selectedLayoutConfig === null || selectedLayoutConfig === void 0 || (_selectedLayoutConfig = selectedLayoutConfig.screens) === null || _selectedLayoutConfig === void 0 || (_selectedLayoutConfig = _selectedLayoutConfig.conferencing) === null || _selectedLayoutConfig === void 0 || (_selectedLayoutConfig = _selectedLayoutConfig.default) === null || _selectedLayoutConfig === void 0 || (_selectedLayoutConfig = _selectedLayoutConfig.elements) === null || _selectedLayoutConfig === void 0 || (_selectedLayoutConfig = _selectedLayoutConfig.on_stage_exp) === null || _selectedLayoutConfig === void 0 ? void 0 : _selectedLayoutConfig.off_stage_roles;
+
+            // checking if the current peer role is included in the above list
+            const shouldBringOnStage = offStageRoles && offStageRoles.includes((_peer$role11 = peer.role) === null || _peer$role11 === void 0 ? void 0 : _peer$role11.name);
+            const canChangeRole = (_reduxState$hmsStates = reduxState.hmsStates.localPeer) === null || _reduxState$hmsStates === void 0 || (_reduxState$hmsStates = _reduxState$hmsStates.role) === null || _reduxState$hmsStates === void 0 || (_reduxState$hmsStates = _reduxState$hmsStates.permissions) === null || _reduxState$hmsStates === void 0 ? void 0 : _reduxState$hmsStates.changeRole;
+            if (shouldBringOnStage && canChangeRole) {
+              dispatch((0, _actions.addNotification)({
+                id: `${peer.peerID}-${_utils.NotificationTypes.HAND_RAISE}`,
+                type: _utils.NotificationTypes.HAND_RAISE,
+                peer
+              }));
+            }
+          } else {
+            const notifications = reduxState.app.notifications;
+            const notificationToRemove = notifications.find(notification => notification.id === `${peer.peerID}-${_utils.NotificationTypes.HAND_RAISE}`);
+            if (notificationToRemove) {
+              dispatch((0, _actions.removeNotification)(notificationToRemove.id));
+            }
+          }
+        }
         setPeerTrackNodes(prevPeerTrackNodes => {
           if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeer)(prevPeerTrackNodes, peer)) {
             return (0, _peerTrackNodeUtils.replacePeerTrackNodes)(prevPeerTrackNodes, peer);
           }
           return prevPeerTrackNodes;
         });
+
+        // Handling screenshare tile views
+        const screensharePeerTrackNodes = reduxState.app.screensharePeerTrackNodes;
+        const nodeToUpdate = screensharePeerTrackNodes.find(node => node.peer.peerID === peer.peerID);
+        if (nodeToUpdate) {
+          dispatch((0, _actions.updateScreenshareTile)({
+            id: nodeToUpdate.id,
+            peer
+          }));
+        }
+
+        // Handling fullscreen view
+        const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
+        if (fullScreenPeerTrackNode !== null && fullScreenPeerTrackNode.peer.peerID === peer.peerID) {
+          dispatch((0, _actions.updateFullScreenPeerTrackNode)({
+            peer
+          }));
+        }
         return;
       }
     };
@@ -198,41 +290,79 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
     };
   }, [hmsInstance]);
 };
+const useHMSPeerListUpdated = hmsInstance => {
+  const dispatch = (0, _reactRedux.useDispatch)();
+  (0, _react.useEffect)(() => {
+    const peerListUpdateHandler = _ref2 => {
+      let {
+        addedPeers,
+        removedPeers
+      } = _ref2;
+      (0, _reactRedux.batch)(() => {
+        dispatch((0, _actions.addParticipants)(addedPeers));
+        dispatch((0, _actions.removeParticipants)(removedPeers));
+      });
+    };
+    hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_PEER_LIST_UPDATED, peerListUpdateHandler);
+    return () => {
+      hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_PEER_LIST_UPDATED);
+    };
+  }, [hmsInstance]);
+};
+const isPublishingAllowed = peer => {
+  var _peer$role12, _peer$role13;
+  return (((_peer$role12 = peer.role) === null || _peer$role12 === void 0 || (_peer$role12 = _peer$role12.publishSettings) === null || _peer$role12 === void 0 ? void 0 : _peer$role12.allowed) && ((_peer$role13 = peer.role) === null || _peer$role13 === void 0 || (_peer$role13 = _peer$role13.publishSettings) === null || _peer$role13 === void 0 || (_peer$role13 = _peer$role13.allowed) === null || _peer$role13 === void 0 ? void 0 : _peer$role13.length) > 0) ?? false;
+};
+exports.isPublishingAllowed = isPublishingAllowed;
 const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
   const dispatch = (0, _reactRedux.useDispatch)();
   const store = (0, _reactRedux.useStore)();
   (0, _react.useEffect)(() => {
-    const trackUpdateHandler = _ref2 => {
+    const trackUpdateHandler = _ref3 => {
+      var _reduxState$hmsStates2, _selectVideoTileLayou2;
       let {
         peer,
         track,
         type
-      } = _ref2;
+      } = _ref3;
       const reduxState = store.getState();
+      const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
       const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
       const localPeerTrackNode = reduxState.app.localPeerTrackNode;
+      const currentLayoutConfig = (0, _hooksUtilSelectors.selectLayoutConfigForRole)(reduxState.hmsStates.layoutConfig, ((_reduxState$hmsStates2 = reduxState.hmsStates.localPeer) === null || _reduxState$hmsStates2 === void 0 ? void 0 : _reduxState$hmsStates2.role) ?? null);
+      const localTileInsetEnabled = (_selectVideoTileLayou2 = (0, _hooksUtilSelectors.selectVideoTileLayoutConfig)(currentLayoutConfig)) === null || _selectVideoTileLayou2 === void 0 || (_selectVideoTileLayou2 = _selectVideoTileLayou2.grid) === null || _selectVideoTileLayou2 === void 0 ? void 0 : _selectVideoTileLayou2.enable_local_tile_inset;
       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) {
-              return (0, _peerTrackNodeUtils.replacePeerTrackNodesWithTrack)(prevPeerTrackNodes, peer, track);
-            }
-            return (0, _peerTrackNodeUtils.replacePeerTrackNodes)(prevPeerTrackNodes, peer);
-          }
-          if (miniviewPeerTrackNode ? newPeerTrackNode.id !== miniviewPeerTrackNode.id : !willCreateMiniviewPeerTrackNode) {
-            return [...prevPeerTrackNodes, newPeerTrackNode];
+        if (track.source === _reactNativeHms.HMSTrackSource.SCREEN) {
+          if (!peer.isLocal && track.type === _reactNativeHms.HMSTrackType.VIDEO) {
+            dispatch((0, _actions.addScreenshareTile)(newPeerTrackNode));
           }
-          return prevPeerTrackNodes;
-        });
+        } else {
+          setPeerTrackNodes(prevPeerTrackNodes => {
+            if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeerAndTrack)(prevPeerTrackNodes, peer, track)) {
+              if (track.type === _reactNativeHms.HMSTrackType.VIDEO) {
+                return (0, _peerTrackNodeUtils.replacePeerTrackNodesWithTrack)(prevPeerTrackNodes, peer, track);
+              }
+              return (0, _peerTrackNodeUtils.replacePeerTrackNodes)(prevPeerTrackNodes, peer);
+            }
+            if (peer.isLocal && !localTileInsetEnabled) {
+              return [newPeerTrackNode, ...prevPeerTrackNodes];
+            }
+            if (!peer.isLocal && (miniviewPeerTrackNode ? newPeerTrackNode.id !== miniviewPeerTrackNode.id : true)) {
+              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));
+              if (isPublishingAllowed(newPeerTrackNode.peer)) {
+                dispatch((0, _actions.setLocalPeerTrackNode)(newPeerTrackNode));
+              }
             } else {
               dispatch((0, _actions.updateLocalPeerTrackNode)(track.type === _reactNativeHms.HMSTrackType.VIDEO ? {
                 peer,
@@ -241,20 +371,27 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
                 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
-              }));
+            if (localTileInsetEnabled) {
+              // 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
+                }));
+              }
             }
+
+            // if (track.type === HMSTrackType.AUDIO) {
+            //   dispatch(setIsLocalAudioMutedState(track.isMute()));
+            // } else if (track.type === HMSTrackType.VIDEO) {
+            //   dispatch(setIsLocalVideoMutedState(track.isMute()));
+            // }
           }
           // else -> {
           //    should `localPeerTrackNode` be created/updated for non-regular track addition?
@@ -279,9 +416,23 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
       }
       if (type === _reactNativeHms.HMSTrackUpdate.TRACK_REMOVED) {
         var _peer$audioTrack, _peer$videoTrack;
-        if (track.source !== _reactNativeHms.HMSTrackSource.REGULAR || ((_peer$audioTrack = peer.audioTrack) === null || _peer$audioTrack === void 0 ? void 0 : _peer$audioTrack.trackId) === undefined && ((_peer$videoTrack = peer.videoTrack) === null || _peer$videoTrack === void 0 ? void 0 : _peer$videoTrack.trackId) === undefined) {
+        if (track.source === _reactNativeHms.HMSTrackSource.SCREEN) {
+          if (!peer.isLocal && track.type === _reactNativeHms.HMSTrackType.VIDEO) {
+            const screensharePeerTrackNodes = reduxState.app.screensharePeerTrackNodes;
+            const nodeToRemove = screensharePeerTrackNodes.find(node => {
+              var _node$track;
+              return ((_node$track = node.track) === null || _node$track === void 0 ? void 0 : _node$track.trackId) === track.trackId;
+            });
+            if (nodeToRemove) {
+              dispatch((0, _actions.removeScreenshareTile)(nodeToRemove.id));
+            }
+          }
+        } else if (track.source === _reactNativeHms.HMSTrackSource.PLUGIN || ((_peer$audioTrack = peer.audioTrack) === null || _peer$audioTrack === void 0 ? void 0 : _peer$audioTrack.trackId) === undefined && ((_peer$videoTrack = peer.videoTrack) === null || _peer$videoTrack === void 0 ? void 0 : _peer$videoTrack.trackId) === undefined) {
           setPeerTrackNodes(prevPeerTrackNodes => (0, _peerTrackNodeUtils.removePeerTrackNodesWithTrack)(prevPeerTrackNodes, peer, track));
         }
+        if (fullScreenPeerTrackNode && fullScreenPeerTrackNode.track && fullScreenPeerTrackNode.track.trackId === track.trackId) {
+          dispatch((0, _actions.setFullScreenPeerTrackNode)(null));
+        }
 
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
@@ -359,46 +510,63 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
 
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
+        const updatePayload = track.type === _reactNativeHms.HMSTrackType.VIDEO ? {
+          peer,
+          track
+        } : {
+          peer
+        };
         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));
-          }
+        }
+        if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
+          dispatch((0, _actions.updateMiniViewPeerTrackNode)(updatePayload));
+        }
+        if (fullScreenPeerTrackNode && fullScreenPeerTrackNode.id === uniqueId) {
+          dispatch((0, _actions.updateFullScreenPeerTrackNode)(updatePayload));
         }
         return;
       }
       if (type === _reactNativeHms.HMSTrackUpdate.TRACK_RESTORED || type === _reactNativeHms.HMSTrackUpdate.TRACK_DEGRADED) {
-        setPeerTrackNodes(prevPeerTrackNodes => {
-          if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeerAndTrack)(prevPeerTrackNodes, peer, track)) {
-            return (0, _peerTrackNodeUtils.degradeOrRestorePeerTrackNodes)(prevPeerTrackNodes, peer, track, type === _reactNativeHms.HMSTrackUpdate.TRACK_DEGRADED);
+        // Checking if track source is screenshare
+        if (track.source === _reactNativeHms.HMSTrackSource.SCREEN) {
+          // Handling screenshare tiles list
+          const screensharePeerTrackNodes = reduxState.app.screensharePeerTrackNodes;
+          const nodeToUpdate = screensharePeerTrackNodes.find(node => {
+            var _node$track2;
+            return ((_node$track2 = node.track) === null || _node$track2 === void 0 ? void 0 : _node$track2.trackId) === track.trackId;
+          });
+          if (nodeToUpdate) {
+            dispatch((0, _actions.updateScreenshareTile)({
+              id: nodeToUpdate.id,
+              isDegraded: type === _reactNativeHms.HMSTrackUpdate.TRACK_DEGRADED
+            }));
           }
-          return prevPeerTrackNodes;
-        });
+        } else {
+          // Handling regular tiles list
+          setPeerTrackNodes(prevPeerTrackNodes => {
+            if ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeerAndTrack)(prevPeerTrackNodes, peer, track)) {
+              return (0, _peerTrackNodeUtils.degradeOrRestorePeerTrackNodes)(prevPeerTrackNodes, peer, track, type === _reactNativeHms.HMSTrackUpdate.TRACK_DEGRADED);
+            }
+            return prevPeerTrackNodes;
+          });
+        }
         const uniqueId = (0, _peerTrackNodeUtils.createPeerTrackNodeUniqueId)(peer, track);
+
+        // Handling miniview
         if (miniviewPeerTrackNode && miniviewPeerTrackNode.id === uniqueId) {
           dispatch((0, _actions.updateMiniViewPeerTrackNode)({
             isDegraded: type === _reactNativeHms.HMSTrackUpdate.TRACK_DEGRADED
           }));
         }
+
+        // Handling full screen view
+        if (fullScreenPeerTrackNode && fullScreenPeerTrackNode.id === uniqueId) {
+          dispatch((0, _actions.updateFullScreenPeerTrackNode)({
+            isDegraded: type === _reactNativeHms.HMSTrackUpdate.TRACK_DEGRADED
+          }));
+        }
         return;
       }
     };
@@ -436,7 +604,14 @@ const useHMSInstance = () => {
 };
 exports.useHMSInstance = useHMSInstance;
 const useIsHLSViewer = () => {
-  return (0, _reactRedux.useSelector)(state => (0, _hooksUtilSelectors.selectIsHLSViewer)(state.hmsStates.localPeer));
+  return (0, _reactRedux.useSelector)(state => {
+    const {
+      layoutConfig,
+      localPeer
+    } = state.hmsStates;
+    const selectedLayoutConfig = (0, _hooksUtilSelectors.selectLayoutConfigForRole)(layoutConfig, (localPeer === null || localPeer === void 0 ? void 0 : localPeer.role) || null);
+    return (0, _hooksUtilSelectors.selectIsHLSViewer)(localPeer === null || localPeer === void 0 ? void 0 : localPeer.role, selectedLayoutConfig);
+  });
 };
 exports.useIsHLSViewer = useIsHLSViewer;
 const useHMSChangeTrackStateRequest = (callback, deps) => {
@@ -450,7 +625,7 @@ const useHMSChangeTrackStateRequest = (callback, deps) => {
           requestedBy: request === null || request === void 0 || (_request$requestedBy = request.requestedBy) === null || _request$requestedBy === void 0 ? void 0 : _request$requestedBy.name,
           suggestedRole: request === null || request === void 0 ? void 0 : request.trackType
         });
-        callback === null || callback === void 0 ? void 0 : callback(request);
+        callback === null || callback === void 0 || callback(request);
       } else {
         var _request$requestedBy2;
         _reactNativeSimpleToast.default.showWithGravity(`Track Muted: ${request === null || request === void 0 || (_request$requestedBy2 = request.requestedBy) === null || _request$requestedBy2 === void 0 ? void 0 : _request$requestedBy2.name} Muted Your ${request === null || request === void 0 ? void 0 : request.trackType}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
@@ -465,23 +640,23 @@ const useHMSChangeTrackStateRequest = (callback, deps) => {
 };
 exports.useHMSChangeTrackStateRequest = useHMSChangeTrackStateRequest;
 const useHMSRoleChangeRequest = (callback, deps) => {
+  const taskRef = (0, _react.useRef)(null);
+  const dispatch = (0, _reactRedux.useDispatch)();
   const hmsInstance = useHMSInstance();
-  const [roleChangeRequest, setRoleChangeRequest] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    const changeRoleRequestHandler = request => {
-      var _request$requestedBy3, _request$suggestedRol;
-      setRoleChangeRequest({
-        requestedBy: request === null || request === void 0 || (_request$requestedBy3 = request.requestedBy) === null || _request$requestedBy3 === void 0 ? void 0 : _request$requestedBy3.name,
-        suggestedRole: request === null || request === void 0 || (_request$suggestedRol = request.suggestedRole) === null || _request$suggestedRol === void 0 ? void 0 : _request$suggestedRol.name
+    const changeRoleRequestHandler = async request => {
+      taskRef.current = _reactNative.InteractionManager.runAfterInteractions(() => {
+        dispatch((0, _actions.setRoleChangeRequest)(request));
+        callback === null || callback === void 0 || callback(request);
       });
-      callback === null || callback === void 0 ? void 0 : callback(request);
     };
     hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_ROLE_CHANGE_REQUEST, changeRoleRequestHandler);
     return () => {
+      var _taskRef$current;
+      (_taskRef$current = taskRef.current) === null || _taskRef$current === void 0 || _taskRef$current.cancel();
       hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_ROLE_CHANGE_REQUEST);
     };
   }, [...(deps || []), hmsInstance]);
-  return roleChangeRequest;
 };
 exports.useHMSRoleChangeRequest = useHMSRoleChangeRequest;
 const useHMSSessionStoreListeners = gridViewRef => {
@@ -502,7 +677,7 @@ const useHMSSessionStoreListeners = gridViewRef => {
             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({
+          (_gridViewRef$current = gridViewRef.current) === null || _gridViewRef$current === void 0 || (_gridViewRef$current = _gridViewRef$current.getRegularTilesFlatlistRef().current) === null || _gridViewRef$current === void 0 || _gridViewRef$current.scrollToOffset({
             animated: true,
             offset: 0
           });
@@ -604,10 +779,10 @@ const useHMSSessionStore = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = (0, _reactRedux.useDispatch)();
   (0, _react.useEffect)(() => {
-    const onSessionStoreAvailableListener = _ref3 => {
+    const onSessionStoreAvailableListener = _ref4 => {
       let {
         sessionStore
-      } = _ref3;
+      } = _ref4;
       // Saving `sessionStore` reference in `redux`
       dispatch((0, _actions.saveUserData)({
         hmsSessionStore: sessionStore
@@ -623,23 +798,67 @@ exports.useHMSSessionStore = useHMSSessionStore;
 const useHMSMessages = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = (0, _reactRedux.useDispatch)();
+  const canChangeRole = (0, _reactRedux.useSelector)(state => {
+    var _state$hmsStates$loca;
+    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.role) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.permissions) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.changeRole;
+  });
+  const canShowChat = useHMSConferencingScreenConfig(conferencingScreenConfig => {
+    var _conferencingScreenCo;
+    return !!(conferencingScreenConfig !== null && conferencingScreenConfig !== void 0 && (_conferencingScreenCo = conferencingScreenConfig.elements) !== null && _conferencingScreenCo !== void 0 && _conferencingScreenCo.chat);
+  });
   (0, _react.useEffect)(() => {
     const onMessageListener = message => {
-      dispatch((0, _actions.addMessage)(message));
+      if (message.type === _utils.NotificationTypes.ROLE_CHANGE_DECLINED) {
+        if (canChangeRole) {
+          var _message$sender;
+          dispatch((0, _actions.addNotification)({
+            id: `${(_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.peerID}-${_utils.NotificationTypes.ROLE_CHANGE_DECLINED}`,
+            type: _utils.NotificationTypes.ROLE_CHANGE_DECLINED,
+            peer: message.sender
+          }));
+        }
+      } else if (message.type === 'EMOJI_REACTION') {
+        console.log('Ignoring Emoji Reaction Message: ', message);
+      } else if (canShowChat) {
+        dispatch((0, _actions.addMessage)(message));
+      }
     };
     hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_MESSAGE, onMessageListener);
     return () => {
       // TODO: Remove this listener when user leaves, removed or room is ended
       hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_MESSAGE);
     };
-  }, [hmsInstance]);
+  }, [canChangeRole, canShowChat, hmsInstance]);
 };
 exports.useHMSMessages = useHMSMessages;
+const useHMSReconnection = () => {
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const hmsInstance = useHMSInstance();
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.RECONNECTING, () => {
+      if (mounted) {
+        dispatch((0, _actions.setReconnecting)(true));
+      }
+    });
+    hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.RECONNECTED, () => {
+      if (mounted) {
+        dispatch((0, _actions.setReconnecting)(false));
+      }
+    });
+    return () => {
+      mounted = false;
+      hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.RECONNECTING);
+      hmsInstance.removeEventListener(_reactNativeHms.HMSUpdateListenerActions.RECONNECTED);
+    };
+  }, [hmsInstance]);
+};
+exports.useHMSReconnection = useHMSReconnection;
 const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
   const {
     destroy
-  } = useLeaveMethods();
+  } = useLeaveMethods(true);
   (0, _react.useEffect)(() => {
     const pipRoomLeaveHandler = () => {
       destroy();
@@ -655,7 +874,7 @@ const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
   const {
     destroy
-  } = useLeaveMethods();
+  } = useLeaveMethods(true);
   (0, _react.useEffect)(() => {
     const removedFromRoomHandler = () => {
       destroy();
@@ -672,18 +891,14 @@ const usePIPListener = () => {
   const dispatch = (0, _reactRedux.useDispatch)();
   const isPipModeActive = (0, _reactRedux.useSelector)(state => state.app.pipModeStatus === _types.PipModes.ACTIVE);
   (0, _react.useEffect)(() => {
-    if (isPipModeActive) {
-      const appStateListener = () => {
-        _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
-        dispatch((0, _actions.changePipModeStatus)(_types.PipModes.INACTIVE));
-      };
-      _reactNative.AppState.addEventListener('focus', appStateListener);
-      return () => {
-        _reactNative.AppState.removeEventListener('focus', appStateListener);
-        dispatch((0, _actions.changePipModeStatus)(_types.PipModes.INACTIVE));
-      };
-    }
-  }, [isPipModeActive]);
+    const pipModeChangedHandler = data => {
+      dispatch((0, _actions.changePipModeStatus)(data.isInPictureInPictureMode ? _types.PipModes.ACTIVE : _types.PipModes.INACTIVE));
+    };
+    hmsInstance.addEventListener(_reactNativeHms.HMSPIPListenerActions.ON_PIP_MODE_CHANGED, pipModeChangedHandler);
+    return () => {
+      hmsInstance.removeEventListener(_reactNativeHms.HMSPIPListenerActions.ON_PIP_MODE_CHANGED);
+    };
+  }, []);
 
   // Check if PIP is supported or not
   (0, _react.useEffect)(() => {
@@ -714,6 +929,7 @@ const useHMSNetworkQualityUpdate = () => {
 exports.useHMSNetworkQualityUpdate = useHMSNetworkQualityUpdate;
 const useHMSActiveSpeakerUpdates = (setPeerTrackNodes, active) => {
   const hmsInstance = useHMSInstance();
+  const dispatch = (0, _reactRedux.useDispatch)();
   const reduxStore = (0, _reactRedux.useStore)();
   const isPortraitOrientation = (0, _dimension.useIsPortraitOrientation)();
   (0, _react.useEffect)(() => {
@@ -721,6 +937,7 @@ const useHMSActiveSpeakerUpdates = (setPeerTrackNodes, active) => {
       return;
     }
     const handleActiveSpeaker = data => {
+      dispatch((0, _actions.setActiveSpeakers)(data));
       const activePage = reduxStore.getState().app.gridViewActivePage;
       if (activePage !== 0) {
         return;
@@ -771,7 +988,7 @@ let modalTaskRef = {
 const clearPendingModalTasks = () => {
   if (_reactNative.Platform.OS === 'android') {
     var _modalTaskRef$current;
-    (_modalTaskRef$current = modalTaskRef.current) === null || _modalTaskRef$current === void 0 ? void 0 : _modalTaskRef$current.cancel();
+    (_modalTaskRef$current = modalTaskRef.current) === null || _modalTaskRef$current === void 0 || _modalTaskRef$current.cancel();
   } else {
     clearTimeout(modalTaskRef.current);
   }
@@ -828,10 +1045,11 @@ exports.useFetchHMSRoles = useFetchHMSRoles;
 const useShowLandscapeLayout = () => {
   const isLandscapeOrientation = (0, _dimension.useIsLandscapeOrientation)();
   const localPeerRoleName = (0, _reactRedux.useSelector)(state => {
-    var _state$hmsStates$loca;
-    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.role) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.name;
+    var _state$hmsStates$loca2;
+    return (_state$hmsStates$loca2 = state.hmsStates.localPeer) === null || _state$hmsStates$loca2 === void 0 || (_state$hmsStates$loca2 = _state$hmsStates$loca2.role) === null || _state$hmsStates$loca2 === void 0 ? void 0 : _state$hmsStates$loca2.name;
   });
-  return isLandscapeOrientation && !!localPeerRoleName && localPeerRoleName.includes('hls-');
+  const isHLSViewer = useIsHLSViewer();
+  return isLandscapeOrientation && !!localPeerRoleName && isHLSViewer;
 };
 exports.useShowLandscapeLayout = useShowLandscapeLayout;
 let hmsConfig = null;
@@ -844,14 +1062,15 @@ const useHMSConfig = () => {
   const dispatch = (0, _reactRedux.useDispatch)();
   const store = (0, _reactRedux.useStore)();
   const getConfig = (0, _react.useCallback)(async () => {
-    var _storeState$user$endP, _storeState$user$endP2;
+    var _storeState$user$endP, _storeState$user$endP3;
     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');
+      var _storeState$user$endP2;
+      const roomLayout = await (0, _HMSManager.getRoomLayout)(hmsInstance, token, (_storeState$user$endP2 = storeState.user.endPoints) === null || _storeState$user$endP2 === void 0 ? void 0 : _storeState$user$endP2.layout);
       dispatch((0, _actions.setLayoutConfig)(roomLayout));
     } catch (error) {
       console.warn('# getRoomLayout error: ', error);
@@ -860,18 +1079,16 @@ const useHMSConfig = () => {
       authToken: token,
       username: storeState.user.userName,
       captureNetworkQualityInPreview: true,
-      endpoint: (_storeState$user$endP2 = storeState.user.endPoints) === null || _storeState$user$endP2 === void 0 ? void 0 : _storeState$user$endP2.init
-      // metadata: JSON.stringify({isHandRaised: true}), // To join with hand raised
+      endpoint: (_storeState$user$endP3 = storeState.user.endPoints) === null || _storeState$user$endP3 === void 0 ? void 0 : _storeState$user$endP3.init
     });
-
     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;
+    Object.entries(data).forEach(_ref5 => {
+      let [key, value] = _ref5;
       // @ts-ignore
       hmsConfig[key] = value;
     });
@@ -883,107 +1100,215 @@ const useHMSConfig = () => {
   };
 };
 exports.useHMSConfig = useHMSConfig;
-const useSafeDimensions = () => {
-  const {
-    height,
-    width
-  } = (0, _reactNativeSafeAreaContext.useSafeAreaFrame)();
-  const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  return {
-    safeWidth: width - safeAreaInsets.left - safeAreaInsets.right,
-    safeHeight: height - safeAreaInsets.top - safeAreaInsets.bottom
-  };
-};
-exports.useSafeDimensions = useSafeDimensions;
-const useShowChat = () => {
+const useShowChatAndParticipants = () => {
   const dispatch = (0, _reactRedux.useDispatch)();
-  const isHLSViewer = useIsHLSViewer();
-  const showChatView = (0, _reactRedux.useSelector)(state => state.chatWindow.showChatView);
-  const hlsAspectRatio = (0, _reactRedux.useSelector)(state => state.app.hlsAspectRatio);
-  const chatVisible = (0, _react.useMemo)(() => {
-    if (!showChatView) return 'none';
-    if (isHLSViewer && ['16:9', '4:3'].includes(hlsAspectRatio.id)) return 'inset';
+  const {
+    modalVisibleType,
+    handleModalVisibleType: setModalVisible
+  } = useModalType();
+  const overlayChatLayout = useHMSChatLayoutConfig(chatConfig => chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.is_overlay);
+  const canShowChat = useHMSConferencingScreenConfig(conferencingScreenConfig => {
+    var _conferencingScreenCo2;
+    return !!(conferencingScreenConfig !== null && conferencingScreenConfig !== void 0 && (_conferencingScreenCo2 = conferencingScreenConfig.elements) !== null && _conferencingScreenCo2 !== void 0 && _conferencingScreenCo2.chat);
+  });
+  const canShowParticipants = useHMSConferencingScreenConfig(conferencingScreenConfig => {
+    var _conferencingScreenCo3;
+    return !!(conferencingScreenConfig !== null && conferencingScreenConfig !== void 0 && (_conferencingScreenCo3 = conferencingScreenConfig.elements) !== null && _conferencingScreenCo3 !== void 0 && _conferencingScreenCo3.participant_list);
+  });
 
-    // TODO: handle case when type modal is selected, but chat modal is not shown because aspect ration modal was just closed
-    return 'modal';
-  }, [showChatView, hlsAspectRatio.id, isHLSViewer]);
-  const isChatVisibleInsetType = chatVisible === 'inset';
-  const showChat = (0, _react.useCallback)(show => {
-    if (isChatVisibleInsetType) {
-      _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+  // state for inset chat view
+  const overlayChatVisible = (0, _reactRedux.useSelector)(state => state.chatWindow.showChatView);
+  const modalVisible = modalVisibleType === _types.ModalTypes.CHAT_AND_PARTICIPANTS;
+  const show = (0, _react.useCallback)(view => {
+    // Handle Showing Chat View/Modal
+    if (view === 'chat') {
+      if (!canShowChat) return;
+      if (overlayChatLayout) {
+        dispatch({
+          type: 'SET_SHOW_CHAT_VIEW',
+          showChatView: true
+        });
+      } else {
+        (0, _reactRedux.batch)(() => {
+          dispatch({
+            type: 'SET_SHOW_CHAT_VIEW',
+            showChatView: false
+          });
+          dispatch((0, _actions.setActiveChatBottomSheetTab)('Chat'));
+        });
+        setModalVisible(_types.ModalTypes.CHAT_AND_PARTICIPANTS);
+      }
     }
-    dispatch({
-      type: 'SET_SHOW_CHAT_VIEW',
-      showChatView: show
-    });
-  }, [isChatVisibleInsetType]);
-  return [chatVisible, showChat];
+    // Handle Showing Participant
+    else if (canShowParticipants) {
+      dispatch((0, _actions.setActiveChatBottomSheetTab)('Participants'));
+      setModalVisible(_types.ModalTypes.CHAT_AND_PARTICIPANTS);
+    }
+  }, [overlayChatLayout, canShowChat, canShowParticipants, setModalVisible]);
+  const hide = (0, _react.useCallback)(view => {
+    if (view === 'chat_overlay') {
+      dispatch({
+        type: 'SET_SHOW_CHAT_VIEW',
+        showChatView: false
+      });
+    } else {
+      setModalVisible(_types.ModalTypes.DEFAULT);
+    }
+  }, [overlayChatLayout, setModalVisible]);
+  return {
+    overlayChatVisible,
+    modalVisible,
+    overlayChatLayout,
+    canShowChat,
+    canShowParticipants,
+    show,
+    hide
+  };
 };
-exports.useShowChat = useShowChat;
+exports.useShowChatAndParticipants = useShowChatAndParticipants;
 const usePortraitChatViewVisible = () => {
-  const [chatVisible] = useShowChat();
+  const {
+    overlayChatVisible
+  } = useShowChatAndParticipants();
   const pipModeNotActive = (0, _reactRedux.useSelector)(state => state.app.pipModeStatus !== _types.PipModes.ACTIVE);
   const isPortraitOrientation = (0, _dimension.useIsPortraitOrientation)();
-  return pipModeNotActive && isPortraitOrientation && chatVisible === 'inset';
+  return pipModeNotActive && isPortraitOrientation && overlayChatVisible;
 };
 exports.usePortraitChatViewVisible = usePortraitChatViewVisible;
 const useLandscapeChatViewVisible = () => {
-  const [chatVisible] = useShowChat();
+  const {
+    overlayChatVisible
+  } = useShowChatAndParticipants();
   const pipModeNotActive = (0, _reactRedux.useSelector)(state => state.app.pipModeStatus !== _types.PipModes.ACTIVE);
   const isLandscapeOrientation = (0, _dimension.useIsLandscapeOrientation)();
-  return pipModeNotActive && isLandscapeOrientation && chatVisible === 'inset';
+  return pipModeNotActive && isLandscapeOrientation && overlayChatVisible;
 };
 exports.useLandscapeChatViewVisible = useLandscapeChatViewVisible;
-const useFilteredParticipants = () => {
+const useOffStageParticipants = () => {
+  const dispatch = (0, _reactRedux.useDispatch)();
   const hmsInstance = useHMSInstance();
-  const localPeer = (0, _reactRedux.useSelector)(state => state.hmsStates.localPeer);
-  const [filter, setFilter] = (0, _react.useState)('everyone');
-  const [participantsSearchInput, setParticipantsSearchInput] = (0, _react.useState)('');
-  const [hmsPeers, setHmsPeers] = (0, _react.useState)(localPeer ? [localPeer] : []);
-  const filteredPeerTrackNodes = (0, _react.useMemo)(() => {
-    const newFilteredPeerTrackNodes = hmsPeers === null || hmsPeers === void 0 ? void 0 : hmsPeers.filter(peer => {
-      var _peer$role4;
-      if (participantsSearchInput.length < 1 || peer.name.includes(participantsSearchInput) || (_peer$role4 = peer.role) !== null && _peer$role4 !== void 0 && (_peer$role4 = _peer$role4.name) !== null && _peer$role4 !== void 0 && _peer$role4.includes(participantsSearchInput)) {
-        return true;
-      }
-      return false;
-    });
-    if (filter === 'everyone') {
-      return newFilteredPeerTrackNodes;
-    }
-    if (filter === 'raised hand') {
-      return newFilteredPeerTrackNodes.filter(peer => {
-        const parsedMetaData = (0, _functions.parseMetadata)(peer.metadata);
-        return parsedMetaData.isHandRaised === true;
-      });
+  const offStageRoles = useHMSLayoutConfig(layoutConfig => {
+    var _layoutConfig$screens;
+    return (layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens = layoutConfig.screens) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.conferencing) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.default) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.elements) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.on_stage_exp) === null || _layoutConfig$screens === void 0 ? void 0 : _layoutConfig$screens.off_stage_roles) || null;
+  });
+  const [participantsTotalCounts, setParticipantsTotalCounts] = (0, _react.useState)({});
+  (0, _react.useEffect)(() => {
+    if (offStageRoles) {
+      let mounted = true;
+      const createIterator = async forRole => {
+        const iterator = hmsInstance.getPeerListIterator({
+          byRoleName: forRole,
+          limit: 10
+        });
+        const participants = await iterator.next();
+        if (mounted) {
+          dispatch((0, _actions.replaceParticipantsList)(participants, forRole));
+          setParticipantsTotalCounts(prev => ({
+            ...prev,
+            [forRole]: iterator.totalCount
+          }));
+        }
+      };
+      const createIteratorForRoles = () => {
+        offStageRoles.forEach(role => {
+          createIterator(role);
+        });
+      };
+      createIteratorForRoles();
+      const intervalId = setInterval(() => {
+        createIteratorForRoles();
+      }, _types.PeerListRefreshInterval);
+      return () => {
+        mounted = false;
+        clearInterval(intervalId);
+      };
     }
-    return newFilteredPeerTrackNodes.filter(peer => {
-      var _peer$role5;
-      return ((_peer$role5 = peer.role) === null || _peer$role5 === void 0 ? void 0 : _peer$role5.name) === filter;
+  }, [offStageRoles]);
+  return participantsTotalCounts;
+};
+exports.useOffStageParticipants = useOffStageParticipants;
+const useFilteredParticipants = filterText => {
+  var _participantsAccordia;
+  const roles = (0, _reactRedux.useSelector)(state => state.hmsStates.roles);
+  const onStageRole = useHMSLayoutConfig(layoutConfig => {
+    var _layoutConfig$screens2;
+    return (layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens2 = layoutConfig.screens) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.conferencing) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.default) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.elements) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.on_stage_exp) === null || _layoutConfig$screens2 === void 0 ? void 0 : _layoutConfig$screens2.on_stage_role) || null;
+  });
+  const offStageParticipantsTotalCounts = useOffStageParticipants();
+  const formattedSearchText = filterText.trim().toLowerCase();
+  const groupedParticipants = (0, _reactRedux.useSelector)(state => state.hmsStates.groupedParticipants);
+  const sortedRoles = (0, _react.useMemo)(() => {
+    return roles.filter(role => {
+      if (!role.name || role.name.startsWith('_')) {
+        return false;
+      }
+      return true;
+
+      // const list = groupedParticipants[role.name!];
+
+      // return list && list.length > 0;
+    }).sort((a, b) => {
+      var _a$publishSettings, _b$publishSettings;
+      if (onStageRole) {
+        if (a.name === onStageRole && b.name === onStageRole) {
+          return 0;
+        }
+        if (a.name === onStageRole) {
+          return -1;
+        }
+        if (b.name === onStageRole) {
+          return 1;
+        }
+      }
+      const canAPublish = (((_a$publishSettings = a.publishSettings) === null || _a$publishSettings === void 0 ? void 0 : _a$publishSettings.allowed) && a.publishSettings.allowed.length > 0) ?? false;
+      const canBPublish = (((_b$publishSettings = b.publishSettings) === null || _b$publishSettings === void 0 ? void 0 : _b$publishSettings.allowed) && b.publishSettings.allowed.length > 0) ?? false;
+      if (canAPublish && canBPublish) {
+        return 0;
+      }
+      if (canAPublish) {
+        return -1;
+      }
+      return 1;
     });
-  }, [participantsSearchInput, filter, hmsPeers]);
-  (0, _react.useEffect)(() => {
-    let ignore = false;
-    hmsInstance.getRemotePeers().then(peers => {
-      if (localPeer) {
-        _reactNative.InteractionManager.runAfterInteractions(() => {
-          if (!ignore) {
-            setHmsPeers([localPeer, ...peers]);
-          }
+  },
+  // [groupedParticipants, onStageRole, roles]
+  [onStageRole, roles]);
+  const participantsAccordianData = (0, _react.useMemo)(() => {
+    const t = [];
+    const filteredHandRaisedPeers = [];
+    sortedRoles.forEach(role => {
+      const list = groupedParticipants[role.name];
+      const filteredList = Array.isArray(list) && formattedSearchText.length > 0 ? list.filter(peer => peer.name.toLowerCase().includes(formattedSearchText)) : list;
+      if (Array.isArray(filteredList) && filteredList.length > 0) {
+        filteredHandRaisedPeers.push(filteredList);
+        const offStageRoleTotalCount = offStageParticipantsTotalCounts[role.name];
+        const firstTen = filteredList.slice(0, 10);
+        t.push({
+          id: role.name,
+          label: `${role.name} (${typeof offStageRoleTotalCount === 'number' ? offStageRoleTotalCount : filteredList.length})`,
+          showViewAll: typeof offStageRoleTotalCount === 'number' && formattedSearchText.length <= 0 ? offStageRoleTotalCount > 10 : filteredList.length > 10,
+          data: firstTen
         });
       }
     });
-    return () => {
-      ignore = true;
-    };
-  }, [localPeer, hmsInstance]);
+    const handRaisedParticipants = filteredHandRaisedPeers.flat().filter(participant => participant.isHandRaised);
+    const firstTenHandRaisedParticipants = handRaisedParticipants.slice(0, 10);
+    if (handRaisedParticipants.length > 0) {
+      t.unshift({
+        id: 'hand-raised',
+        label: `Hand Raised (${handRaisedParticipants.length})`,
+        showViewAll: handRaisedParticipants.length > 10,
+        data: firstTenHandRaisedParticipants
+      });
+    }
+    return t;
+  }, [formattedSearchText, groupedParticipants, offStageParticipantsTotalCounts, sortedRoles]);
+  const [expandedGroup, setExpandedGroup] = (0, _react.useState)(((_participantsAccordia = participantsAccordianData[0]) === null || _participantsAccordia === void 0 ? void 0 : _participantsAccordia.id) ?? null);
   return {
-    allParticipants: hmsPeers,
-    filteredParticipants: filteredPeerTrackNodes,
-    selectedFilter: filter,
-    changeFilter: setFilter,
-    searchText: participantsSearchInput,
-    setSearchText: setParticipantsSearchInput
+    data: participantsAccordianData,
+    formattedSearchText,
+    expandedGroup,
+    setExpandedGroup
   };
 };
 exports.useFilteredParticipants = useFilteredParticipants;
@@ -992,14 +1317,14 @@ const useShouldGoLive = () => {
   return shouldGoLive;
 };
 exports.useShouldGoLive = useShouldGoLive;
-const useLeaveMethods = () => {
+const useLeaveMethods = isUnmounted => {
   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 () => {
+  const destroy = (0, _react.useCallback)(() => {
     try {
-      const s = await hmsInstance.destroy();
+      const s = hmsInstance.destroy();
       console.log('Destroy Success: ', s);
       // TODOS:
       // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
@@ -1025,11 +1350,10 @@ const useLeaveMethods = () => {
       if (typeof onLeave === 'function') {
         onLeave();
         dispatch((0, _actions.clearStore)());
-      } else if (navigation && navigation.canGoBack()) {
+      } else if (navigation && navigation.canGoBack() && !isUnmounted) {
         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));
@@ -1040,7 +1364,13 @@ const useLeaveMethods = () => {
       return Promise.reject(e);
     }
   }, [hmsInstance]);
-  const leave = (0, _react.useCallback)(async () => {
+  const leave = (0, _react.useCallback)(async function () {
+    let shouldEndStream = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (shouldEndStream) {
+      hmsInstance.stopHLSStreaming().catch(error => {
+        console.log('Stop HLS Streaming Error: ', error);
+      });
+    }
     try {
       const d = await hmsInstance.leave();
       console.log('Leave Success: ', d);
@@ -1075,15 +1405,20 @@ const useLeaveMethods = () => {
     goToPreview
   };
 };
+
+// Returns layout config as it is returned from server
 exports.useLeaveMethods = useLeaveMethods;
-const useHMSLayoutConfig = () => {
-  return (0, _reactRedux.useSelector)(state => state.hmsStates.layoutConfig);
+const useHMSLayoutConfig = (selector, equalityFn) => {
+  return (0, _reactRedux.useSelector)(state => {
+    var _state$hmsStates$loca3;
+    return selector((0, _hooksUtilSelectors.selectLayoutConfigForRole)(state.hmsStates.layoutConfig, ((_state$hmsStates$loca3 = state.hmsStates.localPeer) === null || _state$hmsStates$loca3 === void 0 ? void 0 : _state$hmsStates$loca3.role) || null));
+  }, equalityFn);
 };
 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);
+  return useHMSLayoutConfig(layoutConfig => {
+    var _layoutConfig$themes;
+    const roomTheme = layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$themes = layoutConfig.themes) === null || _layoutConfig$themes === void 0 ? void 0 : _layoutConfig$themes.find(theme => theme.default);
     const defaultTheme = roomTheme ? roomTheme.palette ? roomTheme : {
       ...roomTheme,
       palette: _theme.DEFAULT_THEME.palette
@@ -1100,8 +1435,7 @@ const useHMSRoomColorPalette = () => {
 };
 exports.useHMSRoomColorPalette = useHMSRoomColorPalette;
 const useHMSRoomTypography = () => {
-  return (0, _reactRedux.useSelector)(state => {
-    const layoutConfig = state.hmsStates.layoutConfig;
+  return useHMSLayoutConfig(layoutConfig => {
     const typography = layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.typography;
     if (!typography) {
       return _theme.DEFAULT_TYPOGRAPHY;
@@ -1112,6 +1446,9 @@ const useHMSRoomTypography = () => {
         ...typography
       };
     }
+
+    // formatting font family name
+    typography.font_family = typography.font_family.replace(/ /g, '');
     return typography;
   }, _reactRedux.shallowEqual);
 };
@@ -1130,4 +1467,87 @@ const useHMSRoomStyle = function (updater) {
   }), deps).default;
 };
 exports.useHMSRoomStyle = useHMSRoomStyle;
+const useSendMessage = () => {
+  const hmsInstance = useHMSInstance();
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const reduxStore = (0, _reactRedux.useStore)();
+  const message = (0, _reactRedux.useSelector)(state => state.chatWindow.typedMessage);
+  const setMessage = (0, _react.useCallback)(text => {
+    dispatch({
+      type: 'SET_TYPED_MESSAGE',
+      typedMessage: text
+    });
+  }, []);
+  const sendMessage = (0, _react.useCallback)(async () => {
+    const chatWindowState = reduxStore.getState().chatWindow;
+    const message = chatWindowState.typedMessage;
+    const sendingTo = chatWindowState.sendTo;
+    if (message.length <= 0) return;
+    const hmsMessageRecipient = new _reactNativeHms.HMSMessageRecipient({
+      recipientType: 'publishSettings' in sendingTo ? _reactNativeHms.HMSMessageRecipientType.ROLES : 'peerID' in sendingTo ? _reactNativeHms.HMSMessageRecipientType.PEER : _reactNativeHms.HMSMessageRecipientType.BROADCAST,
+      recipientPeer: 'peerID' in sendingTo ? sendingTo : undefined,
+      recipientRoles: 'publishSettings' in sendingTo ? [sendingTo] : undefined
+    });
+
+    // Saving reference of `message` state to local variable
+    // to use the typed message after clearing state
+    const messageText = message;
+    dispatch({
+      type: 'SET_TYPED_MESSAGE',
+      typedMessage: ''
+    });
+    const handleMessageID = _ref6 => {
+      let {
+        messageId
+      } = _ref6;
+      const localPeer = reduxStore.getState().hmsStates.localPeer;
+      if (messageId) {
+        _reactNative.Keyboard.dismiss();
+        const localMessage = new _reactNativeHms.HMSMessage({
+          messageId: messageId,
+          message: messageText,
+          type: 'chat',
+          time: new Date(),
+          sender: localPeer || undefined,
+          recipient: hmsMessageRecipient
+        });
+        dispatch((0, _actions.addMessage)(localMessage));
+      }
+    };
+    try {
+      let result;
+      if ('publishSettings' in sendingTo) {
+        result = await hmsInstance.sendGroupMessage(messageText, [sendingTo]);
+      } else if ('peerID' in sendingTo) {
+        result = await hmsInstance.sendDirectMessage(messageText, sendingTo);
+      } else {
+        result = await hmsInstance.sendBroadcastMessage(messageText);
+      }
+      handleMessageID(result);
+      return Promise.resolve(result);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }, []);
+  return {
+    message,
+    setMessage,
+    sendMessage
+  };
+};
+exports.useSendMessage = useSendMessage;
+const useHMSChatLayoutConfig = (selector, equalityFn) => {
+  return useHMSLayoutConfig(layoutConfig => {
+    const chatConfig = (0, _hooksUtilSelectors.selectChatLayoutConfig)(layoutConfig);
+    return selector(chatConfig);
+  }, equalityFn);
+};
+exports.useHMSChatLayoutConfig = useHMSChatLayoutConfig;
+const useHMSConferencingScreenConfig = (selector, equalityFn) => {
+  return useHMSLayoutConfig(layoutConfig => {
+    const conferencingScreenConfig = (0, _hooksUtilSelectors.selectConferencingScreenConfig)(layoutConfig);
+    return selector(conferencingScreenConfig);
+  }, equalityFn);
+};
+exports.useHMSConferencingScreenConfig = useHMSConferencingScreenConfig;
 //# sourceMappingURL=hooks-util.js.map