@remotion/studio 4.0.433 → 4.0.435

package/dist/components/RenderModal/ServerRenderModal.js

@@ -8,6 +8,8 @@ const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../../helpers/colors");
 const convert_env_variables_1 = require("../../helpers/convert-env-variables");
+const copy_text_1 = require("../../helpers/copy-text");
+const make_render_command_1 = require("../../helpers/make-render-command");
 const render_modal_sections_1 = require("../../helpers/render-modal-sections");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const audio_1 = require("../../icons/audio");
@@ -23,6 +25,7 @@ const Button_1 = require("../Button");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const ModalHeader_1 = require("../ModalHeader");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const OptionsPanel_1 = require("../OptionsPanel");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
@@ -58,7 +61,7 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialDarkMode, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, defaultMetadata, initialChromeMode, renderDefaults, }) => {
+const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialDarkMode, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, defaultMetadata, initialChromeMode, renderDefaults, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
@@ -753,8 +756,148 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     });
     const { tab, setTab, shownTabs } = (0, render_modal_sections_1.useRenderModalSections)(renderMode, codec);
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
-    const renderDisabled = state.type === 'load' || !outnameValidation.valid;
+    const readOnlyRenderCommand = (0, react_1.useMemo)(() => {
+        if (!readOnlyStudio) {
+            return null;
+        }
+        return (0, make_render_command_1.makeReadOnlyStudioRenderCommand)({
+            remotionVersion: window.remotion_version,
+            locationHref: window.location.href,
+            compositionId: resolvedComposition.id,
+            outName,
+            renderMode,
+            renderDefaults,
+            durationInFrames: resolvedComposition.durationInFrames,
+            concurrency,
+            frame,
+            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: (0, convert_env_variables_1.envVariablesArrayToObject)(envVariables),
+            inputProps,
+        });
+    }, [
+        audioBitrate,
+        audioCodec,
+        beepOnFinish,
+        chromeMode,
+        codec,
+        colorSpace,
+        concurrency,
+        crf,
+        darkMode,
+        delayRenderTimeout,
+        disableWebSecurity,
+        disallowParallelEncoding,
+        endFrame,
+        encodingBufferSize,
+        encodingMaxRate,
+        enforceAudioTrack,
+        envVariables,
+        everyNthFrame,
+        frame,
+        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] = (0, react_1.useState)(null);
+    const renderDisabled = readOnlyStudio
+        ? false
+        : !outnameValidation.valid || state.type === 'load';
     const trigger = (0, react_1.useCallback)(() => {
+        if (readOnlyStudio) {
+            if (!readOnlyRenderCommand) {
+                return;
+            }
+            (0, copy_text_1.copyText)(readOnlyRenderCommand)
+                .then(() => {
+                setCommandCopiedAt(Date.now());
+            })
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+            });
+            return;
+        }
         if (renderMode === 'still') {
             onClickStill();
         }
@@ -764,7 +907,23 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         else {
             onClickVideo();
         }
-    }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
+    }, [
+        onClickSequence,
+        onClickStill,
+        onClickVideo,
+        readOnlyRenderCommand,
+        readOnlyStudio,
+        renderMode,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (commandCopiedAt === null) {
+            return;
+        }
+        const timeout = setTimeout(() => {
+            setCommandCopiedAt(null);
+        }, 2000);
+        return () => clearTimeout(timeout);
+    }, [commandCopiedAt]);
     (0, react_1.useEffect)(() => {
         if (renderDisabled) {
             return;
@@ -805,7 +964,13 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...render_modals_1.buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
+                        }, children: [readOnlyStudio
+                                ? commandCopiedAt
+                                    ? 'Copied command!'
+                                    : 'Copy command'
+                                : state.type === 'idle'
+                                    ? `Render ${renderMode}`
+                                    : 'Rendering...', jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
                     jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
@@ -820,7 +985,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { style: render_modals_1.icon }) }),
                                     "GIF"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : (jsx_runtime_1.jsx(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads: offthreadVideoThreads, setOffthreadVideoThreads: setOffthreadVideoThreads, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, chromeModeOption: chromeMode, setChromeModeOption: setChromeMode, darkMode: darkMode, setDarkMode: setDarkMode })) })
+                                    "Other"] })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, showOutputName: !readOnlyStudio, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio })) : (jsx_runtime_1.jsx(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads: offthreadVideoThreads, setOffthreadVideoThreads: setOffthreadVideoThreads, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, chromeModeOption: chromeMode, setChromeModeOption: setChromeMode, darkMode: darkMode, setDarkMode: setDarkMode })) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -68,14 +68,15 @@ const WebRenderModalAudio = ({ renderMode, muted, setMuted, audioCodec, setAudio
     const audioBitrateOptions = (0, react_1.useMemo)(() => (0, quality_options_1.getQualityOptions)(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
     const isAudioOnly = renderMode === 'audio';
     const showAudioSettings = isAudioOnly || !muted;
+    const showAudioCodecSetting = !isAudioOnly || containerSupported.length > 1;
     return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [isAudioOnly ? null : (jsx_runtime_1.jsx(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted })), showAudioSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isAudioOnly ? null : jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Quality",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })
-                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                        ] }), showAudioCodecSetting ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Codec",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })
-                        ] }), effectiveAudioCodec !== audioCodec ? (jsx_runtime_1.jsxs("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
+                        ] })) : null, showAudioCodecSetting && effectiveAudioCodec !== audioCodec ? (jsx_runtime_1.jsxs("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
 };
 exports.WebRenderModalAudio = WebRenderModalAudio;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -90,6 +90,9 @@ const ClientRenderQueueProcessor = () => {
                 onProgress(job.id, {
                     encodedFrames: progress.encodedFrames,
                     totalFrames,
+                    doneIn: progress.doneIn,
+                    renderEstimatedTime: progress.renderEstimatedTime,
+                    progress: progress.progress,
                 });
             },
             outputTarget: 'web-fs',

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -80,8 +80,7 @@ const 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;

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const z_index_1 = require("../../state/z-index");
+const client_render_progress_1 = require("./client-render-progress");
 const context_1 = require("./context");
 const item_style_1 = require("./item-style");
 const outputLocation = {
@@ -24,9 +25,7 @@ const RenderQueueProgressMessage = ({ job }) => {
         });
     }, [job.id, setSelectedModal]);
     const message = isClientJob
-        ? job.progress.totalFrames === 0
-            ? 'Getting composition'
-            : `Encoding frame ${job.progress.encodedFrames}/${job.progress.totalFrames}`
+        ? (0, client_render_progress_1.getClientRenderProgressMessage)(job.progress)
         : job.progress.message;
     return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: message, children: message }));
 };

package/dist/components/RenderQueue/client-render-progress.d.ts

@@ -0,0 +1,3 @@
+import type { ClientRenderJobProgress } from './client-side-render-types';
+export declare const formatEtaString: (timeRemainingInMilliseconds: number) => string;
+export declare const getClientRenderProgressMessage: (progress: ClientRenderJobProgress) => string;

package/dist/components/RenderQueue/client-render-progress.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClientRenderProgressMessage = exports.formatEtaString = void 0;
+const 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(' ');
+};
+exports.formatEtaString = formatEtaString;
+const 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: ${(0, exports.formatEtaString)(progress.renderEstimatedTime)}`;
+        return `Rendering ${progress.encodedFrames}/${progress.totalFrames}${etaString}`;
+    }
+    return `Encoded ${progress.encodedFrames}/${progress.totalFrames}`;
+};
+exports.getClientRenderProgressMessage = getClientRenderProgressMessage;

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

@@ -4,6 +4,9 @@ import type { LogLevel } from 'remotion';
 export type ClientRenderJobProgress = {
     encodedFrames: number;
     totalFrames: number;
+    doneIn: number | null;
+    renderEstimatedTime: number;
+    progress: number;
 };
 export type GetBlobCallback = () => Promise<Blob>;
 type ClientRenderJobDynamicStatus = {

package/dist/components/RenderQueue/context.js

@@ -86,7 +86,13 @@ const RenderQueueContextProvider = ({ children }) => {
             ? {
                 ...job,
                 status: 'running',
-                progress: { encodedFrames: 0, totalFrames: 0 },
+                progress: {
+                    encodedFrames: 0,
+                    totalFrames: 0,
+                    doneIn: null,
+                    renderEstimatedTime: 0,
+                    progress: 0,
+                },
             }
             : job));
         processJobCallbackRef.current(nextJob);

package/dist/components/SidebarRenderButton.js

@@ -80,6 +80,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             renderDefaults: defaults,
             initialDarkMode: defaults.darkMode,
+            readOnlyStudio: false,
         });
         if (isMobileLayout) {
             setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });