@remotion/cli 4.0.0-alpha.127 → 4.0.0-alpha.179

package/dist/editor/components/NewComposition/ComboBox.js

@@ -21,9 +21,16 @@ const container = {
     padding: '8px 10px',
     display: 'inline-block',
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    fontSize: 14,
     borderWidth: 1,
     borderStyle: 'solid',
+    maxWidth: '100%',
+};
+const label = {
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: 14,
+    textAlign: 'left',
 };
 const Combobox = ({ values, selectedId, style: customStyle, title }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
@@ -49,13 +56,6 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
             return setOpened((o) => {
                 if (!o) {
                     refresh === null || refresh === void 0 ? void 0 : refresh();
-                    window.addEventListener('pointerup', (evt) => {
-                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                            setOpened(false);
-                        }
-                    }, {
-                        once: true,
-                    });
                 }
                 return !o;
             });
@@ -97,9 +97,12 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         }
         const spaceToBottom = size.windowSize.height - (size.top + size.height);
         const spaceToTop = size.top;
-        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const spaceToRight = size.windowSize.width - (size.left + size.width);
+        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
+        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
         return {
-            ...(layout === 'top'
+            ...(verticalLayout === 'top'
                 ? {
                     ...styles_1.menuContainerTowardsBottom,
                     top: size.top + size.height,
@@ -108,7 +111,13 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     ...styles_1.menuContainerTowardsTop,
                     bottom: size.windowSize.height - size.top,
                 }),
-            left: size.left,
+            ...(horizontalLayout === 'left'
+                ? {
+                    left: size.left,
+                }
+                : {
+                    right: size.windowSize.width - size.left - size.width,
+                }),
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);
@@ -128,8 +137,8 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected === null || selected === void 0 ? void 0 : selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.Combobox = Combobox;

package/dist/editor/components/NewComposition/InputDragger.js

@@ -99,7 +99,7 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, status: status, ...props }) }));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', ...props }) }));
     }
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
 };

package/dist/editor/components/NewComposition/MenuContent.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
@@ -14,6 +15,11 @@ const container = {
     paddingBottom: styles_1.MENU_VERTICAL_PADDING,
     border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
     marginLeft: 0 - BORDER_SIZE,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    minWidth: 200,
+    maxWidth: styles_1.MAX_MENU_WIDTH,
+    maxHeight: 600,
 };
 const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -210,7 +216,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         current.addEventListener('pointerleave', onPointerLeave);
         return () => current.removeEventListener('pointerleave', onPointerLeave);
     }, [onHide, subMenuActivated]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: container, children: values.map((item) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
             if (item.type === 'divider') {
                 return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
             }

package/dist/editor/components/PlayerEmitterContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const PlayerEmitterContext: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/PlayerEmitterContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerEmitterContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const PlayerEmitterContext = ({ children }) => {
+    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
+    return ((0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
+};
+exports.PlayerEmitterContext = PlayerEmitterContext;

package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.js

@@ -259,6 +259,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
         if (showKeyboardShortcuts) {
             return {
                 maxHeight: 600,
+                overflowY: 'auto',
             };
         }
         return {

package/dist/editor/components/RenderButton.js

@@ -34,7 +34,7 @@ const RenderButton = ({ composition, visible }) => {
             initialFrame: 0,
             initialVideoImageFormat: defaults.videoImageFormat,
             initialStillImageFormat: defaults.stillImageFormat,
-            initialQuality: defaults.quality,
+            initialJpegQuality: defaults.jpegQuality,
             initialScale: defaults.scale,
             initialVerbose: defaults.logLevel === 'verbose',
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
@@ -68,7 +68,6 @@ const RenderButton = ({ composition, visible }) => {
     if (!visible) {
         return null;
     }
-    // TODO: Here in the sidebar the thin rocket icon looked better
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { svgProps: iconStyle }) }));
 };
 exports.RenderButton = RenderButton;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const JpegQualitySetting: React.FC<{
-    quality: number;
-    setQuality: (value: React.SetStateAction<number>) => void;
+    jpegQuality: number;
+    setJpegQuality: (value: React.SetStateAction<number>) => void;
 }>;

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

@@ -4,9 +4,9 @@ exports.JpegQualitySetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 const NumberSetting_1 = require("./NumberSetting");
-const MIN_QUALITY = 1;
-const MAX_QUALITY = 100;
-const JpegQualitySetting = ({ quality: scale, setQuality: setScale }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_QUALITY, max: MAX_QUALITY, step: 1, name: "JPEG Quality", onValueChanged: setScale, value: scale, hint: client_1.BrowserSafeApis.options.jpegQualityOption }));
+const MIN_JPEG_QUALITY = 1;
+const MAX_JPEG_QUALITY = 100;
+const JpegQualitySetting = ({ jpegQuality, setJpegQuality }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_JPEG_QUALITY, max: MAX_JPEG_QUALITY, step: 1, name: "JPEG Quality", onValueChanged: setJpegQuality, value: jpegQuality, hint: client_1.BrowserSafeApis.options.jpegQualityOption }));
 };
 exports.JpegQualitySetting = JpegQualitySetting;

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

@@ -6,7 +6,7 @@ export declare const RenderModal: React.FC<{
     initialFrame: number;
     initialVideoImageFormat: VideoImageFormat;
     initialStillImageFormat: StillImageFormat;
-    initialQuality: number;
+    initialJpegQuality: number;
     initialScale: number;
     initialVerbose: boolean;
     initialOutName: string;

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

@@ -24,7 +24,7 @@ const ModalHeader_1 = require("../ModalHeader");
 const actions_1 = require("../RenderQueue/actions");
 const RightPanel_1 = require("../RightPanel");
 const SegmentedControl_1 = require("../SegmentedControl");
-const Tabs_1 = require("../Tabs");
+const vertical_1 = require("../Tabs/vertical");
 const CrfSetting_1 = require("./CrfSetting");
 const out_name_checker_1 = require("./out-name-checker");
 const RenderModalAdvanced_1 = require("./RenderModalAdvanced");
@@ -103,7 +103,7 @@ const buttonStyle = {
 const flexer = {
     flex: 1,
 };
-const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, }) => {
+const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
@@ -121,7 +121,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     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 [jpegQuality, setJpegQuality] = (0, react_1.useState)(() => initialJpegQuality);
     const [scale, setScale] = (0, react_1.useState)(() => initialScale);
     const [verbose, setVerboseLogging] = (0, react_1.useState)(() => initialVerbose);
     const [disallowParallelEncoding, setDisallowParallelEncoding] = (0, react_1.useState)(false);
@@ -284,10 +284,10 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         setStillImageFormat(format);
         setDefaultOutName({ type: 'still', imageFormat: format });
     }, [setDefaultOutName]);
-    const { setSidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const onClickStill = (0, react_1.useCallback)(() => {
         var _a;
-        setSidebarCollapsedStateRight('expanded');
+        setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, RightPanel_1.persistSelectedPanel)('renders');
         (_a = RightPanel_1.rightSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
@@ -295,7 +295,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             compositionId,
             outName,
             imageFormat: stillImageFormat,
-            quality: stillImageFormat === 'jpeg' ? quality : null,
+            jpegQuality: stillImageFormat === 'jpeg' ? jpegQuality : null,
             frame,
             scale,
             verbose,
@@ -312,12 +312,12 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
-        setSidebarCollapsedStateRight,
+        setSidebarCollapsedState,
         dispatchIfMounted,
         compositionId,
         outName,
         stillImageFormat,
-        quality,
+        jpegQuality,
         frame,
         scale,
         verbose,
@@ -337,7 +337,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     const audioCodec = deriveFinalAudioCodec(codec, userSelectedAudioCodec);
     const onClickVideo = (0, react_1.useCallback)(() => {
         var _a;
-        setSidebarCollapsedStateRight('expanded');
+        setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, RightPanel_1.persistSelectedPanel)('renders');
         (_a = RightPanel_1.rightSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
@@ -345,7 +345,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             compositionId,
             outName,
             imageFormat: videoImageFormat,
-            quality: stillImageFormat === 'jpeg' ? quality : null,
+            jpegQuality: stillImageFormat === 'jpeg' ? jpegQuality : null,
             scale,
             verbose,
             codec,
@@ -376,13 +376,13 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
-        setSidebarCollapsedStateRight,
+        setSidebarCollapsedState,
         dispatchIfMounted,
         compositionId,
         outName,
         videoImageFormat,
         stillImageFormat,
-        quality,
+        jpegQuality,
         scale,
         verbose,
         codec,
@@ -561,6 +561,6 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
                             backgroundColor: outnameValidation.valid
                                 ? 'var(--blue)'
                                 : 'var(--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)(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"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { 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)(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"] })) : null, shownTabs.includes('audio') ? ((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"] })) : null, shownTabs.includes('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, shownTabs.includes('advanced') ? ((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"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, 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, 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, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, 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 })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { inputProps: inputProps, setInputProps: setInputProps, composition: currentComposition, compact: false, showSaveButton: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, 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 })) })] })] }));
+                        }, 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: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, 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, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, 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, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, 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 })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { inputProps: inputProps, setInputProps: setInputProps, composition: currentComposition, compact: false, mayShowSaveButton: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, 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 })) })] })] }));
 };
 exports.RenderModal = RenderModal;

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

@@ -51,8 +51,10 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
         });
     }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
+            // TODO: Should be right aligned
             // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
             , { 
+                // TODO: Should be right aligned
                 // 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, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Ignore certificate errors " }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "OpenGL render backend" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
 };

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

@@ -41,8 +41,6 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
             };
         });
     }, [codec, setAudioCodec]);
-    // TODO: Bug - select rive-vehicle to render, then select GIF codec
-    // Error: Audio codec null is not supported for codec gif
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted, hint: client_1.BrowserSafeApis.options.muteOption }), (0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState, option: client_1.BrowserSafeApis.options.enforceAudioOption }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.audioBitrateOption }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok" }) }) })] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

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

@@ -5,5 +5,5 @@ export declare const RenderModalData: React.FC<{
     inputProps: unknown;
     setInputProps: React.Dispatch<React.SetStateAction<unknown>>;
     compact: boolean;
-    showSaveButton: boolean;
+    mayShowSaveButton: boolean;
 }>;

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

@@ -3,7 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const layout_1 = require("../layout");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
 const RenderModalJSONInputPropsEditor_1 = require("./RenderModalJSONInputPropsEditor");
@@ -15,18 +18,59 @@ const outer = {
     overflow: 'hidden',
 };
 const controlContainer = {
-    flexDirection: 'row',
+    flexDirection: 'column',
     display: 'flex',
-    paddingLeft: 12,
-    paddingTop: 12,
-    paddingBottom: 12,
+    padding: 12,
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
-const RenderModalData = ({ composition, inputProps, setInputProps, compact, showSaveButton }) => {
+const tabWrapper = {
+    display: 'flex',
+    marginBottom: '4px',
+    flexDirection: 'row',
+};
+const spacer = {
+    flex: 1,
+};
+const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayShowSaveButton }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
+    const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
     const zodValidationResult = (0, react_1.useMemo)(() => {
         return composition.schema.safeParse(inputProps);
     }, [composition.schema, inputProps]);
+    const cliProps = (0, remotion_1.getInputProps)();
+    const [canSaveDefaultProps, setCanSaveDefaultProps] = (0, react_1.useState)({
+        canUpdate: false,
+        reason: 'Loading...',
+        determined: false,
+    });
+    const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
+    // TODO: Disable if Preview Server is disconnected
+    // TODO: Update if root file is updated
+    // TODO: Segment the state for different compositions
+    (0, react_1.useEffect)(() => {
+        (0, actions_1.canUpdateDefaultProps)(composition.id)
+            .then((can) => {
+            if (can.canUpdate) {
+                setCanSaveDefaultProps({
+                    canUpdate: true,
+                });
+            }
+            else {
+                setCanSaveDefaultProps({
+                    canUpdate: false,
+                    reason: can.reason,
+                    determined: true,
+                });
+            }
+        })
+            .catch((err) => {
+            setCanSaveDefaultProps({
+                canUpdate: false,
+                reason: err.message,
+                determined: true,
+            });
+        });
+    }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -51,11 +95,13 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, show
         setMode('schema');
     }, []);
     const onUpdate = (0, react_1.useCallback)(() => {
+        setValBeforeSafe(inputProps);
         (0, actions_1.updateDefaultProps)(composition.id, inputProps);
     }, [composition.id, inputProps]);
     const onSave = (0, react_1.useCallback)((updater) => {
         (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps));
     }, [composition.defaultProps, composition.id]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: controlContainer, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: composition.schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONInputPropsEditor_1.RenderModalJSONInputPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] }), Object.keys(cliProps).length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: "The data that was passed using --props takes priority over the data you enter here.", align: "flex-start", type: "warning" })] })) : null, canSaveDefaultProps.canUpdate === false &&
+                        canSaveDefaultProps.determined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: `Can't save default props: ${canSaveDefaultProps.reason}`, align: "flex-start", type: "warning" })] })) : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: composition.schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONInputPropsEditor_1.RenderModalJSONInputPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton }))] }));
 };
 exports.RenderModalData = RenderModalData;

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

@@ -6,4 +6,6 @@ export declare const RenderModalJSONInputPropsEditor: React.FC<{
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     switchToSchema: () => void;
     onSave: () => void;
+    valBeforeSafe: unknown;
+    showSaveButton: boolean;
 }>;

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

@@ -27,6 +27,7 @@ exports.RenderModalJSONInputPropsEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
@@ -58,7 +59,8 @@ const scrollable = {
     flex: 1,
 };
 // TODO: Note if custom 'remotion-date:' pattern has been used
-const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult, switchToSchema, onSave }) => {
+const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult, switchToSchema, onSave, valBeforeSafe, showSaveButton, }) => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const [localValue, setLocalValue] = react_1.default.useState(() => {
         return parseJSON((0, date_serialization_1.serializeJSONWithDate)(value, 2));
     });
@@ -89,8 +91,28 @@ const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult,
             setValue(parsed.value);
         }
     }, [setValue]);
-    // TODO: Don't show save button if no changes have been made
+    const hasChanged = (0, react_1.useMemo)(() => {
+        return value && JSON.stringify(value) !== JSON.stringify(valBeforeSafe);
+    }, [valBeforeSafe, value]);
+    const onQuickSave = (0, react_1.useCallback)(() => {
+        if (hasChanged) {
+            onSave();
+        }
+    }, [hasChanged, onSave]);
+    (0, react_1.useEffect)(() => {
+        const save = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 's',
+            commandCtrlKey: true,
+            callback: onQuickSave,
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+        });
+        return () => {
+            save.unregister();
+        };
+    }, [keybindings, onQuickSave, onSave]);
     // TODO: Indicate saving progress
-    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: style }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : zodValidationResult.success === false ? ((0, jsx_runtime_1.jsx)("button", { type: "button", style: schemaButton, onClick: switchToSchema, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: "Does not match schema", type: "warning" }) })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format JSON" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !zodValidationResult.success, children: "Save" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: style }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : zodValidationResult.success === false ? ((0, jsx_runtime_1.jsx)("button", { type: "button", style: schemaButton, onClick: switchToSchema, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: "Does not match schema", type: "warning" }) })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format JSON" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !zodValidationResult.success || !hasChanged || !showSaveButton, children: "Save" })] })] }));
 };
 exports.RenderModalJSONInputPropsEditor = RenderModalJSONInputPropsEditor;

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

@@ -15,8 +15,8 @@ export declare const RenderModalPicture: React.FC<{
     qualityControlType: QualityControl;
     videoImageFormat: VideoImageFormat;
     stillImageFormat: StillImageFormat;
-    setQuality: React.Dispatch<React.SetStateAction<number>>;
-    quality: number;
+    setJpegQuality: React.Dispatch<React.SetStateAction<number>>;
+    jpegQuality: number;
     maxCrf: number;
     minCrf: number;
     setCrf: React.Dispatch<React.SetStateAction<number>>;

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

@@ -19,7 +19,7 @@ const qualityControlModes = ['crf', 'bitrate'];
 const container = {
     flex: 1,
 };
-const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setQuality, quality, maxCrf, minCrf, setCrf, shouldDisplayCrfOption, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
+const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayCrfOption, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
     const pixelFormatOptions = (0, react_1.useMemo)(() => {
         return client_1.BrowserSafeApis.validPixelFormats.map((option) => {
             return {
@@ -49,7 +49,7 @@ const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixel
     const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
         setCustomTargetVideoBitrateValue(e.target.value);
     }, [setCustomTargetVideoBitrateValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { quality: quality, setQuality: setQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { quality: quality, setQuality: setQuality })), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, shouldDisplayCrfOption &&
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, shouldDisplayCrfOption &&
                 qualityControlType === 'crf' &&
                 renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target video bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoBitrate }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok" }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
 };

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

@@ -58,6 +58,8 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, d
         }
         const defaultPropsValid = schema.safeParse(defaultProps);
         if (!defaultPropsValid.success) {
+            // TODO: Layout is not nice
+            // TODO: Does not react to when schema is updated
             return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
         }
         return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the ", (0, jsx_runtime_1.jsx)("code", { children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));

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

@@ -13,7 +13,6 @@ const commonStyles = {
     fontSize: 15,
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
-    lineHeight: '40px',
 };
 const compactStyles = {
     ...commonStyles,
@@ -24,14 +23,12 @@ const compactStyles = {
 const wideStyles = {
     ...commonStyles,
     width: layout_2.label.width,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
 };
 const labelStyle = {
     fontFamily: 'monospace',
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
+    lineHeight: '40px',
 };
 const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, compact, onRemove, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? compactStyles : wideStyles, children: [(0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: (0, get_schema_label_1.getSchemaLabel)(jsonPath) }), compact ? (0, jsx_runtime_1.jsx)(layout_1.Flex, {}) : (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));