# WrappedConfigurator

`WrappedConfigurator` is the panel with every setting that applies to the whole video: ten palettes and a colour of your own, dark or light, the three formats, the shape of the calendar's cells, the speed and the film grain. It is a controlled component: it shows a config and hands back the next one.

> Live preview: try it at https://bettertyped.github.io/react-wrapped/docs/player/configurator/
>
> Every change lands in the video right away.

## Usage

`settings.tsx`

```tsx
import { type CSSProperties, useState } from "react";

import {
  DEFAULT_WRAPPED_CONFIG,
  type SceneInstance,
  type WrappedConfig,
  type WrappedSubject,
} from "@react-wrapped/core";
import { WrappedConfigurator, WrappedPlayer } from "@react-wrapped/player";

// Side by side where there is room, stacked on a phone.
const COLUMNS: CSSProperties = { display: "flex", flexWrap: "wrap", gap: 24, alignItems: "flex-start" };
const ROOM: CSSProperties = { display: "grid", height: 520, flex: "1 1 260px", minWidth: 0 };
const PANEL: CSSProperties = { flex: "1 1 300px", minWidth: 0 };

export function Settings({
  subject,
  seed,
  scenes,
}: {
  subject: WrappedSubject;
  seed: string;
  scenes: readonly SceneInstance[];
}) {
  // The panel never keeps a setting itself: it shows the config it is given and hands back the next one.
  const [config, setConfig] = useState<WrappedConfig>(DEFAULT_WRAPPED_CONFIG);
  return (
    <div style={COLUMNS}>
      <div style={ROOM}>
        <WrappedPlayer subject={subject} seed={seed} scenes={scenes} config={config} />
      </div>
      <div style={PANEL}>
        <WrappedConfigurator config={config} onChange={setConfig} />
      </div>
    </div>
  );
}
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `config` | `WrappedConfig` | What the panel shows as picked. |
| `onChange` | `(next: WrappedConfig) => void` | Called with the whole next config on every change. |
| `className?` | `string` | A class for the panel's root. |
| `classNames?` | `SlotClassNames<ConfiguratorSlot>` | A class per part, by slot name: `"settings-chip"`, `"settings-swatch"`. See [styling](https://bettertyped.github.io/react-wrapped/docs/guides/styling/). |

## The config

A `WrappedConfig` holds everything a viewer can change. The panel edits the first six keys and the grain. The rest belong to single scenes and are edited from the [timeline](https://bettertyped.github.io/react-wrapped/docs/player/timeline/). Start from `DEFAULT_WRAPPED_CONFIG` and change what you need.

| Key | Type | What it holds |
| --- | --- | --- |
| `palette` | `string` | The id of a built-in palette, or `custom`. |
| `accent` | `string` | The colour the custom palette is made from, as `#rrggbb`. |
| `mode` | `"dark" \| "light"` | Dark or light. One switch for every palette. |
| `format` | `"story" \| "square" \| "landscape"` | 9:16, 1:1 or 16:9. See [formats](https://bettertyped.github.io/react-wrapped/docs/formats/). |
| `shape` | `"round" \| "square" \| "circle"` | The shape of the calendar's cells. |
| `speed` | `"0.75" \| "1" \| "1.5"` | How fast the video plays. |
| `cuts` | `Record<string, WrappedTransition>` | A picked transition per scene key. Others keep the seed's pick. |
| `hidden` | `readonly string[]` | The keys of the scenes that are switched off. |
| `order` | `readonly string[]` | Scene keys in the viewer's order. Empty means your order. |
| `edits` | `Record<string, string>` | Rewritten texts, keyed `<scene key>.<field name>`. |
| `grain` | `boolean` | The film grain over the frame. |

The whole object fits in a URL, so a shared link plays the video exactly as its owner set it. See [the config in the URL](https://bettertyped.github.io/react-wrapped/docs/guides/config-in-the-url/).

## Your own defaults

```tsx
import { DEFAULT_WRAPPED_CONFIG, type WrappedConfig } from "@react-wrapped/core";

// What the video looks like before anyone touches a setting.
export const OUR_DEFAULTS: WrappedConfig = {
  ...DEFAULT_WRAPPED_CONFIG,
  palette: "ocean",
  format: "square",
  shape: "circle",
};
```

## Related

- [Theming](https://bettertyped.github.io/react-wrapped/docs/theming/)
- [Formats](https://bettertyped.github.io/react-wrapped/docs/formats/)
- [Custom palette and chrome colours](https://bettertyped.github.io/react-wrapped/docs/guides/palette-and-chrome/)
- [The config in the URL](https://bettertyped.github.io/react-wrapped/docs/guides/config-in-the-url/)
- [Player](https://bettertyped.github.io/react-wrapped/docs/player/)

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