added missing Settings functionality, moved ntfy setting

2025-07-17 01:08:10 -07:00
parent 44427a1b4b
commit 11b1d8745d
9 changed files with 141 additions and 150 deletions
--- a/apps/dispatch/app/(app)/pilot/_components/dme/useSounds.ts
+++ b/apps/dispatch/app/(app)/pilot/_components/dme/useSounds.ts
@@ -1,18 +1,11 @@
 "use client";
-import { useQuery } from "@tanstack/react-query";
-import { getUserAPI } from "_querys/user";
+import { useAudioStore } from "_store/audioStore";
 import { usePilotConnectionStore } from "_store/pilot/connectionStore";
 import { useDmeStore } from "_store/pilot/dmeStore";
-import { useSession } from "next-auth/react";
 import { useEffect, useRef } from "react";

 export const useSounds = () => {
-	const session = useSession();
-	const { data: user } = useQuery({
-		queryKey: ["user", session.data?.user.id],
-		queryFn: () => getUserAPI(session.data!.user.id),
-	});
-
+	const dmeVolume = useAudioStore((state) => state.settings.dmeVolume);
 	const { page, setPage } = useDmeStore((state) => state);
 	const mission = usePilotConnectionStore((state) => state.activeMission);

@@ -25,14 +18,14 @@ export const useSounds = () => {
 	}, []);

 	useEffect(() => {
-		if (user?.settingsDmeVolume) {
+		if (dmeVolume) {
 			if (newMissionSound.current) {
-				newMissionSound.current.volume = user.settingsDmeVolume;
+				newMissionSound.current.volume = dmeVolume;
 			}
 		} else if (newMissionSound.current) {
 			newMissionSound.current.volume = 0.8; // Default volume
 		}
-	}, [user?.settingsDmeVolume]);
+	}, [dmeVolume]);

 	useEffect(() => {
 		const timeouts: NodeJS.Timeout[] = [];
@@ -40,7 +33,6 @@ export const useSounds = () => {
 		if (page === "new-mission" && newMissionSound.current) {
 			console.log("new-mission", mission);
 			newMissionSound.current.currentTime = 0;
-			newMissionSound.current.volume = 0.3;
 			newMissionSound.current.play();
 			if (mission) {
 				timeouts.push(setTimeout(() => setPage({ page: "mission", mission }), 500));
--- a/apps/dispatch/app/_components/MicVolumeIndication.tsx
+++ b/apps/dispatch/app/_components/MicVolumeIndication.tsx
@@ -47,27 +47,28 @@ export default function MicrophoneLevel({ deviceId, volumeInput }: MicrophoneLev
 		};
 	}, [deviceId, volumeInput]);

-	const barWidth = Math.max((volumeLevel / 70) * 100 - 35, 0);
+	const barWidth = Math.min((volumeLevel / 140) * 100, 100);

 	return (
 		<div className="w-full">
 			<div className="relative w-full bg-base-300 h-5 rounded">
 				<div
-					className={cn("bg-primary h-full rounded", barWidth > 100 && "bg-red-400")}
+					className={cn("bg-primary h-full rounded", barWidth == 100 && "bg-red-400")}
 					style={{
-						width: `${barWidth > 100 ? 100 : barWidth}%`,
+						width: `${barWidth}%`,
 						transition: "width 0.2s",
 					}}
 				/>
 				<div
-					className="absolute top-0 left-[60%] w-[20%] h-full bg-green-500 opacity-40 rounded"
+					className="absolute top-0 left-[60%] w-[30%] h-full bg-green-500 opacity-40 rounded"
 					style={{
 						transform: "translateX(-50%)",
 					}}
 				/>
 			</div>
 			<p className="text-gray-500 text-sm">
-				Lautstärke sollte beim Sprechen in dem Grünen bereich bleiben
+				Lautstärke sollte beim Sprechen in dem Grünen bereich bleiben. Beachte das scharfe Laute
+				(z.B. "S" oder "Z") die Anzeige verfälschen können.
 			</p>
 		</div>
 	);
--- a/apps/dispatch/app/_components/map/BaseMaps.tsx
+++ b/apps/dispatch/app/_components/map/BaseMaps.tsx
@@ -73,7 +73,6 @@ const HeliportsLayer = () => {
 		queryKey: ["heliports"],
 		queryFn: () => getHeliportsAPI(),
 	});
-	console.log("Heliports Layer", heliports);
 	const [heliportsWithIcon, setHeliportsWithIcon] = useState<(Heliport & { icon?: string })[]>([]);
 	const map = useMap();
 	const [isVisible, setIsVisible] = useState(true);
--- a/apps/dispatch/app/_components/navbar/Settings.tsx
+++ b/apps/dispatch/app/_components/navbar/Settings.tsx
@@ -1,17 +1,19 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 import { GearIcon } from "@radix-ui/react-icons";
-import { SettingsIcon, Volume2 } from "lucide-react";
+import { Bell, SettingsIcon, Volume2 } from "lucide-react";
 import MicVolumeBar from "_components/MicVolumeIndication";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { editUserAPI, getUserAPI } from "_querys/user";
 import { useSession } from "next-auth/react";
 import { useAudioStore } from "_store/audioStore";
 import toast from "react-hot-toast";
+import Link from "next/link";

 export const SettingsBtn = () => {
 	const session = useSession();

+	const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
 	const { data: user } = useQuery({
 		queryKey: ["user", session.data?.user.id],
 		queryFn: () => getUserAPI(session.data!.user.id),
@@ -30,26 +32,42 @@ export const SettingsBtn = () => {

 	const modalRef = useRef<HTMLDialogElement>(null);

-	const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
-	const [selectedDevice, setSelectedDevice] = useState<string | null>(
-		user?.settingsMicDevice || null,
-	);
 	const [showIndication, setShowIndication] = useState<boolean>(false);
-	const [micVol, setMicVol] = useState<number>(1);
-	const [funkVolume, setFunkVol] = useState<number>(0.8);
-	const [dmeVolume, setDmeVol] = useState<number>(0.8);

-	const { setMic } = useAudioStore((state) => state);
+	const [settings, setSettings] = useState({
+		micDeviceId: user?.settingsMicDevice || null,
+		micVolume: user?.settingsMicVolume || 1,
+		radioVolume: user?.settingsRadioVolume || 0.8,
+		dmeVolume: user?.settingsDmeVolume || 0.8,
+		pilotNtfyRoom: user?.settingsNtfyRoom || "",
+	});
+
+	const { setSettings: setAudioSettings } = useAudioStore((state) => state);

 	useEffect(() => {
 		if (user) {
-			setSelectedDevice(user.settingsMicDevice);
-			setMic(user.settingsMicDevice, user.settingsMicVolume || 1);
-			setMicVol(user.settingsMicVolume || 1);
-			setFunkVol(user.settingsRadioVolume || 0.8);
-			setDmeVol(user.settingsDmeVolume || 0.8);
+			setAudioSettings({
+				micDeviceId: user.settingsMicDevice,
+				micVolume: user.settingsMicVolume || 1,
+				radioVolume: user.settingsRadioVolume || 0.8,
+				dmeVolume: user.settingsDmeVolume || 0.8,
+			});
+			setSettings({
+				micDeviceId: user.settingsMicDevice,
+				micVolume: user.settingsMicVolume || 1,
+				radioVolume: user.settingsRadioVolume || 0.8,
+				dmeVolume: user.settingsDmeVolume || 0.8,
+				pilotNtfyRoom: user.settingsNtfyRoom || "",
+			});
 		}
-	}, [user, setMic]);
+	}, [user, setSettings, setAudioSettings]);
+
+	const setSettingsPartial = (newSettings: Partial<typeof settings>) => {
+		setSettings((prev) => ({
+			...prev,
+			...newSettings,
+		}));
+	};

 	useEffect(() => {
 		const setDevices = async () => {
@@ -87,9 +105,9 @@ export const SettingsBtn = () => {
 								<span>Eingabegerät</span>
 								<select
 									className="input w-full"
-									value={selectedDevice ? selectedDevice : ""}
+									value={settings.micDeviceId ? settings.micDeviceId : ""}
 									onChange={(e) => {
-										setSelectedDevice(e.target.value);
+										setSettingsPartial({ micDeviceId: e.target.value });
 										setShowIndication(true);
 									}}
 								>
@@ -115,10 +133,10 @@ export const SettingsBtn = () => {
 								step={0.01}
 								onChange={(e) => {
 									const value = parseFloat(e.target.value);
-									setMicVol(value);
+									setSettingsPartial({ micVolume: value });
 									setShowIndication(true);
 								}}
-								value={micVol}
+								value={settings.micVolume}
 								className="range range-xs range-accent w-full"
 							/>
 							<div className="flex justify-between px-2.5 mt-2 text-xs">
@@ -130,7 +148,10 @@ export const SettingsBtn = () => {
 							</div>
 						</div>
 						{showIndication && (
-							<MicVolumeBar deviceId={selectedDevice ? selectedDevice : ""} volumeInput={micVol} />
+							<MicVolumeBar
+								deviceId={settings.micDeviceId ? settings.micDeviceId : ""}
+								volumeInput={settings.micVolume}
+							/>
 						)}
 						<div className="divider w-full" />
 					</div>
@@ -144,10 +165,11 @@ export const SettingsBtn = () => {
 							max={1}
 							step={0.01}
 							onChange={(e) => {
+								console.log("Radio Volume", e.target.value);
 								const value = parseFloat(e.target.value);
-								setFunkVol(value);
+								setSettingsPartial({ radioVolume: value });
 							}}
-							value={funkVolume}
+							value={settings.radioVolume}
 							className="range range-xs range-primary w-full"
 						/>
 						<div className="flex justify-between px-2.5 mt-2 text-xs">
@@ -158,9 +180,7 @@ export const SettingsBtn = () => {
 							<span>100%</span>
 						</div>
 					</div>
-					<div className="flex justify-center w-full">
-						<div className="divider w-1/2" />
-					</div>
+
 					<p className="flex items-center gap-2 text-base mb-2">
 						<Volume2 size={20} /> Melder Lautstärke
 					</p>
@@ -172,12 +192,12 @@ export const SettingsBtn = () => {
 							step={0.01}
 							onChange={(e) => {
 								const value = parseFloat(e.target.value);
-								setDmeVol(value);
+								setSettingsPartial({ dmeVolume: value });
 								if (!testSoundRef.current) return;
 								testSoundRef.current.volume = value;
 								testSoundRef.current.play();
 							}}
-							value={dmeVolume}
+							value={settings.dmeVolume}
 							className="range range-xs range-primary w-full"
 						/>
 						<div className="flex justify-between px-2.5 mt-2 text-xs">
@@ -188,6 +208,34 @@ export const SettingsBtn = () => {
 							<span>100%</span>
 						</div>
 					</div>
+					<div className="flex justify-center w-full">
+						<div className="divider w-full" />
+					</div>
+					<div className="w-full">
+						<label className="floating-label w-full">
+							<span className="text-lg flex items-center gap-2">
+								<Bell /> NTFY room
+							</span>
+							<input
+								placeholder="Erhalte eine Benachrichtigung auf dein Handy über NTFY"
+								className="input input-bordered w-full"
+								value={settings.pilotNtfyRoom}
+								onChange={(e) => setSettingsPartial({ pilotNtfyRoom: e.target.value })}
+							/>
+						</label>
+
+						<p className="label mt-2 w-full">
+							<Link
+								href="https://docs.virtualairrescue.com/docs/Leitstelle/App-Alarmierung#download"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="link link-hover link-primary"
+							>
+								Hier
+							</Link>
+							findest du mehr Informationen!
+						</p>
+					</div>

 					<div className="flex justify-between modal-action">
 						<button
@@ -210,13 +258,19 @@ export const SettingsBtn = () => {
 								await editUserMutation.mutateAsync({
 									id: session.data!.user.id,
 									user: {
-										settingsMicDevice: selectedDevice,
-										settingsMicVolume: micVol,
-										settingsRadioVolume: funkVolume,
-										settingsDmeVolume: dmeVolume,
+										settingsMicDevice: settings.micDeviceId,
+										settingsMicVolume: settings.micVolume,
+										settingsRadioVolume: settings.radioVolume,
+										settingsDmeVolume: settings.dmeVolume,
+										settingsNtfyRoom: settings.pilotNtfyRoom,
 									},
 								});
-								setMic(selectedDevice, micVol);
+								setAudioSettings({
+									micDeviceId: settings.micDeviceId,
+									micVolume: settings.micVolume,
+									radioVolume: settings.radioVolume,
+									dmeVolume: settings.dmeVolume,
+								});
 								modalRef.current?.close();
 								toast.success("Einstellungen gespeichert");
 							}}
@@ -229,7 +283,6 @@ export const SettingsBtn = () => {
 		</div>
 	);
 };
-
 export const Settings = () => {
 	return (
 		<div>
--- a/apps/dispatch/app/_helpers/liveKitEventHandler.ts
+++ b/apps/dispatch/app/_helpers/liveKitEventHandler.ts
@@ -15,17 +15,25 @@ export const handleTrackSubscribed = (
 	if (!track.isMuted) {
 		useAudioStore.getState().addSpeakingParticipant(participant);
 	}
-	track.on("unmuted", () => {
-		useAudioStore.getState().addSpeakingParticipant(participant);
-	});
-	track.on("muted", () => {
-		useAudioStore.getState().removeSpeakingParticipant(participant);
-	});
+
 	if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {
 		// attach it to a new HTMLVideoElement or HTMLAudioElement
 		const element = track.attach();
 		element.play();
+
+		track.on("unmuted", () => {
+			useAudioStore.getState().addSpeakingParticipant(participant);
+			console.log(useAudioStore.getState().settings.radioVolume);
+			element.volume = useAudioStore.getState().settings.radioVolume;
+		});
+		track.on("unmuted", () => {
+			useAudioStore.getState().addSpeakingParticipant(participant);
+		});
 	}
+
+	track.on("muted", () => {
+		useAudioStore.getState().removeSpeakingParticipant(participant);
+	});
 };

 export const handleTrackUnsubscribed = (track: RemoteTrack) => {
--- a/apps/dispatch/app/_store/audioStore.ts
+++ b/apps/dispatch/app/_store/audioStore.ts
@@ -24,8 +24,12 @@ import { getRadioStream } from "_helpers/radioEffect";
 let interval: NodeJS.Timeout;

 type TalkState = {
-	micDeviceId: string | null;
-	micVolume: number;
+	settings: {
+		micDeviceId: string | null;
+		micVolume: number;
+		radioVolume: number;
+		dmeVolume: number;
+	};
 	isTalking: boolean;
 	transmitBlocked: boolean;
 	removeMessage: () => void;
@@ -34,7 +38,7 @@ type TalkState = {
 	connectionQuality: ConnectionQuality;
 	remoteParticipants: number;
 	toggleTalking: () => void;
-	setMic: (micDeviceId: string | null, volume: number) => void;
+	setSettings: (settings: Partial<TalkState["settings"]>) => void;
 	connect: (roomName: string, role: string) => void;
 	disconnect: () => void;
 	speakingParticipants: Participant[];
@@ -54,9 +58,14 @@ export const useAudioStore = create<TalkState>((set, get) => ({
 	localRadioTrack: undefined,
 	transmitBlocked: false,
 	message: null,
-	micDeviceId: null,
 	speakingParticipants: [],
 	micVolume: 1,
+	settings: {
+		micDeviceId: null,
+		micVolume: 1,
+		radioVolume: 0.8,
+		dmeVolume: 0.8,
+	},
 	state: "disconnected" as const,
 	remoteParticipants: 0,
 	connectionQuality: ConnectionQuality.Unknown,
@@ -84,9 +93,19 @@ export const useAudioStore = create<TalkState>((set, get) => ({
 			set({ transmitBlocked: false, message: null, isTalking: true });
 		}
 	},
-	setMic: (micDeviceId, micVolume) => {
-		set({ micDeviceId, micVolume });
-		if (get().state === "connected") {
+	setSettings: (newSettings) => {
+		const oldSettings = get().settings;
+		set((s) => ({
+			settings: {
+				...s.settings,
+				...newSettings,
+			},
+		}));
+		if (
+			get().state === "connected" &&
+			(oldSettings.micDeviceId !== newSettings.micDeviceId ||
+				oldSettings.micVolume !== newSettings.micVolume)
+		) {
 			const { room, disconnect, connect } = get();
 			const role = room?.localParticipant.attributes.role;
 			console.log(role);
@@ -150,13 +169,13 @@ export const useAudioStore = create<TalkState>((set, get) => ({

 					const inputStream = await navigator.mediaDevices.getUserMedia({
 						audio: {
-							deviceId: get().micDeviceId ?? undefined,
+							deviceId: get().settings.micDeviceId ?? undefined,
 							noiseSuppression: true,
 						},
 					});

 					// Funk-Effekt anwenden
-					const radioStream = getRadioStream(inputStream, get().micVolume);
+					const radioStream = getRadioStream(inputStream, get().settings.micVolume);
 					if (!radioStream) throw new Error("Konnte Funkstream nicht erzeugen");

 					const [track] = radioStream.getAudioTracks();