added force end transmition for dispatchers

apps/dispatch/app/_components/Audio.tsx

@@ -18,12 +18,16 @@ import { useAudioStore } from "_store/audioStore";
 import { cn } from "_helpers/cn";
 import { ConnectionQuality } from "livekit-client";
 import { ROOMS } from "_data/livekitRooms";
+import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
+import { useSession } from "next-auth/react";
+import { dispatchSocket } from "dispatch/socket";
 
 export const Audio = () => {
 	const connection = usePilotConnectionStore();
 	const [showSource, setShowSource] = useState(false);
 
 	const {
+		speakingParticipants,
 		isTalking,
 		toggleTalking,
 		connect,
@@ -33,50 +37,105 @@ export const Audio = () => {
 		remoteParticipants,
 		room,
 		message,
-		source,
+		removeMessage,
 	} = useAudioStore();
 	const [selectedRoom, setSelectedRoom] = useState<string>("LST_01");
 
-	useEffect(() => {
-		setShowSource(true);
-	}, [source, isTalking]);
+	const { selectedStation, status: pilotState } = usePilotConnectionStore((state) => state);
+
+	const { selectedZone, status: dispatcherState } = useDispatchConnectionStore((state) => state);
+	const session = useSession();
+
+	const [recentSpeakers, setRecentSpeakers] = useState<typeof speakingParticipants>([]);
 
 	useEffect(() => {
-		const joinRoom = async () => {
-			if (connection.status != "connected") return;
-			if (state === "connected") return;
-			connect(selectedRoom);
-		};
-
-		joinRoom();
-
-		return () => {
-			disconnect();
-		};
+		if (speakingParticipants.length > 0) {
+			setRecentSpeakers(speakingParticipants);
+		} else if (recentSpeakers.length > 0) {
+			const timeout = setTimeout(() => {
+				setRecentSpeakers([]);
+			}, 10000);
+			return () => clearTimeout(timeout);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [connection.status]);
+	}, [speakingParticipants]);
+
+	useEffect(() => {
+		if (message && state !== "error") {
+			const timeout = setTimeout(() => {
+				removeMessage();
+			}, 10000);
+			return () => clearTimeout(timeout);
+		}
+	}, [message, removeMessage, state]);
+
+	const displayedSpeakers = speakingParticipants.length > 0 ? speakingParticipants : recentSpeakers;
+
+	const canStopOtherSpeakers = dispatcherState === "connected";
+
+	const role =
+		(dispatcherState === "connected" && selectedZone) ||
+		(pilotState == "connected" && selectedStation?.bosCallsignShort) ||
+		session.data?.user?.publicId;
 
 	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 && (
+				{message && (
 					<div
-						className="tooltip tooltip-left tooltip-error font-semibold"
+						className="tooltip tooltip-left tooltip-warning font-semibold"
+						data-tip="Nachricht entfernen"
+					>
+						<button
+							className={cn("btn btn-sm btn-ghost border-warning bg-transparent ")}
+							onClick={() => {
+								removeMessage();
+								// Probably via socket event to set ppt = false for participant
+								if (!canStopOtherSpeakers) return;
+								speakingParticipants.forEach((p) => {
+									dispatchSocket.emit("stop-other-transmition", {
+										ownRole: role,
+										otherRole: p.attributes.role,
+									});
+								});
+							}}
+						>
+							{message}
+						</button>
+					</div>
+				)}
+				{(displayedSpeakers.length || message) && (
+					<div
+						className={cn(
+							"tooltip-left tooltip-error font-semibold",
+							canStopOtherSpeakers && "tooltip",
+						)}
 						data-tip="Funkspruch unterbrechen"
 					>
 						<button
-							className="btn btn-sm btn-soft border-none bg-transparent hover:bg-error"
-							onClick={() => {}}
+							className={cn(
+								"btn btn-sm btn-soft border-none bg-transparent",
+								canStopOtherSpeakers && "hover:bg-error",
+							)}
+							onClick={() => {
+								if (!canStopOtherSpeakers) return;
+								speakingParticipants.forEach((p) => {
+									dispatchSocket.emit("stop-other-transmition", {
+										ownRole: role,
+										otherRole: p.attributes.role,
+									});
+								});
+							}}
 						>
-							{source}
+							{displayedSpeakers.map((p) => p.attributes.role).join(", ") || ""}
 						</button>
 					</div>
 				)}
 				<button
 					onClick={() => {
 						if (state === "connected") toggleTalking();
-						if (state === "error" || state === "disconnected") connect(selectedRoom);
+						if (!role) return;
+						if (state === "error" || state === "disconnected") connect(selectedRoom, role);
 					}}
 					className={cn(
 						"btn btn-sm btn-soft border-none hover:bg-inherit",
@@ -111,9 +170,10 @@ export const Audio = () => {
 									<button
 										className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
 										onClick={() => {
+											if (!role) return;
 											if (selectedRoom === r) return;
 											setSelectedRoom(r);
-											connect(r);
+											connect(r, role);
 										}}
 									>
 										{room?.name === r && (

apps/dispatch/app/_components/map/_components/MarkerCluster.tsx

@@ -59,7 +59,8 @@ const PopupContent = ({
 				{missions.map((mission) => {
 					const needsAction =
 						HPGValidationRequired(mission.missionStationIds, aircrafts, mission.hpgMissionString) &&
-						mission.hpgValidationState !== "VALID";
+						mission.hpgValidationState !== HpgValidationState.VALID &&
+						mission.state === "draft";
 
 					const markerColor = needsAction
 						? MISSION_STATUS_COLORS["attention"]