@remotion/studio 4.0.433 → 4.0.434

package/dist/esm/previewEntry.mjs

@@ -5150,7 +5150,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" });
@@ -11490,10 +11491,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;
     }
@@ -17816,7 +17814,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 +17867,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 +17920,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 +18814,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 +19674,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 +19731,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 +19747,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 +19761,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 +19771,7 @@ var RenderButton = ({
     }
     setSelectedModal({
       type: "server-render",
+      readOnlyStudio: copyCommandOnly,
       compositionId: video.id,
       initialFrame: getCurrentFrame2(),
       initialStillImageFormat: defaults.stillImageFormat,
@@ -19854,8 +19855,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 +19875,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 +19933,7 @@ var RenderButton = ({
         quickSwitcherLabel: null
       }
     ];
-  }, [handleRenderTypeChange]);
+  }, [handleRenderTypeChange, readOnlyStudio]);
   const spaceToBottom = useMemo95(() => {
     const margin2 = 10;
     if (size4 && dropdownOpened) {
@@ -19942,10 +19975,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 +19993,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 +20042,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 +20381,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
           })
@@ -27953,7 +27986,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 +28012,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() === "" ? "npx --yes --location=global -p @remotion/cli remotion" : `npx --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 +28399,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 +28633,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 +28701,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 +28712,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 +28745,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 +28765,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 +28785,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 +28825,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 +28842,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 +28930,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 +29363,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 +29379,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 +29395,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 +29886,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 +29979,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 +30114,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 +30133,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 +30211,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 +30356,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 +30617,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 +30640,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 +30779,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 +30924,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 +31028,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 +31321,7 @@ var reducer2 = (state, action) => {
   return state;
 };
 var RenderModal = ({
+  readOnlyStudio,
   initialFrame,
   initialVideoImageFormat,
   initialStillImageFormat,
@@ -31131,7 +31412,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 +31497,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 +31584,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 +31602,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 +31619,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 +31708,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 +32035,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 +32170,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 +32247,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 +32368,7 @@ var RenderModal = ({
               setStartFrame,
               setVerboseLogging: setLogLevel,
               logLevel,
+              showOutputName: !readOnlyStudio,
               startFrame,
               validationMessage: outnameValidation.valid ? null : outnameValidation.error.message
             }) : tab === "picture" ? /* @__PURE__ */ jsx272(RenderModalPicture, {
@@ -32008,7 +32432,7 @@ var RenderModal = ({
               propsEditType: "input-props",
               saving,
               setSaving,
-              readOnlyStudio: false
+              readOnlyStudio
             }) : /* @__PURE__ */ jsx272(RenderModalAdvanced, {
               x264Preset,
               setx264Preset,
@@ -32474,6 +32898,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 +32933,7 @@ var WebRenderModalAudio = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsxs144("div", {
+          showAudioCodecSetting ? /* @__PURE__ */ jsxs144("div", {
             style: optionRow,
             children: [
               /* @__PURE__ */ jsxs144("div", {
@@ -32529,8 +32954,8 @@ var WebRenderModalAudio = ({
                 })
               })
             ]
-          }),
-          effectiveAudioCodec !== audioCodec ? /* @__PURE__ */ jsxs144("div", {
+          }) : null,
+          showAudioCodecSetting && effectiveAudioCodec !== audioCodec ? /* @__PURE__ */ jsxs144("div", {
             style: fallbackNoticeStyle,
             children: [
               humanReadableWebAudioCodec(audioCodec),
@@ -34200,7 +34625,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 +34674,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
       }),