@remotion/studio 4.0.432 → 4.0.434

package/dist/components/RenderModal/ServerRenderModal.d.ts

@@ -5,6 +5,7 @@ import React from 'react';
 import type { _InternalTypes } from 'remotion';
 import type { RenderType } from './RenderModalAdvanced';
 type RenderModalProps = {
+    readonly readOnlyStudio: boolean;
     readonly compositionId: string;
     readonly initialFrame: number;
     readonly initialVideoImageFormat: VideoImageFormat | null;

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

@@ -40,6 +40,8 @@ const humanReadableWebAudioCodec = (audioCodec) => {
             return 'Vorbis';
         case 'pcm-s16':
             return 'Lossless (PCM)';
+        case 'flac':
+            return 'FLAC';
         default:
             throw new Error(`Unsupported audio codec: ${audioCodec}`);
     }
@@ -66,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/RenderModal/WebRenderModalBasic.js

@@ -26,9 +26,16 @@ const containerLabels = {
     mp3: 'MP3',
     aac: 'AAC',
     ogg: 'OGG',
+    flac: 'FLAC',
 };
 const videoContainers = ['mp4', 'webm', 'mkv', 'mov'];
-const audioContainers = ['wav', 'mp3', 'aac', 'ogg'];
+const audioContainers = [
+    'wav',
+    'mp3',
+    'aac',
+    'ogg',
+    'flac',
+];
 const codecLabels = {
     h264: 'H.264',
     h265: 'H.265',

package/dist/components/RendersTab.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RendersTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const layout_1 = require("./layout");
 const context_1 = require("./RenderQueue/context");
@@ -27,15 +26,8 @@ const badge = {
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const failedJobs = jobs.filter((j) => j.status === 'failed').length;
     const jobCount = jobs.length;
-    const isActuallySelected = (0, react_1.useMemo)(() => {
-        if (!canvasContent || canvasContent.type !== 'composition') {
-            return true;
-        }
-        return selected;
-    }, [canvasContent, selected]);
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
@@ -46,7 +38,7 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: selected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx("div", { style: badgeStyle, children: jobCount })
                     ] })) : null] }) }));
 };

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' });

package/dist/components/Timeline/TimelineBooleanField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineBooleanField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly codeValue: unknown;
+    readonly effectiveValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+}>;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineBooleanField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const checkboxContainer = {
+    marginLeft: 8,
+};
+const TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSave }) => {
+    const checked = Boolean(effectiveValue);
+    const onChange = (0, react_1.useCallback)(() => {
+        const newValue = !checked;
+        if (canUpdate && newValue !== codeValue) {
+            onSave(field.key, newValue);
+        }
+    }, [canUpdate, onSave, field.key, checked, codeValue]);
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
+};
+exports.TimelineBooleanField = TimelineBooleanField;

package/dist/components/Timeline/TimelineEmptyState.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimelineEmptyState: React.FC;

package/dist/components/Timeline/TimelineEmptyState.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    display: 'flex',
+    flex: 1,
+    height: 0,
+    backgroundColor: colors_1.BACKGROUND,
+};
+const TimelineEmptyState = () => {
+    return jsx_runtime_1.jsx("div", { style: container });
+};
+exports.TimelineEmptyState = TimelineEmptyState;

package/dist/components/Timeline/TimelineExpandedSection.d.ts

@@ -1,7 +1,12 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
+export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
     readonly originalLocation: OriginalPosition | null;
+    readonly nestedDepth: number;
+    readonly nodePath: SequenceNodePath | null;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -1,22 +1,59 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineExpandedSection = void 0;
+exports.TimelineExpandedSection = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
+exports.EXPANDED_SECTION_PADDING_LEFT = 28;
+exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     display: 'flex',
     flexDirection: 'column',
-    paddingLeft: 28,
-    paddingRight: 10,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const TimelineExpandedSection = ({ sequence, originalLocation }) => {
+const separator = {
+    height: 1,
+    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
+};
+const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, nodePath }) => {
     var _a;
     var _b;
     const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
@@ -42,8 +79,9 @@ const TimelineExpandedSection = ({ sequence, originalLocation }) => {
         };
     }, [expandedHeight]);
     return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
-            ? schemaFields.map((field) => {
-                return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation }, field.key));
+            ? schemaFields.map((field, i) => {
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation, nestedDepth: nestedDepth, nodePath: nodePath })
+                    ] }, field.key));
             })
             : 'No schema' }));
 };

package/dist/components/Timeline/TimelineFieldRow.d.ts

@@ -1,3 +1,4 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
@@ -5,4 +6,6 @@ export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly overrideId: string;
     readonly validatedLocation: CodePosition | null;
+    readonly nestedDepth: number;
+    readonly nodePath: SequenceNodePath | null;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -5,25 +5,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
+const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
+const TimelineListItem_1 = require("./TimelineListItem");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const fieldRow = {
+const FIELD_ROW_PADDING_LEFT = 24;
+const fieldRowBase = {
     display: 'flex',
     alignItems: 'center',
     gap: 8,
-    paddingLeft: 24,
+    paddingRight: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
 const fieldName = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
 };
 const fieldLabelRow = {
-    flex: 1,
+    flex: '0 0 50%',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath }) => {
     var _a, _b, _c, _d;
     const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
@@ -37,9 +40,10 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
         runtimeValue: field.currentValue,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
+        shouldResortToDefaultValueIfUndefined: true,
     });
     const onSave = (0, react_1.useCallback)((key, value) => {
-        if (!propStatuses || !validatedLocation) {
+        if (!propStatuses || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
         }
         const status = propStatuses[key];
@@ -51,14 +55,12 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
             : null;
         return (0, call_api_1.callApi)('/api/save-sequence-props', {
             fileName: validatedLocation.source,
-            line: validatedLocation.line,
-            column: validatedLocation.column,
+            nodePath,
             key,
             value: JSON.stringify(value),
-            enumPaths: [],
             defaultValue,
         }).then(() => undefined);
-    }, [propStatuses, validatedLocation, field.fieldSchema.default]);
+    }, [propStatuses, validatedLocation, nodePath, field.fieldSchema.default]);
     const onDragValueChange = (0, react_1.useCallback)((key, value) => {
         setDragOverrides(overrideId, key, value);
     }, [setDragOverrides, overrideId]);
@@ -67,12 +69,15 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
     }, [clearDragOverrides, overrideId]);
     const style = (0, react_1.useMemo)(() => {
         return {
-            ...fieldRow,
+            ...fieldRowBase,
             height: field.rowHeight,
+            paddingLeft: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_LEFT +
+                FIELD_ROW_PADDING_LEFT +
+                TimelineListItem_1.SPACING * 3 * nestedDepth,
         };
-    }, [field.rowHeight]);
+    }, [field.rowHeight, nestedDepth]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue })
+            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: propStatus })
         ] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

package/dist/components/Timeline/TimelineListItem.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
+export declare const SPACING = 5;
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;

package/dist/components/Timeline/TimelineListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = void 0;
+exports.TimelineListItem = exports.SPACING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -13,9 +13,9 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SPACING = 5;
+exports.SPACING = 5;
 const space = {
-    width: SPACING,
+    width: exports.SPACING,
     flexShrink: 0,
 };
 const arrowButton = {
@@ -44,14 +44,14 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
-    (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
+    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
     const isExpanded = visualModeEnabled && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);
     const padder = (0, react_1.useMemo)(() => {
         return {
-            width: Number(SPACING * 1.5) * nestedDepth,
+            width: Number(exports.SPACING * 3) * nestedDepth,
             flexShrink: 0,
         };
     }, [nestedDepth]);
@@ -78,7 +78,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             alignItems: 'center',
             wordBreak: 'break-all',
             textAlign: 'left',
-            paddingLeft: SPACING,
+            paddingLeft: exports.SPACING,
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
     }, [sequence.type]);
@@ -91,6 +91,6 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { style: outer, children: [
                     jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
-                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation })) : null] }));
+                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;