Bubble text

server-plugins/crop.js

@@ -10,8 +10,8 @@ export class CropPlugin extends Plugin {
 
   async applyPrerender(originalManuscript, jobId) {
     const transcript = originalManuscript.transcript || [];
-    const targetWidth = this.options.width || this.options.targetWidth || 1080;
-    const targetHeight = this.options.height || this.options.targetHeight || 1920;
+    const targetWidth = +this.options.width || +this.options.targetWidth || 1080;
+    const targetHeight = +this.options.height || +this.options.targetHeight || 1920;
     const targetAspect = targetWidth / targetHeight;
 
     for (let item of transcript) {

utils/bubble/Bubble.js

@@ -6,19 +6,56 @@ import { FFMpegUtils } from 'common-utils';
 import os from 'os';
 import sharp from 'sharp';
 import crypto from 'crypto';
-import { tempPath, escapeXml, escapeText, resolveAudioPath } from './helpers.js';
-import { createTextBackgroundPng, processImageWithBg } from './bg-utils.js';
+import { tempPath, escapeXml, escapeText, resolveAudioPath, ensureFontFile } from './helpers.js';
+import { processImageWithBg } from './bg-utils.js';
+import { createAssSubtitle } from './ass-utils.js';
 import { computeXY } from './layout.js';
 
 
-const DEFAULT_FONT_FILE = (() => {
-  const winFonts = process.env.WINDIR ? path.join(process.env.WINDIR, 'Fonts') : 'C:\\Windows\\Fonts';
-  const preferred = path.join(winFonts, 'CascadiaCode.ttf');
-  const fallback = path.join(winFonts, 'Arial.ttf');
-  if (fs.existsSync(preferred)) return preferred.replace(/\\/g, '/');
-  if (fs.existsSync(fallback)) return fallback.replace(/\\/g, '/');
-  return preferred.replace(/\\/g, '/');
-})();
+const resolveFontFile = (fontName, fontWeight) => {
+  // Platform-independent: prefer fonts bundled in public/assets/fonts. Do not rely on system (Windows) font folder.
+  if (!fontName) return null;
+  const publicFontsDir = path.join(process.cwd(), 'public', 'assets', 'fonts');
+  try {
+    if (fs.existsSync(publicFontsDir)) {
+      const files = fs.readdirSync(publicFontsDir);
+      const normalized = (s) => s.replace(/\s+/g, '').toLowerCase();
+      const target = fontName.toLowerCase();
+      // exact name match (with or without spaces)
+      let match = files.find(f => {
+        const name = path.parse(f).name;
+        return name.toLowerCase() === target || normalized(name) === normalized(fontName);
+      });
+      if (!match) {
+        match = files.find(f => path.parse(f).name.toLowerCase().includes(target));
+      }
+      if (!match && fontWeight) {
+        const weightNormalized = ('' + fontWeight).toLowerCase();
+        match = files.find(f => {
+          const name = path.parse(f).name.toLowerCase();
+          return name.includes(weightNormalized) || name.includes(target.replace(/\s+/g, '').toLowerCase() + weightNormalized) || name.includes(target + '-' + weightNormalized);
+        });
+      }
+      if (match) return path.join(publicFontsDir, match).replace(/\\/g, '/');
+    }
+  } catch (e) {
+    // ignore
+  }
+  // also allow font files directly under public/ for legacy compatibility
+  try {
+    const publicRoot = path.join(process.cwd(), 'public');
+    if (fs.existsSync(publicRoot)) {
+      const files = fs.readdirSync(publicRoot);
+      const target = fontName.toLowerCase();
+      const match = files.find(f => path.parse(f).name.toLowerCase().includes(target));
+      if (match) return path.join(publicRoot, match).replace(/\\/g, '/');
+    }
+  } catch (e) {
+    // ignore
+  }
+  // Not found locally; return null and let ensureFontFile handle downloading when requested
+  return null;
+};
 
 
 import { BaseBubbleTemplates } from './bubble-templates.js';
@@ -52,7 +89,6 @@ class BubbleMaker {
         if (bubble.bubbleText) {
           const bt = bubble.bubbleText;
           if (typeof bt.fontSize === 'number') bt.fontSize = Math.max(1, Math.round(bt.fontSize * scale));
-          if (typeof bt.boxBorderW === 'number') bt.boxBorderW = Math.max(1, Math.round(bt.boxBorderW * scale));
           if (typeof bt.shadowSize === 'number') bt.shadowSize = Math.max(0, Math.round(bt.shadowSize * scale));
         }
       } else {
@@ -191,27 +227,45 @@ class BubbleMaker {
       } else {
         // enable between
         const enable = `between(t,${from},${to})`;
-        const needsBg = !!(bubble.backgroundColor || (typeof bubble.borderRadius === 'number') || t.box);
-        const fontfileEsc = DEFAULT_FONT_FILE.replace(/\\/g, '\\\\').replace(/:/g, '\\:');
+        const needsBg = !!(bubble.backgroundColor || (typeof bubble.borderRadius === 'number'));
+        let fontfilePath = null;
+        if (t.fontName) {
+          try { fontfilePath = await ensureFontFile(t.fontName, t.fontWeight); } catch (e) { fontfilePath = null; }
+        }
+        const fontfileToUse = fontfilePath || resolveFontFile(t.fontName, t.fontWeight);
+        const fontfileEsc = (fontfileToUse || '').replace(/\\/g, '\\\\').replace(/:/g, '\\:');
 
-        let bgPath = null;
+        // Use ASS for text and background (no PNGs). Compute position and generate ASS with boxColor from bubble.backgroundColor.
         let videoFilter;
-        if (needsBg) {
-          const paddingXpx = t.boxBorderW || 14;
-          const paddingYpx = Math.max(8, Math.round(fontSize * 0.6));
-          const bgInfo = await createTextBackgroundPng(t.text || '', fontSize, t.fontName, bubble.backgroundColor || t.boxColor || 'white', t.boxBorderW || 14, paddingXpx, paddingYpx, bubble.borderRadius || 0, t.fontColor || fontColor);
-          bgPath = bgInfo.path;
-          const { x: bgX, y: bgY } = computeXY(bgInfo.width, bgInfo.height, extra, vw, vh);
-          // center text within bg box
-          const xFor = `${bgX}+(${bgInfo.width}-text_w)/2`;
-          const yFor = `${bgY}+(${bgInfo.height}-text_h)/2`;
-          const drawTextBoxPart = '';
-          const draw = `drawtext=text='${escapeText(t.text)}':font=${t.fontName || 'Arial'}:fontfile='${fontfileEsc}':fontsize=${fontSize}:fontcolor=${t.fontColor || '#FFFFFF'}:x=${xFor}:y=${yFor}:enable='${enable}'${drawTextBoxPart}`;
-          videoFilter = `[1:v]scale=${bgInfo.width}:${bgInfo.height},format=rgba[bg];[0:v][bg]overlay=${bgX}:${bgY}:enable='between(t,${from},${to})'[mid];[mid]${draw}[vout]`;
-        } else {
-          const drawTextBoxPart = t.box ? `:box=1:boxcolor=${t.boxColor || 'white'}@1:boxborderw=${t.boxBorderW || 10}` : '';
-          const draw = `drawtext=text='${escapeText(t.text)}':font=${t.fontName || 'Arial'}:fontfile='${fontfileEsc}':fontsize=${fontSize}:fontcolor=${t.fontColor || '#FFFFFF'}:x=${xExpr}:y=${yExpr}:enable='${enable}'${drawTextBoxPart}`;
-          videoFilter = `[0:v]${draw}[vout]`;
+        // compute absolute position for ASS based on extra position
+        let absX = Math.round(vw / 2);
+        let absY = Math.round(vh / 2);
+        if (posX === 'left') absX = Math.round(vw * (padX / 100));
+        else if (posX === 'right') absX = Math.round(vw - vw * (padX / 100));
+        if (posY === 'top') absY = Math.round(vh * (padY / 100));
+        else if (posY === 'bottom') absY = Math.round(vh - vh * (padY / 100));
+        // create ASS subtitle using boxColor from bubble.backgroundColor (if any)
+        const assInfo = await createAssSubtitle(t.text || '', { vw, vh, fontName: t.fontName || 'Arial', fontSize, fontColor: t.fontColor || fontColor, fontWeight: t.fontWeight, boxColor: bubble.backgroundColor || null, x: absX, y: absY, from, to });
+        let assPath = assInfo.path.replace(/\\/g, '/').replace(/:/g, '\\:'); // escape colon for ffmpeg filter parser on Windows
+        const fontsDir = fontfilePath ? path.dirname(fontfilePath).replace(/\\/g, '/') : path.join(process.cwd(), 'public', 'assets', 'fonts').replace(/\\/g, '/');
+        const assEsc = assPath.replace(/'/g, "\\'");
+        const fontsDirEsc = fontsDir.replace(/:/g, '\\:').replace(/'/g, "\\'");
+        // Default to ASS-only subtitle render
+        // If ASS background doesn't render properly, fall back to overlaying a generated PNG box behind the subtitles.
+        videoFilter = `[0:v]subtitles='${assEsc}':fontsdir='${fontsDirEsc}'[vout]`;
+        let bgPath = null;
+        if (bubble.backgroundColor) {
+          try {
+            const bgInfo = await createTextBackgroundPng(t.text || '', fontSize, t.fontName || 'Arial', bubble.backgroundColor, 0, 20, 8, bubble.borderRadius || 0, t.fontColor || fontColor);
+            const bgLocal = bgInfo.path.replace(/\\/g, '/');
+            const overlayX = Math.round(absX - bgInfo.width / 2);
+            const overlayY = Math.round(absY - bgInfo.height / 2);
+            // Overlay the PNG (input index 1) then apply subtitles on top of the composed stream
+            videoFilter = `[1:v]scale=${bgInfo.width}:${bgInfo.height},format=rgba[bg];[0:v][bg]overlay=${overlayX}:${overlayY}:enable='between(t,${from},${to})'[mid];[mid]subtitles='${assEsc}':fontsdir='${fontsDirEsc}'[vout]`;
+            bgPath = bgLocal;
+          } catch (e) {
+            // keep ASS-only videoFilter on failure
+          }
         }
 
         if (bubble.audioEffectFile) {
@@ -222,7 +276,7 @@ class BubbleMaker {
           if (audioPath) {
             const aVol = typeof bubble.audioEffectVolume === 'number' ? bubble.audioEffectVolume : 1.0;
             const delayMs = Math.round(from * 1000);
-            const audioInputIndex = bgPath ? 2 : 1;
+            const audioInputIndex = 1;
             const clipSec = Math.min((typeof bubble.audioEffectDurationSec === 'number' ? bubble.audioEffectDurationSec : (to - from)), (to - from));
             const fc = `${videoFilter};[0:a]aresample=async=1[a0];[${audioInputIndex}:a]atrim=0:${clipSec},asetpts=PTS-STARTPTS,volume=${aVol}[aeff];[aeff]adelay=${delayMs}|${delayMs}[aeffd];[a0][aeffd]amix=inputs=2:duration=first:dropout_transition=0[aout]`;
             if (bgPath) {
@@ -274,7 +328,7 @@ export async function test() {
   // Single sample: simple-top-center template. Only provide the text content.
   const typingSample = {
     templateName: 'simple-top-center',
-    bubbleText: { text: 'TYPING TITLE' },
+    bubbleText: { text: 'A QUICK BROWN FOX JUMPED OVER' },
     fromSec: 0.5,
     toSec: 5.0
   };

utils/bubble/ass-utils.js

@@ -0,0 +1,101 @@
+import fs from 'fs';
+import path from 'path';
+import { tempPath, escapeXml } from './helpers.js';
+
+function secToAssTime(s) {
+  const sign = s < 0 ? -1 : 1;
+  s = Math.abs(s);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = Math.floor(s % 60);
+  const cs = Math.floor((s - Math.floor(s)) * 100);
+  return `${h}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}.${String(cs).padStart(2, '0')}`;
+}
+
+function assColorFromHex(hex) {
+  if (!hex) return '&H00FFFFFF';
+  // support simple named colors and rgb/rgba strings
+  const named = {
+    red: '#FF0000',
+    white: '#FFFFFF',
+    black: '#000000',
+    transparent: '#00000000',
+    blue: '#0000FF',
+    green: '#00FF00',
+    yellow: '#FFFF00',
+    gray: '#808080',
+    grey: '#808080'
+  };
+  if (typeof hex === 'string' && !hex.startsWith('#')) {
+    const key = hex.toLowerCase();
+    if (named[key]) hex = named[key];
+    else {
+      // try to parse rgb()/rgba()
+      const m = hex.match(/rgba?\s*\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/i);
+      if (m) {
+        const r = parseInt(m[1], 10);
+        const g = parseInt(m[2], 10);
+        const b = parseInt(m[3], 10);
+        const a = m[4] !== undefined ? Math.round(parseFloat(m[4]) * 255) : 255;
+        const aa = a.toString(16).padStart(2, '0').toUpperCase();
+        hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}${aa}`;
+      }
+    }
+  }
+
+  let h = String(hex).replace(/^#/, '');
+  // support RRGGBB or RRGGBBAA or short 3-char
+  if (h.length === 3) h = h.split('').map(c => c + c).join('');
+  if (h.length === 6) h = 'FF' + h; // add alpha FF (opaque) at front
+  if (h.length === 8) {
+    const a = h.slice(0, 2);
+    const r = h.slice(2, 4);
+    const g = h.slice(4, 6);
+    const b = h.slice(6, 8);
+    // ASS uses &HAABBGGRR where AA is alpha (00 opaque)
+    // convert alpha from hex (FF opaque) to ASS alpha where 00 opaque -> ASSalpha = (255 - alpha)
+    const parsed = parseInt(a, 16);
+    const alpha = isNaN(parsed) ? 255 : 255 - parsed;
+    const aa = alpha.toString(16).padStart(2, '0').toUpperCase();
+    return `&H${aa}${b}${g}${r}`;
+  }
+  return '&H00FFFFFF';
+}
+
+export async function createAssSubtitle(text, opts = {}) {
+  const { vw = 1080, vh = 1920, fontName = 'Arial', fontSize = 40, fontColor = '#FFFFFF', fontWeight, boxColor = null, x = vw / 2, y = vh / 2, from = 0, to = 3 } = opts;
+  const safeText = (text == null) ? '' : String(text).replace(/\r/g, '').replace(/\n/g, '\\N').replace(/([{}])/g, '\\$1');
+  const assPath = tempPath('bubble', 'ass');
+  const styleName = 'BubbleStyle';
+  const primary = assColorFromHex(fontColor);
+  const back = assColorFromHex(boxColor);
+  const bold = ('' + fontWeight).indexOf('7') === 0 || (String(fontWeight) === '700' || String(fontWeight).toLowerCase().includes('bold')) ? '1' : '0';
+  const fontSz = Math.round(fontSize);
+  const header = `[Script Info]\nScriptType: v4.00+\nPlayResX: ${vw}\nPlayResY: ${vh}\n\n[V4+ Styles]\nFormat: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding\n`;
+
+  // Simple style: use BackColour (BorderStyle=3) when boxColor provided
+  const styleLine = boxColor
+    ? `Style: ${styleName},${fontName},${fontSz},${primary},&H00FFFFFF,&H00000000,${back},${bold},0,0,0,100,100,0,0,3,0,0,2,10,10,10,1\n\n`
+    : `Style: ${styleName},${fontName},${fontSz},${primary},&H00FFFFFF,&H00000000,&H00000000,${bold},0,0,0,100,100,0,0,1,1,0,2,10,10,10,1\n\n`;
+
+  const eventsHeader = `[Events]\nFormat: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text\n`;
+  const start = secToAssTime(from);
+  const end = secToAssTime(to);
+  const dialog = `Dialogue: 0,${start},${end},${styleName},,0,0,0, ,{\\pos(${Math.round(x)},${Math.round(y)})}${safeText}\n`;
+  let content = header + styleLine + eventsHeader + dialog;
+  content = `[Script Info]
+Title: Song Lyrics
+
+[V4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, BackColour, BorderStyle, Outline, Shadow
+Style: Default,Arial,20,&H00FFFFFF,&H80000000,3,0,0
+
+[Events]
+Format: Layer, Start, End, Style, Text
+Dialogue: 0,0:00:12.50,0:00:15.80,Default,When the night has come`
+  fs.writeFileSync(assPath, content, 'utf8');
+  const meta = { path: assPath };
+  return meta;
+}
+
+export default createAssSubtitle;

utils/bubble/bubble-templates.js

@@ -3,23 +3,18 @@ export const BaseBubbleTemplates = {
   // Simple text box: black text on white rounded box at top-center
   'simple-top-center': {
     // top-level bubble background controls whether a box is rendered
-    backgroundColor: 'white',
-    borderRadius: 10,
+    backgroundColor: 'red',
+    borderRadius: 20,
+    audioEffectFile: 'woosh',
     bubbleText: {
-      fontSize: 48,
-      fontColor: '#000000',
-      fontName: 'Arial',
-      // keep box flag for compatibility (generator will prefer generated rounded background PNG)
-      box: 1,
-      boxColor: 'white',
-      boxBorderW: 10
+      fontSize: 150,
+      fontColor: '#1a1a1c',
+      fontName: 'Rubik Pixels',
+      fontWeight: '700',
     },
     bubbleExtra: {
       positionX: 'center',
-      positionY: 'top',
-      size: 'full',
-      paddingX: 2,
-      paddingY: 2
+      positionY: 'center'
     }
   }
 };

utils/bubble/helpers.js

@@ -31,3 +31,124 @@ export function resolveAudioPath(audioKey) {
   if (fs.existsSync(candidate)) return candidate;
   return null;
 }
+
+// Ensure font file for given fontName exists in public/assets/fonts (or public root). If missing, try downloading from Google Fonts.
+export async function ensureFontFile(fontName, fontWeight) {
+  if (!fontName) return null;
+  const assetsFontsDir = path.join(process.cwd(), 'public', 'assets', 'fonts');
+  if (!fs.existsSync(assetsFontsDir)) fs.mkdirSync(assetsFontsDir, { recursive: true });
+  const normalized = s => ('' + s).replace(/\s+/g, '').toLowerCase();
+  const target = ('' + fontName).toLowerCase();
+
+  // check assets/fonts
+  const files = fs.readdirSync(assetsFontsDir);
+  let match = files.find(f => {
+    const name = path.parse(f).name;
+    return name.toLowerCase() === target || normalized(name) === normalized(fontName) || name.toLowerCase().includes(target);
+  });
+  if (!match && fontWeight) {
+    const weightNormalized = ('' + fontWeight).toLowerCase();
+    match = files.find(f => {
+      const name = path.parse(f).name.toLowerCase();
+      return name.includes(weightNormalized) || name.includes(target.replace(/\s+/g, '').toLowerCase() + weightNormalized) || name.includes(target + '-' + weightNormalized);
+    });
+  }
+  if (match) return path.join(assetsFontsDir, match);
+
+  // check public root
+  const publicRootFiles = fs.readdirSync(process.cwd()).filter(f => /\.(ttf|otf|woff2?|woff)$/i.test(f));
+  match = publicRootFiles.find(f => {
+    const name = path.parse(f).name;
+    return name.toLowerCase() === target || normalized(name) === normalized(fontName) || name.toLowerCase().includes(target);
+  });
+  if (!match && fontWeight) {
+    const weightNormalized = ('' + fontWeight).toLowerCase();
+    match = publicRootFiles.find(f => {
+      const name = path.parse(f).name.toLowerCase();
+      return name.includes(weightNormalized) || name.includes(target.replace(/\s+/g, '').toLowerCase() + weightNormalized) || name.includes(target + '-' + weightNormalized);
+    });
+  }
+  if (match) return path.join(process.cwd(), match);
+
+  // Try downloading from Google Fonts - best-effort with redirect support
+  try {
+    // Build Google Fonts family parameter. Include weight when provided so CSS contains specific weight ranges.
+    const familyBase = fontName.trim().replace(/\s+/g, '+');
+    const familyParam = fontWeight ? `${familyBase}:wght@${fontWeight}` : familyBase;
+    const cssUrl = `https://fonts.googleapis.com/css2?family=${familyParam}&display=swap`;
+    console.log('Attempting to download font from Google Fonts:', cssUrl);
+    const css = await fetchUrl(cssUrl, 5);
+    console.log('Fetched CSS for font:', cssUrl);
+    if (css) {
+      // find first url(...) occurrence and extract URL
+      const urlMatches = css.match(/url\((['"]?)[^'"\)]+\1\)/g) || [];
+      let fontUrl = null;
+      for (const m of urlMatches) {
+        let u = m.replace(/^url\((['"]?)/, '').replace(/(['"]?)\)$/, '');
+        if (u.startsWith('//')) u = 'https:' + u;
+        if (/^https?:\/\//i.test(u)) { fontUrl = u; break; }
+      }
+      if (fontUrl) {
+        const parsed = new URL(fontUrl);
+        const ext = path.parse(parsed.pathname).ext || '.woff2';
+        const weightSuffix = fontWeight ? `_${String(fontWeight).replace(/\s+/g, '')}` : '';
+        const outFile = path.join(assetsFontsDir, `${fontName.replace(/\s+/g, '_')}${weightSuffix}${ext}`);
+        await downloadUrl(fontUrl, outFile, 5);
+        return outFile;
+      }
+    }
+  } catch (e) {
+    // ignore download errors
+  }
+
+  return null;
+}
+
+function fetchUrl(url, redirects = 5) {
+  return new Promise((resolve, reject) => {
+    try {
+      const https = require('https');
+      const http = require('http');
+      const doGet = (u, remaining) => {
+        const client = u.startsWith('https:') ? https : http;
+        const opts = { headers: { 'User-Agent': 'curl/7.64.1' } };
+        client.get(u, opts, (res) => {
+          if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location && remaining > 0) {
+            const loc = res.headers.location.startsWith('http') ? res.headers.location : (u.startsWith('https:') ? 'https:' + res.headers.location : res.headers.location);
+            return doGet(loc, remaining - 1);
+          }
+          if (res.statusCode && res.statusCode >= 400) return reject(new Error('Failed to fetch ' + u + ' status ' + res.statusCode));
+          let data = '';
+          res.setEncoding('utf8');
+          res.on('data', chunk => data += chunk);
+          res.on('end', () => resolve(data));
+        }).on('error', reject);
+      };
+      doGet(url, redirects);
+    } catch (e) { reject(e); }
+  });
+}
+
+function downloadUrl(url, outPath, redirects = 5) {
+  return new Promise((resolve, reject) => {
+    try {
+      const https = require('https');
+      const http = require('http');
+      const doGet = (u, remaining) => {
+        const client = u.startsWith('https:') ? https : http;
+        client.get(u, (res) => {
+          if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location && remaining > 0) {
+            const loc = res.headers.location.startsWith('http') ? res.headers.location : (u.startsWith('https:') ? 'https:' + res.headers.location : res.headers.location);
+            return doGet(loc, remaining - 1);
+          }
+          if (res.statusCode && res.statusCode >= 400) return reject(new Error('Failed to download ' + u + ' status ' + res.statusCode));
+          const file = fs.createWriteStream(outPath);
+          res.pipe(file);
+          file.on('finish', () => file.close(() => resolve(outPath)));
+          file.on('error', (err) => { try { fs.unlinkSync(outPath); } catch (e) { }; reject(err); });
+        }).on('error', (err) => reject(err));
+      };
+      doGet(url, redirects);
+    } catch (e) { reject(e); }
+  });
+}