@remotion/studio 4.0.410 → 4.0.412

package/dist/components/Modals.js

@@ -23,7 +23,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && ((0, jsx_runtime_1.jsx)(WebRenderModal_1.WebRenderModalWithLoader, { type: "web-render", initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialLogLevel: modalContextType.initialLogLevel, initialLicenseKey: modalContextType.initialLicenseKey })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && ((0, jsx_runtime_1.jsx)(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'server-render' && ((0, jsx_runtime_1.jsx)(ServerRenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })), modalContextType && modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && ((0, jsx_runtime_1.jsx)(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), process.env.ASK_AI_ENABLED && (0, jsx_runtime_1.jsx)(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/RenderButton.js

@@ -225,6 +225,20 @@ const RenderButton = ({ readOnlyStudio, }) => {
             outFrameMark: outFrame,
             initialLogLevel: defaults.logLevel,
             initialLicenseKey: defaults.publicLicenseKey,
+            initialStillImageFormat: defaults.stillImageFormat,
+            initialScale: defaults.scale,
+            initialDelayRenderTimeout: defaults.delayRenderTimeout,
+            initialDefaultOutName: null,
+            initialContainer: null,
+            initialVideoCodec: null,
+            initialAudioCodec: null,
+            initialAudioBitrate: null,
+            initialVideoBitrate: null,
+            initialHardwareAcceleration: null,
+            initialKeyframeIntervalInSeconds: null,
+            initialTransparent: null,
+            initialMuted: null,
+            initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
         });
     }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/components/RenderModal/WebRenderModal.js

@@ -81,7 +81,8 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, }) => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
@@ -97,26 +98,26 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     });
     const [renderMode, setRenderMode] = (0, react_1.useState)(isVideo ? 'video' : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
-    const [imageFormat, setImageFormat] = (0, react_1.useState)('png');
+    const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialStillImageFormat !== null && initialStillImageFormat !== void 0 ? initialStillImageFormat : 'png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [logLevel, setLogLevel] = (0, react_1.useState)(() => initialLogLevel);
     const [inputProps, setInputProps] = (0, react_1.useState)(() => defaultProps);
-    const [delayRenderTimeout, setDelayRenderTimeout] = (0, react_1.useState)(30000);
-    const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = (0, react_1.useState)(null);
+    const [delayRenderTimeout, setDelayRenderTimeout] = (0, react_1.useState)(initialDelayRenderTimeout !== null && initialDelayRenderTimeout !== void 0 ? initialDelayRenderTimeout : 30000);
+    const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = (0, react_1.useState)(initialMediaCacheSizeInBytes);
     const [saving, setSaving] = (0, react_1.useState)(false);
     // Video-specific state
-    const [codec, setCodec] = (0, react_1.useState)('h264');
-    const [container, setContainer] = (0, react_1.useState)('mp4');
-    const [audioCodec, setAudioCodec] = (0, react_1.useState)('aac');
-    const [audioBitrate, setAudioBitrate] = (0, react_1.useState)('medium');
-    const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('high');
-    const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)('no-preference');
-    const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = (0, react_1.useState)(5);
-    const [startFrame, setStartFrame] = (0, react_1.useState)(() => inFrameMark !== null && inFrameMark !== void 0 ? inFrameMark : null);
-    const [endFrame, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
-    const [transparent, setTransparent] = (0, react_1.useState)(false);
-    const [muted, setMuted] = (0, react_1.useState)(false);
-    const [scale, setScale] = (0, react_1.useState)(1);
+    const [codec, setCodec] = (0, react_1.useState)(initialVideoCodec !== null && initialVideoCodec !== void 0 ? initialVideoCodec : 'h264');
+    const [container, setContainer] = (0, react_1.useState)(initialContainer !== null && initialContainer !== void 0 ? initialContainer : 'mp4');
+    const [audioCodec, setAudioCodec] = (0, react_1.useState)(initialAudioCodec !== null && initialAudioCodec !== void 0 ? initialAudioCodec : 'aac');
+    const [audioBitrate, setAudioBitrate] = (0, react_1.useState)(initialAudioBitrate !== null && initialAudioBitrate !== void 0 ? initialAudioBitrate : 'medium');
+    const [videoBitrate, setVideoBitrate] = (0, react_1.useState)(initialVideoBitrate !== null && initialVideoBitrate !== void 0 ? initialVideoBitrate : 'high');
+    const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)((_a = initialHardwareAcceleration) !== null && _a !== void 0 ? _a : 'no-preference');
+    const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = (0, react_1.useState)(initialKeyframeIntervalInSeconds !== null && initialKeyframeIntervalInSeconds !== void 0 ? initialKeyframeIntervalInSeconds : 5);
+    const [startFrame, setStartFrame] = (0, react_1.useState)(() => inFrameMark);
+    const [endFrame, setEndFrame] = (0, react_1.useState)(() => outFrameMark);
+    const [transparent, setTransparent] = (0, react_1.useState)(initialTransparent !== null && initialTransparent !== void 0 ? initialTransparent : false);
+    const [muted, setMuted] = (0, react_1.useState)(initialMuted !== null && initialMuted !== void 0 ? initialMuted : false);
+    const [scale, setScale] = (0, react_1.useState)(initialScale !== null && initialScale !== void 0 ? initialScale : 1);
     const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
     const encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
     const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
@@ -146,7 +147,10 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         }
         return Math.max(0, Math.min(finalEndFrame, startFrame));
     }, [finalEndFrame, startFrame]);
-    const [initialOutName] = (0, react_1.useState)(() => {
+    const [initialOutNameState] = (0, react_1.useState)(() => {
+        if (initialDefaultOutName) {
+            return initialDefaultOutName;
+        }
         return (0, studio_shared_1.getDefaultOutLocation)({
             compositionName: resolvedComposition.id,
             defaultExtension: renderMode === 'still'
@@ -159,7 +163,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             clientSideRender: true,
         });
     });
-    const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
+    const [outName, setOutName] = (0, react_1.useState)(() => initialOutNameState);
     const setStillFormat = (0, react_1.useCallback)((format) => {
         setImageFormat(format);
         setOutName((prev) => {

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -1,4 +1,4 @@
-import type { RenderStillOnWebImageFormat } from '@remotion/web-renderer';
+import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type { LogLevel } from 'remotion';
 export type ClientRenderJobProgress = {
     renderedFrames: number;
@@ -48,13 +48,13 @@ export type ClientStillRenderJob = ClientRenderJobBase & {
 } & ClientRenderJobDynamicStatus;
 export type ClientVideoRenderJob = ClientRenderJobBase & {
     type: 'client-video';
-    container: string;
-    videoCodec: string;
-    audioCodec: string;
+    container: WebRendererContainer;
+    videoCodec: WebRendererVideoCodec;
+    audioCodec: WebRendererAudioCodec;
     startFrame: number;
     endFrame: number;
-    audioBitrate: string;
-    videoBitrate: string;
+    audioBitrate: WebRendererQuality;
+    videoBitrate: WebRendererQuality;
     hardwareAcceleration: string;
     keyframeIntervalInSeconds: number;
     transparent: boolean;

package/dist/esm/{chunk-nqxpz7r0.js → chunk-t3rf3vkq.js}

@@ -16468,7 +16468,21 @@ var makeClientRetryPayload = (job) => {
     initialLicenseKey: job.licenseKey,
     defaultProps: job.inputProps,
     inFrameMark: job.type === "client-video" ? job.startFrame : null,
-    outFrameMark: job.type === "client-video" ? job.endFrame : null
+    outFrameMark: job.type === "client-video" ? job.endFrame : null,
+    initialDefaultOutName: job.outName,
+    initialScale: job.scale,
+    initialDelayRenderTimeout: job.delayRenderTimeout,
+    initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
+    initialAudioBitrate: job.type === "client-video" ? job.audioBitrate : null,
+    initialAudioCodec: job.type === "client-video" ? job.audioCodec : null,
+    initialContainer: job.type === "client-video" ? job.container : null,
+    initialHardwareAcceleration: job.type === "client-video" ? job.hardwareAcceleration : null,
+    initialVideoBitrate: job.type === "client-video" ? job.videoBitrate : null,
+    initialVideoCodec: job.type === "client-video" ? job.videoCodec : null,
+    initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
+    initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
+    initialMuted: job.type === "client-video" ? job.muted : null,
+    initialTransparent: job.type === "client-video" ? job.transparent : null
   };
 };
 
@@ -18325,7 +18339,21 @@ var RenderButton = ({
       inFrameMark: inFrame,
       outFrameMark: outFrame,
       initialLogLevel: defaults.logLevel,
-      initialLicenseKey: defaults.publicLicenseKey
+      initialLicenseKey: defaults.publicLicenseKey,
+      initialStillImageFormat: defaults.stillImageFormat,
+      initialScale: defaults.scale,
+      initialDelayRenderTimeout: defaults.delayRenderTimeout,
+      initialDefaultOutName: null,
+      initialContainer: null,
+      initialVideoCodec: null,
+      initialAudioCodec: null,
+      initialAudioBitrate: null,
+      initialVideoBitrate: null,
+      initialHardwareAcceleration: null,
+      initialKeyframeIntervalInSeconds: null,
+      initialTransparent: null,
+      initialMuted: null,
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback88(() => {
@@ -45758,7 +45786,21 @@ var WebRenderModal = ({
   inFrameMark,
   outFrameMark,
   initialLogLevel,
-  initialLicenseKey
+  initialLicenseKey,
+  initialStillImageFormat,
+  initialDefaultOutName,
+  initialScale,
+  initialDelayRenderTimeout,
+  initialMediaCacheSizeInBytes,
+  initialContainer,
+  initialVideoCodec,
+  initialAudioCodec,
+  initialAudioBitrate,
+  initialVideoBitrate,
+  initialHardwareAcceleration,
+  initialKeyframeIntervalInSeconds,
+  initialTransparent,
+  initialMuted
 }) => {
   const context = useContext84(ResolvedCompositionContext);
   const { setSelectedModal } = useContext84(ModalsContext);
@@ -45776,25 +45818,25 @@ var WebRenderModal = ({
   });
   const [renderMode, setRenderMode] = useState85(isVideo ? "video" : "still");
   const [tab, setTab] = useState85("general");
-  const [imageFormat, setImageFormat] = useState85("png");
+  const [imageFormat, setImageFormat] = useState85(() => initialStillImageFormat ?? "png");
   const [frame2, setFrame] = useState85(() => initialFrame);
   const [logLevel, setLogLevel] = useState85(() => initialLogLevel);
   const [inputProps, setInputProps] = useState85(() => defaultProps);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState85(30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState85(null);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState85(initialDelayRenderTimeout ?? 30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState85(initialMediaCacheSizeInBytes);
   const [saving, setSaving] = useState85(false);
-  const [codec, setCodec] = useState85("h264");
-  const [container61, setContainer] = useState85("mp4");
-  const [audioCodec, setAudioCodec] = useState85("aac");
-  const [audioBitrate, setAudioBitrate] = useState85("medium");
-  const [videoBitrate, setVideoBitrate] = useState85("high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState85("no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState85(5);
-  const [startFrame, setStartFrame] = useState85(() => inFrameMark ?? null);
-  const [endFrame, setEndFrame] = useState85(() => outFrameMark ?? null);
-  const [transparent, setTransparent] = useState85(false);
-  const [muted, setMuted] = useState85(false);
-  const [scale, setScale] = useState85(1);
+  const [codec, setCodec] = useState85(initialVideoCodec ?? "h264");
+  const [container61, setContainer] = useState85(initialContainer ?? "mp4");
+  const [audioCodec, setAudioCodec] = useState85(initialAudioCodec ?? "aac");
+  const [audioBitrate, setAudioBitrate] = useState85(initialAudioBitrate ?? "medium");
+  const [videoBitrate, setVideoBitrate] = useState85(initialVideoBitrate ?? "high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState85(initialHardwareAcceleration ?? "no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState85(initialKeyframeIntervalInSeconds ?? 5);
+  const [startFrame, setStartFrame] = useState85(() => inFrameMark);
+  const [endFrame, setEndFrame] = useState85(() => outFrameMark);
+  const [transparent, setTransparent] = useState85(initialTransparent ?? false);
+  const [muted, setMuted] = useState85(initialMuted ?? false);
+  const [scale, setScale] = useState85(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState85(initialLicenseKey);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
@@ -45822,7 +45864,10 @@ var WebRenderModal = ({
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const [initialOutName] = useState85(() => {
+  const [initialOutNameState] = useState85(() => {
+    if (initialDefaultOutName) {
+      return initialDefaultOutName;
+    }
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
       defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container61 : imageFormat,
@@ -45831,7 +45876,7 @@ var WebRenderModal = ({
       clientSideRender: true
     });
   });
-  const [outName, setOutName] = useState85(() => initialOutName);
+  const [outName, setOutName] = useState85(() => initialOutNameState);
   const setStillFormat = useCallback131((format) => {
     setImageFormat(format);
     setOutName((prev) => {
@@ -46538,14 +46583,7 @@ var Modals = ({ readOnlyStudio }) => {
       }),
       modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx273(OverrideInputPropsModal, {}),
       modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx273(WebRenderModalWithLoader, {
-        type: "web-render",
-        initialFrame: modalContextType.initialFrame,
-        compositionId: modalContextType.compositionId,
-        defaultProps: modalContextType.defaultProps,
-        inFrameMark: modalContextType.inFrameMark,
-        outFrameMark: modalContextType.outFrameMark,
-        initialLogLevel: modalContextType.initialLogLevel,
-        initialLicenseKey: modalContextType.initialLicenseKey
+        ...modalContextType
       }),
       modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx273(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,

package/dist/esm/internals.mjs

@@ -16487,7 +16487,21 @@ var makeClientRetryPayload = (job) => {
     initialLicenseKey: job.licenseKey,
     defaultProps: job.inputProps,
     inFrameMark: job.type === "client-video" ? job.startFrame : null,
-    outFrameMark: job.type === "client-video" ? job.endFrame : null
+    outFrameMark: job.type === "client-video" ? job.endFrame : null,
+    initialDefaultOutName: job.outName,
+    initialScale: job.scale,
+    initialDelayRenderTimeout: job.delayRenderTimeout,
+    initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
+    initialAudioBitrate: job.type === "client-video" ? job.audioBitrate : null,
+    initialAudioCodec: job.type === "client-video" ? job.audioCodec : null,
+    initialContainer: job.type === "client-video" ? job.container : null,
+    initialHardwareAcceleration: job.type === "client-video" ? job.hardwareAcceleration : null,
+    initialVideoBitrate: job.type === "client-video" ? job.videoBitrate : null,
+    initialVideoCodec: job.type === "client-video" ? job.videoCodec : null,
+    initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
+    initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
+    initialMuted: job.type === "client-video" ? job.muted : null,
+    initialTransparent: job.type === "client-video" ? job.transparent : null
   };
 };
 
@@ -18344,7 +18358,21 @@ var RenderButton = ({
       inFrameMark: inFrame,
       outFrameMark: outFrame,
       initialLogLevel: defaults.logLevel,
-      initialLicenseKey: defaults.publicLicenseKey
+      initialLicenseKey: defaults.publicLicenseKey,
+      initialStillImageFormat: defaults.stillImageFormat,
+      initialScale: defaults.scale,
+      initialDelayRenderTimeout: defaults.delayRenderTimeout,
+      initialDefaultOutName: null,
+      initialContainer: null,
+      initialVideoCodec: null,
+      initialAudioCodec: null,
+      initialAudioBitrate: null,
+      initialVideoBitrate: null,
+      initialHardwareAcceleration: null,
+      initialKeyframeIntervalInSeconds: null,
+      initialTransparent: null,
+      initialMuted: null,
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback88(() => {
@@ -45777,7 +45805,21 @@ var WebRenderModal = ({
   inFrameMark,
   outFrameMark,
   initialLogLevel,
-  initialLicenseKey
+  initialLicenseKey,
+  initialStillImageFormat,
+  initialDefaultOutName,
+  initialScale,
+  initialDelayRenderTimeout,
+  initialMediaCacheSizeInBytes,
+  initialContainer,
+  initialVideoCodec,
+  initialAudioCodec,
+  initialAudioBitrate,
+  initialVideoBitrate,
+  initialHardwareAcceleration,
+  initialKeyframeIntervalInSeconds,
+  initialTransparent,
+  initialMuted
 }) => {
   const context = useContext84(ResolvedCompositionContext);
   const { setSelectedModal } = useContext84(ModalsContext);
@@ -45795,25 +45837,25 @@ var WebRenderModal = ({
   });
   const [renderMode, setRenderMode] = useState85(isVideo ? "video" : "still");
   const [tab, setTab] = useState85("general");
-  const [imageFormat, setImageFormat] = useState85("png");
+  const [imageFormat, setImageFormat] = useState85(() => initialStillImageFormat ?? "png");
   const [frame2, setFrame] = useState85(() => initialFrame);
   const [logLevel, setLogLevel] = useState85(() => initialLogLevel);
   const [inputProps, setInputProps] = useState85(() => defaultProps);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState85(30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState85(null);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState85(initialDelayRenderTimeout ?? 30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState85(initialMediaCacheSizeInBytes);
   const [saving, setSaving] = useState85(false);
-  const [codec, setCodec] = useState85("h264");
-  const [container61, setContainer] = useState85("mp4");
-  const [audioCodec, setAudioCodec] = useState85("aac");
-  const [audioBitrate, setAudioBitrate] = useState85("medium");
-  const [videoBitrate, setVideoBitrate] = useState85("high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState85("no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState85(5);
-  const [startFrame, setStartFrame] = useState85(() => inFrameMark ?? null);
-  const [endFrame, setEndFrame] = useState85(() => outFrameMark ?? null);
-  const [transparent, setTransparent] = useState85(false);
-  const [muted, setMuted] = useState85(false);
-  const [scale, setScale] = useState85(1);
+  const [codec, setCodec] = useState85(initialVideoCodec ?? "h264");
+  const [container61, setContainer] = useState85(initialContainer ?? "mp4");
+  const [audioCodec, setAudioCodec] = useState85(initialAudioCodec ?? "aac");
+  const [audioBitrate, setAudioBitrate] = useState85(initialAudioBitrate ?? "medium");
+  const [videoBitrate, setVideoBitrate] = useState85(initialVideoBitrate ?? "high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState85(initialHardwareAcceleration ?? "no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState85(initialKeyframeIntervalInSeconds ?? 5);
+  const [startFrame, setStartFrame] = useState85(() => inFrameMark);
+  const [endFrame, setEndFrame] = useState85(() => outFrameMark);
+  const [transparent, setTransparent] = useState85(initialTransparent ?? false);
+  const [muted, setMuted] = useState85(initialMuted ?? false);
+  const [scale, setScale] = useState85(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState85(initialLicenseKey);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
@@ -45841,7 +45883,10 @@ var WebRenderModal = ({
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const [initialOutName] = useState85(() => {
+  const [initialOutNameState] = useState85(() => {
+    if (initialDefaultOutName) {
+      return initialDefaultOutName;
+    }
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
       defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container61 : imageFormat,
@@ -45850,7 +45895,7 @@ var WebRenderModal = ({
       clientSideRender: true
     });
   });
-  const [outName, setOutName] = useState85(() => initialOutName);
+  const [outName, setOutName] = useState85(() => initialOutNameState);
   const setStillFormat = useCallback131((format) => {
     setImageFormat(format);
     setOutName((prev) => {
@@ -46557,14 +46602,7 @@ var Modals = ({ readOnlyStudio }) => {
       }),
       modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx273(OverrideInputPropsModal, {}),
       modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx273(WebRenderModalWithLoader, {
-        type: "web-render",
-        initialFrame: modalContextType.initialFrame,
-        compositionId: modalContextType.compositionId,
-        defaultProps: modalContextType.defaultProps,
-        inFrameMark: modalContextType.inFrameMark,
-        outFrameMark: modalContextType.outFrameMark,
-        initialLogLevel: modalContextType.initialLogLevel,
-        initialLicenseKey: modalContextType.initialLicenseKey
+        ...modalContextType
       }),
       modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx273(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,

package/dist/esm/previewEntry.mjs

@@ -16767,7 +16767,21 @@ var makeClientRetryPayload = (job) => {
     initialLicenseKey: job.licenseKey,
     defaultProps: job.inputProps,
     inFrameMark: job.type === "client-video" ? job.startFrame : null,
-    outFrameMark: job.type === "client-video" ? job.endFrame : null
+    outFrameMark: job.type === "client-video" ? job.endFrame : null,
+    initialDefaultOutName: job.outName,
+    initialScale: job.scale,
+    initialDelayRenderTimeout: job.delayRenderTimeout,
+    initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
+    initialAudioBitrate: job.type === "client-video" ? job.audioBitrate : null,
+    initialAudioCodec: job.type === "client-video" ? job.audioCodec : null,
+    initialContainer: job.type === "client-video" ? job.container : null,
+    initialHardwareAcceleration: job.type === "client-video" ? job.hardwareAcceleration : null,
+    initialVideoBitrate: job.type === "client-video" ? job.videoBitrate : null,
+    initialVideoCodec: job.type === "client-video" ? job.videoCodec : null,
+    initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
+    initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
+    initialMuted: job.type === "client-video" ? job.muted : null,
+    initialTransparent: job.type === "client-video" ? job.transparent : null
   };
 };
 
@@ -18624,7 +18638,21 @@ var RenderButton = ({
       inFrameMark: inFrame,
       outFrameMark: outFrame,
       initialLogLevel: defaults.logLevel,
-      initialLicenseKey: defaults.publicLicenseKey
+      initialLicenseKey: defaults.publicLicenseKey,
+      initialStillImageFormat: defaults.stillImageFormat,
+      initialScale: defaults.scale,
+      initialDelayRenderTimeout: defaults.delayRenderTimeout,
+      initialDefaultOutName: null,
+      initialContainer: null,
+      initialVideoCodec: null,
+      initialAudioCodec: null,
+      initialAudioBitrate: null,
+      initialVideoBitrate: null,
+      initialHardwareAcceleration: null,
+      initialKeyframeIntervalInSeconds: null,
+      initialTransparent: null,
+      initialMuted: null,
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback89(() => {
@@ -46057,7 +46085,21 @@ var WebRenderModal = ({
   inFrameMark,
   outFrameMark,
   initialLogLevel,
-  initialLicenseKey
+  initialLicenseKey,
+  initialStillImageFormat,
+  initialDefaultOutName,
+  initialScale,
+  initialDelayRenderTimeout,
+  initialMediaCacheSizeInBytes,
+  initialContainer,
+  initialVideoCodec,
+  initialAudioCodec,
+  initialAudioBitrate,
+  initialVideoBitrate,
+  initialHardwareAcceleration,
+  initialKeyframeIntervalInSeconds,
+  initialTransparent,
+  initialMuted
 }) => {
   const context = useContext84(ResolvedCompositionContext);
   const { setSelectedModal } = useContext84(ModalsContext);
@@ -46075,25 +46117,25 @@ var WebRenderModal = ({
   });
   const [renderMode, setRenderMode] = useState86(isVideo ? "video" : "still");
   const [tab, setTab] = useState86("general");
-  const [imageFormat, setImageFormat] = useState86("png");
+  const [imageFormat, setImageFormat] = useState86(() => initialStillImageFormat ?? "png");
   const [frame2, setFrame] = useState86(() => initialFrame);
   const [logLevel, setLogLevel] = useState86(() => initialLogLevel);
   const [inputProps, setInputProps] = useState86(() => defaultProps);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState86(30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState86(null);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState86(initialDelayRenderTimeout ?? 30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState86(initialMediaCacheSizeInBytes);
   const [saving, setSaving] = useState86(false);
-  const [codec, setCodec] = useState86("h264");
-  const [container61, setContainer] = useState86("mp4");
-  const [audioCodec, setAudioCodec] = useState86("aac");
-  const [audioBitrate, setAudioBitrate] = useState86("medium");
-  const [videoBitrate, setVideoBitrate] = useState86("high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState86("no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState86(5);
-  const [startFrame, setStartFrame] = useState86(() => inFrameMark ?? null);
-  const [endFrame, setEndFrame] = useState86(() => outFrameMark ?? null);
-  const [transparent, setTransparent] = useState86(false);
-  const [muted, setMuted] = useState86(false);
-  const [scale, setScale] = useState86(1);
+  const [codec, setCodec] = useState86(initialVideoCodec ?? "h264");
+  const [container61, setContainer] = useState86(initialContainer ?? "mp4");
+  const [audioCodec, setAudioCodec] = useState86(initialAudioCodec ?? "aac");
+  const [audioBitrate, setAudioBitrate] = useState86(initialAudioBitrate ?? "medium");
+  const [videoBitrate, setVideoBitrate] = useState86(initialVideoBitrate ?? "high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState86(initialHardwareAcceleration ?? "no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState86(initialKeyframeIntervalInSeconds ?? 5);
+  const [startFrame, setStartFrame] = useState86(() => inFrameMark);
+  const [endFrame, setEndFrame] = useState86(() => outFrameMark);
+  const [transparent, setTransparent] = useState86(initialTransparent ?? false);
+  const [muted, setMuted] = useState86(initialMuted ?? false);
+  const [scale, setScale] = useState86(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState86(initialLicenseKey);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
@@ -46121,7 +46163,10 @@ var WebRenderModal = ({
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const [initialOutName] = useState86(() => {
+  const [initialOutNameState] = useState86(() => {
+    if (initialDefaultOutName) {
+      return initialDefaultOutName;
+    }
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
       defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container61 : imageFormat,
@@ -46130,7 +46175,7 @@ var WebRenderModal = ({
       clientSideRender: true
     });
   });
-  const [outName, setOutName] = useState86(() => initialOutName);
+  const [outName, setOutName] = useState86(() => initialOutNameState);
   const setStillFormat = useCallback132((format) => {
     setImageFormat(format);
     setOutName((prev) => {
@@ -46837,14 +46882,7 @@ var Modals = ({ readOnlyStudio }) => {
       }),
       modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx274(OverrideInputPropsModal, {}),
       modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx274(WebRenderModalWithLoader, {
-        type: "web-render",
-        initialFrame: modalContextType.initialFrame,
-        compositionId: modalContextType.compositionId,
-        defaultProps: modalContextType.defaultProps,
-        inFrameMark: modalContextType.inFrameMark,
-        outFrameMark: modalContextType.outFrameMark,
-        initialLogLevel: modalContextType.initialLogLevel,
-        initialLicenseKey: modalContextType.initialLicenseKey
+        ...modalContextType
       }),
       modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx274(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,

package/dist/esm/renderEntry.mjs

@@ -206,7 +206,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-nqxpz7r0.js").then(({ StudioInternals }) => {
+    import("./chunk-t3rf3vkq.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/retry-payload.js

@@ -177,6 +177,22 @@ const makeClientRetryPayload = (job) => {
         defaultProps: job.inputProps,
         inFrameMark: job.type === 'client-video' ? job.startFrame : null,
         outFrameMark: job.type === 'client-video' ? job.endFrame : null,
+        initialDefaultOutName: job.outName,
+        initialScale: job.scale,
+        initialDelayRenderTimeout: job.delayRenderTimeout,
+        initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
+        initialAudioBitrate: job.type === 'client-video' ? job.audioBitrate : null,
+        initialAudioCodec: job.type === 'client-video' ? job.audioCodec : null,
+        initialContainer: job.type === 'client-video' ? job.container : null,
+        initialHardwareAcceleration: job.type === 'client-video'
+            ? job.hardwareAcceleration
+            : null,
+        initialVideoBitrate: job.type === 'client-video' ? job.videoBitrate : null,
+        initialVideoCodec: job.type === 'client-video' ? job.videoCodec : null,
+        initialStillImageFormat: job.type === 'client-still' ? job.imageFormat : 'png',
+        initialKeyframeIntervalInSeconds: job.type === 'client-video' ? job.keyframeIntervalInSeconds : null,
+        initialMuted: job.type === 'client-video' ? job.muted : null,
+        initialTransparent: job.type === 'client-video' ? job.transparent : null,
     };
 };
 exports.makeClientRetryPayload = makeClientRetryPayload;

package/dist/state/modals.d.ts

@@ -1,6 +1,7 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
 import type { PackageManager, RenderDefaults } from '@remotion/studio-shared';
+import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { _InternalTypes } from 'remotion';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
@@ -15,7 +16,21 @@ export type WebRenderModalState = {
     inFrameMark: number | null;
     outFrameMark: number | null;
     initialLogLevel: LogLevel;
+    initialStillImageFormat: RenderStillOnWebImageFormat;
+    initialScale: number;
+    initialDelayRenderTimeout: number;
+    initialDefaultOutName: string | null;
+    initialContainer: WebRendererContainer | null;
+    initialVideoCodec: WebRendererVideoCodec | null;
+    initialAudioCodec: WebRendererAudioCodec | null;
+    initialAudioBitrate: WebRendererQuality | null;
+    initialVideoBitrate: WebRendererQuality | null;
+    initialHardwareAcceleration: WebRendererHardwareAcceleration | null;
+    initialKeyframeIntervalInSeconds: number | null;
+    initialTransparent: boolean | null;
+    initialMuted: boolean | null;
     initialLicenseKey: string | null;
+    initialMediaCacheSizeInBytes: number | null;
 };
 export type RenderModalState = {
     type: 'server-render';

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.410",
+	"version": "4.0.412",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -25,13 +25,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.410",
-		"@remotion/player": "4.0.410",
-		"@remotion/media-utils": "4.0.410",
-		"@remotion/renderer": "4.0.410",
-		"@remotion/web-renderer": "4.0.410",
-		"@remotion/studio-shared": "4.0.410",
-		"@remotion/zod-types": "4.0.410",
+		"remotion": "4.0.411",
+		"@remotion/player": "4.0.411",
+		"@remotion/media-utils": "4.0.411",
+		"@remotion/renderer": "4.0.411",
+		"@remotion/web-renderer": "4.0.411",
+		"@remotion/studio-shared": "4.0.411",
+		"@remotion/zod-types": "4.0.411",
 		"mediabunny": "1.29.0",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -42,7 +42,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.410",
+		"@remotion/eslint-config-internal": "4.0.411",
 		"eslint": "9.19.0"
 	},
 	"publishConfig": {