@remotion/studio 4.0.433 → 4.0.435

package/dist/esm/previewEntry.mjs

@@ -3787,6 +3787,15 @@ var sortItemsByNonceHistory = (items) => {
   return result;
 };
 
+// src/state/modals.ts
+import { createContext as createContext9 } from "react";
+var ModalsContext = createContext9({
+  selectedModal: null,
+  setSelectedModal: () => {
+    return;
+  }
+});
+
 // src/components/CompositionSelectorItem.tsx
 import { useCallback as useCallback23, useContext as useContext8, useMemo as useMemo26, useState as useState20 } from "react";
 
@@ -3850,15 +3859,6 @@ var FilmIcon = ({ color, ...props }) => {
   });
 };
 
-// src/state/modals.ts
-import { createContext as createContext9 } from "react";
-var ModalsContext = createContext9({
-  selectedModal: null,
-  setSelectedModal: () => {
-    return;
-  }
-});
-
 // src/components/CompositionContextButton.tsx
 import { useCallback as useCallback20, useContext as useContext6, useMemo as useMemo23 } from "react";
 
@@ -3977,7 +3977,13 @@ var RenderQueueContextProvider = ({ children }) => {
     setClientJobs((prev) => prev.map((job) => job.id === nextJob.id ? {
       ...job,
       status: "running",
-      progress: { encodedFrames: 0, totalFrames: 0 }
+      progress: {
+        encodedFrames: 0,
+        totalFrames: 0,
+        doneIn: null,
+        renderEstimatedTime: 0,
+        progress: 0
+      }
     } : job));
     processJobCallbackRef.current(nextJob);
   }, [clientJobs, currentlyProcessing]);
@@ -5150,7 +5156,8 @@ var SidebarRenderButton = ({ composition, visible }) => {
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults,
-      initialDarkMode: defaults.darkMode
+      initialDarkMode: defaults.darkMode,
+      readOnlyStudio: false
     });
     if (isMobileLayout) {
       setSidebarCollapsedState({ left: "collapsed", right: "collapsed" });
@@ -5196,7 +5203,8 @@ var itemStyle = {
   width: "100%",
   textAlign: "left",
   backgroundColor: BACKGROUND,
-  height: COMPOSITION_ITEM_HEIGHT
+  height: COMPOSITION_ITEM_HEIGHT,
+  userSelect: "none"
 };
 var labelStyle2 = {
   textAlign: "left",
@@ -5448,12 +5456,11 @@ var renderFrame = (frame2, fps) => {
 
 // src/components/CurrentComposition.tsx
 import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
-var CURRENT_COMPOSITION_HEIGHT = 80;
+var CURRENT_COMPOSITION_HEIGHT = 64;
 var container11 = {
   height: CURRENT_COMPOSITION_HEIGHT,
   display: "block",
-  borderBottom: `1px solid ${BORDER_COLOR}`,
-  padding: 12,
+  padding: "6px 12px",
   color: "white",
   backgroundColor: BACKGROUND
 };
@@ -5555,6 +5562,29 @@ var container12 = {
   overflow: "hidden",
   backgroundColor: BACKGROUND
 };
+var QUICK_SWITCHER_TRIGGER_HEIGHT = 38;
+var quickSwitcherArea = {
+  padding: "4px 12px",
+  borderBottom: `1px solid ${BORDER_COLOR}`
+};
+var quickSwitcherTrigger = {
+  backgroundColor: "rgba(255, 255, 255, 0.06)",
+  borderRadius: 5,
+  padding: "4px 10px",
+  color: LIGHT_TEXT,
+  fontSize: 12,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: "none",
+  width: "100%",
+  appearance: "none"
+};
+var shortcutLabel = {
+  fontSize: 11,
+  opacity: 0.6
+};
 var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
   initial.push(openFolderKey({
     folderName: initialFolderName,
@@ -5569,6 +5599,7 @@ var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
 var CompositionSelector = () => {
   const { compositions, canvasContent, folders } = useContext9(Internals9.CompositionManager);
   const { foldersExpanded } = useContext9(ExpandedFoldersContext);
+  const { setSelectedModal } = useContext9(ModalsContext);
   const { tabIndex } = useZIndex();
   const selectComposition = useSelectComposition();
   const sortedCompositions = useMemo27(() => {
@@ -5582,17 +5613,43 @@ var CompositionSelector = () => {
   }, [sortedCompositions, sortedFolders, foldersExpanded]);
   const list = useMemo27(() => {
     return {
-      height: `calc(100% - ${CURRENT_COMPOSITION_HEIGHT}px)`,
+      height: `calc(100% - ${CURRENT_COMPOSITION_HEIGHT}px - ${QUICK_SWITCHER_TRIGGER_HEIGHT}px)`,
       overflowY: "auto"
     };
   }, []);
   const toggleFolder = useCallback24((folderName, parentName) => {
     Internals9.compositionSelectorRef.current?.toggleFolder(folderName, parentName);
   }, []);
+  const openQuickSwitcher = useCallback24(() => {
+    setSelectedModal({
+      type: "quick-switcher",
+      mode: "compositions",
+      invocationTimestamp: Date.now()
+    });
+  }, [setSelectedModal]);
   return /* @__PURE__ */ jsxs23("div", {
     style: container12,
     children: [
       /* @__PURE__ */ jsx54(CurrentComposition, {}),
+      /* @__PURE__ */ jsx54("div", {
+        style: quickSwitcherArea,
+        children: /* @__PURE__ */ jsxs23("button", {
+          type: "button",
+          style: quickSwitcherTrigger,
+          onClick: openQuickSwitcher,
+          tabIndex,
+          children: [
+            "Search...",
+            areKeyboardShortcutsDisabled() ? null : /* @__PURE__ */ jsxs23("span", {
+              style: shortcutLabel,
+              children: [
+                cmdOrCtrlCharacter,
+                "+K"
+              ]
+            })
+          ]
+        })
+      }),
       /* @__PURE__ */ jsx54("div", {
         className: "__remotion-vertical-scrollbar",
         style: list,
@@ -11490,10 +11547,7 @@ var CurrentCompositionKeybindings = ({ readOnlyStudio }) => {
     if (!video) {
       return;
     }
-    if (readOnlyStudio) {
-      return showNotification("Studio is read-only", 2000);
-    }
-    if (type !== "connected") {
+    if (type !== "connected" && !SHOW_BROWSER_RENDERING && !readOnlyStudio) {
       showNotification("Studio server is offline", 2000);
       return;
     }
@@ -17296,7 +17350,10 @@ var ClientRenderQueueProcessor = () => {
       onProgress: (progress) => {
         onProgress(job.id, {
           encodedFrames: progress.encodedFrames,
-          totalFrames
+          totalFrames,
+          doneIn: progress.doneIn,
+          renderEstimatedTime: progress.renderEstimatedTime,
+          progress: progress.progress
         });
       },
       outputTarget: "web-fs",
@@ -17587,8 +17644,7 @@ var RenderQueueItemStatus = ({ job }) => {
   if (job.status === "running") {
     let progressValue;
     if (isClientJob) {
-      const { encodedFrames, totalFrames } = job.progress;
-      progressValue = totalFrames > 0 ? encodedFrames / totalFrames : 0;
+      progressValue = job.progress.progress;
     } else {
       progressValue = job.progress.value;
     }
@@ -17680,6 +17736,34 @@ var RenderQueueOutputName = ({ job }) => {
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
 import { useCallback as useCallback78, useContext as useContext43 } from "react";
+
+// src/components/RenderQueue/client-render-progress.ts
+var formatEtaString = (timeRemainingInMilliseconds) => {
+  const remainingTime = timeRemainingInMilliseconds / 1000;
+  const remainingTimeHours = Math.floor(remainingTime / 3600);
+  const remainingTimeMinutes = Math.floor(remainingTime % 3600 / 60);
+  const remainingTimeSeconds = Math.floor(remainingTime % 60);
+  return [
+    remainingTimeHours ? `${remainingTimeHours}h` : null,
+    remainingTimeMinutes ? `${remainingTimeMinutes}m` : null,
+    `${remainingTimeSeconds}s`
+  ].filter((value) => Boolean(value)).join(" ");
+};
+var getClientRenderProgressMessage = (progress) => {
+  if (progress.totalFrames === 0) {
+    return "Getting composition";
+  }
+  if (progress.doneIn !== null) {
+    return `Encoded ${progress.totalFrames}/${progress.totalFrames}`;
+  }
+  if (progress.renderEstimatedTime > 0) {
+    const etaString = `, time remaining: ${formatEtaString(progress.renderEstimatedTime)}`;
+    return `Rendering ${progress.encodedFrames}/${progress.totalFrames}${etaString}`;
+  }
+  return `Encoded ${progress.encodedFrames}/${progress.totalFrames}`;
+};
+
+// src/components/RenderQueue/RenderQueueProgressMessage.tsx
 import { jsx as jsx156 } from "react/jsx-runtime";
 var outputLocation2 = {
   ...renderQueueItemSubtitleStyle
@@ -17697,7 +17781,7 @@ var RenderQueueProgressMessage = ({ job }) => {
       jobId: job.id
     });
   }, [job.id, setSelectedModal]);
-  const message = isClientJob ? job.progress.totalFrames === 0 ? "Getting composition" : `Encoding frame ${job.progress.encodedFrames}/${job.progress.totalFrames}` : job.progress.message;
+  const message = isClientJob ? getClientRenderProgressMessage(job.progress) : job.progress.message;
   return /* @__PURE__ */ jsx156("button", {
     onClick,
     type: "button",
@@ -17816,7 +17900,8 @@ var makeRetryPayload = (job) => {
       initialHardwareAcceleration: defaults.hardwareAcceleration,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
-      renderDefaults: defaults
+      renderDefaults: defaults,
+      readOnlyStudio: false
     };
   }
   if (job.type === "sequence") {
@@ -17868,7 +17953,8 @@ var makeRetryPayload = (job) => {
       initialHardwareAcceleration: defaults.hardwareAcceleration,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
-      renderDefaults: defaults
+      renderDefaults: defaults,
+      readOnlyStudio: false
     };
   }
   if (job.type === "video") {
@@ -17920,7 +18006,8 @@ var makeRetryPayload = (job) => {
       initialHardwareAcceleration: job.hardwareAcceleration,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
-      renderDefaults: defaults
+      renderDefaults: defaults,
+      readOnlyStudio: false
     };
   }
   throw new Error(`Job ${JSON.stringify(job)} Not implemented`);
@@ -18813,14 +18900,6 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 import { useContext as useContext57, useEffect as useEffect61, useRef as useRef32, useState as useState64 } from "react";
 import { Internals as Internals45 } from "remotion";
 
-// src/helpers/should-show-render-button.ts
-var shouldShowRenderButton = (readOnlyStudio) => {
-  if (readOnlyStudio) {
-    return SHOW_BROWSER_RENDERING;
-  }
-  return true;
-};
-
 // src/state/loop.ts
 var key = "remotion.loop";
 var persistLoopOption = (option) => {
@@ -19681,7 +19760,7 @@ var label8 = {
 var RENDER_TYPE_STORAGE_KEY = "remotion.renderType";
 var getInitialRenderType = (readOnlyStudio) => {
   if (!SHOW_BROWSER_RENDERING) {
-    return "server-render";
+    return readOnlyStudio ? "render-command" : "server-render";
   }
   if (readOnlyStudio) {
     return "client-render";
@@ -19738,8 +19817,15 @@ var RenderButton = ({
     });
   }, [refresh]);
   const connectionStatus = useContext55(StudioServerConnectionCtx).previewServerState.type;
-  const canRender = connectionStatus === "connected" || SHOW_BROWSER_RENDERING;
+  const canServerRender = connectionStatus === "connected";
+  const canRender = canServerRender || SHOW_BROWSER_RENDERING || readOnlyStudio;
   const renderType = useMemo95(() => {
+    if (readOnlyStudio) {
+      if (!SHOW_BROWSER_RENDERING) {
+        return "render-command";
+      }
+      return preferredRenderType === "render-command" ? "render-command" : "client-render";
+    }
     if (connectionStatus === "disconnected" && SHOW_BROWSER_RENDERING) {
       return "client-render";
     }
@@ -19747,9 +19833,9 @@ var RenderButton = ({
       return "server-render";
     }
     return preferredRenderType;
-  }, [connectionStatus, preferredRenderType]);
+  }, [connectionStatus, preferredRenderType, readOnlyStudio]);
   const shortcut = areKeyboardShortcutsDisabled() ? "" : "(R)";
-  const tooltip = canRender ? "Export the current composition " + shortcut : "Connect to the Studio server to render";
+  const tooltip = renderType === "render-command" ? "Copy a CLI command to render this composition " + shortcut : canRender ? "Export the current composition " + shortcut : "Connect to the Studio server to render";
   const iconStyle4 = useMemo95(() => {
     return {
       style: {
@@ -19761,7 +19847,7 @@ var RenderButton = ({
   const video = Internals43.useVideo();
   const getCurrentFrame2 = PlayerInternals14.useFrameImperative();
   const { props } = useContext55(Internals43.EditorPropsContext);
-  const openServerRenderModal = useCallback91(() => {
+  const openServerRenderModal = useCallback91((copyCommandOnly) => {
     if (!video) {
       return null;
     }
@@ -19771,6 +19857,7 @@ var RenderButton = ({
     }
     setSelectedModal({
       type: "server-render",
+      readOnlyStudio: copyCommandOnly,
       compositionId: video.id,
       initialFrame: getCurrentFrame2(),
       initialStillImageFormat: defaults.stillImageFormat,
@@ -19854,8 +19941,12 @@ var RenderButton = ({
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback91(() => {
+    if (renderType === "render-command") {
+      openServerRenderModal(true);
+      return;
+    }
     if (!SHOW_BROWSER_RENDERING || renderType === "server-render") {
-      openServerRenderModal();
+      openServerRenderModal(false);
     } else {
       openClientRenderModal();
     }
@@ -19870,12 +19961,40 @@ var RenderButton = ({
     } catch {}
     setDropdownOpened(false);
     if (newType === "server-render") {
-      openServerRenderModal();
+      openServerRenderModal(false);
+    } else if (newType === "render-command") {
+      openServerRenderModal(true);
     } else {
       openClientRenderModal();
     }
-  }, [openServerRenderModal, openClientRenderModal]);
+  }, [openClientRenderModal, openServerRenderModal]);
   const dropdownValues = useMemo95(() => {
+    if (readOnlyStudio) {
+      return [
+        {
+          type: "item",
+          id: "client-render",
+          label: "Render on web",
+          value: "client-render",
+          onClick: () => handleRenderTypeChange("client-render"),
+          keyHint: null,
+          leftItem: null,
+          subMenu: null,
+          quickSwitcherLabel: null
+        },
+        {
+          type: "item",
+          id: "render-command",
+          label: "Render via CLI",
+          value: "render-command",
+          onClick: () => handleRenderTypeChange("render-command"),
+          keyHint: null,
+          leftItem: null,
+          subMenu: null,
+          quickSwitcherLabel: null
+        }
+      ];
+    }
     return [
       {
         type: "item",
@@ -19900,7 +20019,7 @@ var RenderButton = ({
         quickSwitcherLabel: null
       }
     ];
-  }, [handleRenderTypeChange]);
+  }, [handleRenderTypeChange, readOnlyStudio]);
   const spaceToBottom = useMemo95(() => {
     const margin2 = 10;
     if (size4 && dropdownOpened) {
@@ -19942,10 +20061,10 @@ var RenderButton = ({
       cursor: canRender ? "pointer" : "inherit"
     };
   }, [canRender]);
-  const renderLabel = renderType === "server-render" ? "Render" : "Render on web";
+  const renderLabel = renderType === "server-render" ? "Render" : renderType === "render-command" ? "Render via CLI" : "Render on web";
   const shouldShowDropdown = useMemo95(() => {
     if (readOnlyStudio) {
-      return false;
+      return SHOW_BROWSER_RENDERING;
     }
     if (!SHOW_BROWSER_RENDERING) {
       return false;
@@ -19960,8 +20079,8 @@ var RenderButton = ({
       /* @__PURE__ */ jsx180("button", {
         style: { display: "none" },
         id: "render-modal-button-server",
-        disabled: !canRender,
-        onClick: openServerRenderModal,
+        disabled: !canServerRender,
+        onClick: () => openServerRenderModal(false),
         type: "button"
       }),
       " ",
@@ -20009,7 +20128,7 @@ var RenderButton = ({
                 ref: dropdownRef,
                 type: "button",
                 style: dropdownTriggerStyle,
-                disabled: connectionStatus !== "connected",
+                disabled: !readOnlyStudio && connectionStatus !== "connected",
                 className: MENU_INITIATOR_CLASSNAME,
                 onPointerDown,
                 onClick: onClickDropdown,
@@ -20348,9 +20467,9 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
           /* @__PURE__ */ jsx183(Spacing, {
             x: 2
           }),
-          shouldShowRenderButton(readOnlyStudio) ? /* @__PURE__ */ jsx183(RenderButton, {
+          /* @__PURE__ */ jsx183(RenderButton, {
             readOnlyStudio
-          }) : null,
+          }),
           /* @__PURE__ */ jsx183(Spacing, {
             x: 1.5
           })
@@ -27514,9 +27633,15 @@ var right3 = {
   textAlign: "right",
   flex: 1
 };
-var EncodingProgress = ({ encodedFrames, totalFrames }) => {
-  const done = encodedFrames === totalFrames;
-  const progress = totalFrames > 0 ? encodedFrames / totalFrames : 0;
+var ProgressStatus = ({ encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress }) => {
+  const done = doneIn !== null;
+  const message = getClientRenderProgressMessage({
+    encodedFrames,
+    totalFrames,
+    doneIn,
+    renderEstimatedTime,
+    progress
+  });
   return /* @__PURE__ */ jsxs121("div", {
     style: progressItem,
     children: [
@@ -27528,8 +27653,15 @@ var EncodingProgress = ({ encodedFrames, totalFrames }) => {
       }),
       /* @__PURE__ */ jsx240("div", {
         style: label11,
-        children: done ? `Encoded ${totalFrames} frames` : `Encoding ${encodedFrames} / ${totalFrames} frames`
-      })
+        children: message
+      }),
+      doneIn !== null ? /* @__PURE__ */ jsxs121("div", {
+        style: right3,
+        children: [
+          doneIn,
+          "ms"
+        ]
+      }) : null
     ]
   });
 };
@@ -27587,15 +27719,18 @@ var ClientRenderProgress = ({ job }) => {
       ]
     });
   }
-  const { encodedFrames, totalFrames } = job.progress;
+  const { encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress } = job.progress;
   return /* @__PURE__ */ jsxs121("div", {
     children: [
       /* @__PURE__ */ jsx240(Spacing, {
         y: 0.5
       }),
-      job.type === "client-video" && /* @__PURE__ */ jsx240(EncodingProgress, {
+      job.type === "client-video" && /* @__PURE__ */ jsx240(ProgressStatus, {
         encodedFrames,
-        totalFrames
+        totalFrames,
+        doneIn,
+        renderEstimatedTime,
+        progress
       }),
       /* @__PURE__ */ jsx240(Spacing, {
         y: 1
@@ -27953,7 +28088,7 @@ var RenderStatusModal = ({
 };
 
 // src/components/RenderModal/ServerRenderModal.tsx
-import { BrowserSafeApis as BrowserSafeApis10 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis11 } from "@remotion/renderer/client";
 import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback137,
@@ -27979,6 +28114,252 @@ var envVariablesArrayToObject = (envVariables) => {
   }, {});
 };
 
+// src/helpers/make-render-command.ts
+import { BrowserSafeApis } from "@remotion/renderer/client";
+var shellQuote = (value) => {
+  return `'${value.replace(/'/g, "'\\''")}'`;
+};
+var addFlagWithValue = (flags, flag, value) => {
+  if (value === null || value === undefined) {
+    return;
+  }
+  flags.push(`--${flag}=${shellQuote(String(value))}`);
+};
+var addBooleanFlag = (flags, flag, value) => {
+  if (value) {
+    flags.push(`--${flag}`);
+  }
+};
+var valueFlag = (flag, value, defaultValue) => {
+  return { flag, value, defaultValue };
+};
+var booleanFlag = (flag, value, defaultValue) => {
+  return { flag, value, defaultValue };
+};
+var addValueFlagsIfChanged = (flags, mappings) => {
+  for (const mapping of mappings) {
+    if (mapping.value !== mapping.defaultValue) {
+      addFlagWithValue(flags, mapping.flag, mapping.value);
+    }
+  }
+};
+var addTrueBooleanFlagsIfChanged = (flags, mappings) => {
+  for (const mapping of mappings) {
+    if (mapping.value && mapping.value !== mapping.defaultValue) {
+      addBooleanFlag(flags, mapping.flag, true);
+    }
+  }
+};
+var getNpmRemotionCommandPrefix = (version) => {
+  return version.trim() === "" ? "bunx --yes --location=global -p @remotion/cli remotion" : `bunx --yes --location=global -p @remotion/cli@${version} remotion`;
+};
+var normalizeServeUrlForRenderCommand = ({
+  locationHref,
+  compositionId
+}) => {
+  const parsed = new URL(locationHref);
+  parsed.hash = "";
+  parsed.search = "";
+  const suffix2 = `/${compositionId}`;
+  if (parsed.pathname === suffix2) {
+    parsed.pathname = "/";
+  } else if (parsed.pathname.endsWith(suffix2)) {
+    const basePath = parsed.pathname.slice(0, -suffix2.length);
+    parsed.pathname = basePath === "" ? "/" : basePath;
+  }
+  if (parsed.pathname !== "/" && parsed.pathname.endsWith("/")) {
+    parsed.pathname = parsed.pathname.slice(0, -1);
+  }
+  return `${parsed.origin}${parsed.pathname === "/" ? "" : parsed.pathname}`;
+};
+var trimDefaultOutPrefix = (outName) => {
+  if (outName.startsWith("out/")) {
+    const trimmed = outName.slice("out/".length);
+    return trimmed.length === 0 ? outName : trimmed;
+  }
+  if (outName.startsWith("./out/")) {
+    const trimmed = outName.slice("./out/".length);
+    return trimmed.length === 0 ? outName : trimmed;
+  }
+  return outName;
+};
+var getRenderMediaFlag = (option) => {
+  return BrowserSafeApis.optionsMap.renderMedia[option].cliFlag;
+};
+var renderMediaValueFlag = (option, value, defaultValue) => {
+  return valueFlag(getRenderMediaFlag(option), value, defaultValue);
+};
+var renderMediaBooleanFlag = (option, value, defaultValue) => {
+  return booleanFlag(getRenderMediaFlag(option), value, defaultValue);
+};
+var makeReadOnlyStudioRenderCommand = ({
+  remotionVersion,
+  locationHref,
+  compositionId,
+  outName,
+  renderMode,
+  renderDefaults,
+  durationInFrames,
+  concurrency,
+  frame: frame2,
+  startFrame,
+  endFrame,
+  stillImageFormat,
+  sequenceImageFormat,
+  videoImageFormat,
+  jpegQuality,
+  codec,
+  muted,
+  enforceAudioTrack,
+  proResProfile,
+  x264Preset,
+  pixelFormat,
+  crf,
+  videoBitrate,
+  audioBitrate,
+  audioCodec,
+  everyNthFrame,
+  numberOfGifLoops,
+  disallowParallelEncoding,
+  encodingBufferSize,
+  encodingMaxRate,
+  forSeamlessAacConcatenation,
+  separateAudioTo,
+  colorSpace,
+  scale,
+  logLevel,
+  delayRenderTimeout,
+  hardwareAcceleration,
+  chromeMode,
+  headless,
+  disableWebSecurity,
+  ignoreCertificateErrors,
+  gl,
+  userAgent,
+  multiProcessOnLinux,
+  darkMode,
+  offthreadVideoCacheSizeInBytes,
+  offthreadVideoThreads,
+  mediaCacheSizeInBytes,
+  beepOnFinish,
+  repro,
+  metadata,
+  envVariables,
+  inputProps
+}) => {
+  const serveUrl = normalizeServeUrlForRenderCommand({
+    locationHref,
+    compositionId
+  });
+  const isStillRender = renderMode === "still";
+  const isSequenceRender = renderMode === "sequence";
+  const hasCodecSpecificOptions = !isSequenceRender;
+  const commandType = isStillRender ? "still" : "render";
+  const command = getNpmRemotionCommandPrefix(remotionVersion);
+  const { options } = BrowserSafeApis;
+  const flags = [];
+  addValueFlagsIfChanged(flags, [
+    valueFlag(options.scaleOption.cliFlag, scale, renderDefaults.scale),
+    renderMediaValueFlag("logLevel", logLevel, renderDefaults.logLevel),
+    renderMediaValueFlag("timeoutInMilliseconds", delayRenderTimeout, renderDefaults.delayRenderTimeout),
+    renderMediaValueFlag("chromeMode", chromeMode, renderDefaults.chromeMode),
+    valueFlag(options.glOption.cliFlag, gl, renderDefaults.openGlRenderer),
+    valueFlag(options.userAgentOption.cliFlag, userAgent, renderDefaults.userAgent),
+    renderMediaValueFlag("offthreadVideoCacheSizeInBytes", offthreadVideoCacheSizeInBytes, renderDefaults.offthreadVideoCacheSizeInBytes),
+    renderMediaValueFlag("offthreadVideoThreads", offthreadVideoThreads, renderDefaults.offthreadVideoThreads),
+    renderMediaValueFlag("mediaCacheSizeInBytes", mediaCacheSizeInBytes, renderDefaults.mediaCacheSizeInBytes)
+  ]);
+  if (headless !== renderDefaults.headless) {
+    addFlagWithValue(flags, options.headlessOption.cliFlag, !headless);
+  }
+  addTrueBooleanFlagsIfChanged(flags, [
+    booleanFlag(options.disableWebSecurityOption.cliFlag, disableWebSecurity, renderDefaults.disableWebSecurity),
+    booleanFlag(options.ignoreCertificateErrorsOption.cliFlag, ignoreCertificateErrors, renderDefaults.ignoreCertificateErrors),
+    booleanFlag(options.enableMultiprocessOnLinuxOption.cliFlag, multiProcessOnLinux, renderDefaults.multiProcessOnLinux),
+    booleanFlag(options.darkModeOption.cliFlag, darkMode, renderDefaults.darkMode),
+    booleanFlag(options.beepOnFinishOption.cliFlag, beepOnFinish, renderDefaults.beepOnFinish)
+  ]);
+  if (isStillRender) {
+    addValueFlagsIfChanged(flags, [
+      valueFlag(options.stillFrameOption.cliFlag, frame2, 0),
+      valueFlag(options.stillImageFormatOption.cliFlag, stillImageFormat, renderDefaults.stillImageFormat),
+      valueFlag(options.jpegQualityOption.cliFlag, jpegQuality, renderDefaults.jpegQuality)
+    ]);
+  } else {
+    addValueFlagsIfChanged(flags, [
+      valueFlag(options.concurrencyOption.cliFlag, concurrency, renderDefaults.concurrency)
+    ]);
+    if (isSequenceRender) {
+      addBooleanFlag(flags, options.imageSequenceOption.cliFlag, true);
+      if (sequenceImageFormat !== "jpeg") {
+        addFlagWithValue(flags, options.videoImageFormatOption.cliFlag, sequenceImageFormat);
+      }
+    } else {
+      addValueFlagsIfChanged(flags, [
+        valueFlag(options.videoImageFormatOption.cliFlag, videoImageFormat, renderDefaults.videoImageFormat),
+        renderMediaValueFlag("hardwareAcceleration", hardwareAcceleration, renderDefaults.hardwareAcceleration)
+      ]);
+    }
+    if (hasCodecSpecificOptions && codec !== renderDefaults.codec) {
+      addFlagWithValue(flags, getRenderMediaFlag("codec"), codec);
+    }
+    if (startFrame !== 0 || endFrame !== durationInFrames - 1) {
+      addFlagWithValue(flags, options.framesOption.cliFlag, `${startFrame}-${endFrame}`);
+    }
+    if (hasCodecSpecificOptions) {
+      addTrueBooleanFlagsIfChanged(flags, [
+        renderMediaBooleanFlag("muted", muted, renderDefaults.muted),
+        booleanFlag(options.enforceAudioOption.cliFlag, enforceAudioTrack, renderDefaults.enforceAudioTrack),
+        renderMediaBooleanFlag("forSeamlessAacConcatenation", forSeamlessAacConcatenation, renderDefaults.forSeamlessAacConcatenation)
+      ]);
+      addValueFlagsIfChanged(flags, [
+        valueFlag(options.pixelFormatOption.cliFlag, pixelFormat, renderDefaults.pixelFormat),
+        renderMediaValueFlag("colorSpace", colorSpace, renderDefaults.colorSpace),
+        valueFlag(options.proResProfileOption.cliFlag, proResProfile, renderDefaults.proResProfile),
+        renderMediaValueFlag("x264Preset", x264Preset, renderDefaults.x264Preset),
+        valueFlag(options.crfOption.cliFlag, crf, null),
+        valueFlag(options.jpegQualityOption.cliFlag, jpegQuality, renderDefaults.jpegQuality),
+        renderMediaValueFlag("videoBitrate", videoBitrate, renderDefaults.videoBitrate),
+        renderMediaValueFlag("audioBitrate", audioBitrate, renderDefaults.audioBitrate),
+        valueFlag(options.everyNthFrameOption.cliFlag, everyNthFrame, renderDefaults.everyNthFrame),
+        renderMediaValueFlag("numberOfGifLoops", numberOfGifLoops, renderDefaults.numberOfGifLoops),
+        renderMediaValueFlag("encodingBufferSize", encodingBufferSize, renderDefaults.encodingBufferSize),
+        renderMediaValueFlag("encodingMaxRate", encodingMaxRate, renderDefaults.encodingMaxRate),
+        renderMediaValueFlag("separateAudioTo", separateAudioTo, null)
+      ]);
+      const defaultAudioCodec = BrowserSafeApis.defaultAudioCodecs[codec]?.compressed;
+      if (audioCodec !== defaultAudioCodec) {
+        addFlagWithValue(flags, getRenderMediaFlag("audioCodec"), audioCodec);
+      }
+    }
+    addTrueBooleanFlagsIfChanged(flags, [
+      renderMediaBooleanFlag("disallowParallelEncoding", disallowParallelEncoding, false),
+      renderMediaBooleanFlag("repro", repro, renderDefaults.repro)
+    ]);
+  }
+  if (metadata) {
+    for (const [key5, value] of Object.entries(metadata)) {
+      addFlagWithValue(flags, options.metadataOption.cliFlag, `${key5}=${value}`);
+    }
+  }
+  if (Object.keys(inputProps).length > 0) {
+    addFlagWithValue(flags, options.propsOption.cliFlag, JSON.stringify(inputProps));
+  }
+  const envArgs = Object.entries(envVariables).sort(([a], [b]) => a.localeCompare(b)).map(([key5, value]) => shellQuote(`${key5}=${value}`));
+  const renderCommand = [
+    command,
+    commandType,
+    shellQuote(serveUrl),
+    shellQuote(compositionId),
+    shellQuote(trimDefaultOutPrefix(outName)),
+    ...flags
+  ].join(" ");
+  if (envArgs.length === 0) {
+    return renderCommand;
+  }
+  return ["env", ...envArgs, renderCommand].join(" ");
+};
+
 // src/helpers/render-modal-sections.ts
 import { useMemo as useMemo128, useState as useState85 } from "react";
 var useRenderModalSections = (renderMode, codec) => {
@@ -28120,14 +28501,14 @@ var VerticalTab = ({ children, onClick, style: style12, selected }) => {
 };
 
 // src/components/RenderModal/CrfSetting.tsx
-import { BrowserSafeApis as BrowserSafeApis2 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis3 } from "@remotion/renderer/client";
 import { useState as useState88 } from "react";
 
 // src/components/RenderModal/NumberSetting.tsx
 import { useCallback as useCallback122 } from "react";
 
 // src/components/RenderModal/OptionExplainerBubble.tsx
-import { BrowserSafeApis } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis2 } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
 import { useCallback as useCallback121, useEffect as useEffect84, useMemo as useMemo130, useState as useState87 } from "react";
@@ -28354,7 +28735,7 @@ var OptionExplainer = ({ option }) => {
 // src/components/RenderModal/OptionExplainerBubble.tsx
 import { jsx as jsx251 } from "react/jsx-runtime";
 var OptionExplainerBubble = ({ id }) => {
-  const option = BrowserSafeApis.options[id];
+  const option = BrowserSafeApis2.options[id];
   return /* @__PURE__ */ jsx251(InfoBubble, {
     title: "Learn more about this option",
     children: /* @__PURE__ */ jsx251(OptionExplainer, {
@@ -28422,8 +28803,8 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
 // src/components/RenderModal/CrfSetting.tsx
 import { jsx as jsx253 } from "react/jsx-runtime";
 var getDefaultCrfState = () => {
-  return BrowserSafeApis2.validCodecs.map((c) => {
-    return [c, BrowserSafeApis2.getDefaultCrfForCodec(c)];
+  return BrowserSafeApis3.validCodecs.map((c) => {
+    return [c, BrowserSafeApis3.getDefaultCrfForCodec(c)];
   }).reduce((acc, [codec, crf]) => {
     return {
       ...acc,
@@ -28433,7 +28814,7 @@ var getDefaultCrfState = () => {
 };
 var useCrfState = (codec) => {
   const [state, setState] = useState88(() => getDefaultCrfState());
-  const range = BrowserSafeApis2.getValidCrfRanges(codec);
+  const range = BrowserSafeApis3.getValidCrfRanges(codec);
   const setCrf = (updater) => {
     setState((q) => {
       const val = q[codec];
@@ -28466,7 +28847,7 @@ var CrfSetting = ({ crf, setCrf, min, max, option }) => {
 };
 
 // src/components/RenderModal/get-default-codecs.ts
-import { BrowserSafeApis as BrowserSafeApis3 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis4 } from "@remotion/renderer/client";
 import { NoReactAPIs } from "@remotion/renderer/pure";
 var getDefaultCodecs = ({
   defaultConfigurationVideoCodec,
@@ -28486,7 +28867,7 @@ var getDefaultCodecs = ({
       initialVideoCodecForVideoTab: NoReactAPIs.isAudioCodec(defaultConfigurationVideoCodec) ? "h264" : defaultConfigurationVideoCodec
     };
   }
-  const suitableAudioCodecForVideoCodec = BrowserSafeApis3.defaultAudioCodecs[userPreferredVideoCodec].compressed;
+  const suitableAudioCodecForVideoCodec = BrowserSafeApis4.defaultAudioCodecs[userPreferredVideoCodec].compressed;
   return {
     initialAudioCodec: defaultConfigurationAudioCodec ?? suitableAudioCodecForVideoCodec,
     initialVideoCodec: userPreferredVideoCodec,
@@ -28506,7 +28887,7 @@ var getStringBeforeSuffix = (fileName) => {
 };
 
 // src/components/RenderModal/out-name-checker.ts
-import { BrowserSafeApis as BrowserSafeApis4 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis5 } from "@remotion/renderer/client";
 var invalidCharacters = ["?", "*", "+", ":", "%"];
 var isValidStillExtension = (extension, stillImageFormat) => {
   if (stillImageFormat === "jpeg" && extension === "jpg") {
@@ -28546,8 +28927,8 @@ var isValidOutName = ({
 }) => {
   const extension = outName.substring(outName.lastIndexOf(".") + 1);
   const prefix = outName.substring(0, outName.lastIndexOf("."));
-  const map = BrowserSafeApis4.defaultFileExtensionMap[codec];
-  if (BrowserSafeApis4.supportedAudioCodecs[codec].length > 0 && !(audioCodec in map.forAudioCodec)) {
+  const map = BrowserSafeApis5.defaultFileExtensionMap[codec];
+  if (BrowserSafeApis5.supportedAudioCodecs[codec].length > 0 && !(audioCodec in map.forAudioCodec)) {
     throw new Error(`Audio codec ${audioCodec} is not supported for codec ${codec}`);
   }
   const hasDotAfterSlash = () => {
@@ -28563,7 +28944,7 @@ var isValidOutName = ({
     return prefix.split("").some((char) => invalidCharacters.includes(char));
   };
   if (renderMode === "video" || renderMode === "audio") {
-    BrowserSafeApis4.validateOutputFilename({
+    BrowserSafeApis5.validateOutputFilename({
       codec,
       audioCodecSetting: audioCodec ?? null,
       extension,
@@ -28651,7 +29032,7 @@ var flexer = {
 };
 
 // src/components/RenderModal/RenderModalAdvanced.tsx
-import { BrowserSafeApis as BrowserSafeApis5 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis6 } from "@remotion/renderer/client";
 import { useCallback as useCallback126, useMemo as useMemo131 } from "react";
 
 // src/helpers/presets-labels.ts
@@ -29084,7 +29465,7 @@ var RenderModalAdvanced = ({
     });
   }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
   const chromeModeOptions = useMemo131(() => {
-    return BrowserSafeApis5.validChromeModeOptions.map((option) => {
+    return BrowserSafeApis6.validChromeModeOptions.map((option) => {
       return {
         label: option,
         onClick: () => setChromeModeOption(option),
@@ -29100,7 +29481,7 @@ var RenderModalAdvanced = ({
     });
   }, [chromeModeOption, setChromeModeOption]);
   const x264PresetOptions = useMemo131(() => {
-    return BrowserSafeApis5.x264PresetOptions.map((option) => {
+    return BrowserSafeApis6.x264PresetOptions.map((option) => {
       return {
         label: labelx264Preset(option),
         onClick: () => setx264Preset(option),
@@ -29116,7 +29497,7 @@ var RenderModalAdvanced = ({
     });
   }, [setx264Preset, x264Preset]);
   const hardwareAccelerationValues = useMemo131(() => {
-    return BrowserSafeApis5.hardwareAccelerationOptions.map((option) => {
+    return BrowserSafeApis6.hardwareAccelerationOptions.map((option) => {
       return {
         label: option,
         onClick: () => setHardwareAcceleration(option),
@@ -29607,7 +29988,7 @@ var RenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/RenderModalAudio.tsx
-import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client";
 import { useCallback as useCallback130 } from "react";
 
 // src/components/RenderModal/EnforceAudioTrackSetting.tsx
@@ -29700,7 +30081,7 @@ var MutedSetting = ({ muted, setMuted, enforceAudioTrack }) => {
 };
 
 // src/components/RenderModal/SeparateAudioOption.tsx
-import { BrowserSafeApis as BrowserSafeApis6 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
 
 // src/helpers/use-file-existence.ts
@@ -29835,7 +30216,7 @@ var SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCode
     setSeparateAudioTo(e.target.value);
   }, [setSeparateAudioTo]);
   const validationMessage = useMemo132(() => {
-    const expectedExtension = BrowserSafeApis6.getExtensionFromAudioCodec(audioCodec);
+    const expectedExtension = BrowserSafeApis7.getExtensionFromAudioCodec(audioCodec);
     const actualExtension = separateAudioTo.split(".").pop();
     if (actualExtension !== expectedExtension) {
       return `Expected extension: .${expectedExtension}`;
@@ -29854,7 +30235,7 @@ var SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCode
 var SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, outName }) => {
   const onSeparateAudioChange = useCallback129((e) => {
     if (e.target.checked) {
-      const extension = BrowserSafeApis6.getExtensionFromAudioCodec(audioCodec);
+      const extension = BrowserSafeApis7.getExtensionFromAudioCodec(audioCodec);
       setSeparateAudioTo(`${getStringBeforeSuffix(outName)}.${extension}`);
     } else {
       setSeparateAudioTo(null);
@@ -29932,7 +30313,7 @@ var RenderModalAudio = ({
     setForSeamlessAacConcatenation(e.target.checked);
   }, [setForSeamlessAacConcatenation]);
   const audioCodecOptions = useCallback130((currentCodec) => {
-    return BrowserSafeApis7.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
+    return BrowserSafeApis8.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
       return {
         label: humanReadableAudioCodec(audioCodecOption),
         onClick: () => setAudioCodec(audioCodecOption),
@@ -30077,7 +30458,7 @@ var RenderModalAudio = ({
 };
 
 // src/components/RenderModal/RenderModalBasic.tsx
-import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis9 } from "@remotion/renderer/client";
 import { NoReactAPIs as NoReactAPIs2 } from "@remotion/renderer/pure";
 import { useCallback as useCallback133, useMemo as useMemo134 } from "react";
 
@@ -30338,11 +30719,12 @@ var RenderModalBasic = ({
   startFrame,
   validationMessage,
   setVerboseLogging,
-  logLevel
+  logLevel,
+  showOutputName
 }) => {
   const existence = useFileExistence(outName);
   const videoCodecOptions = useMemo134(() => {
-    return BrowserSafeApis8.validCodecs.filter((c) => {
+    return BrowserSafeApis9.validCodecs.filter((c) => {
       return NoReactAPIs2.isAudioCodec(c) === (renderMode === "audio");
     }).map((codecOption) => {
       return {
@@ -30360,7 +30742,7 @@ var RenderModalBasic = ({
     });
   }, [renderMode, setCodec, codec]);
   const proResProfileOptions = useMemo134(() => {
-    return BrowserSafeApis8.proResProfileOptions.map((option) => {
+    return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
         onClick: () => setProResProfile(option),
@@ -30499,14 +30881,14 @@ var RenderModalBasic = ({
         setStartFrame,
         startFrame
       }),
-      /* @__PURE__ */ jsx266(RenderModalOutputName, {
+      showOutputName ? /* @__PURE__ */ jsx266(RenderModalOutputName, {
         existence,
         inputStyle: input,
         outName,
         onValueChange,
         validationMessage,
         label: renderMode === "sequence" ? "Folder name" : "Output name"
-      }),
+      }) : null,
       /* @__PURE__ */ jsxs136("div", {
         style: optionRow,
         children: [
@@ -30644,7 +31026,7 @@ var RenderModalGif = ({
 };
 
 // src/components/RenderModal/RenderModalPicture.tsx
-import { BrowserSafeApis as BrowserSafeApis9 } from "@remotion/renderer/client";
+import { BrowserSafeApis as BrowserSafeApis10 } from "@remotion/renderer/client";
 import { useCallback as useCallback136, useMemo as useMemo136 } from "react";
 
 // src/components/RenderModal/JpegQualitySetting.tsx
@@ -30748,7 +31130,7 @@ var RenderModalPicture = ({
   compositionHeight
 }) => {
   const colorSpaceOptions = useMemo136(() => {
-    return BrowserSafeApis9.validColorSpaces.map((option) => {
+    return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
         onClick: () => setColorSpace(option),
@@ -31041,6 +31423,7 @@ var reducer2 = (state, action) => {
   return state;
 };
 var RenderModal = ({
+  readOnlyStudio,
   initialFrame,
   initialVideoImageFormat,
   initialStillImageFormat,
@@ -31131,7 +31514,7 @@ var RenderModal = ({
   const [initialOutName] = useState90(() => {
     return getDefaultOutLocation({
       compositionName: resolvedComposition.id,
-      defaultExtension: initialRenderType === "still" ? initialStillImageFormat : isVideo ? BrowserSafeApis10.getFileExtensionFromCodec(initialVideoCodec, initialAudioCodec) : initialStillImageFormat,
+      defaultExtension: initialRenderType === "still" ? initialStillImageFormat : isVideo ? BrowserSafeApis11.getFileExtensionFromCodec(initialVideoCodec, initialAudioCodec) : initialStillImageFormat,
       type: "asset",
       compositionDefaultOutName: resolvedComposition.defaultOutName,
       outputLocation: renderDefaults.outputLocation
@@ -31216,8 +31599,8 @@ var RenderModal = ({
     }
     return null;
   }, [customTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate]);
-  const supportsCrf = BrowserSafeApis10.codecSupportsCrf(codec);
-  const supportsVideoBitrate = BrowserSafeApis10.codecSupportsVideoBitrate(codec);
+  const supportsCrf = BrowserSafeApis11.codecSupportsCrf(codec);
+  const supportsVideoBitrate = BrowserSafeApis11.codecSupportsVideoBitrate(codec);
   const supportsBothQualityControls = useMemo137(() => {
     return supportsCrf && supportsVideoBitrate && hardwareAcceleration !== "if-possible" && hardwareAcceleration !== "required";
   }, [hardwareAcceleration, supportsCrf, supportsVideoBitrate]);
@@ -31303,10 +31686,10 @@ var RenderModal = ({
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, parsed));
   }, [resolvedComposition.durationInFrames, unclampedFrame]);
   const deriveFinalAudioCodec = useCallback137((passedVideoCodec, passedAudioCodec) => {
-    if (passedAudioCodec !== null && BrowserSafeApis10.supportedAudioCodecs[passedVideoCodec].includes(passedAudioCodec)) {
+    if (passedAudioCodec !== null && BrowserSafeApis11.supportedAudioCodecs[passedVideoCodec].includes(passedAudioCodec)) {
       return passedAudioCodec;
     }
-    return BrowserSafeApis10.defaultAudioCodecs[passedVideoCodec].compressed;
+    return BrowserSafeApis11.defaultAudioCodecs[passedVideoCodec].compressed;
   }, []);
   const setDefaultOutName = useCallback137((options) => {
     if (options.type === "still") {
@@ -31321,7 +31704,7 @@ var RenderModal = ({
       });
     } else {
       setOutName((prev) => {
-        const codecSuffix = BrowserSafeApis10.getFileExtensionFromCodec(options.codec, deriveFinalAudioCodec(options.codec, options.audioCodec));
+        const codecSuffix = BrowserSafeApis11.getFileExtensionFromCodec(options.codec, deriveFinalAudioCodec(options.codec, options.audioCodec));
         const newFileName = getStringBeforeSuffix(prev) + "." + codecSuffix;
         return newFileName;
       });
@@ -31338,7 +31721,7 @@ var RenderModal = ({
       if (prev === null) {
         return null;
       }
-      const newExtension = BrowserSafeApis10.getExtensionFromAudioCodec(newAudioCodec);
+      const newExtension = BrowserSafeApis11.getExtensionFromAudioCodec(newAudioCodec);
       const newFileName = getStringBeforeSuffix(prev) + "." + newExtension;
       return newFileName;
     });
@@ -31427,7 +31810,7 @@ var RenderModal = ({
   }, [codec, everyNthFrameSetting]);
   const audioCodec = deriveFinalAudioCodec(codec, userSelectedAudioCodec);
   const availablePixelFormats = useMemo137(() => {
-    return BrowserSafeApis10.validPixelFormatsForCodec(codec);
+    return BrowserSafeApis11.validPixelFormatsForCodec(codec);
   }, [codec]);
   const pixelFormat = useMemo137(() => {
     if (availablePixelFormats.includes(userPreferredPixelFormat)) {
@@ -31754,8 +32137,134 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const renderDisabled = state.type === "load" || !outnameValidation.valid;
+  const readOnlyRenderCommand = useMemo137(() => {
+    if (!readOnlyStudio) {
+      return null;
+    }
+    return makeReadOnlyStudioRenderCommand({
+      remotionVersion: window.remotion_version,
+      locationHref: window.location.href,
+      compositionId: resolvedComposition.id,
+      outName,
+      renderMode,
+      renderDefaults,
+      durationInFrames: resolvedComposition.durationInFrames,
+      concurrency,
+      frame: frame2,
+      startFrame,
+      endFrame,
+      stillImageFormat,
+      sequenceImageFormat,
+      videoImageFormat,
+      jpegQuality: renderMode === "video" ? stillImageFormat === "jpeg" ? jpegQuality : null : renderMode === "audio" ? null : jpegQuality,
+      codec,
+      muted,
+      enforceAudioTrack,
+      proResProfile,
+      x264Preset,
+      pixelFormat,
+      crf: qualityControlType === "crf" && hardwareAcceleration !== "if-possible" && hardwareAcceleration !== "required" ? crf : null,
+      videoBitrate,
+      audioBitrate,
+      audioCodec,
+      everyNthFrame,
+      numberOfGifLoops,
+      disallowParallelEncoding,
+      encodingBufferSize,
+      encodingMaxRate,
+      forSeamlessAacConcatenation,
+      separateAudioTo,
+      colorSpace,
+      scale,
+      logLevel,
+      delayRenderTimeout,
+      hardwareAcceleration,
+      chromeMode,
+      headless,
+      disableWebSecurity,
+      ignoreCertificateErrors,
+      gl: openGlOption === "default" ? null : openGlOption,
+      userAgent,
+      multiProcessOnLinux,
+      darkMode,
+      offthreadVideoCacheSizeInBytes,
+      offthreadVideoThreads,
+      mediaCacheSizeInBytes,
+      beepOnFinish,
+      repro,
+      metadata,
+      envVariables: envVariablesArrayToObject(envVariables),
+      inputProps
+    });
+  }, [
+    audioBitrate,
+    audioCodec,
+    beepOnFinish,
+    chromeMode,
+    codec,
+    colorSpace,
+    concurrency,
+    crf,
+    darkMode,
+    delayRenderTimeout,
+    disableWebSecurity,
+    disallowParallelEncoding,
+    endFrame,
+    encodingBufferSize,
+    encodingMaxRate,
+    enforceAudioTrack,
+    envVariables,
+    everyNthFrame,
+    frame2,
+    forSeamlessAacConcatenation,
+    hardwareAcceleration,
+    headless,
+    ignoreCertificateErrors,
+    inputProps,
+    jpegQuality,
+    logLevel,
+    mediaCacheSizeInBytes,
+    metadata,
+    multiProcessOnLinux,
+    muted,
+    numberOfGifLoops,
+    offthreadVideoCacheSizeInBytes,
+    offthreadVideoThreads,
+    openGlOption,
+    outName,
+    pixelFormat,
+    proResProfile,
+    qualityControlType,
+    readOnlyStudio,
+    renderDefaults,
+    renderMode,
+    repro,
+    resolvedComposition.durationInFrames,
+    resolvedComposition.id,
+    scale,
+    separateAudioTo,
+    sequenceImageFormat,
+    startFrame,
+    stillImageFormat,
+    userAgent,
+    videoImageFormat,
+    videoBitrate,
+    x264Preset
+  ]);
+  const [commandCopiedAt, setCommandCopiedAt] = useState90(null);
+  const renderDisabled = readOnlyStudio ? false : !outnameValidation.valid || state.type === "load";
   const trigger = useCallback137(() => {
+    if (readOnlyStudio) {
+      if (!readOnlyRenderCommand) {
+        return;
+      }
+      copyText(readOnlyRenderCommand).then(() => {
+        setCommandCopiedAt(Date.now());
+      }).catch((err) => {
+        showNotification(`Could not copy: ${err.message}`, 2000);
+      });
+      return;
+    }
     if (renderMode === "still") {
       onClickStill();
     } else if (renderMode === "sequence") {
@@ -31763,7 +32272,23 @@ var RenderModal = ({
     } else {
       onClickVideo();
     }
-  }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
+  }, [
+    onClickSequence,
+    onClickStill,
+    onClickVideo,
+    readOnlyRenderCommand,
+    readOnlyStudio,
+    renderMode
+  ]);
+  useEffect86(() => {
+    if (commandCopiedAt === null) {
+      return;
+    }
+    const timeout = setTimeout(() => {
+      setCommandCopiedAt(null);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, [commandCopiedAt]);
   useEffect86(() => {
     if (renderDisabled) {
       return;
@@ -31824,7 +32349,7 @@ var RenderModal = ({
               backgroundColor: outnameValidation.valid ? BLUE : BLUE_DISABLED
             },
             children: [
-              state.type === "idle" ? `Render ${renderMode}` : "Rendering...",
+              readOnlyStudio ? commandCopiedAt ? "Copied command!" : "Copy command" : state.type === "idle" ? `Render ${renderMode}` : "Rendering...",
               /* @__PURE__ */ jsx272(ShortcutHint, {
                 keyToPress: "↵",
                 cmdOrCtrl: true
@@ -31945,6 +32470,7 @@ var RenderModal = ({
               setStartFrame,
               setVerboseLogging: setLogLevel,
               logLevel,
+              showOutputName: !readOnlyStudio,
               startFrame,
               validationMessage: outnameValidation.valid ? null : outnameValidation.error.message
             }) : tab === "picture" ? /* @__PURE__ */ jsx272(RenderModalPicture, {
@@ -32008,7 +32534,7 @@ var RenderModal = ({
               propsEditType: "input-props",
               saving,
               setSaving,
-              readOnlyStudio: false
+              readOnlyStudio
             }) : /* @__PURE__ */ jsx272(RenderModalAdvanced, {
               x264Preset,
               setx264Preset,
@@ -32474,6 +33000,7 @@ var WebRenderModalAudio = ({
   const audioBitrateOptions = useMemo139(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
   const isAudioOnly = renderMode === "audio";
   const showAudioSettings = isAudioOnly || !muted;
+  const showAudioCodecSetting = !isAudioOnly || containerSupported.length > 1;
   return /* @__PURE__ */ jsxs144("div", {
     style: container63,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
@@ -32508,7 +33035,7 @@ var WebRenderModalAudio = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsxs144("div", {
+          showAudioCodecSetting ? /* @__PURE__ */ jsxs144("div", {
             style: optionRow,
             children: [
               /* @__PURE__ */ jsxs144("div", {
@@ -32529,8 +33056,8 @@ var WebRenderModalAudio = ({
                 })
               })
             ]
-          }),
-          effectiveAudioCodec !== audioCodec ? /* @__PURE__ */ jsxs144("div", {
+          }) : null,
+          showAudioCodecSetting && effectiveAudioCodec !== audioCodec ? /* @__PURE__ */ jsxs144("div", {
             style: fallbackNoticeStyle,
             children: [
               humanReadableWebAudioCodec(audioCodec),
@@ -34200,7 +34727,8 @@ var Modals = ({ readOnlyStudio }) => {
       modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx288(WebRenderModalWithLoader, {
         ...modalContextType
       }),
-      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx288(RenderModalWithLoader, {
+      modalContextType && modalContextType.type === "server-render" && (canRender || modalContextType.readOnlyStudio) ? /* @__PURE__ */ jsx288(RenderModalWithLoader, {
+        readOnlyStudio: modalContextType.readOnlyStudio ?? false,
         initialFrame: modalContextType.initialFrame,
         initialDarkMode: modalContextType.initialDarkMode,
         compositionId: modalContextType.compositionId,
@@ -34248,7 +34776,7 @@ var Modals = ({ readOnlyStudio }) => {
         initialHardwareAcceleration: modalContextType.initialHardwareAcceleration,
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
-      }),
+      }) : null,
       modalContextType && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx288(RenderStatusModal, {
         jobId: modalContextType.jobId
       }),