302 lines
11 KiB
TypeScript
302 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Disc,
|
|
ListMusic,
|
|
Play,
|
|
Repeat,
|
|
SkipForward,
|
|
Sliders,
|
|
Square,
|
|
} from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useAmbient } from "@/components/ambient/ambient-context";
|
|
import { Equalizer } from "@/components/charts";
|
|
import { Button, GlassPanel, Input, toast } from "@/components/primitives";
|
|
import {
|
|
ErrorState,
|
|
PageTransition,
|
|
SkeletonHero,
|
|
SkeletonPanel,
|
|
} from "@/components/shared";
|
|
import {
|
|
useMediaLoop,
|
|
useMediaQueue,
|
|
useMediaSkip,
|
|
useMediaState,
|
|
useMediaStop,
|
|
useMediaWsSync,
|
|
} from "@/hooks";
|
|
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
|
import { formatDuration } from "@/lib/format";
|
|
import type { MediaState } from "@/lib/types";
|
|
import { useWebSocket } from "@/lib/ws/context";
|
|
|
|
export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
|
const ws = useWebSocket();
|
|
const {
|
|
data: media,
|
|
isLoading,
|
|
error,
|
|
mutate,
|
|
} = useMediaState(initialStatus);
|
|
const queue = useMediaQueue();
|
|
const skip = useMediaSkip();
|
|
const stop = useMediaStop();
|
|
const loop = useMediaLoop();
|
|
useMediaWsSync(ws);
|
|
const ambient = useAmbient();
|
|
|
|
const [url, setUrl] = useState("");
|
|
|
|
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,
|
|
dependencies: [playing, queueList.length],
|
|
});
|
|
|
|
const tone = playing ? "signal" : queueList.length ? "amber" : "signal";
|
|
useEffect(() => {
|
|
ambient.set(
|
|
tone,
|
|
playing ? 0.5 : 0.25,
|
|
playing ? "now playing" : "media idle",
|
|
);
|
|
}, [tone, playing, ambient]);
|
|
|
|
const onPlay = async () => {
|
|
const u = url.trim();
|
|
if (!u) {
|
|
toast({ title: "Enter a media URL", tone: "vermilion" });
|
|
return;
|
|
}
|
|
try {
|
|
await queue.mutateAsync({ url: u, mode: "music" });
|
|
setUrl("");
|
|
toast({ title: "Queued track", tone: "signal" });
|
|
} catch (e) {
|
|
toast({
|
|
title: "Queue failed",
|
|
description: String(e),
|
|
tone: "vermilion",
|
|
});
|
|
}
|
|
};
|
|
|
|
if (error && !media)
|
|
return <ErrorState error={error} onRetry={() => void mutate()} />;
|
|
if (!media && isLoading)
|
|
return (
|
|
<div className="space-y-5">
|
|
<SkeletonHero />
|
|
<SkeletonPanel rows={4} />
|
|
</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 (
|
|
<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>
|
|
|
|
{/* 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>
|
|
</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
|
|
variant="primary"
|
|
onClick={onPlay}
|
|
disabled={queue.isPending || !url.trim()}
|
|
className="w-full font-mono text-xs font-bold py-2.5"
|
|
>
|
|
<Play className="mr-1.5 size-4" /> BROADCAST STREAM
|
|
</Button>
|
|
</div>
|
|
</GlassPanel>
|
|
</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>
|
|
);
|
|
}
|