reframe-video 0.6.5 → 0.6.7

package/dist/browserEntry.js

@@ -342,6 +342,7 @@
     line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
     text: [...COMMON_PROPS, "content", "contentDecimals", "contentThousands", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
     image: [...COMMON_PROPS, "src", "width", "height", "fit"],
+    video: [...COMMON_PROPS, "src", "width", "height", "fit", "start", "rate", "clipStart", "volume"],
     path: [...COMMON_PROPS, "d", "fill", "stroke", "strokeWidth", "progress", "originX", "originY"],
     group: COMMON_PROPS
   };
@@ -786,6 +787,33 @@
           });
           return;
         }
+        case "video": {
+          const width = num(id, "width", node.props.width);
+          const height = num(id, "height", node.props.height);
+          const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+          const fps = compiled2.ir.fps ?? 30;
+          const start = node.props.start ?? 0;
+          const rate = node.props.rate ?? 1;
+          const clipStart = node.props.clipStart ?? 0;
+          const srcT = clipStart + Math.max(0, t - start) * rate;
+          const frame = Math.max(0, Math.round(srcT * fps));
+          ops.push({
+            type: "video",
+            id,
+            transform: matrix,
+            opacity,
+            src: str(id, "src", node.props.src),
+            width,
+            height,
+            offsetX: -width * ax,
+            offsetY: -height * ay,
+            frame,
+            ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
+            ...fx,
+            ...clipSpread
+          });
+          return;
+        }
         case "path": {
           const ox = num(id, "originX", node.props.originX ?? 0);
           const oy = num(id, "originY", node.props.originY ?? 0);
@@ -879,7 +907,7 @@
     for (const s of paint.stops) g.addColorStop(Math.max(0, Math.min(1, s.offset)), s.color);
     return g;
   }
-  function renderFrame(ctx2, compiled2, t, images2) {
+  function renderFrame(ctx2, compiled2, t, images2, videos2) {
     const { size, background } = compiled2.ir;
     ctx2.setTransform(1, 0, 0, 1, 0, 0);
     ctx2.clearRect(0, 0, size.width, size.height);
@@ -887,9 +915,9 @@
       ctx2.fillStyle = background;
       ctx2.fillRect(0, 0, size.width, size.height);
     }
-    drawDisplayList(ctx2, evaluate(compiled2, t), images2);
+    drawDisplayList(ctx2, evaluate(compiled2, t), images2, videos2);
   }
-  function drawDisplayList(ctx2, ops, images2) {
+  function drawDisplayList(ctx2, ops, images2, videos2) {
     for (const op of ops) {
       ctx2.save();
       if (op.clips) {
@@ -971,28 +999,11 @@
           break;
         }
         case "image": {
-          const img = images2?.get(op.src);
-          if (img) {
-            if (op.fit === "cover") {
-              const [iw, ih] = intrinsicSize(img);
-              const { sx, sy, sw, sh } = coverRect(iw, ih, op.width, op.height);
-              ctx2.drawImage(img, sx, sy, sw, sh, op.offsetX, op.offsetY, op.width, op.height);
-            } else {
-              ctx2.drawImage(img, op.offsetX, op.offsetY, op.width, op.height);
-            }
-          } else {
-            ctx2.fillStyle = "#2A2A30";
-            ctx2.fillRect(op.offsetX, op.offsetY, op.width, op.height);
-            ctx2.strokeStyle = "#FF00FF";
-            ctx2.lineWidth = 2;
-            ctx2.strokeRect(op.offsetX, op.offsetY, op.width, op.height);
-            ctx2.beginPath();
-            ctx2.moveTo(op.offsetX, op.offsetY);
-            ctx2.lineTo(op.offsetX + op.width, op.offsetY + op.height);
-            ctx2.moveTo(op.offsetX + op.width, op.offsetY);
-            ctx2.lineTo(op.offsetX, op.offsetY + op.height);
-            ctx2.stroke();
-          }
+          drawRaster(ctx2, images2?.get(op.src), op);
+          break;
+        }
+        case "video": {
+          drawRaster(ctx2, videos2?.frame(op.src, op.frame), op);
           break;
         }
         case "path": {
@@ -1047,6 +1058,29 @@
     const a = img;
     return [a.naturalWidth || a.width || 0, a.naturalHeight || a.height || 0];
   }
+  function drawRaster(ctx2, img, op) {
+    if (img) {
+      if (op.fit === "cover") {
+        const [iw, ih] = intrinsicSize(img);
+        const { sx, sy, sw, sh } = coverRect(iw, ih, op.width, op.height);
+        ctx2.drawImage(img, sx, sy, sw, sh, op.offsetX, op.offsetY, op.width, op.height);
+      } else {
+        ctx2.drawImage(img, op.offsetX, op.offsetY, op.width, op.height);
+      }
+      return;
+    }
+    ctx2.fillStyle = "#2A2A30";
+    ctx2.fillRect(op.offsetX, op.offsetY, op.width, op.height);
+    ctx2.strokeStyle = "#FF00FF";
+    ctx2.lineWidth = 2;
+    ctx2.strokeRect(op.offsetX, op.offsetY, op.width, op.height);
+    ctx2.beginPath();
+    ctx2.moveTo(op.offsetX, op.offsetY);
+    ctx2.lineTo(op.offsetX + op.width, op.offsetY + op.height);
+    ctx2.moveTo(op.offsetX + op.width, op.offsetY);
+    ctx2.lineTo(op.offsetX, op.offsetY + op.height);
+    ctx2.stroke();
+  }
   function quoteFamily(family) {
     return family.includes(" ") && !family.includes('"') ? `"${family}"` : family;
   }
@@ -1069,9 +1103,22 @@
   var ctx = null;
   var canvas = null;
   var images = /* @__PURE__ */ new Map();
+  var videoFrames = /* @__PURE__ */ new Map();
+  var decode = (dataUrl) => {
+    const img = new Image();
+    img.src = dataUrl;
+    return img.decode().then(() => img);
+  };
+  var videos = {
+    frame(src, index) {
+      const frames = videoFrames.get(src);
+      if (!frames || frames.length === 0) return void 0;
+      return frames[Math.max(0, Math.min(index, frames.length - 1))];
+    }
+  };
   window.__reframe = {
-    // fully decode every image before the first frame — renderFrame is sync
-    async init(ir, assets = {}) {
+    // fully decode every image/video frame before the first frame — renderFrame is sync
+    async init(ir, assets = {}, videoAssets = {}) {
       compiled = compileScene(ir);
       canvas = document.createElement("canvas");
       canvas.width = ir.size.width;
@@ -1079,19 +1126,19 @@
       document.body.appendChild(canvas);
       ctx = canvas.getContext("2d", { willReadFrequently: true });
       if (!ctx) throw new Error("could not create 2d context");
-      await Promise.all(
-        Object.entries(assets).map(async ([src, dataUrl]) => {
-          const img = new Image();
-          img.src = dataUrl;
-          await img.decode();
-          images.set(src, img);
+      await Promise.all([
+        ...Object.entries(assets).map(async ([src, dataUrl]) => {
+          images.set(src, await decode(dataUrl));
+        }),
+        ...Object.entries(videoAssets).map(async ([src, frames]) => {
+          videoFrames.set(src, await Promise.all(frames.map(decode)));
         })
-      );
+      ]);
       return { duration: compiled.duration, fps: ir.fps ?? 30 };
     },
     renderFrame(t) {
       if (!compiled || !ctx || !canvas) throw new Error("init() not called");
-      renderFrame(ctx, compiled, t, images);
+      renderFrame(ctx, compiled, t, images, videos);
       return canvas.toDataURL("image/png");
     }
   };