Remove typewriter animation and add simple text template; modularize helpers

common-utils

@@ -1 +1 @@
-Subproject commit c24060f9cf3f1c746aa910308ef48c5110f2da37
+Subproject commit ae3b5f2d4613da9bd6f0b30ad508cc0063a0eaf7

render-server.js

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

src/ig-reel/IGSimpleScene.tsx

@@ -1,299 +1,263 @@
-import { AbsoluteFill, Sequence, interpolate, staticFile, Audio, useCurrentFrame, Easing, Freeze } from 'remotion';
-import React, { useEffect, useState } from 'react'
-import { RenderUtils } from '../RenderUtils';
-import { Transcript, SectionMedia, OriginalManuscript, IGReelExtra } from 'common-utils'
-import axios from 'axios';
-import ExcitedSubtitles from '../subtitles/excited_Subtitles';
-import _ from 'lodash';
-import './styles.module.css'
-import TransitionSeries from 'remotion-transition-series';
-import { CircularWipe } from '../anims/CircularWipe';
-import { LinearWipe } from '../anims/LinearWipe';
-import { Slide } from '../anims/Slide';
-import { Pan } from '../anims/Pan';
-import { Dissolve } from '../anims/Dissolve';
-import { SlidingDoors } from '../anims/SlidingDoors';
-import { IGMediaRender } from './IGMediaRender';
-import { Group } from '../models/Types';
-import { VideoSplash } from '../anims/VideoSplash';
-import Transitions from '../../public/assets/transitions.json'
-
-export type DisplayMedia = SectionMedia &
-{
-  idx: number,
-  durationFrames: number,
-  startFrame: number,
-  endFrame: number,
-}
-
-
-export const GenerateWordGroupRanges = function (audioCaptionFile: string, setSubtitles: Function, setGroups: Function) {
-  const subFile = staticFile(RenderUtils.getFileName(audioCaptionFile)!!)
-  axios.get(subFile).then((response) => {
-    let subtitles = response?.data
-    if (subtitles?.default) {
-      subtitles = subtitles.default
-    }
-    let subs = subtitles.words
-    let noOfCharacters = 0
-    let groupDuration = 0
-    for (let i = 0; i < subs.length; i++) {
-      let word = subs[i]
-      word.idx = i
-      delete word.phones
-      let wordEnd = word.endOffset
-      if (['.', ','].includes(subtitles.transcript?.charAt(wordEnd))) {
-        word.sentence_end = true
-      }
-      if (word.end && word.start) {
-        noOfCharacters += word.endOffset - word.startOffset
-        groupDuration += word.end - word.start
-      }
-    }
-    let avgCps = groupDuration / noOfCharacters
-
-    // Fill start and end for missing frames
-    for (let i = 0; i < subs.length; i++) {
-      let word = subs[i]
-      let prevFrame = subs[i - 1]
-      let nextFrame = subs[i + 1]
-      if (!word.end || !word.start) {
-        let noOfCharacters = word.endOffset - word.startOffset
-        let frameDuration = noOfCharacters * avgCps
-        word.start = prevFrame?.end || 0
-        word.end = (word.start + frameDuration)
-        // frame.end = nextFrame?.start || (frame.start + frameDuration)
-        if (nextFrame?.start < word.end) {
-          let next2next = subs[i + 2]
-          if (next2next && next2next.start) {
-            nextFrame.end = next2next.start
-          }
-        }
-      }
-    }
-    setSubtitles(subs)
-
-
-    let arr = subs
-    let groups = [];
-
-    groups = RenderUtils.splitWordsIntoGroups(arr)
-    groups.forEach((group) => {
-      let words = group.words;
-      group.start = words[0]?.start
-      group.end = words[words.length - 1].end
-    })
-    setGroups(groups)
-
-
-  })
-}
-
-
-export const IGSimpleScene: React.FC<any> = (props: {
-  script: OriginalManuscript,
-  item: Transcript,
-  SubtitleComponent: React.FC<any>
-}) => {
-  const [subtitles, setSubtitles] = useState(undefined)
-  const [groups, setGroups] = useState(undefined)
-  const item: Transcript = props.item
-  let { audioCaptionFile, durationInSeconds } = item
-  const { script } = props
-  const { meta } = script
-  const { fps } = meta
-  const frame = useCurrentFrame();
-  const SubtitleComponent = props.SubtitleComponent
-  let speechPath = RenderUtils.getFileName(item?.audioFullPath)
-
-  const itemIdx = item.index;
-  const isLastScene = script.transcript[script.transcript?.length - 1]?.index == itemIdx
-
-  useEffect(() => {
-    if (audioCaptionFile)
-      GenerateWordGroupRanges(audioCaptionFile, setSubtitles, setGroups)
-  }, [])
-
-  if (!groups) {
-    return (<></>)
-  }
-
-  let itemDurationInFrames = item.durationInSeconds * fps
-  // console.log('scriptItem.offset', frame, itemDurationInFrames)
-
-  const foregroundOpacity = item.transition_type?.includes("facde") ? interpolate(
-    frame,
-    [0, 10, itemDurationInFrames - 10, itemDurationInFrames],
-    [1, 0, 0, item.index >= props?.script?.transcript?.length - 1 ? 0 : 1]
-  ) : 0;
-
-
-  let curSecond: Number = frame / fps
-  let word = RenderUtils.findCurrentWord(curSecond, subtitles!!)
-  let group: Group = RenderUtils.findCurrentGroupByTime(curSecond, groups)
-
-  let currentDisplayMedia: DisplayMedia | undefined = RenderUtils.calculateDisplayMedia(item, durationInSeconds, frame, fps)
-
-
-
-  let chunks: React.ReactNode[] = ((item?.mediaAbsPaths as any[])?.map((displayMedia: DisplayMedia, i, arr) => {
-    let chunk = []
-    let easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
-    easeInOutExp = Easing.ease
-    let curZoom = 1 + 0.3 * (frame - displayMedia?.startFrame) / (displayMedia?.durationFrames || 1)
-    if ((item.extras as IGReelExtra)?.animation == 'none') {
-      curZoom = 1
-    }
-    let duration = displayMedia.durationFrames
-    if (arr.length == i + 1) {
-      // to fix the black screen at last few milis
-      duration = (item.durationInSeconds + item.transition_duration_sec) * fps
-    }
-    chunk.push((
-      <TransitionSeries.Sequence key={`x-${i}`} durationInFrames={duration}>
-        <IGMediaRender offThreadVideo={true} curZoom={curZoom} displayMedia={displayMedia} />
-      </TransitionSeries.Sequence>
-    ))
-    // Only show in schene media transitions if there are more than one media
-    if (i < item?.mediaAbsPaths.length - 1 && i > 0) {
-
-      let animsObj = {
-        // CircularWipe, Slide,LinearWipe, // Not work
-        SlidingDoors: SlidingDoors,
-        Pan: Pan,
-        Dissolve: Dissolve
-      }
-      let anims = Object.values(animsObj);//.fill(SlidingDoors);
-      let seed = itemIdx + i * displayMedia.idx
-      let Anim = RenderUtils.randomElement(anims, `x-${seed}`)
-      const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
-
-      let transitionList = item.transition_type?.split(",");
-      let animFromTranscript = Object.keys(animsObj).find(n => {
-        return transitionList.includes(n)
-      })
-      if (animFromTranscript) {
-        //@ts-ignore
-        Anim = animsObj[animFromTranscript]
-      }
-      Anim = Pan
-
-      if (!isLastScene && (item.transition_type?.includes('geometrial') || animFromTranscript || item.transition_type == undefined)) {
-        chunk.push((
-          <TransitionSeries.Transition
-            durationInFrames={30}
-            transitionComponent={({ progress, ...props }) => {
-              return (
-                <Anim {...props} progress={easeInOutExp(progress)} />
-              )
-            }}
-          />
-        ))
-      }
-    }
-    return chunk
-  }))
-
-  // console.log('currentDisplayMedia?.endFrame', frame, currentDisplayMedia?.endFrame)
-  return (
-    <Freeze frame={itemDurationInFrames} active={frame > itemDurationInFrames}>
-    <AbsoluteFill style={{
-        // backgroundColor: RenderUtils.randomElement(['red', 'blue', 'green', 'orange', 'yellow', 'cyan'], `x-${itemIdx}`),
-      width: '100%',
-      height: '100%',
-    }} className='relative'>
-      <Audio volume={1} src={staticFile(speechPath as string)} />
-
-      <TransitionSeries>
-        {
-          ...chunks
-          }
-      </TransitionSeries>
-
-      {
-        (item.transition_type?.includes("graphical")) && !isLastScene &&
-        (currentDisplayMedia?.idx || -1) > -1 && (
-          (item?.mediaAbsPaths as any)?.map((displayMedia: DisplayMedia) => {
-            let transitionsByMood = Transitions.filter(t => (t?.mood?.indexOf("happy") || -1) > -1)
-            let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia.idx * displayMedia.durationFrames}`)
-            // transition = transitionsByMood[5]
-
-            return (
-              <Sequence from={displayMedia?.endFrame - transition.durationSec * fps / 2} durationInFrames={transition.durationSec * fps}>
-                <VideoSplash
-                  file={transition.file}
-                  style={{
-                  position: 'relative',
-                  height: '100%',
-                  width: '100%'
-                } as any} />
-              </Sequence>
-            )
-          })
-        )
-      }
-
-      <div style={{
-        opacity: foregroundOpacity,
-        zIndex: 10,
-        width: '100%',
-        height: '100%',
-        background: 'black'
-      }}></div>
-
-      <div style={{
-          display: frame < itemDurationInFrames ? undefined : 'none',
-        zIndex: 20,
-      }} className='absolute inset-0'>
-        {
-          SubtitleComponent ?
-            <SubtitleComponent group={group} word={word} fontSize={(item.extras as IGReelExtra)?.fontSize} />
-            :
-            <ExcitedSubtitles position='center' group={group} word={word} fontSize={(item.extras as IGReelExtra)?.fontSize} />
-        }
-      </div>
-
-      {
-        item?.bubble?.text && (
-          <div style={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignContent: 'center',
-            paddingTop: '20%',
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            background: 'transparent',
-            zIndex: 100,
-          }}>
-            <span
-              style={{
-                textAlign: 'center',
-                color: '#FFEB3B',
-                fontSize: '5em',
-                fontFamily: 'Poppins',
-                borderColor: 'transparent',
-                borderRadius: '2rem',
-                borderLeftWidth: '4px',
-                borderRightWidth: '4px',
-                backgroundPosition: 'center center',
-                textShadow: '0px 0px 50px #000, 0px 0px 50px #000',
-                padding: '0.2rem 1.5rem',
-              }}
-            >
-              {item.bubble.text}
-            </span>
-          </div>
-        )
-      }
-
-
-    </AbsoluteFill >
-    </Freeze>
-  );
-};
-
-
-
-
+import { AbsoluteFill, Sequence, interpolate, staticFile, Audio, useCurrentFrame, Easing, Freeze } from 'remotion';
+import React, { useEffect, useState } from 'react'
+import { RenderUtils } from '../RenderUtils';
+import { Transcript, SectionMedia, OriginalManuscript, IGReelExtra } from 'common-utils'
+import axios from 'axios';
+import ExcitedSubtitles from '../subtitles/excited_Subtitles';
+import _ from 'lodash';
+import './styles.module.css'
+import TransitionSeries from 'remotion-transition-series';
+import { CircularWipe } from '../anims/CircularWipe';
+import { LinearWipe } from '../anims/LinearWipe';
+import { Slide } from '../anims/Slide';
+import { Pan } from '../anims/Pan';
+import { Dissolve } from '../anims/Dissolve';
+import { SlidingDoors } from '../anims/SlidingDoors';
+import { IGMediaRender } from './IGMediaRender';
+import { Group } from '../models/Types';
+import { VideoSplash } from '../anims/VideoSplash';
+import Transitions from '../../public/assets/transitions.json'
+
+export type DisplayMedia = SectionMedia &
+{
+  idx: number,
+  durationFrames: number,
+  startFrame: number,
+  endFrame: number,
+}
+
+
+export const GenerateWordGroupRanges = function (audioCaptionFile: string, setSubtitles: Function, setGroups: Function) {
+  const subFile = staticFile(RenderUtils.getFileName(audioCaptionFile)!!)
+  axios.get(subFile).then((response) => {
+    let subtitles = response?.data
+    if (subtitles?.default) {
+      subtitles = subtitles.default
+    }
+    let subs = subtitles.words
+    let noOfCharacters = 0
+    let groupDuration = 0
+    for (let i = 0; i < subs.length; i++) {
+      let word = subs[i]
+      word.idx = i
+      delete word.phones
+      let wordEnd = word.endOffset
+      if (['.', ','].includes(subtitles.transcript?.charAt(wordEnd))) {
+        word.sentence_end = true
+      }
+      if (word.end && word.start) {
+        noOfCharacters += word.endOffset - word.startOffset
+        groupDuration += word.end - word.start
+      }
+    }
+    let avgCps = groupDuration / noOfCharacters
+
+    // Fill start and end for missing frames
+    for (let i = 0; i < subs.length; i++) {
+      let word = subs[i]
+      let prevFrame = subs[i - 1]
+      let nextFrame = subs[i + 1]
+      if (!word.end || !word.start) {
+        let noOfCharacters = word.endOffset - word.startOffset
+        let frameDuration = noOfCharacters * avgCps
+        word.start = prevFrame?.end || 0
+        word.end = (word.start + frameDuration)
+        // frame.end = nextFrame?.start || (frame.start + frameDuration)
+        if (nextFrame?.start < word.end) {
+          let next2next = subs[i + 2]
+          if (next2next && next2next.start) {
+            nextFrame.end = next2next.start
+          }
+        }
+      }
+    }
+    setSubtitles(subs)
+
+
+    let arr = subs
+    let groups = [];
+
+    groups = RenderUtils.splitWordsIntoGroups(arr)
+    groups.forEach((group) => {
+      let words = group.words;
+      group.start = words[0]?.start
+      group.end = words[words.length - 1].end
+    })
+    setGroups(groups)
+
+
+  })
+}
+
+
+export const IGSimpleScene: React.FC<any> = (props: {
+  script: OriginalManuscript,
+  item: Transcript,
+  SubtitleComponent: React.FC<any>
+}) => {
+  const [subtitles, setSubtitles] = useState(undefined)
+  const [groups, setGroups] = useState(undefined)
+  const item: Transcript = props.item
+  let { audioCaptionFile, durationInSeconds } = item
+  const { script } = props
+  const { meta } = script
+  const { fps } = meta
+  const frame = useCurrentFrame();
+  const SubtitleComponent = props.SubtitleComponent
+  let speechPath = RenderUtils.getFileName(item?.audioFullPath)
+
+  const itemIdx = item.index;
+  const isLastScene = script.transcript[script.transcript?.length - 1]?.index == itemIdx
+
+  useEffect(() => {
+    if (audioCaptionFile)
+      GenerateWordGroupRanges(audioCaptionFile, setSubtitles, setGroups)
+  }, [])
+
+  if (!groups) {
+    return (<></>)
+  }
+
+  let itemDurationInFrames = item.durationInSeconds * fps
+  // console.log('scriptItem.offset', frame, itemDurationInFrames)
+
+  const foregroundOpacity = item.transition_type?.includes("facde") ? interpolate(
+    frame,
+    [0, 10, itemDurationInFrames - 10, itemDurationInFrames],
+    [1, 0, 0, item.index >= props?.script?.transcript?.length - 1 ? 0 : 1]
+  ) : 0;
+
+
+  let curSecond: Number = frame / fps
+  let word = RenderUtils.findCurrentWord(curSecond, subtitles!!)
+  let group: Group = RenderUtils.findCurrentGroupByTime(curSecond, groups)
+
+  let currentDisplayMedia: DisplayMedia | undefined = RenderUtils.calculateDisplayMedia(item, durationInSeconds, frame, fps)
+
+
+
+  let chunks: React.ReactNode[] = ((item?.mediaAbsPaths as any[])?.map((displayMedia: DisplayMedia, i, arr) => {
+    let chunk = []
+    let easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
+    easeInOutExp = Easing.ease
+    let curZoom = 1 + 0.3 * (frame - displayMedia?.startFrame) / (displayMedia?.durationFrames || 1)
+    if ((item.extras as IGReelExtra)?.animation == 'none') {
+      curZoom = 1
+    }
+    let duration = displayMedia.durationFrames
+    if (arr.length == i + 1) {
+      // to fix the black screen at last few milis
+      duration = (item.durationInSeconds + item.transition_duration_sec) * fps
+    }
+    chunk.push((
+      <TransitionSeries.Sequence key={`x-${i}`} durationInFrames={duration}>
+        <IGMediaRender offThreadVideo={true} curZoom={curZoom} displayMedia={displayMedia} />
+      </TransitionSeries.Sequence>
+    ))
+    // Only show in schene media transitions if there are more than one media
+    if (i < item?.mediaAbsPaths.length - 1 && i > 0) {
+
+      let animsObj = {
+        // CircularWipe, Slide,LinearWipe, // Not work
+        SlidingDoors: SlidingDoors,
+        Pan: Pan,
+        Dissolve: Dissolve
+      }
+      let anims = Object.values(animsObj);//.fill(SlidingDoors);
+      let seed = itemIdx + i * displayMedia.idx
+      let Anim = RenderUtils.randomElement(anims, `x-${seed}`)
+      const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
+
+      let transitionList = item.transition_type?.split(",");
+      let animFromTranscript = Object.keys(animsObj).find(n => {
+        return transitionList.includes(n)
+      })
+      if (animFromTranscript) {
+        //@ts-ignore
+        Anim = animsObj[animFromTranscript]
+      }
+      Anim = Pan
+
+      if (!isLastScene && (item.transition_type?.includes('geometrial') || animFromTranscript || item.transition_type == undefined)) {
+        chunk.push((
+          <TransitionSeries.Transition
+            durationInFrames={30}
+            transitionComponent={({ progress, ...props }) => {
+              return (
+                <Anim {...props} progress={easeInOutExp(progress)} />
+              )
+            }}
+          />
+        ))
+      }
+    }
+    return chunk
+  }))
+
+  // console.log('currentDisplayMedia?.endFrame', frame, currentDisplayMedia?.endFrame)
+  return (
+    <Freeze frame={itemDurationInFrames} active={frame > itemDurationInFrames}>
+      <AbsoluteFill style={{
+        // backgroundColor: RenderUtils.randomElement(['red', 'blue', 'green', 'orange', 'yellow', 'cyan'], `x-${itemIdx}`),
+        width: '100%',
+        height: '100%',
+      }} className='relative'>
+        <Audio volume={1} src={staticFile(speechPath as string)} />
+
+        <TransitionSeries>
+          {
+            ...chunks
+          }
+        </TransitionSeries>
+
+        {
+          (item.transition_type?.includes("graphical")) && !isLastScene &&
+          (currentDisplayMedia?.idx || -1) > -1 && (
+            (item?.mediaAbsPaths as any)?.map((displayMedia: DisplayMedia) => {
+              let transitionsByMood = Transitions.filter(t => (t?.mood?.indexOf("happy") || -1) > -1)
+              let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia.idx * displayMedia.durationFrames}`)
+              // transition = transitionsByMood[5]
+
+              return (
+                <Sequence from={displayMedia?.endFrame - transition.durationSec * fps / 2} durationInFrames={transition.durationSec * fps}>
+                  <VideoSplash
+                    file={transition.file}
+                    style={{
+                      position: 'relative',
+                      height: '100%',
+                      width: '100%'
+                    } as any} />
+                </Sequence>
+              )
+            })
+          )
+        }
+
+        <div style={{
+          opacity: foregroundOpacity,
+          zIndex: 10,
+          width: '100%',
+          height: '100%',
+          background: 'black'
+        }}></div>
+
+        <div style={{
+          display: frame < itemDurationInFrames ? undefined : 'none',
+          zIndex: 20,
+        }} className='absolute inset-0'>
+          {
+            SubtitleComponent ?
+              <SubtitleComponent group={group} word={word} fontSize={(item.extras as IGReelExtra)?.fontSize} />
+              :
+              <ExcitedSubtitles position='center' group={group} word={word} fontSize={(item.extras as IGReelExtra)?.fontSize} />
+          }
+        </div>
+
+      </AbsoluteFill >
+    </Freeze>
+  );
+};
+
+
+
+

src/linkedin-video/LinkedinFullSysDesignComposition.tsx

@@ -34,50 +34,20 @@ export const LinkedinFullSysDesignComposition: React.FC = (props: OriginalManusc
         <Audio
           loop
           volume={(f) =>
-      bgMusicVolume !== undefined
-        ? bgMusicVolume
-        : interpolate(
-          f,
-          [0, bgMusicDuration * fps],
-          [0.05, 0.01],
-          { extrapolateLeft: "clamp" }
-        )
-    }
+            bgMusicVolume !== undefined
+              ? bgMusicVolume
+              : interpolate(
+                f,
+                [0, bgMusicDuration * fps],
+                [0.05, 0.01],
+                { extrapolateLeft: "clamp" }
+              )
+          }
           src={bgMusicPath}
         />
       )}
 
-      <TransitionSeries>
-        {
-          transcripts.map((scriptItem: Transcript, i) => {
-            let { durationInSeconds } = scriptItem
-            let durationInFrames = meta.fps * durationInSeconds
 
-            let isGraph = scriptItem.bubble.type == 'graph'
-
-            return (
-              <>
-                <TransitionSeries.Sequence durationInFrames={durationInFrames}>
-                  {isGraph ?
-                    <AnimGraphScene
-                      script={props}
-                      item={scriptItem} />
-                    :
-                    <IGSimpleScene
-                      script={props}
-                      item={scriptItem}
-                      SubtitleComponent={({ group, word }) => {
-                        return (
-                          <GeneralSubtitles position='end' group={group} word={word} />
-                        )
-                      }} />
-                  }
-                </TransitionSeries.Sequence>
-              </>
-            )
-          })
-        }
-      </TransitionSeries>
 
       <div
         style={{

utils/AvatarRender.js

@@ -130,7 +130,7 @@ export class AvatarRenderer {
 
     // Cleanup intermediate files
     for (const f of tempFiles) {
-      try { if (fs.existsSync(f)) fs.unlinkSync(f); } catch (_) { }
+      // try { if (fs.existsSync(f)) fs.unlinkSync(f); } catch (_) { }
     }
 
     return resultFile;

utils/bubble/Bubble.js

@@ -0,0 +1,345 @@
+import fs from 'fs';
+import path from 'path';
+import _ from 'lodash';
+import { fileURLToPath } from 'url';
+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 { 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, '/');
+})();
+
+
+// Base bubble templates (defaults). Templates prefill everything except bubbleText.text for text templates.
+const BaseBubbleTemplates = {
+  // Simple text box: black text on white rounded box at top-center
+  'simple-top-center': {
+    bubbleText: {
+      fontSize: 48,
+      fontColor: '#000000',
+      fontName: 'Arial',
+      // drawtext box properties - we prefer generated rounded png background, so keep box flag to indicate background
+      box: 1,
+      boxColor: 'white',
+      boxBorderW: 10
+    },
+    bubbleExtra: {
+      positionX: 'center',
+      positionY: 'top',
+      size: 'full',
+      paddingX: 2,
+      paddingY: 2
+    }
+  }
+};
+
+
+class BubbleMaker {
+  constructor() { }
+
+  /**
+   * Create an animated bubble (image or text) over a video.
+   * @param {string} videoPath - path to base video
+   * @param {Object} bubble - bubble config (see OriginalManuscriptModel.Bubble)
+   * @param {string} outputPath - output video path
+   * @param {Function} onLog - optional logger
+   */
+  async makeBubble(videoPath, bubble, outputPath, onLog) {
+    if (!fs.existsSync(videoPath)) throw new Error('video not found: ' + videoPath);
+    const meta = await FFMpegUtils.getMediaMetadata(videoPath);
+    const vw = meta.video.width;
+    const vh = meta.video.height;
+
+    // Apply template defaults if templateName provided
+    if (bubble && bubble.templateName) {
+      const tpl = BaseBubbleTemplates[bubble.templateName];
+      if (tpl) {
+        // deep merge: template provides defaults, bubble overrides
+        bubble = _.merge({}, tpl, bubble);
+        // 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;
+        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 {
+        (onLog || console.log)(`Bubble template ${bubble.templateName} not found`);
+      }
+    }
+
+    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;
+    const to = typeof bubble.toSec === 'number' ? bubble.toSec : (from + (bubble.durationSec || 3));
+
+    // determine overlay source (image/video) or text
+    let isMedia = false;
+    let overlayPath = null;
+    // accept either mediaAbsPaths (plural, template) or mediaAbsPath (singular) for compatibility
+    const mediaField = bubble.mediaAbsPaths || bubble.mediaAbsPath || bubble.mediaAbs;
+    if (mediaField) {
+      const m = Array.isArray(mediaField) ? mediaField[0] : mediaField;
+      overlayPath = m?.path;
+      isMedia = !!overlayPath;
+    }
+
+    // compute target overlay size
+    const padX = extra.paddingX || 5; // percent
+    const padY = extra.paddingY || 5;
+
+    let ow = Math.round(vw * (extra.size === 'half' ? 0.45 : 0.30));
+    let oh = null; // keep aspect if image
+
+
+    // build ffmpeg command
+    let cmd;
+
+    if (isMedia && fs.existsSync(overlayPath)) {
+      // determine if overlay is image by extension
+      const imgExts = ['.png', '.jpg', '.jpeg', '.webp', '.bmp', '.gif'];
+      const overlayExt = path.extname(overlayPath).toLowerCase();
+      const isImageFile = imgExts.includes(overlayExt);
+
+      // get overlay dimensions if available
+      let overlayMeta;
+      try { overlayMeta = await FFMpegUtils.getMediaMetadata(overlayPath); } catch (e) { overlayMeta = null; }
+      if (overlayMeta && overlayMeta.video && overlayMeta.video.width && overlayMeta.video.height) {
+        const iw = overlayMeta.video.width;
+        const ih = overlayMeta.video.height;
+        const ar = iw / ih;
+        if (!oh) oh = Math.round(ow / ar);
+      } else {
+        // fallback to square-ish
+        if (!oh) 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);
+      const fadeInStart = from;
+      const fadeOutStart = Math.max(from, to - fadeDur);
+
+      // 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
+      if (isImageFile && (bubble.backgroundColor || (typeof bubble.borderRadius === 'number'))) {
+        try {
+          const processed = await processImageWithBg(overlayPath, ow, oh, bubble.backgroundColor, bubble.borderRadius || 0);
+          overlayPath = processed;
+          // update isImageFile extension to .png so we handle loop flags correctly
+        } catch (e) {
+          (onLog || console.log)('Failed to process image for rounded bg:', e);
+        }
+      }
+
+      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]`;
+
+      // Inputs: 0 = main video, 1 = overlay (image/video) (looped for images)
+      // Limit looped image input to main video duration to avoid encoding hanging
+      const mainDuration = meta.duration || meta.video?.duration || 0;
+      const overlayInputFlag = isImageFile
+        ? (mainDuration > 0 ? `-loop 1 -t ${mainDuration} -i "${overlayPath}"` : `-loop 1 -i "${overlayPath}"`)
+        : `-i "${overlayPath}"`;
+
+      // Audio handling: optionally mix in audioEffectFile
+      let audioFilter = '';
+      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;
+          }
+        }
+
+        if (audioPath) {
+          extraAudioInput = `-i "${audioPath}"`;
+          const aVol = typeof bubble.audioEffectVolume === 'number' ? bubble.audioEffectVolume : 1.0;
+          const delayMs = Math.round(from * 1000);
+          // overlay is input 1, so effect audio will be input 2
+          const audioInputIndex = 2;
+          const clipSec = Math.min((typeof bubble.audioEffectDurationSec === 'number' ? bubble.audioEffectDurationSec : (to - from)), (to - from));
+          audioFilter = `[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]`;
+        } else {
+          // fallback to mapping main audio
+          audioFilter = `[0:a]aresample=async=1[aout]`;
+        }
+      } else {
+        // map main audio through as aout
+        audioFilter = `[0:a]aresample=async=1[aout]`;
+      }
+
+      const fc = `${videoFilter};${audioFilter}`;
+
+      // Build final command
+      // place extraAudioInput after overlayInputFlag
+      const inputs = `${overlayInputFlag} ${extraAudioInput}`.trim();
+      cmd = `ffmpeg -i "${videoPath}" ${inputs} -filter_complex "${fc}" -map "[vout]" ${audioMap} -c:v libx264 -preset veryfast -crf 23 -shortest "${outputPath}" -y`;
+
+    } else if (bubble.bubbleText && bubble.bubbleText.text) {
+      const t = bubble.bubbleText;
+      const fontSize = t.fontSize || 40;
+      const fontColor = t.fontColor || '#FFFFFF';
+      const posX = extra.positionX || 'center';
+      const posY = extra.positionY || 'center';
+      // compute x,y expressions for drawtext
+      let xExpr = `(w-text_w)/2`;
+      if (posX === 'left') xExpr = `(w*${padX / 100})`;
+      else if (posX === 'right') xExpr = `(w-text_w-w*${padX / 100})`;
+      let yExpr = `(h-text_h)/2`;
+      if (posY === 'top') yExpr = `(h*${padY / 100})`;
+      else if (posY === 'bottom') yExpr = `(h-text_h-h*${padY / 100})`;
+
+      // If typing animation requested, create multiple drawtext filters showing progressively longer substring
+      if (false) {
+        // typewriter removed
+      } 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, '\\:');
+
+        let bgPath = null;
+        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, t.fontColor || fontColor, bubble.backgroundColor || t.boxColor || 'white', bubble.borderRadius || t.boxBorderW || 0, paddingXpx, paddingYpx);
+          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]`;
+        }
+
+        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;
+          }
+
+          if (audioPath) {
+            const aVol = typeof bubble.audioEffectVolume === 'number' ? bubble.audioEffectVolume : 1.0;
+            const delayMs = Math.round(from * 1000);
+            const audioInputIndex = bgPath ? 2 : 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) {
+              cmd = `ffmpeg -i "${videoPath}" -i "${bgPath}" -i "${audioPath}" -filter_complex "${fc}" -map "[vout]" -map "[aout]" -c:v libx264 -preset veryfast -crf 23 -c:a aac -shortest "${outputPath}" -y`;
+            } else {
+              cmd = `ffmpeg -i "${videoPath}" -i "${audioPath}" -filter_complex "${fc}" -map "[vout]" -map "[aout]" -c:v libx264 -preset veryfast -crf 23 -c:a aac -shortest "${outputPath}" -y`;
+            }
+          } else {
+            // fallback
+            const fc = `${videoFilter};[0:a]aresample=async=1[aout]`;
+            if (bgPath) {
+              cmd = `ffmpeg -i "${videoPath}" -i "${bgPath}" -filter_complex "${fc}" -map "[vout]" -map "[aout]" -c:v libx264 -preset veryfast -crf 23 -c:a aac -b:a 128k -shortest "${outputPath}" -y`;
+            } else {
+              cmd = `ffmpeg -i "${videoPath}" -filter_complex "${fc}" -map "[vout]" -map "[aout]" -c:v libx264 -preset veryfast -crf 23 -c:a aac -b:a 128k -shortest "${outputPath}" -y`;
+            }
+          }
+        } else {
+          // no audio mixing; if bg present include it as input
+          const fc = `${videoFilter};[0:a]aresample=async=1[aout]`;
+          if (bgPath) {
+            cmd = `ffmpeg -i "${videoPath}" -i "${bgPath}" -filter_complex "${fc}" -map "[vout]" -map "[aout]" -c:v libx264 -preset veryfast -crf 23 -c:a aac -b:a 128k -shortest "${outputPath}" -y`;
+          } else {
+            cmd = `ffmpeg -i "${videoPath}" -filter_complex "${fc}" -map "[vout]" -map "[aout]" -c:v libx264 -preset veryfast -crf 23 -c:a aac -b:a 128k -shortest "${outputPath}" -y`;
+          }
+        }
+      }
+    } else {
+      throw new Error('No valid bubble source (media or text) found');
+    }
+
+    onLog && onLog('Running ffmpeg: ' + cmd);
+    await FFMpegUtils.execute(cmd);
+    return outputPath;
+  }
+}
+
+export default new BubbleMaker();
+
+
+// --- Test runner (executes when run directly) ---
+
+export async function test() {
+  const bubbleMaker = new BubbleMaker();
+  const cwd = process.cwd();
+  const baseVideo = path.join(cwd, 'public', 'media.mp4');
+  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.
+  const typingSample = {
+    templateName: 'typing-top-center',
+    bubbleText: { text: 'TYPING TITLE' },
+    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);
+  } catch (e) {
+    console.error('Test failed:', e);
+  }
+}
+
+test()

utils/bubble/bg-utils.js

@@ -0,0 +1,49 @@
+import sharp from 'sharp';
+import fs from 'fs';
+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
+  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 tmp = tempPath('text-bg','png');
+  await sharp(Buffer.from(svg)).png().toFile(tmp);
+  const meta = await sharp(tmp).metadata();
+  return { path: tmp, width: meta.width, height: meta.height };
+}
+
+// Accept positional args for compatibility
+export async function processImageWithBg(srcPath, width, height, backgroundColor=null, radius=0){
+  const tmp = tempPath('img-out','png');
+  const rx = Math.max(0, Math.round(radius || 0));
+  let img = sharp(srcPath).resize(width, height, { fit: 'cover', position: 'centre' });
+  const overlayBuf = await img.png().toBuffer();
+  if (rx > 0) {
+    const maskSvg = `<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect x="0" y="0" rx="${rx}" ry="${rx}" width="${width}" height="${height}" fill="#fff"/></svg>`;
+    const rounded = await sharp(overlayBuf).composite([{ input: Buffer.from(maskSvg), blend: 'dest-in' }]).png().toBuffer();
+    if (backgroundColor) {
+      const bg = sharp({ create: { width, height, channels: 4, background: backgroundColor } }).png();
+      const out = tempPath('img-composite','png');
+      await bg.composite([{ input: rounded, gravity: 'centre' }]).png().toFile(out);
+      return out;
+    }
+    await sharp(rounded).png().toFile(tmp);
+    return tmp;
+  }
+
+  if (backgroundColor) {
+    const bg = sharp({ create: { width, height, channels: 4, background: backgroundColor } }).png();
+    const out = tempPath('img-composite','png');
+    await bg.composite([{ input: overlayBuf, gravity: 'centre' }]).png().toFile(out);
+    return out;
+  }
+
+  await sharp(overlayBuf).png().toFile(tmp);
+  return tmp;
+}

utils/bubble/helpers.js

@@ -0,0 +1,34 @@
+import os from 'os';
+import path from 'path';
+import fs from 'fs';
+import crypto from 'crypto';
+
+export function tempPath(prefix, ext) {
+  const id = Date.now().toString(36) + '-' + crypto.randomBytes(4).toString('hex');
+  return path.join(os.tmpdir(), `${prefix}-${id}.${ext}`);
+}
+
+export function escapeXml(s) {
+  return ('' + s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
+}
+
+export function escapeText(s) {
+  return ('' + s).replace(/:/g, '\\:').replace(/'/g, "\\'").replace(/\\/g, '\\\\');
+}
+
+export function resolveAudioPath(audioKey) {
+  if (!audioKey) return null;
+  let key = audioKey;
+  if (key === 'typewriter') key = 'click';
+  const assetsDir = path.join(process.cwd(), 'public', 'assets', 'audio-effects');
+  if (fs.existsSync(assetsDir)) {
+    const files = fs.readdirSync(assetsDir);
+    const match = files.find(f => path.parse(f).name === key);
+    if (match) return path.join(assetsDir, match);
+  }
+  // fallback: if key is already a path
+  if (path.isAbsolute(key) && fs.existsSync(key)) return key;
+  const candidate = path.join(process.cwd(), key);
+  if (fs.existsSync(candidate)) return candidate;
+  return null;
+}

utils/bubble/layout.js

@@ -0,0 +1,22 @@
+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);
+  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 posX = extra.positionX || 'center';
+  const posY = extra.positionY || 'center';
+  let x = 0, y = 0;
+  if (posX === 'left' || posX === 'top') x = Math.round((padX / 100) * vw);
+  else if (posX === 'right' || posX === 'bottom') x = Math.round(vw - overlayW - (padX / 100) * vw);
+  else x = Math.round((vw - overlayW) / 2);
+
+  if (posY === 'top') y = Math.round((padY / 100) * vh);
+  else if (posY === 'bottom') y = Math.round(vh - overlayH - (padY / 100) * vh);
+  else y = Math.round((vh - overlayH) / 2);
+  return { x, y };
+}