added HPG VEhicles Mission, Audio settings; mission Context menu

This commit is contained in:
PxlLoewe
2025-05-24 12:46:11 -07:00
parent b2890b3ecc
commit 1ca6007ac5
28 changed files with 680 additions and 369 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
import {
Disc,
@@ -18,10 +18,12 @@ import { useAudioStore } from "_store/audioStore";
import { cn } from "helpers/cn";
import { ConnectionQuality } from "livekit-client";
import { ROOMS } from "_data/livekitRooms";
import { useSession } from "next-auth/react";
export const Audio = () => {
const connection = usePilotConnectionStore();
const [showSource, setShowSource] = useState(false);
const serverSession = useSession();
const {
isTalking,
@@ -46,6 +48,7 @@ export const Audio = () => {
clearTimeout(timeout);
};
}, [source, isTalking]);
useEffect(() => {
const joinRoom = async () => {
if (connection.status != "connected") return;
@@ -64,17 +67,12 @@ export const Audio = () => {
return (
<>
<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
{state === "error" && (
<div className="h-4 flex items-center">{message}</div>
)}
{showSource && source && (
<div className="h-4 flex items-center ml-2">{source}</div>
)}
{state === "error" && <div className="h-4 flex items-center">{message}</div>}
{showSource && source && <div className="h-4 flex items-center ml-2">{source}</div>}
<button
onClick={() => {
if (state === "connected") toggleTalking();
if (state === "error" || state === "disconnected")
connect(selectedRoom);
if (state === "error" || state === "disconnected") connect(selectedRoom);
}}
className={cn(
"btn btn-sm btn-soft border-none hover:bg-inherit",
@@ -82,8 +80,7 @@ export const Audio = () => {
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 === "connecting" && "bg-yellow-500 hover:bg-yellow-500 cursor-default",
)}
>
{state === "connected" && <Mic className="w-5 h-5" />}
@@ -95,24 +92,14 @@ export const Audio = () => {
{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.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>
<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) => (
@@ -126,10 +113,7 @@ export const Audio = () => {
}}
>
{room?.name === r && (
<Disc
className="text-success text-sm absolute left-2"
width={15}
/>
<Disc className="text-success text-sm absolute left-2" width={15} />
)}
<span className="flex-1 text-center">{r}</span>
</button>
@@ -142,10 +126,7 @@ export const Audio = () => {
disconnect();
}}
>
<WifiOff
className="text-error text-sm absolute left-2"
width={15}
/>
<WifiOff className="text-error text-sm absolute left-2" width={15} />
<span className="flex-1 text-center">Disconnect</span>
</button>
</li>