Merge branch 'main' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo

apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx

@@ -6,6 +6,7 @@ import {
 	Disc,
 	Mic,
 	PlugZap,
+	ServerCrash,
 	ShieldQuestion,
 	Signal,
 	SignalLow,
@@ -16,8 +17,7 @@ import {
 import { useAudioStore } from "_store/audioStore";
 import { cn } from "helpers/cn";
 import { ConnectionQuality } from "livekit-client";
-
-const ROOMS = ["LST_01", "LST_02", "LST_03", "LST_04", "LST_05"];
+import { ROOMS } from "data/livekitRooms";
 
 export const Audio = () => {
 	const connection = useConnectionStore();
@@ -30,6 +30,7 @@ export const Audio = () => {
 		disconnect,
 		remoteParticipants,
 		room,
+		message,
 	} = useAudioStore();
 	const [selectedRoom, setSelectedRoom] = useState<string>("LST_01");
 
@@ -50,16 +51,21 @@ export const Audio = () => {
 	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 === "disconnected") connect(selectedRoom);
+						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",
 					)}
@@ -67,6 +73,7 @@ export const Audio = () => {
 					{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" && (
@@ -112,6 +119,20 @@ export const Audio = () => {
 									</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>
 				)}