Base ready

src/OriginalManuscriptModel.ts

@@ -31,8 +31,8 @@ export interface Transcript {
     imageAbsPaths: SectionMedia[]
     audioFullPath: string
     durationInSeconds: number
-    duration: number
-    offset: number
+    duration: number // duration in frames 
+    offset: number // offset in frames
     bubble: {
         image?: string
         text: string

src/ig-reel/IGReelComposition.tsx

@@ -1,16 +1,20 @@
 //@ts-nocheck
-import { AbsoluteFill, Audio, Img, interpolate, staticFile } from 'remotion';
+import { AbsoluteFill, Audio, Easing, Img, interpolate, staticFile, useCurrentFrame } from 'remotion';
 import React from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
 import { IGScene } from './IGSimpleScene';
-import { OriginalManuscript } from '../OriginalManuscriptModel';
+import { OriginalManuscript, Transcript } from '../OriginalManuscriptModel';
+import TransitionSeries from 'remotion-transition-series';
+
 
 
 export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   const { fontFamily } = loadFont();
-  let { contents, meta, bgMusic, bgMusicDuration } = props
+  let { meta, bgMusic, bgMusicDuration } = props
+  let transcripts: Transcript[] = props.contents
   let fps = meta.fps
+  let frame = useCurrentFrame()
 
 
   let bgMusicPath = staticFile(bgMusic || '')
@@ -27,19 +31,22 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
             src={bgMusicPath} />
         )
       }
-      <Series>
+      <TransitionSeries>
         {
-          contents.map((scriptItem, i) => {
+          transcripts.map((scriptItem: Transcript, i) => {
             let { durationInSeconds } = scriptItem
             let durationInFrames = meta.fps * durationInSeconds
+
             return (
-              <Series.Sequence durationInFrames={durationInFrames}>
-                <IGScene script={props} item={scriptItem} />
-              </Series.Sequence>
+              <>
+                <TransitionSeries.Sequence durationInFrames={durationInFrames}>
+                  <IGScene script={props} item={scriptItem} />
+                </TransitionSeries.Sequence>
+              </>
             )
           })
         }
-      </Series>
+      </TransitionSeries>
 
 
     </AbsoluteFill >

src/ig-reel/IGSimpleScene.tsx

@@ -111,6 +111,17 @@ export const IGScene: React.FC<any> = (props: {
     return (<></>)
   }
 
+
+  let itemDurationInFrames = item.durationInSeconds * fps
+  console.log('scriptItem.offset', frame, itemDurationInFrames)
+
+  const foregroundOpacity = interpolate(
+    frame,
+    [0, 10, itemDurationInFrames - 10, itemDurationInFrames],
+    [1, 0, 0, 1]
+  );
+
+
   let curSecond: Number = frame / fps
   let word = findCurrentWord(curSecond, subtitles)
   let group: Group = findCurrentGroupByTime(curSecond, groups)
@@ -162,7 +173,6 @@ export const IGScene: React.FC<any> = (props: {
     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)
-    console.log(`[${frame}]`, 'image zoon', curZoom, [displayMedia?.startFrame, displayMedia?.endFrame])
     chunk.push((
       <TransitionSeries.Sequence durationInFrames={displayMedia.durationFrames}>
         <IGMediaRender curZoom={curZoom} displayMedia={displayMedia} />
@@ -189,7 +199,10 @@ export const IGScene: React.FC<any> = (props: {
     return chunk
   }))
   return (
-    <AbsoluteFill className='relative'>
+    <AbsoluteFill style={{
+      width: '100%',
+      height: '100%',
+    }} className='relative'>
       <Audio volume={1} src={staticFile(audioPath)} />
       <TransitionSeries>
         {
@@ -198,10 +211,21 @@ export const IGScene: React.FC<any> = (props: {
 
       </TransitionSeries>
 
-
-      <div className='absolute inset-0'>
+      <div style={{
+        opacity: foregroundOpacity,
+        zIndex: 10,
+        width: '100%',
+        height: '100%',
+        background: 'black'
+      }}></div>
+
+      <div style={{
+        zIndex: 20,
+      }} className='absolute inset-0'>
         <ExcitedSubtitles position='center' group={group} word={word} />
       </div>
+
+
     </AbsoluteFill >
   );
 };