@bendyline/squisq-video 2.4.19 → 2.4.20

package/dist/index.d.ts

@@ -233,7 +233,8 @@ declare function computeAudioTimeline(doc: Doc, coverPreRoll?: number, options?:
  * Render HTML Generation for Video Frame Capture
  *
  * Generates a self-contained HTML document that loads the SquisqPlayer standalone
- * bundle in renderMode, embedding all images and audio as base64 data URIs.
+ * bundle in renderMode, embedding all images and audio as base64 data URIs, and
+ * any font files the host supplies (`fonts`) as `@font-face` rules.
  *
  * The generated page mounts one standalone player whose instance handle is
  * available through `SquisqPlayer.getHandle(root)`. Headless callers use that
@@ -242,6 +243,27 @@ declare function computeAudioTimeline(doc: Doc, coverPreRoll?: number, options?:
  * Browser-pure: uses only btoa() and Uint8Array — no Node.js APIs.
  */
 
+/**
+ * A font face embedded in the render page. Capture pages load nothing from the
+ * network, so a theme font the rendering machine lacks (any Google Fonts stack,
+ * such as `dm-sans`) falls back to a system face unless its file is supplied.
+ * One entry per file: a family split into unicode-range subsets, or into
+ * upright and italic files, takes one entry for each.
+ */
+interface RenderFontFace {
+    /** CSS family name as the theme's font stack spells it, e.g. `DM Sans`. */
+    family: string;
+    /** The font file's bytes (an ArrayBuffer, or a Uint8Array such as a Node Buffer). */
+    data: ArrayBuffer | Uint8Array;
+    /** File format (default 'woff2'). */
+    format?: 'woff2' | 'woff' | 'truetype' | 'opentype';
+    /** CSS `font-weight`: one weight, or a variable font's range such as `100 1000` (default `normal`). */
+    weight?: number | string;
+    /** CSS `font-style` (default 'normal'). */
+    style?: 'normal' | 'italic';
+    /** CSS `unicode-range`, when the file holds one subset of the family. */
+    unicodeRange?: string;
+}
 interface RenderHtmlOptions {
     /** The IIFE player bundle source code (from PLAYER_BUNDLE) */
     playerScript: string;
@@ -286,6 +308,11 @@ interface RenderHtmlOptions {
      * single-frame image capture.
      */
     displayMode?: 'slideshow' | 'dashboard';
+    /**
+     * Font files to embed as `@font-face` rules (default none). Faces load
+     * before the player mounts, so `document.fonts.ready` covers them.
+     */
+    fonts?: readonly RenderFontFace[];
     /** Dashboard-mode options (ignored unless `displayMode` is 'dashboard'). */
     dashboard?: {
         /** Layout id or 'auto'. Overrides doc frontmatter. */
@@ -531,4 +558,4 @@ declare function frameTimeSeconds(index: number, fps: number): number;
 /** Number of frames needed to cover `durationSeconds` at `fps` (partial frames round up). */
 declare function frameCountFor(durationSeconds: number, fps: number): number;
 
-export { type AudioTimelineClip, type ComputeAudioTimelineOptions, DASHBOARD_RESOLUTIONS, DEFAULT_DASHBOARD_RESOLUTION, type DashboardResolutionId, type DashboardResolutionPreset, type EncoderResult, FFMPEG_WASM_SETUP_HINT, type FfmpegWasmLoadConfig, type GifDither, type GifFilterOptions, type GifOutputOptions, MAX_DASHBOARD_IMAGE_DIMENSION, MAX_DASHBOARD_IMAGE_PIXELS, MIN_DASHBOARD_IMAGE_DIMENSION, ORIENTATION_DIMENSIONS, QUALITY_PRESETS, type QualityPreset, type RenderHtmlOptions, type ResolveDashboardDimensionsInput, type ResolvedDashboardDimensions, type VideoExportOptions, type VideoOrientation, type VideoQuality, audioBitrateArg, bitrateForQuality, computeAudioTimeline, dashboardFamilyForDimensions, ffmpegAudioMuxArgs, ffmpegGifFilterGraph, ffmpegGifOutputArgs, ffmpegGifPaletteApplicationArgs, ffmpegGifPaletteApplicationGraph, ffmpegGifPaletteGenerationFilter, ffmpegVideoQualityArgs, frameCountFor, frameTimeSeconds, framesToMp4Wasm, generateRenderHtml, resolveDashboardDimensions, resolveDimensions, resolveFfmpegWasmLoad, validateDashboardImageDimensions, validateVideoExportOptions };
+export { type AudioTimelineClip, type ComputeAudioTimelineOptions, DASHBOARD_RESOLUTIONS, DEFAULT_DASHBOARD_RESOLUTION, type DashboardResolutionId, type DashboardResolutionPreset, type EncoderResult, FFMPEG_WASM_SETUP_HINT, type FfmpegWasmLoadConfig, type GifDither, type GifFilterOptions, type GifOutputOptions, MAX_DASHBOARD_IMAGE_DIMENSION, MAX_DASHBOARD_IMAGE_PIXELS, MIN_DASHBOARD_IMAGE_DIMENSION, ORIENTATION_DIMENSIONS, QUALITY_PRESETS, type QualityPreset, type RenderFontFace, type RenderHtmlOptions, type ResolveDashboardDimensionsInput, type ResolvedDashboardDimensions, type VideoExportOptions, type VideoOrientation, type VideoQuality, audioBitrateArg, bitrateForQuality, computeAudioTimeline, dashboardFamilyForDimensions, ffmpegAudioMuxArgs, ffmpegGifFilterGraph, ffmpegGifOutputArgs, ffmpegGifPaletteApplicationArgs, ffmpegGifPaletteApplicationGraph, ffmpegGifPaletteGenerationFilter, ffmpegVideoQualityArgs, frameCountFor, frameTimeSeconds, framesToMp4Wasm, generateRenderHtml, resolveDashboardDimensions, resolveDimensions, resolveFfmpegWasmLoad, validateDashboardImageDimensions, validateVideoExportOptions };

package/dist/index.js

@@ -174,7 +174,7 @@ function inferMimeType(filename) {
 }
 var BINARY_STRING_CHUNK = 32768;
 function arrayBufferToDataUrl(buffer, mimeType) {
-  const bytes = new Uint8Array(buffer);
+  const bytes = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
   const parts = [];
   for (let i = 0; i < bytes.length; i += BINARY_STRING_CHUNK) {
     parts.push(String.fromCharCode(...bytes.subarray(i, i + BINARY_STRING_CHUNK)));
@@ -187,6 +187,37 @@ function escapeForScript(str) {
 function escapeHtml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+var FONT_MIME = {
+  woff2: "font/woff2",
+  woff: "font/woff",
+  truetype: "font/ttf",
+  opentype: "font/otf"
+};
+var FONT_FAMILY = /^[\p{L}\p{N} _.-]+$/u;
+var FONT_WEIGHT = /^(?:normal|bold|\d{1,4}(?: \d{1,4})?)$/;
+var UNICODE_RANGE = /^U\+[0-9A-F?]{1,6}(?:-[0-9A-F]{1,6})?(?:, ?U\+[0-9A-F?]{1,6}(?:-[0-9A-F]{1,6})?)*$/i;
+function fontFaceCss(fonts) {
+  return fonts.map((font) => {
+    const family = font.family.trim();
+    const format = font.format ?? "woff2";
+    const weight = String(font.weight ?? "normal").trim();
+    const style = font.style ?? "normal";
+    if (!FONT_FAMILY.test(family)) throw new Error(`Invalid font family name: ${font.family}`);
+    if (!(format in FONT_MIME)) throw new Error(`Unsupported font format: ${format}`);
+    if (!FONT_WEIGHT.test(weight)) {
+      throw new Error(`Invalid font weight for ${family}: ${weight}`);
+    }
+    if (style !== "normal" && style !== "italic") {
+      throw new Error(`Invalid font style for ${family}: ${String(style)}`);
+    }
+    if (font.unicodeRange !== void 0 && !UNICODE_RANGE.test(font.unicodeRange.trim())) {
+      throw new Error(`Invalid unicode-range for ${family}: ${font.unicodeRange}`);
+    }
+    const src = arrayBufferToDataUrl(font.data, FONT_MIME[format]);
+    const range = font.unicodeRange ? `;unicode-range:${font.unicodeRange.trim()}` : "";
+    return `@font-face{font-family:"${family}";src:url(${src}) format("${format}");font-weight:${weight};font-style:${style};font-display:block${range}}`;
+  }).join("\n");
+}
 function generateRenderHtml(doc, options) {
   const {
     playerScript,
@@ -204,8 +235,12 @@ function generateRenderHtml(doc, options) {
     animationsEnabled = true,
     buildsEnabled = true,
     displayMode = "slideshow",
-    dashboard
+    dashboard,
+    fonts = []
   } = options;
+  const fontCss = fonts.length > 0 ? `
+${fontFaceCss(fonts)}` : "";
+  const fontLoad = fonts.length > 0 ? "\n  if (document.fonts) document.fonts.forEach(function (face) { face.load().catch(function () {}); });" : "";
   const imageMap = {};
   if (images) {
     for (const [path, buffer] of images.entries()) {
@@ -248,7 +283,7 @@ function generateRenderHtml(doc, options) {
 <style>
 *,*::before,*::after{box-sizing:border-box}
 html,body{margin:0;padding:0;width:${width}px;height:${height}px;overflow:hidden;background:#000}
-#squisq-root{width:${width}px;height:${height}px;display:flex;align-items:center;justify-content:center}
+#squisq-root{width:${width}px;height:${height}px;display:flex;align-items:center;justify-content:center}${fontCss}
 </style>
 </head>
 <body>
@@ -259,7 +294,7 @@ html,body{margin:0;padding:0;width:${width}px;height:${height}px;overflow:hidden
   var doc = JSON.parse(${JSON.stringify(docJson)});
   var images = JSON.parse(${JSON.stringify(imageMapJson)});
   var audio = ${audioMapJson === "null" ? "null" : "JSON.parse(" + JSON.stringify(audioMapJson) + ")"};
-  var root = document.getElementById("squisq-root");
+  var root = document.getElementById("squisq-root");${fontLoad}
   SquisqPlayer.mount(root, doc, {
     mode: ${JSON.stringify(displayMode === "dashboard" ? "dashboard" : "slideshow")},
     images: images,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video",
-  "version": "2.4.19",
+  "version": "2.4.20",
   "description": "Cross-runtime video and animated-GIF helpers with browser-based ffmpeg.wasm encoding for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.13.13",
+    "@bendyline/squisq": "2.13.14",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2"
   },