@100mslive/react-native-room-kit 1.0.0 → 1.0.2-beta.0

package/lib/commonjs/hooks-util.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useShowLandscapeLayout = exports.useShowChatAndParticipants = exports.useShouldGoLive = exports.useSendMessage = 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.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;
+exports.useStartRecording = exports.useShowLandscapeLayout = exports.useShowChatAndParticipants = exports.useShouldGoLive = exports.useSendMessage = exports.useSavePropsToStore = exports.usePortraitChatViewVisible = exports.usePipAspectRatio = 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.useEnableAutoPip = exports.useDisableAutoPip = exports.useBackButtonPress = exports.useAutoPip = 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");
@@ -19,13 +19,13 @@ var _dimension = require("./utils/dimension");
 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;
@@ -222,11 +222,11 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
         }
         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.METADATA_CHANGED) {
-          const handRaised = (0, _functions.parseMetadata)(peer.metadata).isHandRaised;
+        if (type === _reactNativeHms.HMSPeerUpdate.HAND_RAISED_CHANGED) {
+          const handRaised = peer.isHandRaised;
           if (handRaised) {
             var _selectedLayoutConfig, _peer$role11, _reduxState$hmsStates;
             const {
@@ -243,14 +243,14 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
             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,
+                id: `${peer.peerID}-${_types2.NotificationTypes.HAND_RAISE}`,
+                type: _types2.NotificationTypes.HAND_RAISE,
                 peer
               }));
             }
           } else {
             const notifications = reduxState.app.notifications;
-            const notificationToRemove = notifications.find(notification => notification.id === `${peer.peerID}-${_utils.NotificationTypes.HAND_RAISE}`);
+            const notificationToRemove = notifications.find(notification => notification.id === `${peer.peerID}-${_types2.NotificationTypes.HAND_RAISE}`);
             if (notificationToRemove) {
               dispatch((0, _actions.removeNotification)(notificationToRemove.id));
             }
@@ -289,6 +289,25 @@ 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;
@@ -298,13 +317,13 @@ 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;
@@ -759,10 +778,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
@@ -788,12 +807,12 @@ const useHMSMessages = () => {
   });
   (0, _react.useEffect)(() => {
     const onMessageListener = message => {
-      if (message.type === _utils.NotificationTypes.ROLE_CHANGE_DECLINED) {
+      if (message.type === _types2.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,
+            id: `${(_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.peerID}-${_types2.NotificationTypes.ROLE_CHANGE_DECLINED}`,
+            type: _types2.NotificationTypes.ROLE_CHANGE_DECLINED,
             peer: message.sender
           }));
         }
@@ -818,12 +837,21 @@ const useHMSReconnection = () => {
     let mounted = true;
     hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.RECONNECTING, () => {
       if (mounted) {
-        dispatch((0, _actions.setReconnecting)(true));
+        (0, _reactRedux.batch)(() => {
+          dispatch((0, _actions.setReconnecting)(true));
+          dispatch((0, _actions.addNotification)({
+            id: _types2.NotificationTypes.RECONNECTING,
+            type: _types2.NotificationTypes.RECONNECTING
+          }));
+        });
       }
     });
     hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.RECONNECTED, () => {
       if (mounted) {
-        dispatch((0, _actions.setReconnecting)(false));
+        (0, _reactRedux.batch)(() => {
+          dispatch((0, _actions.setReconnecting)(false));
+          dispatch((0, _actions.removeNotification)(_types2.NotificationTypes.RECONNECTING));
+        });
       }
     });
     return () => {
@@ -838,10 +866,10 @@ const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
   const {
     destroy
-  } = useLeaveMethods(true);
+  } = useLeaveMethods();
   (0, _react.useEffect)(() => {
     const pipRoomLeaveHandler = () => {
-      destroy();
+      destroy(_types.OnLeaveReason.PIP);
     };
     hmsInstance.addEventListener(_reactNativeHms.HMSPIPListenerActions.ON_PIP_ROOM_LEAVE, pipRoomLeaveHandler);
     return () => {
@@ -854,10 +882,10 @@ const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
   const {
     destroy
-  } = useLeaveMethods(true);
+  } = useLeaveMethods();
   (0, _react.useEffect)(() => {
-    const removedFromRoomHandler = () => {
-      destroy();
+    const removedFromRoomHandler = data => {
+      destroy(data.roomEnded ? _types.OnLeaveReason.ROOM_END : _types.OnLeaveReason.PEER_KICKED);
     };
     hmsInstance.addEventListener(_reactNativeHms.HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM, removedFromRoomHandler);
     return () => {
@@ -871,18 +899,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)(() => {
@@ -911,6 +935,75 @@ const useHMSNetworkQualityUpdate = () => {
   }, [hmsInstance]);
 };
 exports.useHMSNetworkQualityUpdate = useHMSNetworkQualityUpdate;
+const useEnableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+  const enableAutoPip = (0, _react.useCallback)(data => {
+    hmsInstance.setPipParams({
+      ...data,
+      autoEnterPipMode: true
+    });
+  }, [hmsInstance]);
+  return enableAutoPip;
+};
+exports.useEnableAutoPip = useEnableAutoPip;
+const useDisableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+  const disableAutoPip = (0, _react.useCallback)(data => {
+    hmsInstance.setPipParams({
+      ...data,
+      autoEnterPipMode: false
+    });
+  }, [hmsInstance]);
+  return disableAutoPip;
+};
+exports.useDisableAutoPip = useDisableAutoPip;
+const useAutoPip = oneToOneCall => {
+  const enableAutoPip = useEnableAutoPip();
+  const disableAutoPip = useDisableAutoPip();
+  const autoEnterPipMode = (0, _reactRedux.useSelector)(state => state.app.autoEnterPipMode);
+  const [numerator, denominator] = usePipAspectRatio(oneToOneCall);
+  (0, _react.useEffect)(() => {
+    if (autoEnterPipMode) {
+      enableAutoPip({
+        aspectRatio: [numerator, denominator]
+      });
+      return disableAutoPip;
+    }
+  }, [numerator, denominator, autoEnterPipMode, enableAutoPip, disableAutoPip]);
+};
+exports.useAutoPip = useAutoPip;
+const usePipAspectRatio = oneToOneCall => {
+  const isHLSViewer = useIsHLSViewer();
+  const hlsPlayerResolution = (0, _reactNativeHms.useHMSHLSPlayerResolution)();
+  const firstSSNodeId = (0, _reactRedux.useSelector)(state => {
+    var _ssPeerTrackNode$trac;
+    const ssPeerTrackNode = state.app.screensharePeerTrackNodes[0];
+    return ssPeerTrackNode === null || ssPeerTrackNode === void 0 || (_ssPeerTrackNode$trac = ssPeerTrackNode.track) === null || _ssPeerTrackNode$trac === void 0 ? void 0 : _ssPeerTrackNode$trac.trackId;
+  });
+  const ssResolution = (0, _reactNativeHms.useHmsViewsResolutionsState)(firstSSNodeId);
+  const aspectRatio = (0, _react.useMemo)(() => {
+    // When user is hlsviewer and we have stream resolution
+    if (isHLSViewer && hlsPlayerResolution) {
+      return [hlsPlayerResolution.width, hlsPlayerResolution.height];
+    }
+    // When user is hlsviewer and we don't have stream resolution
+    if (isHLSViewer) {
+      return [9, 16];
+    }
+    // When we have screenshare resolution, use it
+    if (ssResolution) {
+      return [ssResolution.width, ssResolution.height];
+    }
+    // When there is no screenshare and one-to-one call is happening
+    if (!firstSSNodeId && oneToOneCall) {
+      return [9, 16];
+    }
+    // default aspect ratio
+    return [16, 9];
+  }, [isHLSViewer, firstSSNodeId, oneToOneCall, ssResolution, hlsPlayerResolution]);
+  return aspectRatio;
+};
+exports.usePipAspectRatio = usePipAspectRatio;
 const useHMSActiveSpeakerUpdates = (setPeerTrackNodes, active) => {
   const hmsInstance = useHMSInstance();
   const dispatch = (0, _reactRedux.useDispatch)();
@@ -1064,17 +1157,15 @@ const useHMSConfig = () => {
       username: storeState.user.userName,
       captureNetworkQualityInPreview: true,
       endpoint: (_storeState$user$endP3 = storeState.user.endPoints) === null || _storeState$user$endP3 === void 0 ? void 0 : _storeState$user$endP3.init
-      // metadata: JSON.stringify({isHandRaised: true}), // To join with hand raised
     });
-
     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;
     });
@@ -1170,21 +1261,70 @@ const useLandscapeChatViewVisible = () => {
   return pipModeNotActive && isLandscapeOrientation && overlayChatVisible;
 };
 exports.useLandscapeChatViewVisible = useLandscapeChatViewVisible;
-const useFilteredParticipants = () => {
-  var _sortedRoles$;
+const useOffStageParticipants = () => {
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const hmsInstance = useHMSInstance();
+  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);
+      };
+    }
+  }, [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$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.on_stage_role) || null;
+    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 [searchText, setSearchText] = (0, _react.useState)('');
-  const formattedSearchText = searchText.trim().toLowerCase();
-  const participants = (0, _reactRedux.useSelector)(state => state.hmsStates.participants);
-  const peerGroups = (0, _react.useMemo)(() => {
-    return groupParticipantsAsPerRole(participants, formattedSearchText);
-  }, [formattedSearchText, participants]);
+  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 => peerGroups.has(role.name)).sort((a, b) => {
+    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) {
@@ -1207,108 +1347,59 @@ const useFilteredParticipants = () => {
       }
       return 1;
     });
-  }, [peerGroups, onStageRole, roles]);
-  const firstGroupName = peerGroups.has('hand-raised') ? 'hand-raised' : (_sortedRoles$ = sortedRoles[0]) === null || _sortedRoles$ === void 0 ? void 0 : _sortedRoles$.name;
-  const [expandedGroups, setExpandedGroups] = (0, _react.useState)(firstGroupName ? [firstGroupName] : []);
-  const groupedList = (0, _react.useMemo)(() => {
-    let list = [];
-    const handRaisedPeers = peerGroups.get('hand-raised');
-    if (handRaisedPeers) {
-      const expanded = expandedGroups.includes('hand-raised');
-      list.push({
-        type: expanded ? 'EXPANDED_HEADER' : 'COLLAPSED_HEADER',
-        key: 'hand-raised',
-        data: {
-          label: `Hand Raised (${handRaisedPeers.length})`,
-          itemsLength: handRaisedPeers.length
-        }
-      });
-      if (expanded) {
-        list = list.concat(handRaisedPeers.map((peer, idx, arr) => {
-          const isLast = arr.length - 1 === idx;
-          return {
-            data: peer,
-            key: `${peer.peerID}--${'hand-raised'}`,
-            type: isLast ? 'LAST_ITEM' : 'REGULAR_ITEM'
-          };
-        }));
-      }
-    }
+  },
+  // [groupedParticipants, onStageRole, roles]
+  [onStageRole, roles]);
+  const participantsAccordianData = (0, _react.useMemo)(() => {
+    const t = [];
+    const filteredHandRaisedPeers = [];
     sortedRoles.forEach(role => {
-      const peers = peerGroups.get(role.name);
-      if (peers) {
-        const expanded = expandedGroups.includes(role.name);
-        list.push({
-          type: expanded ? 'EXPANDED_HEADER' : 'COLLAPSED_HEADER',
-          key: role.name,
-          data: {
-            label: `${role.name} (${peers.length})`,
-            role: role,
-            itemsLength: peers.length
-          }
+      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
         });
-        if (expanded) {
-          list = list.concat(peers.map((peer, idx, arr) => {
-            const isLast = arr.length - 1 === idx;
-            return {
-              data: peer,
-              key: `${peer.peerID}--${role.name}`,
-              type: isLast ? 'LAST_ITEM' : 'REGULAR_ITEM'
-            };
-          }));
-        }
       }
     });
-    return list;
-  }, [expandedGroups, peerGroups, sortedRoles]);
+    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 {
-    data: groupedList,
-    searchText,
+    data: participantsAccordianData,
     formattedSearchText,
-    setSearchText,
-    expandedGroups,
-    setExpandedGroups
+    expandedGroup,
+    setExpandedGroup
   };
 };
 exports.useFilteredParticipants = useFilteredParticipants;
-const groupParticipantsAsPerRole = (participants, searchText) => {
-  const groups = new Map();
-  for (const participant of participants) {
-    const participantRole = participant.role;
-    if (!participantRole) {
-      continue;
-    }
-    if (searchText.length <= 0 || participant.name.toLowerCase().includes(searchText)) {
-      if (!groups.has(participantRole.name)) {
-        groups.set(participantRole.name, []);
-      }
-      const group = groups.get(participantRole.name);
-      if (!group) {
-        continue;
-      }
-      group.push(participant);
-      if ((0, _functions.parseMetadata)(participant.metadata).isHandRaised) {
-        if (!groups.has('hand-raised')) {
-          groups.set('hand-raised', []);
-        }
-        const group = groups.get('hand-raised');
-        if (group) group.push(participant);
-      }
-    }
-  }
-  return groups;
-};
 const useShouldGoLive = () => {
   const shouldGoLive = (0, _reactRedux.useSelector)(_hooksUtilSelectors.selectShouldGoLive);
   return shouldGoLive;
 };
 exports.useShouldGoLive = useShouldGoLive;
-const useLeaveMethods = isUnmounted => {
+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)(() => {
+  const destroy = (0, _react.useCallback)(reason => {
     try {
       const s = hmsInstance.destroy();
       console.log('Destroy Success: ', s);
@@ -1334,9 +1425,9 @@ const useLeaveMethods = isUnmounted => {
 
       const onLeave = reduxStore.getState().user.onLeave;
       if (typeof onLeave === 'function') {
-        onLeave();
+        onLeave(reason);
         dispatch((0, _actions.clearStore)());
-      } else if (navigation && navigation.canGoBack() && !isUnmounted) {
+      } else if (navigation && typeof navigation.canGoBack === 'function' && navigation.canGoBack()) {
         navigation.goBack();
         dispatch((0, _actions.clearStore)());
       } else {
@@ -1350,8 +1441,8 @@ const useLeaveMethods = isUnmounted => {
       return Promise.reject(e);
     }
   }, [hmsInstance]);
-  const leave = (0, _react.useCallback)(async function () {
-    let shouldEndStream = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const leave = (0, _react.useCallback)(async function (reason) {
+    let shouldEndStream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (shouldEndStream) {
       hmsInstance.stopHLSStreaming().catch(error => {
         console.log('Stop HLS Streaming Error: ', error);
@@ -1360,26 +1451,26 @@ const useLeaveMethods = isUnmounted => {
     try {
       const d = await hmsInstance.leave();
       console.log('Leave Success: ', d);
-      await destroy();
+      await destroy(reason);
     } catch (e) {
       console.log(`Leave Room Error: ${e}`);
       _reactNativeSimpleToast.default.showWithGravity(`Leave Room Error: ${e}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
     }
   }, [destroy, hmsInstance]);
-  const goToPreview = (0, _react.useCallback)(async () => {
+  const prebuiltCleanUp = (0, _react.useCallback)(async () => {
     try {
       await hmsInstance.leave();
       await hmsInstance.destroy();
       dispatch((0, _actions.clearStore)());
     } catch (error) {
-      _reactNativeSimpleToast.default.showWithGravity(`Unable to go to Preview: ${error}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
+      _reactNativeSimpleToast.default.showWithGravity(`Unable to leave or destroy: ${error}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
     }
   }, [hmsInstance]);
-  const endRoom = (0, _react.useCallback)(async () => {
+  const endRoom = (0, _react.useCallback)(async reason => {
     try {
       const d = await hmsInstance.endRoom('Host ended the room');
       console.log('EndRoom Success: ', d);
-      await destroy();
+      await destroy(reason);
     } catch (e) {
       console.log('EndRoom Error: ', e);
     }
@@ -1388,7 +1479,7 @@ const useLeaveMethods = isUnmounted => {
     destroy,
     leave,
     endRoom,
-    goToPreview
+    prebuiltCleanUp
   };
 };
 
@@ -1482,10 +1573,10 @@ const useSendMessage = () => {
       type: 'SET_TYPED_MESSAGE',
       typedMessage: ''
     });
-    const handleMessageID = _ref5 => {
+    const handleMessageID = _ref6 => {
       let {
         messageId
-      } = _ref5;
+      } = _ref6;
       const localPeer = reduxStore.getState().hmsStates.localPeer;
       if (messageId) {
         _reactNative.Keyboard.dismiss();
@@ -1536,4 +1627,91 @@ const useHMSConferencingScreenConfig = (selector, equalityFn) => {
   }, equalityFn);
 };
 exports.useHMSConferencingScreenConfig = useHMSConferencingScreenConfig;
+const useBackButtonPress = () => {
+  const {
+    handleModalVisibleType
+  } = useModalType();
+  const handleBackPress = (0, _reactRedux.useSelector)(state => state.app.handleBackButton);
+  (0, _react.useEffect)(() => {
+    if (handleBackPress) {
+      const backPressHandler = () => {
+        handleModalVisibleType(_types.ModalTypes.LEAVE_ROOM);
+
+        /**
+         * When true is returned the event will not be bubbled up
+         * & no other back action will execute
+         */
+        return true;
+
+        /**
+         * Returning false will let the event to bubble up & let other event listeners
+         * or the system's default back action to be executed.
+         */
+        // return false;
+      };
+
+      const subscription = _reactNative.BackHandler.addEventListener('hardwareBackPress', backPressHandler);
+      return () => {
+        if (typeof subscription.remove === 'function') {
+          subscription.remove();
+        } else {
+          _reactNative.BackHandler.removeEventListener('hardwareBackPress', backPressHandler);
+        }
+      };
+    }
+  }, [handleBackPress, handleModalVisibleType]);
+};
+exports.useBackButtonPress = useBackButtonPress;
+const useSavePropsToStore = (props, dispatch) => {
+  const {
+    roomCode,
+    options,
+    onLeave,
+    handleBackButton,
+    autoEnterPipMode
+  } = props;
+  (0, _react.useEffect)(() => {
+    dispatch((0, _actions.setPrebuiltData)({
+      roomCode,
+      options
+    }));
+  }, [roomCode, options]);
+  (0, _react.useEffect)(() => {
+    dispatch((0, _actions.setOnLeaveHandler)(onLeave));
+  }, [onLeave]);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS === 'android') {
+      dispatch((0, _actions.setHandleBackButton)(handleBackButton));
+    }
+  }, [handleBackButton]);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS === 'android') {
+      dispatch((0, _actions.setAutoEnterPipMode)(autoEnterPipMode));
+    }
+  }, [autoEnterPipMode]);
+};
+exports.useSavePropsToStore = useSavePropsToStore;
+const useStartRecording = () => {
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const hmsInstance = useHMSInstance();
+  const startRecording = (0, _react.useCallback)(() => {
+    dispatch((0, _actions.setStartingOrStoppingRecording)(true));
+    hmsInstance.startRTMPOrRecording({
+      record: true
+    }).catch(error => {
+      (0, _reactRedux.batch)(() => {
+        dispatch((0, _actions.setStartingOrStoppingRecording)(false));
+        dispatch((0, _actions.addNotification)({
+          id: Math.random().toString(16).slice(2),
+          type: _types2.NotificationTypes.ERROR,
+          message: error.message
+        }));
+      });
+    });
+  }, [hmsInstance]);
+  return {
+    startRecording
+  };
+};
+exports.useStartRecording = useStartRecording;
 //# sourceMappingURL=hooks-util.js.map