fix: added Suspense boundary to guest page to prevent Next.js useSearchParams errors
This commit is contained in:
parent
209a0eff25
commit
d0523e7c02
62
src/app/guest/page.tsx
Normal file
62
src/app/guest/page.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import '@livekit/components-styles';
|
||||
import {
|
||||
LiveKitRoom,
|
||||
VideoConference,
|
||||
RoomAudioRenderer,
|
||||
} from '@livekit/components-react';
|
||||
import { useEffect, useState, Suspense } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
function GuestRoom() {
|
||||
const searchParams = useSearchParams();
|
||||
const room = searchParams.get('room');
|
||||
const [token, setToken] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!room) return;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const resp = await fetch(`/api/livekit/token?room=${room}&identity=guest-${Math.floor(Math.random() * 1000)}`);
|
||||
const data = await resp.json();
|
||||
setToken(data.token);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
})();
|
||||
}, [room]);
|
||||
|
||||
if (!room) {
|
||||
return <div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Falta el parámetro de la sala (?room=...)</div>;
|
||||
}
|
||||
|
||||
if (token === '') {
|
||||
return <div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Conectando...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black">
|
||||
<LiveKitRoom
|
||||
video={true}
|
||||
audio={true}
|
||||
token={token}
|
||||
serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL || "wss://live.almeira.com.co"}
|
||||
data-lk-theme="default"
|
||||
style={{ height: '100vh' }}
|
||||
>
|
||||
<VideoConference />
|
||||
<RoomAudioRenderer />
|
||||
</LiveKitRoom>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GuestPage() {
|
||||
return (
|
||||
<Suspense fallback={<div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Cargando...</div>}>
|
||||
<GuestRoom />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user