Incoming Call

1/** incomingCall — cinematic backdrop plus reusable iOS call hero. */
2 
3import * as React from "react";
4import type { VariableField } from "../video-config";
5import type { SceneTemplateProps } from "./types";
6import { resolveTokens } from "../theme";
7import { IncomingCallCard } from "../primitives/social/IncomingCallCard";
8import {
9  SceneBackground,
10  mediaBackgroundDefaults,
11  mediaBackgroundSchemaFields,
12} from "./scene-background";
13 
14export const incomingCallSchema: Record<string, VariableField> = {
15  callerName: {
16    type: "string",
17    label: "Caller name",
18    default: "Your brand",
19    required: true,
20    description: "Brand or product shown as the caller. One to three words reads best; long names shrink safely.",
21  },
22  subtitle: {
23    type: "string",
24    label: "Subtitle",
25    default: "is calling....",
26    description: "Smaller text below the caller name.",
27  },
28  declineLabel: {
29    type: "string",
30    label: "Decline label",
31    default: "Decline",
32    description: "Label below the red button.",
33  },
34  acceptLabel: {
35    type: "string",
36    label: "Accept label",
37    default: "Accept",
38    description: "Label below the green button.",
39  },
40  textColor: {
41    type: "color",
42    label: "Text color",
43    default: "",
44    description: "Override text color (leave empty for white).",
45  },
46  ...mediaBackgroundSchemaFields,
47};
48 
49export const incomingCallDefaults: Record<string, unknown> = {
50  callerName: "Your brand",
51  subtitle: "is calling....",
52  declineLabel: "Decline",
53  acceptLabel: "Accept",
54  textColor: "",
55  ...mediaBackgroundDefaults,
56};
57 
58export const IncomingCallTemplate: React.FC<SceneTemplateProps> = ({
59  variables,
60  style,
61  progress,
62  beatIntensity,
63  width,
64  height,
65  sceneDuration,
66  isPlaying = true,
67  safeZone,
68  backgroundEffect,
69}) => {
70  const { accent } = resolveTokens(style);
71  const callerName = String(variables.callerName || "Your brand");
72  const subtitle = String(variables.subtitle || "is calling....");
73  const textColor = String(variables.textColor || "").trim() || "#FFFFFF";
74 
75  return (
76    <div
77      style={{
78        width,
79        height,
80        backgroundColor: "#000",
81        position: "relative",
82        overflow: "hidden",
83        fontFamily: "system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
84      }}
85    >
86      {/* [slot: background] */}
87      <SceneBackground
88        style={style}
89        progress={progress}
90        sceneDuration={sceneDuration}
91        width={width}
92// … truncated