Update Remotion-app/src/HelloWorld/TextStream.jsx
Browse files
Remotion-app/src/HelloWorld/TextStream.jsx
CHANGED
@@ -1,9 +1,8 @@
|
|
1 |
import React, {useMemo} from 'react';
|
2 |
-
import {useVideoConfig, AbsoluteFill, TransitionSeries} from 'remotion';
|
3 |
import * as Fonts from '@remotion/google-fonts';
|
4 |
import transcriptData from './Assets/TextSequences.json';
|
5 |
import Constants from './Assets/Constants.json';
|
6 |
-
import {TransitionSeries} from '@remotion/transitions';
|
7 |
const defaultText = {
|
8 |
fontFamily: 'Luckiest Guy',
|
9 |
fontSize: 120,
|
@@ -45,21 +44,21 @@ const TextStream = React.memo(() => {
|
|
45 |
alignItems: 'center',
|
46 |
}}
|
47 |
>
|
48 |
-
<
|
49 |
{memoizedTranscriptData.map((entry, index) => {
|
50 |
const delta = ((entry.end - entry.start) / 30)<1 ? 2 : 0;
|
51 |
return (
|
52 |
-
<
|
53 |
style={subtitle}
|
54 |
key={index}
|
55 |
from={(entry.start + delta) * fps}
|
56 |
durationInFrames={fps * (entry.end - entry.start + delta)}
|
57 |
>
|
58 |
<Letter style={subtitle}>{entry.text}</Letter>
|
59 |
-
</
|
60 |
);
|
61 |
})}
|
62 |
-
</
|
63 |
</AbsoluteFill>
|
64 |
);
|
65 |
});
|
|
|
1 |
import React, {useMemo} from 'react';
|
2 |
+
import {useVideoConfig, AbsoluteFill, TransitionSeries, Series} from 'remotion';
|
3 |
import * as Fonts from '@remotion/google-fonts';
|
4 |
import transcriptData from './Assets/TextSequences.json';
|
5 |
import Constants from './Assets/Constants.json';
|
|
|
6 |
const defaultText = {
|
7 |
fontFamily: 'Luckiest Guy',
|
8 |
fontSize: 120,
|
|
|
44 |
alignItems: 'center',
|
45 |
}}
|
46 |
>
|
47 |
+
<Series>
|
48 |
{memoizedTranscriptData.map((entry, index) => {
|
49 |
const delta = ((entry.end - entry.start) / 30)<1 ? 2 : 0;
|
50 |
return (
|
51 |
+
<Series.Sequence
|
52 |
style={subtitle}
|
53 |
key={index}
|
54 |
from={(entry.start + delta) * fps}
|
55 |
durationInFrames={fps * (entry.end - entry.start + delta)}
|
56 |
>
|
57 |
<Letter style={subtitle}>{entry.text}</Letter>
|
58 |
+
</Series.Sequence>
|
59 |
);
|
60 |
})}
|
61 |
+
</Series>
|
62 |
</AbsoluteFill>
|
63 |
);
|
64 |
});
|