completed Audio frontend

apps/dispatch/app/helpers/cn.ts

@@ -0,0 +1,6 @@
+import clsx, { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => {
+	return twMerge(clsx(inputs));
+};

apps/dispatch/app/helpers/liveKitEventHandler.ts

@@ -0,0 +1,46 @@
+import {
+	LocalParticipant,
+	LocalTrackPublication,
+	Participant,
+	RemoteParticipant,
+	RemoteTrack,
+	RemoteTrackPublication,
+	Track,
+} from "livekit-client";
+
+export const handleTrackSubscribed = (
+	track: RemoteTrack,
+	publication: RemoteTrackPublication,
+	participant: RemoteParticipant,
+) => {
+	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();
+	}
+};
+
+export const handleTrackUnsubscribed = (
+	track: RemoteTrack,
+	publication: RemoteTrackPublication,
+	participant: RemoteParticipant,
+) => {
+	// remove tracks from all attached elements
+	track.detach();
+};
+
+export const handleLocalTrackUnpublished = (
+	publication: LocalTrackPublication,
+	participant: LocalParticipant,
+) => {
+	// when local tracks are ended, update UI to remove them from rendering
+	publication.track?.detach();
+};
+
+export const handleActiveSpeakerChange = (speakers: Participant[]) => {
+	// show UI indicators when participant is speaking
+};
+
+export const handleDisconnect = () => {
+	console.log("disconnected from room");
+};