feat(frontend): revamp UI to Linear Precision Clean Dark with GSAP micro-interactions
This commit is contained in:
asepharyana committed
1 parent
c3165ed702
commit
29f59fd91f
13 files changed
+987
-1767
No files matched your search
@@ -16,6 +16,7 @@ import { Button, GlassPanel, Input, toast } from "@/components/primitives";
|
||||
import {
|
||||
ErrorState,
|
||||
PageTransition,
|
||||
SectionHeader,
|
||||
SkeletonHero,
|
||||
SkeletonPanel,
|
||||
} from "@/components/shared";
|
||||
@@ -52,14 +53,10 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
const playing = media?.playing ?? false;
|
||||
const current = media?.current ?? null;
|
||||
const queueList = media?.queue ?? [];
|
||||
const queueTotal = queueList.reduce(
|
||||
(acc, it) => acc + (it.durationMs ?? 0),
|
||||
0,
|
||||
);
|
||||
|
||||
const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", {
|
||||
stagger: 0.06,
|
||||
y: 16,
|
||||
stagger: 0.04,
|
||||
y: 8,
|
||||
dependencies: [playing, queueList.length],
|
||||
});
|
||||
|
||||
@@ -67,21 +64,21 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
useEffect(() => {
|
||||
ambient.set(
|
||||
tone,
|
||||
playing ? 0.5 : 0.25,
|
||||
playing ? "now playing" : "media idle",
|
||||
playing ? 0.45 : 0.2,
|
||||
playing ? "playing stream" : "media ready",
|
||||
);
|
||||
}, [tone, playing, ambient]);
|
||||
|
||||
const onPlay = async () => {
|
||||
const u = url.trim();
|
||||
if (!u) {
|
||||
toast({ title: "Enter a media URL", tone: "vermilion" });
|
||||
toast({ title: "Enter media URL", tone: "vermilion" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await queue.mutateAsync({ url: u, mode: "music" });
|
||||
setUrl("");
|
||||
toast({ title: "Queued track", tone: "signal" });
|
||||
toast({ title: "Track queued", tone: "signal" });
|
||||
} catch (e) {
|
||||
toast({
|
||||
title: "Queue failed",
|
||||
@@ -95,205 +92,151 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
return <ErrorState error={error} onRetry={() => void mutate()} />;
|
||||
if (!media && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-4">
|
||||
<SkeletonHero />
|
||||
<SkeletonPanel rows={4} />
|
||||
<SkeletonPanel rows={3} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const mockLevels = playing
|
||||
? [0.4, 0.7, 0.9, 0.6, 0.8, 0.5, 0.9, 0.7, 0.4, 0.8, 0.6, 0.9]
|
||||
: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1];
|
||||
: [0.08, 0.08, 0.08, 0.08, 0.08, 0.08];
|
||||
|
||||
return (
|
||||
<PageTransition>
|
||||
<div ref={mediaRef} className="space-y-5">
|
||||
{/* Top Media Matrix Stage */}
|
||||
<div className="media-tile relative overflow-hidden rounded-xl border border-hairline/80 bg-surface/40 p-6 shadow-2xl backdrop-blur-xl">
|
||||
{/* Spatial Grid Header */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 border-b border-hairline/60 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-9 items-center justify-center rounded-lg bg-canvas-2 border border-hairline text-signal shadow-inner">
|
||||
<Disc
|
||||
className={`size-5 ${playing ? "animate-spin-disc text-signal" : "text-ink-faint"}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-mono text-sm font-bold tracking-widest text-ink uppercase">
|
||||
MEDIA FREQUENCY DECK
|
||||
</h1>
|
||||
<div className="font-mono text-[11px] text-ink-faint">
|
||||
{playing
|
||||
? "STREAM_ACTIVE · 48KHZ STEREO"
|
||||
: "DECK_IDLE · STANDBY"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs font-semibold ${playing ? "bg-signal/10 text-signal border border-signal/30" : "bg-surface text-ink-faint border border-hairline"}`}
|
||||
>
|
||||
<span
|
||||
className={`size-1.5 rounded-full ${playing ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
|
||||
/>
|
||||
{playing ? "TRANSMITTING" : "STANDBY"}
|
||||
</span>
|
||||
</div>
|
||||
<div ref={mediaRef} className="space-y-4">
|
||||
{/* Precision Sub-Header Bar */}
|
||||
<div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
playing
|
||||
? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
|
||||
: "bg-[#8a8f98]"
|
||||
}`}
|
||||
/>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
|
||||
Audio Engine · Media Gateway
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Player Core View */}
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-12 items-center">
|
||||
{/* Vinyl & Visualizer Stage */}
|
||||
<div className="lg:col-span-5 flex flex-col items-center justify-center">
|
||||
<div className="relative flex size-44 items-center justify-center rounded-full border-2 border-dashed border-hairline/60 bg-canvas-2 shadow-2xl">
|
||||
<div
|
||||
className={`absolute inset-2 rounded-full border border-hairline/30 ${playing ? "animate-spin-disc" : ""}`}
|
||||
/>
|
||||
{current?.thumbnailUrl ? (
|
||||
<div
|
||||
className="size-32 rounded-full bg-cover bg-center border-2 border-hairline/80 shadow-lg"
|
||||
style={{ backgroundImage: `url(${current.thumbnailUrl})` }}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex size-32 items-center justify-center rounded-full bg-surface border border-hairline">
|
||||
<ListMusic className="size-12 text-ink-faint" />
|
||||
</div>
|
||||
)}
|
||||
{playing && (
|
||||
<div className="absolute -inset-2 rounded-full ring-2 ring-signal/40 animate-pulse-ring pointer-events-none" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Track Telemetry & Controls */}
|
||||
<div className="lg:col-span-7 space-y-4">
|
||||
<div>
|
||||
<div className="font-mono text-[10px] font-bold tracking-widest text-signal uppercase">
|
||||
{current ? "CURRENT TRANSMISSION" : "DECK UNLOADED"}
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-ink mt-1 truncate">
|
||||
{current?.title ?? "No active stream"}
|
||||
</h2>
|
||||
<div className="font-mono text-xs text-ink-soft mt-1">
|
||||
{current?.source
|
||||
? `Source: ${current.source}`
|
||||
: "Queue a URL below to broadcast"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Realtime Equalizer preview */}
|
||||
<div className="h-12 w-full rounded-md border border-hairline bg-canvas-2/50 p-2">
|
||||
<Equalizer
|
||||
bars={mockLevels}
|
||||
color={
|
||||
playing ? "var(--color-signal)" : "var(--color-ink-faint)"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Interactive Playback Toolbar */}
|
||||
<div className="flex flex-wrap items-center gap-2.5 pt-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => stop.mutateAsync()}
|
||||
disabled={!playing || stop.isPending}
|
||||
className="font-mono text-xs font-bold"
|
||||
>
|
||||
<Square className="mr-1.5 size-3.5" /> STOP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => skip.mutateAsync()}
|
||||
disabled={!playing || skip.isPending}
|
||||
className="font-mono text-xs font-bold"
|
||||
>
|
||||
<SkipForward className="mr-1.5 size-3.5" /> SKIP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant={media?.loop ? "primary" : "outline"}
|
||||
onClick={() => loop.mutateAsync(!media?.loop)}
|
||||
disabled={loop.isPending}
|
||||
className="font-mono text-xs font-bold"
|
||||
>
|
||||
<Repeat className="mr-1.5 size-3.5" /> LOOP{" "}
|
||||
{media?.loop ? "ON" : "OFF"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px]">
|
||||
<span className="text-[#8a8f98]">ENGINE:</span>
|
||||
<span
|
||||
className={`rounded px-1.5 py-0.5 font-medium border ${
|
||||
playing
|
||||
? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]"
|
||||
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
|
||||
}`}
|
||||
>
|
||||
{playing ? "STREAMING" : "IDLE"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ingest & Queue Spatial Deck */}
|
||||
<div className="grid gap-5 lg:grid-cols-12">
|
||||
{/* URL Ingest Box */}
|
||||
<div className="media-tile lg:col-span-5 space-y-4">
|
||||
<GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
|
||||
<div className="font-mono text-xs font-bold tracking-wider text-ink uppercase mb-3 flex items-center justify-between">
|
||||
<span>INJECT AUDIO STREAM</span>
|
||||
<Sliders className="size-4 text-signal" />
|
||||
{/* Media Playback Deck */}
|
||||
<div className="media-tile">
|
||||
<GlassPanel className="p-5">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]">
|
||||
<Disc
|
||||
className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold tracking-tight text-[#f7f8f8]">
|
||||
{current?.title ?? "No Active Media Stream"}
|
||||
</div>
|
||||
<div className="font-mono text-[11px] text-[#8a8f98]">
|
||||
{current
|
||||
? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
|
||||
: "Queue a track via URL below"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="Paste YouTube or Audio URL..."
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onPlay}
|
||||
disabled={queue.isPending || !url.trim()}
|
||||
className="w-full font-mono text-xs font-bold py-2.5"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => loop.mutateAsync()}
|
||||
className={media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""}
|
||||
>
|
||||
<Play className="mr-1.5 size-4" /> BROADCAST STREAM
|
||||
<Repeat className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => skip.mutateAsync()}
|
||||
>
|
||||
<SkipForward className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => stop.mutateAsync()}
|
||||
>
|
||||
<Square className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Queue List Stage */}
|
||||
<div className="media-tile lg:col-span-7">
|
||||
<GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between border-b border-hairline/60 pb-3 mb-3">
|
||||
<div className="font-mono text-xs font-bold tracking-wider text-ink uppercase">
|
||||
QUEUE STACK ({queueList.length})
|
||||
</div>
|
||||
<div className="font-mono text-[11px] text-ink-faint">
|
||||
Total: {formatDuration(queueTotal)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Quick URL Input */}
|
||||
<div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4">
|
||||
<Input
|
||||
placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
className="flex-1 text-xs"
|
||||
/>
|
||||
<Button variant="primary" size="md" onClick={onPlay}>
|
||||
<Play className="size-3.5" />
|
||||
Queue Track
|
||||
</Button>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto pr-1">
|
||||
{queueList.length > 0 ? (
|
||||
queueList.map((item, idx) => (
|
||||
<div
|
||||
key={item.id ?? idx}
|
||||
className="flex items-center justify-between rounded-lg border border-hairline bg-surface/30 p-2.5 font-mono text-xs transition hover:border-signal/40"
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<span className="text-ink-faint font-bold">
|
||||
{idx + 1}.
|
||||
</span>
|
||||
<span className="truncate text-ink font-medium">
|
||||
{item.title ?? "Unknown Track"}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-ink-faint text-[11px] shrink-0 ml-2">
|
||||
{formatDuration(item.durationMs ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="py-8 text-center font-mono text-xs text-ink-faint">
|
||||
NO QUEUED AUDIO IN BUFFER
|
||||
{/* Spectrum & Queue Grid */}
|
||||
<div className="grid gap-3 lg:grid-cols-3">
|
||||
<GlassPanel className="media-tile lg:col-span-2">
|
||||
<SectionHeader
|
||||
eyebrow="Visualizer"
|
||||
title="Realtime Frequency Array"
|
||||
/>
|
||||
<div className="my-6 flex items-center justify-center">
|
||||
<Equalizer bars={mockLevels} />
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel className="media-tile">
|
||||
<SectionHeader
|
||||
eyebrow="Playlist"
|
||||
title={`Queue (${queueList.length})`}
|
||||
/>
|
||||
<div className="mt-3 space-y-2">
|
||||
{queueList.length === 0 ? (
|
||||
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
|
||||
QUEUE EMPTY
|
||||
</div>
|
||||
) : (
|
||||
queueList.map((item, idx) => (
|
||||
<div
|
||||
key={item.id ?? idx}
|
||||
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]"
|
||||
>
|
||||
<span className="truncate pr-2 font-medium">
|
||||
{item.title}
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-[#8a8f98] shrink-0">
|
||||
{formatDuration(item.durationMs ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
</PageTransition>
|
||||
|
||||
Reference in new issue
Block a user