34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export function ConferenceFrame() {
|
|
const [error, setError] = useState(false);
|
|
|
|
return (
|
|
<div className="w-full h-[calc(100vh-8rem)]">
|
|
{error ? (
|
|
<div className="w-full h-full flex items-center justify-center bg-gray-100">
|
|
<div className="text-center">
|
|
<h2 className="text-xl font-semibold text-gray-800">Unable to load Conference</h2>
|
|
<p className="text-gray-600 mt-2">Please check your connection or try again later</p>
|
|
<button
|
|
onClick={() => setError(false)}
|
|
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<iframe
|
|
src={process.env.NEXT_PUBLIC_IFRAME_CONFERENCE_URL}
|
|
className="w-full h-full border-none"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
onError={() => setError(true)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|