@vanillaskyai/video 0.8.8 → 0.10.0

package/dist/incoming-call-54KQ7O5A.js

@@ -1,323 +0,0 @@
-import {
-  fitTextSize,
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  SPRING_BOUNCY,
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/social/IncomingCallCard.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var DECLINE_RED = "#FF3B30";
-var ACCEPT_GREEN = "#34C759";
-var PhoneIcon = ({ size, rotated }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    style: {
-      transform: rotated ? "rotate(135deg)" : "none",
-      display: "block"
-    },
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
-        fill: "#FFFFFF"
-      }
-    )
-  }
-);
-var IncomingCallCard = ({
-  progress,
-  width,
-  height,
-  sceneDuration,
-  safeZone,
-  callerName: rawCallerName,
-  subtitle: rawSubtitle = "is calling....",
-  declineLabel: rawDeclineLabel = "Decline",
-  acceptLabel: rawAcceptLabel = "Accept",
-  textColor = "#FFFFFF",
-  beatIntensity = 0
-}) => {
-  const dim = Math.min(width, height);
-  const callerName = stripPipe(String(rawCallerName || "Your brand"));
-  const subtitle = stripPipe(String(rawSubtitle || "is calling...."));
-  const declineLabel = stripPipe(String(rawDeclineLabel || "Decline"));
-  const acceptLabel = stripPipe(String(rawAcceptLabel || "Accept"));
-  const nameSpring = spring(
-    interpolate(progress, [0, 0.1], [0, 1], CLAMP),
-    SPRING_SMOOTH
-  );
-  const nameOpacity = interpolate(progress, [0, 0.08], [0, 1], CLAMP);
-  const nameY = (1 - nameSpring) * dim * 0.025;
-  const subtitleStart = 0.1;
-  const subtitleEnd = 0.3;
-  const charsRevealed = Math.max(
-    0,
-    Math.floor(
-      interpolate(
-        progress,
-        [subtitleStart, subtitleEnd],
-        [0, subtitle.length],
-        CLAMP
-      )
-    )
-  );
-  const visibleSubtitle = subtitle.slice(0, charsRevealed);
-  const declineSpring = spring(
-    interpolate(progress, [0.1, 0.25], [0, 1], CLAMP),
-    SPRING_BOUNCY
-  );
-  const acceptSpring = spring(
-    interpolate(progress, [0.13, 0.28], [0, 1], CLAMP),
-    SPRING_BOUNCY
-  );
-  const declineLabelOpacity = interpolate(progress, [0.1, 0.25], [0, 1], CLAMP);
-  const acceptLabelOpacity = interpolate(progress, [0.13, 0.28], [0, 1], CLAMP);
-  const realT = progress * sceneDuration;
-  const vibrateActive = interpolate(progress, [0.28, 0.38], [0, 1], CLAMP);
-  const vibrateAngle = vibrateActive * Math.sin(realT * 7 * Math.PI * 2) * 2.5;
-  const acceptPulse = progress > 0.35 ? 1 + 0.04 * Math.max(0, Math.sin(realT * Math.PI * 2.4)) : 1;
-  const beatGlow = 1 + beatIntensity * 0.35;
-  const topPad = Math.max(safeZone.top, height * 0.07);
-  const bottomPad = Math.max(safeZone.bottom, height * 0.1);
-  const callerBaseFontSize = Math.min(width * 0.16, dim * 0.13);
-  const callerFontSize = fitTextSize(callerName, callerBaseFontSize, width * 0.88, {
-    minScale: 0.45
-  });
-  const subtitleFontSize = Math.min(width * 0.075, dim * 0.062);
-  const buttonSize = Math.min(width * 0.18, dim * 0.16);
-  const phoneIconSize = buttonSize * 0.46;
-  const labelFontSize = Math.min(width * 0.04, dim * 0.034);
-  const buttonGap = width * 0.3;
-  const buttonsBottomFromBottom = bottomPad + labelFontSize * 1.6;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: topPad,
-              left: 0,
-              right: 0,
-              padding: `0 ${width * 0.06}px`,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: callerFontSize * 0.45,
-              textAlign: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    color: textColor,
-                    fontSize: callerFontSize,
-                    fontWeight: 600,
-                    lineHeight: 1.05,
-                    letterSpacing: -0.5,
-                    opacity: nameOpacity,
-                    transform: `translateY(${nameY}px)`,
-                    textShadow: "0 2px 18px rgba(0,0,0,0.32)"
-                  },
-                  children: callerName
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    color: textColor,
-                    fontSize: subtitleFontSize,
-                    fontWeight: 400,
-                    textShadow: "0 1px 12px rgba(0,0,0,0.32)",
-                    minHeight: subtitleFontSize * 1.4
-                  },
-                  children: visibleSubtitle
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: buttonsBottomFromBottom,
-              left: 0,
-              right: 0,
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "center",
-              alignItems: "flex-end",
-              gap: buttonGap
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: labelFontSize * 0.55 }, children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: buttonSize,
-                      height: buttonSize,
-                      borderRadius: "50%",
-                      backgroundColor: DECLINE_RED,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      transform: `rotate(${vibrateAngle}deg) scale(${declineSpring})`,
-                      boxShadow: `0 ${dim * 0.012}px ${dim * 0.04}px rgba(0,0,0,0.30)`
-                    },
-                    children: /* @__PURE__ */ jsx(PhoneIcon, { size: phoneIconSize, rotated: true })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      color: textColor,
-                      fontSize: labelFontSize,
-                      fontWeight: 500,
-                      opacity: declineLabelOpacity,
-                      textShadow: "0 1px 8px rgba(0,0,0,0.28)"
-                    },
-                    children: declineLabel
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: labelFontSize * 0.55 }, children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: buttonSize,
-                      height: buttonSize,
-                      borderRadius: "50%",
-                      backgroundColor: ACCEPT_GREEN,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      transform: `rotate(${vibrateAngle}deg) scale(${acceptSpring * acceptPulse})`,
-                      boxShadow: `0 ${dim * 0.012}px ${dim * 0.05 * beatGlow}px rgba(52,199,89,0.45)`
-                    },
-                    children: /* @__PURE__ */ jsx(PhoneIcon, { size: phoneIconSize, rotated: false })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      color: textColor,
-                      fontSize: labelFontSize,
-                      fontWeight: 500,
-                      opacity: acceptLabelOpacity,
-                      textShadow: "0 1px 8px rgba(0,0,0,0.28)"
-                    },
-                    children: acceptLabel
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/visual-system/scene-templates/incoming-call.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var IncomingCallTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true,
-  safeZone,
-  backgroundEffect
-}) => {
-  const { primary, foreground } = resolveTokens(style);
-  const callerName = String(variables.callerName || "Your brand");
-  const subtitle = String(variables.subtitle || "is calling....");
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: "system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif"
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed: `${callerName}${subtitle}`,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          IncomingCallCard,
-          {
-            progress,
-            width,
-            height,
-            sceneDuration: sceneDuration ?? 4,
-            safeZone: { top: safeZone.top, bottom: safeZone.bottom },
-            callerName,
-            subtitle,
-            declineLabel: String(variables.declineLabel || "Decline"),
-            acceptLabel: String(variables.acceptLabel || "Accept"),
-            textColor: foreground,
-            accent: primary,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  IncomingCallTemplate
-};