Product Video Storefront Block for React

Edit CHAPTERS (an id, a start in seconds, a title, a transcript line and the ids of the products shown), ITEMS (name and price in cents) and LENGTH. A chapter ends where the next begins. To play footage, put your player in the stage in place of the poster and move to a chapter when its time is reached.

Because a demo should not pretend. The stage draws a poster and says so. The chapters, the transcript and the tagged products are real behaviour; only playback is missing.

The chapters are one group of native radios, so the Up and Down arrow keys move and choose in one step, Tab leaves the group, and the stage, transcript and products change at once. The count in the chapters heading reads like 2 of 5.

The bag count lives in the page and nothing is bought. A chip adds one of that product and the status line says so. To wire it, send the product id from addItem to your cart.

The poster comes first with its transcript line and the product chips under it, the tabs follow, and the chapters are a full-width list below.

The tabs are a named tab list and the chapters a named group of radios. The poster is decorative; its chapter, time range and title are written as text, and every chip is read with its name and price. The status line is a polite live region present from the start.