background separate stream

App/Editor/Schema.py

@@ -14,7 +14,7 @@ class Assets(BaseModel):
 
     @validator("type")
     def valid_type(cls, v):
-        if v not in ["video", "audio", "text", "image", "sfx"]:
+        if v not in ["video", "audio", "text", "image", "sfx", "background"]:
             raise ValueError("Invalid asset type")
         return v
 

Remotion-app/src/HelloWorld/Assets/BackgroundSequences.json

@@ -0,0 +1 @@
+[]

Remotion-app/src/HelloWorld/BackGroundStream.jsx

@@ -0,0 +1,34 @@
+import {Series} from 'remotion';
+import React from 'react';
+import {staticFile, useVideoConfig, Audio} from 'remotion';
+import backgroundSequences from './Assets/BackgroundSequences.json';
+import {TransitionSeries} from '@remotion/transitions';
+export default function BackgroundStream() {
+	const {fps} = useVideoConfig();
+	return (
+		<TransitionSeries
+			style={{
+				color: 'white',
+				position: 'absolute',
+				zIndex: 0,
+			}}
+		>
+			{backgroundSequences.map((entry, index) => {
+				return (
+					<TransitionSeries.Sequence
+						key={index}
+						from={fps * entry.start}
+						durationInFrames={fps * (entry.end - entry.start)}
+					>
+						<Audio
+							volume={entry.props.volume}
+							endAt={entry.props.endAt}
+							startFrom={entry.props.startFrom}
+							src={staticFile(entry.name)}
+						/>
+					</TransitionSeries.Sequence>
+				);
+			})}
+		</TransitionSeries>
+	);
+}

Remotion-app/src/HelloWorld/index.jsx

@@ -5,10 +5,12 @@ import {TextStream} from './TextStream';
 import AudioStream from './AudioStream';
 import ImageStream from './ImageStream';
 import SfxStream from './SfxStream';
+import BackgroundStream from './BackGroundStream';
 
 export const HelloWorld = () => {
 	return (
 		<AbsoluteFill style={{position: 'relative', backgroundColor: 'black'}}>
+			<BackgroundStream />
 			<SfxStream />
 			<ImageStream />
 			<TextStream />