Poster and Playlist Video Introductions Team Block for React

Edit INTROS at the top of the file. An intro is a name, a first name, a role, a caption (the film's first words), a fixed duration ("1:42") and the href of the page that holds the film. The poster, the caption under it, the Watch link and the playlist row are all drawn from that one entry, so adding a person is one object.

The poster is a drawing made of the page's own elements, and its control bar shows an empty progress line that never moves; the whole drawing is hidden from assistive technology. Watch is an ordinary link, so the player, the consent for a video host and the data it loads stay on the page that owns the film. To play in place, put your player where the poster is and keep the poster as its placeholder.

It follows href, which in this example is # because the films are invented. Its label names the picked person and carries the duration for screen readers ("Watch Hana's intro (2:05)"). Watch renders the link it is given with render, with nativeButton={false}.

It is a group of toggle buttons named Introductions, with exactly one picked at all times. Tab moves into it and the arrow keys move between the rows, picking as they go; a polite status line says which introduction is shown. The picked row is a solid foreground bar, so it reads without colour.

No. The poster has a fixed 16:9 shape, and the caption under it reserves room for the longest line, so the left column keeps its size. The playlist rows have one height.

The header, then the poster with its caption and the Watch button, then the playlist as full-width rows. The poster's drawing scales down: the disc and the text shrink, and the caption line is cut with an ellipsis (the full line is in the real caption under it).