mulmocast 2.6.15 → 2.6.16

package/lib/actions/index.d.ts

@@ -8,4 +8,5 @@ export * from "./pdf.js";
 export * from "./translate.js";
 export * from "./markdown.js";
 export * from "./html.js";
+export * from "./viewer.js";
 export * from "./bundle.js";

package/lib/actions/index.js

@@ -8,4 +8,5 @@ export * from "./pdf.js";
 export * from "./translate.js";
 export * from "./markdown.js";
 export * from "./html.js";
+export * from "./viewer.js";
 export * from "./bundle.js";

package/lib/actions/viewer.d.ts

@@ -0,0 +1,3 @@
+import { MulmoStudioContext } from "../types/index.js";
+export declare const viewerFilePath: (context: MulmoStudioContext) => string;
+export declare const viewer: (context: MulmoStudioContext) => Promise<void>;

package/lib/actions/viewer.js

@@ -0,0 +1,173 @@
+import fs from "fs";
+import path from "path";
+import { localizedText } from "../utils/utils.js";
+import { writingMessage } from "../utils/file.js";
+import { MulmoStudioContextMethods } from "../methods/mulmo_studio_context.js";
+import { escapeHtml } from "../slide/utils.js";
+const imageMimeTypes = {
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+    svg: "image/svg+xml",
+};
+const imageToDataUri = (filePath) => {
+    if (!fs.existsSync(filePath)) {
+        return null;
+    }
+    const ext = path.extname(filePath).slice(1).toLowerCase();
+    const mime = imageMimeTypes[ext] ?? "image/png";
+    const base64 = fs.readFileSync(filePath).toString("base64");
+    return `data:${mime};base64,${base64}`;
+};
+const collectSlides = (context) => {
+    const { studio, multiLingual, lang = "en" } = context;
+    const slides = [];
+    studio.script.beats.forEach((beat, index) => {
+        const studioBeat = studio.beats[index];
+        // Prefer the HTML-rendered frame over the source image, matching pdf.ts / movie.ts.
+        const source = studioBeat?.htmlImageFile ?? studioBeat?.imageFile;
+        if (!source)
+            return;
+        const dataUri = imageToDataUri(source);
+        if (!dataUri)
+            return;
+        slides.push({
+            dataUri,
+            caption: localizedText(beat, multiLingual?.[index], lang),
+        });
+    });
+    return slides;
+};
+const viewerStyles = `
+  html, body { margin: 0; padding: 0; height: 100vh; overflow: hidden; background: #000; }
+  #deck { position: relative; width: 100vw; height: 100vh; }
+  section.slide {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding: 24px;
+    box-sizing: border-box;
+  }
+  section.slide.active { visibility: visible; }
+  section.slide img {
+    max-width: 100%;
+    max-height: 80vh;
+    object-fit: contain;
+    user-select: none;
+  }
+  section.slide p.caption {
+    color: #eee;
+    margin-top: 16px;
+    text-align: center;
+    font-family: system-ui, -apple-system, sans-serif;
+    max-width: 80ch;
+    max-height: 15vh;
+    overflow: hidden;
+  }
+  #counter {
+    position: fixed;
+    right: 16px;
+    bottom: 12px;
+    color: #aaa;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 14px;
+    user-select: none;
+    pointer-events: none;
+  }
+`;
+const viewerScript = `
+  (function () {
+    const slides = document.querySelectorAll("section.slide");
+    const counter = document.getElementById("counter");
+    if (slides.length === 0) return;
+    let current = 0;
+    const show = (i) => {
+      slides[current].classList.remove("active");
+      current = Math.max(0, Math.min(slides.length - 1, i));
+      slides[current].classList.add("active");
+      counter.textContent = (current + 1) + " / " + slides.length;
+    };
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowRight" || e.key === " " || e.key === "PageDown") {
+        e.preventDefault();
+        show(current + 1);
+      } else if (e.key === "ArrowLeft" || e.key === "PageUp") {
+        e.preventDefault();
+        show(current - 1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        show(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        show(slides.length - 1);
+      } else if (e.key === "f" || e.key === "F") {
+        if (!document.fullscreenElement) {
+          document.documentElement.requestFullscreen && document.documentElement.requestFullscreen();
+        } else {
+          document.exitFullscreen && document.exitFullscreen();
+        }
+      } else if (e.key === "Escape") {
+        document.exitFullscreen && document.exitFullscreen();
+      }
+    });
+    document.addEventListener("click", () => show(current + 1));
+    show(0);
+  })();
+`;
+const generateViewerHtml = (context) => {
+    const title = context.studio.script.title || "MulmoCast Viewer";
+    const slides = collectSlides(context);
+    const slidesHtml = slides
+        .map((s, i) => {
+        const captionHtml = s.caption.trim() ? `<p class="caption">${escapeHtml(s.caption)}</p>` : "";
+        const cls = i === 0 ? "slide active" : "slide";
+        return `      <section class="${cls}"><img src="${s.dataUri}" alt="Slide ${i + 1}" />${captionHtml}</section>`;
+    })
+        .join("\n");
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${escapeHtml(title)}</title>
+    <style>${viewerStyles}</style>
+  </head>
+  <body>
+    <div id="deck">
+${slidesHtml}
+    </div>
+    <div id="counter"></div>
+    <script>${viewerScript}</script>
+  </body>
+</html>
+`;
+};
+export const viewerFilePath = (context) => {
+    const { studio, fileDirs, lang = "en" } = context;
+    const langSuffix = studio.script.lang !== lang ? `_${lang}` : "";
+    const filename = `${studio.filename}${langSuffix}_viewer.html`;
+    return path.join(fileDirs.outDirPath, filename);
+};
+const generateViewer = (context) => {
+    const outputPath = viewerFilePath(context);
+    const htmlContent = generateViewerHtml(context);
+    fs.writeFileSync(outputPath, htmlContent, "utf8");
+    writingMessage(outputPath);
+};
+export const viewer = async (context) => {
+    try {
+        MulmoStudioContextMethods.setSessionState(context, "viewer", true);
+        generateViewer(context);
+        MulmoStudioContextMethods.setSessionState(context, "viewer", false, true);
+    }
+    catch (error) {
+        MulmoStudioContextMethods.setSessionState(context, "viewer", false, false);
+        throw error;
+    }
+};

package/lib/cli/commands/viewer/builder.d.ts

@@ -0,0 +1,20 @@
+import type { Argv } from "yargs";
+export declare const builder: (yargs: Argv) => Argv<{
+    o: string | undefined;
+} & {
+    b: string | undefined;
+} & {
+    l: string | undefined;
+} & {
+    f: boolean;
+} & {
+    g: boolean;
+} & {
+    backup: boolean;
+} & {
+    p: string | undefined;
+} & {
+    file: string | undefined;
+} & {
+    i: string | undefined;
+}>;

package/lib/cli/commands/viewer/builder.js

@@ -0,0 +1,6 @@
+import { commonOptions } from "../../common.js";
+export const builder = (yargs) => commonOptions(yargs).option("i", {
+    alias: "imagedir",
+    describe: "Image output directory",
+    type: "string",
+});

package/lib/cli/commands/viewer/handler.d.ts

@@ -0,0 +1,4 @@
+import { CliArgs } from "../../../types/cli_types.js";
+export declare const handler: (argv: CliArgs<{
+    i?: string;
+}>) => Promise<void>;

package/lib/cli/commands/viewer/handler.js

@@ -0,0 +1,11 @@
+import { images, viewer } from "../../../actions/index.js";
+import { initializeContext, runTranslateIfNeeded } from "../../helpers.js";
+export const handler = async (argv) => {
+    const context = await initializeContext(argv);
+    if (!context) {
+        process.exit(1);
+    }
+    await runTranslateIfNeeded(context);
+    await images(context);
+    await viewer(context);
+};

package/lib/cli/commands/viewer/index.d.ts

@@ -0,0 +1,4 @@
+export declare const command = "viewer <file>";
+export declare const desc = "Generate a zero-dependency, single-file HTML slideshow viewer (openable via file://)";
+export { builder } from "./builder.js";
+export { handler } from "./handler.js";

package/lib/cli/commands/viewer/index.js

@@ -0,0 +1,4 @@
+export const command = "viewer <file>";
+export const desc = "Generate a zero-dependency, single-file HTML slideshow viewer (openable via file://)";
+export { builder } from "./builder.js";
+export { handler } from "./handler.js";

package/lib/cli/main.js

@@ -12,6 +12,7 @@ import * as pdfCmd from "./commands/pdf/index.js";
 import * as markdownCmd from "./commands/markdown/index.js";
 import * as bundleCmd from "./commands/bundle/index.js";
 import * as htmlCmd from "./commands/html/index.js";
+import * as viewerCmd from "./commands/viewer/index.js";
 import * as toolCmd from "./commands/tool/index.js";
 import { GraphAILogger } from "graphai";
 dotenv.config({ quiet: true });
@@ -42,6 +43,7 @@ export const cliMain = async () => {
         .command(markdownCmd)
         .command(bundleCmd)
         .command(htmlCmd)
+        .command(viewerCmd)
         .command(toolCmd)
         .demandCommand()
         .strict()

package/lib/types/schema.d.ts

@@ -10800,6 +10800,7 @@ export declare const mulmoSessionStateSchema: z.ZodObject<{
         pdf: z.ZodBoolean;
         markdown: z.ZodBoolean;
         html: z.ZodBoolean;
+        viewer: z.ZodBoolean;
     }, z.core.$strip>;
     inBeatSession: z.ZodObject<{
         audio: z.ZodRecord<z.ZodString, z.ZodBoolean>;

package/lib/types/schema.js

@@ -669,6 +669,7 @@ export const mulmoSessionStateSchema = z.object({
         pdf: z.boolean(),
         markdown: z.boolean(),
         html: z.boolean(),
+        viewer: z.boolean(),
     }),
     inBeatSession: z.object({
         audio: z.record(z.string(), z.boolean()),

package/lib/types/type.d.ts

@@ -104,7 +104,7 @@ export type Text2HtmlAgentInfo = {
 };
 export type BeatMediaType = "movie" | "image";
 export type StoryToScriptGenerateMode = (typeof storyToScriptGenerateMode)[keyof typeof storyToScriptGenerateMode];
-export type SessionType = "audio" | "image" | "video" | "multiLingual" | "caption" | "pdf" | "markdown" | "html";
+export type SessionType = "audio" | "image" | "video" | "multiLingual" | "caption" | "pdf" | "markdown" | "html" | "viewer";
 export type BeatSessionType = "audio" | "image" | "multiLingual" | "caption" | "movie" | "html" | "imageReference" | "soundEffect" | "lipSync";
 export type SessionProgressEvent = {
     kind: "session";

package/lib/utils/context.d.ts

@@ -4887,6 +4887,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
             pdf: boolean;
             markdown: boolean;
             html: boolean;
+            viewer: boolean;
         };
         inBeatSession: {
             audio: {};

package/lib/utils/context.js

@@ -46,6 +46,7 @@ const initSessionState = () => {
             pdf: false,
             markdown: false,
             html: false,
+            viewer: false,
         },
         inBeatSession: {
             audio: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.6.15",
+  "version": "2.6.16",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -25,8 +25,8 @@
   },
   "resolutions": {
     "minimatch": "^10.2.5",
-    "tar": "7.5.13",
-    "yauzl": "^3.3.0"
+    "tar": "7.5.15",
+    "yauzl": "^3.3.1"
   },
   "bin": {
     "mulmo": "lib/cli/bin.js",
@@ -108,12 +108,12 @@
     "archiver": "^7.0.1",
     "clipboardy": "^5.3.1",
     "dotenv": "^17.4.2",
-    "graphai": "^2.0.16",
+    "graphai": "^2.0.17",
     "jsdom": "^29.1.1",
-    "marked": "^18.0.3",
+    "marked": "^18.0.4",
     "mulmocast-vision": "^1.0.10",
     "ora": "^9.4.0",
-    "puppeteer": "^25.0.3",
+    "puppeteer": "^25.0.4",
     "replicate": "^1.4.0",
     "yaml": "^2.9.0",
     "yargs": "^18.0.0",
@@ -133,9 +133,9 @@
     "eslint-plugin-sonarjs": "^4.0.3",
     "globals": "^17.6.0",
     "prettier": "^3.8.3",
-    "tsx": "^4.22.1",
+    "tsx": "^4.22.3",
     "typescript": "6.0.3",
-    "typescript-eslint": "^8.59.3"
+    "typescript-eslint": "^8.59.4"
   },
   "engines": {
     "node": ">=22.0.0"