remotion: Fix static files with space in studio

packages/core/src/input-props-serialization.ts

@@ -1,7 +1,6 @@
 // Must keep this file in sync with the one in packages/lambda/src/shared/serialize-props.ts!
 
 import {getRemotionEnvironment} from './get-remotion-environment.js';
-import {staticFile} from './static-file.js';
 
 export type SerializedJSONWithCustomFields = {
 	serializedString: string;
@@ -79,26 +78,30 @@ export const deserializeJSONWithCustomFields = <T = Record<string, unknown>>(
 		}
 
 		if (typeof value === 'string' && value.startsWith(FILE_TOKEN)) {
-			return staticFile(value.replace(FILE_TOKEN, ''));
+			return `${window.remotion_staticBase}/${value.replace(FILE_TOKEN, '')}`;
 		}
 
 		return value;
 	});
 };
 
+export const serializeThenDeserialize = (props: Record<string, unknown>) => {
+	return deserializeJSONWithCustomFields(
+		serializeJSONWithDate({
+			data: props,
+			indent: 2,
+			staticBase: window.remotion_staticBase,
+		}).serializedString,
+	);
+};
+
 export const serializeThenDeserializeInStudio = (
 	props: Record<string, unknown>,
 ) => {
 	// Serializing once in the Studio, to catch potential serialization errors before
 	// you only get them during rendering
 	if (getRemotionEnvironment().isStudio) {
-		return deserializeJSONWithCustomFields(
-			serializeJSONWithDate({
-				data: props,
-				indent: 2,
-				staticBase: window.remotion_staticBase,
-			}).serializedString,
-		);
+		return serializeThenDeserialize(props);
 	}
 
 	return props;

packages/core/src/test/static-file-safe-uri.test.ts

@@ -1,4 +1,5 @@
 import {expect, test} from 'bun:test';
+import {serializeThenDeserialize} from '../input-props-serialization.js';
 import {staticFile} from '../static-file.js';
 
 test('staticFile() should convert # into %23', () => {
@@ -34,3 +35,22 @@ test('problematic character at the beginning should be encoded correctly', () =>
 	const problematicStart = '#test/example';
 	expect(staticFile(problematicStart)).toBe('/static-abcdef/%23test/example');
 });
+
+test('should handle this properly', () => {
+	expect(
+		staticFile('mediaparsernextsteps/Screenshot 2025-01-31 at 08.13.54.png'),
+	).toBe(
+		'/static-abcdef/mediaparsernextsteps/Screenshot%202025-01-31%20at%2008.13.54.png',
+	);
+});
+
+test('should keep spaces', () => {
+	const hi = serializeThenDeserialize({
+		file: staticFile(
+			'mediaparsernextsteps/Screenshot 2025-01-31 at 08.13.54.png',
+		),
+	});
+	expect(hi.file).toBe(
+		'/static-abcdef/mediaparsernextsteps/Screenshot%202025-01-31%20at%2008.13.54.png',
+	);
+});