src/linkedin-video/LinkedinFullSysDesignComposition.tsx

//@ts-nocheck
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 { IGSimpleScene } from '../ig-reel/IGSimpleScene';
import { OriginalManuscript, Transcript } from 'common-utils';
import TransitionSeries from 'remotion-transition-series';
import { VideoSplash } from '../anims/VideoSplash';
import Transitions from '../../public/assets/transitions.json'
import { RenderUtils } from '../RenderUtils';
import { AnimGraphScene } from './AnimGraphScene';
import GeneralSubtitles from '../subtitles/general_Subtitles';

export const LinkedinFullSysDesignComposition: React.FC = (props: OriginalManuscript) => {
  const { fontFamily } = loadFont("normal", {
    ignoreTooManyRequestsWarning: true
  });
  let { meta, bgMusic, bgMusicDuration, bgMusicVolume } = props
  let transcripts: Transcript[] = props.contents
  let fps = meta.fps
  let frame = useCurrentFrame()

  let textLen = props.transcript.length % 5
  let transitions = Transitions.filter(t => t.mood?.indexOf("intro") > -1)
  let startTransition = RenderUtils.randomElement(transitions, `x-${textLen}`)

  let bgMusicPath = staticFile(bgMusic || '')
  return (
    <AbsoluteFill style={{
      background: 'white'
    }}>
      {bgMusic && (
        <Audio
          loop
          volume={(f) =>
      bgMusicVolume !== undefined
        ? bgMusicVolume
        : interpolate(
          f,
          [0, bgMusicDuration * fps],
          [0.05, 0.01],
          { extrapolateLeft: "clamp" }
        )
    }
          src={bgMusicPath}
        />
      )}

      <TransitionSeries>
        {
          transcripts.map((scriptItem: Transcript, i) => {
            let { durationInSeconds } = scriptItem
            let durationInFrames = meta.fps * durationInSeconds

            let isGraph = scriptItem.bubble.type == 'graph'

            return (
              <>
                <TransitionSeries.Sequence durationInFrames={durationInFrames}>
                  {isGraph ?
                    <AnimGraphScene
                      script={props}
                      item={scriptItem} />
                    :
                    <IGSimpleScene
                      script={props}
                      item={scriptItem}
                      SubtitleComponent={({ group, word }) => {
                        return (
                          <GeneralSubtitles position='end' group={group} word={word} />
                        )
                      }} />
                  }
                </TransitionSeries.Sequence>
              </>
            )
          })
        }
      </TransitionSeries>

      <div
        style={{
          width: '100%',
          height: '100%'
        }}
      ><VideoSplash file={startTransition.file} /></div>

    </AbsoluteFill >
  );
};