Add bubble fullscreenre

render-server.js

@@ -1,5 +1,5 @@
 import app from './app.js';
-let port = process.env.PORT || 8083
+let port = process.env.PORT || 8089
 import Bubble from './utils/bubble/Bubble.js';
 import express from 'express';
 import { createServer } from 'http';

utils/bubble/Bubble.js

@@ -334,22 +334,32 @@ class BubbleMaker {
 
       const imgExts = ['.png', '.jpg', '.jpeg', '.webp', '.bmp', '.gif'];
       const isImageFile = imgExts.includes(path.extname(overlayPath).toLowerCase());
-      const padX = extra.paddingX || 5;
-      const padY = extra.paddingY || 5;
+      const padX = typeof extra.paddingX === 'number' ? extra.paddingX : 5;
+      const padY = typeof extra.paddingY === 'number' ? extra.paddingY : 5;
       let ow = null, oh = null;
       if (extra.size === 'half') ow = Math.round(vw * 0.45);
       else if (extra.size !== 'full') ow = Math.round(vw * 0.30);
 
       let overlayMeta;
       try { overlayMeta = await FFMpegUtils.getMediaMetadata(overlayPath); } catch (e) { overlayMeta = null; }
+      let cropOverlay = false;
+      let scaledW = null;
+      let scaledH = null;
       if (extra.size === 'full') {
-        const maxW = Math.max(1, Math.round(vw * (1 - 2 * padX / 100)));
-        ow = maxW;
+        const targetW = Math.max(1, Math.round(vw * (1 - 2 * padX / 100)));
+        const targetH = Math.max(1, Math.round(vh * (1 - 2 * padY / 100)));
         if (overlayMeta && overlayMeta.video && overlayMeta.video.width && overlayMeta.video.height) {
-          const ar = overlayMeta.video.width / overlayMeta.video.height;
-          oh = Math.max(1, Math.round(ow / ar));
+          const srcW = overlayMeta.video.width;
+          const srcH = overlayMeta.video.height;
+          const scaleFactor = Math.max(targetW / srcW, targetH / srcH);
+          scaledW = Math.max(1, Math.round(srcW * scaleFactor));
+          scaledH = Math.max(1, Math.round(srcH * scaleFactor));
+          ow = targetW;
+          oh = targetH;
+          cropOverlay = true;
         } else {
-          oh = Math.max(1, Math.round(vh * (1 - 2 * padY / 100)));
+          ow = targetW;
+          oh = targetH;
         }
       } else if (overlayMeta && overlayMeta.video && overlayMeta.video.width && overlayMeta.video.height) {
         const ar = overlayMeta.video.width / overlayMeta.video.height;
@@ -386,7 +396,14 @@ class BubbleMaker {
         : `-i "${overlayPath}"`;
       inputs.push(overlayFlag);
 
-      let scalePart = `[${inputIndex}:v]scale=${ow}:${oh},format=rgba`;
+      let scalePart;
+      if (cropOverlay && scaledW && scaledH) {
+        const cropX = Math.max(0, Math.round((scaledW - ow) / 2));
+        const cropY = Math.max(0, Math.round((scaledH - oh) / 2));
+        scalePart = `[${inputIndex}:v]scale=${scaledW}:${scaledH},crop=${ow}:${oh}:${cropX}:${cropY},format=rgba`;
+      } else {
+        scalePart = `[${inputIndex}:v]scale=${ow}:${oh},format=rgba`;
+      }
       if (isFade) scalePart += `,fade=t=in:st=${from}:d=${animDur}:alpha=1,fade=t=out:st=${fadeOut}:d=${animDur}:alpha=1`;
       scalePart += `[ov${inputIndex}]`;
       filterParts.push(scalePart);
@@ -423,8 +440,8 @@ class BubbleMaker {
     if (isMedia) {
       const imgExts = ['.png', '.jpg', '.jpeg', '.webp', '.bmp', '.gif'];
       const isImageFile = imgExts.includes(path.extname(overlayPath).toLowerCase());
-      const padX = extra.paddingX || 5;
-      const padY = extra.paddingY || 5;
+      const padX = typeof extra.paddingX === 'number' ? extra.paddingX : 5;
+      const padY = typeof extra.paddingY === 'number' ? extra.paddingY : 5;
       let ow = null, oh = null;
       if (extra.size === 'half') ow = Math.round(vw * 0.45);
       else if (extra.size !== 'full') ow = Math.round(vw * 0.30);
@@ -475,7 +492,14 @@ class BubbleMaker {
         ? (mainDuration > 0 ? `-loop 1 -t ${mainDuration} -i "${overlayPath}"` : `-loop 1 -i "${overlayPath}"`)
         : `-i "${overlayPath}"`;
 
-      let overlayFilter = `[1:v]scale=${ow}:${oh},format=rgba`;
+      let overlayFilter;
+      if (cropOverlay && scaledW && scaledH) {
+        const cropX = Math.max(0, Math.round((scaledW - ow) / 2));
+        const cropY = Math.max(0, Math.round((scaledH - oh) / 2));
+        overlayFilter = `[1:v]scale=${scaledW}:${scaledH},crop=${ow}:${oh}:${cropX}:${cropY},format=rgba`;
+      } else {
+        overlayFilter = `[1:v]scale=${ow}:${oh},format=rgba`;
+      }
       if (isFade) overlayFilter += `,fade=t=in:st=${from}:d=${animDur}:alpha=1,fade=t=out:st=${fadeOut}:d=${animDur}:alpha=1`;
       overlayFilter += `[ov];[0:v][ov]overlay=${xExpr}:${yExpr}:enable='between(t,${from},${to})'[vout]`;
 
@@ -487,8 +511,8 @@ class BubbleMaker {
       const fontColor = t.fontColor || '#FFFFFF';
       const posX = extra.positionX || 'center';
       const posY = extra.positionY || 'center';
-      const padX = extra.paddingX || 5;
-      const padY = extra.paddingY || 5;
+      const padX = typeof extra.paddingX === 'number' ? extra.paddingX : 5;
+      const padY = typeof extra.paddingY === 'number' ? extra.paddingY : 5;
 
       let fontfilePath = null;
       if (t.fontName) {

utils/bubble/bubble-templates.js

@@ -37,11 +37,11 @@ export const BaseBubbleTemplates = {
       durationSec: 0.1
     },
     bubbleExtra: {
-      positionX: 'center',
-      positionY: 'top',
+      positionX: 'full',
+      positionY: 'full',
       size: 'full', // | 'half' // useful for images and videos
-      paddingX: 10, // number in percentage
-      paddingY: 10 // number in percentage
+      paddingX: 0, // number in percentage
+      paddingY: 0 // number in percentage
     }
   }
 };

utils/bubble/layout.js

@@ -1,13 +1,13 @@
 export function scaleTemplate(value, scale) {
   if (typeof value === 'number') return Math.round(value * scale);
-  if (typeof value === 'string' && value.match(/^\d+(px)?$/)) return Math.round(parseInt(value,10) * scale);
+  if (typeof value === 'string' && value.match(/^\d+(px)?$/)) return Math.round(parseInt(value, 10) * scale);
   return value;
 }
 
 // compute overlay x,y from overlay width/height, extra positioning and video size
 export function computeXY(overlayW, overlayH, extra = {}, vw = 0, vh = 0) {
-  const padX = extra.paddingX || 5;
-  const padY = extra.paddingY || 5;
+  const padX = typeof extra.paddingX === 'number' ? extra.paddingX : 5;
+  const padY = typeof extra.paddingY === 'number' ? extra.paddingY : 5;
   const posX = extra.positionX || 'center';
   const posY = extra.positionY || 'center';
   let x = 0, y = 0;