dynamic assests and cutscences -- not tested

App/Editor/Schema.py

@@ -1,5 +1,6 @@
 from typing import List, Optional
 from pydantic import BaseModel, HttpUrl
+from pydantic import validator
 
 
 class LinkInfo(BaseModel):
@@ -7,8 +8,20 @@ class LinkInfo(BaseModel):
     link: HttpUrl
 
 
+class Assets(BaseModel):
+    type: str
+    sequence: List[dict]
+
+    @validator("type")
+    def valid_type(cls, v):
+        if v not in ["video", "audio", "text"]:
+            raise ValueError("Invalid asset type")
+        return v
+
+
 class EditorRequest(BaseModel):
     links: Optional[List[LinkInfo]]  # List of LinkInfo objects
+    assets: List[Assets]
     script: str
 
 

App/Worker.py

@@ -4,9 +4,11 @@ import uuid
 from urllib.parse import urlparse
 from App import celery_config, bot
 from typing import List
-from App.Editor.Schema import EditorRequest, LinkInfo
+from App.Editor.Schema import EditorRequest, LinkInfo, Assets
 from celery.signals import worker_process_init
 from asgiref.sync import async_to_sync
+import json
+import os
 
 celery = Celery()
 celery.config_from_object(celery_config)
@@ -21,6 +23,22 @@ def worker_process_init_handler(**kwargs):
     bot.start()
 
 
+@celery.task
+def create_json_file(assets: List[Assets], asset_dir: str):
+    for asset in assets:
+        filename = f"{asset.type}Sequences.json"
+        filename = filename.capitalize()
+        # Convert dictionary to JSON string
+        json_string = json.dumps(asset.sequence)
+
+        # Create directory if it doesn't exist
+        os.makedirs(asset_dir, exist_ok=True)
+
+        # Write JSON string to file
+        with open(os.path.join(asset_dir, filename), "w") as f:
+            f.write(json_string)
+
+
 def create_symlink(source_dir, target_dir, symlink_name):
     source_path = os.path.join(source_dir, symlink_name)
     target_path = os.path.join(target_dir, symlink_name)
@@ -83,10 +101,12 @@ def celery_task(video_task: EditorRequest):
     project_id = str(uuid.uuid4())
     temp_dir = f"/tmp/{project_id}"
     output_dir = f"/tmp/{project_id}/out/video.mp4"
+    assets_dir = os.path.join(temp_dir, "src/Assets")
 
     chain(
         copy_remotion_app.si(remotion_app_dir, temp_dir),
         install_dependencies.si(temp_dir),
+        create_json_file.si(video_task.assets, assets_dir),
         download_assets.si(video_task.links, temp_dir) if video_task.links else None,
         render_video.si(temp_dir, output_dir),
         cleanup_temp_directory.si(temp_dir, output_dir),

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

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

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

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

Remotion-app/src/HelloWorld/AudioStream.jsx

@@ -0,0 +1,27 @@
+import {Series} from 'remotion';
+import React from 'react';
+import {staticFile, useVideoConfig} from 'remotion';
+import audioSequences from './Assets/AudioSequences.json';
+export default function AudioStream() {
+	const {fps} = useVideoConfig();
+	return (
+		<Series
+			style={{
+				color: 'white',
+				position: 'absolute',
+				zIndex: 0,
+			}}
+		>
+			{audioSequences.map((entry, index) => {
+				return (
+					<Series.Sequence
+						from={fps * entry.start}
+						durationInFrames={fps * (entry.end - entry.start)}
+					>
+						<Audio {...entry.props} src={staticFile(entry.name)} />
+					</Series.Sequence>
+				);
+			})}
+		</Series>
+	);
+}

Remotion-app/src/HelloWorld/{Subtitle.jsx → TextStream.jsx}

@@ -1,24 +1,23 @@
 import React, {createElement} from 'react';
 import {useVideoConfig} from 'remotion';
-import {loadFont as loadMain} from '@remotion/google-fonts/Bungee';
-import transcriptData from './Transcription.json';
-const {fontFamily: fontFamily2} = loadMain();
+import * as Fonts from '@remotion/google-fonts';
+import transcriptData from './Assets/TextSequences.json';
+import {FONT_FAMILY} from './constants';
 import {TransitionSeries} from '@remotion/transitions';
 
 const codeStyle = (index) => {
 	return {
 		color: 'white',
 		position: 'absolute',
-		backgroundColor: 'red',
 		top: '50%',
-		width: '100%',
+		zIndex: 50,
 		transform: 'translate(-50%, -50%)',
 		left: '50%',
 	};
 };
 
 const subtitle = {
-	fontFamily: fontFamily2,
+	fontFamily: FONT_FAMILY,
 	fontSize: 120,
 	textAlign: 'center',
 	display: 'relative',
@@ -26,22 +25,31 @@ const subtitle = {
 	width: '100%',
 };
 
-export const Subtitle = () => {
+Fonts.getAvailableFonts()
+	.filter((font) => {
+		return font.fontFamily === FONT_FAMILY;
+	})[0]
+	.load()
+	.then((font) => font.loadFont());
+
+export const TextStream = () => {
 	const {fps} = useVideoConfig();
 
 	return (
-		<div style={subtitle}>
+		<div style={{...temp, ...{}}}>
 			<TransitionSeries>
 				{transcriptData.map((entry, index) => {
 					return (
-						<TransitionSeries.Sequence
-							from={entry.start * fps}
-							durationInFrames={fps * (entry.end - entry.start)}
-						>
-							<Letter index={index} color="#0b84f3">
-								{entry.text}
-							</Letter>
-						</TransitionSeries.Sequence>
+						<>
+							<TransitionSeries.Sequence
+								from={entry.start * fps}
+								durationInFrames={fps * (entry.end - entry.start)}
+							>
+								<Letter index={index} color="#0b84f3">
+									{entry.text}
+								</Letter>
+							</TransitionSeries.Sequence>
+						</>
 					);
 				})}
 			</TransitionSeries>

Remotion-app/src/HelloWorld/VideoStream.jsx

@@ -0,0 +1,27 @@
+import {Series} from 'remotion';
+import React from 'react';
+import {Video, staticFile, useVideoConfig} from 'remotion';
+import videoSequences from './Assets/VideoSequences.json';
+export default function VideoStream() {
+	const {fps} = useVideoConfig();
+	return (
+		<Series
+			style={{
+				color: 'white',
+				position: 'absolute',
+				zIndex: 0,
+			}}
+		>
+			{videoSequences.map((entry, index) => {
+				return (
+					<Series.Sequence
+						from={fps * entry.start}
+						durationInFrames={fps * (entry.end - entry.start)}
+					>
+						<Video {...entry.props} src={staticFile(entry.name)} />
+					</Series.Sequence>
+				);
+			})}
+		</Series>
+	);
+}

Remotion-app/src/HelloWorld/constants.js

@@ -3,4 +3,6 @@
 export const COLOR_1 = '#86A8E7';
 export const COLOR_2 = '#91EAE4';
 
-export const FONT_FAMILY = 'SF Pro Text, Helvetica, Arial, sans-serif';
+export const FONT_FAMILY = 'Bungee';
+export const FPS = 30;
+export const DURATION = 30 * FPS; // 30 seconds

Remotion-app/src/HelloWorld/index.jsx

@@ -1,48 +1,14 @@
-import {Subtitle} from './Subtitle';
-import {
-	spring,
-	AbsoluteFill,
-	useCurrentFrame,
-	useVideoConfig,
-	Audio,
-	staticFile,
-	Video,
-} from 'remotion';
-import {preloadAudio, resolveRedirect} from '@remotion/preload';
-
-export const HelloWorld = ({titleText, titleColor}) => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-	const scale = spring({
-		fps,
-		frame,
-		config: {
-			damping: 200,
-			mass: 0.5,
-			stiffness: 200,
-			overshootClamping: false,
-			restDisplacementThreshold: 0.01,
-			restSpeedThreshold: 0.01,
-		},
-	});
+import {AbsoluteFill} from 'remotion';
+import VideoStream from './VideoStream';
+import TextStream from './TextStream';
+import AudioStream from './AudioStream';
 
+export const HelloWorld = () => {
 	return (
 		<AbsoluteFill style={{position: 'relative', backgroundColor: 'black'}}>
-			<Audio
-				volume={0.15}
-				src={staticFile('background.mp3')}
-				// src={'https://yakova-streamer.hf.space/download/20707'}
-			/>
-
-			{/* <Video
-				src={
-					'https://player.vimeo.com/external/514185553.hd.mp4?s=33cb766901019185385a757eab89a9fd0d50d0c0&profile_id=172&oauth2_token_id=57447761'
-				}
-			/> */}
-			{/* <Audio src={'https://yakova-streamer.hf.space/download/20711'} /> */}
-			{/* <img src={''} style={{transform: `scale(${scale})`}} /> */}
-
-			<Subtitle />
+			<TextStream />
+			<VideoStream />
+			<AudioStream />
 		</AbsoluteFill>
 	);
 };

Remotion-app/src/Root.jsx

@@ -1,5 +1,6 @@
 import {Composition} from 'remotion';
 import {HelloWorld} from './HelloWorld';
+import {DURATION} from './HelloWorld/constants';
 
 export const RemotionRoot = () => {
 	return (
@@ -7,14 +8,10 @@ export const RemotionRoot = () => {
 			<Composition
 				id="HelloWorld"
 				component={HelloWorld}
-				durationInFrames={15000}
+				durationInFrames={DURATION}
 				fps={30}
 				height={1920}
 				width={1080}
-				defaultProps={{
-					titleText: 'Welcome to Remotion',
-					titleColor: 'black',
-				}}
 			/>
 		</>
 	);