|
|
|
|
@@ -3,7 +3,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
|
|
|
import { BaseNotification } from "_components/customToasts/BaseNotification";
|
|
|
|
|
import { FMS_STATUS_COLORS } from "_helpers/fmsStatusColors";
|
|
|
|
|
import { editConnectedAircraftAPI, getConnectedAircraftsAPI } from "_querys/aircrafts";
|
|
|
|
|
import { getLivekitRooms } from "_querys/livekit";
|
|
|
|
|
import { getStationsAPI } from "_querys/stations";
|
|
|
|
|
import { useAudioStore } from "_store/audioStore";
|
|
|
|
|
import { useMapStore } from "_store/mapStore";
|
|
|
|
|
import { X } from "lucide-react";
|
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
|
@@ -20,6 +22,23 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
|
|
|
|
|
const status5Sounds = useRef<HTMLAudioElement | null>(null);
|
|
|
|
|
const status9Sounds = useRef<HTMLAudioElement | null>(null);
|
|
|
|
|
|
|
|
|
|
const { data: livekitRooms } = useQuery({
|
|
|
|
|
queryKey: ["livekit-rooms"],
|
|
|
|
|
queryFn: () => getLivekitRooms(),
|
|
|
|
|
refetchInterval: 10000,
|
|
|
|
|
});
|
|
|
|
|
const audioRoom = useAudioStore((s) => s.room?.name);
|
|
|
|
|
|
|
|
|
|
const participants =
|
|
|
|
|
livekitRooms?.flatMap((room) =>
|
|
|
|
|
room.participants.map((p) => ({
|
|
|
|
|
...p,
|
|
|
|
|
roomName: room.room.name,
|
|
|
|
|
})),
|
|
|
|
|
) || [];
|
|
|
|
|
|
|
|
|
|
const livekitUser = participants.find((p) => p.attributes.userId === event.data?.userId);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (typeof window !== "undefined") {
|
|
|
|
|
status0Sounds.current = new Audio("/sounds/status-0.mp3");
|
|
|
|
|
@@ -83,6 +102,11 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
|
|
|
|
|
default:
|
|
|
|
|
soundRef = null;
|
|
|
|
|
}
|
|
|
|
|
if (audioRoom !== livekitUser?.roomName) {
|
|
|
|
|
toast.remove(t.id);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (soundRef?.current) {
|
|
|
|
|
soundRef.current.currentTime = 0;
|
|
|
|
|
soundRef.current.volume = 0.7;
|
|
|
|
|
@@ -94,15 +118,15 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
|
|
|
|
|
soundRef.current.currentTime = 0;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}, [event.status]);
|
|
|
|
|
}, [event.status, livekitUser?.roomName, audioRoom, t.id]);
|
|
|
|
|
|
|
|
|
|
if (!connectedAircraft || !station) return null;
|
|
|
|
|
return (
|
|
|
|
|
<BaseNotification>
|
|
|
|
|
<div className="flex flex-row gap-14 items-center">
|
|
|
|
|
<div className="flex flex-row items-center gap-14">
|
|
|
|
|
<p>
|
|
|
|
|
<span
|
|
|
|
|
className="underline mr-1 cursor-pointer font-bold"
|
|
|
|
|
className="mr-1 cursor-pointer font-bold underline"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
if (!connectedAircraft.posLat || !connectedAircraft.posLng) return;
|
|
|
|
|
mapStore.setOpenAircraftMarker({
|
|
|
|
|
@@ -119,12 +143,12 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
|
|
|
|
|
</span>
|
|
|
|
|
sendet Status {event.status}
|
|
|
|
|
</p>
|
|
|
|
|
<div className="flex gap-2 items-center">
|
|
|
|
|
<div className="flex items-center gap-2">
|
|
|
|
|
{QUICK_RESPONSE[String(event.status)]?.map((status) => (
|
|
|
|
|
<button
|
|
|
|
|
key={status}
|
|
|
|
|
className={
|
|
|
|
|
"flex justify-center items-center min-w-10 min-h-10 cursor-pointer text-lg font-bold"
|
|
|
|
|
"flex min-h-10 min-w-10 cursor-pointer items-center justify-center text-lg font-bold"
|
|
|
|
|
}
|
|
|
|
|
style={{
|
|
|
|
|
backgroundColor: FMS_STATUS_COLORS[status],
|
|
|
|
|
|