src/ig-reel/IGMediaRender.tsx

//@ts-nocheck
import { Img, Video, OffthreadVideo, staticFile } from "remotion";
import TransitionSeries from "remotion-transition-series/lib/TransitionSeries";
import { VideoSplash } from "../anims/VideoSplash";
import { SequentialScene } from "../youtube/SequentialScene";
import { DisplayMedia } from "./IGSimpleScene";
import Transitions from '../../public/assets/transitions.json'
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}`)
  // transition.file = 'assets/effects/effect_sky.webm'

  return (
    <div style={{
      position: 'relative',
      height: '100%', width: '100%'
    }}>

      {
        displayMedia.type == 'video' ? (
          <div style={{
            position: 'relative',
            height: '100%', width: '100%'
          }}>
            {
              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={{
            transform: `scale(${(curZoom)})  translateX(${10 * curZoom}px)`,
            height: '100%', width: '100%'
          }} src={bgMediaPath} />
        )
      }
      {/* {
        displayMedia?.idx > -1 && (
          <TransitionSeries.Sequence from={displayMedia.durationFrames - 60}>
            <VideoSplash file={transition.file} style={{
              position: 'relative',
              height: '100%', width: '100%'
            }} />
          </TransitionSeries.Sequence>
        )
      } */}

    </div>
  )
}