Skip to content

@remotion/studio: Reload Studio when config changes #9017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
JonnyBurger wants to merge 1 commit into from
Closed

@remotion/studio: Reload Studio when config changes #9017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/browser-studio/src/BrowserStudio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
Expand Down
9 changes: 9 additions & 0 deletions packages/bundler/src/bundle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions packages/cli/src/config/buffer-state-delay-in-milliseconds.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@ export const getBufferStateDelayInMilliseconds = () => {
export const setBufferStateDelayInMilliseconds = (val: number | null) => {
value = val;
};

export const resetBufferStateDelayInMilliseconds = () => {
value = null;
};
4 changes: 4 additions & 0 deletions packages/cli/src/config/entry-point.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@ export const setEntryPoint = (ep: string) => {
export const getEntryPoint = () => {
return entryPoint;
};

export const resetEntryPoint = () => {
entryPoint = null;
};
8 changes: 7 additions & 1 deletion packages/cli/src/config/ffmpeg-override.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -9,3 +11,7 @@ export const setFfmpegOverrideFunction = (fn: FfmpegOverrideFn) => {
export const getFfmpegOverrideFunction = () => {
return ffmpegOverrideFn;
};

export const resetFfmpegOverrideFunction = () => {
ffmpegOverrideFn = defaultFfmpegOverrideFn;
};
129 changes: 120 additions & 9 deletions packages/cli/src/config/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -126,6 +135,107 @@ const {
previewSampleRateOption,
} = BrowserSafeApis.options;

const resetOption = (
option: {setConfig: (value: never) => void},
value: unknown,
) => {
option.setConfig(value as never);
};

const resetOptionBypassValidation = (option: {reset: () => void}) => {
option.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);

@pullfrog pullfrog Bot Jul 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ askAIOption defaults to enabled (true), but this resets it to false. After a config reload, the Ask AI feature will be disabled unless the config file explicitly calls Config.setAskAIEnabled(true) again.

Change false to true to match the default.

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 {
/**
Expand Down Expand Up @@ -831,4 +941,5 @@ export const ConfigInternals = {
getWebpackPolling,
getBufferStateDelayInMilliseconds,
getOutputCodecOrUndefined: BrowserSafeApis.getOutputCodecOrUndefined,
resetConfigOptions,
};
4 changes: 4 additions & 0 deletions packages/cli/src/config/metadata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@ export const setMetadata = (metadata: Record<string, string>): void => {
export const getMetadata = (): Record<string, string> => {
return specifiedMetadata;
};

export const resetMetadata = (): void => {

@pullfrog pullfrog Bot Jul 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ specifiedMetadata is typed as Record<string, string>, but this resets it to undefined with a cast. getMetadata() will then return undefined at runtime despite its type.

Consider typing specifiedMetadata as Record<string, string> | undefined and resetting to undefined without the cast, or reset to {} if an empty record is the intended default.

specifiedMetadata = undefined as unknown as Record<string, string>;
};
4 changes: 4 additions & 0 deletions packages/cli/src/config/output-location.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,7 @@ export const setOutputLocation = (newOutputLocation: string) => {
};

export const getOutputLocation = () => currentOutputLocation;

export const resetOutputLocation = () => {
currentOutputLocation = null;
};
4 changes: 4 additions & 0 deletions packages/cli/src/config/override-webpack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,7 @@ export const overrideWebpackConfig = (fn: WebpackOverrideFn) => {
const prevOverride = overrideFn;
overrideFn = async (c) => fn(await prevOverride(c));
};

export const resetWebpackOverride = () => {
overrideFn = defaultOverrideFunction;
};
5 changes: 5 additions & 0 deletions packages/cli/src/config/preview-server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,8 @@ export const getRendererPortFromConfigFileAndCliFlag = (): number | null => {
portOption.getValue({commandLine: parsedCli}).value ?? rendererPort ?? null
);
};

export const resetPreviewServerPorts = () => {
studioPort = undefined;
rendererPort = undefined;
};
4 changes: 4 additions & 0 deletions packages/cli/src/config/still-frame.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,7 @@ export const setStillFrame = (frame: number) => {
};

export const getStillFrame = () => stillFrame;

export const resetStillFrame = () => {
stillFrame = 0;
};
34 changes: 28 additions & 6 deletions packages/cli/src/get-config-file-name.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
};
Loading
Loading