Video Intro Dialog Onboarding Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the editor: a native dialog element that isn't modal, so nothing is trapped or focused. Watch intro opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show TourContent and share the block's state, so a chapter picked in the copy is selected in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element.

A demo that fakes a player is worse than an honest poster, so nothing here is media: the poster is a drawing, and the chip says so. In your app point Open the video at the page or file where it lives (change the href), or replace the poster box with your player or an embed and drive the playhead from it: CHAPTERS already holds each chapter's start in seconds and TOTAL the length. Use a photo or frame from your own video only if you hold the rights to it.

Each chapter is a toggle button, pressed while it's showing. Pressing one moves the playhead to its start, redraws the poster with that chapter's scene and rewrites the line under it, and a polite status message says the chapter, where it starts and that no video plays. They're plain buttons in a list, so Tab reaches each one; on a phone the list scrolls sideways under the poster.

It's a Collapsible with a text button: closed by default, it opens a short scroll region with each chapter's words and start time. The region takes a tab stop so a keyboard can scroll it, and whether it's open belongs to the block, so it stays as you left it between the copy and the real dialog.

Yes. The real dialog is named by its title and described by its sentence, focus starts inside it and stays there until it closes, and Escape, Maybe later and the close button all return focus to Watch intro. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Maybe later and its close button close it and put focus on Watch intro.

The copy shown on load docks to the foot of the page as a bottom sheet with the poster over the chapter list, the actions pinned at the bottom and the body scrolling above them. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.