Performance fixes

src/ig-reel/IGMediaRender.tsx

@@ -8,7 +8,7 @@ import Transitions from '../../public/assets/transitions.json'
 import { RenderUtils } from "../RenderUtils";
 
 
-export function IGMediaRender(props: { curZoom: number, displayMedia: DisplayMedia }) {
+export function IGMediaRender(props: { curZoom: number, displayMedia: DisplayMedia, offThreadVideo?: boolean }) {
   let displayMedia: DisplayMedia = props.displayMedia
   let bgMediaPath = staticFile(displayMedia?.path || '')
   let curZoom = props.curZoom
@@ -28,12 +28,30 @@ export function IGMediaRender(props: { curZoom: number, displayMedia: DisplayMed
             position: 'relative',
             height: '100%', width: '100%'
           }}>
-            <Video playbackRate={1} volume={0} style={{
-              background: '#fff',
-              position: 'absolute',
-              objectFit: 'cover',
-              height: '100%', width: '100%'
-            }} src={bgMediaPath} />
+            {
+              props.offThreadVideo ?
+                <OffthreadVideo
+                  toneMapped={false}
+                  playbackRate={1}
+                  volume={0}
+                  style={{
+                    background: '#fff',
+                    position: 'absolute',
+                    objectFit: 'cover',
+                    height: '100%',
+                    width: '100%',
+                  }}
+                  src={bgMediaPath}
+                />
+                :
+                <Video playbackRate={1} volume={0} style={{
+                  background: '#fff',
+                  position: 'absolute',
+                  objectFit: 'cover',
+                  height: '100%', width: '100%'
+                }} src={bgMediaPath} />
+            }
+
           </div>
         ) : (
           <Img className='absolute inset-0 w-full h-full object-cover' style={{

src/ig-reel/IGSimpleScene.tsx

@@ -186,7 +186,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
     }
     chunk.push((
       <TransitionSeries.Sequence durationInFrames={duration}>
-        <IGMediaRender curZoom={curZoom} displayMedia={displayMedia} />
+        <IGMediaRender offThreadVideo={true} curZoom={curZoom} displayMedia={displayMedia} />
       </TransitionSeries.Sequence>
     ))
     if (i < item?.mediaAbsPaths.length - 1 || true) {
@@ -239,7 +239,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
         nextSceneMedia0 && (
           <TransitionSeries.Sequence durationInFrames={itemDurationInFrames}>
             <Freeze frame={1}>
-              <IGMediaRender curZoom={1} displayMedia={nextSceneMedia0} />
+              <IGMediaRender offThreadVideo={true} curZoom={1} displayMedia={nextSceneMedia0} />
             </Freeze>
           </TransitionSeries.Sequence>
         )

src/index.ts

@@ -1,5 +1,4 @@
-import { registerRoot } from 'remotion';
 import { Compositions } from "./Compositions";
+import { continueRender, delayRender, registerRoot } from "remotion";
 
-
-registerRoot(Compositions);
+registerRoot(Compositions);