mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-20 20:29:06 +00:00
Reload page on leave
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user