CAP

utils/bubble/Bubble.js

@@ -83,6 +83,24 @@ class BubbleMaker {
       if (tpl) {
         // deep merge: template provides defaults, bubble overrides
         bubble = _.merge({}, tpl, bubble);
+
+        // If user provided a simple string path for mediaAbsPath (common case) the
+        // deep merge will replace the object that contained animExtra, losing the
+        // animation defaults from the template.  Copy any animExtra defined in the
+        // template up to the top level so later code can pick it up.
+        if (!bubble.animExtra) {
+          if (tpl.mediaAbsPath && tpl.mediaAbsPath.animExtra) {
+            bubble.animExtra = tpl.mediaAbsPath.animExtra;
+          } else if (
+            tpl.mediaAbsPaths &&
+            Array.isArray(tpl.mediaAbsPaths) &&
+            tpl.mediaAbsPaths[0] &&
+            tpl.mediaAbsPaths[0].animExtra
+          ) {
+            bubble.animExtra = tpl.mediaAbsPaths[0].animExtra;
+          }
+        }
+
         // Scale pixel-based template values defined for a 1080x1920 reference to the actual video size
         const REF_W = 1080, REF_H = 1920;
         const scale = Math.min(vw / REF_W, vh / REF_H) || 1;
@@ -97,8 +115,6 @@ class BubbleMaker {
     }
 
     const extra = bubble.bubbleExtra || {};
-    // animation config may now live on bubble.bubbleText.animExtra per model changes
-    const anim = (bubble.bubbleText && bubble.bubbleText.animExtra) || bubble.animExtra || {};
 
 
     const from = typeof bubble.fromSec === 'number' ? bubble.fromSec : 0;
@@ -109,9 +125,15 @@ class BubbleMaker {
     let overlayPath = null;
     // accept either mediaAbsPaths (plural, template) or mediaAbsPath (singular) for compatibility
     const mediaField = bubble.mediaAbsPaths || bubble.mediaAbsPath || bubble.mediaAbs;
+    let mediaItem = null;
     if (mediaField) {
-      const m = Array.isArray(mediaField) ? mediaField[0] : mediaField;
-      overlayPath = m?.path;
+      // mediaField can be an array or single value, and items can be either SectionMedia objects or plain string paths
+      mediaItem = Array.isArray(mediaField) ? mediaField[0] : mediaField;
+      if (typeof mediaItem === 'string') {
+        overlayPath = mediaItem;
+      } else if (mediaItem && typeof mediaItem.path === 'string') {
+        overlayPath = mediaItem.path;
+      }
       isMedia = !!overlayPath;
     }
 
@@ -119,9 +141,19 @@ class BubbleMaker {
     const padX = extra.paddingX || 5; // percent
     const padY = extra.paddingY || 5;
 
-    let ow = Math.round(vw * (extra.size === 'half' ? 0.45 : 0.30));
+    // initial overlay dimensions; for full mode we'll adjust later once we know
+    // the media's aspect ratio.
+    let ow = null;
     let oh = null; // keep aspect if image
 
+    if (extra.size === 'half') {
+      ow = Math.round(vw * 0.45);
+    } else if (extra.size === 'full') {
+      // leave null for now, will be calculated after we inspect the media metadata
+    } else {
+      ow = Math.round(vw * 0.30);
+    }
+
 
     // build ffmpeg command
     let cmd;
@@ -139,18 +171,73 @@ class BubbleMaker {
         const iw = overlayMeta.video.width;
         const ih = overlayMeta.video.height;
         const ar = iw / ih;
-        if (!oh) oh = Math.round(ow / ar);
+        if (extra.size === 'full') {
+          // compute maximum area available after applying padding percentages
+          const maxW = Math.round(vw * (1 - 2 * padX / 100));
+          const maxH = Math.round(vh * (1 - 2 * padY / 100));
+          // fit preserving aspect ratio
+          if (maxW / maxH > ar) {
+            // height is limiting factor
+            oh = maxH;
+            ow = Math.round(maxH * ar);
+          } else {
+            ow = maxW;
+            oh = Math.round(maxW / ar);
+          }
+        } else {
+          if (!ow) {
+            // ow may be null if we deferred calculation
+            ow = Math.round(vw * 0.30);
+          }
+          if (!oh) oh = Math.round(ow / ar);
+        }
       } else {
         // fallback to square-ish
-        if (!oh) oh = Math.round(ow * 0.75);
+        if (!oh) {
+          if (extra.size === 'full') {
+            oh = Math.round(vh * (1 - 2 * padY / 100));
+            ow = Math.round(vw * (1 - 2 * padX / 100));
+          } else {
+            oh = Math.round(ow * 0.75);
+          }
+        }
       }
 
       const { x, y } = computeXY(ow, oh, extra, vw, vh);
 
-      // fade durations
-      const fadeDur = Math.min(0.5, (to - from) / 2);
+      // Determine animation config: prefer media item animExtra, then bubble.bubbleText.animExtra, then bubble.animExtra
+      const anim = (mediaItem && mediaItem.animExtra) || (bubble.bubbleText && bubble.bubbleText.animExtra) || bubble.animExtra || {};
+      const animTpl = (anim && typeof anim.template === 'string') ? anim.template : null;
+      const animDur = (typeof anim.durationSec === 'number') ? anim.durationSec : Math.min(0.5, (to - from) / 2);
+
+      // Build position expressions to support simple slide animations
+      let xExpr = x;
+      let yExpr = y;
+      if (animTpl) {
+        const tpl = animTpl;
+        const wrapVal = (v) => (typeof v === 'number' ? `(${v})` : v);
+        const quote = (expr) => `'${expr.replace(/'/g, "\\'")}'`;
+        if (tpl === 'slide_down') {
+          const startY = -oh;
+          yExpr = `if(lt(t,${from + animDur}), ${wrapVal(startY)} + (${wrapVal(y)}-${wrapVal(startY)})*(t-${from})/${animDur}, ${wrapVal(y)})`;
+        } else if (tpl === 'slide_up') {
+          const startY = vh;
+          yExpr = `if(lt(t,${from + animDur}), ${wrapVal(startY)} + (${wrapVal(y)}-${wrapVal(startY)})*(t-${from})/${animDur}, ${wrapVal(y)})`;
+        } else if (tpl === 'slide_left') {
+          const startX = -ow;
+          xExpr = `if(lt(t,${from + animDur}), ${wrapVal(startX)} + (${wrapVal(x)}-${wrapVal(startX)})*(t-${from})/${animDur}, ${wrapVal(x)})`;
+        } else if (tpl === 'slide_right') {
+          const startX = vw;
+          xExpr = `if(lt(t,${from + animDur}), ${wrapVal(startX)} + (${wrapVal(x)}-${wrapVal(startX)})*(t-${from})/${animDur}, ${wrapVal(x)})`;
+        }
+        // wrap the final expressions in quotes so commas are treated literally
+        if (typeof xExpr === 'string') xExpr = quote(xExpr);
+        if (typeof yExpr === 'string') yExpr = quote(yExpr);
+      }
+
+      // fade/animation timing
       const fadeInStart = from;
-      const fadeOutStart = Math.max(from, to - fadeDur);
+      const fadeOutStart = Math.max(from, to - animDur);
 
       // Build video part of filter_complex
       // If image and needs bg/rounded corners, pre-process the image to bake background and rounding into a PNG
@@ -164,7 +251,17 @@ class BubbleMaker {
         }
       }
 
-      const videoFilter = `[1:v]scale=${ow}:${oh},format=rgba,fade=t=in:st=${fadeInStart}:d=${fadeDur}:alpha=1,fade=t=out:st=${fadeOutStart}:d=${fadeDur}:alpha=1[ov];[0:v][ov]overlay=${x}:${y}:enable='between(t,${from},${to})'[vout]`;
+      // Decide animation behavior based on anim.template: absent -> no animation, 'none' -> no animation,
+      // 'fade'|'popup' -> apply fade, 'slide_*' -> slide motion (no fade)
+      const isSlideAnim = anim && anim.template && typeof anim.template === 'string' && anim.template.startsWith('slide_');
+      const isFadeAnim = anim && anim.template && (anim.template === 'fade' || anim.template === 'popup');
+
+      let overlayFilter = `[1:v]scale=${ow}:${oh},format=rgba`;
+      if (isFadeAnim) {
+        overlayFilter += `,fade=t=in:st=${fadeInStart}:d=${animDur}:alpha=1,fade=t=out:st=${fadeOutStart}:d=${animDur}:alpha=1`;
+      }
+      overlayFilter += `[ov];[0:v][ov]overlay=${xExpr}:${yExpr}:enable='between(t,${from},${to})'[vout]`;
+      const videoFilter = overlayFilter;
 
       // Inputs: 0 = main video, 1 = overlay (image/video) (looped for images)
       // Limit looped image input to main video duration to avoid encoding hanging
@@ -346,10 +443,24 @@ export async function test() {
     toSec: 5.0
   };
 
+  // Additional sample: simple-top-center-image uses an image or video asset centered at top with text
+  const imageSample = {
+    templateName: 'simple-top-center-image',
+    // provide mediaAbsPath (what makeBubble expects) pointing to an image
+    mediaAbsPath: path.join(cwd, 'public', 'media2.png'),
+    bubbleText: { text: 'IMAGE ABOVE, TEXT CENTERED' },
+    fromSec: 0.5,
+    toSec: 5.0
+  };
+
   try {
     const outPath = path.join(outDir, 'media_typing_template_bubble.mp4');
     await bubbleMaker.makeBubble(baseVideo, typingSample, outPath, console.log);
     console.log('Created:', outPath);
+
+    const outPath2 = path.join(outDir, 'media_image_template_bubble.mp4');
+    await bubbleMaker.makeBubble(baseVideo, imageSample, outPath2, console.log);
+    console.log('Created:', outPath2);
   } catch (e) {
     console.error('Test failed:', e);
   }

utils/bubble/bubble-templates.js

@@ -3,7 +3,7 @@ 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: '#ffffff22',
+    backgroundColor: '#ffffff',
     borderRadius: 20,
     audioEffectFile: 'woosh',
     bubbleText: {
@@ -13,8 +13,27 @@ export const BaseBubbleTemplates = {
       fontWeight: '700',
     },
     bubbleExtra: {
-      positionX: 'right',
+      positionX: 'top',
       positionY: 'center'
     }
+  },
+  // image-only variant: the caller must still provide the path when using this
+  // template. animation defaults are pulled up to the top level so they survive
+  // the case where the user specifies `mediaAbsPath` as a simple string.
+  'simple-top-center-image': {
+    borderRadius: 20,
+    audioEffectFile: 'woosh',
+    // default animation for the overlay itself. callers can override
+    animExtra: {
+      template: 'slide_down',
+      durationSec: 0.1
+    },
+    bubbleExtra: {
+      positionX: 'center',
+      positionY: 'top',
+      size: 'full', // | 'half' // useful for images and videos
+      paddingX: 0, // number in percentage
+      paddingY: 0 // number in percentage
+    }
   }
 };