# 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.

> Live preview: try it at https://bettertyped.github.io/react-wrapped/docs/player/
>
> The player, with five buttons of our own driving it.

## Installation

```bash
pnpm add @react-wrapped/player @react-wrapped/core gsap
```

Load the two stylesheets once, core first:

```tsx
import "@react-wrapped/core/styles.css";
import "@react-wrapped/player/styles.css";
```

> With `@react-wrapped/kit` you install one package and load one stylesheet, `@react-wrapped/kit/styles.css`, and every name on these pages is exported from it too.

## What is in it

- [WrappedPlayer](https://bettertyped.github.io/react-wrapped/docs/player/wrapped-player/): The video, play and pause, the timeline, the clock and full screen. A ref drives it from outside.
- [Timeline](https://bettertyped.github.io/react-wrapped/docs/player/timeline/): A segment per scene. Scrub it, and with editing on: hide, move and edit scenes from it.
- [SceneEditor](https://bettertyped.github.io/react-wrapped/docs/player/scene-editor/): A dialog for one scene: rewrite its texts and pick the transition out of it.
- [WrappedConfigurator](https://bettertyped.github.io/react-wrapped/docs/player/configurator/): Palette, dark or light, format, cell shape, speed and grain in one panel.
- [Loading](https://bettertyped.github.io/react-wrapped/docs/player/loading/): The same frame with a scan beam crossing a blank year, for while the numbers load.
- [Video export](https://bettertyped.github.io/react-wrapped/docs/player/video-export/): An 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.** `ref` on the player gives `play`, `pause`, `seek` and 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](https://bettertyped.github.io/react-wrapped/docs/guides/from-parts/) does the same wiring by hand.

## Related

- [WrappedPlayer](https://bettertyped.github.io/react-wrapped/docs/player/wrapped-player/)
- [Timeline](https://bettertyped.github.io/react-wrapped/docs/player/timeline/)
- [Build the page from parts](https://bettertyped.github.io/react-wrapped/docs/guides/from-parts/)
- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Full Wrapped example](https://bettertyped.github.io/react-wrapped/examples/full-wrapped/)

Source: https://bettertyped.github.io/react-wrapped/docs/player/