@shotstack/shotstack-canvas 2.0.5 → 2.0.7

package/dist/entry.node.cjs

@@ -573,7 +573,7 @@ var wordTimingSchema = import_zod2.wordTimingSchema.extend({
   confidence: import_zod.z.number().min(0).max(1).optional()
 });
 var richCaptionFontSchema = import_zod.z.object({
-  family: import_zod.z.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
+  family: import_zod.z.string().default("Roboto"),
   size: import_zod.z.number().int().min(1).max(500).default(24),
   weight: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).default("400"),
   color: import_zod.z.string().regex(HEX6).default("#ffffff"),
@@ -4875,7 +4875,7 @@ function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
   return {
-    family: font?.family ?? CANVAS_CONFIG.DEFAULTS.fontFamily,
+    family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor: font?.color ?? "#ffffff",
@@ -5615,6 +5615,7 @@ var NodeRawEncoder = class _NodeRawEncoder {
       preset = "ultrafast",
       profile = "high"
     } = config;
+    const hasAlpha = config.hasAlpha ?? false;
     const args = [
       "-y",
       "-f",
@@ -5628,32 +5629,49 @@ var NodeRawEncoder = class _NodeRawEncoder {
       "-thread_queue_size",
       "512",
       "-i",
-      "pipe:0",
-      "-c:v",
-      "libx264",
-      "-preset",
-      preset,
-      "-tune",
-      "stillimage",
-      "-crf",
-      String(crf),
-      "-profile:v",
-      profile,
-      "-g",
-      "300",
-      "-bf",
-      "2",
-      "-threads",
-      "0",
-      "-pix_fmt",
-      "yuv420p",
-      "-r",
-      String(fps),
-      "-movflags",
-      "+faststart"
+      "pipe:0"
     ];
+    if (hasAlpha) {
+      args.push(
+        "-c:v",
+        "prores_ks",
+        "-profile:v",
+        "4444",
+        "-pix_fmt",
+        "yuva444p10le",
+        "-vendor",
+        "apl0",
+        "-r",
+        String(fps)
+      );
+    } else {
+      args.push(
+        "-c:v",
+        "libx264",
+        "-preset",
+        preset,
+        "-tune",
+        "stillimage",
+        "-crf",
+        String(crf),
+        "-profile:v",
+        profile,
+        "-g",
+        "300",
+        "-bf",
+        "2",
+        "-threads",
+        "0",
+        "-pix_fmt",
+        "yuv420p",
+        "-r",
+        String(fps),
+        "-movflags",
+        "+faststart"
+      );
+    }
     if (this.outputToMemory) {
-      args.push("-f", "mp4", "pipe:1");
+      args.push("-f", hasAlpha ? "mov" : "mp4", "pipe:1");
     } else {
       args.push(this.outputPath);
     }
@@ -5781,14 +5799,14 @@ async function createNodeRawEncoder(config, options) {
 }
 
 // src/core/rich-caption-renderer.ts
-var OPEN_SANS_FONT_URL = "https://fonts.gstatic.com/s/opensans/v44/mem8YaGs126MiZpBA-U1UpcaXcl0Aw.ttf";
-var OPEN_SANS_FONT_URLS = {
-  "300": OPEN_SANS_FONT_URL,
-  "400": OPEN_SANS_FONT_URL,
-  "500": OPEN_SANS_FONT_URL,
-  "600": OPEN_SANS_FONT_URL,
-  "700": OPEN_SANS_FONT_URL,
-  "800": OPEN_SANS_FONT_URL
+var ROBOTO_FONT_URL = "https://fonts.gstatic.com/s/roboto/v50/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf";
+var ROBOTO_FONT_URLS = {
+  "300": ROBOTO_FONT_URL,
+  "400": ROBOTO_FONT_URL,
+  "500": ROBOTO_FONT_URL,
+  "600": ROBOTO_FONT_URL,
+  "700": ROBOTO_FONT_URL,
+  "800": ROBOTO_FONT_URL
 };
 var RichCaptionRenderer = class {
   width;
@@ -5818,12 +5836,12 @@ var RichCaptionRenderer = class {
   async initialize() {
     this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
     this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
-    const weightsToLoad = Object.keys(OPEN_SANS_FONT_URLS);
+    const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
     const loadPromises = weightsToLoad.map(async (weight) => {
-      const existingFace = await this.fontRegistry.getFace({ family: "Open Sans", weight });
+      const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
       if (!existingFace) {
-        const bytes = await loadFileOrHttpToArrayBuffer(OPEN_SANS_FONT_URLS[weight]);
-        await this.fontRegistry.registerFromBytes(bytes, { family: "Open Sans", weight });
+        const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
+        await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
       }
     });
     await Promise.all(loadPromises);
@@ -5867,7 +5885,7 @@ var RichCaptionRenderer = class {
       maxLines: asset.maxLines ?? 2,
       position: asset.position ?? "bottom",
       fontSize: font?.size ?? 24,
-      fontFamily: font?.family ?? "Open Sans",
+      fontFamily: font?.family ?? "Roboto",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
       wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
@@ -5913,6 +5931,8 @@ var RichCaptionRenderer = class {
       animationStyle,
       animationSpeed
     );
+    const bgColor = options?.bgColor;
+    const hasAlpha = !bgColor;
     const encoder = new NodeRawEncoder();
     await encoder.configure(
       {
@@ -5922,7 +5942,8 @@ var RichCaptionRenderer = class {
         duration,
         crf: options?.crf ?? 23,
         preset: options?.preset ?? "ultrafast",
-        profile: options?.profile ?? "high"
+        profile: options?.profile ?? "high",
+        hasAlpha
       },
       {
         outputPath,
@@ -5934,7 +5955,6 @@ var RichCaptionRenderer = class {
       height: this.height,
       pixelRatio: this.pixelRatio
     });
-    const bgColor = options?.bgColor ?? "#000000";
     const totalStart = performance.now();
     let framesProcessed = 0;
     let lastPct = -1;
@@ -5948,7 +5968,7 @@ var RichCaptionRenderer = class {
           height: this.height * this.pixelRatio,
           pixelRatio: this.pixelRatio,
           clear: true,
-          bg: { color: bgColor, opacity: 1, radius: 0 }
+          ...bgColor ? { bg: { color: bgColor, opacity: 1, radius: 0 } } : {}
         };
         await painter.render([beginOp, ...captionOps]);
         const rawResult = painter.toRawRGBA();

package/dist/entry.node.d.cts

@@ -1207,6 +1207,7 @@ interface VideoEncoderConfig {
     hardwareAcceleration?: "prefer-hardware" | "prefer-software" | "no-preference";
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
+    hasAlpha?: boolean;
 }
 interface VideoEncoderProgress {
     framesEncoded: number;

package/dist/entry.node.d.ts

@@ -1207,6 +1207,7 @@ interface VideoEncoderConfig {
     hardwareAcceleration?: "prefer-hardware" | "prefer-software" | "no-preference";
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
+    hasAlpha?: boolean;
 }
 interface VideoEncoderProgress {
     framesEncoded: number;

package/dist/entry.node.js

@@ -184,7 +184,7 @@ var wordTimingSchema = baseWordTimingSchema.extend({
   confidence: z.number().min(0).max(1).optional()
 });
 var richCaptionFontSchema = z.object({
-  family: z.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
+  family: z.string().default("Roboto"),
   size: z.number().int().min(1).max(500).default(24),
   weight: z.union([z.string(), z.number()]).default("400"),
   color: z.string().regex(HEX6).default("#ffffff"),
@@ -4485,7 +4485,7 @@ function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
   return {
-    family: font?.family ?? CANVAS_CONFIG.DEFAULTS.fontFamily,
+    family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor: font?.color ?? "#ffffff",
@@ -5225,6 +5225,7 @@ var NodeRawEncoder = class _NodeRawEncoder {
       preset = "ultrafast",
       profile = "high"
     } = config;
+    const hasAlpha = config.hasAlpha ?? false;
     const args = [
       "-y",
       "-f",
@@ -5238,32 +5239,49 @@ var NodeRawEncoder = class _NodeRawEncoder {
       "-thread_queue_size",
       "512",
       "-i",
-      "pipe:0",
-      "-c:v",
-      "libx264",
-      "-preset",
-      preset,
-      "-tune",
-      "stillimage",
-      "-crf",
-      String(crf),
-      "-profile:v",
-      profile,
-      "-g",
-      "300",
-      "-bf",
-      "2",
-      "-threads",
-      "0",
-      "-pix_fmt",
-      "yuv420p",
-      "-r",
-      String(fps),
-      "-movflags",
-      "+faststart"
+      "pipe:0"
     ];
+    if (hasAlpha) {
+      args.push(
+        "-c:v",
+        "prores_ks",
+        "-profile:v",
+        "4444",
+        "-pix_fmt",
+        "yuva444p10le",
+        "-vendor",
+        "apl0",
+        "-r",
+        String(fps)
+      );
+    } else {
+      args.push(
+        "-c:v",
+        "libx264",
+        "-preset",
+        preset,
+        "-tune",
+        "stillimage",
+        "-crf",
+        String(crf),
+        "-profile:v",
+        profile,
+        "-g",
+        "300",
+        "-bf",
+        "2",
+        "-threads",
+        "0",
+        "-pix_fmt",
+        "yuv420p",
+        "-r",
+        String(fps),
+        "-movflags",
+        "+faststart"
+      );
+    }
     if (this.outputToMemory) {
-      args.push("-f", "mp4", "pipe:1");
+      args.push("-f", hasAlpha ? "mov" : "mp4", "pipe:1");
     } else {
       args.push(this.outputPath);
     }
@@ -5391,14 +5409,14 @@ async function createNodeRawEncoder(config, options) {
 }
 
 // src/core/rich-caption-renderer.ts
-var OPEN_SANS_FONT_URL = "https://fonts.gstatic.com/s/opensans/v44/mem8YaGs126MiZpBA-U1UpcaXcl0Aw.ttf";
-var OPEN_SANS_FONT_URLS = {
-  "300": OPEN_SANS_FONT_URL,
-  "400": OPEN_SANS_FONT_URL,
-  "500": OPEN_SANS_FONT_URL,
-  "600": OPEN_SANS_FONT_URL,
-  "700": OPEN_SANS_FONT_URL,
-  "800": OPEN_SANS_FONT_URL
+var ROBOTO_FONT_URL = "https://fonts.gstatic.com/s/roboto/v50/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf";
+var ROBOTO_FONT_URLS = {
+  "300": ROBOTO_FONT_URL,
+  "400": ROBOTO_FONT_URL,
+  "500": ROBOTO_FONT_URL,
+  "600": ROBOTO_FONT_URL,
+  "700": ROBOTO_FONT_URL,
+  "800": ROBOTO_FONT_URL
 };
 var RichCaptionRenderer = class {
   width;
@@ -5428,12 +5446,12 @@ var RichCaptionRenderer = class {
   async initialize() {
     this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
     this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
-    const weightsToLoad = Object.keys(OPEN_SANS_FONT_URLS);
+    const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
     const loadPromises = weightsToLoad.map(async (weight) => {
-      const existingFace = await this.fontRegistry.getFace({ family: "Open Sans", weight });
+      const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
       if (!existingFace) {
-        const bytes = await loadFileOrHttpToArrayBuffer(OPEN_SANS_FONT_URLS[weight]);
-        await this.fontRegistry.registerFromBytes(bytes, { family: "Open Sans", weight });
+        const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
+        await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
       }
     });
     await Promise.all(loadPromises);
@@ -5477,7 +5495,7 @@ var RichCaptionRenderer = class {
       maxLines: asset.maxLines ?? 2,
       position: asset.position ?? "bottom",
       fontSize: font?.size ?? 24,
-      fontFamily: font?.family ?? "Open Sans",
+      fontFamily: font?.family ?? "Roboto",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
       wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
@@ -5523,6 +5541,8 @@ var RichCaptionRenderer = class {
       animationStyle,
       animationSpeed
     );
+    const bgColor = options?.bgColor;
+    const hasAlpha = !bgColor;
     const encoder = new NodeRawEncoder();
     await encoder.configure(
       {
@@ -5532,7 +5552,8 @@ var RichCaptionRenderer = class {
         duration,
         crf: options?.crf ?? 23,
         preset: options?.preset ?? "ultrafast",
-        profile: options?.profile ?? "high"
+        profile: options?.profile ?? "high",
+        hasAlpha
       },
       {
         outputPath,
@@ -5544,7 +5565,6 @@ var RichCaptionRenderer = class {
       height: this.height,
       pixelRatio: this.pixelRatio
     });
-    const bgColor = options?.bgColor ?? "#000000";
     const totalStart = performance.now();
     let framesProcessed = 0;
     let lastPct = -1;
@@ -5558,7 +5578,7 @@ var RichCaptionRenderer = class {
           height: this.height * this.pixelRatio,
           pixelRatio: this.pixelRatio,
           clear: true,
-          bg: { color: bgColor, opacity: 1, radius: 0 }
+          ...bgColor ? { bg: { color: bgColor, opacity: 1, radius: 0 } } : {}
         };
         await painter.render([beginOp, ...captionOps]);
         const rawResult = painter.toRawRGBA();

package/dist/entry.web.d.ts

@@ -1148,6 +1148,7 @@ interface VideoEncoderConfig {
     hardwareAcceleration?: "prefer-hardware" | "prefer-software" | "no-preference";
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
+    hasAlpha?: boolean;
 }
 interface VideoEncoderProgress {
     framesEncoded: number;

package/dist/entry.web.js

@@ -18062,7 +18062,7 @@ var wordTimingSchema = baseWordTimingSchema.extend({
   confidence: external_exports.number().min(0).max(1).optional()
 });
 var richCaptionFontSchema = external_exports.object({
-  family: external_exports.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
+  family: external_exports.string().default("Roboto"),
   size: external_exports.number().int().min(1).max(500).default(24),
   weight: external_exports.union([external_exports.string(), external_exports.number()]).default("400"),
   color: external_exports.string().regex(HEX6).default("#ffffff"),
@@ -36035,7 +36035,7 @@ function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
   return {
-    family: font?.family ?? CANVAS_CONFIG.DEFAULTS.fontFamily,
+    family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor: font?.color ?? "#ffffff",

package/package.json

@@ -1,65 +1,65 @@
-{
-  "name": "@shotstack/shotstack-canvas",
-  "version": "2.0.5",
-  "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.6.0",
-    "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.7",
+  "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.3",
+    "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"
+  }
+}