@remotion/cli 3.3.37 → 3.3.38

package/dist/editor/components/RenderModal/RenderModal.js

@@ -6,25 +6,19 @@ const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
-const audio_1 = require("../../icons/audio");
-const file_1 = require("../../icons/file");
-const frame_1 = require("../../icons/frame");
-const gear_1 = require("../../icons/gear");
-const gif_1 = require("../../icons/gif");
+const colors_1 = require("../../helpers/colors");
+const use_file_existence_1 = require("../../helpers/use-file-existence");
 const modals_1 = require("../../state/modals");
+const CollapsableOptions_1 = require("../CollapsableOptions");
 const layout_1 = require("../layout");
 const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
 const SidebarContent_1 = require("../SidebarContent");
-const Tabs_1 = require("../Tabs");
-const CrfSetting_1 = require("./CrfSetting");
-const RenderModalAdvanced_1 = require("./RenderModalAdvanced");
-const RenderModalAudio_1 = require("./RenderModalAudio");
-const RenderModalBasic_1 = require("./RenderModalBasic");
-const RenderModalGif_1 = require("./RenderModalGif");
-const RenderModalPicture_1 = require("./RenderModalPicture");
 const initialState = { type: 'idle' };
 const reducer = (state, action) => {
     if (action.type === 'start') {
@@ -52,130 +46,69 @@ const container = {
     width: '100%',
     borderBottom: '1px solid black',
 };
-const scrollPanel = {
-    minHeight: '35vh',
-    maxHeight: '50vh',
-    overflow: 'auto',
-    minWidth: 650,
-};
-const horizontalLayout = {
+const optionRow = {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'flex-start',
+    minHeight: 40,
+    paddingLeft: 16,
+    paddingRight: 16,
 };
-const leftSidebar = {
-    padding: 12,
+const label = {
+    width: 150,
+    fontSize: 14,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
 };
-const horizontalTab = {
-    width: 250,
+const rightRow = {
     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,
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+    flex: 1,
 };
-const buttonStyle = {
-    backgroundColor: 'var(--blue)',
-    color: 'white',
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    borderTop: '1px solid black',
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
 };
-const flexer = {
-    flex: 1,
+const input = {
+    minWidth: 250,
+    textAlign: 'right',
 };
-const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialAudioCodec, initialVideoCodec, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, }) => {
+const MIN_QUALITY = 1;
+const MAX_QUALITY = 100;
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10;
+const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialCodec, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
-    const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
-    const [stillImageFormat, setStillImageFormat] = (0, react_1.useState)(() => initialStillImageFormat);
-    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(() => initialVideoImageFormat);
-    const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
-    const [videoCodec, setVideoSpecificalCodec] = (0, react_1.useState)(() => initialVideoCodec);
-    const [audioCodec, setAudioSpecificalCodec] = (0, react_1.useState)(() => initialAudioCodec);
-    const [mutedState, setMuted] = (0, react_1.useState)(() => initialMuted);
-    const [enforceAudioTrackState, setEnforceAudioTrackState] = (0, react_1.useState)(() => initialEnforceAudioTrack);
-    const [renderMode, setRenderModeState] = (0, react_1.useState)(initialRenderType);
-    const [quality, setQuality] = (0, react_1.useState)(() => initialQuality);
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
+    const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialImageFormat);
+    const [videoCodec, setVideoCodec] = (0, react_1.useState)(initialCodec);
+    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)('jpeg');
+    const [renderMode, setRenderMode] = (0, react_1.useState)(initialRenderType);
+    const [quality, setQuality] = (0, react_1.useState)(() => initialQuality !== null && initialQuality !== void 0 ? initialQuality : 80);
     const [scale, setScale] = (0, react_1.useState)(() => initialScale);
     const [verbose, setVerboseLogging] = (0, react_1.useState)(() => initialVerbose);
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
-    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => null);
-    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => null);
-    const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => initialProResProfile);
-    const [pixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
-    const [qualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');
-    const [shouldHaveCustomTargetAudioBitrate, setShouldHaveCustomTargetAudioBitrate,] = (0, react_1.useState)(() => initialAudioBitrate !== null);
-    const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = (0, react_1.useState)(() => initialAudioBitrate !== null && initialAudioBitrate !== void 0 ? initialAudioBitrate : '256K');
-    const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = (0, react_1.useState)(() => initialVideoBitrate !== null && initialVideoBitrate !== void 0 ? initialVideoBitrate : '1M');
-    const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null);
-    const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null && initialNumberOfGifLoops !== void 0 ? initialNumberOfGifLoops : 1);
-    // TODO: Allow to modify
-    const [delayRenderTimeout] = (0, react_1.useState)(() => initialDelayRenderTimeout);
-    const codec = (0, react_1.useMemo)(() => {
-        if (renderMode === 'audio') {
-            return audioCodec;
-        }
-        return videoCodec;
-    }, [audioCodec, renderMode, videoCodec]);
-    const numberOfGifLoops = (0, react_1.useMemo)(() => {
-        if (codec === 'gif' && limitNumberOfGifLoops) {
-            return numberOfGifLoopsSetting;
-        }
-        return null;
-    }, [codec, limitNumberOfGifLoops, numberOfGifLoopsSetting]);
-    const audioBitrate = (0, react_1.useMemo)(() => {
-        if (shouldHaveCustomTargetAudioBitrate) {
-            return customTargetAudioBitrate;
-        }
-        return null;
-    }, [customTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate]);
-    const videoBitrate = (0, react_1.useMemo)(() => {
-        if (qualityControlType === 'bitrate') {
-            return customTargetVideoBitrate;
-        }
-        return null;
-    }, [customTargetVideoBitrate, qualityControlType]);
-    const { crf, maxCrf, minCrf, setCrf, shouldDisplayOption: shouldDisplayCrfOption, } = (0, CrfSetting_1.useCrfState)(codec);
     const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
         if (isMounted.current === false)
             return;
         dispatch(payload);
     }, []);
-    const muted = (0, react_1.useMemo)(() => {
-        if (renderMode === 'video') {
-            return mutedState;
-        }
-        return false;
-    }, [mutedState, renderMode]);
-    const enforceAudioTrack = (0, react_1.useMemo)(() => {
-        if (renderMode === 'video') {
-            return enforceAudioTrackState;
-        }
-        return false;
-    }, [enforceAudioTrackState, renderMode]);
-    const proResProfile = (0, react_1.useMemo)(() => {
-        if (renderMode === 'video' && codec === 'prores') {
-            return proResProfileSetting;
-        }
-        return null;
-    }, [codec, proResProfileSetting, renderMode]);
+    const onValueChange = (0, react_1.useCallback)((e) => {
+        setOutName(e.target.value);
+    }, []);
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const currentComposition = (0, react_1.useMemo)(() => {
         for (const composition of compositions) {
@@ -188,55 +121,27 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     if (currentComposition === null) {
         throw new Error('This composition does not exist');
     }
-    const endFrame = (0, react_1.useMemo)(() => {
-        if (endFrameOrNull === null) {
-            return currentComposition.durationInFrames - 1;
-        }
-        return Math.max(0, Math.min(currentComposition.durationInFrames - 1, endFrameOrNull));
-    }, [currentComposition.durationInFrames, endFrameOrNull]);
-    const startFrame = (0, react_1.useMemo)(() => {
-        if (startFrameOrNull === null) {
-            return 0;
-        }
-        return Math.max(0, Math.min(endFrame - 1, startFrameOrNull));
-    }, [endFrame, startFrameOrNull]);
-    const frame = (0, react_1.useMemo)(() => {
-        const parsed = Math.floor(unclampedFrame);
-        return Math.max(0, Math.min(currentComposition.durationInFrames - 1, parsed));
-    }, [currentComposition.durationInFrames, unclampedFrame]);
     const getStringBeforeSuffix = (0, react_1.useCallback)((fileName) => {
         const dotPos = fileName.lastIndexOf('.');
         const bitBeforeDot = fileName.substring(0, dotPos);
         return bitBeforeDot;
     }, []);
-    const setDefaultOutName = (0, react_1.useCallback)((options) => {
-        if (options.type === 'still') {
-            setOutName((prev) => {
-                const newFileName = getStringBeforeSuffix(prev) + '.' + options.imageFormat;
-                return newFileName;
-            });
-        }
-        else {
-            setOutName((prev) => {
-                const codecSuffix = client_1.BrowserSafeApis.getFileExtensionFromCodec(options.codec);
-                const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
-                return newFileName;
-            });
-        }
+    const setCodec = (0, react_1.useCallback)((codec) => {
+        setVideoCodec(codec);
+        setOutName((prev) => {
+            // TODO: Check file extension for h264-mkv (render throws error atm)
+            const codecSuffix = client_1.BrowserSafeApis.getFileExtensionFromCodec(codec, 'final');
+            const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
+            return newFileName;
+        });
     }, [getStringBeforeSuffix]);
-    const setCodec = (0, react_1.useCallback)((newCodec) => {
-        if (renderMode === 'audio') {
-            setAudioSpecificalCodec(newCodec);
-        }
-        else {
-            setVideoSpecificalCodec(newCodec);
-        }
-        setDefaultOutName({ type: 'render', codec: newCodec });
-    }, [renderMode, setDefaultOutName]);
     const setStillFormat = (0, react_1.useCallback)((format) => {
-        setStillImageFormat(format);
-        setDefaultOutName({ type: 'still', imageFormat: format });
-    }, [setDefaultOutName]);
+        setImageFormat(format);
+        setOutName((prev) => {
+            const newFileName = getStringBeforeSuffix(prev) + '.' + format;
+            return newFileName;
+        });
+    }, [getStringBeforeSuffix]);
     const onClickStill = (0, react_1.useCallback)(() => {
         var _a;
         (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
@@ -244,8 +149,8 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         (0, actions_1.addStillRenderJob)({
             compositionId,
             outName,
-            imageFormat: stillImageFormat,
-            quality: stillImageFormat === 'jpeg' ? quality : null,
+            imageFormat,
+            quality: imageFormat === 'jpeg' ? quality : null,
             frame,
             scale,
             verbose,
@@ -261,20 +166,13 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         compositionId,
         dispatchIfMounted,
         frame,
-        stillImageFormat,
+        imageFormat,
         outName,
         quality,
         scale,
         setSelectedModal,
         verbose,
     ]);
-    const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
-    const everyNthFrame = (0, react_1.useMemo)(() => {
-        if (codec === 'gif') {
-            return everyNthFrameSetting;
-        }
-        return 1;
-    }, [codec, everyNthFrameSetting]);
     const onClickVideo = (0, react_1.useCallback)(() => {
         var _a;
         (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
@@ -283,23 +181,11 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             compositionId,
             outName,
             imageFormat: videoImageFormat,
-            quality: stillImageFormat === 'jpeg' ? quality : null,
+            quality: imageFormat === 'jpeg' ? quality : null,
             scale,
             verbose,
-            codec,
-            concurrency,
-            crf: qualityControlType === 'crf' ? crf : null,
-            endFrame,
-            startFrame,
-            muted,
-            enforceAudioTrack,
-            proResProfile,
-            pixelFormat,
-            audioBitrate,
-            videoBitrate,
-            everyNthFrame,
-            numberOfGifLoops,
-            delayRenderTimeout,
+            // TODO: Make this configurable
+            codec: videoCodec,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -309,36 +195,70 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
-        dispatchIfMounted,
         compositionId,
+        dispatchIfMounted,
+        imageFormat,
         outName,
-        videoImageFormat,
-        stillImageFormat,
         quality,
         scale,
-        verbose,
-        codec,
-        concurrency,
-        qualityControlType,
-        crf,
-        endFrame,
-        startFrame,
-        muted,
-        enforceAudioTrack,
-        proResProfile,
-        pixelFormat,
-        audioBitrate,
-        videoBitrate,
-        everyNthFrame,
-        numberOfGifLoops,
-        delayRenderTimeout,
         setSelectedModal,
+        verbose,
+        videoCodec,
+        videoImageFormat,
     ]);
+    const onQualityChangedDirectly = (0, react_1.useCallback)((newQuality) => {
+        setQuality(newQuality);
+    }, []);
+    const onQualityChanged = (0, react_1.useCallback)((e) => {
+        setQuality((q) => {
+            const newQuality = parseInt(e, 10);
+            if (Number.isNaN(newQuality)) {
+                return q;
+            }
+            const newQualityClamped = Math.min(MAX_QUALITY, Math.max(newQuality, MIN_QUALITY));
+            return newQualityClamped;
+        });
+    }, []);
+    const onScaleSetDirectly = (0, react_1.useCallback)((newScale) => {
+        setScale(newScale);
+    }, []);
+    const onScaleChanged = (0, react_1.useCallback)((e) => {
+        setScale((q) => {
+            const newScale = parseFloat(e);
+            if (Number.isNaN(newScale)) {
+                return q;
+            }
+            const newScaleClamped = Math.min(MAX_SCALE, Math.max(newScale, MIN_SCALE));
+            return newScaleClamped;
+        });
+    }, []);
+    const onFrameSetDirectly = (0, react_1.useCallback)((newFrame) => {
+        console.log(newFrame);
+        if (newFrame > currentComposition.durationInFrames - 1) {
+            setFrame(currentComposition.durationInFrames - 1);
+        }
+        else {
+            setFrame(newFrame);
+        }
+    }, [currentComposition.durationInFrames, setFrame]);
+    const onFrameChanged = (0, react_1.useCallback)((e) => {
+        setFrame((q) => {
+            const newFrame = parseFloat(e);
+            if (Number.isNaN(newFrame)) {
+                return q;
+            }
+            // TODO: User could change frame inbetween 😈
+            return newFrame > currentComposition.durationInFrames - 1
+                ? currentComposition.durationInFrames - 1
+                : newFrame;
+        });
+    }, []);
     (0, react_1.useEffect)(() => {
         return () => {
             isMounted.current = false;
         };
     }, []);
+    const existence = (0, use_file_existence_1.useFileExistence)(outName);
     const imageFormatOptions = (0, react_1.useMemo)(() => {
         return [
             {
@@ -348,7 +268,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
                     : () => setVideoImageFormat('png'),
                 key: 'png',
                 selected: renderMode === 'still'
-                    ? stillImageFormat === 'png'
+                    ? imageFormat === 'png'
                     : videoImageFormat === 'png',
             },
             {
@@ -358,23 +278,32 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
                     : () => setVideoImageFormat('jpeg'),
                 key: 'jpeg',
                 selected: renderMode === 'still'
-                    ? stillImageFormat === 'jpeg'
+                    ? imageFormat === 'jpeg'
                     : videoImageFormat === 'jpeg',
             },
         ];
-    }, [stillImageFormat, renderMode, setStillFormat, videoImageFormat]);
-    const setRenderMode = (0, react_1.useCallback)((newRenderMode) => {
-        setRenderModeState(newRenderMode);
-        if (newRenderMode === 'audio') {
-            setDefaultOutName({ type: 'render', codec: audioCodec });
-        }
-        if (newRenderMode === 'video') {
-            setDefaultOutName({ type: 'render', codec: videoCodec });
-        }
-        if (newRenderMode === 'still') {
-            setDefaultOutName({ type: 'still', imageFormat: stillImageFormat });
-        }
-    }, [audioCodec, setDefaultOutName, stillImageFormat, videoCodec]);
+    }, [imageFormat, renderMode, setStillFormat, videoImageFormat]);
+    const videoCodecOptions = (0, react_1.useMemo)(() => {
+        const codecs = [
+            'h264',
+            'h265',
+            'vp8',
+            'vp9',
+            'mp3',
+            'aac',
+            'wav',
+            'prores',
+            'gif',
+        ];
+        return codecs.map((codec) => {
+            return {
+                label: codec,
+                onClick: () => setCodec(codec),
+                key: codec,
+                selected: videoCodec === codec,
+            };
+        });
+    }, [setCodec, videoCodec]);
     const renderTabOptions = (0, react_1.useMemo)(() => {
         if ((currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames) < 2) {
             return [
@@ -382,6 +311,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
                     label: 'Still',
                     onClick: () => {
                         setRenderMode('still');
+                        setStillFormat(imageFormat);
                     },
                     key: 'still',
                     selected: renderMode === 'still',
@@ -393,6 +323,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
                 label: 'Still',
                 onClick: () => {
                     setRenderMode('still');
+                    setStillFormat(imageFormat);
                 },
                 key: 'still',
                 selected: renderMode === 'still',
@@ -401,21 +332,46 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
                 label: 'Video',
                 onClick: () => {
                     setRenderMode('video');
+                    setCodec(videoCodec);
                 },
                 key: 'video',
                 selected: renderMode === 'video',
             },
-            {
-                label: 'Audio',
-                onClick: () => {
-                    setRenderMode('audio');
-                },
-                key: 'audio',
-                selected: renderMode === 'audio',
-            },
         ];
-    }, [currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames, renderMode, setRenderMode]);
-    const [tab, setTab] = (0, react_1.useState)('general');
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (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.jsx)(Button_1.Button, { autoFocus: true, onClick: renderMode === 'still' ? onClickStill : onClickVideo, disabled: state.type === 'load', style: buttonStyle, children: state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...' })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { 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"] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { 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"] }), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { 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"] })), codec === 'gif' ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { 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, (0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { 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"] })] }), (0, jsx_runtime_1.jsxs)("div", { style: scrollPanel, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, quality: quality, qualityControlType: qualityControlType, setQuality: setQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, shouldDisplayCrfOption: shouldDisplayCrfOption, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 })] })] })] }));
+    }, [
+        currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames,
+        imageFormat,
+        renderMode,
+        setCodec,
+        setStillFormat,
+        videoCodec,
+    ]);
+    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
+        setVerboseLogging(e.target.checked);
+    }, []);
+    if (renderMode === 'still') {
+        return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
+                                            // TODO: Validate and reject folders or weird file names
+                                            , { 
+                                                // TODO: Validate and reject folders or weird file names
+                                                warning: existence, style: input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] }), currentComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Frame" }), (0, jsx_runtime_1.jsxs)("div", { style: rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, 
+                                            // TODO: Actual frame
+                                            placeholder: "0-100", 
+                                            // TODO: Debug the number input field
+                                            onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, 
+                                            // TODO: Add actual frame
+                                            max: currentComposition.durationInFrames - 1 }), ' '] })] })) : null, (0, jsx_runtime_1.jsxs)(CollapsableOptions_1.CollapsableOptions, { showLabel: "Show advanced settings", hideLabel: "Hide advanced settings", children: [(0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onTextChange: onScaleChanged, placeholder: "0.1-10", 
+                                                // TODO: Does not allow non-integer steps
+                                                // TODO: Cannot click and type in 0.2
+                                                onValueChange: onScaleSetDirectly, name: "scale", step: 0.1, min: MIN_SCALE, max: MAX_SCALE }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: verbose, onChange: onVerboseLoggingChanged }) })] }), imageFormat === 'jpeg' && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "JPEG Quality" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: quality, onTextChange: onQualityChanged, placeholder: "0-100", onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) })] }))] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: buttonRow, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render still' : 'Rendering...' }) })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Codec" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: videoCodecOptions, needsWrapping: true }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
+                                        // TODO: Validate and reject folders or weird file names
+                                        , { 
+                                            // TODO: Validate and reject folders or weird file names
+                                            warning: existence, style: input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] }), (0, jsx_runtime_1.jsxs)(CollapsableOptions_1.CollapsableOptions, { showLabel: "Show advanced settings", hideLabel: "Hide advanced settings", children: [(0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onTextChange: onScaleChanged, placeholder: "0.1-10", 
+                                            // TODO: Direct input does not allow non-integer steps
+                                            // TODO: Cannot click and type in 0.2
+                                            onValueChange: onScaleSetDirectly, name: "scale", step: 0.1, min: MIN_SCALE, max: MAX_SCALE }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: verbose, onChange: onVerboseLoggingChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] }), videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "JPEG Quality" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: quality, onTextChange: onQualityChanged, placeholder: "0-100", onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) })] }))] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: buttonRow, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickVideo, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render video' : 'Rendering...' }) })] })] }));
 };
 exports.RenderModal = RenderModal;

package/dist/editor/components/RenderModal/ScaleSetting.js

@@ -2,10 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScaleSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const NumberSetting_1 = require("./NumberSetting");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const layout_1 = require("./layout");
 const MIN_SCALE = 0.1;
 const MAX_SCALE = 10;
 const ScaleSetting = ({ scale, setScale }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_SCALE, max: MAX_SCALE, step: 0.1, name: "Scale", onValueChanged: setScale, value: scale }));
+    const onScaleSetDirectly = (0, react_1.useCallback)((newScale) => {
+        setScale(newScale);
+    }, [setScale]);
+    const onScaleChanged = (0, react_1.useCallback)((e) => {
+        setScale((q) => {
+            const newScale = parseFloat(e);
+            if (Number.isNaN(newScale)) {
+                return q;
+            }
+            const newScaleClamped = Math.min(MAX_SCALE, Math.max(newScale, MIN_SCALE));
+            return newScaleClamped;
+        });
+    }, [setScale]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onTextChange: onScaleChanged, placeholder: `${MIN_SCALE}-${MAX_SCALE}`, onValueChange: onScaleSetDirectly, name: "scale", step: 0.1, min: MIN_SCALE, max: MAX_SCALE }) }) })] }));
 };
 exports.ScaleSetting = ScaleSetting;

package/dist/editor/components/RenderModal/layout.d.ts

@@ -2,4 +2,3 @@
 export declare const optionRow: React.CSSProperties;
 export declare const label: React.CSSProperties;
 export declare const rightRow: React.CSSProperties;
-export declare const input: React.CSSProperties;

package/dist/editor/components/RenderModal/layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
+exports.rightRow = exports.label = exports.optionRow = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.optionRow = {
     display: 'flex',
@@ -9,12 +9,10 @@ exports.optionRow = {
     minHeight: 40,
     paddingLeft: 16,
     paddingRight: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
 };
 exports.label = {
     width: 150,
-    fontSize: 15,
+    fontSize: 14,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,
 };
@@ -25,7 +23,3 @@ exports.rightRow = {
     alignSelf: 'center',
     flex: 1,
 };
-exports.input = {
-    minWidth: 250,
-    textAlign: 'right',
-};

package/dist/editor/components/RenderQueue/RenderQueueRemoveItem.js

@@ -4,12 +4,11 @@ exports.RenderQueueRemoveItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InlineAction_1 = require("../InlineAction");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueRemoveItem = ({ job }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, actions_1.removeRenderJob)(job).catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not remove item: ${err.message}`);
+            // TODO: Handle error
             console.log(err);
         });
     }, [job]);