@remotion/studio 4.0.409 → 4.0.411

package/dist/esm/internals.mjs

@@ -29,7 +29,7 @@ import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React177, { useCallback as useCallback135, useEffect as useEffect85, useMemo as useMemo136 } from "react";
+import React177, { useCallback as useCallback135, useEffect as useEffect84, useMemo as useMemo136 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/helpers/colors.ts
@@ -3265,7 +3265,7 @@ var writeStaticFile = async ({
   if (window.remotion_isReadOnlyStudio) {
     throw new Error("writeStaticFile() is not available in read-only Studio");
   }
-  const url = new URL("/api/add-asset", window.location.origin);
+  const url = new URL(`${window.remotion_staticBase}/api/add-asset`, window.location.origin);
   if (filePath.includes("\\")) {
     return Promise.reject(new Error("File path cannot contain backslashes"));
   }
@@ -7544,10 +7544,10 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback91, useContext as useContext59, useEffect as useEffect62 } from "react";
+import { useCallback as useCallback91, useContext as useContext59, useEffect as useEffect61 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback90, useContext as useContext58, useEffect as useEffect61, useMemo as useMemo96 } from "react";
+import { useCallback as useCallback90, useContext as useContext58, useEffect as useEffect60, useMemo as useMemo96 } from "react";
 
 // src/helpers/use-breakpoint.ts
 import { useEffect as useEffect25, useState as useState30 } from "react";
@@ -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
   };
 };
 
@@ -17328,7 +17342,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext55, useEffect as useEffect59, useRef as useRef32, useState as useState60 } from "react";
+import { useContext as useContext55, useEffect as useEffect58, useRef as useRef32, useState as useState60 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/helpers/should-show-render-button.ts
@@ -18145,14 +18159,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import {
-  useCallback as useCallback88,
-  useContext as useContext53,
-  useEffect as useEffect58,
-  useMemo as useMemo93,
-  useRef as useRef31,
-  useState as useState59
-} from "react";
+import { useCallback as useCallback88, useContext as useContext53, useMemo as useMemo93, useRef as useRef31, useState as useState59 } from "react";
 import ReactDOM8 from "react-dom";
 import { Internals as Internals43 } from "remotion";
 import { jsx as jsx174, jsxs as jsxs81, Fragment as Fragment23 } from "react/jsx-runtime";
@@ -18234,6 +18241,34 @@ var RenderButton = ({
     shouldApplyCssTransforms: true
   });
   const refresh = size4?.refresh;
+  const onPointerDown = useCallback88(() => {
+    setDropdownOpened((o) => {
+      if (!o) {
+        refresh?.();
+      }
+      return !o;
+    });
+  }, [refresh]);
+  const onClickDropdown = useCallback88((e) => {
+    e.stopPropagation();
+    const isKeyboardInitiated = e.detail === 0;
+    if (!isKeyboardInitiated) {
+      return;
+    }
+    setDropdownOpened((o) => {
+      if (!o) {
+        refresh?.();
+        window.addEventListener("pointerup", (evt) => {
+          if (!isMenuItem(evt.target)) {
+            setDropdownOpened(false);
+          }
+        }, {
+          once: true
+        });
+      }
+      return !o;
+    });
+  }, [refresh]);
   const connectionStatus = useContext53(StudioServerConnectionCtx).previewServerState.type;
   const shortcut = areKeyboardShortcutsDisabled() ? "" : "(R)";
   const tooltip = connectionStatus === "connected" ? "Export the current composition " + shortcut : "Connect to the Studio server to render";
@@ -18323,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(() => {
@@ -18374,46 +18423,6 @@ var RenderButton = ({
       }
     ];
   }, [handleRenderTypeChange]);
-  useEffect58(() => {
-    const { current } = dropdownRef;
-    if (!current) {
-      return;
-    }
-    const onPointerDown = () => {
-      return setDropdownOpened((o) => {
-        if (!o) {
-          refresh?.();
-        }
-        return !o;
-      });
-    };
-    const onClickDropdown = (e) => {
-      e.stopPropagation();
-      const isKeyboardInitiated = e.detail === 0;
-      if (!isKeyboardInitiated) {
-        return;
-      }
-      return setDropdownOpened((o) => {
-        if (!o) {
-          refresh?.();
-          window.addEventListener("pointerup", (evt) => {
-            if (!isMenuItem(evt.target)) {
-              setDropdownOpened(false);
-            }
-          }, {
-            once: true
-          });
-        }
-        return !o;
-      });
-    };
-    current.addEventListener("pointerdown", onPointerDown);
-    current.addEventListener("click", onClickDropdown);
-    return () => {
-      current.removeEventListener("pointerdown", onPointerDown);
-      current.removeEventListener("click", onClickDropdown);
-    };
-  }, [refresh]);
   const spaceToBottom = useMemo93(() => {
     const margin2 = 10;
     if (size4 && dropdownOpened) {
@@ -18481,7 +18490,6 @@ var RenderButton = ({
       /* @__PURE__ */ jsx174("button", {
         style: { display: "none" },
         id: "render-modal-button-client",
-        disabled: connectionStatus !== "connected" && renderType === "server-render",
         onClick: openClientRenderModal,
         type: "button"
       }),
@@ -18525,6 +18533,8 @@ var RenderButton = ({
                 style: dropdownTriggerStyle,
                 disabled: connectionStatus !== "connected",
                 className: MENU_INITIATOR_CLASSNAME,
+                onPointerDown,
+                onClick: onClickDropdown,
                 children: /* @__PURE__ */ jsx174(CaretDown, {})
               })
             ]
@@ -18727,7 +18737,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const [loop, setLoop] = useState60(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
-  useEffect59(() => {
+  useEffect58(() => {
     if (isMobileLayout && previewToolbarRef.current) {
       const updateScrollableIndicatorProps = (target) => {
         const boundingBox = target.getBoundingClientRect();
@@ -19007,7 +19017,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext57, useEffect as useEffect60, useRef as useRef34, useState as useState62 } from "react";
+import { useContext as useContext57, useEffect as useEffect59, useRef as useRef34, useState as useState62 } from "react";
 import { jsx as jsx180 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -19023,7 +19033,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
   }
   const [lastPointerUp, setLastPointerUp] = useState62(() => Date.now());
   const ref = useRef34(null);
-  useEffect60(() => {
+  useEffect59(() => {
     if (context.isDragging.current) {
       return;
     }
@@ -19106,7 +19116,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
-  useEffect60(() => {
+  useEffect59(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -19193,7 +19203,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     }
     return "expanded";
   }, [sidebarCollapsedStateRight]);
-  useEffect61(() => {
+  useEffect60(() => {
     onMounted();
   }, [onMounted]);
   const canvasContainerStyle = useMemo96(() => ({
@@ -19363,7 +19373,7 @@ var SidebarCollapserControls = () => {
     toggleLeft,
     toggleRight
   ]);
-  useEffect62(() => {
+  useEffect61(() => {
     const left3 = keybindings.registerKeybinding({
       event: "keydown",
       key: "b",
@@ -19441,7 +19451,7 @@ var SidebarCollapserControls = () => {
 import {
   useCallback as useCallback92,
   useContext as useContext60,
-  useEffect as useEffect63,
+  useEffect as useEffect62,
   useMemo as useMemo97,
   useState as useState63
 } from "react";
@@ -19493,7 +19503,7 @@ var UpdateCheck = () => {
     });
     return controller;
   }, []);
-  useEffect63(() => {
+  useEffect62(() => {
     const abortUpdate = checkForUpdates();
     const abortBugs = checkForBugs();
     return () => {
@@ -19858,7 +19868,7 @@ import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
   useCallback as useCallback94,
   useContext as useContext63,
-  useEffect as useEffect64,
+  useEffect as useEffect63,
   useMemo as useMemo100,
   useRef as useRef35,
   useState as useState65
@@ -20289,7 +20299,7 @@ var Inner2 = () => {
     videoConfig,
     width
   ]);
-  useEffect64(() => {
+  useEffect63(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -20300,7 +20310,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpScrubbing);
     };
   }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
-  useEffect64(() => {
+  useEffect63(() => {
     if (inOutDragging.dragging === false) {
       return;
     }
@@ -20476,7 +20486,7 @@ import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
 import {
   useCallback as useCallback96,
   useContext as useContext64,
-  useEffect as useEffect65,
+  useEffect as useEffect64,
   useMemo as useMemo101,
   useState as useState66
 } from "react";
@@ -20565,7 +20575,7 @@ var TimelineStack = ({ isCompact, sequence }) => {
       window.open(getGitRefUrl(window.remotion_gitSource, originalLocation), "_blank");
     }
   }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-  useEffect65(() => {
+  useEffect64(() => {
     if (!sequence.stack) {
       return;
     }
@@ -20713,14 +20723,14 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext66, useEffect as useEffect67, useMemo as useMemo103, useRef as useRef37 } from "react";
+import { useContext as useContext66, useEffect as useEffect66, useMemo as useMemo103, useRef as useRef37 } from "react";
 import { Internals as Internals50 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import {
   useCallback as useCallback98,
-  useEffect as useEffect66,
+  useEffect as useEffect65,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef36
 } from "react";
@@ -20773,7 +20783,7 @@ var TimeValue = () => {
     pause,
     toggle
   }), [seek, play, pause, toggle]);
-  useEffect66(() => {
+  useEffect65(() => {
     const gKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "g",
@@ -20886,7 +20896,7 @@ var TimelineTimeIndicators = () => {
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
   const ref = useRef37(null);
-  useEffect67(() => {
+  useEffect66(() => {
     const currentRef = ref.current;
     if (!currentRef) {
       return;
@@ -20993,7 +21003,7 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext67, useEffect as useEffect68 } from "react";
+import { useContext as useContext67, useEffect as useEffect67 } from "react";
 import { Internals as Internals51 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
@@ -21011,7 +21021,7 @@ var TimelinePlayCursorSyncer = () => {
     setCurrentFps(video.fps);
   }
   const playing = timelineContext.playing ?? false;
-  useEffect68(() => {
+  useEffect67(() => {
     if (!video) {
       return;
     }
@@ -21024,7 +21034,7 @@ var TimelinePlayCursorSyncer = () => {
       frame: timelinePosition
     });
   }, [playing, timelineContext, timelinePosition, video]);
-  useEffect68(() => {
+  useEffect67(() => {
     const { current } = scrollableRef;
     if (!current) {
       return;
@@ -36027,7 +36037,7 @@ var readAscii = (slice, length) => {
  */
 
 // src/helpers/use-max-media-duration.ts
-import { useEffect as useEffect69, useState as useState67 } from "react";
+import { useEffect as useEffect68, useState as useState67 } from "react";
 var cache = new Map;
 var getSrc = (s) => {
   if (s.type === "video") {
@@ -36041,7 +36051,7 @@ var getSrc = (s) => {
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
   const [maxMediaDuration, setMaxMediaDuration] = useState67(src ? cache.get(src) ?? null : Infinity);
-  useEffect69(() => {
+  useEffect68(() => {
     if (!src) {
       return;
     }
@@ -36071,7 +36081,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect70, useMemo as useMemo106, useRef as useRef39, useState as useState68 } from "react";
+import { useEffect as useEffect69, useMemo as useMemo106, useRef as useRef39, useState as useState68 } from "react";
 import { Internals as Internals52 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -36136,14 +36146,14 @@ var AudioWaveform = ({
     throw new Error("Expected video config");
   }
   const canvas = useRef39(null);
-  useEffect70(() => {
+  useEffect69(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
       current.isMounted = false;
     };
   }, []);
-  useEffect70(() => {
+  useEffect69(() => {
     if (!canvas.current) {
       return;
     }
@@ -36170,7 +36180,7 @@ var AudioWaveform = ({
     context.strokeStyle = LIGHT_TRANSPARENT;
     context.stroke();
   }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-  useEffect70(() => {
+  useEffect69(() => {
     setError(null);
     getAudioData(src).then((data) => {
       if (mountState.current.isMounted) {
@@ -36345,7 +36355,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect71, useRef as useRef40, useState as useState69 } from "react";
+import { useEffect as useEffect70, useRef as useRef40, useState as useState69 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -36663,12 +36673,12 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
   const ref = useRef40(null);
   const [error, setError] = useState69(null);
   const aspectRatio = useRef40(getAspectRatioFromCache(src));
-  useEffect71(() => {
+  useEffect70(() => {
     return () => {
       clearFramesForSrc(src);
     };
   }, [src]);
-  useEffect71(() => {
+  useEffect70(() => {
     if (error) {
       return;
     }
@@ -37121,13 +37131,13 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext71, useEffect as useEffect72 } from "react";
+import { useContext as useContext71, useEffect as useEffect71 } from "react";
 var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext71(ModalsContext);
   const { setCheckerboard } = useContext71(CheckerboardContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  useEffect72(() => {
+  useEffect71(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "n",
@@ -37232,8 +37242,13 @@ var GlobalKeybindings = () => {
 import { useContext as useContext85 } from "react";
 
 // src/components/InstallPackage.tsx
-import { apiDocs, descriptions, installableMap } from "@remotion/studio-shared";
-import React144, { useCallback as useCallback100, useContext as useContext73, useEffect as useEffect73 } from "react";
+import {
+  apiDocs,
+  descriptions,
+  extraPackages,
+  installableMap
+} from "@remotion/studio-shared";
+import React144, { useCallback as useCallback100, useContext as useContext73, useEffect as useEffect72 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/api/install-package.ts
@@ -37367,7 +37382,7 @@ var InstallPackageModal = ({ packageManager }) => {
   const canSelectPackages = state.type === "idle" && ctx.type === "connected";
   const disabled = !(canSelectPackages || state.type === "done") || selectedPackages.length === 0;
   const { registerKeybinding } = useKeybinding();
-  useEffect73(() => {
+  useEffect72(() => {
     if (disabled) {
       return;
     }
@@ -37412,42 +37427,72 @@ var InstallPackageModal = ({ packageManager }) => {
             selectedPackages.length === 1 ? "" : "s",
             ". Check your terminal for progress."
           ]
-        }) : /* @__PURE__ */ jsx209("div", {
+        }) : /* @__PURE__ */ jsxs103("div", {
           style: text2,
-          children: Object.entries(installableMap).filter(([, install]) => install).map(([pkgShort]) => {
-            const pkg = pkgShort === "core" ? "remotion" : `@remotion/${pkgShort}`;
-            const isInstalled = window.remotion_installedPackages?.includes(pkg) ?? false;
-            const link = apiDocs[pkgShort];
-            const description = descriptions[pkgShort];
-            if (!link) {
-              throw new Error("No link for " + pkg);
-            }
-            if (!description) {
-              throw new Error("No description for " + pkg);
-            }
-            return /* @__PURE__ */ jsxs103(Row, {
-              align: "center",
-              children: [
-                /* @__PURE__ */ jsx209(Checkbox, {
-                  checked: map[pkg],
-                  name: pkg,
-                  onChange: () => {
-                    setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
-                  },
-                  disabled: !canSelectPackages || isInstalled
-                }),
-                /* @__PURE__ */ jsx209(Spacing, {
-                  x: 1.5
-                }),
-                /* @__PURE__ */ jsx209(InstallablePackageComp, {
-                  description,
-                  isInstalled,
-                  link,
-                  pkg
-                })
-              ]
-            }, pkg);
-          })
+          children: [
+            Object.entries(installableMap).filter(([, install]) => install).map(([pkgShort]) => {
+              const pkg = pkgShort === "core" ? "remotion" : `@remotion/${pkgShort}`;
+              const isInstalled = window.remotion_installedPackages?.includes(pkg) ?? false;
+              const link = apiDocs[pkgShort];
+              const description = descriptions[pkgShort];
+              if (!link) {
+                throw new Error("No link for " + pkg);
+              }
+              if (!description) {
+                throw new Error("No description for " + pkg);
+              }
+              return /* @__PURE__ */ jsxs103(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx209(Checkbox, {
+                    checked: map[pkg],
+                    name: pkg,
+                    onChange: () => {
+                      setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
+                    },
+                    disabled: !canSelectPackages || isInstalled
+                  }),
+                  /* @__PURE__ */ jsx209(Spacing, {
+                    x: 1.5
+                  }),
+                  /* @__PURE__ */ jsx209(InstallablePackageComp, {
+                    description,
+                    isInstalled,
+                    link,
+                    pkg
+                  })
+                ]
+              }, pkg);
+            }),
+            extraPackages.map((extraPkg) => {
+              const isInstalled = window.remotion_installedPackages?.includes(extraPkg.name) ?? false;
+              return /* @__PURE__ */ jsxs103(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx209(Checkbox, {
+                    checked: map[extraPkg.name],
+                    name: extraPkg.name,
+                    onChange: () => {
+                      setMap((prev) => ({
+                        ...prev,
+                        [extraPkg.name]: !prev[extraPkg.name]
+                      }));
+                    },
+                    disabled: !canSelectPackages || isInstalled
+                  }),
+                  /* @__PURE__ */ jsx209(Spacing, {
+                    x: 1.5
+                  }),
+                  /* @__PURE__ */ jsx209(InstallablePackageComp, {
+                    description: extraPkg.description,
+                    isInstalled,
+                    link: extraPkg.docsUrl,
+                    pkg: `${extraPkg.name}@${extraPkg.version}`
+                  })
+                ]
+              }, extraPkg.name);
+            })
+          ]
         })
       }),
       /* @__PURE__ */ jsx209(ModalFooterContainer, {
@@ -37491,7 +37536,7 @@ var InstallPackageModal = ({ packageManager }) => {
 import { useCallback as useCallback102, useContext as useContext76, useMemo as useMemo112 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React145, { useContext as useContext74, useEffect as useEffect74, useMemo as useMemo111 } from "react";
+import React145, { useContext as useContext74, useEffect as useEffect73, useMemo as useMemo111 } from "react";
 import { Internals as Internals56 } from "remotion";
 import { jsx as jsx210, jsxs as jsxs104 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -37515,7 +37560,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals56.useResolvedVideoConfig(compositionId);
   const unresolvedContext = useContext74(Internals56.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
-  useEffect74(() => {
+  useEffect73(() => {
     const { current } = Internals56.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
@@ -37573,7 +37618,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback101, useContext as useContext75, useEffect as useEffect75, useState as useState70 } from "react";
+import { useCallback as useCallback101, useContext as useContext75, useEffect as useEffect74, useState as useState70 } from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx211, jsxs as jsxs105 } from "react/jsx-runtime";
@@ -37638,7 +37683,7 @@ var CodemodFooter = ({
     type: "loading"
   });
   const [projectInfo, setProjectInfo] = useState70(null);
-  useEffect75(() => {
+  useEffect74(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
       setProjectInfo(info.projectInfo);
@@ -37684,7 +37729,7 @@ var CodemodFooter = ({
       });
     }
   }, [codemod]);
-  useEffect75(() => {
+  useEffect74(() => {
     const abortController = new AbortController;
     let aborted = false;
     getCanApplyCodemod(abortController.signal).then(() => {
@@ -37702,7 +37747,7 @@ var CodemodFooter = ({
   }, [codemodStatus, getCanApplyCodemod, setSelectedModal]);
   const disabled = !valid || submitting || projectInfo === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
-  useEffect75(() => {
+  useEffect74(() => {
     if (disabled) {
       return;
     }
@@ -38524,7 +38569,7 @@ var OverrideInputPropsModal = () => {
 import {
   useCallback as useCallback107,
   useContext as useContext80,
-  useEffect as useEffect77,
+  useEffect as useEffect76,
   useMemo as useMemo117,
   useRef as useRef42,
   useState as useState75
@@ -39324,7 +39369,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect76, useMemo as useMemo116, useRef as useRef41, useState as useState74 } from "react";
+import { useEffect as useEffect75, useMemo as useMemo116, useRef as useRef41, useState as useState74 } from "react";
 import { jsx as jsx221, jsxs as jsxs114, Fragment as Fragment35 } from "react/jsx-runtime";
 var container49 = {
   paddingLeft: 16,
@@ -39356,7 +39401,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState74(false);
   const ref = useRef41(null);
   const keybindings = useKeybinding();
-  useEffect76(() => {
+  useEffect75(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -39370,7 +39415,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, []);
-  useEffect76(() => {
+  useEffect75(() => {
     if (!selected) {
       return;
     }
@@ -39387,7 +39432,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       binding.unregister();
     };
   }, [keybindings, result.onSelected, selected]);
-  useEffect76(() => {
+  useEffect75(() => {
     if (selected) {
       ref.current?.scrollIntoView({
         block: "nearest",
@@ -39601,7 +39646,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     };
   });
-  useEffect77(() => {
+  useEffect76(() => {
     setState({
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
@@ -39675,7 +39720,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       };
     });
   }, []);
-  useEffect77(() => {
+  useEffect76(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowUp",
       callback: onArrowUp,
@@ -39689,7 +39734,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       binding.unregister();
     };
   }, [keybindings, onArrowDown, onArrowUp]);
-  useEffect77(() => {
+  useEffect76(() => {
     if (mode !== "docs") {
       return;
     }
@@ -39714,7 +39759,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       cancelled = true;
     };
   }, [actualQuery, mode]);
-  useEffect77(() => {
+  useEffect76(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowDown",
       callback: onArrowDown,
@@ -40368,7 +40413,7 @@ import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback127,
   useContext as useContext83,
-  useEffect as useEffect80,
+  useEffect as useEffect79,
   useMemo as useMemo128,
   useReducer as useReducer2,
   useRef as useRef44,
@@ -40538,7 +40583,7 @@ import { useCallback as useCallback112 } from "react";
 import { BrowserSafeApis } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback111, useEffect as useEffect78, useMemo as useMemo121, useState as useState78 } from "react";
+import { useCallback as useCallback111, useEffect as useEffect77, useMemo as useMemo121, useState as useState78 } from "react";
 import { jsx as jsx234 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: 16,
@@ -40589,7 +40634,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback111(() => {
     setHovered(false);
   }, []);
-  useEffect78(() => {
+  useEffect77(() => {
     if (!copied) {
       return;
     }
@@ -41911,14 +41956,14 @@ import { BrowserSafeApis as BrowserSafeApis4 } from "@remotion/renderer/client";
 import { useCallback as useCallback119, useMemo as useMemo123 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext82, useEffect as useEffect79, useRef as useRef43, useState as useState80 } from "react";
+import { useContext as useContext82, useEffect as useEffect78, useRef as useRef43, useState as useState80 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState80(false);
   const { previewServerState: state, subscribeToEvent } = useContext82(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef43("");
   currentOutName.current = outName;
-  useEffect79(() => {
+  useEffect78(() => {
     if (!clientId) {
       return;
     }
@@ -41934,7 +41979,7 @@ var useFileExistence = (outName) => {
       unsubscribeFromFileExistenceWatcher({ file: outName, clientId });
     };
   }, [clientId, outName]);
-  useEffect79(() => {
+  useEffect78(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-deleted") {
         return;
@@ -41951,7 +41996,7 @@ var useFileExistence = (outName) => {
       unsub();
     };
   }, [outName, subscribeToEvent]);
-  useEffect79(() => {
+  useEffect78(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-undeleted") {
         return;
@@ -44003,7 +44048,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  useEffect80(() => {
+  useEffect79(() => {
     return () => {
       isMounted.current = false;
     };
@@ -44172,7 +44217,7 @@ var RenderModal = ({
       onClickVideo();
     }
   }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
-  useEffect80(() => {
+  useEffect79(() => {
     if (renderDisabled) {
       return;
     }
@@ -44500,7 +44545,7 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect81, useRef as useRef45, useState as useState82 } from "react";
+import { useEffect as useEffect80, useRef as useRef45, useState as useState82 } from "react";
 var useEncodableAudioCodecs = (container60) => {
   const cacheRef = useRef45({});
   const [codecsByContainer, setCodecsByContainer] = useState82(() => {
@@ -44508,7 +44553,7 @@ var useEncodableAudioCodecs = (container60) => {
       [container60]: getSupportedAudioCodecsForContainer(container60)
     };
   });
-  useEffect81(() => {
+  useEffect80(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -44542,7 +44587,7 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect82, useRef as useRef46, useState as useState83 } from "react";
+import { useEffect as useEffect81, useRef as useRef46, useState as useState83 } from "react";
 var useEncodableVideoCodecs = (container60) => {
   const cacheRef = useRef46({});
   const [codecsByContainer, setCodecsByContainer] = useState83(() => {
@@ -44550,7 +44595,7 @@ var useEncodableVideoCodecs = (container60) => {
       [container60]: getSupportedVideoCodecsForContainer(container60)
     };
   });
-  useEffect82(() => {
+  useEffect81(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -45189,7 +45234,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback129, useEffect as useEffect83, useState as useState84 } from "react";
+import { useCallback as useCallback129, useEffect as useEffect82, useState as useState84 } from "react";
 
 // src/icons/check-circle-filled.tsx
 import { jsx as jsx264 } from "react/jsx-runtime";
@@ -45411,7 +45456,7 @@ var WebRenderModalLicense = ({
 }) => {
   const [licenseValidation, setLicenseValidation] = useState84({ valid: true, message: null, details: null });
   const [isLoading, setIsLoading] = useState84(false);
-  useEffect83(() => {
+  useEffect82(() => {
     if (licenseKey === null || licenseKey === "free-license") {
       return setLicenseValidation({
         valid: true,
@@ -45760,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);
@@ -45778,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);
@@ -45824,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,
@@ -45833,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) => {
@@ -46245,7 +46307,7 @@ var WebRenderModalWithLoader = (props) => {
 import { useCallback as useCallback134, useMemo as useMemo135 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback132, useEffect as useEffect84, useState as useState86 } from "react";
+import { useCallback as useCallback132, useEffect as useEffect83, useState as useState86 } from "react";
 import { jsx as jsx269, jsxs as jsxs145 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
@@ -46283,7 +46345,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect84(() => {
+  useEffect83(() => {
     if (!copied) {
       return;
     }
@@ -46540,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,
@@ -46635,7 +46690,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect85(() => {
+  useEffect84(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -46833,7 +46888,7 @@ var ModalsProvider = ({ children }) => {
 
 // src/components/RenderQueue/ClientRenderQueueProcessor.tsx
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback138, useContext as useContext87, useEffect as useEffect86 } from "react";
+import { useCallback as useCallback138, useContext as useContext87, useEffect as useEffect85 } from "react";
 var downloadBlob = (blob, filename) => {
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
@@ -46969,7 +47024,7 @@ var ClientRenderQueueProcessor = () => {
     markClientJobFailed,
     markClientJobCancelled
   ]);
-  useEffect86(() => {
+  useEffect85(() => {
     setProcessJobCallback(processJob);
     return () => setProcessJobCallback(null);
   }, [processJob, setProcessJobCallback]);
@@ -46977,7 +47032,7 @@ var ClientRenderQueueProcessor = () => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect87, useMemo as useMemo141, useState as useState92 } from "react";
+import { useEffect as useEffect86, useMemo as useMemo141, useState as useState92 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -47001,7 +47056,7 @@ var SetTimelineInOutProvider = ({ children }) => {
       setInAndOutFrames
     };
   }, []);
-  useEffect87(() => {
+  useEffect86(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
   return /* @__PURE__ */ jsx279(TimelineInOutContext.Provider, {