@vanillaskyai/video 0.1.0

package/dist/incoming-call-62MFZL3Z.js

@@ -0,0 +1,320 @@
+import {
+  fitTextSize,
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import "./chunk-ABZACD4G.js";
+import {
+  SPRING_BOUNCY,
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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: "#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
+};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { V as Video } from './types-B-PZR6G_.js';
+export { a as VideoAudio, b as VideoBackground, c as VideoBrand, d as VideoInput, e as VideoOrientation, f as VideoScene, g as VideoStyle, h as VideoStyleOptions, i as VideoSuppliedMedia } from './types-B-PZR6G_.js';
+export { V as VideoStatus } from './state-DZcKuS32.js';
+
+type VideoValidationErrorCode = "invalid_video" | "unsupported_video_version";
+declare class VideoValidationError extends Error {
+    readonly code: VideoValidationErrorCode;
+    constructor(message: string, code?: VideoValidationErrorCode);
+}
+/** Parse a persisted Video using the current-only 0.1 schema policy. */
+declare function parseVideo(value: unknown): Video;
+
+declare function getVideoDuration(config: Video): number;
+
+export { Video, VideoValidationError, type VideoValidationErrorCode, getVideoDuration, parseVideo };

package/dist/index.js

@@ -0,0 +1,14 @@
+import {
+  VideoValidationError,
+  parseVideo
+} from "./chunk-GHJEAP4O.js";
+import "./chunk-EE6PK6XC.js";
+import {
+  getVideoDuration
+} from "./chunk-SPVTJH3F.js";
+import "./chunk-XGRA2MUV.js";
+export {
+  VideoValidationError,
+  getVideoDuration,
+  parseVideo
+};