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.
0:00 / 0:00
Every change lands in the video right away.
Usage
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. |
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. 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. |
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.
Your own defaults
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",
};