CTA Media

1/** ctaMedia — cinematic backdrop, shared headline, and reusable brand close. */
2 
3import React from "react";
4import type { VariableField } from "../video-config";
5import type { SceneTemplateProps } from "./types";
6import { resolveTokens } from "../theme";
7import type { TextArchetype } from "../typography";
8import { TemplateText } from "./template-text";
9import { CtaMediaClose } from "../primitives/typography/CtaMediaClose";
10import {
11  SceneBackground,
12  mediaBackgroundDefaults,
13  mediaBackgroundSchemaFields,
14} from "./scene-background";
15 
16export const ctaMediaSchema: Record<string, VariableField> = {
17  headline: {
18    type: "string",
19    label: "Headline",
20    default: "Make every moment count",
21    required: true,
22    description: "The big closing message. Two to seven words reads best.",
23  },
24  url: {
25    type: "string",
26    label: "URL",
27    default: "www.yoursite.com",
28    description: "URL shown at the bottom. Leave empty to use CTA fallback text.",
29  },
30  cta: {
31    type: "string",
32    label: "CTA fallback",
33    default: "",
34    description: "Optional text shown only when URL is empty.",
35  },
36  ...mediaBackgroundSchemaFields,
37  textColor: {
38    type: "color",
39    label: "Text color",
40    default: "",
41    description: "Override headline and URL color (leave empty for auto).",
42  },
43};
44 
45export const ctaMediaDefaults: Record<string, unknown> = {
46  headline: "Make every moment count",
47  url: "www.yoursite.com",
48  cta: "",
49  ...mediaBackgroundDefaults,
50  textColor: "",
51};
52 
53export const CtaMediaTemplate: React.FC<SceneTemplateProps> = ({
54  variables,
55  style,
56  progress,
57  width,
58  height,
59  sceneDuration,
60  beatIntensity,
61  textArchetype,
62  safeZone,
63  isPlaying = true,
64  backgroundEffect,
65}) => {
66  const { accent, content, font } = resolveTokens(style);
67  const textColor = String(variables.textColor || "") || content;
68  const headline = String(variables.headline || "");
69 
70  return (
71    <div style={{ width, height, backgroundColor: "#000", position: "relative", overflow: "hidden", fontFamily: font }}>
72      {/* [slot: background] */}
73      <SceneBackground
74        style={style}
75        progress={progress}
76        sceneDuration={sceneDuration}
77        width={width}
78        height={height}
79        mediaUrl={String(variables.mediaUrl || "")}
80        mediaType={String(variables.mediaType || "auto")}
81        mediaPoster={String(variables.mediaPoster || "")}
82        backgroundEffect={backgroundEffect}
83        seed={headline}
84        isPlaying={isPlaying}
85// … truncated