// home-industrial.jsx — uses Shell. Hero + latest-release sidebar. // Parse duration text like "3:42" into seconds. Returns 0 if missing/malformed. function parseDurationSecs(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; } function HomeIndustrial({ tab, onTabChange }) { // Default to NOT playing; only start once we have audio + user clicks. const [playing, setPlaying] = React.useState(false); const [progress, setProgress] = React.useState(0); // Read from in-memory cache for synchronous initial state — eliminates the // loading flash + Spotify iframe reload when the user comes back to Home. const cachedLatest = window.diavalCacheGet ? window.diavalCacheGet("home-latest") : null; const cachedUpcoming = window.diavalCacheGet ? window.diavalCacheGet("home-upcoming") : null; const cachedLinks = window.diavalCacheGet ? window.diavalCacheGet("home-streamLinks") : null; const [latest, setLatest] = React.useState(cachedLatest); const [upcoming, setUpcoming] = React.useState(cachedUpcoming); const [streamLinks, setStreamLinks] = React.useState(cachedLinks || []); // Tags for the latest release card — pulled from the same admin-managed // diaval_myth_genres / diaval_myth_moods that the mythology detail page uses, // so the homepage and detail page show the same labels (no hardcoded fallback). const cachedLatestTags = window.diavalCacheGet ? window.diavalCacheGet("home-latest-tags") : null; const [latestTags, setLatestTags] = React.useState(cachedLatestTags || []); const audioRef = React.useRef(null); const PREVIEW_LEN = 30; // Fetch ALL public-visible myths once, then split client-side into: // - latest: is_published AND (release_date null OR <= today) // - upcoming: presave_enabled OR (is_published AND release_date > today) // Client-side split avoids any PostgREST date-format gotchas — release_date is // text in YYYY.MM.DD form, so we normalize via isPrerelease() before comparing. React.useEffect(() => { let cancelled = false; (async () => { const sb = window.diavalSupabase; // Cache the full myths list so revisits don't refetch — the data rarely // changes and admin can clear via diavalCacheBust on save. const all = window.diavalCachedFetch ? await window.diavalCachedFetch("myths-public-list", async () => { const { data } = await sb.from("diaval_myths_public") .select("id, title, year, duration, position, release_date, cover_url, spotify_preview_url, spotify_track_id, spotify_album_art_url, hyperfollow_url, is_published, presave_enabled"); return data || []; }) : ((await sb.from("diaval_myths_public").select("id, title, year, duration, position, release_date, cover_url, spotify_preview_url, spotify_track_id, spotify_album_art_url, hyperfollow_url, is_published, presave_enabled")).data || []); if (cancelled) return; const isFuture = (r) => typeof isPrerelease === "function" ? isPrerelease(r.release_date) : false; // Released: published AND (no release_date OR not in the future) const released = all.filter(r => r.is_published && !isFuture(r)); // Sort newest first by release_date desc, fallback position desc released.sort((a, b) => { const ad = a.release_date || ""; const bd = b.release_date || ""; if (ad !== bd) return ad < bd ? 1 : -1; return (b.position || 0) - (a.position || 0); }); const latestMyth = released[0] || null; // Upcoming/presave: presave_enabled OR (published AND in the future) const upcomingPool = all.filter(r => r.presave_enabled || (r.is_published && isFuture(r))); // Sort soonest first by release_date asc, nulls last, fallback position asc upcomingPool.sort((a, b) => { const ad = a.release_date || ""; const bd = b.release_date || ""; if (!ad && !bd) return (a.position || 0) - (b.position || 0); if (!ad) return 1; if (!bd) return -1; if (ad !== bd) return ad < bd ? -1 : 1; return (a.position || 0) - (b.position || 0); }); const upcomingMyth = upcomingPool.find(r => r.id !== latestMyth?.id) || null; setLatest(latestMyth); setUpcoming(upcomingMyth); // Persist latest/upcoming to the cache for instant render on revisit. if (window._diavalCache) { window._diavalCache.set("home-latest", { v: latestMyth, t: Date.now() }); window._diavalCache.set("home-upcoming", { v: upcomingMyth, t: Date.now() }); } if (latestMyth) { const links = window.diavalCachedFetch ? await window.diavalCachedFetch(`myth-links-${latestMyth.id}`, async () => { const { data } = await sb.from("diaval_myth_links") .select("platform, label, url, position") .eq("myth_id", latestMyth.id) .order("position", { ascending: true }); return data || []; }) : ((await sb.from("diaval_myth_links").select("platform, label, url, position").eq("myth_id", latestMyth.id).order("position", { ascending: true })).data || []); if (!cancelled && links) { setStreamLinks(links); if (window._diavalCache) window._diavalCache.set("home-streamLinks", { v: links, t: Date.now() }); } } })(); return () => { cancelled = true; }; }, []); // Fetch genres + moods for the latest release once we know its id. Same join // shape as MythDetail uses — keeps the labels in sync between the homepage // hero and the deep song page. Missing tags = empty list (caller falls back // to fmtDur only). React.useEffect(() => { if (!latest?.id) return; let cancelled = false; (async () => { const sb = window.diavalSupabase; const [{ data: g }, { data: m }] = await Promise.all([ sb.from("diaval_myth_genres").select("position, diaval_genres(id, name, is_visible)").eq("myth_id", latest.id).order("position"), sb.from("diaval_myth_moods").select("position, diaval_moods(id, name, is_visible)").eq("myth_id", latest.id).order("position"), ]); if (cancelled) return; // Genres only on the homepage hero — moods clutter the line and don't // add value at this scale. The detail page still shows both. const genres = (g || []).map(r => r.diaval_genres).filter(x => x && x.is_visible); setLatestTags(genres); if (window._diavalCache) window._diavalCache.set("home-latest-tags", { v: genres, t: Date.now() }); })(); return () => { cancelled = true; }; }, [latest?.id]); const hasPreview = !!latest?.spotify_preview_url; const hasEmbed = !hasPreview && !!latest?.spotify_track_id; const coverImg = latest?.cover_url || latest?.spotify_album_art_url || null; // Real audio path React.useEffect(() => { if (!hasPreview) return; const a = audioRef.current; if (!a) return; if (playing) a.play().catch(() => setPlaying(false)); else a.pause(); }, [playing, hasPreview]); // Simulated playback when no preview URL — keeps the visual alive. React.useEffect(() => { if (hasPreview) return; if (!playing) return; const t = setInterval(() => setProgress((p) => (p >= 1 ? 0 : p + 0.003)), 100); return () => clearInterval(t); }, [playing, hasPreview]); const S = window.shellStyles; const { isMobile } = (window.useViewport ? window.useViewport() : { isMobile: false }); const releaseTitle = latest ? latest.title : "—"; const releaseFileLabel = latest ? `FILE ${String(latest.position).padStart(3, "0")} · ${latest.release_date || latest.year || ""}` : "AWAITING TRANSMISSION"; const releaseDurSecs = latest ? parseDurationSecs(latest.duration) || 222 : 222; // For the timer label: show 30s if we're playing the preview, otherwise the full track length. const displayDur = hasPreview ? PREVIEW_LEN : releaseDurSecs; const fmtDur = `${Math.floor(displayDur / 60)}:${String(displayDur % 60).padStart(2, "0")}`; // Mobile hero scale: was 36/24; bumped so the hero claims hierarchy over the // latest-release cover image that peeks in below the fold. const heroFs = isMobile ? 56 : 88; const cueFs = isMobile ? 32 : 64; const blurbMt = isMobile ? 28 : 48; return (
{/* left: hero */}
// HOME / 001

GODS TRY
TO DELETE
ME. SO I
{/* Reserve 2 lines of clearance so the typewriter line can't push siblings around as variants of different lengths cycle through and wrap differently on narrow viewports. cycleOnce stops the loop after a single pass — the line settles on the final variant and stays still. */}
INSTEAD. ↳

DIONYSIAN CYBER-METALCORE FOR THE DIVINELY DAMAGED.
INDUSTRIAL DEVASTATION. DEATHCORE FURY. EVERY TRACK IS TRANSFORMATION.
THE MEDICINE THAT POISONS. THE WOUND THAT SINGS.
onTabChange("mythology")} style={{ fontFamily: S.display, fontSize: 13, color: S.bone, border: `2px solid ${S.bone}`, padding: isMobile ? "16px 22px" : "14px 22px", letterSpacing: "0.08em", display: "flex", alignItems: "center", justifyContent: "center", gap: 12, cursor: "pointer", whiteSpace: "nowrap", alignSelf: isMobile ? "stretch" : undefined, minHeight: 48, }}> ENTER MYTHOLOGY
{!isMobile &&
} {/* right sidebar (desktop) / stacked release card (mobile) */}
{ if (!latest?.id) return; // SPA navigation: pushState + popstate so app.jsx's route listener // re-renders without a full page reload. Worker pre-renders the // meta on subsequent server hits — same canonical URL either way. window.history.pushState({}, "", `/mythology/${latest.id}`); window.dispatchEvent(new PopStateEvent("popstate")); }} title={latest?.title ? `Open ${latest.title} →` : undefined} style={{ position: "relative", aspectRatio: "1 / 1", flexShrink: 0, background: `radial-gradient(ellipse at 30% 30%, ${S.concreteHi}, transparent 55%), ${S.raven}`, borderBottom: `1px solid ${S.concreteHi}`, overflow: "hidden", cursor: latest?.id ? "pointer" : "default", }}> {coverImg && ( )} {/* darker scrim so the bottom title block stays legible against bright covers */} {coverImg && (
)}
{/* Cover overlays: all white + text shadow for legibility against any cover image (consistent with mythology cards / detail) */}
LATEST RELEASE
LIVE
{releaseFileLabel}
{releaseTitle}
{fmtDur} {latestTags.length > 0 && ( <> · {(isMobile ? latestTags.slice(0, 2) : latestTags).map(t => (t.name || "").toUpperCase()).join(" / ")} )}
{hasPreview && ( )} {hasPreview && (
{hasEmbed ? ( <>
PREVIEW