PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Funkspruch unterbrechen design

Browse Source
This commit is contained in:
nocnico
2025-05-24 03:28:07 +02:00
parent b2890b3ecc
commit 1ae84f9d55
2 changed files with 22 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/dispatch/app/_components/Audio.tsx
View File

@@ -39,12 +39,6 @@ export const Audio = () => {
useEffect(() => {
setShowSource(true);
const timeout = setTimeout(() => {
setShowSource(false);
}, 6000);
return () => {
clearTimeout(timeout);
};
}, [source, isTalking]);
useEffect(() => {
const joinRoom = async () => {
@@ -64,17 +58,24 @@ 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>
)}
{state === "error" && <div className="h-4 flex items-center">{message}</div>}
{showSource && source && (
<div className="h-4 flex items-center ml-2">{source}</div>
<div
className="tooltip tooltip-left tooltip-error font-semibold"
data-tip="Funkspruch unterbrechen"
>
<button
className="btn btn-sm btn-soft border-none bg-transparent hover:bg-error"
onClick={() => {}}
>
{source}
</button>
</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 +83,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 +95,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 +116,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 +129,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>