Video Playlist Sidebar Features Block for React

Edit VIDEOS at the top of the file. Each tutorial has a length in seconds, the node it's about (focus), its nodes with a position in percent and an icon, its links as pairs of node ids, a title and a sentence. The poster and the thumbnail are drawn from the same data, so they always match, and the curves between nodes are computed from the node positions.

No. The poster is a drawing, so the play pill and the length on it are decoration and are hidden from assistive technology. Swap the poster for your own video element and keep the playlist as the chooser.

It's on by default. With it on, the poster shows an "Up next" chip with the title that follows, and the row after the chosen one carries a "Next" badge. Turning it off hides both without moving anything, because their space stays reserved.

Tab enters the playlist, the Up and Down arrows move between tutorials and choosing one shows its poster, title and sentence at once. The panel under the tabs is a tab stop of its own, and the switch is a normal control with the name "Play next".

When you open it. The first tutorial starts as watched and each one you choose gets a tick, which is state in the page and is not saved. Wire it to your own progress data to make it persist.

The poster comes first with its title under it, then the playlist as a row of cards you scroll sideways with snapping, with the next card peeking in. The vertical-tab arrow keys still move between tutorials, even though the row lies sideways.