added Sounds für Livekit
This commit is contained in:
PxlLoewe
206
apps/dispatch/app/_components/Audio/Audio.tsx
Normal file
206
apps/dispatch/app/_components/Audio/Audio.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
|
||||
import {
|
||||
Disc,
|
||||
Mic,
|
||||
PlugZap,
|
||||
ServerCrash,
|
||||
ShieldQuestion,
|
||||
Signal,
|
||||
SignalLow,
|
||||
SignalMedium,
|
||||
WifiOff,
|
||||
ZapOff,
|
||||
} from "lucide-react";
|
||||
import { useAudioStore } from "_store/audioStore";
|
||||
import { cn } from "_helpers/cn";
|
||||
import { ConnectionQuality } from "livekit-client";
|
||||
import { ROOMS } from "_data/livekitRooms";
|
||||
import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { dispatchSocket } from "dispatch/socket";
|
||||
import { useSounds } from "_components/Audio/useSounds";
|
||||
|
||||
export const Audio = () => {
|
||||
const {
|
||||
speakingParticipants,
|
||||
isTalking,
|
||||
toggleTalking,
|
||||
connect,
|
||||
state,
|
||||
connectionQuality,
|
||||
disconnect,
|
||||
remoteParticipants,
|
||||
room,
|
||||
message,
|
||||
removeMessage,
|
||||
} = useAudioStore();
|
||||
const [selectedRoom, setSelectedRoom] = useState<string>("LST_01");
|
||||
useSounds({
|
||||
isReceiving: speakingParticipants.length > 0,
|
||||
isTransmitting: isTalking,
|
||||
unpausedTracks: speakingParticipants,
|
||||
});
|
||||
|
||||
const { selectedStation, status: pilotState } = usePilotConnectionStore((state) => state);
|
||||
|
||||
const { selectedZone, status: dispatcherState } = useDispatchConnectionStore((state) => state);
|
||||
const session = useSession();
|
||||
|
||||
const [recentSpeakers, setRecentSpeakers] = useState<typeof speakingParticipants>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (speakingParticipants.length > 0) {
|
||||
setRecentSpeakers(speakingParticipants);
|
||||
} else if (recentSpeakers.length > 0) {
|
||||
const timeout = setTimeout(() => {
|
||||
setRecentSpeakers([]);
|
||||
}, 10000);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [speakingParticipants]);
|
||||
|
||||
useEffect(() => {
|
||||
if (message && state !== "error") {
|
||||
const timeout = setTimeout(() => {
|
||||
removeMessage();
|
||||
}, 10000);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [message, removeMessage, state]);
|
||||
|
||||
const displayedSpeakers = speakingParticipants.length > 0 ? speakingParticipants : recentSpeakers;
|
||||
|
||||
const canStopOtherSpeakers = dispatcherState === "connected";
|
||||
|
||||
const role =
|
||||
(dispatcherState === "connected" && selectedZone) ||
|
||||
(pilotState == "connected" && selectedStation?.bosCallsignShort) ||
|
||||
session.data?.user?.publicId;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
|
||||
{message && (
|
||||
<div
|
||||
className="tooltip tooltip-left tooltip-warning font-semibold"
|
||||
data-tip="Nachricht entfernen"
|
||||
>
|
||||
<button
|
||||
className={cn("btn btn-sm btn-ghost border-warning bg-transparent ")}
|
||||
onClick={() => {
|
||||
removeMessage();
|
||||
// Probably via socket event to set ppt = false for participant
|
||||
if (!canStopOtherSpeakers) return;
|
||||
speakingParticipants.forEach((p) => {
|
||||
dispatchSocket.emit("stop-other-transmition", {
|
||||
ownRole: role,
|
||||
otherRole: p.attributes.role,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{(displayedSpeakers.length || message) && (
|
||||
<div
|
||||
className={cn(
|
||||
"tooltip-left tooltip-error font-semibold",
|
||||
canStopOtherSpeakers && "tooltip",
|
||||
)}
|
||||
data-tip="Funkspruch unterbrechen"
|
||||
>
|
||||
<button
|
||||
className={cn(
|
||||
"btn btn-sm btn-soft border-none bg-transparent",
|
||||
canStopOtherSpeakers && "hover:bg-error",
|
||||
)}
|
||||
onClick={() => {
|
||||
if (!canStopOtherSpeakers) return;
|
||||
speakingParticipants.forEach((p) => {
|
||||
dispatchSocket.emit("stop-other-transmition", {
|
||||
ownRole: role,
|
||||
otherRole: p.attributes.role,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
{displayedSpeakers.map((p) => p.attributes.role).join(", ") || ""}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
if (state === "connected") toggleTalking();
|
||||
if (!role) return;
|
||||
if (state === "error" || state === "disconnected") connect(selectedRoom, role);
|
||||
}}
|
||||
className={cn(
|
||||
"btn btn-sm btn-soft border-none hover:bg-inherit",
|
||||
!isTalking && "bg-transparent hover:bg-sky-400/20",
|
||||
isTalking && "bg-green-700 hover:bg-green-600",
|
||||
state === "disconnected" && "bg-red-500 hover:bg-red-500",
|
||||
state === "error" && "bg-red-500 hover:bg-red-500",
|
||||
state === "connecting" && "bg-yellow-500 hover:bg-yellow-500 cursor-default",
|
||||
)}
|
||||
>
|
||||
{state === "connected" && <Mic className="w-5 h-5" />}
|
||||
{state === "disconnected" && <WifiOff className="w-5 h-5" />}
|
||||
{state === "connecting" && <PlugZap className="w-5 h-5" />}
|
||||
{state === "error" && <ServerCrash className="w-5 h-5" />}
|
||||
</button>
|
||||
|
||||
{state === "connected" && (
|
||||
<details className="dropdown relative z-[1050]">
|
||||
<summary className="dropdown btn btn-ghost flex items-center gap-1">
|
||||
{connectionQuality === ConnectionQuality.Excellent && <Signal className="w-5 h-5" />}
|
||||
{connectionQuality === ConnectionQuality.Good && <SignalMedium className="w-5 h-5" />}
|
||||
{connectionQuality === ConnectionQuality.Poor && <SignalLow className="w-5 h-5" />}
|
||||
{connectionQuality === ConnectionQuality.Lost && <ZapOff className="w-5 h-5" />}
|
||||
{connectionQuality === ConnectionQuality.Unknown && (
|
||||
<ShieldQuestion className="w-5 h-5" />
|
||||
)}
|
||||
<div className="badge badge-sm badge-soft badge-success">{remoteParticipants}</div>
|
||||
</summary>
|
||||
<ul className="menu dropdown-content bg-base-200 rounded-box z-[1050] w-52 p-2 shadow-sm">
|
||||
{ROOMS.map((r) => (
|
||||
<li key={r}>
|
||||
<button
|
||||
className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
|
||||
onClick={() => {
|
||||
if (!role) return;
|
||||
if (selectedRoom === r) return;
|
||||
setSelectedRoom(r);
|
||||
connect(r, role);
|
||||
}}
|
||||
>
|
||||
{room?.name === r && (
|
||||
<Disc className="text-success text-sm absolute left-2" width={15} />
|
||||
)}
|
||||
<span className="flex-1 text-center">{r}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<button
|
||||
className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
|
||||
onClick={() => {
|
||||
disconnect();
|
||||
}}
|
||||
>
|
||||
<WifiOff className="text-error text-sm absolute left-2" width={15} />
|
||||
<span className="flex-1 text-center">Disconnect</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
90
apps/dispatch/app/_components/Audio/useSounds.ts
Normal file
90
apps/dispatch/app/_components/Audio/useSounds.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
import { useDebounce } from "_helpers/useDebounce";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export const useSounds = ({
|
||||
isReceiving,
|
||||
isTransmitting,
|
||||
unpausedTracks,
|
||||
}: {
|
||||
isReceiving: boolean;
|
||||
isTransmitting: boolean;
|
||||
unpausedTracks: unknown[];
|
||||
}) => {
|
||||
// Sounds as refs
|
||||
const connectionStart = useRef<HTMLAudioElement | null>(null);
|
||||
const connectionEnd = useRef<HTMLAudioElement | null>(null);
|
||||
const ownCallStarted = useRef<HTMLAudioElement | null>(null);
|
||||
const foreignCallStop = useRef<HTMLAudioElement | null>(null);
|
||||
const foreignCallBlocked = useRef<HTMLAudioElement | null>(null);
|
||||
const callToLong = useRef<HTMLAudioElement | null>(null);
|
||||
const adminCall = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!window) return;
|
||||
connectionStart.current = new Audio("/sounds/connection_started_sepura.mp3");
|
||||
connectionEnd.current = new Audio("/sounds/connection_stoped_sepura.mp3");
|
||||
ownCallStarted.current = new Audio("/sounds/call_end_sepura.wav");
|
||||
foreignCallStop.current = new Audio("/sounds/call_end_sepura.wav");
|
||||
foreignCallBlocked.current = new Audio("/sounds/call_blocked_sepura.wav");
|
||||
callToLong.current = new Audio("/sounds/call_to_long.wav");
|
||||
adminCall.current = new Audio("/sounds/call_interrupted_by_admin.mp3");
|
||||
}, []);
|
||||
|
||||
const [soundConnectionStarted, setSoundsConnectionStarted] = useState(false);
|
||||
|
||||
useDebounce(
|
||||
() => {
|
||||
if (!isReceiving && !isTransmitting && soundConnectionStarted) {
|
||||
setSoundsConnectionStarted(false);
|
||||
connectionEnd.current!.currentTime = 0;
|
||||
connectionEnd.current!.play();
|
||||
}
|
||||
},
|
||||
3000,
|
||||
[unpausedTracks, isReceiving, isTransmitting],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if ((isReceiving || isTransmitting) && !soundConnectionStarted) {
|
||||
setSoundsConnectionStarted(true);
|
||||
connectionStart.current!.currentTime = 0;
|
||||
connectionStart.current!.play();
|
||||
ownCallStarted.current!.pause();
|
||||
}
|
||||
}, [isReceiving, isTransmitting, soundConnectionStarted]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isTransmitting && connectionStart.current!.paused) {
|
||||
ownCallStarted.current!.volume = 0.2;
|
||||
ownCallStarted.current!.currentTime = 0;
|
||||
ownCallStarted.current!.play();
|
||||
}
|
||||
}, [isTransmitting]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isReceiving) {
|
||||
foreignCallStop.current!.volume = 0.2;
|
||||
foreignCallStop.current!.currentTime = 0;
|
||||
foreignCallStop.current!.play().catch(() => {});
|
||||
}
|
||||
}, [isReceiving]);
|
||||
|
||||
// Hotmic warning after 30 seconds
|
||||
useEffect(() => {
|
||||
if (isTransmitting) {
|
||||
const timeout = setTimeout(() => {
|
||||
if (isTransmitting) {
|
||||
callToLong.current!.loop = true;
|
||||
callToLong.current!.currentTime = 0;
|
||||
callToLong.current!.volume = 1;
|
||||
callToLong.current!.play();
|
||||
}
|
||||
}, 25000);
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
callToLong.current!.pause();
|
||||
};
|
||||
}
|
||||
}, [isTransmitting]);
|
||||
};
|
||||
Reference in New Issue
Block a user