Add "beforeunload" event handler

sample-apps/react/react-dogfood/components/MeetingUI.tsx

@@ -33,7 +33,11 @@ import {
   UnreadCountBadge,
 } from '.';
 import { ActiveCallHeader } from './ActiveCallHeader';
-import { useKeyboardShortcuts, useWatchChannel } from '../hooks';
+import {
+  useBeforeUnload,
+  useKeyboardShortcuts,
+  useWatchChannel,
+} from '../hooks';
 import { DEFAULT_LAYOUT, getLayoutSettings, LayoutMap } from './LayoutSelector';
 import { Stage } from './Stage';
 import { ToggleParticipantListButton } from './ToggleParticipantListButton';
@@ -107,6 +111,11 @@ export const MeetingUI = ({ chatClient, enablePreview }: MeetingUIProps) => {
     }
   }, [router]);
 
+  useBeforeUnload(
+    callState === CallingState.JOINED,
+    'Call in progress, are you sure you want to leave?',
+  );
+
   useEffect(() => {
     if (callState === CallingState.LEFT) {
       void onLeave();

sample-apps/react/react-dogfood/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useChatClient';
 export * from './useWatchChannel';
 export * from './useKeyboardShortcuts';
+export * from './useBeforeUnload';

sample-apps/react/react-dogfood/hooks/useBeforeUnload.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+export const useBeforeUnload = (enabled: boolean, message: string) => {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleBeforeUnload = (e: Event) => {
+      e.preventDefault(); // <- this does not work even though it's preffered way
+
+      // window.confirm does not work to display custom message
+      // @ts-expect-error
+      return (e.returnValue = message);
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [enabled, message]);
+};