Bubble text

utils/bubble/Bubble.js

@@ -25,11 +25,14 @@ const DEFAULT_FONT_FILE = (() => {
 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,
     bubbleText: {
       fontSize: 48,
       fontColor: '#000000',
-      fontName: 'Arial',
-      // drawtext box properties - we prefer generated rounded png background, so keep box flag to indicate background
+      fontName: 'Gill Sans',
+      // keep box flag for compatibility (generator will prefer generated rounded background PNG)
       box: 1,
       boxColor: 'white',
       boxBorderW: 10
@@ -163,30 +166,9 @@ class BubbleMaker {
       let audioMap = '-map "[aout]" -c:a aac';
       let extraAudioInput = '';
       if (bubble.audioEffectFile) {
-        let audioPath = bubble.audioEffectFile;
-        // support stock names mapped to public/assets/audio/<name>.mp3
-        const stock = ['click', 'pop', 'whoosh'];
-        // Resolve stock or relative audio names dynamically
-        // prefer audio-effects folder
-        const assetsDir = path.join(process.cwd(), 'public', 'assets', 'audio-effects');
-        if (audioPath === 'typewriter') audioPath = 'click';
-        if (fs.existsSync(assetsDir)) {
-          const files = fs.readdirSync(assetsDir);
-          const match = files.find(f => path.parse(f).name === audioPath);
-          if (match) {
-            audioPath = path.join(assetsDir, match);
-          }
-        }
-
-        // If still not an absolute path, check relative to cwd
-        if (audioPath && !path.isAbsolute(audioPath)) {
-          const candidate = path.join(process.cwd(), audioPath);
-          if (fs.existsSync(candidate)) {
-            audioPath = candidate;
-          } else {
-            (onLog || console.log)(`Audio effect file not found at ${candidate}, skipping audio effect`);
-            audioPath = null;
-          }
+        let audioPath = resolveAudioPath(bubble.audioEffectFile);
+        if (!audioPath) {
+          (onLog || console.log)(`Audio effect file not found for ${bubble.audioEffectFile}, skipping audio effect`);
         }
 
         if (audioPath) {
@@ -241,7 +223,7 @@ class BubbleMaker {
         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, t.fontColor || fontColor, bubble.backgroundColor || t.boxColor || 'white', bubble.borderRadius || t.boxBorderW || 0, paddingXpx, paddingYpx);
+          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
@@ -258,20 +240,8 @@ class BubbleMaker {
 
         if (bubble.audioEffectFile) {
           // Use filter_complex to mix audio
-          let audioPath = bubble.audioEffectFile;
-          // prefer audio-effects folder
-          const assetsDir = path.join(process.cwd(), 'public', 'assets', 'audio-effects');
-          if (audioPath === 'typewriter') audioPath = 'click';
-          if (fs.existsSync(assetsDir)) {
-            const files = fs.readdirSync(assetsDir);
-            const match = files.find(f => path.parse(f).name === audioPath);
-            if (match) audioPath = path.join(assetsDir, match);
-          }
-          if (audioPath && !path.isAbsolute(audioPath)) {
-            const candidate = path.join(process.cwd(), audioPath);
-            if (fs.existsSync(candidate)) audioPath = candidate;
-            else audioPath = null;
-          }
+          let audioPath = resolveAudioPath(bubble.audioEffectFile);
+          if (!audioPath) audioPath = null;
 
           if (audioPath) {
             const aVol = typeof bubble.audioEffectVolume === 'number' ? bubble.audioEffectVolume : 1.0;
@@ -325,9 +295,9 @@ export async function test() {
   const outDir = path.join(cwd, 'out');
   if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
 
-  // Single sample: typing-top-center template. Only provide the text content.
+  // Single sample: simple-top-center template. Only provide the text content.
   const typingSample = {
-    templateName: 'typing-top-center',
+    templateName: 'simple-top-center',
     bubbleText: { text: 'TYPING TITLE' },
     fromSec: 0.5,
     toSec: 5.0

utils/bubble/bg-utils.js

@@ -4,14 +4,14 @@ import { tempPath, escapeXml } from './helpers.js';
 
 // Accept positional args for compatibility with Bubble.js caller
 export async function createTextBackgroundPng(text, fontSize=40, fontName='Arial', boxColor='#ffffff', boxBorderW=0, paddingX=20, paddingY=8, radius=10, fontColor='#000000'){
-  // estimate size and create an SVG with rounded rect and centered text
+  // estimate size and create an SVG with rounded rect only (text is drawn by ffmpeg drawtext to ensure crisp font)
   const paddingXPx = Math.round(paddingX || 20);
   const paddingYPx = Math.round(paddingY || 8);
   const safeText = (text == null) ? '' : String(text);
   const estimatedWidth = Math.max(60, Math.round((fontSize || 40) * Math.max(1, safeText.length) * 0.6) + paddingXPx * 2);
   const estimatedHeight = Math.max(24, Math.round((fontSize || 40) * 1.4) + paddingYPx * 2);
   const rx = Math.max(0, Math.round(radius || 0));
-  const svg = `<?xml version="1.0" encoding="utf-8"?>\n<svg xmlns='http://www.w3.org/2000/svg' width='${estimatedWidth}' height='${estimatedHeight}'>\n  <rect x='0' y='0' width='100%' height='100%' rx='${rx}' ry='${rx}' fill='${boxColor || '#ffffff'}' stroke='none' />\n  <text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-family='${escapeXml(fontName)}' font-size='${fontSize}' fill='${escapeXml(fontColor)}'>${escapeXml(safeText)}</text>\n</svg>`;
+  const svg = `<?xml version="1.0" encoding="utf-8"?>\n<svg xmlns='http://www.w3.org/2000/svg' width='${estimatedWidth}' height='${estimatedHeight}'>\n  <rect x='0' y='0' width='100%' height='100%' rx='${rx}' ry='${rx}' fill='${boxColor || '#ffffff'}' stroke='none' />\n</svg>`;
   const tmp = tempPath('text-bg','png');
   await sharp(Buffer.from(svg)).png().toFile(tmp);
   const meta = await sharp(tmp).metadata();

utils/bubble/helpers.js

@@ -18,8 +18,7 @@ export function escapeText(s) {
 
 export function resolveAudioPath(audioKey) {
   if (!audioKey) return null;
-  let key = audioKey;
-  if (key === 'typewriter') key = 'click';
+  const key = audioKey;
   const assetsDir = path.join(process.cwd(), 'public', 'assets', 'audio-effects');
   if (fs.existsSync(assetsDir)) {
     const files = fs.readdirSync(assetsDir);