143 lines
3.9 KiB
TypeScript
143 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useConnectionStore } from "_store/connectionStore";
|
|
import {
|
|
Disc,
|
|
Mic,
|
|
PlugZap,
|
|
ServerCrash,
|
|
ShieldQuestion,
|
|
Signal,
|
|
SignalLow,
|
|
SignalMedium,
|
|
WifiOff,
|
|
ZapOff,
|
|
} from "lucide-react";
|
|
import { useAudioStore } from "_store/audioStore";
|
|
import { cn } from "helpers/cn";
|
|
import { ConnectionQuality } from "livekit-client";
|
|
import { ROOMS } from "_data/livekitRooms";
|
|
|
|
export const Audio = () => {
|
|
const connection = useConnectionStore();
|
|
const {
|
|
isTalking,
|
|
toggleTalking,
|
|
connect,
|
|
state,
|
|
connectionQuality,
|
|
disconnect,
|
|
remoteParticipants,
|
|
room,
|
|
message,
|
|
} = useAudioStore();
|
|
const [selectedRoom, setSelectedRoom] = useState<string>("LST_01");
|
|
|
|
useEffect(() => {
|
|
const joinRoom = async () => {
|
|
if (!connection.isConnected) return;
|
|
if (state === "connected") return;
|
|
connect(selectedRoom);
|
|
};
|
|
|
|
joinRoom();
|
|
|
|
return () => {
|
|
disconnect();
|
|
};
|
|
}, [connection.isConnected]);
|
|
|
|
return (
|
|
<>
|
|
<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
|
|
{state === "error" && (
|
|
<div className="h-4 flex items-center">{message}</div>
|
|
)}
|
|
<button
|
|
onClick={() => {
|
|
if (state === "connected") toggleTalking();
|
|
if (state === "error" || state === "disconnected")
|
|
connect(selectedRoom);
|
|
}}
|
|
className={cn(
|
|
"btn btn-sm btn-soft border-none hover:bg-inherit",
|
|
!isTalking && "bg-transparent hover:bg-sky-400/20",
|
|
isTalking && "bg-red-500 hover:bg-red-600",
|
|
state === "disconnected" && "bg-red-500 hover:bg-red-500",
|
|
state === "error" && "bg-red-500 hover:bg-red-500",
|
|
state === "connecting" &&
|
|
"bg-yellow-500 hover:bg-yellow-500 cursor-default",
|
|
)}
|
|
>
|
|
{state === "connected" && <Mic className="w-5 h-5" />}
|
|
{state === "disconnected" && <WifiOff className="w-5 h-5" />}
|
|
{state === "connecting" && <PlugZap className="w-5 h-5" />}
|
|
{state === "error" && <ServerCrash className="w-5 h-5" />}
|
|
</button>
|
|
|
|
{state === "connected" && (
|
|
<details className="dropdown relative z-[1050]">
|
|
<summary className="dropdown btn btn-ghost flex items-center gap-1">
|
|
{connectionQuality === ConnectionQuality.Excellent && (
|
|
<Signal className="w-5 h-5" />
|
|
)}
|
|
{connectionQuality === ConnectionQuality.Good && (
|
|
<SignalMedium className="w-5 h-5" />
|
|
)}
|
|
{connectionQuality === ConnectionQuality.Poor && (
|
|
<SignalLow className="w-5 h-5" />
|
|
)}
|
|
{connectionQuality === ConnectionQuality.Lost && (
|
|
<ZapOff className="w-5 h-5" />
|
|
)}
|
|
{connectionQuality === ConnectionQuality.Unknown && (
|
|
<ShieldQuestion className="w-5 h-5" />
|
|
)}
|
|
<div className="badge badge-sm badge-soft badge-success">
|
|
{remoteParticipants}
|
|
</div>
|
|
</summary>
|
|
<ul className="menu dropdown-content bg-base-200 rounded-box z-[1050] w-52 p-2 shadow-sm">
|
|
{ROOMS.map((r) => (
|
|
<li key={r}>
|
|
<button
|
|
className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
|
|
onClick={() => {
|
|
if (selectedRoom === r) return;
|
|
setSelectedRoom(r);
|
|
connect(r);
|
|
}}
|
|
>
|
|
{room?.name === r && (
|
|
<Disc
|
|
className="text-success text-sm absolute left-2"
|
|
width={15}
|
|
/>
|
|
)}
|
|
<span className="flex-1 text-center">{r}</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<button
|
|
className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
|
|
onClick={() => {
|
|
disconnect();
|
|
}}
|
|
>
|
|
<WifiOff
|
|
className="text-error text-sm absolute left-2"
|
|
width={15}
|
|
/>
|
|
<span className="flex-1 text-center">Disconnect</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|