feat(frontend): voice stage-orbit, media queue-spiral & recordings timeline-ring scenes
This commit is contained in:
asepharyana
@@ -1,5 +1,10 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Media scene — the queue becomes a spiral of nodes on the stage; the
|
||||
* player console (disc + transport + URL bar) floats bottom-left, and
|
||||
* the up-next list docks right.
|
||||
*/
|
||||
import {
|
||||
ListMusic,
|
||||
Play,
|
||||
@@ -9,15 +14,14 @@ import {
|
||||
Square,
|
||||
Volume2,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { Button, GlassPanel, Input, toast } from "@/components/primitives";
|
||||
import { Button, Input, toast } from "@/components/primitives";
|
||||
import { ErrorState, SkeletonHero } from "@/components/shared";
|
||||
import {
|
||||
ErrorState,
|
||||
SectionHeader,
|
||||
SkeletonHero,
|
||||
SkeletonPanel,
|
||||
} from "@/components/shared";
|
||||
useSceneFocusSetter,
|
||||
useScenePublish,
|
||||
} from "@/components/shell/scene-graph-context";
|
||||
import {
|
||||
useMediaLoop,
|
||||
useMediaQueue,
|
||||
@@ -26,11 +30,37 @@ import {
|
||||
useMediaStop,
|
||||
useMediaWsSync,
|
||||
} from "@/hooks";
|
||||
import type { ConstellationGraph } from "@/lib/constellation/graph";
|
||||
import { formatDuration } from "@/lib/format";
|
||||
import type { MediaState } from "@/lib/types";
|
||||
import { staggerDelay } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
function queueGraph(media: MediaState | undefined): ConstellationGraph {
|
||||
const items = (media?.queue ?? []).slice(0, 24);
|
||||
return {
|
||||
nodes: [
|
||||
{
|
||||
id: "now-playing",
|
||||
label: media?.current?.title ?? "media",
|
||||
kind: "guild",
|
||||
value: 1,
|
||||
},
|
||||
...items.map((it, i) => ({
|
||||
id: `track:${i}:${it.source}`,
|
||||
label: it.title,
|
||||
kind: "media" as const,
|
||||
value: Math.max(0.2, 0.8 - i * 0.05),
|
||||
href: undefined,
|
||||
})),
|
||||
],
|
||||
edges: items.map((it, i) => ({
|
||||
source: "now-playing",
|
||||
target: `track:${i}:${it.source}`,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
const ws = useWebSocket();
|
||||
const { data: media, isLoading, error } = useMediaState(initialStatus);
|
||||
@@ -40,6 +70,8 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
const loop = useMediaLoop();
|
||||
useMediaWsSync(ws);
|
||||
const ambient = useAmbient();
|
||||
const publish = useScenePublish();
|
||||
const setFocus = useSceneFocusSetter();
|
||||
|
||||
const [url, setUrl] = useState("");
|
||||
|
||||
@@ -51,6 +83,19 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
0,
|
||||
);
|
||||
|
||||
const graph = useMemo(() => queueGraph(media), [media]);
|
||||
useEffect(() => {
|
||||
publish({ graph, focus: null });
|
||||
}, [graph, publish]);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
publish({ graph: { nodes: [], edges: [] }, focus: null });
|
||||
setFocus(null);
|
||||
},
|
||||
[publish, setFocus],
|
||||
);
|
||||
|
||||
const tone = playing ? "signal" : queueList.length ? "amber" : "signal";
|
||||
useEffect(() => {
|
||||
ambient.set(
|
||||
@@ -80,126 +125,105 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
};
|
||||
|
||||
if (error && !media) return <ErrorState error={error} />;
|
||||
if (!media && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<SkeletonHero />
|
||||
<SkeletonPanel rows={4} />
|
||||
</div>
|
||||
);
|
||||
if (!media && isLoading) return <SkeletonHero />;
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<GlassPanel glow className="relative overflow-hidden">
|
||||
<div className="scan-line absolute inset-x-0 top-0" />
|
||||
<div className="flex flex-col gap-5 sm:flex-row sm:items-center">
|
||||
<div className="min-h-full">
|
||||
{/* Now playing — top-center whisper */}
|
||||
<section
|
||||
className="pointer-events-none absolute inset-x-0 top-16 hidden justify-center px-6 md:flex"
|
||||
aria-label="Now playing"
|
||||
>
|
||||
<div className="pointer-events-auto flex max-w-[52vw] items-center gap-3 rounded-full border border-[var(--color-hairline)] bg-[var(--color-canvas)]/60 px-4 py-2 backdrop-blur-md">
|
||||
<div
|
||||
className={`flex size-32 shrink-0 items-center justify-center rounded-full border border-hairline bg-gradient-to-br from-white/10 to-white/[0.02] ${playing ? "animate-spin-disc" : "animate-spin-disc paused"}`}
|
||||
className={`flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full border border-[var(--color-hairline)] ${playing ? "animate-spin-disc" : ""}`}
|
||||
>
|
||||
<div className="flex size-28 items-center justify-center overflow-hidden rounded-full bg-canvas/60">
|
||||
{current?.thumbnailUrl ? (
|
||||
// biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
|
||||
<img
|
||||
src={current.thumbnailUrl}
|
||||
alt=""
|
||||
className="size-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<ListMusic className="size-10 text-signal" />
|
||||
)}
|
||||
</div>
|
||||
{current?.thumbnailUrl ? (
|
||||
// biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
|
||||
<img
|
||||
src={current.thumbnailUrl}
|
||||
alt=""
|
||||
className="size-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<ListMusic className="size-4 text-signal" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="eyebrow mb-1 flex items-center gap-2">
|
||||
<div className="min-w-0">
|
||||
<p className="eyebrow flex items-center gap-2">
|
||||
{playing ? (
|
||||
<>
|
||||
<span aria-hidden className="flex h-3 items-end gap-[2px]">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<span
|
||||
key={`eq-${i}`}
|
||||
className="w-[3px] animate-eq rounded-full bg-signal"
|
||||
style={{
|
||||
animationDelay: `${i * 160}ms`,
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
<span className="text-signal">Now playing</span>
|
||||
</>
|
||||
) : current ? (
|
||||
"Paused"
|
||||
) : (
|
||||
"Nothing queued"
|
||||
)}
|
||||
</div>
|
||||
<h2 className="display text-balance text-2xl text-ink">
|
||||
{current?.title ?? "Nothing queued"}
|
||||
</h2>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-ink-faint">
|
||||
{current?.source && (
|
||||
<span className="mono truncate">{current.source}</span>
|
||||
)}
|
||||
{current?.mode && (
|
||||
<span className="pill capitalize">{current.mode}</span>
|
||||
)}
|
||||
{formatDuration(current?.durationMs) && (
|
||||
<span className="mono">
|
||||
{formatDuration(current?.durationMs)}
|
||||
<span className="flex h-3 items-end gap-[2px]" aria-hidden>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<span
|
||||
key={`eq-${i}`}
|
||||
className="w-[3px] animate-eq rounded-full bg-signal"
|
||||
style={{ animationDelay: `${i * 160}ms`, height: "100%" }}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onPlay}
|
||||
disabled={queue.isPending}
|
||||
>
|
||||
<Play className="size-4" /> Queue & play
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => skip.mutate()}
|
||||
disabled={skip.isPending}
|
||||
>
|
||||
<SkipForward className="size-4" /> Skip
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => stop.mutate()}
|
||||
disabled={stop.isPending}
|
||||
>
|
||||
<Square className="size-4" /> Stop
|
||||
</Button>
|
||||
<Button
|
||||
variant={media?.loop ? "primary" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => loop.mutate(!media?.loop)}
|
||||
aria-pressed={!!media?.loop}
|
||||
>
|
||||
<Repeat className="size-4" /> Loop
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
{playing ? "Now playing" : current ? "Paused" : "Nothing queued"}
|
||||
</p>
|
||||
<p className="truncate text-sm text-[var(--color-ink)]">
|
||||
{current?.title ?? "Nothing queued"}
|
||||
{formatDuration(current?.durationMs)
|
||||
? ` · ${formatDuration(current?.durationMs)}`
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mt-5 flex flex-wrap items-center gap-3">
|
||||
<div className="relative min-w-0 flex-1">
|
||||
<Input
|
||||
placeholder="Paste a YouTube / music URL…"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && onPlay()}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2.5">
|
||||
<Volume2 className="size-4 text-ink-faint" />
|
||||
<div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/10">
|
||||
{/* Console — bottom-left */}
|
||||
<section
|
||||
className="pointer-events-auto absolute bottom-20 left-5 z-20 w-[min(26rem,92vw)] space-y-2.5 rounded-2xl border border-[var(--color-hairline)] bg-[var(--color-canvas-2)]/75 p-3 backdrop-blur-xl lg:bottom-24"
|
||||
aria-label="Player console"
|
||||
>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="Paste a YouTube / music URL…"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && onPlay()}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onPlay}
|
||||
disabled={queue.isPending}
|
||||
>
|
||||
<Play className="size-4" /> Queue & play
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => skip.mutate()}
|
||||
disabled={skip.isPending}
|
||||
>
|
||||
<SkipForward className="size-4" /> Skip
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => stop.mutate()}
|
||||
disabled={stop.isPending}
|
||||
>
|
||||
<Square className="size-4" /> Stop
|
||||
</Button>
|
||||
<Button
|
||||
variant={media?.loop ? "primary" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => loop.mutate(!media?.loop)}
|
||||
aria-pressed={!!media?.loop}
|
||||
>
|
||||
<Repeat className="size-4" /> Loop
|
||||
</Button>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Volume2 className="size-4 text-[var(--color-ink-faint)]" />
|
||||
<div className="h-1.5 w-20 overflow-hidden rounded-full bg-white/10">
|
||||
<div
|
||||
className="h-full rounded-full bg-signal/70"
|
||||
style={{
|
||||
@@ -207,87 +231,89 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="mono w-9 text-right text-[0.65rem] text-ink-faint">
|
||||
<span className="w-9 text-right font-mono text-[0.65rem] text-[var(--color-ink-faint)]">
|
||||
{Math.round((media?.musicVolume ?? 0) * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</section>
|
||||
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="up next"
|
||||
title="Queue"
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{queueList.length} track{queueList.length === 1 ? "" : "s"}
|
||||
{queueTotal && ` · ${formatDuration(queueTotal)}`}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{queueList.length === 0 ? (
|
||||
<div className="flex flex-col items-center gap-2 py-10 text-center">
|
||||
<Radio className="size-6 text-ink-faint" />
|
||||
<div className="text-sm text-ink-soft">Queue is empty</div>
|
||||
<div className="text-xs text-ink-faint">
|
||||
Paste a URL above to start playback.
|
||||
{/* Up next — right dock */}
|
||||
<section
|
||||
className="pointer-events-auto absolute bottom-20 right-5 top-28 hidden w-[min(24rem,92vw)] flex-col overflow-hidden rounded-2xl border border-[var(--color-hairline)] bg-[var(--color-canvas-2)]/70 backdrop-blur-xl md:flex"
|
||||
aria-label="Up next"
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-[var(--color-hairline)] px-4 py-2.5">
|
||||
<span className="eyebrow">up next</span>
|
||||
<span className="font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
{queueList.length} track{queueList.length === 1 ? "" : "s"}
|
||||
{queueTotal ? ` · ${formatDuration(queueTotal)}` : ""}
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-2">
|
||||
{queueList.length === 0 ? (
|
||||
<div className="flex flex-col items-center gap-2 py-10 text-center">
|
||||
<Radio className="size-6 text-[var(--color-ink-faint)]" />
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
Queue is empty
|
||||
</p>
|
||||
<p className="font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
Paste a URL to start playback.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{queueList.map((item, i) => {
|
||||
const isNext = i === 0 && playing;
|
||||
return (
|
||||
<div
|
||||
key={`${item.source}-${i}`}
|
||||
className={`animate-stagger flex items-center gap-3 rounded-[10px] border px-3 py-2.5 ${
|
||||
isNext
|
||||
? "border-signal/40 bg-signal/[0.07]"
|
||||
: "border-hairline bg-white/5"
|
||||
}`}
|
||||
style={staggerDelay(i)}
|
||||
>
|
||||
<span className="mono w-5 text-ink-faint">{i + 1}</span>
|
||||
{item.thumbnailUrl ? (
|
||||
// biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
|
||||
<img
|
||||
src={item.thumbnailUrl}
|
||||
alt=""
|
||||
className="size-9 shrink-0 rounded-md object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<span className="flex size-9 shrink-0 items-center justify-center rounded-md border border-hairline bg-white/5">
|
||||
<ListMusic className="size-4 text-ink-faint" />
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
{queueList.map((item, i) => {
|
||||
const isNext = i === 0 && playing;
|
||||
return (
|
||||
<div
|
||||
key={`${item.source}-${i}`}
|
||||
className={`animate-stagger flex items-center gap-3 rounded-xl border px-3 py-2 ${
|
||||
isNext
|
||||
? "border-signal/40 bg-signal/[0.07]"
|
||||
: "border-[var(--color-hairline)]"
|
||||
}`}
|
||||
style={staggerDelay(i)}
|
||||
>
|
||||
<span className="w-5 font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
{i + 1}
|
||||
</span>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm text-ink">
|
||||
{item.title}
|
||||
{item.thumbnailUrl ? (
|
||||
// biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
|
||||
<img
|
||||
src={item.thumbnailUrl}
|
||||
alt=""
|
||||
className="size-9 shrink-0 rounded-md object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<span className="flex size-9 shrink-0 items-center justify-center rounded-md border border-[var(--color-hairline)]">
|
||||
<ListMusic className="size-4 text-[var(--color-ink-faint)]" />
|
||||
</span>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm text-[var(--color-ink)]">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="truncate font-mono text-[0.65rem] text-[var(--color-ink-faint)]">
|
||||
{item.source}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mono truncate text-[0.65rem] text-ink-faint">
|
||||
{item.source}
|
||||
</div>
|
||||
</div>
|
||||
{isNext && (
|
||||
<span className="inline-flex shrink-0 items-center gap-1 rounded-full border border-signal/40 bg-signal/10 px-2 py-0.5 text-[0.6rem] font-medium text-signal">
|
||||
up next
|
||||
</span>
|
||||
)}
|
||||
<span className="pill hidden capitalize sm:inline-flex">
|
||||
{item.mode ?? "music"}
|
||||
</span>
|
||||
{formatDuration(item.durationMs) && (
|
||||
<span className="mono w-10 text-right text-[0.65rem] text-ink-faint">
|
||||
{isNext ? (
|
||||
<span className="shrink-0 rounded-full border border-signal/40 bg-signal/10 px-2 py-0.5 font-mono text-[0.6rem] text-signal">
|
||||
up next
|
||||
</span>
|
||||
) : null}
|
||||
<span className="w-10 text-right font-mono text-[0.65rem] text-[var(--color-ink-faint)]">
|
||||
{formatDuration(item.durationMs)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</GlassPanel>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Recordings scene — voice clips orbit as a timeline ring on the stage;
|
||||
* the clip archive docks right with inline audio players, playing clip
|
||||
* highlighted both in the dock and on the sky.
|
||||
*/
|
||||
import { Download, Hash, Headphones, Loader2, Trash2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
GlassCard,
|
||||
GlassPanel,
|
||||
Skeleton,
|
||||
toast,
|
||||
} from "@/components/primitives";
|
||||
import { EmptyState, ErrorState, SectionHeader } from "@/components/shared";
|
||||
import { EmptyState, ErrorState } from "@/components/shared";
|
||||
import {
|
||||
useSceneFocusSetter,
|
||||
useScenePublish,
|
||||
} from "@/components/shell/scene-graph-context";
|
||||
import {
|
||||
NowPlayingChip,
|
||||
RecordingAudioPlayer,
|
||||
@@ -22,11 +29,29 @@ import {
|
||||
useRecordings,
|
||||
useRecordingsWsSync,
|
||||
} from "@/hooks";
|
||||
import type { ConstellationGraph } from "@/lib/constellation/graph";
|
||||
import { formatBytes, formatRelativeTime } from "@/lib/format";
|
||||
import type { VoiceRecording } from "@/lib/types";
|
||||
import { staggerDelay } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
function recordingsGraph(items: VoiceRecording[]): ConstellationGraph {
|
||||
const recent = items.slice(0, 28);
|
||||
return {
|
||||
nodes: [
|
||||
{ id: "archive", label: "archive", kind: "guild", value: 1 },
|
||||
...recent.map((r) => ({
|
||||
id: `rec:${r.id}`,
|
||||
label: r.username,
|
||||
kind: "media" as const,
|
||||
value: 0.5,
|
||||
href: undefined,
|
||||
})),
|
||||
],
|
||||
edges: recent.map((r) => ({ source: "archive", target: `rec:${r.id}` })),
|
||||
};
|
||||
}
|
||||
|
||||
export function RecordingsView({
|
||||
initialItems,
|
||||
}: {
|
||||
@@ -37,8 +62,25 @@ export function RecordingsView({
|
||||
const del = useDeleteRecording();
|
||||
useRecordingsWsSync(ws);
|
||||
const ambient = useAmbient();
|
||||
const publish = useScenePublish();
|
||||
const setFocus = useSceneFocusSetter();
|
||||
const [playingId, setPlayingId] = useState<string | null>(null);
|
||||
|
||||
const list = items ?? [];
|
||||
|
||||
const graph = useMemo(() => recordingsGraph(list), [list]);
|
||||
useEffect(() => {
|
||||
publish({ graph, focus: playingId ? `rec:${playingId}` : null });
|
||||
}, [graph, playingId, publish]);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
publish({ graph: { nodes: [], edges: [] }, focus: null });
|
||||
setFocus(null);
|
||||
},
|
||||
[publish, setFocus],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
ambient.set("signal", 0.3, "recordings");
|
||||
}, [ambient]);
|
||||
@@ -59,14 +101,17 @@ export function RecordingsView({
|
||||
if (error && !items) return <ErrorState error={error} />;
|
||||
if (!items && isLoading)
|
||||
return (
|
||||
<GlassPanel>
|
||||
<div className="pointer-events-auto absolute inset-x-4 bottom-24 top-44 overflow-y-auto rounded-2xl border border-[var(--color-hairline)] bg-[var(--color-canvas-2)]/70 p-4 backdrop-blur-xl md:inset-x-auto md:right-5 md:top-28 md:w-[min(30rem,92vw)]">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-3 w-12" />
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<GlassCard key={i} className="flex flex-col gap-3">
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-col gap-3 rounded-xl border border-[var(--color-hairline)] p-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="size-9 rounded-full" />
|
||||
<div className="flex-1 space-y-2">
|
||||
@@ -75,118 +120,168 @@ export function RecordingsView({
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-9 w-full" />
|
||||
</GlassCard>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="voice captures"
|
||||
title="Recordings"
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{(items ?? []).length} clips
|
||||
<div className="min-h-full">
|
||||
{/* Archive dock — right */}
|
||||
<section
|
||||
className="pointer-events-auto absolute bottom-20 right-5 top-16 hidden w-[min(30rem,92vw)] flex-col overflow-hidden rounded-2xl border border-[var(--color-hairline)] bg-[var(--color-canvas-2)]/70 backdrop-blur-xl md:flex"
|
||||
aria-label="Voice captures"
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-[var(--color-hairline)] px-4 py-2.5">
|
||||
<span className="eyebrow">voice captures</span>
|
||||
<span className="font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
{list.length} clips
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{(items ?? []).length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<Headphones className="size-7" />}
|
||||
title="No recordings"
|
||||
description="Voice clips captured by the bot appear here."
|
||||
/>
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{(items ?? []).map((r, i) => {
|
||||
const up = uploadStatus(r);
|
||||
const isPlaying = playingId === r.id;
|
||||
return (
|
||||
<GlassCard
|
||||
key={r.id}
|
||||
className={`animate-stagger flex flex-col gap-3 transition-colors hover:bg-white/[0.06] ${
|
||||
isPlaying
|
||||
? "border-signal/40 shadow-[0_0_36px_-16px_var(--color-signal-glow)]"
|
||||
: ""
|
||||
}`}
|
||||
style={staggerDelay(i)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar src={r.avatar_url} name={r.username} size={38} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-semibold text-ink">
|
||||
{r.username}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-[0.65rem] text-ink-faint">
|
||||
<Hash className="size-3" />
|
||||
<span className="truncate">
|
||||
{r.channel_name ?? "voice"}
|
||||
</span>
|
||||
<span className="text-ink-faint/60">·</span>
|
||||
<span className="mono">
|
||||
{formatRelativeTime(r.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{isPlaying && <NowPlayingChip />}
|
||||
{up && !isPlaying && <Badge tone={up.tone}>{up.label}</Badge>}
|
||||
<span className="mono text-[0.65rem] text-ink-faint">
|
||||
{formatBytes(r.size_bytes)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{r.download_url ? (
|
||||
<RecordingAudioPlayer
|
||||
src={r.download_url}
|
||||
label={`Voice recording by ${r.username}`}
|
||||
onPlayStateChange={(active) =>
|
||||
setPlayingId((prev) => {
|
||||
if (active) return r.id;
|
||||
// Only clear if THIS card was the one playing.
|
||||
return prev === r.id ? null : prev;
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-faint">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
{r.upload_status === "pending"
|
||||
? "Upload pending…"
|
||||
: r.upload_error
|
||||
? r.upload_error
|
||||
: "Processing…"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{r.download_url && (
|
||||
<a
|
||||
href={r.download_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-1.5 rounded-[9px] border border-hairline px-2.5 py-1.5 text-xs text-ink-soft hover:text-ink hover:border-signal/40"
|
||||
>
|
||||
<Download className="size-3.5" /> Download
|
||||
</a>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-auto"
|
||||
onClick={() => onDelete(r.id)}
|
||||
disabled={del.isPending}
|
||||
>
|
||||
<Trash2 className="size-3.5" /> Delete
|
||||
</Button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</GlassPanel>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-2.5">
|
||||
{list.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<Headphones className="size-6" />}
|
||||
title="No recordings"
|
||||
description="Voice clips captured by the bot appear here."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{list.map((r, i) => {
|
||||
const up = uploadStatus(r);
|
||||
const isPlaying = playingId === r.id;
|
||||
return (
|
||||
<article
|
||||
key={r.id}
|
||||
className={`animate-stagger flex flex-col gap-2.5 rounded-xl border p-3 transition-colors ${
|
||||
isPlaying
|
||||
? "border-signal/40 shadow-[0_0_36px_-16px_var(--color-signal-glow)]"
|
||||
: "border-[var(--color-hairline)] hover:bg-white/[0.04]"
|
||||
}`}
|
||||
style={staggerDelay(i)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar src={r.avatar_url} name={r.username} size={34} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold text-[var(--color-ink)]">
|
||||
{r.username}
|
||||
</p>
|
||||
<p className="flex items-center gap-1.5 font-mono text-[0.65rem] text-[var(--color-ink-faint)]">
|
||||
<Hash className="size-3" />
|
||||
<span className="truncate">
|
||||
{r.channel_name ?? "voice"}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span>{formatRelativeTime(r.created_at)}</span>
|
||||
</p>
|
||||
</div>
|
||||
{isPlaying ? <NowPlayingChip /> : null}
|
||||
{up && !isPlaying ? (
|
||||
<Badge tone={up.tone}>{up.label}</Badge>
|
||||
) : null}
|
||||
<span className="font-mono text-[0.65rem] text-[var(--color-ink-faint)]">
|
||||
{formatBytes(r.size_bytes)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{r.download_url ? (
|
||||
<RecordingAudioPlayer
|
||||
src={r.download_url}
|
||||
label={`Voice recording by ${r.username}`}
|
||||
onPlayStateChange={(active) =>
|
||||
setPlayingId((prev) => {
|
||||
if (active) return r.id;
|
||||
return prev === r.id ? null : prev;
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<p className="flex items-center gap-1.5 rounded-lg px-1 py-1 font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
{r.upload_status === "pending"
|
||||
? "Upload pending…"
|
||||
: r.upload_error
|
||||
? r.upload_error
|
||||
: "Processing…"}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{r.download_url ? (
|
||||
<a
|
||||
href={r.download_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-hairline)] px-2.5 py-1 font-mono text-xs text-[var(--color-ink-soft)] hover:border-signal/40 hover:text-[var(--color-ink)]"
|
||||
>
|
||||
<Download className="size-3.5" /> Download
|
||||
</a>
|
||||
) : null}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-auto"
|
||||
onClick={() => onDelete(r.id)}
|
||||
disabled={del.isPending}
|
||||
>
|
||||
<Trash2 className="size-3.5" /> Delete
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mobile dock */}
|
||||
<section
|
||||
className="pointer-events-auto absolute inset-x-4 bottom-24 top-44 overflow-y-auto rounded-2xl border border-[var(--color-hairline)] bg-[var(--color-canvas-2)]/80 p-2.5 backdrop-blur-xl md:hidden"
|
||||
aria-label="Voice captures mobile"
|
||||
>
|
||||
{list.length === 0 ? (
|
||||
<EmptyState title="No recordings" />
|
||||
) : (
|
||||
list.map((r) => (
|
||||
<article
|
||||
key={r.id}
|
||||
className={`mb-2 flex flex-col gap-2 rounded-xl border p-3 ${
|
||||
playingId === r.id
|
||||
? "border-signal/40"
|
||||
: "border-[var(--color-hairline)]"
|
||||
}`}
|
||||
>
|
||||
<p className="truncate text-sm font-semibold text-[var(--color-ink)]">
|
||||
{r.username} · {formatRelativeTime(r.created_at)}
|
||||
</p>
|
||||
{r.download_url ? (
|
||||
<RecordingAudioPlayer
|
||||
src={r.download_url}
|
||||
label={`Voice recording by ${r.username}`}
|
||||
onPlayStateChange={(active) =>
|
||||
setPlayingId((prev) =>
|
||||
active ? r.id : prev === r.id ? null : prev,
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<p className="font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
processing…
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Hint */}
|
||||
<p className="pointer-events-none absolute bottom-24 left-5 hidden max-w-xs font-mono text-xs text-[var(--color-ink-faint)] lg:block">
|
||||
setiap klip adalah simpel di cincin timeline — yang sedang play menyala
|
||||
di langit
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Voice scene — the stage node sits center; live speakers orbit it with
|
||||
* glow (published to the constellation). Controls float bottom-left,
|
||||
* connections whisper right, and the mic/listen meters stay docked.
|
||||
*/
|
||||
import {
|
||||
Headphones,
|
||||
Mic,
|
||||
@@ -9,17 +14,16 @@ import {
|
||||
Volume2,
|
||||
Waves,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { Equalizer } from "@/components/charts";
|
||||
import { Button, GlassPanel, toast } from "@/components/primitives";
|
||||
import {
|
||||
EmptyState,
|
||||
ErrorState,
|
||||
SectionHeader,
|
||||
SkeletonPanel,
|
||||
} from "@/components/shared";
|
||||
import { Button, toast } from "@/components/primitives";
|
||||
import { EmptyState, ErrorState } from "@/components/shared";
|
||||
import { GuildChannelPicker } from "@/components/shared/guild-picker";
|
||||
import {
|
||||
useSceneFocusSetter,
|
||||
useScenePublish,
|
||||
} from "@/components/shell/scene-graph-context";
|
||||
import { VoiceStage } from "@/components/voice/voice-stage";
|
||||
import {
|
||||
useMicTransmit,
|
||||
@@ -29,9 +33,37 @@ import {
|
||||
useVoiceListen,
|
||||
useVoiceStatus,
|
||||
} from "@/hooks";
|
||||
import type { ConstellationGraph } from "@/lib/constellation/graph";
|
||||
import type { Guild, VoiceStatus } from "@/lib/types";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
function speakerGraph(
|
||||
speakers: {
|
||||
userId: string;
|
||||
username: string;
|
||||
speaking: boolean;
|
||||
level?: number;
|
||||
}[],
|
||||
): ConstellationGraph {
|
||||
return {
|
||||
nodes: [
|
||||
{ id: "stage", label: "voice stage", kind: "guild", value: 1 },
|
||||
...speakers.map((sp) => ({
|
||||
id: `speaker:${sp.userId}`,
|
||||
label: sp.username,
|
||||
kind: "speaker" as const,
|
||||
value: sp.speaking ? 0.8 : 0.4,
|
||||
href: undefined,
|
||||
meta: { speaking: sp.speaking },
|
||||
})),
|
||||
],
|
||||
edges: speakers.map((sp) => ({
|
||||
source: "stage",
|
||||
target: `speaker:${sp.userId}`,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
export function VoiceView({
|
||||
initialStatus,
|
||||
initialGuilds,
|
||||
@@ -47,6 +79,8 @@ export function VoiceView({
|
||||
const listen = useVoiceListen(ws);
|
||||
const { speakers, subscribe } = useSpeakers(initialStatus?.activeSpeakers);
|
||||
const ambient = useAmbient();
|
||||
const publish = useScenePublish();
|
||||
const setFocus = useSceneFocusSetter();
|
||||
|
||||
const [guildId, setGuildId] = useState<string | null>(
|
||||
initialStatus?.activeGuildId ?? initialGuilds?.[0]?.id ?? null,
|
||||
@@ -63,6 +97,19 @@ export function VoiceView({
|
||||
return unsub;
|
||||
}, [subscribe, ws]);
|
||||
|
||||
const graph = useMemo(() => speakerGraph(speakers), [speakers]);
|
||||
useEffect(() => {
|
||||
publish({ graph, focus: null });
|
||||
}, [graph, publish]);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
publish({ graph: { nodes: [], edges: [] }, focus: null });
|
||||
setFocus(null);
|
||||
},
|
||||
[publish, setFocus],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (status?.connected) ambient.set("signal", 0.55, "voice live");
|
||||
else ambient.set("vermilion", 0.35, "voice idle");
|
||||
@@ -71,13 +118,9 @@ export function VoiceView({
|
||||
if (error && !status) return <ErrorState error={error} />;
|
||||
if (!status && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<SkeletonPanel rows={2} />
|
||||
<div className="grid gap-5 lg:grid-cols-3">
|
||||
<SkeletonPanel className="lg:col-span-2" rows={4} />
|
||||
<SkeletonPanel rows={4} />
|
||||
</div>
|
||||
</div>
|
||||
<p className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-center font-mono text-sm text-[var(--color-ink-faint)]">
|
||||
menyetel ulang stage…
|
||||
</p>
|
||||
);
|
||||
|
||||
const connected = status?.connected ?? false;
|
||||
@@ -118,43 +161,94 @@ export function VoiceView({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<GlassPanel>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<GuildChannelPicker
|
||||
mode="voice"
|
||||
guildsInitial={initialGuilds}
|
||||
guildId={guildId}
|
||||
channelId={channelId}
|
||||
onChange={(g, c) => {
|
||||
setGuildId(g);
|
||||
setChannelId(c);
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
{connected ? (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => disconnect.mutate()}
|
||||
disabled={disconnect.isPending}
|
||||
>
|
||||
<PhoneOff className="size-4" /> Disconnect
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onConnect}
|
||||
disabled={connect.isPending}
|
||||
>
|
||||
<Radio className="size-4" /> Connect
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-h-full">
|
||||
{/* Stage presence — top-center whisper */}
|
||||
<section
|
||||
className="pointer-events-none absolute inset-x-0 top-16 hidden justify-center md:flex"
|
||||
aria-label="Live speakers"
|
||||
>
|
||||
<div className="pointer-events-auto flex max-w-[60vw] flex-wrap justify-center gap-2">
|
||||
{speakers.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<MicOff className="size-6" />}
|
||||
title={connected ? "Silent right now" : "Not connected"}
|
||||
description={
|
||||
connected
|
||||
? "Speakers appear as they talk."
|
||||
: "Connect to a voice channel to see presence."
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<VoiceStage speakers={speakers} />
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
{/* Connections — right */}
|
||||
<section
|
||||
className="pointer-events-auto absolute right-5 top-16 hidden w-64 md:block"
|
||||
aria-label="Connections"
|
||||
>
|
||||
<p className="eyebrow mb-2">links · {speakers.length} present</p>
|
||||
<div className="space-y-1.5">
|
||||
{(status?.connections ?? []).map((c) => (
|
||||
<div
|
||||
key={`${c.guildId}-${c.channelId}`}
|
||||
className="flex items-center gap-2 rounded-full border border-[var(--color-hairline)] bg-[var(--color-canvas)]/55 px-3 py-1.5 font-mono text-xs text-[var(--color-ink-soft)] backdrop-blur-md"
|
||||
>
|
||||
<span className="size-2 rounded-full bg-signal" />
|
||||
<span className="flex-1 truncate">{c.channelName}</span>
|
||||
<span className="text-[var(--color-ink-faint)]">
|
||||
{new Date(c.connectedAt).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{(status?.connections ?? []).length === 0 ? (
|
||||
<p className="font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
no active links
|
||||
</p>
|
||||
) : null}
|
||||
<p className="pt-1 font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
channel: {status?.activeChannelName ?? "—"}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Console — bottom-left */}
|
||||
<section
|
||||
className="pointer-events-auto absolute bottom-20 left-5 z-20 w-[min(24rem,92vw)] space-y-2.5 rounded-2xl border border-[var(--color-hairline)] bg-[var(--color-canvas-2)]/75 p-3 backdrop-blur-xl lg:bottom-24"
|
||||
aria-label="Voice console"
|
||||
>
|
||||
<GuildChannelPicker
|
||||
mode="voice"
|
||||
guildsInitial={initialGuilds}
|
||||
guildId={guildId}
|
||||
channelId={channelId}
|
||||
onChange={(g, c) => {
|
||||
setGuildId(g);
|
||||
setChannelId(c);
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
{connected ? (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => disconnect.mutate()}
|
||||
disabled={disconnect.isPending}
|
||||
>
|
||||
<PhoneOff className="size-4" /> Disconnect
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onConnect}
|
||||
disabled={connect.isPending}
|
||||
>
|
||||
<Radio className="size-4" /> Connect
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant={micOn ? "primary" : "outline"}
|
||||
size="sm"
|
||||
@@ -165,16 +259,6 @@ export function VoiceView({
|
||||
{micOn ? <Mic className="size-4" /> : <MicOff className="size-4" />}
|
||||
{micOn ? "Mic live" : "Push-to-talk"}
|
||||
</Button>
|
||||
{micOn && (
|
||||
<div
|
||||
className="flex items-center gap-2 rounded-[10px] border border-signal/30 bg-signal/[0.06] px-3 py-1.5"
|
||||
role="status"
|
||||
aria-label="Microphone level meter"
|
||||
>
|
||||
<Mic className="size-4 text-signal" />
|
||||
<Equalizer bars={micBars} className="w-28" />
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant={listen.active ? "primary" : "outline"}
|
||||
size="sm"
|
||||
@@ -187,125 +271,62 @@ export function VoiceView({
|
||||
)}
|
||||
{listen.active ? "Listening" : "Listen in"}
|
||||
</Button>
|
||||
{listen.active && (
|
||||
<div className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-1.5">
|
||||
<Waves className="size-4 text-signal" />
|
||||
<Equalizer bars={listenBars} className="w-40" />
|
||||
</div>
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<label className="flex items-center gap-2 text-xs text-ink-faint">
|
||||
<MicOff className="size-3.5" />
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={micVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setMicVol(v);
|
||||
mic.setVolume(v);
|
||||
}}
|
||||
aria-label="Mic transmit volume"
|
||||
className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
|
||||
/>
|
||||
<span className="mono w-8 text-right">{micVol}%</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-xs text-ink-faint">
|
||||
<Volume2 className="size-3.5" />
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={listenVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setListenVol(v);
|
||||
listen.setVolume(v);
|
||||
}}
|
||||
aria-label="Listen volume"
|
||||
className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
|
||||
/>
|
||||
<span className="mono w-8 text-right">{listenVol}%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<div className="grid gap-5 lg:grid-cols-3">
|
||||
<GlassPanel className="lg:col-span-2">
|
||||
<SectionHeader
|
||||
eyebrow="stage"
|
||||
title="Live speakers"
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{speakers.length} present
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{speakers.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<MicOff className="size-7" />}
|
||||
title={connected ? "Silent right now" : "Not connected"}
|
||||
description={
|
||||
connected
|
||||
? "Speakers appear as they talk."
|
||||
: "Connect to a voice channel to see presence."
|
||||
}
|
||||
{micOn ? (
|
||||
<div
|
||||
className="flex items-center gap-2 px-1"
|
||||
role="status"
|
||||
aria-label="Microphone level meter"
|
||||
>
|
||||
<Mic className="size-3.5 text-signal" />
|
||||
<Equalizer bars={micBars} className="w-28" />
|
||||
</div>
|
||||
) : null}
|
||||
{listen.active ? (
|
||||
<div className="flex items-center gap-2 px-1">
|
||||
<Waves className="size-3.5 text-signal" />
|
||||
<Equalizer bars={listenBars} className="w-40" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center gap-4 pt-1">
|
||||
<label className="flex items-center gap-2 font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
<MicOff className="size-3.5" />
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={micVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setMicVol(v);
|
||||
mic.setVolume(v);
|
||||
}}
|
||||
aria-label="Mic transmit volume"
|
||||
className="h-1 w-20 cursor-pointer accent-[var(--color-signal)]"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<VoiceStage speakers={speakers} />
|
||||
<div className="mt-2 flex flex-wrap justify-center gap-2">
|
||||
{speakers.map((sp) => (
|
||||
<span
|
||||
key={sp.userId}
|
||||
className={`mono flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${
|
||||
sp.speaking
|
||||
? "border-signal/40 bg-signal/10 text-signal"
|
||||
: "border-hairline bg-white/5 text-ink-soft"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`size-1.5 rounded-full ${sp.speaking ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
|
||||
/>
|
||||
{sp.username}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel>
|
||||
<SectionHeader eyebrow="links" title="Connections" />
|
||||
<div className="space-y-2">
|
||||
{(status?.connections ?? []).map((c) => (
|
||||
<div
|
||||
key={`${c.guildId}-${c.channelId}`}
|
||||
className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="size-2 rounded-full bg-signal" />
|
||||
<span className="flex-1 truncate text-ink-soft">
|
||||
{c.channelName}
|
||||
</span>
|
||||
<span className="mono text-[0.6rem] text-ink-faint">
|
||||
{new Date(c.connectedAt).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{(status?.connections ?? []).length === 0 && (
|
||||
<div className="py-6 text-center text-xs text-ink-faint">
|
||||
No active links
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-soft">
|
||||
<span className="mono text-ink-faint">channel</span>{" "}
|
||||
{status?.activeChannelName ?? "—"}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
<span className="w-8 text-right">{micVol}%</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 font-mono text-xs text-[var(--color-ink-faint)]">
|
||||
<Volume2 className="size-3.5" />
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={listenVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setListenVol(v);
|
||||
listen.setVolume(v);
|
||||
}}
|
||||
aria-label="Listen volume"
|
||||
className="h-1 w-20 cursor-pointer accent-[var(--color-signal)]"
|
||||
/>
|
||||
<span className="w-8 text-right">{listenVol}%</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user