/* ============================================================ Procedural album cover art Each `Cover` component picks a style and renders an SVG ============================================================ */ const { useId, useMemo, useSyncExternalStore } = React; // Subscribe to MetaStore for live cover updates function useAlbumCoverUrl(album) { return useSyncExternalStore( (fn) => window.MetaStore.subscribe(fn), () => window.MetaStore.getAlbumCoverUrl(album), () => null, ); } // helper to lighten/darken (simple HSL shift via canvas not avail; use alpha mixes) function mix(c1, c2, t) { // hex -> rgb const parse = h => { const n = parseInt(h.replace("#", ""), 16); return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff]; }; const [r1, g1, b1] = parse(c1); const [r2, g2, b2] = parse(c2); const r = Math.round(r1 + (r2 - r1) * t); const g = Math.round(g1 + (g2 - g1) * t); const b = Math.round(b1 + (b2 - b1) * t); return `rgb(${r}, ${g}, ${b})`; } // ============================================================= // // ============================================================= function Cover({ album, text = true, size = "auto", overrideUrl = null }) { const id = useId().replace(/:/g, ""); const storeUrl = useAlbumCoverUrl(album); if (!album) return
; const cov = album.cover || { style: "sunburst", c1: "#ff3d9a", c2: "#f5c14b", c3: "#08040a" }; // Priority: explicit override > extracted-from-file > static imageUrl on cover > procedural const effectiveUrl = overrideUrl || storeUrl || (cov.style === "image" ? cov.imageUrl : null); if (effectiveUrl) { const effectiveCov = { ...cov, style: "image", imageUrl: effectiveUrl }; return ; } const props = { id, album, cov, text }; switch (cov.style) { case "image": return ; case "sunburst": return ; case "halftone": return ; case "mirrorball": return ; case "grid": return ; case "lipgloss": return ; case "neon": return ; case "stripes": return ; case "portrait": return ; case "sunset": return ; case "diamond": return ; default: return ; } } // shared text wrap function CoverText({ album, color = "#fff", bg = null, align = "center" }) { if (!album) return null; const t = album.title; return (
{t}
{album.artist}
); } // ========================================================= // IMAGE — real cover art (uploaded JPEG/PNG) // ========================================================= function CoverImage({ id, album, cov, text }) { return (
{album?.title
); } // ========================================================= // SUNBURST — radial rays from a sun, big disco look // ========================================================= function CoverSunburst({ id, album, cov, text }) { const rays = 24; return (
{/* rays */} {Array.from({ length: rays }).map((_, i) => { const a = (i / rays) * 360; return ( ); })} {/* sun disc */} {/* horizon */} {text && }
); } // ========================================================= // HALFTONE — big dot gradient // ========================================================= function CoverHalftone({ id, album, cov, text }) { return (
{text && }
); } // ========================================================= // MIRRORBALL — chrome ball with facets // ========================================================= function CoverMirrorball({ id, album, cov, text }) { return (
{/* string */} {text && }
); } // ========================================================= // GRID — geometric grid / cityscape // ========================================================= function CoverGrid({ id, album, cov, text }) { return (
{/* perspective grid receding to horizon */} {/* horizontals */} {[60, 65, 71, 78, 86, 95].map((y, i) => ( ))} {/* radials */} {Array.from({ length: 13 }).map((_, i) => { const x = (i / 12) * 100; return ; })} {/* horizon line */} {/* sun */} {text && }
); } // ========================================================= // LIPGLOSS — close-up lips / kiss // ========================================================= function CoverLipgloss({ id, album, cov, text }) { return (
{/* upper lip */} {/* lower lip */} {/* highlight */} {text && }
); } // ========================================================= // NEON — bright text on grid, synthwave // ========================================================= function CoverNeon({ id, album, cov, text }) { return (
{/* skyline */} {/* lit windows */} {Array.from({ length: 40 }).map((_, i) => ( ))} {/* grid floor */} {[80, 84, 88, 93, 100].map((y, i) => ( ))} {Array.from({ length: 9 }).map((_, i) => { const x = (i / 8) * 100; return ; })} {text && }
); } // ========================================================= // STRIPES — diagonal stripes // ========================================================= function CoverStripes({ id, album, cov, text }) { return (
{/* circle frame */} {text && (
{album.title}
{album.artist}
)}
); } // ========================================================= // PORTRAIT — silhouette of a singer // ========================================================= function CoverPortrait({ id, album, cov, text }) { return (
{/* afro silhouette */} {/* neck + shoulders */} {/* hoop earring */} {text && (
{album.title}
)}
); } // ========================================================= // SUNSET — palm trees + sunset // ========================================================= function CoverSunset({ id, album, cov, text }) { return (
{/* stripes through sun */} {/* palm */} {text && (
{album.title}
{album.artist}
)}
); } // ========================================================= // DIAMOND — facet diamond shape // ========================================================= function CoverDiamond({ id, album, cov, text }) { return (
{/* diamond shape: split into facets */} {/* outline */} {/* sparkles */} {text && (
{album.title}
{album.artist}
)}
); } // Make components global for use in other Babel files Object.assign(window, { Cover });