File size: 1,783 Bytes
e2c597b 4d8335f 8a4825d 84efe74 313654e 84efe74 313654e 0c84f6a 84efe74 313654e 8a4825d 84efe74 8a4825d 7191cf4 1c1e321 e2c597b 1c1e321 0caf896 4d8335f e2c597b 2307bdf 1c1e321 4d8335f 0caf896 948d87b 1ecc9f0 948d87b 437891f 4d8335f 1c1e321 4d8335f 0caf896 1c1e321 7191cf4 1c1e321 5c184d6 437891f 5c184d6 7191cf4 |
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 |
import React, {useMemo} from 'react';
import {useVideoConfig, AbsoluteFill, TransitionSeries, Series} from 'remotion';
import * as Fonts from '@remotion/google-fonts';
import transcriptData from './Assets/TextSequences.json';
import Constants from './Assets/Constants.json';
const defaultText = {
fontFamily: 'Luckiest Guy',
fontSize: 120,
textAlign: 'center',
textShadow:
'-10px -10px 0 #000, 0 -10px 0 #000, 10px -10px 0 #000, 10px 0 0 #000, 10px 10px 0 #000, 0 10px 0 #000, -10px 10px 0 #000, -10px 0 0 #000',
position: 'fixed',
fontWeight: 'bolder',
color: 'yellow',
bottom: '30vh',
height: 'fit-content',
width: '100%',
};
const subtitle = Constants?.text
? {
...defaultText,
...Constants.text,
}
: defaultText;
Fonts.getAvailableFonts()
.filter((font) => {
return font.fontFamily === subtitle.fontFamily;
})[0]
.load()
.then((font) => font.loadFont());
const TextStream = React.memo(() => {
const {fps} = useVideoConfig();
const memoizedTranscriptData = useMemo(() => {
return transcriptData;
}, []);
return (
<AbsoluteFill
style={{
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Series>
{memoizedTranscriptData.map((entry, index) => {
const delta = ((entry.end - entry.start) / 30)<1 ? 2 : 0;
return (
<Series.Sequence
style={subtitle}
key={index}
from={(entry.start + delta) * fps}
durationInFrames={fps * (entry.end - entry.start + delta)}
>
<Letter style={subtitle}>{entry.text}</Letter>
</Series.Sequence>
);
})}
</Series>
</AbsoluteFill>
);
});
const Letter = React.memo(({children, style}) => {
return <div style={style}>{children}</div>;
});
export default TextStream;
|