shadcn.io is not affiliated with official shadcn/ui
Story Film Chapters About Block for React Aria
A video host's story film as a split: a drawn player poster whose picture, title and playhead follow the chapter you pick, beside the chapters and their time stamps.
Installation
Overview
A story film for React with React Aria, written for Filmloft, a fictional video host, about its own first year. A split with a divider. At the start, a drawn player poster in a frame: the film's name, a still picture for the open chapter, its title, a paused timecode and a scale of the chapters with a playhead. At the end, the chapters are an ordered list of buttons, each with its timecode, its title and a line, and a Shine Button, "Watch the film", that is a link. Picking a chapter moves the playhead, swaps the picture and retitles the poster, and the page does not jump. The third chapter is selected on load. On a phone the poster sits above the list. It's built from Shine Button, Timecode Text and Guides, with a CSS entrance on the header and your theme's tokens for every colour. For an about page that wants a film without embedding a player. The chapters and the stills are example data, and nothing is played in the block.
FAQ
How do I change the film and the chapters?
CHAPTERS holds each chapter's id, its title, its line and where it starts, in seconds. FILM_SECONDS is the length of the whole film, and it must be longer than the last chapter's start. The playhead's place is that start divided by the length, and each chapter's width on the scale is the time until the next one. The stills are scene components, one per id. OPEN is the chapter selected on load.
Can someone watch the film here?
The poster is a drawing, and the chapter buttons only move that drawing. "Watch the film" is a link, so point href at the hosted film. The time stamps are a Timecode Text that holds still, with the frames turned off, so they read as hours, minutes and seconds. The scale is drawn left to right in every direction, so the playhead still runs from the start of the film toward the end.
How does the keyboard work?
Tab moves through the five chapter buttons and the link. Enter or Space selects a chapter. The selected button keeps a bar on its start edge and is marked as current, and a status line announces the chapter you picked.