framewebworker 0.1.0 → 0.1.1

package/dist/worker/render-worker.js

@@ -0,0 +1,256 @@
+// src/captions.ts
+var STYLE_PRESETS = {
+  hormozi: {
+    preset: "hormozi",
+    fontFamily: 'Impact, "Arial Black", sans-serif',
+    fontSize: 64,
+    fontWeight: "900",
+    color: "#FFFFFF",
+    strokeColor: "#000000",
+    strokeWidth: 4,
+    backgroundColor: "transparent",
+    backgroundPadding: 0,
+    backgroundRadius: 0,
+    position: "bottom",
+    textAlign: "center",
+    lineHeight: 1.1,
+    maxWidth: 0.9,
+    shadow: true,
+    shadowColor: "rgba(0,0,0,0.9)",
+    shadowBlur: 6,
+    shadowOffsetX: 2,
+    shadowOffsetY: 2,
+    uppercase: true,
+    wordHighlight: true,
+    wordHighlightColor: "#FFD700",
+    wordHighlightTextColor: "#000000"
+  },
+  modern: {
+    preset: "modern",
+    fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
+    fontSize: 42,
+    fontWeight: "700",
+    color: "#FFFFFF",
+    strokeColor: "transparent",
+    strokeWidth: 0,
+    backgroundColor: "rgba(0,0,0,0.65)",
+    backgroundPadding: 12,
+    backgroundRadius: 8,
+    position: "bottom",
+    textAlign: "center",
+    lineHeight: 1.3,
+    maxWidth: 0.85,
+    shadow: false,
+    shadowColor: "transparent",
+    shadowBlur: 0,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    uppercase: false,
+    wordHighlight: false,
+    wordHighlightColor: "#3B82F6",
+    wordHighlightTextColor: "#FFFFFF"
+  },
+  minimal: {
+    preset: "minimal",
+    fontFamily: '"Helvetica Neue", Arial, sans-serif',
+    fontSize: 36,
+    fontWeight: "400",
+    color: "#FFFFFF",
+    strokeColor: "transparent",
+    strokeWidth: 0,
+    backgroundColor: "transparent",
+    backgroundPadding: 0,
+    backgroundRadius: 0,
+    position: "bottom",
+    textAlign: "center",
+    lineHeight: 1.4,
+    maxWidth: 0.8,
+    shadow: true,
+    shadowColor: "rgba(0,0,0,0.8)",
+    shadowBlur: 8,
+    shadowOffsetX: 0,
+    shadowOffsetY: 2,
+    uppercase: false,
+    wordHighlight: false,
+    wordHighlightColor: "#FFFFFF",
+    wordHighlightTextColor: "#000000"
+  },
+  bold: {
+    preset: "bold",
+    fontFamily: '"Arial Black", "Helvetica Neue", Arial, sans-serif',
+    fontSize: 56,
+    fontWeight: "900",
+    color: "#FFFF00",
+    strokeColor: "#000000",
+    strokeWidth: 5,
+    backgroundColor: "transparent",
+    backgroundPadding: 0,
+    backgroundRadius: 0,
+    position: "center",
+    textAlign: "center",
+    lineHeight: 1.2,
+    maxWidth: 0.88,
+    shadow: true,
+    shadowColor: "rgba(0,0,0,1)",
+    shadowBlur: 4,
+    shadowOffsetX: 3,
+    shadowOffsetY: 3,
+    uppercase: true,
+    wordHighlight: false,
+    wordHighlightColor: "#FF0000",
+    wordHighlightTextColor: "#FFFFFF"
+  }
+};
+function mergeStyle(base, overrides) {
+  return overrides ? { ...base, ...overrides } : base;
+}
+function getActiveCaptions(segments, currentTime) {
+  return segments.filter(
+    (seg) => currentTime >= seg.startTime && currentTime < seg.endTime
+  );
+}
+function wrapText(ctx2, text, maxWidth) {
+  const words = text.split(" ");
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const test = current ? `${current} ${word}` : word;
+    if (ctx2.measureText(test).width > maxWidth && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = test;
+    }
+  }
+  if (current) lines.push(current);
+  return lines;
+}
+function renderCaption(ctx2, segment, resolvedStyle, canvasWidth, canvasHeight) {
+  const style = resolvedStyle;
+  const text = style.uppercase ? segment.text.toUpperCase() : segment.text;
+  ctx2.save();
+  const scaledFontSize = style.fontSize / 1080 * canvasHeight;
+  ctx2.font = `${style.fontWeight} ${scaledFontSize}px ${style.fontFamily}`;
+  ctx2.textAlign = style.textAlign;
+  ctx2.textBaseline = "bottom";
+  const maxPx = style.maxWidth * canvasWidth;
+  const lines = wrapText(ctx2, text, maxPx);
+  const lineH = scaledFontSize * style.lineHeight;
+  const totalH = lines.length * lineH;
+  let baseY;
+  if (style.position === "top") {
+    baseY = scaledFontSize * 1.5;
+  } else if (style.position === "center") {
+    baseY = canvasHeight / 2 - totalH / 2 + lineH;
+  } else {
+    baseY = canvasHeight - scaledFontSize * 1.2;
+  }
+  const cx = canvasWidth / 2;
+  lines.forEach((line, i) => {
+    const y = baseY + i * lineH;
+    if (style.backgroundColor && style.backgroundColor !== "transparent") {
+      const metrics = ctx2.measureText(line);
+      const bw = metrics.width + style.backgroundPadding * 2;
+      const bh = lineH + style.backgroundPadding;
+      const bx = cx - bw / 2;
+      const by = y - lineH;
+      ctx2.fillStyle = style.backgroundColor;
+      if (style.backgroundRadius > 0) {
+        roundRect(ctx2, bx, by, bw, bh, style.backgroundRadius);
+        ctx2.fill();
+      } else {
+        ctx2.fillRect(bx, by, bw, bh);
+      }
+    }
+    if (style.shadow) {
+      ctx2.shadowColor = style.shadowColor;
+      ctx2.shadowBlur = style.shadowBlur;
+      ctx2.shadowOffsetX = style.shadowOffsetX;
+      ctx2.shadowOffsetY = style.shadowOffsetY;
+    }
+    if (style.strokeWidth > 0 && style.strokeColor !== "transparent") {
+      ctx2.lineWidth = style.strokeWidth;
+      ctx2.strokeStyle = style.strokeColor;
+      ctx2.strokeText(line, cx, y);
+    }
+    ctx2.shadowColor = "transparent";
+    ctx2.shadowBlur = 0;
+    ctx2.fillStyle = style.color;
+    ctx2.fillText(line, cx, y);
+  });
+  ctx2.restore();
+}
+function roundRect(ctx2, x, y, w, h, r) {
+  ctx2.beginPath();
+  ctx2.moveTo(x + r, y);
+  ctx2.lineTo(x + w - r, y);
+  ctx2.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx2.lineTo(x + w, y + h - r);
+  ctx2.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx2.lineTo(x + r, y + h);
+  ctx2.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx2.lineTo(x, y + r);
+  ctx2.quadraticCurveTo(x, y, x + r, y);
+  ctx2.closePath();
+}
+
+// src/worker/render-worker.ts
+var meta = null;
+var canvas = null;
+var ctx = null;
+var collected = [];
+self.onmessage = (event) => {
+  const msg = event.data;
+  switch (msg.type) {
+    case "init": {
+      meta = msg.meta;
+      canvas = new OffscreenCanvas(meta.width, meta.height);
+      ctx = canvas.getContext("2d");
+      collected.length = 0;
+      break;
+    }
+    case "frame": {
+      if (!meta || !ctx) return;
+      const { bitmap, timestamp, index } = msg;
+      ctx.clearRect(0, 0, meta.width, meta.height);
+      ctx.drawImage(bitmap, 0, 0, meta.width, meta.height);
+      bitmap.close();
+      if (meta.captions?.segments?.length) {
+        const baseStylePreset = meta.captions.style?.preset ?? "modern";
+        const baseStyle = mergeStyle(STYLE_PRESETS[baseStylePreset], meta.captions.style);
+        const active = getActiveCaptions(meta.captions.segments, timestamp);
+        for (const seg of active) {
+          const segStyle = mergeStyle(baseStyle, seg.style);
+          renderCaption(
+            ctx,
+            seg,
+            segStyle,
+            meta.width,
+            meta.height
+          );
+        }
+      }
+      const imageData = ctx.getImageData(0, 0, meta.width, meta.height);
+      const buffer = imageData.data.buffer.slice(
+        imageData.data.byteOffset,
+        imageData.data.byteOffset + imageData.data.byteLength
+      );
+      collected.push({ buffer, timestamp, width: meta.width, height: meta.height });
+      const progress = { type: "progress", value: (index + 1) / meta.totalFrames };
+      self.postMessage(progress);
+      break;
+    }
+    case "end": {
+      const frames = collected.slice();
+      const transferables = frames.map((f) => f.buffer);
+      const done = { type: "done", frames };
+      self.postMessage(done, transferables);
+      collected.length = 0;
+      break;
+    }
+    case "abort": {
+      collected.length = 0;
+      break;
+    }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framewebworker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Browser-native video rendering and clip export library. Trim, caption, and export MP4 Blobs in the browser — no server needed.",
   "keywords": [
     "video",