// listen.jsx — standalone /listen/[id] smart-link page (Hyperfollow-style). // Data source: Supabase tables `public.diaval_myths` + `public.diaval_myth_links`. const DEFAULT_SLUG = "grain"; // Parse "3:42" → 222 seconds. 0 if missing/invalid. function parseDurationSecsListen(s) { if (!s) return 0; const parts = String(s).split(":").map(n => parseInt(n, 10)); if (parts.some(Number.isNaN)) return 0; if (parts.length === 2) return parts[0] * 60 + parts[1]; if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2]; return parts[0] || 0; } // Async loader: pulls a myth (released OR presave-enabled) + its streaming links. // Reads from the diaval_myths_public view so body+lyric come back NULL for presave-only rows. async function fetchRelease(slug) { const { data: myth, error: mErr } = await window.diavalSupabase .from("diaval_myths_public") .select("id, title, year, duration, color, blurb, body, position, release_date, cover_url, cover_hue1, cover_hue2, cover_glyph, hyperfollow_url, total_clicks, spotify_preview_url, spotify_track_id, spotify_album_art_url, is_published, presave_enabled") .eq("id", slug) .maybeSingle(); if (mErr) throw mErr; if (!myth) return null; const { data: links, error: lErr } = await window.diavalSupabase .from("diaval_myth_links") .select("platform, label, url, clicks, position") .eq("myth_id", slug) .order("position", { ascending: true }); if (lErr) throw lErr; return { id: myth.id, title: myth.title, artist: "DIAVAL", date: myth.release_date || myth.year || "", release_date: myth.release_date, is_published: !!myth.is_published, presave_enabled: !!myth.presave_enabled, cover_url: myth.cover_url || myth.spotify_album_art_url || null, cover_fallback: { hue1: myth.cover_hue1 || myth.color || "#000d52", hue2: myth.cover_hue2 || "#1830ff", glyph: myth.cover_glyph || "◢", }, blurb: myth.blurb || "", hyperfollow: myth.hyperfollow_url, total_clicks: myth.total_clicks ?? 0, duration: parseDurationSecsListen(myth.duration), preview_start: 0, spotify_preview_url: myth.spotify_preview_url ?? null, spotify_track_id: myth.spotify_track_id ?? null, spotify_album_url: null, links: (links ?? []).map(l => ({ platform: l.platform, label: l.label, url: l.url, clicks: l.clicks ?? 0 })), }; } const PLATFORM_GLYPH = { spotify: "▶", apple: "◐", itunes: "♫", deezer: "≋", iheart: "♥", tidal: "◆", amazon: "▶", amazonstore: "▶", ytmusic: "►", youtube: "►", soundcloud: "≋", pandora: "P", anghami: "♪", audius: "◢", boomplay: "◉", napster: "N", yandex: "Я", }; // ─── 30-second preview player ──────────────────────────────── // Renders the styled custom player when we have a real spotify_preview_url. // When that's missing (Spotify removed previews for many late-2024+ tracks), the // caller should render a Spotify iframe embed instead — see ListenPage main render. function PreviewPlayer({ release, S, compact = false }) { const [playing, setPlaying] = React.useState(false); const [progress, setProgress] = React.useState(0); // 0..30 const PREVIEW_LEN = 30; const audioRef = React.useRef(null); const hasPreview = !!release?.spotify_preview_url; // Real audio path — only branch (the simulated-progress fallback was removed; the // caller renders a Spotify iframe instead when there's no preview URL). React.useEffect(() => { if (!hasPreview) return; const a = audioRef.current; if (!a) return; if (playing) a.play().catch(() => setPlaying(false)); else a.pause(); }, [playing, hasPreview]); // PreviewPlayer only renders when we actually have a preview URL — the fake // setInterval-driven progress was removed. Caller handles the no-preview case // with a Spotify iframe fallback instead. if (!hasPreview) return null; const pct = (progress / PREVIEW_LEN) * 100; const sec = Math.floor(progress); const remain = PREVIEW_LEN - sec; // generate 60 waveform bars const bars = React.useMemo(() => { return Array.from({ length: compact ? 40 : 64 }, (_, i) => { const seed = (i * 37 + 11) % 100; const a = Math.sin(i * 0.5) * 0.3 + 0.5; const b = (seed / 100) * 0.5; return Math.max(0.15, Math.min(1, a + b)); }); }, [compact]); return (
{/* play button */} {/* waveform + meta */}
PREVIEW · 30 SEC{hasPreview ? "" : " · SIMULATED"} {playing ? `−0:${String(remain).padStart(2,"0")}` : "0:30"}
{bars.map((h, i) => { const barPct = (i / bars.length) * 100; const played = barPct < pct; return (
); })}
{hasPreview && (
); } // ─── Platform link button ──────────────────────────────────── function PortalButton({ link, onClick, S, compact = false }) { const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "grid", gridTemplateColumns: compact ? "36px 1fr 16px" : "44px 1fr 20px", gap: compact ? 12 : 14, alignItems: "center", padding: compact ? "14px 14px" : "18px 20px", border: `1px solid ${hover ? S.bloodHot : S.concreteHi}`, background: hover ? "rgba(190,33,30,0.12)" : "rgba(10,10,10,0.7)", backdropFilter: "blur(4px)", textDecoration: "none", color: S.bone, transition: "all 0.12s", }}>
{PLATFORM_GLYPH[link.platform] || "◢"}
{link.label}
PLAY ON {link.label}
↗
 ); } // ─── Shared inner content (used by both desktop + mobile) ──── function ListenContent({ release, slug, S, compact = false, onAboutClick }) { const trackClick = (platform) => console.log("[click]", platform, slug); const Socials = window.SocialIcons; const coverSize = compact ? 200 : 220; return (
{/* cover */}
{release.cover_url ? ( ) : (
{release.cover_fallback.glyph}
)}
{/* meta */}
◢ OUT NOW · {release.date}

{release.title}

BY {release.artist}
{/* Prerelease state (release_date > today, OR presave-only with no published date) → swap streaming list for a PRE-SAVE block + countdown + Spotify embed if track_id known. Released state → real preview audio player OR Spotify iframe fallback + DSP buttons. */} {/* footer */}
ABOUT THE SONG ↗
{Socials && (
)}
); } // ─── Pre-save block OR playable preview, depending on release state ── // - Prerelease (release_date in future) OR presave-only (presave_enabled && !is_published) // → PRE-SAVE eyebrow + countdown + PRE-SAVE button + (optional Spotify embed) // - Released, has spotify_preview_url → styled custom 30s preview player + DSP buttons // - Released, no preview_url but has spotify_track_id → Spotify iframe (full track) + DSP buttons // - Released, no audio source at all → DSP buttons only function PreSaveOrPlayer({ release, S, compact, trackClick }) { const isPre = (release.presave_enabled && !release.is_published) || isPrerelease(release.release_date); const cd = useCountdown(release.release_date); if (isPre) { return (
◢ PRE-RELEASE{release.release_date ? ` · DROPS ${release.release_date}` : ""}
{cd && (
{[["DAYS", cd.days], ["HOURS", cd.hours], ["MINUTES", cd.minutes]].map(([label, v]) => (
{String(v).padStart(2, "0")}
{label}
))}
)} {release.hyperfollow ? ( ↓ PRE-SAVE ON ALL PLATFORMS ↗ ) : (
PRE-SAVE LINK PENDING — ADMIN SYNC.
)}
spotify · apple music · iheart · everywhere you listen
{/* Spotify embed (works as a secondary pre-save surface for prereleases when track_id exists) */} {release.spotify_track_id && (