Mixed Media Stage Gallery Block for React

Image: a Zoom slider (100 to 300 per cent in steps of ten) and Reset, with the picture scaling from its centre. Video: a storyboard of eight drawn frames with the current one ringed, a Play toggle, a Position slider and the time. Audio: a waveform of 48 bars, the ones before the playhead solid, with Play, the Position slider and the time. Document: Previous and Next, disabled at the ends, and "Page 2 of 5".

No. There is no media, only drawings. Play moves the position one step every 1.5 seconds (a bounded interval that starts when you press it, so it also runs under reduced motion), pressing it again pauses, and it stops by itself at the end; pressing Play at the end starts over. Each file remembers its own position when you move to another and back.

No. The picture area is always 16:9, the strip row and the controls row always have the same height, and a document is drawn as a page inside the same box. Choosing a file only changes what is drawn and which controls show.

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the picture's own so the layout doesn't change. Replace the stage's Drawing and each entry's Scene; a real video or audio element can sit in the same stage box.

The stage is full width with the controls under it; the six files are a row of cards you scroll sideways, each card a button, with the next one peeking.