@shotstack/shotstack-canvas 2.1.5 → 2.1.6

package/dist/entry.web.js

@@ -17896,8 +17896,7 @@ import {
   svgShadowSchema,
   svgTransformSchema,
   svgGradientStopSchema,
-  richCaptionActiveSchema as baseCaptionActiveSchema,
-  richCaptionWordAnimationSchema as baseCaptionWordAnimationSchema
+  richCaptionActiveSchema as baseCaptionActiveSchema
 } from "@shotstack/schemas/zod";
 
 // src/config/canvas-constants.ts
@@ -18076,23 +18075,28 @@ var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
     opacity: external_exports.number().min(0).max(1).optional(),
     textDecoration: external_exports.enum(["none", "underline", "line-through"]).optional()
   }).optional(),
-  stroke: external_exports.object({
-    width: external_exports.number().min(0).optional(),
-    color: external_exports.string().regex(HEX6).optional(),
-    opacity: external_exports.number().min(0).max(1).optional()
-  }).optional(),
-  shadow: external_exports.object({
-    offsetX: external_exports.number().optional(),
-    offsetY: external_exports.number().optional(),
-    blur: external_exports.number().min(0).optional(),
-    color: external_exports.string().regex(HEX6).optional(),
-    opacity: external_exports.number().min(0).max(1).optional()
-  }).optional(),
+  stroke: external_exports.union([
+    external_exports.object({
+      width: external_exports.number().min(0).optional(),
+      color: external_exports.string().regex(HEX6).optional(),
+      opacity: external_exports.number().min(0).max(1).optional()
+    }),
+    external_exports.literal("none")
+  ]).optional(),
+  shadow: external_exports.union([
+    external_exports.object({
+      offsetX: external_exports.number().optional(),
+      offsetY: external_exports.number().optional(),
+      blur: external_exports.number().min(0).optional(),
+      color: external_exports.string().regex(HEX6).optional(),
+      opacity: external_exports.number().min(0).max(1).optional()
+    }),
+    external_exports.literal("none")
+  ]).optional(),
   scale: external_exports.number().min(0.5).max(2).default(1)
 });
-var richCaptionWordAnimationSchema = baseCaptionWordAnimationSchema.extend({
+var richCaptionWordAnimationSchema = external_exports.object({
   style: external_exports.enum(["karaoke", "highlight", "pop", "fade", "slide", "bounce", "typewriter", "none"]).default("highlight"),
-  speed: external_exports.number().min(0.5).max(2).default(1),
   direction: external_exports.enum(["left", "right", "up", "down"]).default("up")
 });
 var richCaptionAssetSchema = external_exports.object({
@@ -35235,12 +35239,8 @@ function calculateWordProgress(ctx) {
 function isWordActive(ctx) {
   return ctx.currentTime >= ctx.wordStart && ctx.currentTime < ctx.wordEnd;
 }
-function calculateKaraokeState(ctx, speed) {
+function calculateKaraokeState(ctx) {
   const isActive = isWordActive(ctx);
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
   if (ctx.currentTime < ctx.wordStart) {
     return {
       fillProgress: 0,
@@ -35248,7 +35248,7 @@ function calculateKaraokeState(ctx, speed) {
       opacity: 1
     };
   }
-  if (ctx.currentTime >= adjustedEnd) {
+  if (ctx.currentTime >= ctx.wordEnd) {
     return {
       fillProgress: 1,
       isActive: false,
@@ -35256,7 +35256,7 @@ function calculateKaraokeState(ctx, speed) {
     };
   }
   return {
-    fillProgress: calculateWordProgress(adjustedCtx),
+    fillProgress: calculateWordProgress(ctx),
     isActive,
     opacity: 1
   };
@@ -35269,7 +35269,7 @@ function calculateHighlightState(ctx) {
     opacity: 1
   };
 }
-function calculatePopState(ctx, activeScale, speed) {
+function calculatePopState(ctx, activeScale) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       scale: 0.5,
@@ -35278,9 +35278,7 @@ function calculatePopState(ctx, activeScale, speed) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
   const isActive = isWordActive(ctx);
@@ -35293,7 +35291,7 @@ function calculatePopState(ctx, activeScale, speed) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateFadeState(ctx, speed) {
+function calculateFadeState(ctx) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
@@ -35301,9 +35299,7 @@ function calculateFadeState(ctx, speed) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeInOutQuad(progress);
   const isActive = isWordActive(ctx);
   return {
@@ -35312,7 +35308,7 @@ function calculateFadeState(ctx, speed) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateSlideState(ctx, direction, speed, fontSize) {
+function calculateSlideState(ctx, direction, fontSize) {
   const slideDistance = fontSize * 1.5;
   if (ctx.currentTime < ctx.wordStart) {
     const offset2 = getDirectionOffset(direction, slideDistance);
@@ -35324,9 +35320,7 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutCirc(progress);
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
@@ -35352,7 +35346,7 @@ function getDirectionOffset(direction, distance) {
       return { x: 0, y: -distance };
   }
 }
-function calculateBounceState(ctx, speed, fontSize) {
+function calculateBounceState(ctx, fontSize) {
   const bounceDistance = fontSize * 0.8;
   if (ctx.currentTime < ctx.wordStart) {
     return {
@@ -35362,9 +35356,7 @@ function calculateBounceState(ctx, speed, fontSize) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutBounce(progress);
   const isActive = isWordActive(ctx);
   return {
@@ -35374,11 +35366,7 @@ function calculateBounceState(ctx, speed, fontSize) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateTypewriterState(ctx, charCount, speed) {
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
+function calculateTypewriterState(ctx, charCount) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       visibleCharacters: 0,
@@ -35387,7 +35375,7 @@ function calculateTypewriterState(ctx, charCount, speed) {
       fillProgress: 0
     };
   }
-  if (ctx.currentTime >= adjustedEnd) {
+  if (ctx.currentTime >= ctx.wordEnd) {
     return {
       visibleCharacters: charCount,
       opacity: 1,
@@ -35395,7 +35383,7 @@ function calculateTypewriterState(ctx, charCount, speed) {
       fillProgress: 0
     };
   }
-  const progress = calculateWordProgress(adjustedCtx);
+  const progress = calculateWordProgress(ctx);
   const visibleCharacters = Math.ceil(progress * charCount);
   const isActive = isWordActive(ctx);
   return {
@@ -35413,7 +35401,6 @@ function calculateNoneState(_ctx) {
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
-  const safeSpeed = config2.speed > 0 ? config2.speed : 1;
   const ctx = {
     wordStart,
     wordEnd,
@@ -35424,27 +35411,27 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, a
   let partialState;
   switch (config2.style) {
     case "karaoke":
-      partialState = calculateKaraokeState(ctx, safeSpeed);
+      partialState = calculateKaraokeState(ctx);
       break;
     case "highlight":
       partialState = calculateHighlightState(ctx);
       break;
     case "pop":
-      partialState = calculatePopState(ctx, activeScale, safeSpeed);
+      partialState = calculatePopState(ctx, activeScale);
       break;
     case "fade":
-      partialState = calculateFadeState(ctx, safeSpeed);
+      partialState = calculateFadeState(ctx);
       break;
     case "slide": {
       const slideDir = mirrorAnimationDirection(config2.direction, isRTL);
-      partialState = calculateSlideState(ctx, slideDir, config2.speed, fontSize);
+      partialState = calculateSlideState(ctx, slideDir, fontSize);
       break;
     }
     case "bounce":
-      partialState = calculateBounceState(ctx, safeSpeed, fontSize);
+      partialState = calculateBounceState(ctx, fontSize);
       break;
     case "typewriter":
-      partialState = calculateTypewriterState(ctx, charCount, safeSpeed);
+      partialState = calculateTypewriterState(ctx, charCount);
       break;
     case "none":
     default:
@@ -35477,7 +35464,6 @@ function calculateAnimationStatesForGroup(words, currentTime, config2, activeSca
 function getDefaultAnimationConfig() {
   return {
     style: "highlight",
-    speed: 1,
     direction: "up"
   };
 }
@@ -35518,18 +35504,17 @@ function extractFontConfig(asset) {
 function extractStrokeConfig(asset, isActive) {
   const baseStroke = asset.stroke;
   const activeStroke = asset.active?.stroke;
-  if (!baseStroke && !activeStroke) {
-    return void 0;
-  }
   if (isActive) {
-    if (!activeStroke) {
+    if (activeStroke === "none") {
       return void 0;
     }
-    return {
-      width: activeStroke.width ?? baseStroke?.width ?? 0,
-      color: activeStroke.color ?? baseStroke?.color ?? "#000000",
-      opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
-    };
+    if (activeStroke && typeof activeStroke === "object") {
+      return {
+        width: activeStroke.width ?? baseStroke?.width ?? 0,
+        color: activeStroke.color ?? baseStroke?.color ?? "#000000",
+        opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
+      };
+    }
   }
   if (baseStroke) {
     return {
@@ -35543,20 +35528,19 @@ function extractStrokeConfig(asset, isActive) {
 function extractShadowConfig(asset, isActive) {
   const baseShadow = asset.shadow;
   const activeShadow = asset.active?.shadow;
-  if (!baseShadow && !activeShadow) {
-    return void 0;
-  }
   if (isActive) {
-    if (!activeShadow) {
+    if (activeShadow === "none") {
       return void 0;
     }
-    return {
-      offsetX: activeShadow.offsetX ?? baseShadow?.offsetX ?? 0,
-      offsetY: activeShadow.offsetY ?? baseShadow?.offsetY ?? 0,
-      blur: activeShadow.blur ?? baseShadow?.blur ?? 0,
-      color: activeShadow.color ?? baseShadow?.color ?? "#000000",
-      opacity: activeShadow.opacity ?? baseShadow?.opacity ?? 0.5
-    };
+    if (activeShadow && typeof activeShadow === "object") {
+      return {
+        offsetX: activeShadow.offsetX ?? baseShadow?.offsetX ?? 0,
+        offsetY: activeShadow.offsetY ?? baseShadow?.offsetY ?? 0,
+        blur: activeShadow.blur ?? baseShadow?.blur ?? 0,
+        color: activeShadow.color ?? baseShadow?.color ?? "#000000",
+        opacity: activeShadow.opacity ?? baseShadow?.opacity ?? 0.5
+      };
+    }
   }
   if (baseShadow) {
     return {
@@ -35572,7 +35556,12 @@ function extractShadowConfig(asset, isActive) {
 function extractBackgroundConfig(asset, isActive, fontSize) {
   const fontBackground = asset.font?.background;
   const activeBackground = asset.active?.font?.background;
-  const bgColor = isActive && activeBackground ? activeBackground : fontBackground;
+  let bgColor;
+  if (isActive) {
+    bgColor = activeBackground ?? fontBackground;
+  } else {
+    bgColor = fontBackground;
+  }
   if (!bgColor) {
     return void 0;
   }
@@ -35640,7 +35629,6 @@ function extractAnimationConfig(asset) {
   }
   return {
     style: wordAnim.style ?? "highlight",
-    speed: wordAnim.speed ?? 1,
     direction: wordAnim.direction ?? "up"
   };
 }
@@ -37849,7 +37837,7 @@ function findActiveWordIndex(store, groupWordIndices, timeMs) {
   }
   return -1;
 }
-function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, speed) {
+function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle) {
   if (groupWordIndices.length === 0) {
     return "idle";
   }
@@ -37866,7 +37854,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
     return "after";
   }
   if (TRANSITION_ANIMATION_STYLES.has(animationStyle)) {
-    const transitionDurationMs = (ANIMATION_DURATION_MS[animationStyle] ?? 200) / speed;
+    const transitionDurationMs = ANIMATION_DURATION_MS[animationStyle] ?? 200;
     for (const idx of groupWordIndices) {
       const wordStart = store.startTimes[idx];
       if (timeMs >= wordStart && timeMs < wordStart + transitionDurationMs) {
@@ -37888,7 +37876,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
   }
   return "before";
 }
-function computeStateSignature(layout, timeMs, animationStyle, speed) {
+function computeStateSignature(layout, timeMs, animationStyle) {
   const groupIndex = findGroupIndexAtTime(layout.groups, timeMs);
   if (groupIndex === -1) {
     return { groupIndex: -1, activeWordIndex: -1, animationPhase: "idle" };
@@ -37899,21 +37887,20 @@ function computeStateSignature(layout, timeMs, animationStyle, speed) {
     layout.store,
     group.wordIndices,
     timeMs,
-    animationStyle,
-    speed
+    animationStyle
   );
   return { groupIndex, activeWordIndex, animationPhase };
 }
 function signaturesMatch(a, b) {
   return a.groupIndex === b.groupIndex && a.activeWordIndex === b.activeWordIndex && a.animationPhase === b.animationPhase;
 }
-function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight", speed = 1) {
+function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight") {
   const totalFrames = Math.max(2, Math.round(durationMs / 1e3 * fps) + 1);
   const renderFrames = [];
   let previousSignature = null;
   for (let frame = 0; frame < totalFrames; frame++) {
     const timeMs = frame / (totalFrames - 1) * durationMs;
-    const signature = computeStateSignature(layout, timeMs, animationStyle, speed);
+    const signature = computeStateSignature(layout, timeMs, animationStyle);
     const isAnimating = signature.animationPhase === "animating";
     if (isAnimating || previousSignature === null || !signaturesMatch(signature, previousSignature)) {
       renderFrames.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",
@@ -51,7 +51,7 @@
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@shotstack/schemas": "1.9.0",
+    "@shotstack/schemas": "1.9.1",
     "bidi-js": "^1.0.3",
     "canvas": "npm:@napi-rs/canvas@^0.1.54",
     "ffmpeg-static": "^5.2.0",