Funk-effekt und Mikrifon-Einstellungen hinzugefügt

apps/dispatch/app/_components/navbar/Settings.tsx

@@ -11,6 +11,7 @@ import toast from "react-hot-toast";
 
 export const SettingsBtn = () => {
 	const session = useSession();
+
 	const { data: user } = useQuery({
 		queryKey: ["user", session.data?.user.id],
 		queryFn: () => getUserAPI(session.data!.user.id),
@@ -38,7 +39,7 @@ export const SettingsBtn = () => {
 	const [funkVolume, setFunkVol] = useState<number>(0.8);
 	const [dmeVolume, setDmeVol] = useState<number>(0.8);
 
-	const setMic = useAudioStore((state) => state.setMic);
+	const { setMic } = useAudioStore((state) => state);
 
 	useEffect(() => {
 		if (user) {
@@ -106,10 +107,6 @@ export const SettingsBtn = () => {
 						<p className="flex items-center gap-2 text-base mb-2 justify-start w-full">
 							<Volume2 size={20} /> Eingabelautstärke
 						</p>
-						{/* 
-						 
-						 TODO: Livekit Kann aktuell keine Lautstärke manuell überschreiben, daher ist die MicVolumeBar deaktiviert
-
 						<div className="w-full">
 							<input
 								type="range"
@@ -134,7 +131,7 @@ export const SettingsBtn = () => {
 						</div>
 						{showIndication && (
 							<MicVolumeBar deviceId={selectedDevice ? selectedDevice : ""} volumeInput={micVol} />
-						)} */}
+						)}
 						<div className="divider w-full" />
 					</div>
 					<p className="flex items-center gap-2 text-base mb-2">

apps/dispatch/app/_helpers/radioEffect.ts

@@ -1,5 +1,3 @@
-import { AudioTrack, RemoteAudioTrack, RemoteTrack } from "livekit-client";
-
 // Helper function for distortion curve generation
 function createDistortionCurve(amount: number): Float32Array {
 	const k = typeof amount === "number" ? amount : 50;
@@ -14,12 +12,10 @@ function createDistortionCurve(amount: number): Float32Array {
 	return curve;
 }
 
-export const getRadioStream = (track: RemoteAudioTrack, volume: number): MediaStream | null => {
+export const getRadioStream = (stream: MediaStream, volume: number): MediaStream | null => {
 	try {
 		const audioContext = new window.AudioContext();
-		const sourceNode = audioContext.createMediaStreamSource(
+		const sourceNode = audioContext.createMediaStreamSource(stream);
-			new MediaStream([track.mediaStreamTrack]),
-		);
 		const destinationNode = audioContext.createMediaStreamDestination();
 		const gainNode = audioContext.createGain();
 

apps/dispatch/app/_store/audioStore.ts

@@ -5,12 +5,21 @@ import {
 	handleTrackSubscribed,
 	handleTrackUnsubscribed,
 } from "_helpers/liveKitEventHandler";
-import { ConnectionQuality, Participant, Room, RoomEvent, RpcInvocationData } from "livekit-client";
+import {
+	ConnectionQuality,
+	LocalTrackPublication,
+	Participant,
+	Room,
+	RoomEvent,
+	RpcInvocationData,
+	Track,
+} from "livekit-client";
 import { pilotSocket } from "(app)/pilot/socket";
 import { create } from "zustand";
 import axios from "axios";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 import { changeDispatcherAPI } from "_querys/dispatcher";
+import { getRadioStream } from "_helpers/radioEffect";
 
 let interval: NodeJS.Timeout;
 
@@ -32,6 +41,7 @@ type TalkState = {
 	addSpeakingParticipant: (participant: Participant) => void;
 	removeSpeakingParticipant: (speakingParticipants: Participant) => void;
 	room: Room | null;
+	localRadioTrack: LocalTrackPublication | undefined;
 };
 const getToken = async (roomName: string) => {
 	const response = await axios.get(`/api/livekit-token?roomName=${roomName}`);
@@ -41,6 +51,7 @@ const getToken = async (roomName: string) => {
 
 export const useAudioStore = create<TalkState>((set, get) => ({
 	isTalking: false,
+	localRadioTrack: undefined,
 	transmitBlocked: false,
 	message: null,
 	micDeviceId: null,
@@ -75,9 +86,18 @@ export const useAudioStore = create<TalkState>((set, get) => ({
 	},
 	setMic: (micDeviceId, micVolume) => {
 		set({ micDeviceId, micVolume });
+		if (get().state === "connected") {
+			const { room, disconnect, connect } = get();
+			const role = room?.localParticipant.attributes.role;
+			console.log(role);
+			if (room?.name || role) {
+				disconnect();
+				connect(room?.name || "", role || "user");
+			}
+		}
 	},
 	toggleTalking: () => {
-		const { room, isTalking, micDeviceId, speakingParticipants, transmitBlocked } = get();
+		const { room, isTalking, speakingParticipants, transmitBlocked } = get();
 		if (!room) return;
 
 		if (speakingParticipants.length > 0 && !isTalking && !transmitBlocked) {
@@ -94,10 +114,7 @@ export const useAudioStore = create<TalkState>((set, get) => ({
 			});
 			return;
 		}
-		// Todo: use micVolume
+		room.localParticipant.setMicrophoneEnabled(!isTalking);
-		room.localParticipant.setMicrophoneEnabled(!isTalking, {
-			deviceId: micDeviceId ?? undefined,
-		});
 
 		set((state) => ({ isTalking: !state.isTalking, transmitBlocked: false }));
 	},
@@ -131,6 +148,27 @@ export const useAudioStore = create<TalkState>((set, get) => ({
 						});
 					}
 
+					const inputStream = await navigator.mediaDevices.getUserMedia({
+						audio: {
+							deviceId: get().micDeviceId ?? undefined,
+							noiseSuppression: true,
+						},
+					});
+
+					// Funk-Effekt anwenden
+					const radioStream = getRadioStream(inputStream, get().micVolume);
+					if (!radioStream) throw new Error("Konnte Funkstream nicht erzeugen");
+
+					const [track] = radioStream.getAudioTracks();
+					if (!track) throw new Error("Konnte Audio-Track nicht erzeugen");
+
+					const publishedTrack = await room.localParticipant.publishTrack(track, {
+						name: "radio-audio",
+						source: Track.Source.Microphone,
+					});
+					await publishedTrack.mute();
+					set({ localRadioTrack: publishedTrack });
+
 					set({ state: "connected", room, message: null });
 				})
 				.on(RoomEvent.Disconnected, () => {