@remotion/studio 4.0.374 → 4.0.376

package/dist/Studio.js

@@ -17,8 +17,8 @@ const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
-                        ? null
-                        : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionConfigInStudio, { children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
+                            ? null
+                            : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }));
 };
 exports.Studio = Studio;

package/dist/components/Modals.js

@@ -15,14 +15,17 @@ const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const OverrideInputProps_1 = require("./OverrideInputProps");
 const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
-const RenderModal_1 = require("./RenderModal/RenderModal");
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
+const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
+const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && ((0, jsx_runtime_1.jsx)(WebRenderModal_1.WebRenderModalWithLoader, { type: "web-render", initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, defaultProps: modalContextType.defaultProps })), modalContextType &&
+                canRender &&
+                modalContextType.type === 'server-render' && ((0, jsx_runtime_1.jsx)(ServerRenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && ((0, jsx_runtime_1.jsx)(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), (0, jsx_runtime_1.jsx)(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/QuickSwitcher/fuzzy-search.js

@@ -15,7 +15,6 @@ function fuzzySearch(query, dataset) {
         let i = 0;
         let n = -1;
         let l;
-        // eslint-disable-next-line no-bitwise
         for (; (l = q[i++]);)
             if (!~(n = s.indexOf(l, n + 1)))
                 return;

package/dist/components/RenderButton.js

@@ -51,7 +51,7 @@ const RenderButton = () => {
             throw new TypeError('Expected defaults');
         }
         setSelectedModal({
-            type: 'render',
+            type: 'server-render',
             compositionId: video.id,
             initialFrame: getCurrentFrame(),
             initialStillImageFormat: defaults.stillImageFormat,

package/dist/components/RenderModal/RenderModalAdvanced.js

@@ -188,7 +188,7 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
             , { 
                 // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, hint: "delayRenderTimeoutInMillisecondsOption", value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })] }), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom @remotion/media cache size" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })] })), renderMode === 'audio' || mediaCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 2000 * 1024 * 1024, step: 1024, name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeMediaCacheSizeInBytes, value: mediaCacheSizeInBytes })), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom OffthreadVideo cache" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "offthreadVideoCacheSizeInBytesOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoCacheSizeInBytes !== null, onChange: toggleCustomOffthreadVideoCacheSizeInBytes, name: "custom-audio-bitrate" }) })] })), renderMode === 'audio' ||
-                offthreadVideoCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 2000 * 1024 * 1024, step: 1024, name: "OffthreadVideo cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeOffthreadVideoCacheSizeInBytes, value: offthreadVideoCacheSizeInBytes })), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "OffthreadVideo threads" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "offthreadVideoThreadsOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoThreads !== null, onChange: toggleCustomOffthreadVideoThreads, name: "offthread-video-threads" }) })] })), renderMode === 'audio' || offthreadVideoThreads === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 16, step: 1, name: "OffthreadVideo threads", formatter: (w) => `${w}x`, onValueChanged: changeOffthreadVideoThreads, value: offthreadVideoThreads })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged, name: "disable-web-security" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Ignore certificate errors" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors, name: "ignore-certificate-errors" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Headless mode", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "headlessOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Chrome Mode ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "chromeModeOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: chromeModeOptions, selectedId: chromeModeOption, title: "Chrome mode" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["OpenGL render backend ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "glOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Multi-process Chrome on Linux" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enableMultiprocessOnLinuxOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enableMultiProcessOnLinux, onChange: onEnableMultiProcessOnLinux, name: "enable-multi-process-on-linux" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: userAgent !== null, onChange: toggleCustomUserAgent, name: "custom-user-agent" }) })] }), userAgent === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: userAgent, onChange: onUserAgentChanged, status: "ok", rightAlign: true }) }) })] })), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Create a reproduction ", (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "reproOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: repro, onChange: onReproToggle, name: "repro" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Beep when finished ", (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "beepOnFinishOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: beep, onChange: onPlayBeepSound, name: "beep-when-finished" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
+                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, hint: "delayRenderTimeoutInMillisecondsOption", value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })] }), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom @remotion/media cache size", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })] })), renderMode === 'audio' || mediaCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 2000 * 1024 * 1024, step: 1024, name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeMediaCacheSizeInBytes, value: mediaCacheSizeInBytes })), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom OffthreadVideo cache", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "offthreadVideoCacheSizeInBytesOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoCacheSizeInBytes !== null, onChange: toggleCustomOffthreadVideoCacheSizeInBytes, name: "custom-audio-bitrate" }) })] })), renderMode === 'audio' ||
+                offthreadVideoCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 2000 * 1024 * 1024, step: 1024, name: "OffthreadVideo cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeOffthreadVideoCacheSizeInBytes, value: offthreadVideoCacheSizeInBytes })), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["OffthreadVideo threads ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "offthreadVideoThreadsOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoThreads !== null, onChange: toggleCustomOffthreadVideoThreads, name: "offthread-video-threads" }) })] })), renderMode === 'audio' || offthreadVideoThreads === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 16, step: 1, name: "OffthreadVideo threads", formatter: (w) => `${w}x`, onValueChanged: changeOffthreadVideoThreads, value: offthreadVideoThreads })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged, name: "disable-web-security" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Ignore certificate errors" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors, name: "ignore-certificate-errors" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Headless mode", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "headlessOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Chrome Mode ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "chromeModeOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: chromeModeOptions, selectedId: chromeModeOption, title: "Chrome mode" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["OpenGL render backend ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "glOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Multi-process Chrome on Linux", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enableMultiprocessOnLinuxOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enableMultiProcessOnLinux, onChange: onEnableMultiProcessOnLinux, name: "enable-multi-process-on-linux" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: userAgent !== null, onChange: toggleCustomUserAgent, name: "custom-user-agent" }) })] }), userAgent === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: userAgent, onChange: onUserAgentChanged, status: "ok", rightAlign: true }) }) })] })), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Create a reproduction ", (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "reproOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: repro, onChange: onReproToggle, name: "repro" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Beep when finished ", (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "beepOnFinishOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: beep, onChange: onPlayBeepSound, name: "beep-when-finished" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;

package/dist/components/RenderModal/{RenderModal.js → ServerRenderModal.js}

@@ -21,7 +21,6 @@ const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const Button_1 = require("../Button");
 const is_menu_item_1 = require("../Menu/is-menu-item");
-const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const OptionsPanel_1 = require("../OptionsPanel");
@@ -39,6 +38,7 @@ const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal
 const get_default_codecs_1 = require("./get-default-codecs");
 const get_string_before_suffix_1 = require("./get-string-before-suffix");
 const out_name_checker_1 = require("./out-name-checker");
+const render_modals_1 = require("./render-modals");
 const initialState = { type: 'idle' };
 const reducer = (state, action) => {
     if (action.type === 'start') {
@@ -58,64 +58,6 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: '12px 16px',
-    borderBottom: '1px solid black',
-};
-const optionsPanel = {
-    display: 'flex',
-    width: '100%',
-};
-const horizontalLayout = {
-    display: 'flex',
-    flexDirection: 'row',
-    overflowY: 'auto',
-    flex: 1,
-};
-const leftSidebar = {
-    padding: 12,
-};
-const horizontalTab = {
-    width: 250,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    textAlign: 'left',
-    fontSize: 16,
-    fontWeight: 'bold',
-    paddingLeft: 15,
-    paddingTop: 12,
-    paddingBottom: 12,
-};
-const iconContainer = {
-    width: 20,
-    height: 20,
-    marginRight: 15,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const icon = {
-    color: 'currentcolor',
-    height: 20,
-};
-const buttonStyle = {
-    backgroundColor: colors_1.BLUE,
-    color: 'white',
-};
-const flexer = {
-    flex: 1,
-};
-const outer = {
-    width: (0, ModalContainer_1.getMaxModalWidth)(1000),
-    height: (0, ModalContainer_1.getMaxModalHeight)(640),
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-};
 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, 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);
@@ -161,6 +103,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
                     : initialStillImageFormat,
             type: 'asset',
             compositionDefaultOutName: resolvedComposition.defaultOutName,
+            clientSideRender: false,
         });
     });
     const [videoCodecForAudioTab, setVideoCodecForAudioTab] = (0, react_1.useState)(() => initialVideoCodecForAudioTab);
@@ -835,10 +778,10 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             };
         });
     }, [availablePixelFormats, pixelFormat]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
-                            ...buttonStyle,
+    return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, 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...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, 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' ? ((0, 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' ? ((0, 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' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : ((0, 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 })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: render_modals_1.icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, 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' ? ((0, 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' ? ((0, 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' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : ((0, 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 })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(RenderModal, { ...props }) }) }));

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

@@ -0,0 +1,3 @@
+import type { WebRenderModalState } from '../../state/modals';
+export type RenderType = 'still' | 'video';
+export declare const WebRenderModalWithLoader: React.FC<WebRenderModalState>;

package/dist/components/RenderModal/WebRenderModal.js

@@ -0,0 +1,351 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRenderModalWithLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const web_renderer_1 = require("@remotion/web-renderer");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const data_1 = require("../../icons/data");
+const file_1 = require("../../icons/file");
+const frame_1 = require("../../icons/frame");
+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 SegmentedControl_1 = require("../SegmentedControl");
+const vertical_1 = require("../Tabs/vertical");
+const DataEditor_1 = require("./DataEditor");
+const get_string_before_suffix_1 = require("./get-string-before-suffix");
+const render_modals_1 = require("./render-modals");
+const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal");
+const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
+const WebRenderModalBasic_1 = require("./WebRenderModalBasic");
+const WebRenderModalPicture_1 = require("./WebRenderModalPicture");
+const invalidCharacters = ['?', '*', '+', ':', '%'];
+const isValidStillExtension = (extension, stillImageFormat) => {
+    if (stillImageFormat === 'jpeg' && extension === 'jpg') {
+        return true;
+    }
+    return extension === stillImageFormat;
+};
+const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
+    try {
+        const extension = outName.substring(outName.lastIndexOf('.') + 1);
+        const prefix = outName.substring(0, outName.lastIndexOf('.'));
+        const hasDotAfterSlash = () => {
+            const substrings = prefix.split('/');
+            for (const str of substrings) {
+                if (str[0] === '.') {
+                    return true;
+                }
+            }
+            return false;
+        };
+        const hasInvalidChar = () => {
+            return prefix.split('').some((char) => invalidCharacters.includes(char));
+        };
+        if (prefix.length < 1) {
+            throw new Error('The prefix must be at least 1 character long');
+        }
+        if (prefix[0] === '.' || hasDotAfterSlash()) {
+            throw new Error('The output name must not start with a dot');
+        }
+        if (hasInvalidChar()) {
+            throw new Error("Filename can't contain the following characters:  ?, *, +, %, :");
+        }
+        if (!isValidStillExtension(extension, stillImageFormat)) {
+            throw new Error(`The extension ${extension} is not supported for still image format ${stillImageFormat}`);
+        }
+        return { valid: true };
+    }
+    catch (err) {
+        return { valid: false, error: err };
+    }
+};
+// TODO: Add to queue
+// TODO: Switch to server-side rendering
+// TODO: Filter out codecs that are not supported for the container
+// TODO: Add more containers
+// TODO: Shortcut: Shift + R
+// TODO: Apply initial frame range
+// TODO: Apply defaultCodec
+// TODO: Apply defaultOutName
+const WebRenderModal = ({ initialFrame, defaultProps, }) => {
+    const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
+    if (!context) {
+        throw new Error('Should not be able to render without resolving comp first');
+    }
+    const { resolved: { result: resolvedComposition }, unresolved: unresolvedComposition, } = context;
+    const [renderMode, setRenderMode] = (0, react_1.useState)('video');
+    const [tab, setTab] = (0, react_1.useState)('general');
+    const [imageFormat, setImageFormat] = (0, react_1.useState)('png');
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
+    const [logLevel, setLogLevel] = (0, react_1.useState)('info');
+    const [inputProps, setInputProps] = (0, react_1.useState)(() => defaultProps);
+    const [delayRenderTimeout, setDelayRenderTimeout] = (0, react_1.useState)(30000);
+    const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = (0, react_1.useState)(null);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    // Video-specific state
+    const [codec, setCodec] = (0, react_1.useState)('h264');
+    const [container, setContainer] = (0, react_1.useState)('mp4');
+    const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('high');
+    const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)('no-preference');
+    const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = (0, react_1.useState)(5);
+    const [startFrame, setStartFrame] = (0, react_1.useState)(null);
+    const [endFrame, setEndFrame] = (0, react_1.useState)(null);
+    const [renderProgress, setRenderProgress] = (0, react_1.useState)(null);
+    const [transparent, setTransparent] = (0, react_1.useState)(false);
+    const [initialOutName] = (0, react_1.useState)(() => {
+        return (0, studio_shared_1.getDefaultOutLocation)({
+            compositionName: resolvedComposition.id,
+            defaultExtension: container,
+            type: 'asset',
+            compositionDefaultOutName: resolvedComposition.defaultOutName,
+            clientSideRender: true,
+        });
+    });
+    const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
+    const setStillFormat = (0, react_1.useCallback)((format) => {
+        setImageFormat(format);
+        setOutName((prev) => {
+            const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + format;
+            return newFileName;
+        });
+    }, []);
+    const setContainerFormat = (0, react_1.useCallback)((newContainer) => {
+        setContainer(newContainer);
+        setOutName((prev) => {
+            const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + newContainer;
+            return newFileName;
+        });
+    }, []);
+    const onRenderModeChange = (0, react_1.useCallback)((newMode) => {
+        setRenderMode(newMode);
+        if (newMode === 'video') {
+            setOutName((prev) => {
+                const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + container;
+                return newFileName;
+            });
+        }
+        else {
+            setOutName((prev) => {
+                const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + imageFormat;
+                return newFileName;
+            });
+        }
+    }, [container, imageFormat]);
+    const renderTabOptions = (0, react_1.useMemo)(() => {
+        const options = [
+            {
+                label: 'Still',
+                onClick: () => {
+                    onRenderModeChange('still');
+                },
+                key: 'still',
+                selected: renderMode === 'still',
+            },
+        ];
+        // Only show video option if composition has more than 1 frame
+        if (resolvedComposition.durationInFrames > 1) {
+            options.push({
+                label: 'Video',
+                onClick: () => {
+                    onRenderModeChange('video');
+                },
+                key: 'video',
+                selected: renderMode === 'video',
+            });
+        }
+        return options;
+    }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
+    const onFrameSetDirectly = (0, react_1.useCallback)((newFrame) => {
+        setFrame(newFrame);
+    }, [setFrame]);
+    const onFrameChanged = (0, react_1.useCallback)((e) => {
+        setFrame((q) => {
+            const newFrame = parseFloat(e);
+            if (Number.isNaN(newFrame)) {
+                return q;
+            }
+            return newFrame;
+        });
+    }, [setFrame]);
+    const onOutNameChange = (0, react_1.useCallback)((e) => {
+        setOutName(e.target.value);
+    }, []);
+    const outnameValidation = (0, react_1.useMemo)(() => {
+        if (renderMode === 'still') {
+            return validateOutnameForStill({
+                outName,
+                stillImageFormat: imageFormat,
+            });
+        }
+        // Validate for video
+        try {
+            const extension = outName.substring(outName.lastIndexOf('.') + 1);
+            const prefix = outName.substring(0, outName.lastIndexOf('.'));
+            const hasDotAfterSlash = () => {
+                const substrings = prefix.split('/');
+                for (const str of substrings) {
+                    if (str[0] === '.') {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            const hasInvalidChar = () => {
+                return prefix
+                    .split('')
+                    .some((char) => invalidCharacters.includes(char));
+            };
+            if (prefix.length < 1) {
+                throw new Error('The prefix must be at least 1 character long');
+            }
+            if (prefix[0] === '.' || hasDotAfterSlash()) {
+                throw new Error('The output name must not start with a dot');
+            }
+            if (hasInvalidChar()) {
+                throw new Error("Filename can't contain the following characters:  ?, *, +, %, :");
+            }
+            if (extension !== container) {
+                throw new Error(`The extension ${extension} is not supported for container format ${container}`);
+            }
+            return { valid: true };
+        }
+        catch (err) {
+            return { valid: false, error: err };
+        }
+    }, [outName, imageFormat, renderMode, container]);
+    const onRenderStill = (0, react_1.useCallback)(async () => {
+        const blob = await (0, web_renderer_1.renderStillOnWeb)({
+            composition: {
+                component: unresolvedComposition.component,
+                width: resolvedComposition.width,
+                height: resolvedComposition.height,
+                fps: resolvedComposition.fps,
+                durationInFrames: resolvedComposition.durationInFrames,
+                defaultProps: resolvedComposition.defaultProps,
+                calculateMetadata: unresolvedComposition.calculateMetadata,
+                id: resolvedComposition.id,
+            },
+            frame,
+            imageFormat,
+            inputProps,
+            delayRenderTimeoutInMilliseconds: delayRenderTimeout,
+            mediaCacheSizeInBytes,
+            logLevel,
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        // Extract just the filename from the path
+        const filename = outName.includes('/')
+            ? outName.substring(outName.lastIndexOf('/') + 1)
+            : outName;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }, [
+        unresolvedComposition.component,
+        frame,
+        imageFormat,
+        logLevel,
+        inputProps,
+        delayRenderTimeout,
+        mediaCacheSizeInBytes,
+        resolvedComposition.durationInFrames,
+        resolvedComposition.width,
+        resolvedComposition.height,
+        resolvedComposition.fps,
+        outName,
+        resolvedComposition.defaultProps,
+        unresolvedComposition.calculateMetadata,
+        resolvedComposition.id,
+    ]);
+    const onRenderVideo = (0, react_1.useCallback)(async () => {
+        setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
+        const buffer = await (0, web_renderer_1.renderMediaOnWeb)({
+            composition: {
+                component: unresolvedComposition.component,
+                width: resolvedComposition.width,
+                height: resolvedComposition.height,
+                fps: resolvedComposition.fps,
+                durationInFrames: resolvedComposition.durationInFrames,
+                defaultProps: resolvedComposition.defaultProps,
+                id: resolvedComposition.id,
+                calculateMetadata: unresolvedComposition.calculateMetadata,
+            },
+            inputProps,
+            delayRenderTimeoutInMilliseconds: delayRenderTimeout,
+            mediaCacheSizeInBytes,
+            logLevel,
+            codec,
+            container,
+            videoBitrate,
+            hardwareAcceleration,
+            keyframeIntervalInSeconds,
+            frameRange: startFrame !== null || endFrame !== null
+                ? [
+                    startFrame !== null && startFrame !== void 0 ? startFrame : 0,
+                    endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1,
+                ]
+                : null,
+            onProgress: (progress) => {
+                setRenderProgress(progress);
+            },
+            transparent,
+        });
+        setRenderProgress(null);
+        const blob = new Blob([buffer], {
+            type: container === 'mp4' ? 'video/mp4' : 'video/webm',
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        // Extract just the filename from the path
+        const filename = outName.includes('/')
+            ? outName.substring(outName.lastIndexOf('/') + 1)
+            : outName;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }, [
+        unresolvedComposition.component,
+        inputProps,
+        delayRenderTimeout,
+        mediaCacheSizeInBytes,
+        logLevel,
+        codec,
+        container,
+        videoBitrate,
+        hardwareAcceleration,
+        keyframeIntervalInSeconds,
+        startFrame,
+        endFrame,
+        resolvedComposition.durationInFrames,
+        resolvedComposition.width,
+        resolvedComposition.height,
+        resolvedComposition.fps,
+        outName,
+        transparent,
+        resolvedComposition.defaultProps,
+        resolvedComposition.id,
+        unresolvedComposition.calculateMetadata,
+    ]);
+    const onRender = (0, react_1.useCallback)(async () => {
+        if (renderMode === 'still') {
+            await onRenderStill();
+        }
+        else {
+            await onRenderVideo();
+        }
+    }, [renderMode, onRenderStill, onRenderVideo]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: onRender, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: [renderProgress
+                                ? `Rendering... ${renderProgress.renderedFrames}/${endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1}`
+                                : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "Advanced"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, codec: codec, setCodec: setCodec, startFrame: startFrame, setStartFrame: setStartFrame, endFrame: endFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) })] })] }));
+};
+const WebRenderModalWithLoader = (props) => {
+    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(WebRenderModal, { ...props }) }) }));
+};
+exports.WebRenderModalWithLoader = WebRenderModalWithLoader;

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

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { RenderType } from './WebRenderModal';
+type WebRenderModalAdvancedProps = {
+    readonly renderMode: RenderType;
+    readonly delayRenderTimeout: number;
+    readonly setDelayRenderTimeout: React.Dispatch<React.SetStateAction<number>>;
+    readonly mediaCacheSizeInBytes: number | null;
+    readonly setMediaCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
+    readonly hardwareAcceleration: 'no-preference' | 'prefer-hardware' | 'prefer-software';
+    readonly setHardwareAcceleration: (value: 'no-preference' | 'prefer-hardware' | 'prefer-software') => void;
+};
+export declare const WebRenderModalAdvanced: React.FC<WebRenderModalAdvancedProps>;
+export {};