diff --git a/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx b/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx
index 695dc952..583887bc 100644
--- a/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx
@@ -1,159 +1,111 @@
"use client";
import { useEffect, useState } from "react";
+import { useConnectionStore } from "_store/connectionStore";
import {
- LocalParticipant,
- LocalTrackPublication,
- Participant,
- RemoteParticipant,
- RemoteTrack,
- RemoteTrackPublication,
- Room,
- RoomEvent,
- Track,
- VideoPresets,
-} from "livekit-client";
-import { connectionStore } from "../../../../_store/connectionStore";
+ Circle,
+ Disc,
+ Mic,
+ PlugZap,
+ ShieldQuestion,
+ Signal,
+ SignalLow,
+ SignalMedium,
+ WifiOff,
+ ZapOff,
+} from "lucide-react";
+import { useAudioStore } from "_store/audioStore";
+import { cn } from "helpers/cn";
+import { ConnectionQuality } from "livekit-client";
+
+const ROOMS = ["LST_01", "LST_02", "LST_03", "LST_04", "LST_05"];
export const Audio = () => {
- const connection = connectionStore();
- const [token, setToken] = useState("");
- const [room, setRoom] = useState
(null);
-
- useEffect(() => {
- const fetchToken = async () => {
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL}/livekit/token`,
- );
- const data = await response.json();
- setToken(data.token);
- };
-
- fetchToken();
- }, []);
+ const connection = useConnectionStore();
+ const {
+ isTalking,
+ toggleTalking,
+ connect,
+ state,
+ connectionQuality,
+ disconnect,
+ remoteParticipants,
+ room,
+ } = useAudioStore();
+ const [selectedRoom, setSelectedRoom] = useState("LST_01");
useEffect(() => {
const joinRoom = async () => {
if (!connection.isConnected) return;
- if (!token) return;
- if (!process.env.NEXT_PUBLIC_LIVEKIT_URL)
- return console.error("NEXT_PUBLIC_LIVEKIT_URL not set");
- console.log("Connecting to room", {
- token,
- url: process.env.NEXT_PUBLIC_LIVEKIT_URL,
- });
- const url = "ws://localhost:7880";
- /* const token =
- "eyJhbGciOiJIUzI1NiJ9.eyJ2aWRlbyI6eyJyb29tSm9pbiI6dHJ1ZSwicm9vbSI6InF1aWNrc3RhcnQtcm9vbSJ9LCJpc3MiOiJBUElBbnNHZHRkWXAySG8iLCJleHAiOjE3NDIxNjAwOTIsIm5iZiI6MCwic3ViIjoicXVpY2tzdGFydC11c2VybmFtZSJ9.ih7my6oXby6yYBfzt5LXHKN5WZU9exIqS8CdpRJRLQI"; */
- console.log("Connecting to room", { token, url });
- const room = new Room({
- // automatically manage subscribed video quality
- adaptiveStream: true,
-
- // optimize publishing bandwidth and CPU for published tracks
- dynacast: true,
-
- // default capture settings
- videoCaptureDefaults: {
- resolution: VideoPresets.h720.resolution,
- },
- });
-
- // pre-warm connection, this can be called as early as your page is loaded
- room.prepareConnection(url, token);
-
- // set up event listeners
- room
- .on(RoomEvent.TrackSubscribed, handleTrackSubscribed)
- .on(RoomEvent.TrackUnsubscribed, handleTrackUnsubscribed)
- .on(RoomEvent.ActiveSpeakersChanged, handleActiveSpeakerChange)
- .on(RoomEvent.Disconnected, handleDisconnect)
- .on(RoomEvent.LocalTrackUnpublished, handleLocalTrackUnpublished);
-
- // connect to room
- await room.connect(url, token);
- console.log("connected to room", room.name);
-
- // publish local camera and mic tracks
- await room.localParticipant.enableCameraAndMicrophone();
-
- function 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();
- }
- }
-
- function handleTrackUnsubscribed(
- track: RemoteTrack,
- publication: RemoteTrackPublication,
- participant: RemoteParticipant,
- ) {
- // remove tracks from all attached elements
- track.detach();
- }
-
- function handleLocalTrackUnpublished(
- publication: LocalTrackPublication,
- participant: LocalParticipant,
- ) {
- // when local tracks are ended, update UI to remove them from rendering
- publication.track?.detach();
- }
-
- function handleActiveSpeakerChange(speakers: Participant[]) {
- // show UI indicators when participant is speaking
- }
-
- function handleDisconnect() {
- console.log("disconnected from room");
- }
- setRoom(room);
+ if (state === "connected") return;
+ connect(selectedRoom);
};
joinRoom();
return () => {
- room?.disconnect();
+ disconnect();
};
- }, [token, connection.isConnected]);
+ }, [connection.isConnected]);
return (
<>
-
-
-
- 1
-
-
-
+
+
+
+ {state === "connected" && (
+
+
+ {connectionQuality === ConnectionQuality.Excellent && }
+ {connectionQuality === ConnectionQuality.Good && }
+ {connectionQuality === ConnectionQuality.Poor && }
+ {connectionQuality === ConnectionQuality.Lost && }
+ {connectionQuality === ConnectionQuality.Unknown && (
+
+ )}
+
+ {remoteParticipants}
+
+
+
+ {ROOMS.map((r) => (
+ -
+
+
+ ))}
+
+
+ )}
+