QA Handover PR

apps/100ms-custom-app/src/App.jsx

@@ -1,4 +1,10 @@
-import React, { Suspense, useEffect, useRef, useState } from 'react';
+import React, {
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Flex, HMSPrebuilt } from '@100mslive/roomkit-react';
 import { useOverridePrebuiltLayout } from './hooks/useOverridePrebuiltLayout';
 import { useSearchParam } from './hooks/useSearchParam';
@@ -22,6 +28,13 @@ const App = () => {
   const { roomId, role } = getRoomIdRoleFromUrl();
   const { overrideLayout, isHeadless } = useOverridePrebuiltLayout();
   const hmsPrebuiltRef = useRef();
+  const confirmLeave = useCallback(e => {
+    e.returnValue = 'Are you sure you want to leave?';
+  }, []);
+  const removeExitListener = useCallback(
+    () => window.removeEventListener('beforeunload', confirmLeave),
+    []
+  );
 
   useEffect(() => {
     if (roomCode) {
@@ -54,19 +67,6 @@ const App = () => {
     }
   }, [authToken, role, roomCode, roomId, subdomain]);
 
-  // Prompt for page refresh/tab close
-  useEffect(() => {
-    const confirmLeave = e => {
-      e.returnValue = 'Are you sure you want to leave?';
-    };
-
-    window.addEventListener('beforeunload', confirmLeave);
-
-    return () => {
-      window.removeEventListener('beforeunload', confirmLeave);
-    };
-  }, []);
-
   return (
     <Flex
       className="prebuilt-wrapper"
@@ -88,6 +88,11 @@ const App = () => {
           authToken={authToken}
           roomId={roomId}
           role={role}
+          onLeave={removeExitListener}
+          onJoin={() => {
+            if (!isHeadless)
+              window.addEventListener('beforeunload', confirmLeave);
+          }}
           screens={overrideLayout ? overrideLayout : undefined}
           options={{
             userName: isHeadless ? 'Beam' : undefined,

packages/roomkit-react/src/Prebuilt/App.tsx

@@ -69,6 +69,7 @@ export type HMSPrebuiltProps = {
   roomId?: string;
   role?: string;
   onLeave?: () => void;
+  onJoin?: () => void;
 };
 
 export type HMSPrebuiltRefType = {
@@ -91,6 +92,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       options: { userName = '', userId = '', endpoints } = {},
       screens,
       onLeave,
+      onJoin,
     },
     ref,
   ) => {
@@ -173,6 +175,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             roomId,
             role,
             onLeave,
+            onJoin,
             userName,
             userId,
             endpoints: {

packages/roomkit-react/src/Prebuilt/AppContext.tsx

@@ -8,6 +8,7 @@ type HMSPrebuiltContextType = {
   userId?: string;
   endpoints?: Record<string, string>;
   onLeave?: () => void;
+  onJoin?: () => void;
 };
 
 export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
@@ -16,6 +17,7 @@ export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
   userId: '',
   endpoints: {},
   onLeave: undefined,
+  onJoin: undefined,
 });
 
 HMSPrebuiltContext.displayName = 'HMSPrebuiltContext';

packages/roomkit-react/src/Prebuilt/components/conference.jsx

@@ -29,7 +29,7 @@ import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 const Conference = () => {
   const navigate = useNavigate();
   const { roomId, role } = useParams();
-  const { userName, endpoints } = useHMSPrebuiltContext();
+  const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
@@ -109,6 +109,7 @@ const Conference = () => {
   }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 
   useEffect(() => {
+    onJoinFunc?.();
     return () => {
       PictureInPicture.stop().catch(error => console.error('stopping pip', error));
     };