feat(frontend): add tactical HUD header and GSAP stagger deck to recordings route
This commit is contained in:
asepharyana
@@ -22,9 +22,9 @@ import {
|
|||||||
useRecordings,
|
useRecordings,
|
||||||
useRecordingsWsSync,
|
useRecordingsWsSync,
|
||||||
} from "@/hooks";
|
} from "@/hooks";
|
||||||
|
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||||
import { formatBytes, formatRelativeTime } from "@/lib/format";
|
import { formatBytes, formatRelativeTime } from "@/lib/format";
|
||||||
import type { VoiceRecording } from "@/lib/types";
|
import type { VoiceRecording } from "@/lib/types";
|
||||||
import { staggerDelay } from "@/lib/utils";
|
|
||||||
import { useWebSocket } from "@/lib/ws/context";
|
import { useWebSocket } from "@/lib/ws/context";
|
||||||
|
|
||||||
export function RecordingsView({
|
export function RecordingsView({
|
||||||
@@ -39,6 +39,12 @@ export function RecordingsView({
|
|||||||
const ambient = useAmbient();
|
const ambient = useAmbient();
|
||||||
const [playingId, setPlayingId] = useState<string | null>(null);
|
const [playingId, setPlayingId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const deckRef = useStaggerReveal<HTMLDivElement>(".recording-deck-card", {
|
||||||
|
stagger: 0.05,
|
||||||
|
y: 14,
|
||||||
|
dependencies: [items],
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
ambient.set("signal", 0.3, "recordings");
|
ambient.set("signal", 0.3, "recordings");
|
||||||
}, [ambient]);
|
}, [ambient]);
|
||||||
@@ -83,111 +89,134 @@ export function RecordingsView({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GlassPanel>
|
<div className="space-y-4">
|
||||||
<SectionHeader
|
{/* Tactical HUD Header Bar */}
|
||||||
eyebrow="voice captures"
|
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||||
title="Recordings"
|
<div className="flex items-center gap-3">
|
||||||
action={
|
<div className="relative flex size-3 items-center justify-center">
|
||||||
<span className="mono text-xs text-ink-faint">
|
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
|
||||||
{(items ?? []).length} clips
|
<span className="relative inline-flex size-2 rounded-full bg-signal" />
|
||||||
</span>
|
</div>
|
||||||
}
|
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||||
/>
|
RECORDINGS · TAPE_DECK
|
||||||
{(items ?? []).length === 0 ? (
|
</h1>
|
||||||
<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>
|
</div>
|
||||||
)}
|
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||||
</GlassPanel>
|
<span className="text-ink-faint">CLIPS:</span>
|
||||||
|
<span className="font-bold text-signal">{(items ?? []).length}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<GlassPanel>
|
||||||
|
<SectionHeader
|
||||||
|
eyebrow="voice captures"
|
||||||
|
title="Recordings"
|
||||||
|
action={
|
||||||
|
<span className="mono text-xs text-ink-faint">
|
||||||
|
{(items ?? []).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
|
||||||
|
ref={deckRef}
|
||||||
|
className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
|
||||||
|
>
|
||||||
|
{(items ?? []).map((r) => {
|
||||||
|
const up = uploadStatus(r);
|
||||||
|
const isPlaying = playingId === r.id;
|
||||||
|
return (
|
||||||
|
<GlassCard
|
||||||
|
key={r.id}
|
||||||
|
className={`recording-deck-card 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)]"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user