Reload page on leave

This commit is contained in:
2025-02-05 02:23:29 +01:00
parent 9237d98731
commit 405c7c5a60
2 changed files with 31 additions and 9 deletions

View File

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

View File

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