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

package/src/hooks-util.ts

@@ -18,10 +18,13 @@ import {
   HMSTrackUpdate,
   HMSUpdateListenerActions,
   HMSMessageRecipient,
+  useHMSHLSPlayerResolution,
+  useHmsViewsResolutionsState,
   // useHMSPeerUpdates,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
 import type {
+  HMSPIPConfig,
   HMSRole,
   HMSSessionStore,
   HMSSessionStoreValue,
@@ -46,9 +49,15 @@ import {
 } from 'react';
 import type { DependencyList } from 'react';
 
-import { MaxTilesInOnePage, ModalTypes, PipModes } from './utils/types';
-import type { ChatBroadcastFilter, PeerTrackNode } from './utils/types';
-import { createPeerTrackNode, parseMetadata } from './utils/functions';
+import {
+  MaxTilesInOnePage,
+  ModalTypes,
+  OnLeaveReason,
+  PeerListRefreshInterval,
+  PipModes,
+} from './utils/types';
+import type { ChatBroadcastFilter, OnLeaveHandler, PeerTrackNode } from './utils/types';
+import { createPeerTrackNode } from './utils/functions';
 import {
   batch,
   shallowEqual,
@@ -56,11 +65,12 @@ import {
   useSelector,
   useStore,
 } from 'react-redux';
-import type { RootState } from './redux';
+import type { AppDispatch, RootState } from './redux';
 import {
   addMessage,
   addNotification,
   addParticipant,
+  addParticipants,
   addPinnedMessage,
   addScreenshareTile,
   addUpdateParticipant,
@@ -70,20 +80,26 @@ import {
   clearStore,
   removeNotification,
   removeParticipant,
+  removeParticipants,
   removeScreenshareTile,
+  replaceParticipantsList,
   saveUserData,
   setActiveChatBottomSheetTab,
   setActiveSpeakers,
+  setAutoEnterPipMode,
   setFullScreenPeerTrackNode,
   setHMSLocalPeerState,
   setHMSRoleState,
   setHMSRoomState,
+  setHandleBackButton,
   setIsLocalAudioMutedState,
   setIsLocalVideoMutedState,
   setLayoutConfig,
   setLocalPeerTrackNode,
   setMiniViewPeerTrackNode,
   setModalType,
+  setOnLeaveHandler,
+  setPrebuiltData,
   setReconnecting,
   setRoleChangeRequest,
   setStartingOrStoppingRecording,
@@ -103,11 +119,11 @@ import {
   replacePeerTrackNodesWithTrack,
 } from './peerTrackNodeUtils';
 import { MeetingState } from './types';
+import type { HMSPrebuiltProps } from './types';
 import {
-  AppState,
+  BackHandler,
   InteractionManager,
   Keyboard,
-  LayoutAnimation,
   Platform,
 } from 'react-native';
 import type { ImageStyle, StyleProp, ViewStyle, TextStyle } from 'react-native';
@@ -127,7 +143,7 @@ import {
 import type { GridViewRefAttrs } from './components/GridView';
 import { getRoomLayout } from './modules/HMSManager';
 import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
-import { NotificationTypes } from './utils';
+import { NotificationTypes } from './types';
 
 export const useHMSListeners = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
@@ -139,6 +155,8 @@ export const useHMSListeners = (
 
   useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 
+  useHMSPeerListUpdated(hmsInstance);
+
   useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 };
 
@@ -414,6 +432,7 @@ const useHMSPeersUpdate = (
       }
       if (
         type === HMSPeerUpdate.METADATA_CHANGED ||
+        type === HMSPeerUpdate.HAND_RAISED_CHANGED ||
         type === HMSPeerUpdate.NAME_CHANGED ||
         type === HMSPeerUpdate.NETWORK_QUALITY_UPDATED
       ) {
@@ -421,8 +440,8 @@ const useHMSPeersUpdate = (
 
         const reduxState = store.getState();
 
-        if (type === HMSPeerUpdate.METADATA_CHANGED) {
-          const handRaised = parseMetadata(peer.metadata).isHandRaised;
+        if (type === HMSPeerUpdate.HAND_RAISED_CHANGED) {
+          const handRaised = peer.isHandRaised;
 
           if (handRaised) {
             const { layoutConfig, localPeer } = reduxState.hmsStates;
@@ -506,6 +525,38 @@ const useHMSPeersUpdate = (
   }, [hmsInstance]);
 };
 
+type PeerListUpdate = {
+  addedPeers: HMSPeer[];
+  removedPeers: HMSPeer[];
+};
+
+const useHMSPeerListUpdated = (hmsInstance: HMSSDK) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const peerListUpdateHandler = ({
+      addedPeers,
+      removedPeers,
+    }: PeerListUpdate) => {
+      batch(() => {
+        dispatch(addParticipants(addedPeers));
+        dispatch(removeParticipants(removedPeers));
+      });
+    };
+
+    hmsInstance.addEventListener(
+      HMSUpdateListenerActions.ON_PEER_LIST_UPDATED,
+      peerListUpdateHandler
+    );
+
+    return () => {
+      hmsInstance.removeEventListener(
+        HMSUpdateListenerActions.ON_PEER_LIST_UPDATED
+      );
+    };
+  }, [hmsInstance]);
+};
+
 type TrackUpdate = {
   peer: HMSPeer;
   track: HMSTrack;
@@ -1203,12 +1254,21 @@ export const useHMSReconnection = () => {
 
     hmsInstance.addEventListener(HMSUpdateListenerActions.RECONNECTING, () => {
       if (mounted) {
-        dispatch(setReconnecting(true));
+        batch(() => {
+          dispatch(setReconnecting(true));
+          dispatch(addNotification({
+            id: NotificationTypes.RECONNECTING,
+            type: NotificationTypes.RECONNECTING
+          }))
+        });
       }
     });
     hmsInstance.addEventListener(HMSUpdateListenerActions.RECONNECTED, () => {
       if (mounted) {
-        dispatch(setReconnecting(false));
+        batch(() => {
+          dispatch(setReconnecting(false));
+          dispatch(removeNotification(NotificationTypes.RECONNECTING));
+        })
       }
     });
 
@@ -1222,11 +1282,11 @@ export const useHMSReconnection = () => {
 
 export const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
-  const { destroy } = useLeaveMethods(true);
+  const { destroy } = useLeaveMethods();
 
   useEffect(() => {
     const pipRoomLeaveHandler = () => {
-      destroy();
+      destroy(OnLeaveReason.PIP);
     };
 
     hmsInstance.addEventListener(
@@ -1242,11 +1302,17 @@ export const useHMSPIPRoomLeave = () => {
 
 export const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
-  const { destroy } = useLeaveMethods(true);
+  const { destroy } = useLeaveMethods();
 
   useEffect(() => {
-    const removedFromRoomHandler = () => {
-      destroy();
+    const removedFromRoomHandler = (data: {
+      requestedBy?: HMSPeer | null;
+      reason?: string;
+      roomEnded?: boolean;
+    }) => {
+      destroy(
+        data.roomEnded ? OnLeaveReason.ROOM_END : OnLeaveReason.PEER_KICKED
+      );
     };
 
     hmsInstance.addEventListener(
@@ -1270,20 +1336,27 @@ export const usePIPListener = () => {
   );
 
   useEffect(() => {
-    if (isPipModeActive) {
-      const appStateListener = () => {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-        dispatch(changePipModeStatus(PipModes.INACTIVE));
-      };
+    const pipModeChangedHandler = (data: {
+      isInPictureInPictureMode: boolean;
+    }) => {
+      dispatch(
+        changePipModeStatus(
+          data.isInPictureInPictureMode ? PipModes.ACTIVE : PipModes.INACTIVE
+        )
+      );
+    };
 
-      AppState.addEventListener('focus', appStateListener);
+    hmsInstance.addEventListener(
+      HMSPIPListenerActions.ON_PIP_MODE_CHANGED,
+      pipModeChangedHandler
+    );
 
-      return () => {
-        AppState.removeEventListener('focus', appStateListener);
-        dispatch(changePipModeStatus(PipModes.INACTIVE));
-      };
-    }
-  }, [isPipModeActive]);
+    return () => {
+      hmsInstance.removeEventListener(
+        HMSPIPListenerActions.ON_PIP_MODE_CHANGED
+      );
+    };
+  }, []);
 
   // Check if PIP is supported or not
   useEffect(() => {
@@ -1316,6 +1389,93 @@ export const useHMSNetworkQualityUpdate = () => {
   }, [hmsInstance]);
 };
 
+export type PIPConfig = Omit<HMSPIPConfig, 'autoEnterPipMode'>;
+
+export const useEnableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+
+  const enableAutoPip = useCallback(
+    (data?: PIPConfig) => {
+      hmsInstance.setPipParams({ ...data, autoEnterPipMode: true });
+    },
+    [hmsInstance]
+  );
+
+  return enableAutoPip;
+};
+
+export const useDisableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+
+  const disableAutoPip = useCallback(
+    (data?: PIPConfig) => {
+      hmsInstance.setPipParams({ ...data, autoEnterPipMode: false });
+    },
+    [hmsInstance]
+  );
+
+  return disableAutoPip;
+};
+
+export const useAutoPip = (oneToOneCall: boolean) => {
+  const enableAutoPip = useEnableAutoPip();
+  const disableAutoPip = useDisableAutoPip();
+
+  const autoEnterPipMode = useSelector(
+    (state: RootState) => state.app.autoEnterPipMode
+  );
+  const [numerator, denominator] = usePipAspectRatio(oneToOneCall);
+
+  useEffect(() => {
+    if (autoEnterPipMode) {
+      enableAutoPip({ aspectRatio: [numerator, denominator] });
+
+      return disableAutoPip;
+    }
+  }, [
+    numerator,
+    denominator,
+    autoEnterPipMode,
+    enableAutoPip,
+    disableAutoPip,
+  ]);
+};
+
+export const usePipAspectRatio = (oneToOneCall: boolean): [number, number] => {
+  const isHLSViewer = useIsHLSViewer();
+  const hlsPlayerResolution = useHMSHLSPlayerResolution();
+
+  const firstSSNodeId = useSelector((state: RootState) => {
+    const ssPeerTrackNode = state.app.screensharePeerTrackNodes[0];
+    return ssPeerTrackNode?.track?.trackId;
+  });
+
+  const ssResolution = useHmsViewsResolutionsState(firstSSNodeId);
+
+  const aspectRatio = useMemo((): [number, number] => {
+    // 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;
+}
+
 export const useHMSActiveSpeakerUpdates = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>,
   active?: boolean
@@ -1524,7 +1684,6 @@ export const useHMSConfig = () => {
       username: storeState.user.userName,
       captureNetworkQualityInPreview: true,
       endpoint: storeState.user.endPoints?.init,
-      // metadata: JSON.stringify({isHandRaised: true}), // To join with hand raised
     });
 
     return hmsConfig;
@@ -1634,30 +1793,68 @@ export const useLandscapeChatViewVisible = () => {
   return pipModeNotActive && isLandscapeOrientation && overlayChatVisible;
 };
 
-export type ParticipantHeaderData = {
+export type ParticipantAccordianData = {
+  id: string;
   label: string;
-  role: HMSRole;
-  itemsLength: number;
+  showViewAll: boolean;
+  data: (HMSPeer | HMSLocalPeer)[];
 };
 
-export type ParticipantHandRaisedHeaderData = {
-  label: string;
-  itemsLength: number;
-};
+export const useOffStageParticipants = () => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const offStageRoles = useHMSLayoutConfig(
+    (layoutConfig) =>
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+        ?.off_stage_roles || null
+  );
+
+  const [participantsTotalCounts, setParticipantsTotalCounts] = useState<
+    Record<string, number>
+  >({});
 
-export type ListItemUI<
-  T =
-    | ParticipantHeaderData
-    | HMSLocalPeer
-    | HMSPeer
-    | ParticipantHandRaisedHeaderData,
-> = {
-  type: 'EXPANDED_HEADER' | 'COLLAPSED_HEADER' | 'LAST_ITEM' | 'REGULAR_ITEM';
-  data: T;
-  key: string;
+  useEffect(() => {
+    if (offStageRoles) {
+      let mounted = true;
+
+      const createIterator = async (forRole: string) => {
+        const iterator = hmsInstance.getPeerListIterator({
+          byRoleName: forRole,
+          limit: 10,
+        });
+        const participants = await iterator.next();
+        if (mounted) {
+          dispatch(replaceParticipantsList(participants, forRole));
+          setParticipantsTotalCounts((prev) => ({
+            ...prev,
+            [forRole]: iterator.totalCount,
+          }));
+        }
+      };
+
+      const createIteratorForRoles = () => {
+        offStageRoles.forEach((role) => {
+          createIterator(role);
+        });
+      };
+
+      createIteratorForRoles();
+
+      const intervalId = setInterval(() => {
+        createIteratorForRoles();
+      }, PeerListRefreshInterval);
+
+      return () => {
+        mounted = false;
+        clearInterval(intervalId);
+      };
+    }
+  }, [offStageRoles]);
+
+  return participantsTotalCounts;
 };
 
-export const useFilteredParticipants = () => {
+export const useFilteredParticipants = (filterText: string) => {
   const roles = useSelector((state: RootState) => state.hmsStates.roles);
   const onStageRole = useHMSLayoutConfig(
     (layoutConfig) =>
@@ -1665,183 +1862,137 @@ export const useFilteredParticipants = () => {
         ?.on_stage_role || null
   );
 
-  const [searchText, setSearchText] = useState('');
-  const formattedSearchText = searchText.trim().toLowerCase();
-
-  const participants = useSelector(
-    (state: RootState) => state.hmsStates.participants
-  );
-
-  const peerGroups = useMemo(() => {
-    return groupParticipantsAsPerRole(participants, formattedSearchText);
-  }, [formattedSearchText, participants]);
+  const offStageParticipantsTotalCounts = useOffStageParticipants();
 
-  const sortedRoles = useMemo(() => {
-    return roles
-      .filter((role) => peerGroups.has(role.name!))
-      .sort((a, b) => {
-        if (onStageRole) {
-          if (a.name === onStageRole && b.name === onStageRole) {
-            return 0;
-          }
+  const formattedSearchText = filterText.trim().toLowerCase();
 
-          if (a.name === onStageRole) {
-            return -1;
-          }
+  const groupedParticipants = useSelector(
+    (state: RootState) => state.hmsStates.groupedParticipants
+  );
 
-          if (b.name === onStageRole) {
-            return 1;
+  const sortedRoles = useMemo(
+    () => {
+      return roles
+        .filter((role) => {
+          if (!role.name || role.name.startsWith('_')) {
+            return false;
           }
-        }
+          return true;
 
-        const canAPublish: boolean =
-          (a.publishSettings?.allowed &&
-            a.publishSettings.allowed.length > 0) ??
-          false;
-        const canBPublish: boolean =
-          (b.publishSettings?.allowed &&
-            b.publishSettings.allowed.length > 0) ??
-          false;
-
-        if (canAPublish && canBPublish) {
-          return 0;
-        }
+          // const list = groupedParticipants[role.name!];
 
-        if (canAPublish) {
-          return -1;
-        }
-
-        return 1;
-      });
-  }, [peerGroups, onStageRole, roles]);
+          // return list && list.length > 0;
+        })
+        .sort((a, b) => {
+          if (onStageRole) {
+            if (a.name === onStageRole && b.name === onStageRole) {
+              return 0;
+            }
 
-  const firstGroupName = peerGroups.has('hand-raised')
-    ? 'hand-raised'
-    : sortedRoles[0]?.name;
+            if (a.name === onStageRole) {
+              return -1;
+            }
 
-  const [expandedGroups, setExpandedGroups] = useState<string[]>(
-    firstGroupName ? [firstGroupName] : []
-  );
+            if (b.name === onStageRole) {
+              return 1;
+            }
+          }
 
-  const groupedList = useMemo(() => {
-    let list: ListItemUI[] = [];
+          const canAPublish: boolean =
+            (a.publishSettings?.allowed &&
+              a.publishSettings.allowed.length > 0) ??
+            false;
+          const canBPublish: boolean =
+            (b.publishSettings?.allowed &&
+              b.publishSettings.allowed.length > 0) ??
+            false;
 
-    const handRaisedPeers = peerGroups.get('hand-raised');
+          if (canAPublish && canBPublish) {
+            return 0;
+          }
 
-    if (handRaisedPeers) {
-      const expanded = expandedGroups.includes('hand-raised');
+          if (canAPublish) {
+            return -1;
+          }
 
-      list.push({
-        type: expanded ? 'EXPANDED_HEADER' : 'COLLAPSED_HEADER',
-        key: 'hand-raised',
-        data: {
-          label: `Hand Raised (${handRaisedPeers.length})`,
-          itemsLength: handRaisedPeers.length,
-        },
-      });
+          return 1;
+        });
+    },
+    // [groupedParticipants, onStageRole, roles]
+    [onStageRole, roles]
+  );
 
-      if (expanded) {
-        list = list.concat(
-          handRaisedPeers.map((peer, idx, arr) => {
-            const isLast = arr.length - 1 === idx;
+  const participantsAccordianData: ParticipantAccordianData[] = useMemo(() => {
+    const t = [];
 
-            return {
-              data: peer,
-              key: `${peer.peerID}--${'hand-raised'}`,
-              type: isLast ? 'LAST_ITEM' : 'REGULAR_ITEM',
-            };
-          })
-        );
-      }
-    }
+    const filteredHandRaisedPeers: (HMSPeer | HMSLocalPeer)[][] = [];
 
     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);
 
-  return {
-    data: groupedList,
-    searchText,
-    formattedSearchText,
-    setSearchText,
-    expandedGroups,
-    setExpandedGroups,
-  };
-};
+    const firstTenHandRaisedParticipants = handRaisedParticipants.slice(0, 10);
 
-const groupParticipantsAsPerRole = (
-  participants: (HMSLocalPeer | HMSPeer)[],
-  searchText: string
-) => {
-  const groups: Map<string, (HMSLocalPeer | HMSPeer)[]> = new Map();
-
-  for (const participant of participants) {
-    const participantRole = participant.role;
-
-    if (!participantRole) {
-      continue;
+    if (handRaisedParticipants.length > 0) {
+      t.unshift({
+        id: 'hand-raised',
+        label: `Hand Raised (${handRaisedParticipants.length})`,
+        showViewAll: handRaisedParticipants.length > 10,
+        data: firstTenHandRaisedParticipants,
+      });
     }
 
-    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 (parseMetadata(participant.metadata).isHandRaised) {
-        if (!groups.has('hand-raised')) {
-          groups.set('hand-raised', []);
-        }
-
-        const group = groups.get('hand-raised');
+    return t;
+  }, [
+    formattedSearchText,
+    groupedParticipants,
+    offStageParticipantsTotalCounts,
+    sortedRoles,
+  ]);
 
-        if (group) group.push(participant);
-      }
-    }
-  }
+  const [expandedGroup, setExpandedGroup] = useState<string | null>(
+    participantsAccordianData[0]?.id ?? null
+  );
 
-  return groups;
+  return {
+    data: participantsAccordianData,
+    formattedSearchText,
+    expandedGroup,
+    setExpandedGroup,
+  };
 };
 
 export const useShouldGoLive = () => {
@@ -1850,13 +2001,13 @@ export const useShouldGoLive = () => {
   return shouldGoLive;
 };
 
-export const useLeaveMethods = (isUnmounted: boolean) => {
+export const useLeaveMethods = () => {
   const navigation = useContext(NavigationContext);
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const reduxStore = useStore<RootState>();
 
-  const destroy = useCallback(() => {
+  const destroy = useCallback((reason: Parameters<OnLeaveHandler>[0]) => {
     try {
       const s = hmsInstance.destroy();
       console.log('Destroy Success: ', s);
@@ -1883,9 +2034,13 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
       const onLeave = reduxStore.getState().user.onLeave;
 
       if (typeof onLeave === 'function') {
-        onLeave();
+        onLeave(reason);
         dispatch(clearStore());
-      } else if (navigation && navigation.canGoBack() && !isUnmounted) {
+      } else if (
+        navigation &&
+        typeof navigation.canGoBack === 'function' &&
+        navigation.canGoBack()
+      ) {
         navigation.goBack();
         dispatch(clearStore());
       } else {
@@ -1905,7 +2060,7 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
   }, [hmsInstance]);
 
   const leave = useCallback(
-    async (shouldEndStream: boolean = false) => {
+    async (reason: OnLeaveReason, shouldEndStream: boolean = false) => {
       if (shouldEndStream) {
         hmsInstance.stopHLSStreaming().catch((error) => {
           console.log('Stop HLS Streaming Error: ', error);
@@ -1914,7 +2069,7 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
       try {
         const d = await hmsInstance.leave();
         console.log('Leave Success: ', d);
-        await destroy();
+        await destroy(reason);
       } catch (e) {
         console.log(`Leave Room Error: ${e}`);
         Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
@@ -1923,31 +2078,31 @@ export const useLeaveMethods = (isUnmounted: boolean) => {
     [destroy, hmsInstance]
   );
 
-  const goToPreview = useCallback(async () => {
+  const prebuiltCleanUp = useCallback(async () => {
     try {
       await hmsInstance.leave();
       await hmsInstance.destroy();
       dispatch(clearStore());
     } catch (error) {
       Toast.showWithGravity(
-        `Unable to go to Preview: ${error}`,
+        `Unable to leave or destroy: ${error}`,
         Toast.LONG,
         Toast.TOP
       );
     }
   }, [hmsInstance]);
 
-  const endRoom = useCallback(async () => {
+  const endRoom = useCallback(async (reason: OnLeaveReason) => {
     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);
     }
   }, [destroy, hmsInstance]);
 
-  return { destroy, leave, endRoom, goToPreview };
+  return { destroy, leave, endRoom, prebuiltCleanUp };
 };
 
 // Returns layout config as it is returned from server
@@ -2153,3 +2308,101 @@ export const useHMSConferencingScreenConfig = <Selected = unknown>(
     return selector(conferencingScreenConfig);
   }, equalityFn);
 };
+
+export const useBackButtonPress = () => {
+  const { handleModalVisibleType } = useModalType();
+
+  const handleBackPress = useSelector(
+    (state: RootState) => state.app.handleBackButton
+  );
+
+  useEffect(() => {
+    if (handleBackPress) {
+      const backPressHandler = () => {
+        handleModalVisibleType(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 = BackHandler.addEventListener(
+        'hardwareBackPress',
+        backPressHandler
+      );
+
+      return () => {
+        if (typeof subscription.remove === 'function') {
+          subscription.remove();
+        } else {
+          BackHandler.removeEventListener(
+            'hardwareBackPress',
+            backPressHandler
+          );
+        }
+      };
+    }
+  }, [handleBackPress, handleModalVisibleType]);
+};
+
+export const useSavePropsToStore = (
+  props: HMSPrebuiltProps,
+  dispatch: AppDispatch
+) => {
+  const { roomCode, options, onLeave, handleBackButton, autoEnterPipMode } =
+    props;
+
+  useEffect(() => {
+    dispatch(setPrebuiltData({ roomCode, options }));
+  }, [roomCode, options]);
+
+  useEffect(() => {
+    dispatch(setOnLeaveHandler(onLeave));
+  }, [onLeave]);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      dispatch(setHandleBackButton(handleBackButton));
+    }
+  }, [handleBackButton]);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      dispatch(setAutoEnterPipMode(autoEnterPipMode));
+    }
+  }, [autoEnterPipMode]);
+};
+
+export const useStartRecording = () => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+
+  const startRecording = useCallback(() => {
+    dispatch(setStartingOrStoppingRecording(true));
+
+    hmsInstance.startRTMPOrRecording({ record: true }).catch((error) => {
+      batch(() => {
+        dispatch(setStartingOrStoppingRecording(false));
+        dispatch(
+          addNotification({
+            id: Math.random().toString(16).slice(2),
+            type: NotificationTypes.ERROR,
+            message: error.message
+          })
+        );
+      });
+    });
+  }, [hmsInstance]);
+
+  return {
+    startRecording,
+  };
+};