Media

1/**
2 * bg-media template — atmospheric scene backed by a photo, video, or
3 * brand-color gradient. Title sits centered over the backdrop.
4 *
5 * The "media template" identity is just a positioning convention: title
6 * is centered, full-frame, and there's no other UI competing for the
7 * stage. The backdrop logic itself lives in SceneBackground, which any
8 * template can compose to opt into media support.
9 *
10 * mediaType modes:
11 *   - "auto" (default) — detect photo/video from URL extension (.mp4/.webm/.mov = video)
12 *   - "photo"          — force CSS background-image
13 *   - "video"          — force <video> element with playback sync
14 *   - "gradient"       — deliberate atmospheric brand-color scene; mediaUrl ignored
15 */
16import type { VariableField } from "../video-config";
17import type { SceneTemplateProps } from "./types";
18import { resolveTokens } from "../theme";
19import { TemplateText } from "./template-text";
20import type { TextArchetype } from "../typography";
21import {
22  SceneBackground,
23  mediaBackgroundDefaults,
24  mediaBackgroundSchemaFields,
25} from "./scene-background";
26import { ConfettiLayer } from "./confetti-layer";
27 
28// ─── Schema & Defaults ─────────────────────────────────────────
29 
30export const bgMediaSchema: Record<string, VariableField> = {
31  texts: {
32    type: "string",
33    label: "Text",
34    default: "Make an impact.",
35    required: true,
36    description: "Title text shown on the scene",
37  },
38  ...mediaBackgroundSchemaFields,
39  textColor: {
40    type: "color",
41    label: "Text color",
42    default: "",
43    description: "Override text color for this scene (leave empty for auto)",
44  },
45  confetti: {
46    type: "boolean",
47    label: "Confetti",
48    default: false,
49    description: "Layer falling confetti particles over the backdrop. Set true when the copy is celebratory (launch, milestone, win, anniversary, achievement). Works on top of any mediaType — photo, video, or gradient.",
50  },
51};
52 
53export const bgMediaDefaults: Record<string, unknown> = {
54  texts: "Make an impact.",
55  ...mediaBackgroundDefaults,
56  textColor: "",
57  confetti: false,
58};
59 
60// ─── Component ──────────────────────────────────────────────────
61 
62export const BgMediaTemplate: React.FC<SceneTemplateProps> = ({
63  variables,
64  style,
65  progress,
66  beatIntensity,
67  width,
68  height,
69// … truncated