"
const right = releaseState.released ? "OUT NOW" : releaseState.label;
const titleParts = splitTitle(tweaks.title);
const artistParts = splitArtist(tweaks.artist);
return (
{tweaks.catalog}
{titleParts.main}
{titleParts.mod && {titleParts.mod} }
BY
{artistParts.main}
{artistParts.mod && {artistParts.mod} }
{tweaks.releaseType}
{right && · }
{right &&
{right}
}
);
}
function ServiceRow({ svc, primary, onClick }) {
return (
{String(svc.index).padStart(2, "0")}
{window.Icon[svc.icon]}
{svc.name}
{svc.action}
);
}
function SectionHeader({ label, count, kind }) {
return (
{label}
{String(count).padStart(2, "0")}
);
}
function ServiceList({ primaryId }) {
// Group services by kind. Primary CTA pops out above the streaming group.
const { primary, streamItems, storeItems } = useMemo(() => {
let idx = 0;
const number = (s) => ({ ...s, index: ++idx });
const primary = SERVICES.find((s) => s.id === primaryId);
const rest = SERVICES.filter((s) => s.id !== primaryId);
return {
primary: primary ? number(primary) : null,
streamItems: rest.filter((s) => s.kind === "stream").map(number),
storeItems: rest.filter((s) => s.kind === "store").map(number)
};
}, [primaryId]);
return (
{primary &&
<>
e.preventDefault()} />
}
{streamItems.length > 0 &&
<>
e.preventDefault()} />
)}
}
{storeItems.length > 0 &&
<>
e.preventDefault()} />
)}
}
);
}
function Footer({ owner }) {
return (
);
}
// Small palette readout — shown in Tweaks panel when in auto mode
function PaletteReadout({ palette, mode }) {
if (mode !== "auto") return null;
if (!palette) {
return (
Drop a cover to extract palette
);
}
return (
PRIMARY
{palette.primary.toUpperCase()}
SECONDARY
{palette.secondary.toUpperCase()}
{palette.source === "extracted" ? "EXTRACTED" : "COMPLEMENT"}
);
}
// ─────────────────────────────────────────────────────────────────────
// Tweaks panel
// ─────────────────────────────────────────────────────────────────────
function Tweaks({ tweaks, setTweak, palette }) {
const {
TweaksPanel, TweakSection, TweakText, TweakRadio, TweakSelect, TweakColor, TweakToggle, TweakSlider
} = window;
return (
setTweak("title", v)} />
setTweak("titleDisplay", v)} />
setTweak("artist", v)} />
setTweak("artistDisplay", v)} />
setTweak("releaseType", v)} />
setTweak("releaseDate", v)} />
setTweak("catalog", v)} />
setTweak("footerOwner", v)} />
setTweak("accentMode", v)} />
setTweak("accent", v)} />
setTweak("accent2", v)} />
}
setTweak("modSize", v / 100)} />
setTweak("modDim", v / 100)} />
setTweak("layout", v)} />
setTweak("background", v)} />
setTweak("showFooter", v)} />
({ value: s.id, label: s.name }))}
onChange={(v) => setTweak("ctaPrimary", v)} />
setTweak("contextEnabled", v)} />
setTweak("contextSource", v)} />
);
}
// ─────────────────────────────────────────────────────────────────────
// Root
// ─────────────────────────────────────────────────────────────────────
function App() {
const [tweaks, setTweaks] = window.useTweaks(TWEAK_DEFAULTS);
const setTweak = (k, v) => setTweaks({ [k]: v });
const layoutMode = useLayoutMode(tweaks.layout);
const ctxKey = getContextKey(tweaks.contextSource);
const ctx = ctxKey ? CONTEXT_COPY[ctxKey] : null;
const releaseState = useReleaseState(tweaks.releaseDate);
// Cover image + dependent effects
const slotRef = useRef(null);
const coverSrc = useCoverImage(slotRef);
const palette = useExtractedPalette(coverSrc);
const mirrorCover = tweaks.background === "cover" || tweaks.background === "cover-blobs";
useCoverMirror(coverSrc, mirrorCover);
// Browser tab title
useEffect(() => {
const a = tweaks.artistDisplay || tweaks.artist;
const t = tweaks.titleDisplay || tweaks.title;
const d = parseReleaseDate(tweaks.releaseDate);
const shortDate = formatReleaseDateShort(d);
document.title = releaseState.released
? `${a} - ${t} | Out Now`
: `Pre-Save | ${a} - ${t} | ${shortDate}`;
}, [tweaks.artistDisplay, tweaks.artist, tweaks.titleDisplay, tweaks.title, tweaks.releaseDate, releaseState.released]);
// Background blob layer
useEffect(() => {
const blobs = document.getElementById("bg-blobs");
const wantBlobs = tweaks.background === "blobs" || tweaks.background === "cover-blobs";
if (blobs) blobs.classList.toggle("on", wantBlobs);
}, [tweaks.background]);
// Apply effective accents to CSS vars. Auto mode uses extracted palette
// when available; falls back to manual values until then.
useEffect(() => {
const useAuto = tweaks.accentMode === "auto" && palette;
const a1 = useAuto ? palette.primary : tweaks.accent;
const a2 = useAuto ? palette.secondary : tweaks.accent2;
document.documentElement.style.setProperty("--accent", a1);
document.documentElement.style.setProperty("--accent-2", a2);
document.documentElement.style.setProperty("--accent-ink", "#0b0c10");
// Also push to the blob layer
const blobA = document.querySelector(".blob.a");
const blobB = document.querySelector(".blob.b");
if (blobA) blobA.style.background = a1;
if (blobB) blobB.style.background = a2;
}, [tweaks.accentMode, tweaks.accent, tweaks.accent2, palette]);
// Modifier (parenthetical / featuring) styling vars
useEffect(() => {
document.documentElement.style.setProperty("--mod-size", String(tweaks.modSize));
document.documentElement.style.setProperty("--mod-dim", String(tweaks.modDim));
}, [tweaks.modSize, tweaks.modDim]);
return (
{tweaks.catalog}
{releaseState.released ? "OUT NOW" : releaseState.label}
{layoutMode === "stack" &&
}
{tweaks.contextEnabled && ctx &&
);
}
// Mount
const stage = document.getElementById("stage");
stage.innerHTML = "";
ReactDOM.createRoot(stage).render(