@adforge-adgeniq/render 0.1.0

package/dist/remotion/index.js

@@ -0,0 +1,373 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/remotion/index.tsx
+var remotion_exports = {};
+__export(remotion_exports, {
+  AdForgeComposition: () => AdForgeComposition,
+  COMPOSITION_ID: () => COMPOSITION_ID,
+  getLayout: () => getLayout
+});
+module.exports = __toCommonJS(remotion_exports);
+
+// src/remotion/AdForgeComposition.tsx
+var import_remotion8 = require("remotion");
+
+// src/remotion/scenes/AvatarScene.tsx
+var import_remotion = require("remotion");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AvatarScene({ url, layout, layoutConfig, durationFrames }) {
+  const frame = (0, import_remotion.useCurrentFrame)();
+  const opacity = (0, import_remotion.interpolate)(frame, [0, 6], [0, 1], { extrapolateRight: "clamp" });
+  const fadeOutOpacity = (0, import_remotion.interpolate)(frame, [durationFrames - 6, durationFrames], [1, 0], { extrapolateLeft: "clamp" });
+  const finalOpacity = Math.min(opacity, fadeOutOpacity);
+  if (!url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remotion.AbsoluteFill, { style: { background: "#1a1a2e", opacity: finalOpacity, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#666", fontSize: 32 }, children: "Avatar" }) });
+  }
+  if (layout === "pip") {
+    const { pipAvatarLeft, pipAvatarTop, pipAvatarWidth, width, height } = layoutConfig;
+    const pw = Math.round(width * pipAvatarWidth);
+    const ph = Math.round(pw * (16 / 9));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remotion.AbsoluteFill, { style: { opacity: finalOpacity }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      position: "absolute",
+      left: Math.round(width * pipAvatarLeft),
+      top: Math.round(height * pipAvatarTop),
+      width: pw,
+      height: ph,
+      borderRadius: 12,
+      overflow: "hidden",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.6)"
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remotion.Video, { src: url, style: { width: "100%", height: "100%", objectFit: "cover" } }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remotion.AbsoluteFill, { style: { opacity: finalOpacity }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remotion.Video, { src: url, style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+}
+
+// src/remotion/scenes/BrollScene.tsx
+var import_remotion2 = require("remotion");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IMAGE_EXTS = /\.(jpg|jpeg|png|webp|gif)(\?|$)/i;
+function BrollScene({ url, motion, durationFrames, layoutConfig }) {
+  const frame = (0, import_remotion2.useCurrentFrame)();
+  const opacity = (0, import_remotion2.interpolate)(frame, [0, 8, durationFrames - 8, durationFrames], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const isKenBurnsOut = motion === "kenburns_out";
+  const scaleStart = isKenBurnsOut ? 1.35 : 1;
+  const scaleEnd = isKenBurnsOut ? 1 : 1.35;
+  const scale = (0, import_remotion2.interpolate)(frame, [0, durationFrames], [scaleStart, scaleEnd], { extrapolateRight: "clamp" });
+  if (!url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion2.AbsoluteFill, { style: { background: "#111118", opacity, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#555", fontSize: 28 }, children: "B-Roll" }) });
+  }
+  const isImage = IMAGE_EXTS.test(url);
+  const { width, height } = layoutConfig;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion2.AbsoluteFill, { style: { opacity, overflow: "hidden" }, children: isImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_remotion2.Img,
+    {
+      src: url,
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        transform: `scale(${scale})`,
+        transformOrigin: "center center"
+      }
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion2.Video, { src: url, style: { width, height, objectFit: "cover" } }) });
+}
+
+// src/remotion/scenes/TextCardScene.tsx
+var import_remotion3 = require("remotion");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TextCardScene({ captions, durationFrames, layoutConfig }) {
+  const frame = (0, import_remotion3.useCurrentFrame)();
+  const opacity = (0, import_remotion3.interpolate)(frame, [0, 8, durationFrames - 8, durationFrames], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const text = captions.map((c) => c.text).join(" ");
+  const fontSize = layoutConfig.captionFontSize * 1.2;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion3.AbsoluteFill, { style: {
+    background: "linear-gradient(135deg, #0d0d1a 0%, #1a1a3e 100%)",
+    opacity,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: `0 ${layoutConfig.captionMarginSide * 2}px`
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: {
+    color: "white",
+    fontSize,
+    fontWeight: 800,
+    textAlign: "center",
+    lineHeight: 1.25,
+    fontFamily: "'Arial Black', Arial, sans-serif",
+    textShadow: "0 2px 16px rgba(0,0,0,0.8)",
+    margin: 0
+  }, children: text }) });
+}
+
+// src/remotion/captions/KaraokeCaptions.tsx
+var import_remotion4 = require("remotion");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function KaraokeCaptions({ captions, sceneStartS, layout }) {
+  const frame = (0, import_remotion4.useCurrentFrame)();
+  const { fps } = (0, import_remotion4.useVideoConfig)();
+  const currentS = sceneStartS + frame / fps;
+  const active = captions.find(
+    (c) => currentS >= c.start_s && currentS < c.end_s
+  );
+  if (!active) return null;
+  const { captionFontSize, captionMarginBottom, captionMarginSide, height } = layout;
+  const progress = (currentS - active.start_s) / (active.end_s - active.start_s);
+  const scale = (0, import_remotion4.interpolate)(progress, [0, 0.1, 0.9, 1], [0.92, 1, 1, 0.95]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_remotion4.AbsoluteFill, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    position: "absolute",
+    bottom: captionMarginBottom,
+    left: captionMarginSide,
+    right: captionMarginSide,
+    display: "flex",
+    justifyContent: "center"
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
+    display: "inline-block",
+    background: "rgba(0,0,0,0.72)",
+    color: "#FFE600",
+    fontSize: captionFontSize,
+    fontWeight: 900,
+    fontFamily: "'Arial Black', Arial, sans-serif",
+    padding: "6px 16px",
+    borderRadius: 8,
+    transform: `scale(${scale})`,
+    textShadow: "0 1px 4px rgba(0,0,0,0.9)",
+    lineHeight: 1.3,
+    textAlign: "center"
+  }, children: active.text }) }) });
+}
+
+// src/remotion/captions/BlockCaptions.tsx
+var import_remotion5 = require("remotion");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function BlockCaptions({ captions, sceneStartS, layout }) {
+  const frame = (0, import_remotion5.useCurrentFrame)();
+  const { fps } = (0, import_remotion5.useVideoConfig)();
+  const currentS = sceneStartS + frame / fps;
+  const active = captions.filter(
+    (c) => currentS >= c.start_s && currentS < c.end_s + 0.5
+  );
+  if (!active.length) return null;
+  const { captionFontSize, captionMarginBottom, captionMarginSide } = layout;
+  const text = active.map((c) => c.text).join(" ");
+  const opacity = (0, import_remotion5.interpolate)(frame, [0, 4], [0, 1], { extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_remotion5.AbsoluteFill, { style: { pointerEvents: "none", opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+    position: "absolute",
+    bottom: captionMarginBottom,
+    left: captionMarginSide,
+    right: captionMarginSide,
+    textAlign: "center"
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
+    display: "inline-block",
+    background: "rgba(0,0,0,0.68)",
+    color: "white",
+    fontSize: captionFontSize * 0.9,
+    fontWeight: 700,
+    fontFamily: "Arial, sans-serif",
+    padding: "8px 20px",
+    borderRadius: 6,
+    lineHeight: 1.4
+  }, children: text }) }) });
+}
+
+// src/remotion/EndCard.tsx
+var import_remotion6 = require("remotion");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function EndCard({ endCard, layout }) {
+  const frame = (0, import_remotion6.useCurrentFrame)();
+  const opacity = (0, import_remotion6.interpolate)(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
+  const translateY = (0, import_remotion6.interpolate)(frame, [0, 15], [24, 0], { extrapolateRight: "clamp" });
+  const { captionFontSize } = layout;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_remotion6.AbsoluteFill, { style: {
+    background: "linear-gradient(160deg, #0d0d1a 0%, #1a1a4a 100%)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 24,
+    opacity
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { transform: `translateY(${translateY}px)`, textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: {
+      color: "#FFE600",
+      fontSize: captionFontSize * 1.4,
+      fontWeight: 900,
+      fontFamily: "'Arial Black', Arial, sans-serif",
+      margin: "0 0 12px"
+    }, children: endCard.cta_text }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: {
+      color: "rgba(255,255,255,0.7)",
+      fontSize: captionFontSize * 0.75,
+      fontFamily: "Arial, sans-serif",
+      margin: 0
+    }, children: endCard.url_display })
+  ] }) });
+}
+
+// src/remotion/Watermark.tsx
+var import_remotion7 = require("remotion");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Watermark({ layout }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_remotion7.AbsoluteFill, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    position: "absolute",
+    top: Math.round(layout.height * 0.04),
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center"
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
+    background: "rgba(0,0,0,0.45)",
+    color: "rgba(255,255,255,0.70)",
+    fontSize: Math.round(layout.captionFontSize * 0.55),
+    fontFamily: "Arial, sans-serif",
+    fontWeight: 600,
+    padding: "4px 14px",
+    borderRadius: 6,
+    letterSpacing: 1
+  }, children: "Made with AdForge" }) }) });
+}
+
+// src/remotion/layout.ts
+var LAYOUTS = {
+  "9:16": {
+    width: 1080,
+    height: 1920,
+    pipAvatarLeft: 0.03,
+    pipAvatarTop: 0.55,
+    pipAvatarWidth: 0.35,
+    captionMarginBottom: 260,
+    captionMarginSide: 40,
+    captionFontSize: 52
+  },
+  "16:9": {
+    width: 1920,
+    height: 1080,
+    pipAvatarLeft: 0.65,
+    pipAvatarTop: 0.05,
+    pipAvatarWidth: 0.3,
+    captionMarginBottom: 120,
+    captionMarginSide: 80,
+    captionFontSize: 42
+  },
+  "1:1": {
+    width: 1080,
+    height: 1080,
+    pipAvatarLeft: 0.02,
+    pipAvatarTop: 0.55,
+    pipAvatarWidth: 0.35,
+    captionMarginBottom: 140,
+    captionMarginSide: 40,
+    captionFontSize: 46
+  }
+};
+function getLayout(aspect) {
+  return LAYOUTS[aspect];
+}
+
+// src/remotion/AdForgeComposition.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var COMPOSITION_ID = "AdForge";
+function AdForgeComposition({
+  storyboard,
+  aspect,
+  captionStyle,
+  watermark = false,
+  assetUrls = {},
+  avatarUrls = {}
+}) {
+  const { fps } = (0, import_remotion8.useVideoConfig)();
+  const layout = getLayout(aspect);
+  let sceneStart = 0;
+  const sceneElements = [];
+  for (const scene of storyboard.scenes) {
+    const durationFrames = Math.round(scene.duration_s * fps);
+    const startFrame = Math.round(sceneStart * fps);
+    let inner = null;
+    if (scene.type === "avatar") {
+      const url = scene.avatar_render_id ? avatarUrls[scene.avatar_render_id] : void 0;
+      inner = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        AvatarScene,
+        {
+          url,
+          layout: scene.layout ?? "fullframe",
+          layoutConfig: layout,
+          durationFrames
+        }
+      );
+    } else if (scene.type === "broll" || scene.type === "product_still") {
+      const url = scene.asset_id ? assetUrls[scene.asset_id] : void 0;
+      inner = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        BrollScene,
+        {
+          url,
+          motion: scene.motion,
+          durationFrames,
+          layoutConfig: layout
+        }
+      );
+    } else {
+      inner = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        TextCardScene,
+        {
+          captions: scene.captions,
+          durationFrames,
+          layoutConfig: layout
+        }
+      );
+    }
+    const captionOverlay = captionStyle === "KARAOKE" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      KaraokeCaptions,
+      {
+        captions: scene.captions,
+        sceneStartS: sceneStart,
+        layout
+      }
+    ) : captionStyle === "BLOCK" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      BlockCaptions,
+      {
+        captions: scene.captions,
+        sceneStartS: sceneStart,
+        layout
+      }
+    ) : null;
+    sceneElements.push(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_remotion8.Sequence, { from: startFrame, durationInFrames: durationFrames, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_remotion8.AbsoluteFill, { children: [
+        inner,
+        captionOverlay
+      ] }) }, scene.id)
+    );
+    sceneStart += scene.duration_s;
+  }
+  if (storyboard.end_card) {
+    const endCardStart = Math.round(sceneStart * fps);
+    const endCardDuration = Math.round(3 * fps);
+    sceneElements.push(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_remotion8.Sequence, { from: endCardStart, durationInFrames: endCardDuration, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EndCard, { endCard: storyboard.end_card, layout }) }, "end-card")
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_remotion8.AbsoluteFill, { style: { background: "#0d0d12" }, children: [
+    sceneElements,
+    watermark && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Watermark, { layout })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdForgeComposition,
+  COMPOSITION_ID,
+  getLayout
+});