Rene frame and render vieo working

package-lock.json

@@ -43,6 +43,7 @@
 				"npm": "^9.8.1",
 				"path": "^0.12.7",
 				"pdfkit": "^0.15.0",
+				"playwright": "^1.60.0",
 				"puppeteer": "^21.3.6",
 				"react": "^18.0.0",
 				"react-dom": "^18.0.0",
@@ -14557,6 +14558,36 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/playwright": {
+			"version": "1.60.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+			"integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright-core": "1.60.0"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
+			}
+		},
+		"node_modules/playwright-core": {
+			"version": "1.60.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+			"integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+			"license": "Apache-2.0",
+			"bin": {
+				"playwright-core": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/pluralize": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -28072,6 +28103,20 @@
 			"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
 			"integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="
 		},
+		"playwright": {
+			"version": "1.60.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+			"integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+			"requires": {
+				"fsevents": "2.3.2",
+				"playwright-core": "1.60.0"
+			}
+		},
+		"playwright-core": {
+			"version": "1.60.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+			"integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA=="
+		},
 		"pluralize": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",

package.json

@@ -83,6 +83,7 @@
 		"npm": "^9.8.1",
 		"path": "^0.12.7",
 		"pdfkit": "^0.15.0",
+		"playwright": "^1.60.0",
 		"puppeteer": "^21.3.6",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
@@ -107,4 +108,4 @@
 	"devDependencies": {
 		"@types/lodash": "^4.14.199"
 	}
-}
+}

server-plugins/apply.js

@@ -4,7 +4,7 @@ import { SplitRenderPlugin } from './split-render.js';
 import { FramesPlugin } from './frames.js';
 import { CaptionPlugin } from './generate-captions.js';
 import { CropPlugin } from './crop.js';
-import { FlattenPathsPlugin } from './flatten-paths.js';
+import { FlattenPathsPlugin } from './normalize-flatten-paths.js';
 import { SpeedPlugin } from './speed.js';
 import { OverlayPlugin } from './overlay.js';
 import { HookPlugin } from './hook.js';

server-plugins/{flatten-paths.js → normalize-flatten-paths.js}

@@ -32,6 +32,12 @@ export class FlattenPathsPlugin extends Plugin {
               path.basename(b.mediaAbsPath.path)
             );
           }
+          if (b.bubbleHtml && b.bubbleHtml.path) {
+            b.bubbleHtml.path = path.join(
+              'public',
+              path.basename(b.bubbleHtml.path)
+            );
+          }
         });
       }
 

utils/HtmlRender.js

@@ -0,0 +1,69 @@
+import { chromium } from 'playwright';
+import fs from 'fs';
+import path from 'path';
+
+export class HtmlRender {
+  constructor() {
+    this.browser = null;
+    this.page = null;
+  }
+
+  async init() {
+    if (!this.browser) {
+      this.browser = await chromium.launch();
+      this.page = await this.browser.newPage();
+    }
+  }
+
+  async renderFrame(html, htmlFile, outFilePath, options = {}) {
+    await this.init();
+
+    if (html) {
+      await this.page.setContent(html, { waitUntil: 'networkidle' });
+    } else if (htmlFile) {
+      await this.page.goto(`file://${htmlFile}`, { waitUntil: 'networkidle' });
+    } else {
+      throw new Error('Either html or htmlFile must be provided.');
+    }
+
+    await this.page.screenshot({ path: outFilePath, ...options });
+  }
+
+  async renderVideo(html, htmlFile, outFilePath, durationSec, options = {}) {
+    if (!this.browser) {
+      this.browser = await chromium.launch();
+    }
+    const context = await this.browser.newContext({
+      recordVideo: {
+        dir: path.dirname(outFilePath),
+        size: options.viewport || { width: 1080, height: 1920 }
+      }
+    });
+    const page = await context.newPage();
+    if (options.viewport) await page.setViewportSize(options.viewport);
+
+    if (html) {
+      await page.setContent(html, { waitUntil: 'networkidle' });
+    } else if (htmlFile) {
+      await page.goto(`file://${htmlFile}`, { waitUntil: 'networkidle' });
+    }
+
+    await page.waitForTimeout(durationSec * 1000);
+    await page.close();
+    await context.close();
+
+    const videoPath = await page.video().path();
+    if (fs.existsSync(videoPath)) {
+      if (fs.existsSync(outFilePath)) fs.unlinkSync(outFilePath);
+      fs.renameSync(videoPath, outFilePath);
+    }
+  }
+
+  async close() {
+    if (this.browser) {
+      await this.browser.close();
+      this.browser = null;
+      this.page = null;
+    }
+  }
+}

utils/bubble/Bubble.js

@@ -56,6 +56,7 @@ const resolveFontFile = (fontName, fontWeight) => {
 
 
 import { BaseBubbleTemplates } from './bubble-templates.js';
+import { HtmlRender } from '../HtmlRender.js';
 
 
 class BubbleMaker {
@@ -225,10 +226,15 @@ class BubbleMaker {
     const meta = await FFMpegUtils.getMediaMetadata(silentVideo);
     const vw = meta.video.width;
     const vh = meta.video.height;
-    bubbleArr.map(b => Object.assign(b, this._applyTemplate(b, vw, vh), b));
-    const expandedBubbles = bubbleArr
+    bubbleArr.forEach(b => Object.assign(b, this._applyTemplate(b, vw, vh)));
+    const expandedBubbles = bubbleArr;
+    const hasHtml = expandedBubbles.some(b => b.bubbleHtml && b.bubbleHtml.text);
+
+    if (hasHtml) {
+      await this._renderHtmlBatch(silentVideo, expandedBubbles, outputPath, onLog, meta);
+    }
+
     const hasText = expandedBubbles.some(b => b.bubbleText && b.bubbleText.text);
-    const hasHtml = expandedBubbles.some(b => b.htmlText && b.htmlText.text);
 
 
     // If there are text bubbles we must go sequential (ASS subtitle filter can't be batched easily)
@@ -245,10 +251,6 @@ class BubbleMaker {
       return;
     }
 
-    if (hasHtml) {
-      this._renderHtmlBatch(silentVideo, expandedBubbles, outputPath, onLog, meta)
-    }
-
     const hasMedia = expandedBubbles.some(b => {
       const mf = b.mediaAbsPaths || b.mediaAbsPath || b.mediaAbs;
       return !!mf;
@@ -315,9 +317,73 @@ class BubbleMaker {
   }
 
   async _renderHtmlBatch(silentVideo, bubbles, outputPath, onLog, meta) {
-    // First render the bubble html to a png file
-    // the PNG fill MUST be of the same dimenstion as the silentVideo (check the meta)
-    // then simply add it to b.mediaAbsPaths so it gets picked up
+    const htmlBubbles = bubbles.filter(b => b.htmlFile || (b.bubbleHtml && b.bubbleHtml.text));
+    if (htmlBubbles.length === 0) return;
+
+    const htmlRenderer = new HtmlRender();
+    await htmlRenderer.init();
+
+    try {
+      const vw = meta.video.width;
+      const vh = meta.video.height;
+      await htmlRenderer.page.setViewportSize({ width: vw, height: vh });
+
+      for (const b of htmlBubbles) {
+        const isVideo = typeof b.durationSec === 'number' && b.durationSec > 0;
+        const outPath = tempPath('html_bubble', isVideo ? 'mp4' : 'png');
+
+        let finalHtml = null;
+        let finalFile = null;
+
+        if (b.htmlFile) {
+          finalFile = path.isAbsolute(b.htmlFile) ? b.htmlFile : path.join(process.cwd(), b.htmlFile);
+        } else {
+          const html = b.bubbleHtml.text;
+          // Wrap HTML to ensure transparent background and full viewport coverage
+          finalHtml = `
+            <!DOCTYPE html>
+            <html>
+              <head>
+                <style>
+                  body, html {
+                    margin: 0;
+                    padding: 0;
+                    background: transparent;
+                    overflow: hidden;
+                    width: 100%;
+                    height: 100%;
+                  }
+                </style>
+              </head>
+              <body>
+                ${html}
+              </body>
+            </html>
+          `;
+        }
+
+        if (isVideo) {
+          onLog && onLog(`Rendering HTML bubble to video ${outPath} for ${b.durationSec}s`);
+          await htmlRenderer.renderVideo(finalHtml, finalFile, outPath, b.durationSec, { viewport: { width: vw, height: vh } });
+        } else {
+          onLog && onLog(`Rendering HTML bubble to image ${outPath}`);
+          await htmlRenderer.renderFrame(finalHtml, finalFile, outPath, { omitBackground: true });
+        }
+
+        // Add the rendered asset
+        b.mediaAbsPaths = [outPath];
+
+        // Ensure it covers full screen since it was rendered at video dimensions
+        if (!b.bubbleExtra) b.bubbleExtra = {};
+        b.bubbleExtra.size = 'full';
+        b.bubbleExtra.positionX = 'left';
+        b.bubbleExtra.positionY = 'top';
+        b.bubbleExtra.paddingX = 0;
+        b.bubbleExtra.paddingY = 0;
+      }
+    } finally {
+      await htmlRenderer.close();
+    }
   }
 
   /**

utils/bubble/bubble-templates.js

@@ -1,4 +1,13 @@
 // Base bubble templates (defaults). Templates prefill everything except bubbleText.text for text templates.
+/**
+ *     | 'none'
+    | 'popup'
+    | "fade"
+    | "slide_left"
+    | "slide_right"
+    | "slide_up"
+    | "slide_down"
+ */
 export const BaseBubbleTemplates = {
   // Simple text box: black text on white rounded box at top-center
   'simple-top-center': {
@@ -9,7 +18,7 @@ export const BaseBubbleTemplates = {
     audioEffectFile: 'click',
     audioEffectDurationSec: 0.2,
     animExtra: {
-      template: 'slide_down',
+      template: 'fade',
       durationSec: 0.1
     },
     bubbleText: {
@@ -33,7 +42,7 @@ export const BaseBubbleTemplates = {
     audioEffectDurationSec: 0.2,
     // default animation for the overlay itself. callers can override
     animExtra: {
-      template: 'slide_down',
+      template: 'fade',
       durationSec: 0.1
     },
     bubbleExtra: {
@@ -51,7 +60,7 @@ export const BaseBubbleTemplates = {
     audioEffectDurationSec: 0.2,
     // default animation for the overlay itself. callers can override
     animExtra: {
-      template: 'slide_down',
+      template: 'fade',
       durationSec: 0.1
     },
     bubbleExtra: {