shadcn.io is not affiliated with official shadcn/ui
Video Chapters Timeline Block for Ark UI
A lecture timeline where a drawn player frame, a playhead slider with a tick at each chapter start and a chapter rail that fills up to the playhead stay in step, with Resume at 21:40 and Watched 3 of 7 chapters.
Installation
Overview
Let the scrubber be the rail with this chapters timeline for React with Ark UI. It is written for Chaptercast, a fictional course platform, and a 46:28 lecture in seven chapters. A hairline frame with plus marks holds a drawn greyscale player frame whose slide changes with the chapter, with a play button and the time. Under it a playhead slider spans the whole runtime and carries a tick at each chapter start. Below, the chapters sit on a rail that fills up to the playhead. Each chapter is a button that moves the playhead to its start; Resume at 21:40 in the header puts it back where the viewer stopped; "Watched 3 of 7 chapters" counts the chapters the playhead has passed. Play runs a simulated clock at 30 times speed. No video in this demo. The time axis keeps its direction on an RTL page.
FAQ
How do I change the chapters?
Edit CHAPTERS, TOTAL and RESUME at the top of the file. A chapter has a start in seconds and a title; its end is the next start. The state of each row and the fill are derived from the playhead.
How do I connect a real video?
Replace the drawn frame with your player, set run.at from its time updates and call its seek in jump() and the slider's change handler.
What counts as watched?
A chapter is watched when the playhead has passed its end. The chapter the playhead is in is marked Current and its part of the rail is filled to the playhead.
What stays in the page?
The playhead and whether it is playing, in local state. Nothing is saved; to remember the resume point, store run.at with the user.