Fixe

common-utils

@@ -1 +1 @@
-Subproject commit f94da96b4fc35945bc0a9d80b7771cd8abedd605
+Subproject commit aa2dc6a5bf1013e79ac67b1408fcdedc8b98672c

src/Compositions.tsx

@@ -61,8 +61,8 @@ export const Compositions: React.FC = () => {
             // .filter(item => (item.audioCaptionFile != undefined))
             // .slice(0, 2)
             .map((section) => {
-                var { text, duration: durationMilis, offset, mediaAbsPaths, imageAbsPaths, audioFullPath, title, pointers } = section
-                imageAbsPaths = imageAbsPaths || mediaAbsPaths || []
+                var { text, duration: durationMilis, offset, mediaAbsPaths, mediaAbsPaths, audioFullPath, title, pointers } = section
+                mediaAbsPaths = mediaAbsPaths || mediaAbsPaths || []
                 if (!durationMilis) {
                     durationMilis = section.durationInSeconds * 1000
                 }
@@ -83,10 +83,10 @@ export const Compositions: React.FC = () => {
                 let commDuration = durationInSec + transitionDurationSec
                 durationInSec = durationInSec + curDurSecs + transitionDurationSec
                 lastDirection = !lastDirection
-                imageAbsPaths.forEach(p => {
+                mediaAbsPaths.forEach(p => {
                     let im = p.path
                     if (im.startsWith("http")) {
-                        if (im.indexOf("-video-") > -1) {
+                        if (im.indexOf("-video-") > -1 || im.indexOf(".mp4") > -1 || im.indexOf(".webm") > -1) {
                             preloadVideos.push(im)
                             // preloadVideo(im)
                         }
@@ -96,7 +96,7 @@ export const Compositions: React.FC = () => {
                         }
                     }
                 })
-                let bgImagePaths = imageAbsPaths.map(p => {
+                let bgImagePaths = mediaAbsPaths.map(p => {
                     p.path = RenderUtils.getFileName(p?.path)
                     return p
                 })
@@ -162,7 +162,7 @@ export const Compositions: React.FC = () => {
                 width={Script.meta?.resolution?.width || 1920}
                 height={Script.meta?.resolution?.height || 1080}
                 defaultProps={{
-                    bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
+                    bgMusic: RenderUtils.getFileName(Script.bgMusic),
                     contents: contents,
                     intro: intro,
                     outro: outro,
@@ -177,7 +177,7 @@ export const Compositions: React.FC = () => {
                 width={Script.meta?.resolution?.width || 1920}
                 height={Script.meta?.resolution?.height || 1080}
                 defaultProps={Object.assign(Script, {
-                    bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
+                    bgMusic: RenderUtils.getFileName(Script.bgMusic),
                     contents: contents,
                     intro: intro,
                     outro: outro
@@ -192,7 +192,7 @@ export const Compositions: React.FC = () => {
                 width={Script.meta?.resolution?.width || 1920}
                 height={Script.meta?.resolution?.height || 1080}
                 defaultProps={Object.assign(Script, {
-                    bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
+                    bgMusic: RenderUtils.getFileName(Script.bgMusic),
                     contents: contents,
                     intro: intro,
                     outro: outro

src/anims/VideoSplash.tsx

@@ -27,7 +27,8 @@ export const VideoSplash:
           volume={0} style={{
             position: 'absolute',
             height: '100%', width: '100%',
-          }} src={staticFile((file || 'assets/effects/effect_zipper.webm'))} />
+          }}
+          src={staticFile((file || 'assets/effects/effect_zipper.webm'))} />
 
       </div>
     );

src/ig-reel/IG2LineMotivationalScene.tsx

@@ -3,6 +3,7 @@ import { Audio, Img, spring, staticFile, useCurrentFrame } from "remotion";
 import * as Montserrat from "@remotion/google-fonts/Montserrat";
 import { MediaBackground } from "../youtube/MediaBackground";
 import { ErrorMsg } from "../common/Error";
+import { RenderUtils } from "../RenderUtils";
 
 export default function IG2LineMotivationalScene(props: { meta: Meta; item: Transcript }) {
   const { meta, item: transcript } = props;
@@ -11,7 +12,7 @@ export default function IG2LineMotivationalScene(props: { meta: Meta; item: Tran
 
   const media = mediaAbsPaths[0];
   const watermark = mediaAbsPaths[1];
-  const bgMusicPath = staticFile(audioFullPath || "");
+  const bgMusicPath = RenderUtils.tryStaticFile(audioFullPath);
   const { fontFamily } = Montserrat.loadFont("normal", { weights: ["400"] });
   const frame = useCurrentFrame();
 

src/ig-reel/IGReelComposition.tsx

@@ -13,7 +13,7 @@ import IG2LineMotivationalScene from './IG2LineMotivationalScene';
 
 export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   const { fontFamily } = loadFont();
-  let { meta, bgMusic, bgMusicDuration } = props
+  let { meta, bgMusic, bgMusicDuration, bgMusicVolume } = props
   let transcripts: Transcript[] = props.contents
   let fps = meta.fps
   let frame = useCurrentFrame()
@@ -23,20 +23,28 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   let startTransition = RenderUtils.randomElement(transitions, `x-${textLen}`)
 
   // console.log('IGReelComposition props', props)
-  let bgMusicPath = staticFile(bgMusic || '')
+  let bgMusicPath = RenderUtils.tryStaticFile(bgMusic || '')
   return (
     <AbsoluteFill style={{
       background: 'black'
     }}>
-      {
-        bgMusic && (
-          <Audio loop
-            volume={(f) =>
-              interpolate(f, [0, bgMusicDuration * fps], [0.05, 0.01], { extrapolateLeft: "clamp" })
-            }
-            src={bgMusicPath} />
+      {bgMusic && (
+        <Audio
+          loop
+          volume={(f) =>
+            bgMusicVolume !== undefined
+              ? bgMusicVolume
+              : interpolate(
+                f,
+                [0, bgMusicDuration * fps],
+                [0.05, 0.01],
+                { extrapolateLeft: "clamp" }
         )
-      }
+    }
+          src={bgMusicPath}
+        />
+      )}
+
       <TransitionSeries>
         {
           transcripts.map((scriptItem: Transcript, i) => {
@@ -71,7 +79,7 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
       </TransitionSeries>
 
       {
-        transcripts.find(a => a.transition_type != 'none') && (
+        transcripts.find(a => a.transition_type && (a.transition_type != 'none')) && (
           <div
             style={{
               width: '100%',

src/ig-reel/IGSimpleScene.tsx

@@ -131,17 +131,17 @@ export const IGSimpleScene: React.FC<any> = (props: {
   let word = RenderUtils.findCurrentWord(curSecond, subtitles)
   let group: Group = RenderUtils.findCurrentGroupByTime(curSecond, groups)
 
-  let currentDisplayMedia: DisplayMedia = (item?.imageAbsPaths || [])[0]
+  let currentDisplayMedia: DisplayMedia = (item?.mediaAbsPaths || [])[0]
 
-  if (!_.isEmpty(item?.imageAbsPaths)) {
+  if (!_.isEmpty(item?.mediaAbsPaths)) {
     let frameOffest = 0
-    for (let i = 0; i < item?.imageAbsPaths.length; i++) {
-      const media: SectionMedia = item.imageAbsPaths[i];
+    for (let i = 0; i < item?.mediaAbsPaths.length; i++) {
+      const media: SectionMedia = item.mediaAbsPaths[i];
       media.idx = i
       media.startFrame = frameOffest
       if (media.durationSec == undefined) {
-        media.durationSec = durationInSeconds / (item?.imageAbsPaths.length)
-        if (i == item.imageAbsPaths.length - 1) {
+        media.durationSec = durationInSeconds / (item?.mediaAbsPaths.length)
+        if (i == item.mediaAbsPaths.length - 1) {
           media.durationSec = durationInSeconds
         }
       }
@@ -156,7 +156,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
   }
 
 
-  let chunks: React.ReactNode[] = (item?.imageAbsPaths?.map((displayMedia: DisplayMedia, i) => {
+  let chunks: React.ReactNode[] = (item?.mediaAbsPaths?.map((displayMedia: DisplayMedia, i) => {
     let chunk = []
     let easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
     easeInOutExp = Easing.ease
@@ -166,7 +166,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
         <IGMediaRender curZoom={curZoom} displayMedia={displayMedia} />
       </TransitionSeries.Sequence>
     ))
-    if (i < item?.imageAbsPaths.length - 1 || true) {
+    if (i < item?.mediaAbsPaths.length - 1 || true) {
       let anims = [CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve, CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve]
       // .fill(SlidingDoors)
       let Anim = anims[frame % 9]
@@ -207,7 +207,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
       {
         (item.transition_type == 'graphical') &&
         currentDisplayMedia?.idx > -1 && (
-          item?.imageAbsPaths?.map((displayMedia: DisplayMedia, i) => {
+          item?.mediaAbsPaths?.map((displayMedia: DisplayMedia, i) => {
             let transitionsByMood = Transitions.filter(t => t.mood?.indexOf("happy") > -1)
             let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia.idx * displayMedia.durationFrames}`)
             // transition = transitionsByMood[5]

src/linkedin-video/LinkedinFullSysDesignComposition.tsx

@@ -14,7 +14,7 @@ import GeneralSubtitles from '../subtitles/general_Subtitles';
 
 export const LinkedinFullSysDesignComposition: React.FC = (props: OriginalManuscript) => {
   const { fontFamily } = loadFont();
-  let { meta, bgMusic, bgMusicDuration } = props
+  let { meta, bgMusic, bgMusicDuration, bgMusicVolume } = props
   let transcripts: Transcript[] = props.contents
   let fps = meta.fps
   let frame = useCurrentFrame()
@@ -28,15 +28,23 @@ export const LinkedinFullSysDesignComposition: React.FC = (props: OriginalManusc
     <AbsoluteFill style={{
       background: 'white'
     }}>
-      {
-        bgMusic && (
-          <Audio loop
-            volume={(f) =>
-              interpolate(f, [0, bgMusicDuration * fps], [0.05, 0.01], { extrapolateLeft: "clamp" })
-            }
-            src={bgMusicPath} />
+      {bgMusic && (
+        <Audio
+          loop
+          volume={(f) =>
+      bgMusicVolume !== undefined
+        ? bgMusicVolume
+        : interpolate(
+          f,
+          [0, bgMusicDuration * fps],
+          [0.05, 0.01],
+          { extrapolateLeft: "clamp" }
         )
-      }
+    }
+          src={bgMusicPath}
+        />
+      )}
+
       <TransitionSeries>
         {
           transcripts.map((scriptItem: Transcript, i) => {

src/paperdrive/PaperDrivePage.tsx

@@ -10,7 +10,7 @@ import { PaperDrivePageExtras } from "./types";
 export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
   const extras = transcript.extras as PaperDrivePageExtras
 
-  const watermark = transcript.imageAbsPaths?.[0]
+  const watermark = transcript.mediaAbsPaths?.[0]
   let watermarkPath = undefined
   if (watermark) {
     watermarkPath = staticFile(RenderUtils.getFileName(watermark.path)!)

src/youtube/SequentialScene.orig.tsx

@@ -78,12 +78,13 @@ export const SequentialScene: React.FC = (
 
     const contents = props.contents
     const bgMusic = props.bgMusic
+    const bgMusicVolume = props.bgMusicVolume
 
     return (
         <div>
             {bgMusic &&
                 <AbsoluteFill>
-                    <Audio allowAmplificationDuringRender loop volume={0.05} src={staticFile(bgMusic)} />
+                    <Audio allowAmplificationDuringRender loop volume={bgMusicVolume ?? 0.05} src={staticFile(bgMusic)} />
                 </AbsoluteFill>
             }
             <Series>

src/youtube/SequentialScene.tsx

@@ -78,12 +78,13 @@ export const SequentialScene: React.FC = (
 
     const contents = props.contents
     const bgMusic = props.bgMusic
+    const bgMusicVolume = props.bgMusicVolume
 
     return (
         <div>
             {bgMusic &&
                 <AbsoluteFill>
-                    <Audio allowAmplificationDuringRender loop volume={0.05} src={staticFile(bgMusic)} />
+                    <Audio allowAmplificationDuringRender loop volume={bgMusicVolume ?? 0.05} src={staticFile(bgMusic)} />
                 </AbsoluteFill>
             }
             <Series>

src/youtube/YoutubeVideoScene.tsx

@@ -76,6 +76,7 @@ export const YoutubeVideoScene: React.FC = (
 
     const contents = props.contents
     const bgMusic = props.bgMusic
+    const bgMusicVolume = props.bgMusicVolume
 
     let children = []
     if (props?.intro?.file && props?.intro?.durationInFrames) {
@@ -101,7 +102,7 @@ export const YoutubeVideoScene: React.FC = (
         <div>
             {bgMusic &&
                 <AbsoluteFill>
-                    <Audio allowAmplificationDuringRender loop volume={0.05} src={staticFile(bgMusic)} />
+                    <Audio allowAmplificationDuringRender loop volume={bgMusicVolume ?? 0.05} src={staticFile(bgMusic)} />
                 </AbsoluteFill>
             }
             <Series>