src/youtube/YoutubeVideoScene.tsx

import { useVideoConfig, staticFile, Series, Audio, AbsoluteFill, Video } from 'remotion'
import React, { } from 'react'
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 YoutubeVideoScene: React.FC = (
    props
) => {

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

    let children = []
    if (props?.intro?.file && props?.intro?.durationInFrames) {
        children.push(<Series.Sequence durationInFrames={props?.intro.durationInFrames}>
            <Video src={staticFile(props?.intro.file)} />
        </Series.Sequence>)
    }

    contents.forEach((content, i) => {
        if (i >= 1)
            children.push(getTransitionScene(content))
        children.push(getScene(content))
    });

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

}