Update remotion/render.mjs

remotion/render.mjs

@@ -1,53 +1,60 @@
 import { bundle } from '@remotion/bundler';
 import { renderMedia, selectComposition } from '@remotion/renderer';
 import { createRequire } from 'node:module';
-const require = createRequire(import.meta.url);
 
-const bundled = await bundle({
-    entryPoint: require.resolve('./src/index.tsx'),
-});
+const require = createRequire(import.meta.url);
 
 const inputProps = {
-    script: {
-        title: "Sample Video",
-        targetAudience: "General",
-        summary: "Sample render",
-        scenes: [
-            { title: "Scene 1", duration: 2 },
-            { title: "Scene 2", duration: 3 },
-        ],
-        config: {
-            visualTheme: "STOMP",
-            primaryColor: "#FFFFFF",
-            musicTrack: "STOMP",
-            aspectRatio: "16:9"
-        }
+  script: {
+    title: "Sample Video",
+    targetAudience: "General",
+    summary: "Sample render",
+    scenes: [
+      { title: "Hello World", duration: 3, voiceover: "Welcome to Remotion!", codeSnippet: "DemoComponent" },
+      { title: "Second Scene", duration: 2, voiceover: "This is scene two." }
+    ],
+    config: {
+      visualTheme: "STOMP",
+      primaryColor: "#FFFFFF",
+      musicTrack: "STOMP",
+      aspectRatio: "16:9"
     }
+  }
 };
 
-console.log('=== VIDEO SCRIPT PASSED TO COMPOSITION ===', inputProps);
+console.log('Bundling your Remotion project...');
+
+const bundled = await bundle({
+  entryPoint: require.resolve('./src/index.tsx'), // your main TSX
+  webpackOverride: (config) => config,
+  onBrowserDownload: (progress) => {
+    if (progress && typeof progress.percent === 'number') {
+      console.log(`Chrome download progress: ${progress.percent.toFixed(2)}%`);
+    } else {
+      console.log('Chrome download progress: N/A');
+    }
+  },
+});
+
+console.log('Selecting composition...');
 
 const composition = await selectComposition({
-    serveUrl: bundled,
-    id: 'VideoComposition', // MUST MATCH index.tsx
-    inputProps,
-    onBrowserDownload: (progress) => {
-        console.log(`Chrome download progress: ${progress.percent.toFixed(2)}%`);
-    },
+  serveUrl: bundled,
+  id: 'VideoComposition', // must match your index.tsx Composition id
+  inputProps,
 });
 
 console.log('Starting render...');
 
 await renderMedia({
-    codec: 'h264',
-    composition,
-    serveUrl: bundled,
-    outputLocation: `out/${composition.id}.mp4`,
-    chromiumOptions: {
-        enableMultiProcessOnLinux: true,
-        args: ['--no-sandbox', '--disable-setuid-sandbox'],
-    },
-    inputProps,
+  codec: 'h264',
+  composition,
+  serveUrl: bundled,
+  outputLocation: `out/${composition.id}.mp4`,
+  chromiumOptions: {
+    enableMultiProcessOnLinux: true,
+  },
+  inputProps,
 });
 
-console.log(`Rendered composition ${composition.id}`);
+console.log(`Rendered composition ${composition.id} successfully!`);