@shotstack/shotstack-canvas 2.0.2 → 2.0.4

package/README.md

@@ -1,13 +1,13 @@
-# @shotstack/shotstack-canvas
-
-One package → identical text shaping/wrapping/animation on Web & Node.
-- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
-- Device-independent draw-ops.
-- Painters: Canvas2D (web) and node-canvas (node).
-- Deterministic time-driven animations.
-
-## Install
-
-```bash
-pnpm add @shotstack/shotstack-canvas
-# or npm i / yarn add
+# @shotstack/shotstack-canvas
+
+One package → identical text shaping/wrapping/animation on Web & Node.
+- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
+- Device-independent draw-ops.
+- Painters: Canvas2D (web) and node-canvas (node).
+- Deterministic time-driven animations.
+
+## Install
+
+```bash
+pnpm add @shotstack/shotstack-canvas
+# or npm i / yarn add

package/dist/entry.node.cjs

@@ -417,7 +417,7 @@ var CANVAS_CONFIG = {
     width: 800,
     height: 400,
     pixelRatio: 2,
-    fontFamily: "Roboto",
+    fontFamily: "Open Sans",
     fontSize: 48,
     color: "#ffffff",
     textAlign: "center"
@@ -572,7 +572,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("Open Sans"),
+  family: import_zod.z.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
   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"),
@@ -1217,8 +1217,15 @@ var FontRegistry = class _FontRegistry {
     if (this.registeredCanvasFonts.has(family)) {
       return;
     }
+    if (typeof window !== "undefined") {
+      return;
+    }
     try {
-      const canvasMod = await import("canvas");
+      const moduleName = "canvas";
+      const canvasMod = await import(
+        /* @vite-ignore */
+        moduleName
+      );
       const GlobalFonts = canvasMod.GlobalFonts;
       if (GlobalFonts && typeof GlobalFonts.register === "function") {
         const buffer = Buffer.from(bytes);
@@ -4860,7 +4867,7 @@ function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
   return {
-    family: font?.family ?? "Open Sans",
+    family: font?.family ?? CANVAS_CONFIG.DEFAULTS.fontFamily,
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor: font?.color ?? "#ffffff",
@@ -5766,15 +5773,14 @@ async function createNodeRawEncoder(config, options) {
 }
 
 // src/core/rich-caption-renderer.ts
-var ROBOTO_FONT_URLS = {
-  "100": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmT.ttf",
-  "300": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmT.ttf",
-  "400": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf",
-  "500": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmT.ttf",
-  "600": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYaammT.ttf",
-  "700": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf",
-  "800": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZEammT.ttf",
-  "900": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammT.ttf"
+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 RichCaptionRenderer = class {
   width;
@@ -5804,12 +5810,12 @@ var RichCaptionRenderer = class {
   async initialize() {
     this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
     this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
-    const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
+    const weightsToLoad = Object.keys(OPEN_SANS_FONT_URLS);
     const loadPromises = weightsToLoad.map(async (weight) => {
-      const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
+      const existingFace = await this.fontRegistry.getFace({ family: "Open Sans", weight });
       if (!existingFace) {
-        const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
-        await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
+        const bytes = await loadFileOrHttpToArrayBuffer(OPEN_SANS_FONT_URLS[weight]);
+        await this.fontRegistry.registerFromBytes(bytes, { family: "Open Sans", weight });
       }
     });
     await Promise.all(loadPromises);
@@ -5853,7 +5859,7 @@ var RichCaptionRenderer = class {
       maxLines: asset.maxLines ?? 2,
       position: asset.position ?? "bottom",
       fontSize: font?.size ?? 24,
-      fontFamily: font?.family ?? "Roboto",
+      fontFamily: font?.family ?? "Open Sans",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
       wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
@@ -5946,7 +5952,15 @@ var RichCaptionRenderer = class {
           const elapsed = performance.now() - totalStart;
           const fps = framesProcessed / (elapsed / 1e3);
           const eta = (schedule.totalFrames - framesProcessed) / fps * 1e3;
-          this.logProgress(pct, framesProcessed, schedule.totalFrames, i + 1, schedule.uniqueFrameCount, fps, eta);
+          this.logProgress(
+            pct,
+            framesProcessed,
+            schedule.totalFrames,
+            i + 1,
+            schedule.uniqueFrameCount,
+            fps,
+            eta
+          );
         }
         if (i % 500 === 0 && i > 0) {
           this.checkMemoryUsage();
@@ -6326,7 +6340,7 @@ async function createTextEngine(opts = {}) {
         }
       }
       const main = asset.font ?? {
-        family: "Roboto",
+        family: "Open Sans",
         weight: "400",
         size: 48,
         color: "#000000",

package/dist/entry.node.js

@@ -29,7 +29,7 @@ var CANVAS_CONFIG = {
     width: 800,
     height: 400,
     pixelRatio: 2,
-    fontFamily: "Roboto",
+    fontFamily: "Open Sans",
     fontSize: 48,
     color: "#ffffff",
     textAlign: "center"
@@ -184,7 +184,7 @@ var wordTimingSchema = baseWordTimingSchema.extend({
   confidence: z.number().min(0).max(1).optional()
 });
 var richCaptionFontSchema = z.object({
-  family: z.string().default("Open Sans"),
+  family: z.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
   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"),
@@ -828,8 +828,15 @@ var FontRegistry = class _FontRegistry {
     if (this.registeredCanvasFonts.has(family)) {
       return;
     }
+    if (typeof window !== "undefined") {
+      return;
+    }
     try {
-      const canvasMod = await import("canvas");
+      const moduleName = "canvas";
+      const canvasMod = await import(
+        /* @vite-ignore */
+        moduleName
+      );
       const GlobalFonts = canvasMod.GlobalFonts;
       if (GlobalFonts && typeof GlobalFonts.register === "function") {
         const buffer = Buffer.from(bytes);
@@ -4471,7 +4478,7 @@ function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
   return {
-    family: font?.family ?? "Open Sans",
+    family: font?.family ?? CANVAS_CONFIG.DEFAULTS.fontFamily,
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor: font?.color ?? "#ffffff",
@@ -5377,15 +5384,14 @@ async function createNodeRawEncoder(config, options) {
 }
 
 // src/core/rich-caption-renderer.ts
-var ROBOTO_FONT_URLS = {
-  "100": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmT.ttf",
-  "300": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmT.ttf",
-  "400": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf",
-  "500": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmT.ttf",
-  "600": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYaammT.ttf",
-  "700": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf",
-  "800": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZEammT.ttf",
-  "900": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammT.ttf"
+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 RichCaptionRenderer = class {
   width;
@@ -5415,12 +5421,12 @@ var RichCaptionRenderer = class {
   async initialize() {
     this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
     this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
-    const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
+    const weightsToLoad = Object.keys(OPEN_SANS_FONT_URLS);
     const loadPromises = weightsToLoad.map(async (weight) => {
-      const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
+      const existingFace = await this.fontRegistry.getFace({ family: "Open Sans", weight });
       if (!existingFace) {
-        const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
-        await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
+        const bytes = await loadFileOrHttpToArrayBuffer(OPEN_SANS_FONT_URLS[weight]);
+        await this.fontRegistry.registerFromBytes(bytes, { family: "Open Sans", weight });
       }
     });
     await Promise.all(loadPromises);
@@ -5464,7 +5470,7 @@ var RichCaptionRenderer = class {
       maxLines: asset.maxLines ?? 2,
       position: asset.position ?? "bottom",
       fontSize: font?.size ?? 24,
-      fontFamily: font?.family ?? "Roboto",
+      fontFamily: font?.family ?? "Open Sans",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
       wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
@@ -5557,7 +5563,15 @@ var RichCaptionRenderer = class {
           const elapsed = performance.now() - totalStart;
           const fps = framesProcessed / (elapsed / 1e3);
           const eta = (schedule.totalFrames - framesProcessed) / fps * 1e3;
-          this.logProgress(pct, framesProcessed, schedule.totalFrames, i + 1, schedule.uniqueFrameCount, fps, eta);
+          this.logProgress(
+            pct,
+            framesProcessed,
+            schedule.totalFrames,
+            i + 1,
+            schedule.uniqueFrameCount,
+            fps,
+            eta
+          );
         }
         if (i % 500 === 0 && i > 0) {
           this.checkMemoryUsage();
@@ -5937,7 +5951,7 @@ async function createTextEngine(opts = {}) {
         }
       }
       const main = asset.font ?? {
-        family: "Roboto",
+        family: "Open Sans",
         weight: "400",
         size: 48,
         color: "#000000",