Hugging Face's logo

Spaces:
azils3
/
Rectif
Paused

App Files Community
Mbonea commited on
Commit
948d87b
·
1 Parent(s): 2de6bc4

code fixes

Browse files
Files changed (3) hide show
  1. Remotion-app/src/HelloWorld/AudioStream.jsx +11 -5
  2. Remotion-app/src/HelloWorld/TextStream.jsx +9 -10
  3. Remotion-app/src/HelloWorld/VideoStream.jsx +6 -4
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
- <Series
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
- <Series.Sequence
 
18
  from={fps * entry.start}
19
  durationInFrames={fps * (entry.end - entry.start)}
20
  >
21
- <Audio {...entry.props} src={staticFile(entry.name)} />
22
- </Series.Sequence>
 
 
 
 
23
  );
24
  })}
25
- </Series>
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
- <TransitionSeries.Sequence
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
  })}
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
- <Series
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
- <Series.Sequence
 
18
  from={fps * entry.start}
19
  durationInFrames={fps * (entry.end - entry.start)}
20
  >
21
  <Video {...entry.props} src={staticFile(entry.name)} />
22
- </Series.Sequence>
23
  );
24
  })}
25
- </Series>
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
  }