Ealisitische Sequenz im HEader vom call-Bildschirm im MRT

apps/dispatch/app/(app)/pilot/_components/mrt/MrtDisplay.tsx

@@ -6,7 +6,7 @@ import PAGE_HOME from "./images/PAGE_Home.png";
 import PAGE_Call from "./images/PAGE_Call.png";
 import PAGE_Off from "./images/PAGE_Off.png";
 import PAGE_STARTUP from "./images/PAGE_Startup.png";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn, useDebounce } from "@repo/shared-components";
 import "./MrtDisplay.css";
 import { useSession } from "next-auth/react";
@@ -16,8 +16,11 @@ import { useAudioStore } from "_store/audioStore";
 import { ROOMS } from "_data/livekitRooms";
 
 export const MrtDisplay = () => {
-	const { page, setPage, popup } = useMrtStore((state) => state);
-
+	const { page, setPage, popup, setPopup, setStringifiedData, stringifiedData } = useMrtStore(
+		(state) => state,
+	);
+	const callEstablishedRef = useRef(false);
+	const session = useSession();
 	const { connectedAircraft, selectedStation } = usePilotConnectionStore((state) => state);
 	const { room, speakingParticipants, isTalking } = useAudioStore((state) => state);
 	const [pageImage, setPageImage] = useState<{
@@ -35,8 +38,6 @@ export const MrtDisplay = () => {
 		| undefined
 	>(undefined);
 
-	const session = useSession();
-
 	useDebounce(
 		() => {
 			if (!nextImage) return;
@@ -68,6 +69,18 @@ export const MrtDisplay = () => {
 		[page, setPage],
 	);
 
+	useDebounce(
+		() => {
+			if (page === "startup") {
+				setPopup({
+					popup: "login",
+				});
+			}
+		},
+		7500,
+		[page, setPage],
+	);
+
 	useDebounce(
 		() => {
 			if (page === "voice-call" && speakingParticipants.length === 0 && !isTalking) {
@@ -81,6 +94,67 @@ export const MrtDisplay = () => {
 	);
 
 	useEffect(() => {
+		const timeouts: NodeJS.Timeout[] = [];
+		if (page === "voice-call") {
+			setStringifiedData({
+				callTextHeader: "Wählen",
+			});
+			timeouts.push(
+				setTimeout(() => {
+					setStringifiedData({
+						callTextHeader: "Anruf...",
+					});
+				}, 500),
+
+				setTimeout(() => {
+					setStringifiedData({
+						callTextHeader: "Gruppenruf",
+					});
+				}, 800),
+				setTimeout(() => {
+					callEstablishedRef.current = true;
+				}, 1500),
+			);
+		}
+		return () => {
+			timeouts.forEach((t) => clearTimeout(t));
+		};
+	}, [page, setStringifiedData]);
+
+	useDebounce(
+		() => {
+			if (isTalking && page === "voice-call") {
+				setStringifiedData({
+					callTextHeader: "Sprechen",
+				});
+			}
+		},
+		1500,
+		[page, isTalking],
+	);
+
+	useEffect(() => {
+		if (isTalking && page === "voice-call" && callEstablishedRef.current) {
+			console.log("SET TO SPRECHEN", stringifiedData.callTextHeader);
+			setStringifiedData({
+				callTextHeader: "Sprechen",
+			});
+		} else if (
+			!isTalking &&
+			page === "voice-call" &&
+			stringifiedData.callTextHeader === "Sprechen"
+		) {
+			setStringifiedData({
+				callTextHeader: "Gruppenruf",
+			});
+		}
+	}, [page, stringifiedData.callTextHeader, isTalking, setStringifiedData]);
+
+	useEffect(() => {
+		if (page !== "voice-call") {
+			callEstablishedRef.current = false;
+		}
+
 		switch (page) {
 			case "home":
 				setNextImage({ src: PAGE_HOME, name: "home" });
@@ -139,6 +213,9 @@ export const MrtDisplay = () => {
 				)}
 				{pageName == "voice-call" && (
 					<div>
+						<p className="absolute left-[18%] top-[18.8%] h-[8%] w-[37%]">
+							{stringifiedData.callTextHeader}
+						</p>
 						<p className="absolute left-[18%] top-[35%] h-[8%] w-[38%]">
 							{isTalking && selectedStation?.bosCallsignShort}
 							{speakingParticipants.length > 0 &&

apps/dispatch/app/(app)/pilot/_components/mrt/MrtPopups.tsx

@@ -16,7 +16,7 @@ export const MrtPopups = () => {
 	const { sdsReceivedSoundRef } = useSounds();
 
 	const { popup, setPopup, setStringifiedData, stringifiedData } = useMrtStore((state) => state);
-	const { connectedAircraft } = usePilotConnectionStore((state) => state);
+	const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
 	const [popupImage, setPopupImage] = useState<StaticImageData | null>(null);
 
 	useEffect(() => {
@@ -42,22 +42,39 @@ export const MrtPopups = () => {
 
 	useDebounce(
 		() => {
-			if (!popup || popup == "sds-received") return;
+			if (popup == "login") return;
+			if (popup == "sds-received") return;
 			setPopup(null);
 		},
 		3000,
 		[popup],
 	);
 
+	useEffect(() => {
+		if (status === "connecting") {
+			setPopup({ popup: "login" });
+		}
+	}, [status, setPopup]);
+
+	useDebounce(
+		() => {
+			if (status === "connected") {
+				setPopup(null);
+			}
+		},
+		5000,
+		[status],
+	);
+
 	useEffect(() => {
 		pilotSocket.on("sds-status", (data: StationStatus) => {
 			setStringifiedData({ sdsText: data.status + " - " + fmsStatusDescriptionShort[data.status] });
 			setPopup({ popup: "sds-received" });
+			if (sdsReceivedSoundRef.current) {
+				sdsReceivedSoundRef.current.currentTime = 0;
+				sdsReceivedSoundRef.current.play();
+			}
 		});
-		if (sdsReceivedSoundRef.current) {
-			sdsReceivedSoundRef.current.currentTime = 0;
-			sdsReceivedSoundRef.current.play();
-		}
 	}, [setPopup, setStringifiedData, sdsReceivedSoundRef]);
 
 	if (!popupImage || !popup) return null;

apps/dispatch/app/(app)/pilot/page.tsx

@@ -23,7 +23,7 @@ const Map = dynamic(() => import("_components/map/Map"), {
 });
 
 const PilotPage = () => {
-	const { connectedAircraft, status,  } = usePilotConnectionStore((state) => state);
+	const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
 	const { latestMission } = useDmeStore((state) => state);
 	// Query will be cached anyway, due to this, displayed Markers are in sync with own Aircraft connection-warning
 	const { data: aircrafts } = useQuery({
@@ -94,7 +94,7 @@ const PilotPage = () => {
 						</div>
 					</div>
 				</div>
-				<div className="flex h-full w-1/3">
+				<div className="flex h-full w-1/3 min-w-[500px]">
 					<div className="bg-base-300 flex h-full w-full flex-col p-4">
 						<div className="flex justify-between">
 							<h2 className="card-title mb-2">MRT & DME</h2>