@remotion/renderer: Internal experiment allowing frames to be rendered in a different order

packages/cli/src/render-flows/render.ts

@@ -301,7 +301,7 @@ export const renderVideoFlow = async ({
 
 	const puppeteerInstance = await browserInstance;
 	addCleanupCallback(`Closing browser instance`, () =>
-		puppeteerInstance.close(false, logLevel, indent),
+		puppeteerInstance.close({silent: false}),
 	);
 
 	const resolvedConcurrency = RenderInternals.resolveConcurrency(concurrency);

packages/cli/src/render-flows/still.ts

@@ -218,7 +218,7 @@ export const renderStillFlow = async ({
 
 	const puppeteerInstance = await browserInstance;
 	addCleanupCallback(`Close browser`, () =>
-		puppeteerInstance.close(false, logLevel, indent),
+		puppeteerInstance.close({silent: false}),
 	);
 
 	const {compositionId, config, reason, argsAfterComposition} =

packages/it-tests/package.json

@@ -9,6 +9,7 @@
 		"test": "bun test src/rendering --run",
 		"testssr": "bun test src/ssr src/bundle src/templates src/monorepo --timeout 40000",
 		"testlambda": "exit 0",
+		"lint": "tsc -d",
 		"formatting": "prettier src --check"
 	},
 	"private": true,

packages/it-tests/props.json

@@ -0,0 +1 @@
+{"flag":true}

packages/it-tests/src/bundle/bundle-studio.test.ts

@@ -6,7 +6,14 @@ import path from 'path';
 test('Bundle studio', async () => {
 	const browser = openBrowser('chrome');
 
-	const tab = await (await browser).newPage(() => null, 'info', false);
+	const tab = await (
+		await browser
+	).newPage({
+		context: () => null,
+		logLevel: 'info',
+		indent: false,
+		pageIndex: 0,
+	});
 	const folder = path.join(process.cwd(), '..', 'example', 'build');
 	const indexHtmlExists = existsSync(path.join(folder, 'index.html'));
 	if (!indexHtmlExists) {
@@ -42,6 +49,6 @@ test('Bundle studio', async () => {
 	});
 	expect(result.toString()).toBeGreaterThan(1);
 
-	await (await browser).close(false, 'info', false);
+	await (await browser).close({silent: false});
 	await close();
 });

packages/it-tests/src/monorepo/go-package.test.ts

@@ -76,6 +76,7 @@ test('Go package should create the same payload as normal Lambda package', async
 		metadata: {
 			Author: 'Remotion',
 		},
+		apiKey: null,
 	});
 
 	expect(removeUndefined(parsed)).toEqual(removeUndefined(nativeVersion));

packages/it-tests/src/monorepo/php-package.test.ts

@@ -123,6 +123,7 @@ class Semantic
 			metadata: {
 				Author: 'Remotion',
 			},
+			apiKey: null,
 		});
 		const jsonOutput = toParse.substring(0, toParse.lastIndexOf('}') + 1);
 		const parsedJson = JSON.parse(jsonOutput);

packages/it-tests/src/monorepo/python-package.test.ts

@@ -100,6 +100,7 @@ test('Python package should create the same renderMedia payload as normal Lambda
 		metadata: {
 			Author: 'Lunar',
 		},
+		apiKey: null,
 	});
 	const jsonOutput = toParse.substring(0, toParse.lastIndexOf('}') + 1);
 	const parsedJson = JSON.parse(jsonOutput);
@@ -181,6 +182,7 @@ test('Python package should create the same renderStill payload as normal Lambda
 		dumpBrowserLogs: false,
 		quality: undefined,
 		forcePathStyle: false,
+		apiKey: null,
 	});
 	const jsonOutput = toParse.substring(0, toParse.lastIndexOf('}') + 1);
 	const {streamed: _, ...parsedJson} = JSON.parse(jsonOutput);

packages/it-tests/src/rendering/rendering.test.ts

@@ -456,6 +456,7 @@ test("Should succeed to render an audio file that doesn't have any audio inputs"
 
 test('Should render a still that uses the staticFile() API and should apply props', async () => {
 	const out = outputPath.replace('.mp4', '.png');
+	await Bun.write('props.json', JSON.stringify({flag: true}));
 	const task = await execa(
 		'pnpm',
 		[
@@ -470,6 +471,7 @@ test('Should render a still that uses the staticFile() API and should apply prop
 		],
 		{
 			cwd: path.join(process.cwd(), '..', 'example'),
+			// @ts-expect-error staticfile
 			env: {
 				REMOTION_FLAG: 'hi',
 			},

packages/it-tests/src/size-benchmark/run-benchmark.ts

@@ -60,6 +60,9 @@ export const runBenchmark = async ({
 	if (!fps) {
 		throw new Error('Could not get fps of video');
 	}
+	if (!dimensions) {
+		throw new Error('Could not get fps of video');
+	}
 
 	const output = `${os.tmpdir()}/output.mp4`;
 

packages/it-tests/src/ssr/render-frames.test.ts

@@ -69,5 +69,5 @@ test('Legacy SSR way of rendering videos should still work', async () => {
 	expect(probe.stderr).toMatch(/Video: h264/);
 
 	RenderInternals.deleteDirectory(framesDir);
-	await puppeteerInstance.close(false, 'info', false);
+	await puppeteerInstance.close({silent: false});
 });

packages/it-tests/src/ssr/render-media.test.ts

@@ -34,7 +34,7 @@ test('Render video with browser instance open', async () => {
 		puppeteerInstance,
 		metadata: {Author: 'Lunar'},
 	});
-	await puppeteerInstance.close(false, 'info', false);
+	await puppeteerInstance.close({silent: false});
 	expect(existsSync(outPath)).toBe(true);
 });
 
@@ -99,7 +99,7 @@ test('should fail on invalid CRF', async () => {
 		);
 	}
 
-	await browserInstance.close(false, 'info', false);
+	await browserInstance.close({silent: false});
 });
 
 test('Render video to a buffer', async () => {

packages/it-tests/src/ssr/render-still.test.ts

@@ -46,7 +46,7 @@ test('Render video with browser instance open', async () => {
 		puppeteerInstance,
 	});
 	expect(buffer).toBe(null);
-	await puppeteerInstance.close(false, 'info', false);
+	await puppeteerInstance.close({silent: false});
 });
 
 test('Render still with browser instance not open and legacy webpack config', async () => {

packages/renderer/src/browser-instances.ts

@@ -5,7 +5,7 @@ const browserInstances: HeadlessBrowser[] = [];
 export const killAllBrowsers = async () => {
 	for (const browser of browserInstances) {
 		try {
-			await browser.close(true, 'info', false);
+			await browser.close({silent: true});
 		} catch {}
 	}
 };

packages/renderer/src/browser/Browser.ts

@@ -181,19 +181,31 @@ export class HeadlessBrowser extends EventEmitter {
 		}
 	}
 
-	newPage(
-		context: SourceMapGetter,
-		logLevel: LogLevel,
-		indent: boolean,
-	): Promise<Page> {
-		return this.#defaultContext.newPage(context, logLevel, indent);
+	newPage({
+		context,
+		logLevel,
+		indent,
+		pageIndex,
+	}: {
+		context: SourceMapGetter;
+		logLevel: LogLevel;
+		indent: boolean;
+		pageIndex: number;
+	}): Promise<Page> {
+		return this.#defaultContext.newPage({context, logLevel, indent, pageIndex});
 	}
 
-	async _createPageInContext(
-		context: SourceMapGetter,
-		logLevel: LogLevel,
-		indent: boolean,
-	): Promise<Page> {
+	async _createPageInContext({
+		context,
+		logLevel,
+		indent,
+		pageIndex,
+	}: {
+		context: SourceMapGetter;
+		logLevel: LogLevel;
+		indent: boolean;
+		pageIndex: number;
+	}): Promise<Page> {
 		const {
 			value: {targetId},
 		} = await this.connection.send('Target.createTarget', {
@@ -210,7 +222,12 @@ export class HeadlessBrowser extends EventEmitter {
 			throw new Error(`Failed to create target for page (id = ${targetId})`);
 		}
 
-		const page = await target.page(context, logLevel, indent);
+		const page = await target.page({
+			sourceMapGetter: context,
+			logLevel,
+			indent,
+			pageIndex,
+		});
 		if (!page) {
 			throw new Error(`Failed to create a page for context`);
 		}
@@ -256,10 +273,10 @@ export class HeadlessBrowser extends EventEmitter {
 		}
 	}
 
-	async pages(logLevel: LogLevel, indent: boolean): Promise<Page[]> {
+	async pages(): Promise<Page[]> {
 		const contextPages = await Promise.all(
 			this.browserContexts().map((context) => {
-				return context.pages(logLevel, indent);
+				return context.pages();
 			}),
 		);
 		// Flatten array.
@@ -268,13 +285,9 @@ export class HeadlessBrowser extends EventEmitter {
 		}, []);
 	}
 
-	async close(
-		silent: boolean,
-		logLevel: LogLevel,
-		indent: boolean,
-	): Promise<void> {
+	async close({silent}: {silent: boolean}): Promise<void> {
 		await this.runner.closeProcess();
-		(await this.pages(logLevel, indent)).forEach((page) => {
+		(await this.pages()).forEach((page) => {
 			page.emit(PageEmittedEvents.Disposed);
 			page.closed = true;
 		});
@@ -313,23 +326,34 @@ export class BrowserContext extends EventEmitter {
 		}, options);
 	}
 
-	async pages(logLevel: LogLevel, indent: boolean): Promise<Page[]> {
+	async pages(): Promise<Page[]> {
 		const pages = await Promise.all(
 			this.targets()
 				.filter((target) => target.type() === 'page')
-				.map((target) => target.page(() => null, logLevel, indent)),
+				.map((target) => target.expectPage()),
 		);
 		return pages.filter((page): page is Page => {
 			return Boolean(page);
 		});
 	}
 
-	newPage(
-		context: SourceMapGetter,
-		logLevel: LogLevel,
-		indent: boolean,
-	): Promise<Page> {
-		return this.#browser._createPageInContext(context, logLevel, indent);
+	newPage({
+		context,
+		logLevel,
+		indent,
+		pageIndex,
+	}: {
+		context: SourceMapGetter;
+		logLevel: LogLevel;
+		indent: boolean;
+		pageIndex: number;
+	}): Promise<Page> {
+		return this.#browser._createPageInContext({
+			context,
+			logLevel,
+			indent,
+			pageIndex,
+		});
 	}
 
 	browser(): HeadlessBrowser {

packages/renderer/src/browser/BrowserPage.ts

@@ -97,6 +97,7 @@ export class Page extends EventEmitter {
 		sourceMapGetter,
 		logLevel,
 		indent,
+		pageIndex,
 	}: {
 		client: CDPSession;
 		target: Target;
@@ -105,6 +106,7 @@ export class Page extends EventEmitter {
 		sourceMapGetter: SourceMapGetter;
 		logLevel: LogLevel;
 		indent: boolean;
+		pageIndex: number;
 	}): Promise<Page> {
 		const page = new Page({
 			client,
@@ -113,6 +115,7 @@ export class Page extends EventEmitter {
 			sourceMapGetter,
 			logLevel,
 			indent,
+			pageIndex,
 		});
 		await page.#initialize();
 		await page.setViewport(defaultViewport);
@@ -130,6 +133,7 @@ export class Page extends EventEmitter {
 	screenshotTaskQueue: TaskQueue;
 	sourceMapGetter: SourceMapGetter;
 	logLevel: LogLevel;
+	pageIndex: number;
 
 	constructor({
 		client,
@@ -138,13 +142,15 @@ export class Page extends EventEmitter {
 		sourceMapGetter,
 		logLevel,
 		indent,
+		pageIndex,
 	}: {
 		client: CDPSession;
 		target: Target;
 		browser: HeadlessBrowser;
 		sourceMapGetter: SourceMapGetter;
 		logLevel: LogLevel;
 		indent: boolean;
+		pageIndex: number;
 	}) {
 		super();
 		this.#client = client;
@@ -155,6 +161,7 @@ export class Page extends EventEmitter {
 		this.id = String(Math.random());
 		this.sourceMapGetter = sourceMapGetter;
 		this.logLevel = logLevel;
+		this.pageIndex = pageIndex;
 
 		client.on('Target.attachedToTarget', (event: AttachedToTargetEvent) => {
 			switch (event.targetInfo.type) {

packages/renderer/src/browser/Launcher.ts

@@ -46,7 +46,7 @@ export const launchChrome = async ({
 			{timeout},
 		);
 	} catch (error) {
-		await browser.close(false, logLevel, indent);
+		await browser.close({silent: false});
 		throw error;
 	}
 

packages/renderer/src/browser/Target.ts

@@ -93,11 +93,17 @@ export class Target {
 	/**
 	 * If the target is not of type `"page"` or `"background_page"`, returns `null`.
 	 */
-	async page(
-		sourceMapGetter: SourceMapGetter,
-		logLevel: LogLevel,
-		indent: boolean,
-	): Promise<Page | null> {
+	async page({
+		sourceMapGetter,
+		logLevel,
+		indent,
+		pageIndex,
+	}: {
+		sourceMapGetter: SourceMapGetter;
+		logLevel: LogLevel;
+		indent: boolean;
+		pageIndex: number;
+	}): Promise<Page | null> {
 		if (isPagetTarget(this.#targetInfo) && !this.#pagePromise) {
 			this.#pagePromise = this.#sessionFactory().then((client) => {
 				return Page._create({
@@ -108,13 +114,18 @@ export class Target {
 					sourceMapGetter,
 					logLevel,
 					indent,
+					pageIndex,
 				});
 			});
 		}
 
 		return (await this.#pagePromise) ?? null;
 	}
 
+	async expectPage(): Promise<Page | null> {
+		return (await this.#pagePromise) ?? null;
+	}
+
 	url(): string {
 		return this.#targetInfo.url;
 	}