feat(frontend): revamp media frequency deck with GSAP animations and tactical visualizer
This commit is contained in:
asepharyana
@@ -1,20 +1,21 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
Disc,
|
||||||
ListMusic,
|
ListMusic,
|
||||||
Play,
|
Play,
|
||||||
Radio,
|
|
||||||
Repeat,
|
Repeat,
|
||||||
SkipForward,
|
SkipForward,
|
||||||
|
Sliders,
|
||||||
Square,
|
Square,
|
||||||
Volume2,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||||
|
import { Equalizer } from "@/components/charts";
|
||||||
import { Button, GlassPanel, Input, toast } from "@/components/primitives";
|
import { Button, GlassPanel, Input, toast } from "@/components/primitives";
|
||||||
import {
|
import {
|
||||||
ErrorState,
|
ErrorState,
|
||||||
SectionHeader,
|
PageTransition,
|
||||||
SkeletonHero,
|
SkeletonHero,
|
||||||
SkeletonPanel,
|
SkeletonPanel,
|
||||||
} from "@/components/shared";
|
} from "@/components/shared";
|
||||||
@@ -26,9 +27,9 @@ import {
|
|||||||
useMediaStop,
|
useMediaStop,
|
||||||
useMediaWsSync,
|
useMediaWsSync,
|
||||||
} from "@/hooks";
|
} from "@/hooks";
|
||||||
|
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||||
import { formatDuration } from "@/lib/format";
|
import { formatDuration } from "@/lib/format";
|
||||||
import type { MediaState } from "@/lib/types";
|
import type { MediaState } from "@/lib/types";
|
||||||
import { staggerDelay } from "@/lib/utils";
|
|
||||||
import { useWebSocket } from "@/lib/ws/context";
|
import { useWebSocket } from "@/lib/ws/context";
|
||||||
|
|
||||||
export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||||
@@ -56,6 +57,12 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
|||||||
0,
|
0,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", {
|
||||||
|
stagger: 0.06,
|
||||||
|
y: 16,
|
||||||
|
dependencies: [playing, queueList.length],
|
||||||
|
});
|
||||||
|
|
||||||
const tone = playing ? "signal" : queueList.length ? "amber" : "signal";
|
const tone = playing ? "signal" : queueList.length ? "amber" : "signal";
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
ambient.set(
|
ambient.set(
|
||||||
@@ -74,7 +81,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
|||||||
try {
|
try {
|
||||||
await queue.mutateAsync({ url: u, mode: "music" });
|
await queue.mutateAsync({ url: u, mode: "music" });
|
||||||
setUrl("");
|
setUrl("");
|
||||||
toast({ title: "Queued", tone: "signal" });
|
toast({ title: "Queued track", tone: "signal" });
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Queue failed",
|
title: "Queue failed",
|
||||||
@@ -94,206 +101,201 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
|||||||
</div>
|
</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];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-5">
|
<PageTransition>
|
||||||
<GlassPanel glow className="relative overflow-hidden">
|
<div ref={mediaRef} className="space-y-5">
|
||||||
<div className="scan-line absolute inset-x-0 top-0" />
|
{/* Top Media Matrix Stage */}
|
||||||
<div className="flex flex-col gap-5 sm:flex-row sm:items-center">
|
<div className="media-tile relative overflow-hidden rounded-xl border border-hairline/80 bg-surface/40 p-6 shadow-2xl backdrop-blur-xl">
|
||||||
<div
|
{/* Spatial Grid Header */}
|
||||||
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"}`}
|
<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-28 items-center justify-center overflow-hidden rounded-full bg-canvas/60">
|
<div className="flex size-9 items-center justify-center rounded-lg bg-canvas-2 border border-hairline text-signal shadow-inner">
|
||||||
{current?.thumbnailUrl ? (
|
<Disc
|
||||||
// biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
|
className={`size-5 ${playing ? "animate-spin-disc text-signal" : "text-ink-faint"}`}
|
||||||
<img
|
|
||||||
src={current.thumbnailUrl}
|
|
||||||
alt=""
|
|
||||||
className="size-full object-cover"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
/>
|
||||||
) : (
|
</div>
|
||||||
<ListMusic className="size-10 text-signal" />
|
<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>
|
</div>
|
||||||
|
|
||||||
<div className="min-w-0 flex-1">
|
<div className="flex items-center gap-2">
|
||||||
<div className="eyebrow mb-1 flex items-center gap-2">
|
|
||||||
{playing ? (
|
|
||||||
<>
|
|
||||||
<span aria-hidden className="flex h-3 items-end gap-[2px]">
|
|
||||||
{[0, 1, 2].map((i) => (
|
|
||||||
<span
|
<span
|
||||||
key={`eq-${i}`}
|
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"}`}
|
||||||
className="w-[3px] animate-eq rounded-full bg-signal"
|
>
|
||||||
style={{
|
<span
|
||||||
animationDelay: `${i * 160}ms`,
|
className={`size-1.5 rounded-full ${playing ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
|
||||||
height: "100%",
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
))}
|
{playing ? "TRANSMITTING" : "STANDBY"}
|
||||||
</span>
|
</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>
|
|
||||||
)}
|
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-5 flex flex-wrap items-center gap-3">
|
{/* Player Core View */}
|
||||||
<div className="relative min-w-0 flex-1">
|
<div className="mt-6 grid gap-6 lg:grid-cols-12 items-center">
|
||||||
<Input
|
{/* Vinyl & Visualizer Stage */}
|
||||||
placeholder="Paste a YouTube / music URL…"
|
<div className="lg:col-span-5 flex flex-col items-center justify-center">
|
||||||
value={url}
|
<div className="relative flex size-44 items-center justify-center rounded-full border-2 border-dashed border-hairline/60 bg-canvas-2 shadow-2xl">
|
||||||
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">
|
|
||||||
<div
|
<div
|
||||||
className="h-full rounded-full bg-signal/70"
|
className={`absolute inset-2 rounded-full border border-hairline/30 ${playing ? "animate-spin-disc" : ""}`}
|
||||||
style={{
|
|
||||||
width: `${Math.round((media?.musicVolume ?? 0) * 100)}%`,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
|
{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>
|
</div>
|
||||||
<span className="mono w-9 text-right text-[0.65rem] text-ink-faint">
|
)}
|
||||||
{Math.round((media?.musicVolume ?? 0) * 100)}%
|
{playing && (
|
||||||
</span>
|
<div className="absolute -inset-2 rounded-full ring-2 ring-signal/40 animate-pulse-ring pointer-events-none" />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</GlassPanel>
|
|
||||||
|
|
||||||
<GlassPanel>
|
{/* Current Track Telemetry & Controls */}
|
||||||
<SectionHeader
|
<div className="lg:col-span-7 space-y-4">
|
||||||
eyebrow="up next"
|
<div>
|
||||||
title="Queue"
|
<div className="font-mono text-[10px] font-bold tracking-widest text-signal uppercase">
|
||||||
action={
|
{current ? "CURRENT TRANSMISSION" : "DECK UNLOADED"}
|
||||||
<span className="mono text-xs text-ink-faint">
|
</div>
|
||||||
{queueList.length} track{queueList.length === 1 ? "" : "s"}
|
<h2 className="text-xl font-bold text-ink mt-1 truncate">
|
||||||
{queueTotal && ` · ${formatDuration(queueTotal)}`}
|
{current?.title ?? "No active stream"}
|
||||||
</span>
|
</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)"
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{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.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
) : (
|
{/* Interactive Playback Toolbar */}
|
||||||
<div className="space-y-2">
|
<div className="flex flex-wrap items-center gap-2.5 pt-2">
|
||||||
{queueList.map((item, i) => {
|
<Button
|
||||||
const isNext = i === 0 && playing;
|
variant="primary"
|
||||||
return (
|
onClick={() => stop.mutateAsync()}
|
||||||
<div
|
disabled={!playing || stop.isPending}
|
||||||
key={`${item.source}-${i}`}
|
className="font-mono text-xs font-bold"
|
||||||
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>
|
<Square className="mr-1.5 size-3.5" /> STOP
|
||||||
{item.thumbnailUrl ? (
|
</Button>
|
||||||
// biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
|
|
||||||
<img
|
<Button
|
||||||
src={item.thumbnailUrl}
|
variant="outline"
|
||||||
alt=""
|
onClick={() => skip.mutateAsync()}
|
||||||
className="size-9 shrink-0 rounded-md object-cover"
|
disabled={!playing || skip.isPending}
|
||||||
loading="lazy"
|
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>
|
||||||
|
</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" />
|
||||||
|
</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"
|
||||||
/>
|
/>
|
||||||
) : (
|
<Button
|
||||||
<span className="flex size-9 shrink-0 items-center justify-center rounded-md border border-hairline bg-white/5">
|
variant="primary"
|
||||||
<ListMusic className="size-4 text-ink-faint" />
|
onClick={onPlay}
|
||||||
</span>
|
disabled={queue.isPending || !url.trim()}
|
||||||
)}
|
className="w-full font-mono text-xs font-bold py-2.5"
|
||||||
<div className="min-w-0 flex-1">
|
>
|
||||||
<div className="truncate text-sm text-ink">
|
<Play className="mr-1.5 size-4" /> BROADCAST STREAM
|
||||||
{item.title}
|
</Button>
|
||||||
</div>
|
</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">
|
|
||||||
{formatDuration(item.durationMs)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</GlassPanel>
|
</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>
|
||||||
|
|
||||||
|
<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
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</GlassPanel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PageTransition>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user