Video Playlist | Zyeon UI

Preview in your theme

status=ready · 8 videos, all visible · row 3 is playing (animated marker), rows 1–2 watched, rows 3–4 part-watched. End the video and a cancellable 5s countdown appears — Escape cancels it, Play now skips the wait.

Playing

Building a keyboard-first listbox from scratch

Design systems in practice

8 videos · 2h 5m · 2 watched

Up next · Focus management: the part everyone skips

status=ready + defaultShuffle + defaultRepeat="all" · 5 videos, all visible. The rows keep the order they were given — only “Up next” follows the shuffled permutation, which is a pure hash of the ids, so the server and the browser agree on what comes next.

Shuffled queue

5 videos · 1h 4m · 2 watched

Up next · Reduced motion is a feature, not a fallback

Degenerate data · 8 records in, 7 rows out: a duplicate id is dropped, a blank title falls back to “Untitled”, progress of 1.4 and NaN both clamp, a negative runtime prints no badge, 3:47:00 switches to h:mm:ss, one poster is missing and one 404s — both land on the film icon.

Everything an API eventually sends

7 videos · 4h 11m · 1 watched

Up next · Poster URL that 404s — the film icon takes over after onError

status=loading · skeletonRows=4 — the same number/poster/two-line rhythm as a real row, so nothing jumps when the data lands.

Course · Season 1

status=empty — nothing queued yet. A ready playlist with zero rows falls through to this same body, so an API that returns [] can never render a headerless void.

Watch later

This playlist is empty.

status=error with onRetry — Try again really re-loads: error → loading → ready on a timer that is cleared on unmount, and the retry button hands focus to the panel instead of dropping it on <body>.

Course · Season 2

The playlist service did not respond (504).

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro