var-monorepo/apps/dispatch/app/_components/Audio.tsx

"use client";

import { useEffect, useState } from "react";
import { usePilotConnectionStore } from "_store/pilot/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 = usePilotConnectionStore();
	const [showSource, setShowSource] = useState(false);

	const {
		isTalking,
		toggleTalking,
		connect,
		state,
		connectionQuality,
		disconnect,
		remoteParticipants,
		room,
		message,
		source,
	} = useAudioStore();
	const [selectedRoom, setSelectedRoom] = useState<string>("LST_01");

	useEffect(() => {
		setShowSource(true);
		const timeout = setTimeout(() => {
			setShowSource(false);
		}, 6000);
		return () => {
			clearTimeout(timeout);
		};
	}, [source, isTalking]);
	useEffect(() => {
		const joinRoom = async () => {
			if (connection.status != "connected") return;
			if (state === "connected") return;
			connect(selectedRoom);
		};

		joinRoom();

		return () => {
			disconnect();
		};
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [connection.status]);

	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>
				)}
				{showSource && source && (
					<div className="h-4 flex items-center ml-2">{source}</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-green-700 hover:bg-green-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>
		</>
	);
};