From 405c7c5a609225443786b56c1ed580eb3dbf74d7 Mon Sep 17 00:00:00 2001
From: Sergey Mankovsky <sergey@monadical.com>
Date: Wed, 5 Feb 2025 02:23:29 +0100
Subject: [PATCH] Reload page on leave

---
 www/app/lib/WherebyEmbed.tsx      | 19 +++++++++++++++++--
 www/app/webinars/[title]/page.tsx | 21 ++++++++++++++-------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/www/app/lib/WherebyEmbed.tsx b/www/app/lib/WherebyEmbed.tsx
index c5abed44..6a7df0c7 100644
--- a/www/app/lib/WherebyEmbed.tsx
+++ b/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}
diff --git a/www/app/webinars/[title]/page.tsx b/www/app/webinars/[title]/page.tsx
index 31aa13e6..08c9090b 100644
--- a/www/app/webinars/[title]/page.tsx
+++ b/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">