@shotstack/shotstack-canvas 2.0.8 → 2.0.10

package/dist/entry.web.js

@@ -17897,8 +17897,7 @@ import {
   svgTransformSchema,
   svgGradientStopSchema,
   richCaptionActiveSchema as baseCaptionActiveSchema,
-  richCaptionWordAnimationSchema as baseCaptionWordAnimationSchema,
-  wordTimingSchema as baseWordTimingSchema
+  richCaptionWordAnimationSchema as baseCaptionWordAnimationSchema
 } from "@shotstack/schemas/zod";
 
 // src/config/canvas-constants.ts
@@ -18055,7 +18054,7 @@ var CanvasRichTextAssetSchema = richTextAssetSchema.extend({
   customFonts: external_exports.array(customFontSchema).optional()
 }).strict();
 var CanvasSvgAssetSchema = svgAssetSchema;
-var wordTimingSchema = baseWordTimingSchema.extend({
+var wordTimingSchema = external_exports.object({
   text: external_exports.string().min(1),
   start: external_exports.number().min(0),
   end: external_exports.number().min(0),
@@ -18096,27 +18095,18 @@ var richCaptionAssetSchema = external_exports.object({
   stroke: canvasStrokeSchema.optional(),
   shadow: canvasShadowSchema.optional(),
   background: canvasBackgroundSchema.optional(),
+  border: borderSchema.optional(),
   padding: paddingSchema.optional(),
   align: canvasAlignmentSchema.optional(),
   active: richCaptionActiveSchema.optional(),
   wordAnimation: richCaptionWordAnimationSchema.optional(),
-  position: external_exports.enum(["top", "center", "bottom"]).default("bottom"),
-  maxWidth: external_exports.number().min(0.1).max(1).default(0.9),
-  maxLines: external_exports.number().int().min(1).max(10).default(2),
   customFonts: external_exports.array(customFontSchema).optional()
 }).superRefine((data, ctx) => {
-  if (data.src && data.words) {
-    ctx.addIssue({
-      code: external_exports.ZodIssueCode.custom,
-      message: "src and words are mutually exclusive",
-      path: ["src"]
-    });
-  }
   if (!data.src && !data.words) {
     ctx.addIssue({
       code: external_exports.ZodIssueCode.custom,
       message: "Either src or words must be provided",
-      path: ["words"]
+      path: ["src"]
     });
   }
 });
@@ -35624,7 +35614,7 @@ var CaptionLayoutEngine = class {
       }
     }
     const wordGroups = groupWordsByPause(store, config2.pauseThreshold);
-    const pixelMaxWidth = config2.frameWidth * config2.maxWidth;
+    const pixelMaxWidth = config2.availableWidth;
     let spaceWidth;
     if (config2.measureTextWidth) {
       const fontString = `${config2.fontWeight} ${config2.fontSize}px "${config2.fontFamily}"`;
@@ -35654,31 +35644,45 @@ var CaptionLayoutEngine = class {
           };
         });
         const allWordIndices = lines.flatMap((l) => l.wordIndices);
+        if (allWordIndices.length === 0) {
+          return null;
+        }
         return {
           wordIndices: allWordIndices,
           startTime: store.startTimes[allWordIndices[0]],
           endTime: store.endTimes[allWordIndices[allWordIndices.length - 1]],
           lines
         };
-      });
+      }).filter((g) => g !== null);
     });
     const calculateGroupY = (group) => {
       const totalHeight = group.lines.length * config2.fontSize * config2.lineHeight;
-      switch (config2.position) {
+      switch (config2.verticalAlign) {
         case "top":
           return config2.fontSize * 1.5;
         case "bottom":
           return config2.frameHeight - totalHeight - config2.fontSize * 0.5;
-        case "center":
+        case "middle":
         default:
           return (config2.frameHeight - totalHeight) / 2 + config2.fontSize;
       }
     };
+    const calculateLineX = (lineWidth) => {
+      switch (config2.horizontalAlign) {
+        case "left":
+          return config2.paddingLeft;
+        case "right":
+          return config2.frameWidth - lineWidth - config2.paddingLeft;
+        case "center":
+        default:
+          return (config2.frameWidth - lineWidth) / 2;
+      }
+    };
     for (const group of groups) {
       const baseY = calculateGroupY(group);
       for (let lineIdx = 0; lineIdx < group.lines.length; lineIdx++) {
         const line = group.lines[lineIdx];
-        line.x = (config2.frameWidth - line.width) / 2;
+        line.x = calculateLineX(line.width);
         line.y = baseY + lineIdx * config2.fontSize * config2.lineHeight;
         let xCursor = line.x;
         for (const wordIdx of line.wordIndices) {
@@ -35969,6 +35973,7 @@ function calculateNoneState(ctx) {
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, activeScale = 1, charCount = 0, fontSize = 48) {
+  const safeSpeed = config2.speed > 0 ? config2.speed : 1;
   const ctx = {
     wordStart,
     wordEnd,
@@ -35979,25 +35984,25 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, a
   let partialState;
   switch (config2.style) {
     case "karaoke":
-      partialState = calculateKaraokeState(ctx, config2.speed);
+      partialState = calculateKaraokeState(ctx, safeSpeed);
       break;
     case "highlight":
       partialState = calculateHighlightState(ctx);
       break;
     case "pop":
-      partialState = calculatePopState(ctx, activeScale, config2.speed);
+      partialState = calculatePopState(ctx, activeScale, safeSpeed);
       break;
     case "fade":
-      partialState = calculateFadeState(ctx, config2.speed);
+      partialState = calculateFadeState(ctx, safeSpeed);
       break;
     case "slide":
-      partialState = calculateSlideState(ctx, config2.direction, config2.speed, fontSize);
+      partialState = calculateSlideState(ctx, config2.direction, safeSpeed, fontSize);
       break;
     case "bounce":
-      partialState = calculateBounceState(ctx, config2.speed, fontSize);
+      partialState = calculateBounceState(ctx, safeSpeed, fontSize);
       break;
     case "typewriter":
-      partialState = calculateTypewriterState(ctx, charCount, config2.speed);
+      partialState = calculateTypewriterState(ctx, charCount, safeSpeed);
       break;
     case "none":
     default:
@@ -36121,6 +36126,22 @@ function extractCaptionBackground(asset) {
     opacity: bg.opacity ?? 1
   };
 }
+function extractCaptionBackgroundBorderRadius(asset) {
+  const bg = asset.background;
+  return bg?.borderRadius ?? 0;
+}
+function extractCaptionBorder(asset) {
+  const border = asset.border;
+  if (!border || !border.width || border.width <= 0) {
+    return void 0;
+  }
+  return {
+    width: border.width,
+    color: border.color ?? "#000000",
+    opacity: border.opacity ?? 1,
+    radius: border.radius ?? 0
+  };
+}
 function extractAnimationConfig(asset) {
   const wordAnim = asset.wordAnimation;
   if (!wordAnim) {
@@ -36166,6 +36187,28 @@ function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
     background: extractBackgroundConfig(asset, isActive)
   };
 }
+function calculateGroupBounds(activeGroup, padding) {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const line of activeGroup.lines) {
+    const lineX = line.x;
+    const lineRight = line.x + line.width;
+    const lineY = line.y - line.height * 0.8;
+    const lineBottom = line.y + line.height * 0.2;
+    if (lineX < minX) minX = lineX;
+    if (lineRight > maxX) maxX = lineRight;
+    if (lineY < minY) minY = lineY;
+    if (lineBottom > maxY) maxY = lineBottom;
+  }
+  return {
+    bgX: minX - padding.left,
+    bgY: minY - padding.top,
+    bgWidth: maxX - minX + padding.left + padding.right,
+    bgHeight: maxY - minY + padding.top + padding.bottom
+  };
+}
 function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, _config) {
   if (layout.store.length === 0) {
     return [];
@@ -36185,36 +36228,40 @@ function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, _c
     fontConfig.size
   );
   const ops = [];
-  const captionBg = extractCaptionBackground(asset);
-  if (captionBg) {
-    const activeGroup = layout.groups.find(
-      (g) => frameTimeMs >= g.startTime && frameTimeMs <= g.endTime
-    );
-    if (activeGroup && activeGroup.lines.length > 0) {
-      const padding = extractCaptionPadding(asset);
-      let minX = Infinity;
-      let maxX = -Infinity;
-      let minY = Infinity;
-      let maxY = -Infinity;
-      for (const line of activeGroup.lines) {
-        const lineX = line.x;
-        const lineRight = line.x + line.width;
-        const lineY = line.y - line.height * 0.8;
-        const lineBottom = line.y + line.height * 0.2;
-        if (lineX < minX) minX = lineX;
-        if (lineRight > maxX) maxX = lineRight;
-        if (lineY < minY) minY = lineY;
-        if (lineBottom > maxY) maxY = lineBottom;
-      }
+  const activeGroup = layout.groups.find(
+    (g) => frameTimeMs >= g.startTime && frameTimeMs <= g.endTime
+  );
+  if (activeGroup && activeGroup.lines.length > 0) {
+    const padding = extractCaptionPadding(asset);
+    const { bgX, bgY, bgWidth, bgHeight } = calculateGroupBounds(activeGroup, padding);
+    const captionBg = extractCaptionBackground(asset);
+    if (captionBg) {
       ops.push({
         op: "DrawCaptionBackground",
-        x: minX - padding.left,
-        y: minY - padding.top,
-        width: maxX - minX + padding.left + padding.right,
-        height: maxY - minY + padding.top + padding.bottom,
+        x: bgX,
+        y: bgY,
+        width: bgWidth,
+        height: bgHeight,
         color: captionBg.color,
         opacity: captionBg.opacity,
-        borderRadius: 8
+        borderRadius: extractCaptionBackgroundBorderRadius(asset)
+      });
+    }
+    const borderConfig = extractCaptionBorder(asset);
+    if (borderConfig) {
+      const halfBorder = borderConfig.width / 2;
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - borderConfig.width,
+        height: bgHeight - borderConfig.width,
+        stroke: {
+          width: borderConfig.width,
+          color: borderConfig.color,
+          opacity: borderConfig.opacity
+        },
+        borderRadius: borderConfig.radius > 0 ? borderConfig.radius : void 0
       });
     }
   }

package/package.json

@@ -1,65 +1,65 @@
-{
-  "name": "@shotstack/shotstack-canvas",
-  "version": "2.0.8",
-  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
-  "type": "module",
-  "main": "./dist/entry.node.cjs",
-  "module": "./dist/entry.node.js",
-  "browser": "./dist/entry.web.js",
-  "types": "./dist/entry.node.d.ts",
-  "exports": {
-    ".": {
-      "node": {
-        "import": "./dist/entry.node.js",
-        "require": "./dist/entry.node.cjs"
-      },
-      "browser": "./dist/entry.web.js",
-      "default": "./dist/entry.web.js"
-    }
-  },
-  "files": [
-    "dist/**",
-    "scripts/postinstall.js",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "postinstall": "node scripts/postinstall.js",
-    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
-    "example:node": "node examples/node-example.mjs",
-    "example:video": "node examples/node-video.mjs",
-    "example:web": "vite dev examples/web-example",
-    "test:caption-web": "vite dev examples/caption-tests",
-    "prepublishOnly": "npm run build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "@resvg/resvg-js": "^2.6.2",
-    "@resvg/resvg-wasm": "^2.6.2",
-    "@shotstack/schemas": "1.8.5",
-    "canvas": "npm:@napi-rs/canvas@^0.1.54",
-    "ffmpeg-static": "^5.2.0",
-    "fontkit": "^2.0.4",
-    "harfbuzzjs": "0.4.12",
-    "lru-cache": "^11.2.5",
-    "mp4-muxer": "^5.1.3",
-    "zod": "^4.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.14.10",
-    "tsup": "^8.2.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vite-plugin-top-level-await": "1.6.0",
-    "vite-plugin-wasm": "3.5.0"
-  }
-}
+{
+  "name": "@shotstack/shotstack-canvas",
+  "version": "2.0.10",
+  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
+  "type": "module",
+  "main": "./dist/entry.node.cjs",
+  "module": "./dist/entry.node.js",
+  "browser": "./dist/entry.web.js",
+  "types": "./dist/entry.node.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/entry.node.js",
+        "require": "./dist/entry.node.cjs"
+      },
+      "browser": "./dist/entry.web.js",
+      "default": "./dist/entry.web.js"
+    }
+  },
+  "files": [
+    "dist/**",
+    "scripts/postinstall.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "postinstall": "node scripts/postinstall.js",
+    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
+    "example:node": "node examples/node-example.mjs",
+    "example:video": "node examples/node-video.mjs",
+    "example:web": "vite dev examples/web-example",
+    "test:caption-web": "vite dev examples/caption-tests",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
+    "@resvg/resvg-wasm": "^2.6.2",
+    "@shotstack/schemas": "1.8.7",
+    "canvas": "npm:@napi-rs/canvas@^0.1.54",
+    "ffmpeg-static": "^5.2.0",
+    "fontkit": "^2.0.4",
+    "harfbuzzjs": "0.4.12",
+    "lru-cache": "^11.2.5",
+    "mp4-muxer": "^5.1.3",
+    "zod": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "tsup": "^8.2.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-top-level-await": "1.6.0",
+    "vite-plugin-wasm": "3.5.0"
+  }
+}