apps/dispatch/app/_helpers/liveKitEventHandler.ts

@@ -4,30 +4,38 @@ import {
 	RemoteParticipant,
 	RemoteTrack,
 	RemoteTrackPublication,
-	Track,
 } from "livekit-client";
 
+const initialTrackTimeouts = new Map<string, NodeJS.Timeout>();
+
 export const handleTrackSubscribed = (
 	track: RemoteTrack,
 	publication: RemoteTrackPublication,
 	participant: RemoteParticipant,
 ) => {
-	if (!track.isMuted) {
-		useAudioStore.getState().addSpeakingParticipant(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.pause();
+
+	if (!track.isMuted) {
+		initialTrackTimeouts.set(
+			participant.sid,
+			setTimeout(() => {
+				useAudioStore.getState().addSpeakingParticipant(participant);
+			}, 1000),
+		);
+		setTimeout(() => {
 			element.play();
+		}, 1000);
+	}
 
 	track.on("unmuted", () => {
 		useAudioStore.getState().addSpeakingParticipant(participant);
 		element.volume = useAudioStore.getState().settings.radioVolume;
 	});
-	}
 
 	track.on("muted", () => {
+		clearTimeout(initialTrackTimeouts.get(participant.sid));
+		initialTrackTimeouts.get(participant.sid);
 		useAudioStore.getState().removeSpeakingParticipant(participant);
 	});
 };

apps/dispatch/app/_store/audioStore.ts

@@ -184,7 +184,9 @@ export const useAudioStore = create<TalkState>((set, get) => ({
 						name: "radio-audio",
 						source: Track.Source.Microphone,
 					});
-					await publishedTrack.mute();
+					setTimeout(() => {
+						publishedTrack.mute();
+					}, 400);
 					set({ localRadioTrack: publishedTrack });
 
 					set({ state: "connected", room, message: null });