@remotion/web-renderer: release completed render results from queues

packages/web-renderer/src/render-media-on-web.tsx

@@ -854,7 +854,7 @@ export const renderMediaOnWeb = <
 	const codec =
 		options.videoCodec ?? getDefaultVideoCodecForContainer(container) ?? null;
 
-	onlyOneMediaRenderAtATimeQueue.ref = onlyOneMediaRenderAtATimeQueue.ref
+	const render = onlyOneMediaRenderAtATimeQueue.ref
 		.catch(() => Promise.resolve())
 		.then(() =>
 			internalRenderMediaOnWeb<Schema, Props>({
@@ -890,5 +890,11 @@ export const renderMediaOnWeb = <
 			}),
 		);
 
-	return onlyOneMediaRenderAtATimeQueue.ref as Promise<RenderMediaOnWebResult>;
+	// The queue only owns completion; callers own the result or rejection reason.
+	onlyOneMediaRenderAtATimeQueue.ref = render.then(
+		() => {},
+		() => {},
+	);
+
+	return render;
 };

packages/web-renderer/src/render-operations-queue.ts

@@ -1,7 +1,7 @@
 export const onlyOneMediaRenderAtATimeQueue = {
-	ref: Promise.resolve() as Promise<unknown>,
+	ref: Promise.resolve(),
 };
 
 export const onlyOneStillRenderAtATimeQueue = {
-	ref: Promise.resolve() as Promise<unknown>,
+	ref: Promise.resolve(),
 };

packages/web-renderer/src/render-still-on-web.tsx

@@ -291,7 +291,7 @@ const renderImagesOnWeb = <
 	options: RenderFramesOnWebOptions<Schema, Props>,
 	apiName: 'renderStillOnWeb' | 'renderFramesOnWeb',
 ): Promise<RenderStillOnWebResult[]> => {
-	onlyOneStillRenderAtATimeQueue.ref = onlyOneStillRenderAtATimeQueue.ref
+	const render = onlyOneStillRenderAtATimeQueue.ref
 		.catch(() => Promise.resolve())
 		.then(() =>
 			internalRenderImagesOnWeb<Schema, Props>(
@@ -314,9 +314,13 @@ const renderImagesOnWeb = <
 			),
 		);
 
-	return onlyOneStillRenderAtATimeQueue.ref as Promise<
-		RenderStillOnWebResult[]
-	>;
+	// The queue only owns completion; callers own the result or rejection reason.
+	onlyOneStillRenderAtATimeQueue.ref = render.then(
+		() => {},
+		() => {},
+	);
+
+	return render;
 };
 
 export const renderStillOnWeb = <

packages/web-renderer/src/test/cancel-render.test.tsx

@@ -2,6 +2,10 @@ import {useEffect, useState} from 'react';
 import {useDelayRender} from 'remotion';
 import {expect, test} from 'vitest';
 import {renderMediaOnWeb} from '../render-media-on-web';
+import {
+	onlyOneMediaRenderAtATimeQueue,
+	onlyOneStillRenderAtATimeQueue,
+} from '../render-operations-queue';
 import {renderStillOnWeb} from '../render-still-on-web';
 import '../symbol-dispose';
 
@@ -52,6 +56,8 @@ test('preserves the original cancellation error and its causes', async () => {
 		}),
 	).rejects.toBe(error);
 
+	await expect(onlyOneStillRenderAtATimeQueue.ref).resolves.toBeUndefined();
+
 	await expect(
 		renderMediaOnWeb({
 			licenseKey: 'free-license',
@@ -60,4 +66,6 @@ test('preserves the original cancellation error and its causes', async () => {
 			container: 'webm',
 		}),
 	).rejects.toBe(error);
+
+	await expect(onlyOneMediaRenderAtATimeQueue.ref).resolves.toBeUndefined();
 });

packages/web-renderer/src/test/render-queue-result.test.tsx

@@ -0,0 +1,60 @@
+import {expect, test} from 'vitest';
+import {renderMediaOnWeb} from '../render-media-on-web';
+import {
+	onlyOneMediaRenderAtATimeQueue,
+	onlyOneStillRenderAtATimeQueue,
+} from '../render-operations-queue';
+import {renderStillOnWeb} from '../render-still-on-web';
+import '../symbol-dispose';
+
+const composition = {
+	component: () => <div style={{width: 32, height: 32, background: 'red'}} />,
+	id: 'queue-result',
+	width: 32,
+	height: 32,
+	fps: 30,
+	durationInFrames: 1,
+};
+
+test.each(['still', 'media'] as const)(
+	'%s queue does not keep completed results and leaves caller results usable',
+	async (kind) => {
+		const queue =
+			kind === 'still'
+				? onlyOneStillRenderAtATimeQueue
+				: onlyOneMediaRenderAtATimeQueue;
+		const render = () =>
+			kind === 'still'
+				? renderStillOnWeb({
+						composition,
+						inputProps: {},
+						frame: 0,
+						licenseKey: 'free-license',
+					})
+				: renderMediaOnWeb({
+						composition,
+						inputProps: {},
+						container: 'webm',
+						videoCodec: 'vp8',
+						muted: true,
+						outputTarget: 'arraybuffer',
+						licenseKey: 'free-license',
+					});
+
+		const first = render();
+		const second = render();
+		const [firstResult, secondResult] = await Promise.all([first, second]);
+
+		await expect(queue.ref).resolves.toBeUndefined();
+		for (const result of [firstResult, secondResult]) {
+			if ('canvas' in result) {
+				const canvas = await result.canvas();
+				expect(canvas.width).toBe(32);
+				expect(canvas.height).toBe(32);
+				expect((await result.blob()).size).toBeGreaterThan(0);
+			} else {
+				expect((await result.getBlob()).size).toBeGreaterThan(0);
+			}
+		}
+	},
+);