Player
The player package is everything around the frame: the video with its transport, a timeline that is also the editor, a dialog for one scene's words and transition, the settings panel, the frame shown while a year loads, and the function that turns the video into an MP4. Use WrappedPlayer alone to play a video, and add the rest when the viewer should change it.
0:00 / 0:00
The player, with five buttons of our own driving it.
Installation
pnpm add @react-wrapped/player @react-wrapped/core gsapLoad the two stylesheets once, core first:
import "@react-wrapped/core/styles.css";
import "@react-wrapped/player/styles.css";What is in it
- WrappedPlayerThe video, play and pause, the timeline, the clock and full screen. A ref drives it from outside.
- TimelineA segment per scene. Scrub it, and with editing on: hide, move and edit scenes from it.
- SceneEditorA dialog for one scene: rewrite its texts and pick the transition out of it.
- WrappedConfiguratorPalette, dark or light, format, cell shape, speed and grain in one panel.
- LoadingThe same frame with a scan beam crossing a blank year, for while the numbers load.
- Video exportAn MP4 at full resolution, drawn frame by frame in the browser. No server.
How the pieces talk
- One config. Everything a viewer can change is a
WrappedConfig. The settings panel, the timeline and the scene editor each hand you the next one, and you pass it back down. - Scenes in, scenes filtered. You give the player only the scenes that play. The timeline gets all of them, so a switched-off scene can be switched back on.
- One handle.
refon the player givesplay,pause,seekand the rest. The MP4 is made through the same handle.
WrappedView in the kit wires all of this for you. Build the page from parts does the same wiring by hand.
