Back animation

src/Compositions.tsx

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

src/ig-reel/IGSimpleScene.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { AbsoluteFill, Sequence, interpolate, staticFile, Audio, useCurrentFrame, Easing } from 'remotion';
 import React, { useEffect, useState } from 'react'
 import { RenderUtils } from '../RenderUtils';
@@ -90,12 +89,41 @@ 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,
   item: Transcript,
   SubtitleComponent: React.FC<any>
 }) => {
-
   const [subtitles, setSubtitles] = useState(undefined)
   const [groups, setGroups] = useState(undefined)
   const item: Transcript = props.item
@@ -107,7 +135,17 @@ export const IGSimpleScene: React.FC<any> = (props: {
   const SubtitleComponent = props.SubtitleComponent
   let speechPath = RenderUtils.getFileName(item?.audioFullPath)
 
-
+  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;
+  console.log('item.index', item.index,
+    'nextSceneMedia0', nextSceneMedia0,
+    "isLastScene", isLastScene,
+    'item?.mediaAbsPaths?.[0]', item?.mediaAbsPaths?.[0])
+  if (nextSceneMedia0) {
+    nextSceneMedia0 = calculateDisplayMedia(nextScene as Transcript, durationInSeconds, frame, fps)
+  }
   useEffect(() => {
     if (audioCaptionFile)
       GenerateWordGroupRanges(audioCaptionFile, setSubtitles, setGroups)
@@ -120,40 +158,19 @@ export const IGSimpleScene: React.FC<any> = (props: {
   let itemDurationInFrames = item.durationInSeconds * fps
   // console.log('scriptItem.offset', frame, itemDurationInFrames)
 
-  const foregroundOpacity = item.transition_type == 'none' ? 0 : interpolate(
+  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 = (item?.mediaAbsPaths || [])[0]
+  let currentDisplayMedia: DisplayMedia = calculateDisplayMedia(item, durationInSeconds, frame, fps)
 
-  if (!_.isEmpty(item?.mediaAbsPaths)) {
-    let frameOffest = 0
-    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?.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
-      }
-    }
-
-  }
 
 
   let chunks: React.ReactNode[] = (item?.mediaAbsPaths?.map((displayMedia: DisplayMedia, i) => {
@@ -175,9 +192,8 @@ export const IGSimpleScene: React.FC<any> = (props: {
       let Anim = anims[frame % 9]
       let seed = i * displayMedia.idx
       Anim = RenderUtils.randomElement(anims, `x-${seed}`)
-      console.log('Anim', Anim)
       const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
-      if (item.transition_type == 'geometrial' || item.transition_type == undefined) {
+      if (!isLastScene && (item.transition_type?.includes('geometrial') || item.transition_type == undefined)) {
         chunk.push((
           <TransitionSeries.Transition
             durationInFrames={60}
@@ -201,6 +217,13 @@ export const IGSimpleScene: React.FC<any> = (props: {
       height: '100%',
     }} className='relative'>
       <Audio volume={1} loop src={staticFile(speechPath)} />
+      {
+        nextSceneMedia0 && (
+          <TransitionSeries.Sequence durationInFrames={nextSceneMedia0.durationFrames || itemDurationInFrames}>
+            <IGMediaRender curZoom={1} displayMedia={nextSceneMedia0} />
+          </TransitionSeries.Sequence>
+        )
+      }
       <TransitionSeries>
         {
           ...chunks
@@ -209,7 +232,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
       </TransitionSeries>
 
       {
-        (item.transition_type == 'graphical') &&
+        (item.transition_type?.includes("graphical")) && !isLastScene &&
         currentDisplayMedia?.idx > -1 && (
           item?.mediaAbsPaths?.map((displayMedia: DisplayMedia, i) => {
             let transitionsByMood = Transitions.filter(t => t.mood?.indexOf("happy") > -1)