File size: 1,636 Bytes
e2c597b 26455c2 8a4825d 84efe74 26455c2 313654e 84efe74 313654e 0c84f6a 84efe74 313654e 8a4825d 84efe74 8a4825d 7191cf4 1c1e321 e2c597b 1c1e321 0caf896 26455c2 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 |
import React, {useMemo} from 'react';
import {useVideoConfig, AbsoluteFill, Sequence} 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',
}}
>
{memoizedTranscriptData.map((entry, index) => {
return (
<Sequence
style={subtitle}
key={index}
from={entry.start * fps}
durationInFrames={fps * (entry.end - entry.start)}
>
<Letter style={subtitle}>{entry.text}</Letter>
</Sequence>
);
})}
</AbsoluteFill>
);
});
const Letter = React.memo(({children, style}) => {
return <div style={style}>{children}</div>;
});
export default TextStream;
|