67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { LiveKitRoom, VideoConference} from "@livekit/components-react"
|
|
import "@livekit/components-styles"
|
|
import { Channel } from "@prisma/client";
|
|
import { useUser } from "@clerk/nextjs";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
interface MediaRoomProps {
|
|
chatId: string;
|
|
video: boolean;
|
|
audio: boolean;
|
|
};
|
|
|
|
export const MediaRoom = ({
|
|
chatId,
|
|
video,
|
|
audio
|
|
}: MediaRoomProps) => {
|
|
const { user } = useUser();
|
|
const [token, setToken] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!user?.firstName || !user?.lastName) return;
|
|
|
|
const name = `${user.firstName} ${user.lastName}`;
|
|
|
|
(async () => {
|
|
try {
|
|
const resp = await fetch (`/api/livekit?room=${chatId}&username=${name}`);
|
|
const data = await resp.json();
|
|
setToken(data.token);
|
|
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
})()
|
|
}, [user?.firstName, user?.lastName, chatId]);
|
|
|
|
if (!token) {
|
|
return (
|
|
<div className="flex flex-col flex-1 justify-center items-center">
|
|
<Loader2
|
|
className="h-7 w-7 text-zinc-500 animate-spin my-4"
|
|
/>
|
|
<p className="text-xs text-zinc-500 dark:text-zinc-400">
|
|
Loading...
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<LiveKitRoom
|
|
data-lk-theme="default"
|
|
serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
|
|
token={token}
|
|
connect={true}
|
|
video={video}
|
|
audio={audio}
|
|
>
|
|
<VideoConference />
|
|
|
|
</LiveKitRoom>
|
|
)
|
|
} |