@remotion/studio: Reload config changes in Studio

packages/browser-studio/src/BrowserStudio.tsx

@@ -144,6 +144,14 @@ export const BrowserStudio: React.FC<BrowserStudioProps> = ({
 				renderQueue: [],
 				sampleRate: null,
 				staticHash: '',
+				studioRuntimeConfig: {
+					askAIEnabled: false,
+					bufferStateDelayInMilliseconds: null,
+					experimentalClientSideRenderingEnabled: false,
+					interactivityEnabled: true,
+					keyboardShortcutsEnabled: true,
+					maxTimelineTracks: null,
+				},
 				studioServerCommand: null,
 				title: 'Remotion Studio',
 			});

packages/bundler/src/bundle.ts

@@ -422,6 +422,15 @@ export const internalBundle = async (
 		mode: 'bundle',
 		audioLatencyHint: actualArgs.audioLatencyHint ?? 'playback',
 		sampleRate: actualArgs.renderDefaults?.sampleRate ?? 48000,
+		studioRuntimeConfig: {
+			askAIEnabled: actualArgs.askAIEnabled,
+			bufferStateDelayInMilliseconds: actualArgs.bufferStateDelayInMilliseconds,
+			experimentalClientSideRenderingEnabled:
+				actualArgs.experimentalClientSideRenderingEnabled,
+			interactivityEnabled: actualArgs.interactivityEnabled,
+			keyboardShortcutsEnabled: actualArgs.keyboardShortcutsEnabled,
+			maxTimelineTracks: actualArgs.maxTimelineTracks,
+		},
 	});
 
 	fs.writeFileSync(path.join(outDir, 'index.html'), html);

packages/cli/src/config/buffer-state-delay-in-milliseconds.ts

@@ -7,3 +7,7 @@ export const getBufferStateDelayInMilliseconds = () => {
 export const setBufferStateDelayInMilliseconds = (val: number | null) => {
 	value = val;
 };
+
+export const resetBufferStateDelayInMilliseconds = () => {
+	value = null;
+};

packages/cli/src/config/entry-point.ts

@@ -7,3 +7,7 @@ export const setEntryPoint = (ep: string) => {
 export const getEntryPoint = () => {
 	return entryPoint;
 };
+
+export const resetEntryPoint = () => {
+	entryPoint = null;
+};

packages/cli/src/config/ffmpeg-override.ts

@@ -1,6 +1,8 @@
 import type {FfmpegOverrideFn} from '@remotion/renderer';
 
-let ffmpegOverrideFn: FfmpegOverrideFn = ({args}) => args;
+const defaultFfmpegOverrideFn: FfmpegOverrideFn = ({args}) => args;
+
+let ffmpegOverrideFn: FfmpegOverrideFn = defaultFfmpegOverrideFn;
 
 export const setFfmpegOverrideFunction = (fn: FfmpegOverrideFn) => {
 	ffmpegOverrideFn = fn;
@@ -9,3 +11,7 @@ export const setFfmpegOverrideFunction = (fn: FfmpegOverrideFn) => {
 export const getFfmpegOverrideFunction = () => {
 	return ffmpegOverrideFn;
 };
+
+export const resetFfmpegOverrideFunction = () => {
+	ffmpegOverrideFn = defaultFfmpegOverrideFn;
+};

packages/cli/src/config/index.ts

@@ -17,33 +17,42 @@ import {StudioServerInternals} from '@remotion/studio-server';
 import {getBrowser} from './browser';
 import {
 	getBufferStateDelayInMilliseconds,
+	resetBufferStateDelayInMilliseconds,
 	setBufferStateDelayInMilliseconds,
 } from './buffer-state-delay-in-milliseconds';
-import {getConcurrency} from './concurrency';
 import type {Concurrency} from './concurrency';
-import {getEntryPoint, setEntryPoint} from './entry-point';
+import {getConcurrency} from './concurrency';
+import {getEntryPoint, resetEntryPoint, setEntryPoint} from './entry-point';
 import {getDotEnvLocation} from './env-file';
 import {
 	getFfmpegOverrideFunction,
+	resetFfmpegOverrideFunction,
 	setFfmpegOverrideFunction,
 } from './ffmpeg-override';
 import {getShouldOutputImageSequence} from './image-sequence';
-import {getMetadata, setMetadata} from './metadata';
-import {getOutputLocation} from './output-location';
-import {setOutputLocation} from './output-location';
+import {getMetadata, resetMetadata, setMetadata} from './metadata';
+import {
+	getOutputLocation,
+	resetOutputLocation,
+	setOutputLocation,
+} from './output-location';
+import type {WebpackOverrideFn} from './override-webpack';
 import {
 	defaultOverrideFunction,
 	getWebpackOverrideFn,
+	overrideWebpackConfig,
+	resetWebpackOverride,
 } from './override-webpack';
-import type {WebpackOverrideFn} from './override-webpack';
-import {overrideWebpackConfig} from './override-webpack';
 import {
 	getRendererPortFromConfigFile,
 	getRendererPortFromConfigFileAndCliFlag,
 	getStudioPort,
+	resetPreviewServerPorts,
+	setPort,
+	setRendererPort,
+	setStudioPort,
 } from './preview-server';
-import {setPort, setRendererPort, setStudioPort} from './preview-server';
-import {getStillFrame, setStillFrame} from './still-frame';
+import {getStillFrame, resetStillFrame, setStillFrame} from './still-frame';
 import {getWebpackCaching} from './webpack-caching';
 import {getWebpackPolling} from './webpack-poll';
 
@@ -126,6 +135,113 @@ const {
 	previewSampleRateOption,
 } = BrowserSafeApis.options;
 
+const resetOption = (
+	option: {setConfig: (value: never) => void},
+	value: unknown,
+) => {
+	option.setConfig(value as never);
+};
+
+const resetOptionBypassValidation = (option: unknown) => {
+	const {reset} = option as {reset?: () => void};
+
+	if (!reset) {
+		throw new Error('Expected option to have a reset() method');
+	}
+
+	reset();
+};
+
+const resetBrowserSafeConfigOptions = () => {
+	resetOption(allowHtmlInCanvasOption, false);
+	resetOption(benchmarkConcurrenciesOption, null);
+	resetOption(concurrencyOption, null);
+	resetOption(offthreadVideoCacheSizeInBytesOption, null);
+	resetOption(x264Option, null);
+	resetOption(audioBitrateOption, null);
+	resetOption(videoBitrateOption, null);
+	resetOption(scaleOption, 1);
+	resetOption(crfOption, undefined);
+	resetOption(jpegQualityOption, undefined);
+	resetOption(enforceAudioOption, false);
+	resetOption(overwriteOption, true);
+	resetOption(chromeModeOption, 'headless-shell');
+	resetOption(mutedOption, false);
+	resetOption(videoCodecOption, undefined);
+	resetOption(colorSpaceOption, null);
+	resetOption(disallowParallelEncodingOption, false);
+	resetOption(deleteAfterOption, null);
+	resetOption(folderExpiryOption, null);
+	resetOption(enableMultiprocessOnLinuxOption, true);
+	resetOption(glOption, null);
+	resetOption(gopSizeOption, null);
+	resetOption(headlessOption, true);
+	resetOption(numberOfGifLoopsOption, null);
+	resetOption(beepOnFinishOption, false);
+	resetOption(encodingMaxRateOption, null);
+	resetOption(encodingBufferSizeOption, null);
+	resetOption(reproOption, false);
+	resetOption(enableLambdaInsights, false);
+	resetOption(logLevelOption, 'info');
+	resetOption(delayRenderTimeoutInMillisecondsOption, 30000);
+	resetOption(publicDirOption, null);
+	resetOption(binariesDirectoryOption, null);
+	resetOption(preferLosslessOption, false);
+	resetOption(framesOption, null);
+	resetOption(forSeamlessAacConcatenationOption, false);
+	resetOption(audioCodecOption, null);
+	resetOption(publicPathOption, null);
+	resetOption(hardwareAccelerationOption, 'disable');
+	resetOption(audioLatencyHintOption, null);
+	resetOption(enableCrossSiteIsolationOption, false);
+	resetOption(imageSequencePatternOption, null);
+	resetOption(darkModeOption, false);
+	resetOption(askAIOption, false);
+	resetOption(publicLicenseKeyOption, null);
+	resetOption(experimentalClientSideRenderingOption, false);
+	resetOption(interactivityOption, true);
+	resetOption(keyboardShortcutsOption, true);
+	resetOption(forceNewStudioOption, false);
+	resetOption(numberOfSharedAudioTagsOption, 0);
+	resetOption(ipv4Option, false);
+	resetOption(pixelFormatOption, 'yuv420p');
+	resetOption(browserExecutableOption, null);
+	resetOption(everyNthFrameOption, 1);
+	resetOption(proResProfileOption, undefined);
+	resetOption(stillImageFormatOption, null);
+	resetOption(videoImageFormatOption, null);
+	resetOption(userAgentOption, null);
+	resetOption(disableWebSecurityOption, false);
+	resetOption(ignoreCertificateErrorsOption, false);
+	resetOptionBypassValidation(overrideHeightOption);
+	resetOptionBypassValidation(overrideWidthOption);
+	resetOptionBypassValidation(overrideFpsOption);
+	resetOptionBypassValidation(overrideDurationOption);
+	resetOption(rspackOption, false);
+	resetOption(outDirOption, null);
+	resetOption(webpackPollOption, null);
+	resetOption(imageSequenceOption, false);
+	resetOption(bundleCacheOption, true);
+	resetOption(envFileOption, null);
+	resetOption(runsOption, 3);
+	resetOption(noOpenOption, true);
+	resetOption(sampleRateOption, 48000);
+	resetOption(previewSampleRateOption, null);
+};
+
+const resetConfigOptions = () => {
+	resetBrowserSafeConfigOptions();
+	StudioServerInternals.resetMaxTimelineTracks();
+	resetBufferStateDelayInMilliseconds();
+	resetEntryPoint();
+	resetFfmpegOverrideFunction();
+	resetMetadata();
+	resetOutputLocation();
+	resetWebpackOverride();
+	resetPreviewServerPorts();
+	resetStillFrame();
+};
+
 declare global {
 	interface RemotionBundlingOptions {
 		/**
@@ -831,4 +947,5 @@ export const ConfigInternals = {
 	getWebpackPolling,
 	getBufferStateDelayInMilliseconds,
 	getOutputCodecOrUndefined: BrowserSafeApis.getOutputCodecOrUndefined,
+	resetConfigOptions,
 };

packages/cli/src/config/metadata.ts

@@ -7,3 +7,7 @@ export const setMetadata = (metadata: Record<string, string>): void => {
 export const getMetadata = (): Record<string, string> => {
 	return specifiedMetadata;
 };
+
+export const resetMetadata = (): void => {
+	specifiedMetadata = undefined as unknown as Record<string, string>;
+};

packages/cli/src/config/output-location.ts

@@ -17,3 +17,7 @@ export const setOutputLocation = (newOutputLocation: string) => {
 };
 
 export const getOutputLocation = () => currentOutputLocation;
+
+export const resetOutputLocation = () => {
+	currentOutputLocation = null;
+};

packages/cli/src/config/override-webpack.ts

@@ -15,3 +15,7 @@ export const overrideWebpackConfig = (fn: WebpackOverrideFn) => {
 	const prevOverride = overrideFn;
 	overrideFn = async (c) => fn(await prevOverride(c));
 };
+
+export const resetWebpackOverride = () => {
+	overrideFn = defaultOverrideFunction;
+};

packages/cli/src/config/preview-server.ts

@@ -60,3 +60,8 @@ export const getRendererPortFromConfigFileAndCliFlag = (): number | null => {
 		portOption.getValue({commandLine: parsedCli}).value ?? rendererPort ?? null
 	);
 };
+
+export const resetPreviewServerPorts = () => {
+	studioPort = undefined;
+	rendererPort = undefined;
+};

packages/cli/src/config/still-frame.ts

@@ -12,3 +12,7 @@ export const setStillFrame = (frame: number) => {
 };
 
 export const getStillFrame = () => stillFrame;
+
+export const resetStillFrame = () => {
+	stillFrame = 0;
+};

packages/cli/src/get-config-file-name.ts

@@ -9,8 +9,13 @@ const {configOption} = BrowserSafeApis.options;
 
 const defaultConfigFileJavascript = 'remotion.config.js';
 const defaultConfigFileTypescript = 'remotion.config.ts';
+let loadedConfigFile: string | null = null;
 
-export const loadConfig = (remotionRoot: string): Promise<string | null> => {
+export const getLoadedConfigFile = () => loadedConfigFile;
+
+export const loadConfig = async (
+	remotionRoot: string,
+): Promise<string | null> => {
 	const configFile = configOption.getValue({commandLine: parsedCli}).value;
 	if (configFile) {
 		const fullPath = path.resolve(process.cwd(), configFile);
@@ -22,20 +27,37 @@ export const loadConfig = (remotionRoot: string): Promise<string | null> => {
 			process.exit(1);
 		}
 
-		return loadConfigFile(remotionRoot, configFile, fullPath.endsWith('.js'));
+		loadedConfigFile = await loadConfigFile(
+			remotionRoot,
+			configFile,
+			fullPath.endsWith('.js'),
+		);
+		return loadedConfigFile;
 	}
 
 	if (remotionRoot === null) {
-		return Promise.resolve(null);
+		loadedConfigFile = null;
+		return null;
 	}
 
 	if (existsSync(path.resolve(remotionRoot, defaultConfigFileTypescript))) {
-		return loadConfigFile(remotionRoot, defaultConfigFileTypescript, false);
+		loadedConfigFile = await loadConfigFile(
+			remotionRoot,
+			defaultConfigFileTypescript,
+			false,
+		);
+		return loadedConfigFile;
 	}
 
 	if (existsSync(path.resolve(remotionRoot, defaultConfigFileJavascript))) {
-		return loadConfigFile(remotionRoot, defaultConfigFileJavascript, true);
+		loadedConfigFile = await loadConfigFile(
+			remotionRoot,
+			defaultConfigFileJavascript,
+			true,
+		);
+		return loadedConfigFile;
 	}
 
-	return Promise.resolve(null);
+	loadedConfigFile = null;
+	return null;
 };