Player Frame Video Blog Block for React

One SVG per cover: a pattern of hairlines or dots (rings, hatching, a dot ramp or sway lines, one per lesson), a foreground circle with a play triangle, and a control bar with a scrub track. Each chapter is a short tick on the track, placed from its start as a percentage of the video. The strokes stay one pixel wide at any size, and the whole cover is hidden from assistive technology.

Yes. The cover's frame sets the ratio, the ring and the radius. Replace the drawing inside it with an img that has size-full object-cover and an empty alt (the title is the link's text).

From each lesson's chapters array: the starts as percentages. The chapter count in the text is that array's length, so the ticks and the count always agree.

No. The title is a link to the lesson's page, where your player belongs. The block never shows a fake player that does nothing.

Each cell becomes a row with the player frame as a small thumbnail at the end, the duration and chapters above the title and the presenter below; the dek is dropped. Between sm and lg the cells are one column with the frame at the start.

Yes. Text, cells and the header link mirror (the arrow flips). The durations and dates are isolated with bdi, and the frame keeps its direction because it is artwork.