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