Party Player
A tiny now-playing bar that turns the whole page into a party.
The music player from this site's nav, set free: a 32px glass pill with real transport controls, a frosted tracklist panel that unrolls out of the pill, and a party mode that honestly simulates the beat — the audio is a cross-origin iframe, so the groove is seeded from the video id rather than faked from FFT. One component, three files, no dependencies beyond React.
What it does
A 32px pill with real transport: prev / play / next, mute-as-equalizer, and a title that scrolls as a phase-locked marquee only when it overflows.
The caret unrolls a frosted panel out of the pill — seek bar, shuffle/repeat, and a tracklist whose titles resolve from YouTube's public oEmbed endpoint.
Party mode recolors the page: a slow hue cycle riding the theme transition, plus a beat envelope seeded per video id that fires a screen-wide glow through one CSS var.
Restores the visitor's theme exactly on disarm — the whole palette is snapshotted before party touches anything.
The YouTube IFrame API loads once, lazily and failable: blocked networks degrade to a Listen-on-YouTube link, never a stuck spinner.
Keyboard, focus and Escape paths are built in; the offscreen audio host is inert, and reduced motion gets one static tint.
Props
playlistId | string | the demo mix | A public YouTube playlist id to play. |
allowPanel | boolean | true | Render the caret and tracklist panel; false leaves just the pill for card teasers. |
layout | "desktop" | "phone" | — | Pin the environment for preview stages: “phone” pins the compact pill, “desktop” pins the full pill regardless of viewport; undefined lets the 820px media query decide. |
onPartyChange | (on: boolean) => void | — | Fires when the visitor arms or disarms party mode. |
className | string | — | Extra classes on the root element. |