Reload page on leave

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:20:00Z",
+    endsAt: "2025-02-05T01:22: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">