src/youtube/SequentialScene.tsx

import { Composition, delayRender, continueRender, useVideoConfig, staticFile, Sequence, Series, Audio, AbsoluteFill, Video } from 'remotion'
import { getVideoMetadata } from "@remotion/media-utils";
import React, { useEffect, useState } from 'react'
import { SingleTextWithBG } from './SingleTextWithBG';
import { SectionTextWithBG } from './SectionTextWithBG';
import Transitions from '../../public/assets/transitions.json'
import { MediaBackground } from './MediaBackground';
import { loadFont as PermanentMarker } from "@remotion/google-fonts/PermanentMarker";

export type SequentialSceneData = {
    text: string,
    textColor?: string,
    bgImagePath?: string,
    duration: number,
    offset?: number,
    audioPath?: string,
    direction?: string
}


function getTransitionScene(scriptItem) {

    if (!scriptItem || scriptItem.title?.length == 0) {
        return <></>
    }
    const { fontFamily } = PermanentMarker()
    const { fps, width, height } = useVideoConfig();
    const transitionFile = scriptItem?.transition_file || Transitions[0].file
    const transitionDuration = (scriptItem?.transition_duration_sec || Transitions[0].durationSec) * fps
    const title = scriptItem.title
    return (
        <Series.Sequence
            durationInFrames={transitionDuration * 0.8} >

            <MediaBackground
                emphasisOnImage={true}
                direction={scriptItem.direction || 'left'}
                duration={transitionDuration}
                bgImagePaths={[{
                    path: transitionFile,
                    duration: transitionDuration
                }]}
                opacity={0.7}
                muted={false}
            >
                <div className='flex items-center justify-center h-screen' style={{ padding: 10, height: '100%', width: '100%' }} >

                    <p className={`flex items-center justify-center h-screen text-white text-9xl text-center p-8 font-bold rounded-lg text-black-stroke-large text-red-fill`} style={{
                        fontFamily: fontFamily
                    }}>{title}</p>

                </div>
            </MediaBackground>
        </Series.Sequence>
    )

}

function getScene(data) {

    if (!data) {
        return <></>
    }
    return (
        <Series.Sequence
            durationInFrames={data?.duration || 30} >

            <SectionTextWithBG
                {...data}
            />
        </Series.Sequence>
    )

}
export const SequentialScene: React.FC = (
    props
) => {

    const contents = props.contents
    const bgMusic = props.bgMusic
    const bgMusicVolume = props.bgMusicVolume

    return (
        <div>
            {bgMusic &&
                <AbsoluteFill>
                    <Audio allowAmplificationDuringRender loop volume={bgMusicVolume ?? 0.05} src={staticFile(bgMusic)} />
                </AbsoluteFill>
            }
            <Series>
                {
                    props?.intro?.file && (
                        <Series.Sequence durationInFrames={props?.intro.durationInFrames}>
                            <Video src={staticFile(props?.intro.file)} />
                        </Series.Sequence>
                    )
                }


                
{getScene(contents[0])}

{getTransitionScene(contents[1])}

{getScene(contents[1])}

{getTransitionScene(contents[2])}

{getScene(contents[2])}

{getTransitionScene(contents[3])}

{getScene(contents[3])}

{getTransitionScene(contents[4])}

{getScene(contents[4])}

{getTransitionScene(contents[5])}

{getScene(contents[5])}

{getTransitionScene(contents[6])}

{getScene(contents[6])}

{getTransitionScene(contents[7])}

{getScene(contents[7])}

{getTransitionScene(contents[8])}

{getScene(contents[8])}

{getTransitionScene(contents[9])}

{getScene(contents[9])}

{getTransitionScene(contents[10])}

{getScene(contents[10])}

{getTransitionScene(contents[11])}

{getScene(contents[11])}

{getTransitionScene(contents[12])}

{getScene(contents[12])}

{getTransitionScene(contents[13])}

{getScene(contents[13])}

{getTransitionScene(contents[14])}

{getScene(contents[14])}

{getTransitionScene(contents[15])}

{getScene(contents[15])}

{getTransitionScene(contents[16])}

{getScene(contents[16])}

{getTransitionScene(contents[17])}

{getScene(contents[17])}

{getTransitionScene(contents[18])}

{getScene(contents[18])}

{getTransitionScene(contents[19])}

{getScene(contents[19])}

{getTransitionScene(contents[20])}

{getScene(contents[20])}

{getTransitionScene(contents[21])}

{getScene(contents[21])}

{getTransitionScene(contents[22])}

{getScene(contents[22])}

{getTransitionScene(contents[23])}

{getScene(contents[23])}

{getTransitionScene(contents[24])}

{getScene(contents[24])}

{getTransitionScene(contents[25])}

{getScene(contents[25])}

{getTransitionScene(contents[26])}

{getScene(contents[26])}

{getTransitionScene(contents[27])}

{getScene(contents[27])}

{getTransitionScene(contents[28])}

{getScene(contents[28])}

{getTransitionScene(contents[29])}

{getScene(contents[29])}

{getTransitionScene(contents[30])}

{getScene(contents[30])}

{getTransitionScene(contents[31])}

{getScene(contents[31])}

{getTransitionScene(contents[32])}

{getScene(contents[32])}

{getTransitionScene(contents[33])}

{getScene(contents[33])}

{getTransitionScene(contents[34])}

{getScene(contents[34])}

{getTransitionScene(contents[35])}

{getScene(contents[35])}

{getTransitionScene(contents[36])}

{getScene(contents[36])}

{getTransitionScene(contents[37])}

{getScene(contents[37])}

{getTransitionScene(contents[38])}

{getScene(contents[38])}

{getTransitionScene(contents[39])}

{getScene(contents[39])}

{getTransitionScene(contents[40])}

{getScene(contents[40])}

{getTransitionScene(contents[41])}

{getScene(contents[41])}

{getTransitionScene(contents[42])}

{getScene(contents[42])}

{getTransitionScene(contents[43])}

{getScene(contents[43])}

{getTransitionScene(contents[44])}

{getScene(contents[44])}

{getTransitionScene(contents[45])}

{getScene(contents[45])}

{getTransitionScene(contents[46])}

{getScene(contents[46])}

{getTransitionScene(contents[47])}

{getScene(contents[47])}

{getTransitionScene(contents[48])}

{getScene(contents[48])}

{getTransitionScene(contents[49])}

{getScene(contents[49])}

{getTransitionScene(contents[50])}

{getScene(contents[50])}

{getTransitionScene(contents[51])}

{getScene(contents[51])}

{getTransitionScene(contents[52])}

{getScene(contents[52])}

{getTransitionScene(contents[53])}

{getScene(contents[53])}

{getTransitionScene(contents[54])}

{getScene(contents[54])}

{getTransitionScene(contents[55])}

{getScene(contents[55])}

{getTransitionScene(contents[56])}

{getScene(contents[56])}

{getTransitionScene(contents[57])}

{getScene(contents[57])}

{getTransitionScene(contents[58])}

{getScene(contents[58])}

{getTransitionScene(contents[59])}

{getScene(contents[59])}

{getTransitionScene(contents[60])}

{getScene(contents[60])}

{getTransitionScene(contents[61])}

{getScene(contents[61])}

{getTransitionScene(contents[62])}

{getScene(contents[62])}

{getTransitionScene(contents[63])}

{getScene(contents[63])}

{getTransitionScene(contents[64])}

{getScene(contents[64])}

{getTransitionScene(contents[65])}

{getScene(contents[65])}

{getTransitionScene(contents[66])}

{getScene(contents[66])}

{getTransitionScene(contents[67])}

{getScene(contents[67])}

{getTransitionScene(contents[68])}

{getScene(contents[68])}

{getTransitionScene(contents[69])}

{getScene(contents[69])}

{getTransitionScene(contents[70])}

{getScene(contents[70])}

{getTransitionScene(contents[71])}

{getScene(contents[71])}

{getTransitionScene(contents[72])}

{getScene(contents[72])}

{getTransitionScene(contents[73])}

{getScene(contents[73])}

{getTransitionScene(contents[74])}

{getScene(contents[74])}

{getTransitionScene(contents[75])}

{getScene(contents[75])}

{getTransitionScene(contents[76])}

{getScene(contents[76])}

{getTransitionScene(contents[77])}

{getScene(contents[77])}

{getTransitionScene(contents[78])}

{getScene(contents[78])}

{getTransitionScene(contents[79])}

{getScene(contents[79])}

{getTransitionScene(contents[80])}

{getScene(contents[80])}

{getTransitionScene(contents[81])}

{getScene(contents[81])}

{getTransitionScene(contents[82])}

{getScene(contents[82])}

{getTransitionScene(contents[83])}

{getScene(contents[83])}

{getTransitionScene(contents[84])}

{getScene(contents[84])}

{getTransitionScene(contents[85])}

{getScene(contents[85])}

{getTransitionScene(contents[86])}

{getScene(contents[86])}

{getTransitionScene(contents[87])}

{getScene(contents[87])}

{getTransitionScene(contents[88])}

{getScene(contents[88])}

{getTransitionScene(contents[89])}

{getScene(contents[89])}

{getTransitionScene(contents[90])}

{getScene(contents[90])}

{getTransitionScene(contents[91])}

{getScene(contents[91])}

{getTransitionScene(contents[92])}

{getScene(contents[92])}

{getTransitionScene(contents[93])}

{getScene(contents[93])}

{getTransitionScene(contents[94])}

{getScene(contents[94])}

{getTransitionScene(contents[95])}

{getScene(contents[95])}

{getTransitionScene(contents[96])}

{getScene(contents[96])}

{getTransitionScene(contents[97])}

{getScene(contents[97])}

{getTransitionScene(contents[98])}

{getScene(contents[98])}

{getTransitionScene(contents[99])}

{getScene(contents[99])}

{getTransitionScene(contents[100])}

{getScene(contents[100])}

{getTransitionScene(contents[101])}

{getScene(contents[101])}

{getTransitionScene(contents[102])}

{getScene(contents[102])}



                {
                    props?.outro?.file && (
                        <Series.Sequence durationInFrames={props?.outro.durationInFrames}>
                            <Video src={staticFile(props?.outro.file)} />
                        </Series.Sequence>
                    )
                }
            </Series>
        </div>
    )

}