Video Seekbar Scrubber Features Block for React

Edit CHAPTERS at the top of the file: each has a time in seconds, an id, a title and a sentence. The seekbar, the markers, the tooltips and the list for phones all read from it. Each id picks one of six frame components (PickFrame, HotspotFrame and so on); to add a chapter, draw a frame and add a line to the Frame component that shows it.

Tab reaches the slider, and its arrow keys, Home and End jump one chapter at a time; the slider reads out the chapter's number, title and time. The six markers are buttons after it, each named with its chapter, and Enter or Space jumps to it. Focusing a marker opens its tooltip, and Escape closes it.

The slider has six stops, one per chapter, so a drag snaps from chapter to chapter and a click on the track goes to the nearest one. The markers are evenly spaced for that reason, not in proportion to each chapter's length. The time shown is where the chapter starts.

A miniature of the same drawing that fills the preview, drawn from container units so it scales without a second set of artwork, with the chapter's title and time under it. It only opens from a marker, and the same facts are in the marker's name and in the chapter list below the medium breakpoint, so nothing depends on hovering.

The header and the figure fade up once on load, and the frames cross-fade in 300 milliseconds when the chapter changes. All the frames sit in one grid cell, so nothing shifts. With reduced motion both are off and the frame changes at once.

The frame, the chapter title and the slider stay in the figure, but the markers and their tooltips are replaced by a list of the six chapters under the bar, each a button with its time and title. The footer keeps the skip link and the Shine Button.