Merge pull request #454 from Monadical-SAS/reload-page-on-leave

Reload page on leave

www/app/[roomName]/useRoomMeeting.tsx

@@ -26,7 +26,7 @@ type SuccessMeeting = {
 };
 
 const useRoomMeeting = (
-  roomName: string | null | undefined,
+  roomName: string | null | undefined
 ): ErrorMeeting | LoadingMeeting | SuccessMeeting => {
   const [response, setResponse] = useState<Meeting | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
@@ -53,7 +53,10 @@ const useRoomMeeting = (
       .catch((error) => {
         const shouldShowHuman = shouldShowError(error);
         if (shouldShowHuman) {
-          setError(error, "There was an error loading the meeting");
+          setError(
+            error,
+            "There was an error loading the meeting. Please try again by refreshing the page."
+          );
         } else {
           setError(error);
         }

www/app/lib/WherebyEmbed.tsx

@@ -1,13 +1,14 @@
 "use client";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import "@whereby.com/browser-sdk/embed";
 import { Box, Button, HStack, useToast, Text } from "@chakra-ui/react";
 
 interface WherebyEmbedProps {
   roomUrl: string;
+  onLeave?: () => void;
 }
 
-export default function WherebyEmbed({ roomUrl }: WherebyEmbedProps) {
+export default function WherebyEmbed({ roomUrl, onLeave }: WherebyEmbedProps) {
   const wherebyRef = useRef<HTMLElement>(null);
 
   const toast = useToast();
@@ -53,6 +54,20 @@ export default function WherebyEmbed({ roomUrl }: WherebyEmbedProps) {
     }
   }, [roomUrl, toast]);
 
+  const handleLeave = () => {
+    if (onLeave) {
+      onLeave();
+    }
+  };
+
+  useEffect(() => {
+    wherebyRef.current?.addEventListener("leave", handleLeave);
+
+    return () => {
+      wherebyRef.current?.removeEventListener("leave", handleLeave);
+    };
+  }, [handleLeave]);
+
   return (
     <whereby-embed
       ref={wherebyRef}

www/app/webinars/[title]/page.tsx

@@ -11,9 +11,8 @@ const WherebyEmbed = dynamic(() => import("../../lib/WherebyEmbed"), {
 import { FormEvent } from "react";
 import { Input, FormControl } from "@chakra-ui/react";
 import { VStack } from "@chakra-ui/react";
-import { Alert, AlertIcon } from "@chakra-ui/react";
+import { Alert } from "@chakra-ui/react";
 import { Text } from "@chakra-ui/react";
-import { Button } from "@chakra-ui/react";
 
 type FormData = {
   name: string;
@@ -58,8 +57,8 @@ const WEBINARS: Webinar[] = [
   },
   {
     title: "ai-operational-assistant-dry-run",
-    startsAt: "2025-02-05T00:50:00Z",
-    endsAt: "2025-02-05T00:55:00Z",
+    startsAt: "2025-02-05T01:55:00Z",
+    endsAt: "2025-02-05T01:58:00Z",
   },
 ];
 
@@ -142,10 +141,18 @@ export default function WebinarPage(details: WebinarDetails) {
     }
   };
 
-  if (status === WebinarStatus.Live) {
-    return <>{roomUrl && <WherebyEmbed roomUrl={roomUrl} />}</>;
-  }
+  const handleLeave = () => {
+    const now = new Date();
+    if (now > endDate) {
+      window.location.reload();
+    }
+  };
 
+  if (status === WebinarStatus.Live) {
+    return (
+      <>{roomUrl && <WherebyEmbed roomUrl={roomUrl} onLeave={handleLeave} />}</>
+    );
+  }
   if (status === WebinarStatus.Ended) {
     return (
       <div className="max-w-4xl mx-auto px-2 py-8 bg-gray-50">