// ===========================================================
// AlbumExtras, deep-dive page enhancements.
// Standalone pieces wired into AlbumPage:
// • bbrAffiliateFor, shared retailer/price logic
// • StickyBuyBar, floating buy bar once the affiliate strip scrolls away
// • MobileDossierNav, sticky horizontal section pills (< 1180px)
// • MobileTOC, collapsible table of contents under the hero (< 768px)
// • RecLink, actionable "if you love this" recommendation
// • AlbumAccent, per-album accent colour derived from the cover art
// Loaded after Sleeve.jsx, before AlbumPage.jsx.
// ===========================================================
const { useState: useXState, useEffect: useXEffect, useRef: useXRef, useMemo: useXMemo } = React;
const XSleeve = window.Sleeve;
/* ---- shared affiliate logic (mirrors AffiliateStrip) ---- */
function bbrAffiliateFor(album) {
const q = encodeURIComponent(album.artist + " " + album.title + " vinyl");
const href = window.BBR_buyUrl ? window.BBR_buyUrl(album.artist + " " + album.title, album.slug) : "https://www.amazon.co.uk/s?k=" + q + "&i=popular&tag=theleadin1-21";
const retailer = (window.BBR_retailerFor && window.BBR_retailerFor(href)) || "vinyl";
const primary = { name: retailer, label: "New vinyl", href };
const retailers = [primary];
const best = retailers[0];
return { retailers, best };
}
window.bbrAffiliateFor = bbrAffiliateFor;
/* ---- StickyBar, the floating rail that follows the reader down a dossier ----
Was a buy bar ("Buy on vinyl" → Amazon/Rough Trade). It is now an ADD bar, and
that is the point: the Ambassador Programme promises record shops there is no buy
button anywhere on the site (see the note on window.BBR_COMMERCE_ENABLED in
data/collection_sample.js), so the same piece of furniture that used to send a
reader to a retailer now puts the record on their own shelf instead.
The chrome is unchanged — cover, title, artist, dismiss — because the design was
already right; only the action moved. The action itself is , the same
component the /today bar mounts, so owned-state, the guest cap, the saving state
and the error copy live in exactly one place across every add surface on the site.
When commerce is switched back on this reverts to the buy CTA on its own. */
function StickyBuyBar({ album }) {
const store = window.BBR_store;
const [visible, setVisible] = useXState(false);
const [dismissed, setDismissed] = useXState(false);
const [ownedAtLoad, setOwnedAtLoad] = useXState(null);
const [, forceX] = useXState(0);
const commerce = !!window.BBR_COMMERCE_ENABLED;
const { best } = bbrAffiliateFor(album);
useXEffect(() => { setDismissed(false); setOwnedAtLoad(null); }, [album.slug]);
useXEffect(() => (store ? store.subscribe(() => forceX((n) => n + 1)) : undefined), []);
useXEffect(() => {
const onScroll = () => {
// The affiliate strip is gone while commerce is off, so fall through to the
// plain scroll threshold this always used when the strip was absent.
const strip = document.querySelector(".aff-strip");
if (!strip) { setVisible(window.scrollY > 700); return; }
setVisible(strip.getBoundingClientRect().bottom < 8);
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, [album.slug, commerce]);
// Same discipline as the /today bar: settle "did they already own this" only once
// the collection has actually resolved, and then never offer to add it again. A
// bar telling a collector something is already on their shelf is furniture.
const loaded = !!(store && store.collectionV2Loaded);
const owned = !!(store && store.ownedSlugV2 && store.ownedSlugV2(album.slug));
useXEffect(() => {
if (!commerce && loaded && ownedAtLoad === null) setOwnedAtLoad(owned);
}, [commerce, loaded, owned, ownedAtLoad]);
if (dismissed) return null;
if (!commerce && (!loaded || ownedAtLoad !== false)) return null;
return (
);
}
window.StickyBuyBar = StickyBuyBar;
/* ---- scroll helper that accounts for sticky chrome ---- */
function bbrScrollToId(id, extra) {
const el = document.getElementById(id);
if (!el) return;
// Scroll so the section's heading sits just below the fixed bars. We target
// the heading element specifically (the section box top has padding + the
// stacked label above the heading, so aligning the box top overshoots/
// undershoots). Compute an absolute target and use a single scrollTo —
// scrollIntoView + smooth was racing the scroll-spy and overshooting.
const heading = el.querySelector("h2") || el;
const fixedBars = (() => {
const nav = document.querySelector(".topnav");
const toc = document.querySelector(".mtoc");
const navH = nav ? nav.getBoundingClientRect().height : 56;
const tocH = (toc && getComputedStyle(toc).position === "sticky") ? toc.getBoundingClientRect().height : 0;
return navH + tocH + 12; // small breathing gap
})();
const target = heading.getBoundingClientRect().top + window.scrollY - fixedBars;
window.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
}
/* ---- MobileDossierNav, sticky horizontal pill bar (< 1180px) ---- */
function MobileDossierNav({ sections }) {
const [active, setActive] = useXState(sections[0] && sections[0].id);
const [visible, setVisible] = useXState(false);
const railRef = useXRef(null);
useXEffect(() => {
const onScroll = () => setVisible(window.scrollY > 420);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
useXEffect(() => {
if (!sections.length) return;
const observer = new IntersectionObserver((entries) => {
const hit = entries.filter(e => e.isIntersecting);
if (!hit.length) return;
hit.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
setActive(hit[0].target.id);
}, { rootMargin: "-30% 0px -55% 0px", threshold: 0 });
sections.forEach(s => { const el = document.getElementById(s.id); if (el) observer.observe(el); });
return () => observer.disconnect();
}, [sections]);
// keep the active pill scrolled into the centre of the rail
useXEffect(() => {
const rail = railRef.current;
if (!rail) return;
const el = rail.querySelector(".mdnav-pill.active");
if (el) {
const target = el.offsetLeft - rail.clientWidth / 2 + el.clientWidth / 2;
rail.scrollTo({ left: Math.max(0, target), behavior: "smooth" });
}
}, [active]);
if (!sections.length) return null;
return (
);
}
window.MobileDossierNav = MobileDossierNav;
/* ---- MobileTOC, collapsible contents card under the hero (< 768px) ---- */
function MobileTOC({ sections, minutes }) {
const [open, setOpen] = useXState(false);
const [active, setActive] = useXState(sections[0] && sections[0].id);
const rootRef = useXRef(null);
// Scroll-spy: track which section is currently in view so the collapsed
// bar always shows where you are.
useXEffect(() => {
if (!sections.length) return;
const observer = new IntersectionObserver((entries) => {
const hit = entries.filter(e => e.isIntersecting);
if (!hit.length) return;
hit.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
setActive(hit[0].target.id);
}, { rootMargin: "-25% 0px -60% 0px", threshold: 0 });
sections.forEach(s => { const el = document.getElementById(s.id); if (el) observer.observe(el); });
return () => observer.disconnect();
}, [sections]);
// Close the dropdown on outside tap / Escape.
useXEffect(() => {
if (!open) return;
const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("pointerdown", onDown);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); };
}, [open]);
// All hooks above this line — only now is it safe to bail out.
if (!sections.length) return null;
const current = sections.find(s => s.id === active) || sections[0];
return (
{sections.length} sections · {minutes} min read
{sections.map(s => (
))}
);
}
window.MobileTOC = MobileTOC;
/* ---- recommendation linking ---- */
function bbrNorm(s) { return (s || "").toLowerCase().replace(/[^a-z0-9]/g, ""); }
function resolveRecAlbum(title, all) {
if (!all) return null;
const namePart = String(title).split(/\s+[, –-]\s+/)[0].replace(/\s*\(\d{4}\)\s*$/, "").trim();
const target = bbrNorm(namePart);
if (!target) return null;
// Exact match first; then a conservative prefix match. The second branch used
// to repeat the exact `=== target` test, so it could never match anything the
// first didn't — the intended fuzzy match was dead. The length guards keep
// short/common titles from mis-resolving.
return all.find(a => bbrNorm(a.title) === target) ||
(target.length >= 6 && all.find(a => { const t = bbrNorm(a.title); return t.length >= 6 && t.startsWith(target); })) || null;
}
function RecLink({ rec, all, onAlbum }) {
const match = resolveRecAlbum(rec.title, all);
const hasEssay = match && window.ESSAYS_FULL && window.ESSAYS_FULL[match.slug];
if (match) {
return (
{ e.preventDefault(); onAlbum(match); }}
>
{hasEssay ? "Read the essay" : "See the entry"}
);
}
const cleanTitle = String(rec.title).replace(/\(\d{4}\)/g, "").replace(/[, –]/g, " ").trim();
const q = encodeURIComponent(cleanTitle + " vinyl");
const href = (window.BBR_buyUrl) ? window.BBR_buyUrl(cleanTitle, rec.slug) : "https://www.amazon.co.uk/s?k=" + q + "&i=popular&tag=theleadin1-21";
// This branch is the recommendation we have NO page for, so with commerce off
// there is nowhere honest to send the reader — the record simply is not on the
// site. It becomes a plain card: the recommendation and the reason for it still
// read exactly as before, they just stop being a link to a retailer.
if (!window.BBR_COMMERCE_ENABLED) {
return (