added HPG VEhicles Mission, Audio settings; mission Context menu

apps/dispatch/app/_components/MicVolumeIndication.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { cn } from "helpers/cn";
+import { useEffect, useState } from "react";
+
+type MicrophoneLevelProps = {
+	deviceId: string;
+	volumeInput: number; // Verstärkung der Lautstärke
+};
+
+export default function MicrophoneLevel({ deviceId, volumeInput }: MicrophoneLevelProps) {
+	const [volumeLevel, setVolumeLevel] = useState(0);
+
+	useEffect(() => {
+		let audioContext: AudioContext | null = null;
+		let analyser: AnalyserNode | null = null;
+		let source: MediaStreamAudioSourceNode | null = null;
+		let rafId: number;
+
+		async function start() {
+			audioContext = new AudioContext();
+			const stream = await navigator.mediaDevices.getUserMedia({
+				audio: { deviceId: deviceId ? { exact: deviceId } : undefined },
+			});
+			source = audioContext.createMediaStreamSource(stream);
+			analyser = audioContext.createAnalyser();
+			analyser.fftSize = 256;
+			source.connect(analyser);
+
+			const dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+			const updateVolume = () => {
+				if (!analyser) return;
+				analyser.getByteFrequencyData(dataArray);
+				const avg = dataArray.reduce((a, b) => a + b, 0) / dataArray.length;
+				setVolumeLevel(avg * volumeInput);
+				rafId = requestAnimationFrame(updateVolume);
+			};
+
+			updateVolume();
+		}
+
+		start();
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			audioContext?.close();
+		};
+	}, [deviceId, volumeInput]);
+
+	const barWidth = Math.max((volumeLevel / 70) * 100 - 35, 0);
+
+	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")}
+					style={{
+						width: `${barWidth > 100 ? 100 : barWidth}%`,
+						transition: "width 0.2s",
+					}}
+				/>
+				<div
+					className="absolute top-0 left-[60%] w-[20%] 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
+			</p>
+		</div>
+	);
+}