File size: 2,860 Bytes
e2c597b 0c3bce3 8a4825d 0c3bce3 313654e 0c3bce3 313654e 84efe74 313654e 0c84f6a 84efe74 313654e 8a4825d 84efe74 8a4825d 7191cf4 1c1e321 0c3bce3 e2c597b 0c3bce3 1c1e321 0caf896 0c3bce3 0caf896 4d8335f 0c3bce3 1c1e321 4d8335f 0caf896 948d87b 0c3bce3 948d87b 0c3bce3 4d8335f 1c1e321 4d8335f 0caf896 1c1e321 7191cf4 1c1e321 0c3bce3 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import React, {useMemo} from 'react';
import {
useVideoConfig,
AbsoluteFill,
TransitionSeries,
Series,
useCurrentFrame,
} from 'remotion';
import * as Fonts from '@remotion/google-fonts';
import transcriptData from './Assets/TextSequences.json';
function chunkArray(array, chunkSize) {
const chunks = [];
for (let i = 0; i < array.length; i += chunkSize) {
chunks.push(array.slice(i, i + chunkSize));
}
return chunks;
}
import {TransitionSeries} from '@remotion/transitions';
const Constants = {};
const defaultText = {
fontFamily: 'Luckiest Guy',
fontSize: 80,
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 frame = useCurrentFrame();
const memoizedTranscriptData = useMemo(() => {
return transcriptData;
}, []);
const chunks = chunkArray(memoizedTranscriptData, 3);
return (
<AbsoluteFill
style={{
//backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Series>
{chunks.map((chunk, index) => {
let delta = 0;
if (chunk.length > 1) {
const end = chunk[chunk.length - 1].end;
const start = chunk[0].start;
delta = end - start;
} else {
delta = chunk[0].end - chunk[0].start;
}
return (
<Series.Sequence
style={subtitle}
key={index}
from={delta * fps}
durationInFrames={fps * delta}
>
<Letter frame={frame} style={subtitle}>
{chunk}
</Letter>
</Series.Sequence>
);
})}
</Series>
</AbsoluteFill>
);
});
const Letter = ({children, style, frame}) => {
const {fps} = useVideoConfig();
return (
<div style={style} className="flex space-x-5 justify-center flex-wrap">
{children.map((item, index) => {
const {text, start, end} = item;
console.log('text', text, start * fps, end * fps, frame);
return (
<div
key={index}
className=" rounded-3xl p-1"
style={{
backgroundColor: `${
frame >= start * fps && frame <= end * fps
? 'black'
: 'transparent'
}`,
// fontSize: style.fontSize,
// opacity: 1,
// transition: 'opacity 0.5s',
// transitionDelay: `${start}s`,
}}
>
{text}
</div>
);
})}
</div>
);
};
export default TextStream;
|