code fixes
Browse files
Remotion-app/src/HelloWorld/AudioStream.jsx
CHANGED
@@ -2,10 +2,11 @@ import {Series} from 'remotion';
|
|
2 |
import React from 'react';
|
3 |
import {staticFile, useVideoConfig, Audio} from 'remotion';
|
4 |
import audioSequences from './Assets/AudioSequences.json';
|
|
|
5 |
export default function AudioStream() {
|
6 |
const {fps} = useVideoConfig();
|
7 |
return (
|
8 |
-
<
|
9 |
style={{
|
10 |
color: 'white',
|
11 |
position: 'absolute',
|
@@ -14,14 +15,19 @@ export default function AudioStream() {
|
|
14 |
>
|
15 |
{audioSequences.map((entry, index) => {
|
16 |
return (
|
17 |
-
<
|
|
|
18 |
from={fps * entry.start}
|
19 |
durationInFrames={fps * (entry.end - entry.start)}
|
20 |
>
|
21 |
-
<Audio
|
22 |
-
|
|
|
|
|
|
|
|
|
23 |
);
|
24 |
})}
|
25 |
-
</
|
26 |
);
|
27 |
}
|
|
|
2 |
import React from 'react';
|
3 |
import {staticFile, useVideoConfig, Audio} from 'remotion';
|
4 |
import audioSequences from './Assets/AudioSequences.json';
|
5 |
+
import {TransitionSeries} from '@remotion/transitions';
|
6 |
export default function AudioStream() {
|
7 |
const {fps} = useVideoConfig();
|
8 |
return (
|
9 |
+
<TransitionSeries
|
10 |
style={{
|
11 |
color: 'white',
|
12 |
position: 'absolute',
|
|
|
15 |
>
|
16 |
{audioSequences.map((entry, index) => {
|
17 |
return (
|
18 |
+
<TransitionSeries.Sequence
|
19 |
+
key={index}
|
20 |
from={fps * entry.start}
|
21 |
durationInFrames={fps * (entry.end - entry.start)}
|
22 |
>
|
23 |
+
<Audio
|
24 |
+
endAt={entry.props.endAt}
|
25 |
+
startFrom={entry.props.startFrom}
|
26 |
+
src={staticFile(entry.name)}
|
27 |
+
/>
|
28 |
+
</TransitionSeries.Sequence>
|
29 |
);
|
30 |
})}
|
31 |
+
</TransitionSeries>
|
32 |
);
|
33 |
}
|
Remotion-app/src/HelloWorld/TextStream.jsx
CHANGED
@@ -40,16 +40,15 @@ export const TextStream = () => {
|
|
40 |
<TransitionSeries>
|
41 |
{transcriptData.map((entry, index) => {
|
42 |
return (
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
</>
|
53 |
);
|
54 |
})}
|
55 |
</TransitionSeries>
|
|
|
40 |
<TransitionSeries>
|
41 |
{transcriptData.map((entry, index) => {
|
42 |
return (
|
43 |
+
<TransitionSeries.Sequence
|
44 |
+
key={index}
|
45 |
+
from={entry.start * fps}
|
46 |
+
durationInFrames={fps * (entry.end - entry.start)}
|
47 |
+
>
|
48 |
+
<Letter index={index} color="#0b84f3">
|
49 |
+
{entry.text}
|
50 |
+
</Letter>
|
51 |
+
</TransitionSeries.Sequence>
|
|
|
52 |
);
|
53 |
})}
|
54 |
</TransitionSeries>
|
Remotion-app/src/HelloWorld/VideoStream.jsx
CHANGED
@@ -2,10 +2,11 @@ import {Series} from 'remotion';
|
|
2 |
import React from 'react';
|
3 |
import {Video, staticFile, useVideoConfig} from 'remotion';
|
4 |
import videoSequences from './Assets/VideoSequences.json';
|
|
|
5 |
export default function VideoStream() {
|
6 |
const {fps} = useVideoConfig();
|
7 |
return (
|
8 |
-
<
|
9 |
style={{
|
10 |
color: 'white',
|
11 |
position: 'absolute',
|
@@ -14,14 +15,15 @@ export default function VideoStream() {
|
|
14 |
>
|
15 |
{videoSequences.map((entry, index) => {
|
16 |
return (
|
17 |
-
<
|
|
|
18 |
from={fps * entry.start}
|
19 |
durationInFrames={fps * (entry.end - entry.start)}
|
20 |
>
|
21 |
<Video {...entry.props} src={staticFile(entry.name)} />
|
22 |
-
</
|
23 |
);
|
24 |
})}
|
25 |
-
</
|
26 |
);
|
27 |
}
|
|
|
2 |
import React from 'react';
|
3 |
import {Video, staticFile, useVideoConfig} from 'remotion';
|
4 |
import videoSequences from './Assets/VideoSequences.json';
|
5 |
+
import {TransitionSeries} from '@remotion/transitions';
|
6 |
export default function VideoStream() {
|
7 |
const {fps} = useVideoConfig();
|
8 |
return (
|
9 |
+
<TransitionSeries
|
10 |
style={{
|
11 |
color: 'white',
|
12 |
position: 'absolute',
|
|
|
15 |
>
|
16 |
{videoSequences.map((entry, index) => {
|
17 |
return (
|
18 |
+
<TransitionSeries.Sequence
|
19 |
+
key={index}
|
20 |
from={fps * entry.start}
|
21 |
durationInFrames={fps * (entry.end - entry.start)}
|
22 |
>
|
23 |
<Video {...entry.props} src={staticFile(entry.name)} />
|
24 |
+
</TransitionSeries.Sequence>
|
25 |
);
|
26 |
})}
|
27 |
+
</TransitionSeries>
|
28 |
);
|
29 |
}
|