Dynamic length and minimal customization

App/Editor/Schema.py

@@ -8,6 +8,13 @@ class LinkInfo(BaseModel):
     link: HttpUrl
 
 
+class Constants(BaseModel):
+    duration: Optional[int]
+    height: Optional[int]
+    width: Optional[int]
+    text: Optional[dict]
+
+
 class Assets(BaseModel):
     type: str
     sequence: List[dict]
@@ -22,6 +29,7 @@ class Assets(BaseModel):
 class EditorRequest(BaseModel):
     links: Optional[List[LinkInfo]]  # List of LinkInfo objects
     assets: List[Assets]
+    constants: Optional[Constants]
 
 
 class TaskInfo(BaseModel):

App/Worker.py

@@ -4,7 +4,7 @@ import uuid
 from urllib.parse import urlparse
 from App import celery_config, bot
 from typing import List
-from App.Editor.Schema import EditorRequest, LinkInfo, Assets
+from App.Editor.Schema import EditorRequest, LinkInfo, Assets, Constants
 from celery.signals import worker_process_init
 from asgiref.sync import async_to_sync
 import json
@@ -33,6 +33,14 @@ def create_json_file(assets: List[Assets], asset_dir: str):
             f.write(json_string)
 
 
+def create_constants_json_file(constants: Constants, asset_dir: str):
+    filename = "Constants.json"
+    json_string = json.dumps(constants.dict())
+    os.makedirs(asset_dir, exist_ok=True)
+    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)
@@ -114,6 +122,7 @@ async def celery_task(video_task: EditorRequest):
 
     copy_remotion_app(remotion_app_dir, temp_dir),
     install_dependencies(temp_dir),
+    create_constants_json_file(video_task.constants, assets_dir),
     create_json_file(video_task.assets, assets_dir),
     download_assets(video_task.links, temp_dir) if video_task.links else None,
     render_video(temp_dir, output_dir),

Remotion-app/src/HelloWorld/TextStream.jsx

@@ -2,26 +2,40 @@ import React, {createElement} from 'react';
 import {useVideoConfig, AbsoluteFill, TransitionSeries} from 'remotion';
 import * as Fonts from '@remotion/google-fonts';
 import transcriptData from './Assets/TextSequences.json';
-import {FONT_FAMILY} from './constants';
+import Constants from './Assets/Constants.json';
 import {TransitionSeries} from '@remotion/transitions';
 
-const subtitle = {
-	fontFamily: FONT_FAMILY,
-	fontSize: 150,
-	textAlign: 'center',
-	textShadow:
-		'-10px -10px 0 #000, 0   -10px 0 #000, 10px -10px 0 #000, 10px  0   0 #000, 10px  10px 0 #000, 0    10px 0 #000, -10px  10px 0 #000, -10px  0   0 #000',
-	position: 'fixed',
-	fontWeight: 'bolder',
-	color: 'yellow',
-	bottom: '30vh',
-	height: 'fit-content',
-	width: '100%',
-};
-
+const subtitle = Constants?.text
+	? {
+			...Constants.text,
+			fontFamily: 'Luckiest Guy',
+			fontSize: 120,
+			textAlign: 'center',
+			textShadow:
+				'-10px -10px 0 #000, 0   -10px 0 #000, 10px -10px 0 #000, 10px  0   0 #000, 10px  10px 0 #000, 0    10px 0 #000, -10px  10px 0 #000, -10px  0   0 #000',
+			position: 'fixed',
+			fontWeight: 'bolder',
+			color: 'yellow',
+			bottom: '30vh',
+			height: 'fit-content',
+			width: '100%',
+	  }
+	: {
+			fontFamily: 'Luckiest Guy',
+			fontSize: 120,
+			textAlign: 'center',
+			textShadow:
+				'-10px -10px 0 #000, 0   -10px 0 #000, 10px -10px 0 #000, 10px  0   0 #000, 10px  10px 0 #000, 0    10px 0 #000, -10px  10px 0 #000, -10px  0   0 #000',
+			position: 'fixed',
+			fontWeight: 'bolder',
+			color: 'yellow',
+			bottom: '30vh',
+			height: 'fit-content',
+			width: '100%',
+	  };
 Fonts.getAvailableFonts()
 	.filter((font) => {
-		return font.fontFamily === FONT_FAMILY;
+		return font.fontFamily === subtitle.fontFamily;
 	})[0]
 	.load()
 	.then((font) => font.loadFont());

Remotion-app/src/Root.jsx

@@ -1,6 +1,6 @@
 import {Composition} from 'remotion';
 import {HelloWorld} from './HelloWorld';
-import {DURATION} from './HelloWorld/constants';
+import Constants from './HelloWorld/Assets/Constants.json';
 import './index.css';
 export const RemotionRoot = () => {
 	return (
@@ -8,10 +8,10 @@ export const RemotionRoot = () => {
 			<Composition
 				id="HelloWorld"
 				component={HelloWorld}
-				durationInFrames={DURATION}
+				durationInFrames={Constants?.dutaion ? Constants.duration : 60 * 30}
 				fps={30}
-				height={1920}
-				width={1080}
+				height={Constants?.height ? Constants.height : 1920}
+				width={Constants?.width ? Constants.width : 1080}
 			/>
 		</>
 	);