With Next scene in cur scene as background

package.json

@@ -15,8 +15,8 @@
 		"preview": "remotion studio --log=verbose",
 		"preinstall": "cd common-utils && npm run build",
 		"build:utils": "cd common-utils && npm run build && cd .. && npm install ./common-utils",
-		"render-build:igreels": "remotion render --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70  --concurrency 1 --gl=angle --browser-executable /usr/bin/chromium-browser  IGReelComposition",
-		"render-build": "remotion $npm_config_target --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70 --timeout 60000  --concurrency 4 --gl=angle  --browser-executable /usr/bin/chromium-browser $npm_config_composition",
+		"render-build:igreels": "remotion render --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70  --concurrency 1 --gl=vulkan   IGReelComposition",
+		"render-build": "remotion $npm_config_target --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70 --timeout 60000  --concurrency 1 --gl=angle  --browser-executable /usr/bin/chromium-browser $npm_config_composition",
 		"render-still": "remotion still --image-format=jpeg SemibitCompositionPoster  ",
 		"render-image": "remotion still --image-format=jpeg --concurrency 1 $npm_config_composition $npm_config_output",
 		"render-images": "remotion render --enable-multiprocess-on-linux --sequence --image-format=jpeg $npm_config_composition $npm_config_output",

src/Compositions.tsx

@@ -59,7 +59,7 @@ export const Compositions: React.FC = () => {
         Script.transcript
             .sort((t, u) => t.index - u.index)
             // .filter(item => (item.audioCaptionFile != undefined))
-            // .slice(0, 2)
+            .slice(0, 2)
             .map((section, idx, array) => {
                 section.index = section.index || idx;
                 var { text, duration: durationMilis, offset, mediaAbsPaths, mediaAbsPaths, audioFullPath, title, pointers } = section

src/RenderUtils.ts

@@ -1,4 +1,7 @@
+import { Transcript } from "common-utils";
+import _ from "lodash";
 import { random, staticFile, useCurrentFrame } from "remotion";
+import { DisplayMedia } from "./ig-reel/IGSimpleScene";
 
 
 function levenshteinDistance(str1: string, str2: string) {
@@ -19,6 +22,38 @@ function levenshteinDistance(str1: string, str2: string) {
 }
 export class RenderUtils {
 
+  public static calculateDisplayMedia(
+    item: Transcript,
+    durationInSeconds: number,
+    frame: number,
+    fps: number) {
+    let currentDisplayMedia: DisplayMedia = (item?.mediaAbsPaths as any || [])[0]
+    if (!_.isEmpty(item?.mediaAbsPaths)) {
+      let frameOffest = 0
+      for (let i = 0; i < item?.mediaAbsPaths.length; i++) {
+        const media: DisplayMedia = item.mediaAbsPaths[i] as any;
+        if (!media) {
+          return undefined
+        }
+        media.idx = i
+        media.startFrame = frameOffest
+        if (media.durationSec == undefined) {
+          media.durationSec = durationInSeconds / (item?.mediaAbsPaths.length)
+          if (i == item.mediaAbsPaths.length - 1) {
+            media.durationSec = durationInSeconds
+          }
+        }
+        media.durationFrames = media.durationSec * fps
+        media.endFrame = frameOffest + media.durationFrames
+        frameOffest = frameOffest + media.durationFrames
+        if (frame > media.startFrame && frame < media.endFrame) {
+          currentDisplayMedia = media
+        }
+      }
+
+    }
+    return currentDisplayMedia
+  }
   public static tryStaticFile(file: string) {
     try {
       return staticFile(file);

src/ig-reel/IGMediaRender.tsx

@@ -9,11 +9,15 @@ import { RenderUtils } from "../RenderUtils";
 
 
 export function IGMediaRender(props: { curZoom: number, displayMedia: DisplayMedia, offThreadVideo?: boolean }) {
+
   let displayMedia: DisplayMedia = props.displayMedia
+  if (displayMedia == undefined) {
+    return null
+  }
   let bgMediaPath = staticFile(displayMedia?.path || '')
   let curZoom = props.curZoom
   let transitionsByMood = Transitions.filter(t => t.mood?.indexOf("happy") > -1)
-  let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia.idx * displayMedia.durationFrames}`)
+  let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia?.idx * displayMedia.durationFrames}`)
   // transition.file = 'assets/effects/effect_sky.webm'
 
   return (

src/ig-reel/IGReelComposition.tsx

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { AbsoluteFill, Audio, Easing, Img, interpolate, staticFile, useCurrentFrame } from 'remotion';
+import { AbsoluteFill, Audio, Easing, Freeze, Img, interpolate, staticFile, useCurrentFrame } from 'remotion';
 import React from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
@@ -10,6 +10,8 @@ import { VideoSplash } from '../anims/VideoSplash';
 import Transitions from '../../public/assets/transitions.json'
 import { RenderUtils } from '../RenderUtils';
 import IG2LineMotivationalScene from './IG2LineMotivationalScene';
+import { IGMediaRender } from './IGMediaRender';
+import { Pan } from '../anims/Pan';
 
 export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   const { fontFamily } = loadFont();
@@ -47,7 +49,7 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
 
       <TransitionSeries>
         {
-          transcripts.map((scriptItem: Transcript, i) => {
+          transcripts.map((scriptItem: Transcript, i, array) => {
             let { durationInSeconds } = scriptItem
             let durationInFrames = meta.fps * durationInSeconds
             let template = scriptItem.extras?.template
@@ -65,13 +67,31 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
                   item={scriptItem} />
               )
             }
+            const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
+
             return (
               <>
-                <TransitionSeries.Sequence durationInFrames={durationInFrames}>
+                <TransitionSeries.Sequence
+                  key={`seq-${i}`}
+                  premountFor={Math.round(meta.fps * 0.8)} // mount ~0.8s earlier; tweak as needed
+                  durationInFrames={durationInFrames}>
 
                   {Component}
 
                 </TransitionSeries.Sequence>
+                {
+                  (i < array.length - 1) && (
+                    <TransitionSeries.Transition
+                      durationInFrames={30}
+                      transitionComponent={({ progress, ...props }) => {
+                        return (
+                          <Pan {...props} progress={easeInOutExp(progress)} />
+                        )
+                      }}
+                    />
+                  )
+                }
+
               </>
             )
           })

src/ig-reel/IGSimpleScene.tsx

@@ -89,35 +89,6 @@ export const GenerateWordGroupRanges = function (audioCaptionFile: string, setSu
   })
 }
 
-export function calculateDisplayMedia(
-  item: Transcript,
-  durationInSeconds: number,
-  frame: number,
-  fps: number) {
-  let currentDisplayMedia: DisplayMedia = (item?.mediaAbsPaths as any || [])[0]
-  if (!_.isEmpty(item?.mediaAbsPaths)) {
-    let frameOffest = 0
-    for (let i = 0; i < item?.mediaAbsPaths.length; i++) {
-      const media: DisplayMedia = item.mediaAbsPaths[i] as any;
-      media.idx = i
-      media.startFrame = frameOffest
-      if (media.durationSec == undefined) {
-        media.durationSec = durationInSeconds / (item?.mediaAbsPaths.length)
-        if (i == item.mediaAbsPaths.length - 1) {
-          media.durationSec = durationInSeconds
-        }
-      }
-      media.durationFrames = media.durationSec * fps
-      media.endFrame = frameOffest + media.durationFrames
-      frameOffest = frameOffest + media.durationFrames
-      if (frame > media.startFrame && frame < media.endFrame) {
-        currentDisplayMedia = media
-      }
-    }
-
-  }
-  return currentDisplayMedia
-}
 
 export const IGSimpleScene: React.FC<any> = (props: {
   script: OriginalManuscript,
@@ -138,11 +109,9 @@ export const IGSimpleScene: React.FC<any> = (props: {
   const itemIdx = item.index;
   const isLastScene = script.transcript[script.transcript?.length - 1]?.index == itemIdx
   const nextScene = script.transcript.find(i => i.index == itemIdx + 1);
-  let nextSceneMedia0 = nextScene?.mediaAbsPaths as any as DisplayMedia;
-
-
+  let nextSceneMedia0 = undefined;//nextScene?.mediaAbsPaths as any as DisplayMedia | undefined;
   if (nextSceneMedia0) {
-    nextSceneMedia0 = calculateDisplayMedia(nextScene as Transcript, durationInSeconds, frame, fps)
+    nextSceneMedia0 = RenderUtils.calculateDisplayMedia(nextScene as Transcript, durationInSeconds, frame, fps)
   }
   useEffect(() => {
     if (audioCaptionFile)
@@ -167,7 +136,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
   let word = RenderUtils.findCurrentWord(curSecond, subtitles!!)
   let group: Group = RenderUtils.findCurrentGroupByTime(curSecond, groups)
 
-  let currentDisplayMedia: DisplayMedia = calculateDisplayMedia(item, durationInSeconds, frame, fps)
+  let currentDisplayMedia: DisplayMedia | undefined = RenderUtils.calculateDisplayMedia(item, durationInSeconds, frame, fps)
 
 
 
@@ -185,11 +154,12 @@ export const IGSimpleScene: React.FC<any> = (props: {
       duration = item.durationInSeconds * fps
     }
     chunk.push((
-      <TransitionSeries.Sequence durationInFrames={duration}>
+      <TransitionSeries.Sequence key={`x-${i}`} durationInFrames={duration}>
         <IGMediaRender offThreadVideo={true} curZoom={curZoom} displayMedia={displayMedia} />
       </TransitionSeries.Sequence>
     ))
-    if (i < item?.mediaAbsPaths.length - 1 || true) {
+    // Only show in schene media transitions if there are more than one media
+    if (i < item?.mediaAbsPaths.length - 1) {
 
       let animsObj = {
         // CircularWipe, Slide,LinearWipe, // Not work
@@ -210,6 +180,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
         //@ts-ignore
         Anim = animsObj[animFromTranscript]
       }
+      Anim = Pan
 
       if (!isLastScene && (item.transition_type?.includes('geometrial') || animFromTranscript || item.transition_type == undefined)) {
         chunk.push((
@@ -231,10 +202,11 @@ export const IGSimpleScene: React.FC<any> = (props: {
   // console.log('currentDisplayMedia?.endFrame', frame, currentDisplayMedia?.endFrame)
   return (
     <AbsoluteFill style={{
+      backgroundColor: RenderUtils.randomElement(['red', 'blue', 'green', 'orange', 'yellow', 'cyan'], `x-${itemIdx}`),
       width: '100%',
       height: '100%',
     }} className='relative'>
-      <Audio volume={1} loop src={staticFile(speechPath as string)} />
+      <Audio volume={1} src={staticFile(speechPath as string)} />
       {
         nextSceneMedia0 && (
           <TransitionSeries.Sequence durationInFrames={itemDurationInFrames}>
@@ -253,7 +225,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
 
       {
         (item.transition_type?.includes("graphical")) && !isLastScene &&
-        currentDisplayMedia?.idx > -1 && (
+        (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}`)