mulmocast 2.4.5 → 2.4.6

package/lib/utils/image_plugins/html_tailwind.js

@@ -1,10 +1,21 @@
 import fs from "node:fs";
+import nodePath from "node:path";
 import { MulmoBeatMethods } from "../../methods/mulmo_beat.js";
 import { getHTMLFile } from "../file.js";
 import { renderHTMLToImage, interpolate, renderHTMLToFrames } from "../html_render.js";
 import { framesToVideo } from "../ffmpeg_utils.js";
 import { parrotingImagePath } from "./utils.js";
 export const imageType = "html_tailwind";
+/**
+ * Resolve relative paths in src attributes to file:// absolute paths.
+ * Paths starting with http://, https://, file://, data:, or / are left unchanged.
+ */
+const resolveRelativeImagePaths = (html, baseDirPath) => {
+    return html.replace(/(\bsrc\s*=\s*)(["'])((?!https?:\/\/|file:\/\/|data:|\/)[^"']+)\2/gi, (_, prefix, quote, relativePath) => {
+        const absolutePath = nodePath.resolve(baseDirPath, relativePath);
+        return `${prefix}${quote}file://${absolutePath}${quote}`;
+    });
+};
 const DEFAULT_ANIMATION_FPS = 30;
 /** Join html field into a single string (handles both string and string[]) */
 const joinHtml = (html) => {
@@ -28,7 +39,7 @@ const getAnimationConfig = (params) => {
     return { fps: DEFAULT_ANIMATION_FPS };
 };
 const processHtmlTailwindAnimated = async (params) => {
-    const { beat, imagePath, canvasSize } = params;
+    const { beat, imagePath, canvasSize, context } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
     const animConfig = getAnimationConfig(params);
@@ -46,13 +57,14 @@ const processHtmlTailwindAnimated = async (params) => {
     const html = joinHtml(beat.image.html);
     const template = getHTMLFile("tailwind_animated");
     const script = "script" in beat.image ? beat.image.script : undefined;
-    const htmlData = interpolate(template, {
+    const rawHtmlData = interpolate(template, {
         html_body: html,
         user_script: buildUserScript(script),
         totalFrames: String(totalFrames),
         fps: String(fps),
         custom_style: "",
     });
+    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
     // imagePath is set to the .mp4 path by imagePluginAgent for animated beats
     const videoPath = imagePath;
     // Create frames directory next to the video file
@@ -68,16 +80,17 @@ const processHtmlTailwindAnimated = async (params) => {
     return videoPath;
 };
 const processHtmlTailwindStatic = async (params) => {
-    const { beat, imagePath, canvasSize } = params;
+    const { beat, imagePath, canvasSize, context } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
     const html = joinHtml(beat.image.html);
     const template = getHTMLFile("tailwind");
     const script = "script" in beat.image ? beat.image.script : undefined;
-    const htmlData = interpolate(template, {
+    const rawHtmlData = interpolate(template, {
         html_body: html,
         user_script: buildUserScript(script),
     });
+    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
     await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",

package/scripts/test/cinematic_showcase.json

@@ -339,10 +339,7 @@
           "  </div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
         "animation": true
       }
     },
@@ -490,10 +487,7 @@
           "  <div id='t' class='text-7xl font-bold' style='font-family:\"Courier New\",Monaco,monospace;color:#00ff00;opacity:0'>THE MATRIX</div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 0.3, end: 1.0 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.3, end: 1.0 });"],
         "animation": true
       }
     },
@@ -565,10 +559,7 @@
           "  <div id='t' class='text-7xl font-bold tracking-wide' style='font-family:Georgia,serif;color:#2c3e50;opacity:0'>DOCUMENTARY</div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
         "animation": true
       }
     },
@@ -716,10 +707,7 @@
           "  </div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });"],
         "animation": true
       }
     },
@@ -913,10 +901,7 @@
           "  </div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
         "animation": true
       }
     },
@@ -1368,4 +1353,4 @@
       }
     }
   ]
-}
+}