Podcast Show Notes About Block for React

They are EPISODES at the top of the file: a number, a title, a short name for the phone chips, a guest, the length in minutes, a summary and the chapters, each a start in seconds and a title. The chapter lengths, the bar's proportions and the "min" labels are worked out from those starts and the episode's length.

No, and the block doesn't pretend to. The time stamps are plain text in a Timecode Text that holds still, and the Listen link goes wherever you point it: your player, an RSS app or a hosted page. It is a link, so it works with no script.

They are the library's tabs in a vertical list: one tab stop, the up and down arrows move between episodes, and the notes follow. The list scrolls inside its own frame when there are more episodes than fit, and focusing a row scrolls it into view. Base UI selects a tab as it takes focus.

Episodes have different amounts of text. An unseen copy of all of them sits in the same grid cell as the live notes, hidden from assistive technology and inert, so the cell is always as tall as the tallest and the page never jumps.

The list becomes a row of chips with the short names, which scrolls sideways above the notes; choosing one scrolls it into view, which block-review reports as a sideways shift. The chapter lengths drop under their titles. Nothing scrolls the page sideways at 320 pixels.

The header, the list and the notes fade up once on load and again as each episode opens, with CSS transitions. The time stamps never run. With reduced motion the entrance is off.