Episode Controls Podcast Navbar Block for React

No: this is the bar, not a player. The position is position in state, in seconds, starting at 12:40 of a 42:10 episode (START and LENGTH). Back and Forward change it by 15 and 30 seconds and hold it between 0 and the end; wire them to an audio element by seeking it from skip.

chapterAt returns the last chapter in CHAPTERS whose start has passed, so the line changes as you skip across a boundary. The time remaining is (LENGTH - position) / speed, rounded up, so choosing 1.5x really shows less time. The line is a truncate paragraph; its full text is in the status when it changes.

The button's name is "Playback speed 1.25x. Change speed", so it always says the current value. Pressing it goes to the next speed (round to 1x), and a hidden status region, empty until your first press, says "Speed 1.5x" politely. The skip buttons use the same region: "Back 15 seconds, now at 12:25, What a worm bin teaches about soil".

A 2-pixel bar over the spine's top rule, as wide as the share of the episode behind you. It is decoration (aria-hidden): the same position is in the chapter line's time. It has no transition, so there is nothing to disable under reduced motion.

Below md the control cells are replaced by a menu button that opens a drawer from the bottom. Its first block is the chapter, the position and three equal buttons for the same controls (they share the bar's state, so the speed you pick is the speed in the bar); then the links and, below sm, the Create podcast button. Choosing a link closes the drawer. Swipe the drawer down, or press Escape, to close it.

Edit PAGES: the bar and the drawer read it, and the page you're on takes aria-current="page". Every link points at #. Create podcast renders the link it's given with render, with nativeButton={false}.