@shotstack/shotstack-canvas 2.0.9 → 2.0.10

package/dist/entry.node.js

@@ -19,8 +19,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
@@ -177,7 +176,7 @@ var CanvasRichTextAssetSchema = richTextAssetSchema.extend({
   customFonts: z.array(customFontSchema).optional()
 }).strict();
 var CanvasSvgAssetSchema = svgAssetSchema;
-var wordTimingSchema = baseWordTimingSchema.extend({
+var wordTimingSchema = z.object({
   text: z.string().min(1),
   start: z.number().min(0),
   end: z.number().min(0),
@@ -218,27 +217,18 @@ var richCaptionAssetSchema = z.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: z.enum(["top", "center", "bottom"]).default("bottom"),
-  maxWidth: z.number().min(0.1).max(1).default(0.9),
-  maxLines: z.number().int().min(1).max(10).default(2),
   customFonts: z.array(customFontSchema).optional()
 }).superRefine((data, ctx) => {
-  if (data.src && data.words) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: "src and words are mutually exclusive",
-      path: ["src"]
-    });
-  }
   if (!data.src && !data.words) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
       message: "Either src or words must be provided",
-      path: ["words"]
+      path: ["src"]
     });
   }
 });
@@ -2104,6 +2094,12 @@ async function createNodePainter(opts) {
             if (!fill) {
               fill = makeGradientFromBBox(context, fillOp.fill, localBBox);
               gradientCache.set(cacheKey, fill);
+              if (gradientCache.size > GRADIENT_CACHE_MAX) {
+                const firstEntry = gradientCache.keys().next();
+                if (!firstEntry.done) {
+                  gradientCache.delete(firstEntry.value);
+                }
+              }
             }
             context.fillStyle = fill;
             context.beginPath();
@@ -2451,7 +2447,7 @@ async function createNodePainter(opts) {
     toRawRGBA() {
       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
       return {
-        data: new Uint8ClampedArray(imageData.data),
+        data: imageData.data,
         width: canvas.width,
         height: canvas.height
       };
@@ -4074,7 +4070,7 @@ var CaptionLayoutEngine = class {
       }
     }
     const wordGroups = groupWordsByPause(store, config.pauseThreshold);
-    const pixelMaxWidth = config.frameWidth * config.maxWidth;
+    const pixelMaxWidth = config.availableWidth;
     let spaceWidth;
     if (config.measureTextWidth) {
       const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
@@ -4104,31 +4100,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 * config.fontSize * config.lineHeight;
-      switch (config.position) {
+      switch (config.verticalAlign) {
         case "top":
           return config.fontSize * 1.5;
         case "bottom":
           return config.frameHeight - totalHeight - config.fontSize * 0.5;
-        case "center":
+        case "middle":
         default:
           return (config.frameHeight - totalHeight) / 2 + config.fontSize;
       }
     };
+    const calculateLineX = (lineWidth) => {
+      switch (config.horizontalAlign) {
+        case "left":
+          return config.paddingLeft;
+        case "right":
+          return config.frameWidth - lineWidth - config.paddingLeft;
+        case "center":
+        default:
+          return (config.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 = (config.frameWidth - line.width) / 2;
+        line.x = calculateLineX(line.width);
         line.y = baseY + lineIdx * config.fontSize * config.lineHeight;
         let xCursor = line.x;
         for (const wordIdx of line.wordIndices) {
@@ -4419,6 +4429,7 @@ function calculateNoneState(ctx) {
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48) {
+  const safeSpeed = config.speed > 0 ? config.speed : 1;
   const ctx = {
     wordStart,
     wordEnd,
@@ -4429,25 +4440,25 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, ac
   let partialState;
   switch (config.style) {
     case "karaoke":
-      partialState = calculateKaraokeState(ctx, config.speed);
+      partialState = calculateKaraokeState(ctx, safeSpeed);
       break;
     case "highlight":
       partialState = calculateHighlightState(ctx);
       break;
     case "pop":
-      partialState = calculatePopState(ctx, activeScale, config.speed);
+      partialState = calculatePopState(ctx, activeScale, safeSpeed);
       break;
     case "fade":
-      partialState = calculateFadeState(ctx, config.speed);
+      partialState = calculateFadeState(ctx, safeSpeed);
       break;
     case "slide":
-      partialState = calculateSlideState(ctx, config.direction, config.speed, fontSize);
+      partialState = calculateSlideState(ctx, config.direction, safeSpeed, fontSize);
       break;
     case "bounce":
-      partialState = calculateBounceState(ctx, config.speed, fontSize);
+      partialState = calculateBounceState(ctx, safeSpeed, fontSize);
       break;
     case "typewriter":
-      partialState = calculateTypewriterState(ctx, charCount, config.speed);
+      partialState = calculateTypewriterState(ctx, charCount, safeSpeed);
       break;
     case "none":
     default:
@@ -4571,6 +4582,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) {
@@ -4616,6 +4643,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 [];
@@ -4635,36 +4684,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
       });
     }
   }
@@ -5488,18 +5541,28 @@ var RichCaptionRenderer = class {
     const font = asset.font;
     const style = asset.style;
     const measureTextWidth = await createCanvasTextMeasurer();
+    const fontSize = font?.size ?? 24;
+    const lineHeight = style?.lineHeight ?? 1.2;
+    const padding = this.extractPadding(asset);
+    const availableWidth = this.width - padding.left - padding.right;
+    const availableHeight = this.height - padding.top - padding.bottom;
+    const computedMaxLines = Math.max(1, Math.min(10, Math.floor(availableHeight / (fontSize * lineHeight))));
+    const verticalAlign = this.mapVerticalAlign(asset);
+    const horizontalAlign = this.mapHorizontalAlign(asset);
     const layoutConfig = {
       frameWidth: this.width,
       frameHeight: this.height,
-      maxWidth: asset.maxWidth ?? 0.9,
-      maxLines: asset.maxLines ?? 2,
-      position: asset.position ?? "bottom",
-      fontSize: font?.size ?? 24,
+      availableWidth,
+      maxLines: computedMaxLines,
+      verticalAlign,
+      horizontalAlign,
+      paddingLeft: padding.left,
+      fontSize,
       fontFamily: font?.family ?? "Roboto",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
       wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
-      lineHeight: style?.lineHeight ?? 1.2,
+      lineHeight,
       textTransform: style?.textTransform ?? "none",
       pauseThreshold: 500,
       measureTextWidth
@@ -5611,6 +5674,7 @@ var RichCaptionRenderer = class {
       const totalTimeMs = performance.now() - totalStart;
       const realtimeMultiplier = duration / (totalTimeMs / 1e3);
       this.logCompletion(totalTimeMs, realtimeMultiplier);
+      encoder.close();
       return outputPath;
     } catch (error) {
       encoder.close();
@@ -5727,6 +5791,33 @@ var RichCaptionRenderer = class {
   clearCache() {
     this.layoutEngine?.clearCache();
   }
+  extractPadding(asset) {
+    const padding = asset.padding;
+    if (!padding) {
+      return { top: 0, right: 0, bottom: 0, left: 0 };
+    }
+    if (typeof padding === "number") {
+      return { top: padding, right: padding, bottom: padding, left: padding };
+    }
+    return {
+      top: padding.top ?? 0,
+      right: padding.right ?? 0,
+      bottom: padding.bottom ?? 0,
+      left: padding.left ?? 0
+    };
+  }
+  mapVerticalAlign(asset) {
+    const vertical = asset.align?.vertical;
+    if (vertical === "top") return "top";
+    if (vertical === "middle") return "middle";
+    return "bottom";
+  }
+  mapHorizontalAlign(asset) {
+    const horizontal = asset.align?.horizontal;
+    if (horizontal === "left") return "left";
+    if (horizontal === "right") return "right";
+    return "center";
+  }
   extractAnimationStyle() {
     const wordAnim = this.currentAsset?.wordAnimation;
     return wordAnim?.style ?? "highlight";

package/dist/entry.web.d.ts

@@ -263,7 +263,7 @@ declare const richCaptionAssetSchema: z.ZodObject<{
         start: z.ZodNumber;
         end: z.ZodNumber;
         confidence: z.ZodOptional<z.ZodNumber>;
-    }, z.core.$strict>>>;
+    }, z.core.$strip>>>;
     font: z.ZodOptional<z.ZodObject<{
         family: z.ZodDefault<z.ZodString>;
         size: z.ZodDefault<z.ZodNumber>;
@@ -316,6 +316,12 @@ declare const richCaptionAssetSchema: z.ZodObject<{
         color: z.ZodOptional<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strict>>;
+    border: z.ZodOptional<z.ZodObject<{
+        width: z.ZodDefault<z.ZodNumber>;
+        color: z.ZodDefault<z.ZodString>;
+        opacity: z.ZodDefault<z.ZodNumber>;
+        radius: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>>;
     padding: z.ZodOptional<z.ZodUnion<readonly [z.ZodNumber, z.ZodObject<{
         top: z.ZodDefault<z.ZodNumber>;
         right: z.ZodDefault<z.ZodNumber>;
@@ -366,13 +372,6 @@ declare const richCaptionAssetSchema: z.ZodObject<{
             down: "down";
         }>>;
     }, z.core.$strict>>;
-    position: z.ZodDefault<z.ZodEnum<{
-        center: "center";
-        top: "top";
-        bottom: "bottom";
-    }>>;
-    maxWidth: z.ZodDefault<z.ZodNumber>;
-    maxLines: z.ZodDefault<z.ZodNumber>;
     customFonts: z.ZodOptional<z.ZodArray<z.ZodObject<{
         src: z.ZodString;
         family: z.ZodString;
@@ -389,7 +388,7 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
         start: z.ZodNumber;
         end: z.ZodNumber;
         confidence: z.ZodOptional<z.ZodNumber>;
-    }, z.core.$strict>>>;
+    }, z.core.$strip>>>;
     font: z.ZodOptional<z.ZodObject<{
         family: z.ZodDefault<z.ZodString>;
         size: z.ZodDefault<z.ZodNumber>;
@@ -442,6 +441,12 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
         color: z.ZodOptional<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strict>>;
+    border: z.ZodOptional<z.ZodObject<{
+        width: z.ZodDefault<z.ZodNumber>;
+        color: z.ZodDefault<z.ZodString>;
+        opacity: z.ZodDefault<z.ZodNumber>;
+        radius: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>>;
     padding: z.ZodOptional<z.ZodUnion<readonly [z.ZodNumber, z.ZodObject<{
         top: z.ZodDefault<z.ZodNumber>;
         right: z.ZodDefault<z.ZodNumber>;
@@ -492,13 +497,6 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
             down: "down";
         }>>;
     }, z.core.$strict>>;
-    position: z.ZodDefault<z.ZodEnum<{
-        center: "center";
-        top: "top";
-        bottom: "bottom";
-    }>>;
-    maxWidth: z.ZodDefault<z.ZodNumber>;
-    maxLines: z.ZodDefault<z.ZodNumber>;
     customFonts: z.ZodOptional<z.ZodArray<z.ZodObject<{
         src: z.ZodString;
         family: z.ZodString;
@@ -603,9 +601,11 @@ interface WordTiming {
 interface CaptionLayoutConfig {
     frameWidth: number;
     frameHeight: number;
-    maxWidth: number;
+    availableWidth: number;
     maxLines: number;
-    position: "top" | "center" | "bottom";
+    verticalAlign: "top" | "middle" | "bottom";
+    horizontalAlign: "left" | "center" | "right";
+    paddingLeft: number;
     fontSize: number;
     fontFamily: string;
     fontWeight: string | number;