@remotion/cli 3.3.81 → 3.3.82

package/dist/cloudrun-command.d.ts

@@ -0,0 +1 @@
+export declare const cloudrunCommand: (remotionRoot: string, args: string[]) => Promise<never>;

package/dist/cloudrun-command.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloudrunCommand = void 0;
+const log_1 = require("./log");
+const get_package_manager_1 = require("./preview-server/get-package-manager");
+const update_available_1 = require("./preview-server/update-available");
+const cloudrunCommand = async (remotionRoot, args) => {
+    try {
+        const path = require.resolve('@remotion/cloudrun', {
+            paths: [remotionRoot],
+        });
+        const { CloudrunInternals } = require(path);
+        await CloudrunInternals.executeCommand(args, remotionRoot);
+        process.exit(0);
+    }
+    catch (err) {
+        const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+        const installCommand = manager === 'unknown' ? 'npm i' : manager.installCommand;
+        log_1.Log.error(err);
+        log_1.Log.error('Remotion CloudRun is not installed.');
+        log_1.Log.info('');
+        log_1.Log.info('You can install it using:');
+        log_1.Log.info(`${installCommand} @remotion/cloudrun@${(0, update_available_1.getRemotionVersion)()}`);
+        process.exit(1);
+    }
+};
+exports.cloudrunCommand = cloudrunCommand;

package/dist/config/jpeg-quality.d.ts

@@ -0,0 +1,2 @@
+export declare const setJpegQuality: (q: number | undefined) => void;
+export declare const getJpegQuality: () => number | undefined;

package/dist/config/jpeg-quality.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getJpegQuality = exports.setJpegQuality = void 0;
+const renderer_1 = require("@remotion/renderer");
+const defaultValue = undefined;
+let quality = defaultValue;
+const setJpegQuality = (q) => {
+    renderer_1.RenderInternals.validateJpegQuality(q);
+    if (q === 0 || q === undefined) {
+        quality = defaultValue;
+        return;
+    }
+    quality = q;
+};
+exports.setJpegQuality = setJpegQuality;
+const getJpegQuality = () => quality;
+exports.getJpegQuality = getJpegQuality;

package/dist/editor/components/CheckerboardContext.js

@@ -0,0 +1 @@
+"use strict";

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

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

package/dist/editor/components/CheckerboardProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckerboardProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const checkerboard_1 = require("../state/checkerboard");
+const CheckerboardProvider = ({ children }) => {
+    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
+    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
+        setCheckerboardState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, checkerboard_1.persistCheckerboardOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const checkerboardCtx = (0, react_1.useMemo)(() => {
+        return {
+            checkerboard,
+            setCheckerboard,
+        };
+    }, [checkerboard, setCheckerboard]);
+    return ((0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: children }));
+};
+exports.CheckerboardProvider = CheckerboardProvider;

package/dist/editor/components/CollapsedSidebarExpander.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const caret_1 = require("../icons/caret");
 const z_index_1 = require("../state/z-index");
-// TODO: Add shortcut to toggle both sidebars (similar to zen mode in vs code)
 const CollapsedSidebarExpander = ({ onExpand, direction }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();

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

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

package/dist/editor/components/MediaVolumeProvider.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaVolumeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const mute_1 = require("../state/mute");
+const MediaVolumeProvider = ({ children }) => {
+    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
+    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            mediaMuted,
+            mediaVolume,
+        };
+    }, [mediaMuted, mediaVolume]);
+    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setMediaMuted,
+            setMediaVolume,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: children }) }));
+};
+exports.MediaVolumeProvider = MediaVolumeProvider;

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

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

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

package/dist/editor/components/ModalsProvider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalsProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const ModalsProvider = ({ children }) => {
+    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
+    const modalsContext = (0, react_1.useMemo)(() => {
+        return {
+            selectedModal: modalContextType,
+            setSelectedModal: setModalContextType,
+        };
+    }, [modalContextType]);
+    return ((0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: children }));
+};
+exports.ModalsProvider = ModalsProvider;

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/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)({

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

@@ -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);
@@ -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,
@@ -317,7 +317,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         compositionId,
         outName,
         stillImageFormat,
-        quality,
+        jpegQuality,
         frame,
         scale,
         verbose,
@@ -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,
@@ -382,7 +382,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         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)(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 })) })] })] }));
 };
 exports.RenderModal = RenderModal;

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

@@ -22,12 +22,26 @@ const controlContainer = {
     paddingBottom: 12,
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
-const RenderModalData = ({ composition, inputProps, setInputProps, compact, showSaveButton }) => {
+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
+    // TODO: Update if root file is updated
+    (0, react_1.useEffect)(() => {
+        (0, actions_1.canUpdateDefaultProps)(composition.id)
+            .then((can) => {
+            setCanSaveDefaultProps(can.canUpdate);
+        })
+            .catch(() => {
+            // TODO: Use error as reason
+            setCanSaveDefaultProps(false);
+        });
+    }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {

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,12 +23,12 @@ const compactStyles = {
 const wideStyles = {
     ...commonStyles,
     width: layout_2.label.width,
-    lineHeight: '36px',
 };
 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] }));

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

@@ -4,10 +4,12 @@ exports.ZodArrayEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../../helpers/colors");
 const layout_1 = require("../../layout");
 const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const layout_2 = require("../layout");
+const create_zod_values_1 = require("./create-zod-values");
 const SchemaLabel_1 = require("./SchemaLabel");
 const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
 const container = {
@@ -16,8 +18,7 @@ const container = {
 const fullWidth = {
     width: '100%',
 };
-// TODO: Ability to add another item
-// TODO: Ability to revert a chagne (e.g entry deletion )
+// TODO: Ability to revert a change (e.g entry deletion )
 const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, }) => {
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {
@@ -46,6 +47,7 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
         setLocalValue((oldLocalState) => {
             const newValue = updater(oldLocalState.value);
             const safeParse = schema.safeParse(newValue);
+            // TODO: This logs an error to the console
             if (safeParse.success) {
                 updateValue(updater);
             }
@@ -62,10 +64,16 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
         }
         return { paddingTop };
     }, [isRoot, paddingTop]);
+    const onAdd = (0, react_1.useCallback)(() => {
+        onChange((oldV) => {
+            return [...oldV, (0, create_zod_values_1.createZodValues)(def.type)];
+        }, true);
+    }, [def.type, onChange]);
     return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsxs)(Element, { style: fieldset, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaFieldsetLabel, { jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: localValue.value.map((child, i) => {
+                            var _a;
                             return ((0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor
                             // eslint-disable-next-line react/no-array-index-key
-                            , { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, compact: compact, defaultValue: defaultValue[i], onSave: onSave, showSaveButton: showSaveButton }, `${i}${localValue.revision}`));
-                        }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }) }) }));
+                            , { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, compact: compact, defaultValue: (_a = defaultValue[i]) !== null && _a !== void 0 ? _a : child, onSave: onSave, showSaveButton: showSaveButton }, `${i}${localValue.revision}`));
+                        }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onAdd, children: "+ Add item" })] }) }) }));
 };
 exports.ZodArrayEditor = ZodArrayEditor;

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

@@ -13,7 +13,6 @@ const SchemaLabel_1 = require("./SchemaLabel");
 const container = {
     width: '100%',
 };
-// TODO: Long values break the layout
 const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, }) => {
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {

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

@@ -37,7 +37,10 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, compact, defaultVa
         return { paddingTop };
     }, [isRoot, paddingTop]);
     return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsxs)(Element, { style: fieldset, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaFieldsetLabel, { jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: keys.map((key) => {
-                            return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], defaultValue: defaultValue[key], setValue: (val) => {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], 
+                                // In case of null | {a: string, b: string} type, we need to fallback to the default value
+                                defaultValue: ((_a = defaultValue) !== null && _a !== void 0 ? _a : value)[key], setValue: (val) => {
                                     setValue((oldVal) => {
                                         return {
                                             ...oldVal,

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodOrNullEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
+const Checkbox_1 = require("../../Checkbox");
+const layout_1 = require("../../layout");
+const create_zod_values_1 = require("./create-zod-values");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodSwitch_1 = require("./ZodSwitch");
+const fullWidth = {
+    width: '100%',
+};
+const labelStyle = {
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+};
+const checkBoxWrapper = {
+    margin: '2px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: '5px',
+};
+const ZodOrNullEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, }) => {
+    const isChecked = value === nullishValue;
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        setValue(newValue);
+    }, [setValue]);
+    const onCheckBoxChange = (0, react_1.useCallback)((e) => {
+        console.log({ schema, newVal: (0, create_zod_values_1.createZodValues)(schema) });
+        const val = e.target.checked ? nullishValue : (0, create_zod_values_1.createZodValues)(schema);
+        onValueChange(val);
+    }, [nullishValue, onValueChange, schema]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === null ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove })) : ((0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onValueChange, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }) })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
+};
+exports.ZodOrNullEditor = ZodOrNullEditor;

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

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