@remotion/cli 3.3.82 → 3.3.83

package/dist/codemods/update-default-props.js

@@ -61,7 +61,7 @@ const findEndPosition = (input, currentPosition) => {
     }
     throw new Error('Could not find end of defaultProps');
 };
-const findEnder = (input, position, maxPosition) => {
+const findEnder = (input, position, maxPosition, compositionId) => {
     let currentPosition = position;
     while (currentPosition < maxPosition) {
         const next = findEndPosition(input, currentPosition);
@@ -72,7 +72,7 @@ const findEnder = (input, position, maxPosition) => {
         }
         return [position, currentPosition + 1];
     }
-    throw new Error('did not find string');
+    throw new Error(`No \`defaultProps\` prop found in the <Composition/> tag with the ID "${compositionId}".`);
 };
 const findTerminators = (input, position) => {
     const nextComposition = input.indexOf('<Composition', position);
@@ -101,23 +101,22 @@ const stringifyDefaultProps = (props) => {
         .replace(/__ADD_AS_CONST__"/g, '" as const');
 };
 // TODO: Add more sanity checks
-// TODO: better error messages
 const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) => {
     const starter = findStarter({ input, compositionId });
     const START_TOKEN = 'defaultProps={';
     const start = input.indexOf(START_TOKEN, starter);
     if (start === -1) {
-        throw new Error('Could not find defaultProps in <Composition> tag');
+        throw new Error(`No \`defaultProps\` prop found in the <Composition/> tag with the ID "${compositionId}".`);
     }
     const maxEnd = findTerminators(input, starter);
-    const [startPos, endPos] = findEnder(input, start + START_TOKEN.length, maxEnd);
+    const [startPos, endPos] = findEnder(input, start + START_TOKEN.length, maxEnd, compositionId);
     // eslint-disable-next-line @typescript-eslint/consistent-type-imports
     let prettier = null;
     try {
         prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
     }
     catch (err) {
-        throw new Error('Cannot save default props because Prettier cannot be found in the current project.');
+        throw new Error('Prettier cannot be found in the current project.');
     }
     const { format, resolveConfig, resolveConfigFile } = prettier;
     const newFile = input.substring(0, startPos) +
@@ -125,11 +124,11 @@ const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) =>
         input.substring(endPos);
     const configFilePath = await resolveConfigFile();
     if (!configFilePath) {
-        throw new Error('prettier config file not found');
+        throw new Error('The Prettier config file was not found');
     }
     const prettierConfig = await resolveConfig(configFilePath);
     if (!prettierConfig) {
-        throw new Error('Prettier config not found');
+        throw new Error(`The Prettier config at ${configFilePath} could not be read`);
     }
     const prettified = format(newFile, {
         ...prettierConfig,

package/dist/color-math.d.ts

@@ -0,0 +1 @@
+export declare const colorWithNewOpacity: (color: string, opacity: number) => string;

package/dist/color-math.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorWithNewOpacity = void 0;
+const remotion_1 = require("remotion");
+const colorWithNewOpacity = (color, opacity) => {
+    const { r, g, b } = remotion_1.Internals.parseColor(color);
+    if (opacity >= 255) {
+        return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${(opacity / 255).toFixed(2)})`;
+};
+exports.colorWithNewOpacity = colorWithNewOpacity;

package/dist/config/index.d.ts

@@ -56,5 +56,6 @@ export declare const ConfigInternals: {
     getNumberOfGifLoops: () => import("./number-of-gif-loops").Loop;
     getWebpackPolling: () => number | null;
     getShouldOpenBrowser: () => boolean;
+    getChromiumUserAgent: () => string | null;
 };
 export declare const overrideRemotion: () => void;

package/dist/config/index.js

@@ -82,6 +82,7 @@ const public_dir_1 = require("./public-dir");
 const quality_2 = require("./quality");
 const scale_2 = require("./scale");
 const timeout_2 = require("./timeout");
+const user_agent_1 = require("./user-agent");
 const webpack_caching_2 = require("./webpack-caching");
 const webpack_poll_1 = require("./webpack-poll");
 const width_1 = require("./width");
@@ -110,6 +111,7 @@ const Puppeteer = {
     setChromiumIgnoreCertificateErrors: chromium_flags_2.setChromiumIgnoreCertificateErrors,
     setChromiumHeadlessMode: chromium_flags_2.setChromiumHeadlessMode,
     setChromiumOpenGlRenderer: chromium_flags_2.setChromiumOpenGlRenderer,
+    setChromiumUserAgent: user_agent_1.setChromiumUserAgent,
 };
 const Rendering = {
     setDotEnvLocation: env_file_2.setDotEnvLocation,
@@ -207,6 +209,7 @@ exports.ConfigInternals = {
     getNumberOfGifLoops: number_of_gif_loops_1.getNumberOfGifLoops,
     getWebpackPolling: webpack_poll_1.getWebpackPolling,
     getShouldOpenBrowser: open_browser_1.getShouldOpenBrowser,
+    getChromiumUserAgent: user_agent_1.getChromiumUserAgent,
 };
 const overrideRemotion = () => {
     Object.assign(remotion_1.Config, exports.Config);

package/dist/config/user-agent.d.ts

@@ -0,0 +1,4 @@
+declare type UserAgent = string | null;
+export declare const setChromiumUserAgent: (newAgent: UserAgent) => void;
+export declare const getChromiumUserAgent: () => UserAgent;
+export {};

package/dist/config/user-agent.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChromiumUserAgent = exports.setChromiumUserAgent = void 0;
+let userAgent = null;
+const setChromiumUserAgent = (newAgent) => {
+    userAgent = newAgent;
+};
+exports.setChromiumUserAgent = setChromiumUserAgent;
+const getChromiumUserAgent = () => {
+    return userAgent;
+};
+exports.getChromiumUserAgent = getChromiumUserAgent;

package/dist/editor/components/Canvas.js

@@ -37,10 +37,7 @@ const Canvas = () => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    const isFit = previewSize.size === 'auto' ||
-        (previewSize.size === 1 &&
-            previewSize.translation.x === 0 &&
-            previewSize.translation.y === 0);
+    const isFit = previewSize.size === 'auto';
     const onWheel = (0, react_1.useCallback)((e) => {
         if (!editorZoomGestures) {
             return;

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RemInputStatus } from './RemInput';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+};
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemInputTypeColor = exports.inputBaseStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const RemInput_1 = require("./RemInput");
+exports.inputBaseStyle = {
+    padding: 0,
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "color", tabIndex: tabIndex, ...props, style: style }));
+};
+exports.RemInputTypeColor = (0, react_1.forwardRef)(RemInputTypeColorForwardRef);

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,6 +103,7 @@ const buttonStyle = {
 const flexer = {
     flex: 1,
 };
+// TODO: Copy edited props from Props editor to Render modal
 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)(() => {
@@ -284,10 +285,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' });
@@ -312,7 +313,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
-        setSidebarCollapsedStateRight,
+        setSidebarCollapsedState,
         dispatchIfMounted,
         compositionId,
         outName,
@@ -337,7 +338,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' });
@@ -376,7 +377,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
-        setSidebarCollapsedStateRight,
+        setSidebarCollapsedState,
         dispatchIfMounted,
         compositionId,
         outName,
@@ -561,6 +562,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, 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 })) })] })] }));
+                        }, 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/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,31 +18,57 @@ 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 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 [canSaveDefaultProps, setCanSaveDefaultProps] = (0, react_1.useState)(false);
-    const showSaveButton = mayShowSaveButton && canSaveDefaultProps;
-    // TODO: Show reason
+    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) => {
-            setCanSaveDefaultProps(can.canUpdate);
+            if (can.canUpdate) {
+                setCanSaveDefaultProps({
+                    canUpdate: true,
+                });
+            }
+            else {
+                setCanSaveDefaultProps({
+                    canUpdate: false,
+                    reason: can.reason,
+                    determined: true,
+                });
+            }
         })
-            .catch(() => {
-            // TODO: Use error as reason
-            setCanSaveDefaultProps(false);
+            .catch((err) => {
+            setCanSaveDefaultProps({
+                canUpdate: false,
+                reason: err.message,
+                determined: true,
+            });
         });
     }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
@@ -72,6 +101,7 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
     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, valBeforeSafe: valBeforeSafe }))] }));
+    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

@@ -7,4 +7,5 @@ export declare const RenderModalJSONInputPropsEditor: React.FC<{
     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, valBeforeSafe, }) => {
+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));
     });
@@ -92,7 +94,25 @@ const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult,
     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 || !hasChanged, 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/SchemaEditor/ZodColorEditor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodColorEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: string;
+    defaultValue: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    onSave: (updater: (oldNum: unknown) => string) => void;
+    onRemove: null | (() => void);
+    compact: boolean;
+    showSaveButton: boolean;
+}>;

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodColorEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const color_math_1 = require("../../../../color-math");
+const layout_1 = require("../../layout");
+const InputDragger_1 = require("../../NewComposition/InputDragger");
+const RemInput_1 = require("../../NewComposition/RemInput");
+const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const { a, b, g, r } = localValue.zodValidation.success
+        ? remotion_1.Internals.parseColor(localValue.value)
+        : { a: 1, b: 0, g: 0, r: 0 };
+    const onChange = (0, react_1.useCallback)((e) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(e.target.value, Math.round(a));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [a, schema, setValue]);
+    const onTextChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value;
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    const rgb = `#${r.toString(16).padStart(2, '0')}${g
+        .toString(16)
+        .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    const status = localValue.zodValidation.success ? 'ok' : 'error';
+    const colorPicker = (0, react_1.useMemo)(() => {
+        return {
+            height: 39,
+            width: 45,
+            display: 'inline-block',
+        };
+    }, []);
+    const onOpacityChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue]);
+    const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: String(newColor),
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: colorPicker, children: (0, jsx_runtime_1.jsx)(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {
+                                        height: 39,
+                                    }, value: rgb, onChange: onChange, className: "__remotion_color_picker", status: status }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%` })] }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+};
+exports.ZodColorEditor = ZodColorEditor;

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const ZodArrayEditor_1 = require("./ZodArrayEditor");
 const ZodBooleanEditor_1 = require("./ZodBooleanEditor");
+const ZodColorEditor_1 = require("./ZodColorEditor");
 const ZodDateEditor_1 = require("./ZodDateEditor");
 const ZodEffectEditor_1 = require("./ZodEffectEditor");
 const ZodEnumEditor_1 = require("./ZodEnumEditor");
@@ -55,6 +56,9 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
         return ((0, jsx_runtime_1.jsx)(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
     }
     if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodEffects) {
+        if (schema._def.description === remotion_1.Internals.REMOTION_COLOR_BRAND) {
+            return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove }));
+        }
         return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
     }
     if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUnion) {

package/dist/editor/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -59,6 +59,9 @@ const createZodValues = (schema) => {
             return def.value;
         }
         case remotion_1.z.ZodFirstPartyTypeKind.ZodEffects: {
+            if (schema._def.description === remotion_1.Internals.REMOTION_COLOR_BRAND) {
+                return '#ffffff';
+            }
             return (0, exports.createZodValues)(def.schema);
         }
         case remotion_1.z.ZodFirstPartyTypeKind.ZodIntersection: {

package/dist/editor/components/RenderToolbarIcon.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const get_default_out_name_1 = require("../../get-default-out-name");
 const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const ControlButton_1 = require("./ControlButton");
@@ -20,8 +21,9 @@ const RenderButton = () => {
             },
         };
     }, []);
+    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
     const tooltip = type === 'connected'
-        ? 'Export the current composition'
+        ? 'Export the current composition ' + shortcut
         : 'Connect to the preview server to render';
     const video = remotion_1.Internals.useVideo();
     const frame = (0, remotion_1.useCurrentFrame)();