Funkspruch unterbrechen design

apps/dispatch-server/socket-events/connect-desktop.ts

@@ -38,7 +38,7 @@ export const handleConnectDesktop = (socket: Socket, io: Server) => () => {
 					: user.publicId,
 		};
 		if (data.shouldTransmit) {
-			socket.to("pilots").emit("other-ptt", otherPttData);
+			socket.to("dispatchers").emit("other-ptt", otherPttData);
 			socket.to("pilots").emit("other-ptt", otherPttData);
 		}
 	});

apps/dispatch/app/_components/Audio.tsx

@@ -39,12 +39,6 @@ export const Audio = () => {
 
 	useEffect(() => {
 		setShowSource(true);
-		const timeout = setTimeout(() => {
-			setShowSource(false);
-		}, 6000);
-		return () => {
-			clearTimeout(timeout);
-		};
 	}, [source, isTalking]);
 	useEffect(() => {
 		const joinRoom = async () => {
@@ -64,17 +58,24 @@ export const Audio = () => {
 	return (
 		<>
 			<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
-				{state === "error" && (
+				{state === "error" && <div className="h-4 flex items-center">{message}</div>}
-					<div className="h-4 flex items-center">{message}</div>
-				)}
 				{showSource && source && (
-					<div className="h-4 flex items-center ml-2">{source}</div>
+					<div
+						className="tooltip tooltip-left tooltip-error font-semibold"
+						data-tip="Funkspruch unterbrechen"
+					>
+						<button
+							className="btn btn-sm btn-soft border-none bg-transparent hover:bg-error"
+							onClick={() => {}}
+						>
+							{source}
+						</button>
+					</div>
 				)}
 				<button
 					onClick={() => {
 						if (state === "connected") toggleTalking();
-						if (state === "error" || state === "disconnected")
+						if (state === "error" || state === "disconnected") connect(selectedRoom);
-							connect(selectedRoom);
 					}}
 					className={cn(
 						"btn btn-sm btn-soft border-none hover:bg-inherit",
@@ -82,8 +83,7 @@ export const Audio = () => {
 						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" &&
+						state === "connecting" && "bg-yellow-500 hover:bg-yellow-500 cursor-default",
-							"bg-yellow-500 hover:bg-yellow-500 cursor-default",
 					)}
 				>
 					{state === "connected" && <Mic className="w-5 h-5" />}
@@ -95,24 +95,14 @@ export const Audio = () => {
 				{state === "connected" && (
 					<details className="dropdown relative z-[1050]">
 						<summary className="dropdown btn btn-ghost flex items-center gap-1">
-							{connectionQuality === ConnectionQuality.Excellent && (
+							{connectionQuality === ConnectionQuality.Excellent && <Signal className="w-5 h-5" />}
-								<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.Good && (
+							{connectionQuality === ConnectionQuality.Lost && <ZapOff className="w-5 h-5" />}
-								<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">
+							<div className="badge badge-sm badge-soft badge-success">{remoteParticipants}</div>
-								{remoteParticipants}
-							</div>
 						</summary>
 						<ul className="menu dropdown-content bg-base-200 rounded-box z-[1050] w-52 p-2 shadow-sm">
 							{ROOMS.map((r) => (
@@ -126,10 +116,7 @@ export const Audio = () => {
 										}}
 									>
 										{room?.name === r && (
-											<Disc
+											<Disc className="text-success text-sm absolute left-2" width={15} />
-												className="text-success text-sm absolute left-2"
-												width={15}
-											/>
 										)}
 										<span className="flex-1 text-center">{r}</span>
 									</button>
@@ -142,10 +129,7 @@ export const Audio = () => {
 										disconnect();
 									}}
 								>
-									<WifiOff
+									<WifiOff className="text-error text-sm absolute left-2" width={15} />
-										className="text-error text-sm absolute left-2"
-										width={15}
-									/>
 									<span className="flex-1 text-center">Disconnect</span>
 								</button>
 							</li>