|
import {Loop} from 'remotion'; |
|
import React from 'react'; |
|
import {Video, staticFile, useVideoConfig} from 'remotion'; |
|
import videoSequences from './Assets/VideoSequences.json'; |
|
import {TransitionSeries} from '@remotion/transitions'; |
|
|
|
const VideoStream = React.memo(() => { |
|
const {fps} = useVideoConfig(); |
|
return ( |
|
<TransitionSeries |
|
style={{ |
|
position: 'absolute', |
|
zIndex: 1, |
|
}} |
|
> |
|
{videoSequences.map((entry, index) => { |
|
return ( |
|
<TransitionSeries.Sequence |
|
key={index} |
|
from={fps * entry.start} |
|
durationInFrames={fps * (entry.end - entry.start)} |
|
> |
|
<VideoX entry={entry} /> |
|
</TransitionSeries.Sequence> |
|
); |
|
})} |
|
</TransitionSeries> |
|
); |
|
}); |
|
|
|
const VideoX = React.memo(({entry}) => { |
|
const {fps} = useVideoConfig(); |
|
const videoProps = { |
|
pauseWhenBuffering: true, |
|
startFrom: (fps * entry.props.startFrom) / 30, |
|
endAt: (fps * entry.props.endAt) / 30, |
|
volume: (fps * entry.props.volume) / 30, |
|
src: staticFile(entry.name), |
|
style: entry?.style ? entry.style : {}, |
|
playbackRate: entry.props.playbackRate ? entry.props.playbackRate : 1, |
|
}; |
|
|
|
return ( |
|
<> |
|
{entry?.loop ? <Video loop {...videoProps} /> : <Video {...videoProps} />} |
|
</> |
|
); |
|
}); |
|
|
|
export default VideoStream; |
|
|