Spaces:
Running
Running
File size: 2,936 Bytes
721c5b3 721d060 721c5b3 b32a2e0 721c5b3 9e457ce 8bdc503 519e0f2 721c5b3 519e0f2 721c5b3 519e0f2 721c5b3 b32a2e0 721c5b3 b32a2e0 721d060 b32a2e0 721c5b3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | //@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 >
);
}; |