/* screens.jsx — Christopher White Collective website Single recording (Fisher Point EP). No film/TV section. Honest placeholders where real content is still pending. */ /* ---------- Data ---------- */ const PHOTO = { velvet: "./assets/photography/cw-velvet-seated.jpg", velvetSax: "./assets/photography/cw-velvet-sax.jpg", portrait: "./assets/photography/cw-portrait-sax.jpg", pianoSax: "./assets/photography/cw-piano-sax.jpg", amber: "./assets/photography/cw-multi-amber.jpg", pianoBW: "./assets/photography/cw-piano-bw.jpg", playing: "./assets/photography/cw-playing-multi.jpg", }; window.PHOTO = PHOTO; const LINKS = { bandcamp: "https://christopherwhitecollective.bandcamp.com/", spotify: "https://open.spotify.com/artist/4KKiSxn0c5E4ZHqMvBvsSR?si=4fIhzwDoTWK4OvSih3oUPw", apple: "https://music.apple.com/gb/artist/christopher-white/7032426", instagram: "https://www.instagram.com/christopher.white_/", facebook: "https://www.facebook.com/chriswhitemusic", email: "management@longspaces.com", }; window.LINKS = LINKS; const FISHER_POINT = { slug: "fisher-point", title: "Fisher Point", format: "EP", year: 2025, releaseDate: "1 October 2025", sleeve: "./assets/photography/fisher-point-sleeve.jpg", titleBakedIn: true, subtitle: "Four pieces · seven players", tracks: [ { title: "Fisher Point", time: "6:23", src: "./assets/audio/01-fisher-point.mp3" }, { title: "Cymbal Rush", time: "6:32", src: "./assets/audio/02-cymbal-rush.mp3" }, { title: "On Green Dolphin Street", time: "9:26", src: "./assets/audio/03-on-green-dolphin-street.mp3" }, { title: "The Slow Down", time: "4:45", src: "./assets/audio/04-the-slow-down.mp3" }, ], notes: "Four pieces by Christopher White, performed by a septet of saxophone, guitar, piano, bass, drums, and strings. Released 1 October 2025.", personnel: [ ["Christopher White", "Saxophone"], ["Dave Delarre", "Guitar"], ["Oli Hayhurst", "Bass"], ["Alex Hutton", "Piano"], ["Neil Bullock", "Drums"], ["Ruby Colley", "Violin"], ["Bryony James", "Cello"], ], credits: [ ["Produced by", "Christopher White"], ["Recording engineer", "Marc McCouig"], ["Mix engineer", "Aaron Nevezie"], ["Mastered by", "Alex De Turk"], ], }; const RELEASES = [FISHER_POINT]; window.RELEASES = RELEASES; const COLLABORATORS = [ "Van Morrison", "Paul McCartney", "Billy Ocean", "Paul Anka", "Taj Mahal", "Noel Gallagher", "George Benson", "Gregory Porter", "Michael Bublé", "Bobby Womack", "Mavis Staples", "Maceo Parker", ]; /* ---------- A small sleeve-renderer used in three places ---------- */ function Sleeve({ release, size = 1, onClick }) { // Renders the album sleeve. Honors `titleBakedIn` — if the artwork // already carries the title, we render the photo alone with no overlay. const baked = release.titleBakedIn && release.sleeve; const padding = size === 2 ? 40 : 28; const titleSize = size === 2 ? 80 : 64; return ( { e.preventDefault(); onClick && onClick(release); }} style={{ border: 0, textDecoration: "none", display: "block" }}>
{release.sleeve ? ( ) : (
)} {!baked && release.sleeve ? (
) : null} {!baked ? (
{release.format || "Album"}
{release.title}
) : null}
); } /* ================================================================= HOME ================================================================= */ function HomeScreen({ onNavigate, onPickRelease, heroPhoto = "velvetSax", grain = 0.10 }) { return (
{/* HERO */}
New EP · Fisher Point

Jazz.
Ambient.
Cinematic.

The Christopher White Collective explores the intersection of jazz, ambient, and cinematic sounds.

Photograph — Alice Denny, 2026
{/* CURRENT RELEASE */}

{FISHER_POINT.notes}

); } /* ================================================================= MUSIC ================================================================= */ function MusicScreen({ onPickRelease }) { return (

The Collective's current recording. Available on Bandcamp and the major streaming services.

{FISHER_POINT.format} · {FISHER_POINT.year}

{FISHER_POINT.title}

{FISHER_POINT.subtitle}

{FISHER_POINT.notes}

); } /* ================================================================= RELEASE DETAIL ================================================================= */ function ReleaseScreen({ release, onNavigate, playerApi }) { const r = release || FISHER_POINT; const tracks = r.tracks || []; return (
{/* Sleeve */}
Cover artwork — Christopher White Collective
{/* Content */}
{r.format} · {r.releaseDate || r.year}

{r.title}

{r.subtitle}

{r.personnel ? (
Personnel
{r.personnel.map(([name, role]) => (
{name} {role}
))}
) : null} {r.credits ? (
Credits
{r.credits.map(([role, name]) => (
{role} {name}
))}
) : null} {r.notes ? (
Notes

{r.notes}

) : null}
); } /* ================================================================= LIVE ================================================================= */ const LIVE_DATES = [ { dayLabel: "Sat 4 Jul", year: "2026", time: "20:00", venue: "Karamel", city: "Wood Green, London", postcode: "N22 6UJ", link: "https://www.musicglue.com/karamel/events/2026-07-04-the-christopher-white-collective-karamel", status: "Tickets", }, { dayLabel: "Tue 4 Aug", year: "2026", time: "18:00", venue: "Goat Ledge", city: "Saint Leonards", postcode: "TN37 6FA", link: "https://www.goatledge.com/", status: "Free entry", }, { dayLabel: "Sun 9 Aug", year: "2026", time: "13:30", venue: "Barnaby's", city: "Hastings", postcode: "TN34 1HL", link: "https://barnabyslounge.co.uk/", status: "Free entry", }, ]; window.LIVE_DATES = LIVE_DATES; const PAST_DATES_2026 = [ { dayLabel: "Thu 14 May", year: "2026", time: "21:30", venue: "The Elgar Room · Royal Albert Hall", city: "London", postcode: "SW7 2AP", link: "https://www.royalalberthall.com/tickets/", }, { dayLabel: "Fri 13 Mar", year: "2026", time: "19:30", venue: "The Verdict", city: "Brighton", postcode: "BN2 0JB", link: "https://www.verdictjazz.com/tickets", }, { dayLabel: "Thu 26 Feb", year: "2026", time: "20:00", venue: "NUR Restaurant & Lounge", city: "Hastings", postcode: "TN34 1HL", link: null, lineup: "Featured guest", }, { dayLabel: "Fri 20 Feb", year: "2026", time: "19:30", venue: "Kino-Teatr", city: "Saint Leonards", postcode: "TN38 0EG", link: "https://www.ticketsource.co.uk/kinoteatr/t-zogvkky", lineup: "With Samaki Afrobeat", }, { dayLabel: "Sun 15 Feb", year: "2026", time: "13:30", venue: "Barnaby's", city: "Hastings", postcode: "TN34 1HL", link: null, }, ]; window.PAST_DATES_2026 = PAST_DATES_2026; function BookingForm() { const [data, setData] = useState({ name: "", email: "", venue: "", when: "", message: "" }); const [status, setStatus] = useState("idle"); // idle | sending | sent | error const update = (k) => (e) => setData({ ...data, [k]: e.target.value }); const submit = async (e) => { e.preventDefault(); if (!data.name || !data.email) { setStatus("error"); return; } setStatus("sending"); try { const r = await fetch("/api/booking", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data), }); if (!r.ok) throw new Error(`HTTP ${r.status}`); setStatus("sent"); } catch (err) { setStatus("error"); } }; if (status === "sent") { return (
Sent

Thank you — your enquiry is on its way. We'll reply within a few working days.

); } return (
{status === "error" ? ( Couldn't send. Try emailing management@longspaces.com directly. ) : null}
); } function ProgrammeScreen() { // shared row renderer for both upcoming + past const renderRow = (ev, i, isPast = false) => { const tagColor = isPast ? "var(--halo-400)" : (ev.status === "Tickets" ? "var(--brass-300)" : "var(--halo-300)"); const tagLabel = isPast ? "Played" : ev.status; const baseColor = isPast ? "var(--halo-400)" : "var(--halo-100)"; const subColor = isPast ? "var(--halo-400)" : "var(--halo-300)"; const RowTag = ev.link ? "a" : "div"; const rowProps = ev.link ? { href: ev.link, target: "_blank", rel: "noopener" } : {}; return ( e.currentTarget.style.background = "var(--night-700)") : undefined} onMouseLeave={ev.link ? (e => e.currentTarget.style.background = "transparent") : undefined}>
{ev.dayLabel} {ev.year} · {ev.time}
{ev.venue}
{ev.city} · {ev.postcode}{ev.lineup ? ` — ${ev.lineup}` : ""}
{tagLabel} {ev.link ? : } ); }; return (
{LIVE_DATES.map((ev, i) => renderRow(ev, i, false))}
{PAST_DATES_2026.map((ev, i) => renderRow(ev, i, true))}

The Collective performs as a quartet, quintet, or with strings. Enquiries for private and venue performances are welcomed.

); } /* ================================================================= ABOUT ================================================================= */ function AboutScreen() { return (
Christopher White
Christopher White, 2026
{/* vertical photo credit — mirrors the hero */}
Photograph — Alice Denny, 2026

Christopher White served for many years as the musical director, arranger, and saxophonist for Van Morrison, and has been a presence in the London music scene since moving to the UK nearly three decades ago.

As a saxophonist, he has performed and recorded with a remarkable range of artists including Paul McCartney, Billy Ocean, Paul Anka, Taj Mahal, Noel Gallagher, George Benson, Gregory Porter, Michael Bublé, Bobby Womack, Mavis Staples, and Maceo Parker.

Christopher composes for film and television and leads his own ensemble, Christopher White Collective — a project that explores the intersection of jazz, ambient, and cinematic sound worlds.

The Collective is represented by Longspaces.

For bookings, press, and general enquiries.

{LINKS.email}
Elsewhere
{[ ["Instagram", LINKS.instagram], ["Facebook", LINKS.facebook], ["Bandcamp", LINKS.bandcamp], ["Spotify", LINKS.spotify], ["Apple Music", LINKS.apple], ].map(([label, href]) => ( {label} ))}
); } /* ================================================================= VIDEO ================================================================= */ // Replace each entry's `id` with the YouTube video ID once received. // Keep entries with empty ids — they render as styled placeholders so the // page composition stays intact while content is pending. const VIDEOS = [ { id: "n3L0ZnX3vHI" }, { id: "2m5QvcWVHsM" }, { id: "buNXkFRImyM" }, { id: "3ri4FOkwMew" }, { id: "4rwfmE9Unvs" }, { id: "1coTm6noh6w" }, { id: "tVykuY53KCQ" }, { id: "mxvn74g01Pk" }, { id: "M1OrHb84Xj4" }, { id: "hjWqUWP0G_M" }, ]; window.VIDEOS = VIDEOS; function VideoScreen() { const [idx, setIdx] = useState(0); const [titles, setTitles] = useState(() => VIDEOS.map(() => null)); const v = VIDEOS[idx]; const go = (delta) => setIdx((i) => (i + delta + VIDEOS.length) % VIDEOS.length); // keyboard arrows for flicking useEffect(() => { const onKey = (e) => { if (e.key === "ArrowLeft") go(-1); if (e.key === "ArrowRight") go(+1); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); // Fetch YouTube titles via noembed (CORS-friendly oEmbed wrapper). useEffect(() => { let cancelled = false; Promise.all(VIDEOS.map(vid => fetch(`https://noembed.com/embed?url=https://www.youtube.com/watch?v=${vid.id}`) .then(r => r.ok ? r.json() : null) .then(j => (j && j.title) || null) .catch(() => null) )).then(t => { if (!cancelled) setTitles(t); }); return () => { cancelled = true; }; }, []); return (
{/* MAIN PLAYER */}
{v.id ? (