Episode Playlist Features Block for React

Edit SHOW and EPISODES at the top of the file. Each episode has a title, a length in seconds, a status (PUBLISHED, SCHEDULED or DRAFT), the text its downloads column shows, how far the playhead sits and a seed for its waveform. The summary line ("5 episodes: 2 published, 1 scheduled, 2 drafts") is counted from the list.

No. It's a drawing that follows the chosen episode, so it's hidden from assistive technology and has no controls. Wire your own audio element to the same selection if you want real playback.

Each episode row is one button: Tab reaches it and Enter or Space chooses it. The chosen row is marked as pressed, and a polite status line reads out its title, length and status after you choose.

It is drawn from a small function that gives each episode its own shape from a seed, using whole-number arithmetic, so it's identical on the server and in every browser. Replace it with your episode's real peaks, as an array of heights in percent.

Only from the large breakpoint up, where the two sides sit next to each other: the header stays in view while the page scrolls past a tall manager. On a phone the header comes first and the manager follows, so nothing overlaps.

The header, the three benefits and then the manager stack in that order. Each row keeps its title and status on the first line and its length and downloads on the second, and long titles are cut with an ellipsis.