@remotion/cli 4.1.0-alpha5 → 4.1.0-alpha8

package/dist/benchmark.js

@@ -18,6 +18,7 @@ const setup_cache_1 = require("./setup-cache");
 const should_use_non_overlaying_logger_1 = require("./should-use-non-overlaying-logger");
 const show_compositions_picker_1 = require("./show-compositions-picker");
 const truthy_1 = require("./truthy");
+const remotion_1 = require("remotion");
 const DEFAULT_RUNS = 3;
 const getValidConcurrency = (cliConcurrency) => {
     const { concurrencies } = parse_command_line_1.parsedCli;
@@ -125,9 +126,14 @@ const benchmarkCommand = async (remotionRoot, args) => {
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
+    const serializedInputPropsWithCustomSchema = remotion_1.Internals.serializeJSONWithDate({
+        data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        indent: undefined,
+        staticBase: null,
+    }).serializedString;
     const comps = await renderer_1.RenderInternals.internalGetCompositions({
         serveUrlOrWebpackUrl: bundleLocation,
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         envVariables,
         chromiumOptions,
         timeoutInMilliseconds: puppeteerTimeout,
@@ -191,7 +197,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
                     codec,
                     uiImageFormat: null,
                 }),
-                inputProps,
+                serializedInputPropsWithCustomSchema,
                 overwrite,
                 pixelFormat,
                 proResProfile,
@@ -223,6 +229,11 @@ const benchmarkCommand = async (remotionRoot, args) => {
                 onStart: () => undefined,
                 preferLossless: false,
                 server: undefined,
+                serializedResolvedPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+                    data: composition.props,
+                    indent: undefined,
+                    staticBase: null,
+                }).serializedString,
             }, (run, progress) => {
                 benchmarkProgress.update(makeBenchmarkProgressBar({
                     totalRuns: runs,

package/dist/codemods/stringify-with-path.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stringifyDefaultProps = void 0;
-const input_props_serialization_1 = require("../editor/components/RenderModal/SchemaEditor/input-props-serialization");
+const remotion_1 = require("remotion");
 const doesMatchPath = (path1, enumPaths) => {
     return enumPaths.some((p) => path1.every((item, index) => {
         if (p[index] === '[]' && !Number.isNaN(Number(item))) {
@@ -21,8 +21,8 @@ const stringifyDefaultProps = ({ props, enumPaths, }) => JSON.stringify(props, r
     if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
         return `${item}__ADD_AS_CONST__`;
     }
-    if (typeof item === 'string' && item.startsWith(input_props_serialization_1.FILE_TOKEN)) {
-        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(input_props_serialization_1.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
+    if (typeof item === 'string' && item.startsWith(remotion_1.Internals.FILE_TOKEN)) {
+        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(remotion_1.Internals.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
     }
     return value;
 }))

package/dist/compositions.js

@@ -9,6 +9,7 @@ const get_cli_options_1 = require("./get-cli-options");
 const log_1 = require("./log");
 const print_compositions_1 = require("./print-compositions");
 const setup_cache_1 = require("./setup-cache");
+const remotion_1 = require("remotion");
 const listCompositionsCommand = async (remotionRoot, args) => {
     const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     if (!file) {
@@ -44,7 +45,11 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         browserExecutable,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: null,
+            indent: undefined,
+        }).serializedString,
         timeoutInMilliseconds: puppeteerTimeout,
         port,
         indent: false,

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;

package/dist/editor/components/CanvasOrLoading.js

@@ -10,6 +10,11 @@ const Canvas_1 = require("./Canvas");
 const layout_1 = require("./layout");
 const styles_1 = require("./Menu/styles");
 const Spinner_1 = require("./Spinner");
+const FramePersistor_1 = require("./FramePersistor");
+const ZoomPersistor_1 = require("./ZoomPersistor");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
+const timeline_zoom_1 = require("../state/timeline-zoom");
+const imperative_state_1 = require("./Timeline/imperative-state");
 const container = {
     color: 'white',
     flex: 1,
@@ -22,6 +27,7 @@ const container = {
 const CanvasOrLoading = () => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
+    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     (0, react_1.useEffect)(() => {
         const timeout = setTimeout(() => {
             setTakesALongTime(true);
@@ -30,6 +36,19 @@ const CanvasOrLoading = () => {
             clearTimeout(timeout);
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success') {
+            return;
+        }
+        const c = resolved.result;
+        setTimeout(() => {
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'center',
+                frame: (0, imperative_state_1.getCurrentFrame)(),
+                durationInFrames: c.durationInFrames,
+            });
+        });
+    }, [resolved, setZoom]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...loaderLabel,
@@ -46,7 +65,7 @@ const CanvasOrLoading = () => {
     if (resolved.type === 'error') {
         return (0, jsx_runtime_1.jsx)(exports.ErrorLoading, { error: resolved.error });
     }
-    return (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {});
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {})] }));
 };
 exports.CanvasOrLoading = CanvasOrLoading;
 const loaderLabel = {

package/dist/editor/components/CopyButton.js

@@ -10,7 +10,10 @@ const iconStyle = {
     width: 16,
     height: 16,
     color: 'white',
-    verticalAlign: 'sub',
+};
+const buttonContainerStyle = {
+    display: 'flex',
+    minWidth: '114px',
 };
 const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
 const labelStyle = {
@@ -29,6 +32,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, style: {}, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
 };
 exports.CopyButton = CopyButton;

package/dist/editor/components/Editor.js

@@ -9,12 +9,10 @@ const noop_1 = require("../helpers/noop");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
-const FramePersistor_1 = require("./FramePersistor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -41,6 +39,6 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
 };
 exports.Editor = Editor;

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

@@ -1,5 +1,3 @@
 import type React from 'react';
 export declare const getCurrentCompositionFromUrl: () => string;
-export declare const persistCurrentFrame: (frame: number) => void;
-export declare const getFrameForComposition: (composition: string) => number;
 export declare const FramePersistor: React.FC;

package/dist/editor/components/FramePersistor.js

@@ -1,41 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FramePersistor = exports.getFrameForComposition = exports.persistCurrentFrame = exports.getCurrentCompositionFromUrl = void 0;
+exports.FramePersistor = exports.getCurrentCompositionFromUrl = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const getCurrentCompositionFromUrl = () => {
     return window.location.pathname.substr(1);
 };
 exports.getCurrentCompositionFromUrl = getCurrentCompositionFromUrl;
-const makeKey = (composition) => {
-    return `remotion.time.${composition}`;
-};
-const persistCurrentFrame = (frame) => {
-    const currentComposition = (0, exports.getCurrentCompositionFromUrl)();
-    if (!currentComposition) {
-        return;
-    }
-    localStorage.setItem(makeKey(currentComposition), String(frame));
-};
-exports.persistCurrentFrame = persistCurrentFrame;
-const getFrameForComposition = (composition) => {
-    const frame = localStorage.getItem(makeKey(composition));
-    return frame ? Number(frame) : 0;
-};
-exports.getFrameForComposition = getFrameForComposition;
 const FramePersistor = () => {
     const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const config = (0, remotion_1.useVideoConfig)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isActive = currentComposition === (0, exports.getCurrentCompositionFromUrl)();
     (0, react_1.useEffect)(() => {
-        if (!isActive) {
-            return;
-        }
         if (!playing) {
-            (0, exports.persistCurrentFrame)(frame);
+            remotion_1.Internals.persistCurrentFrame(frame, config.id);
         }
-    }, [frame, isActive, playing]);
+    }, [config.id, frame, playing]);
     return null;
 };
 exports.FramePersistor = FramePersistor;

package/dist/editor/components/InitialCompositionLoader.js

@@ -4,37 +4,16 @@ exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const folders_1 = require("../state/folders");
-const marks_1 = require("../state/marks");
-const timeline_zoom_1 = require("../state/timeline-zoom");
 const CompositionSelector_1 = require("./CompositionSelector");
 const FramePersistor_1 = require("./FramePersistor");
-const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const ZoomPersistor_1 = require("./ZoomPersistor");
 const useSelectComposition = () => {
-    const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     return (c, push) => {
-        var _a;
-        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
         if (push) {
             window.history.pushState({}, 'Studio', `/${c.id}`);
         }
-        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
-        const zoom = (0, ZoomPersistor_1.getZoomForComposition)(c.id);
-        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
-        setCurrentFrame(frameInBounds);
         setCurrentComposition(c.id);
-        setZoom(() => zoom);
-        setTimeout(() => {
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'center',
-                frame,
-                durationInFrames: c.durationInFrames,
-            });
-        });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
             setFoldersExpanded((ex) => {

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.05)" | "rgba(0, 0, 0, 0.6)" | "#ff3232" | "#f1c40f";
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/OpenEditorButton.js

@@ -12,8 +12,11 @@ const svgStyle = {
 };
 const buttonStyle = {
     border: 'none',
-    width: '25px',
-    height: '25px',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 };
 const OpenEditorButton = () => {
     const [hovered, setHovered] = (0, react_1.useState)(false);

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

@@ -98,14 +98,14 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: 15,
         };
     }, [hovered, result.type, selected]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.titleLine,
-                            } }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+                            }, style: labelStyle }), (0, jsx_runtime_1.jsx)("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.subtitleLine,
-                            } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
+                            }, style: labelStyle })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
 };
 exports.QuickSwitcherResult = QuickSwitcherResult;

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

@@ -39,7 +39,6 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
 const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
-const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
@@ -99,7 +98,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             return null;
         }
         const value = inputProps;
-        return (0, input_props_serialization_1.serializeJSONWithDate)({
+        return remotion_1.Internals.serializeJSONWithDate({
             data: value,
             indent: 2,
             staticBase: window.remotion_staticBase,
@@ -226,12 +225,13 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
         setSaving(false);
     }, [fastRefreshes]);
     const onSave = (0, react_1.useCallback)((updater) => {
+        var _a;
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater((_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
             .then((response) => {
             if (!response.success) {
                 console.log(response.stack);

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

@@ -567,7 +567,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         }
     }, [onClickStill, onClickVideo, renderDisabled, renderMode]);
     (0, react_1.useEffect)(() => {
-        registerKeybinding({
+        const enter = registerKeybinding({
             callback() {
                 trigger();
             },
@@ -575,8 +575,11 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             key: 'Enter',
             event: 'keydown',
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
+            triggerIfInputFieldFocused: true,
         });
+        return () => {
+            enter.unregister();
+        };
     }, [registerKeybinding, trigger]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...buttonStyle,

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

@@ -1,9 +1,8 @@
 import type { Codec, ProResProfile } from '@remotion/renderer';
 import React from 'react';
-import type { TCompMetadata } from 'remotion';
-import type { AnyZodObject } from 'zod';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
+import type { VideoConfig } from 'remotion';
 export declare const RenderModalBasic: React.FC<{
     renderMode: RenderType;
     imageFormatOptions: SegmentedControlItem[];
@@ -14,7 +13,7 @@ export declare const RenderModalBasic: React.FC<{
     setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
     frame: number;
     setFrame: React.Dispatch<React.SetStateAction<number>>;
-    resolvedComposition: TCompMetadata<AnyZodObject, Record<string, unknown>>;
+    resolvedComposition: VideoConfig;
     setOutName: (value: React.SetStateAction<string>) => void;
     setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
     startFrame: number;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { z } from 'zod';
-import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
+import type { SerializedJSONWithCustomFields } from 'remotion';
 export type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;

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

@@ -32,8 +32,8 @@ 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");
-const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const ZodErrorMessages_1 = require("./SchemaEditor/ZodErrorMessages");
+const remotion_1 = require("remotion");
 const style = {
     fontFamily: 'monospace',
     flex: 1,
@@ -46,7 +46,7 @@ const scrollable = {
 };
 const parseJSON = (str, schema) => {
     try {
-        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
+        const value = remotion_1.Internals.deserializeJSONWithCustomFields(str);
         const zodValidation = schema.safeParse(value);
         return { str, value, validJSON: true, zodValidation };
     }

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

@@ -6,7 +6,7 @@ export declare const SchemaEditor: React.FC<{
     setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     defaultProps: Record<string, unknown>;
-    onSave: (updater: (oldState: unknown) => unknown) => void;
+    onSave: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
     showSaveButton: boolean;
     saving: boolean;
     saveDisabledByParent: boolean;

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

@@ -32,9 +32,7 @@ const errorContainer = {
     overflowY: 'auto',
 };
 const openDocs = () => {
-    window.open(
-    // TODO: Make sure to update this link when we release v4
-    'https://v4.remotion.dev/docs/parametrized-rendering#define-a-schema-');
+    window.open('https://www.remotion.dev/docs/parameterized-rendering#define-a-schema-');
 };
 const ZodNotInstalled = () => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Install ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "zod" }), " as a dependency to interactively control the props of the composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));

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

@@ -27,7 +27,6 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
         throw new Error('expected zod');
     }
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
-    // TODO: (Maybe?) enable saving of inserted input props by cmd+s /ctrl + s (also for JSON view)
     if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
         return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -56,5 +56,5 @@ export declare const openInFileExplorer: ({ directory }: {
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("../../../preview-server/render-queue/job").UpdateAvailableResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
-const input_props_serialization_1 = require("../RenderModal/SchemaEditor/input-props-serialization");
+const remotion_1 = require("remotion");
 const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -39,7 +39,11 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
         chromiumOptions,
         delayRenderTimeout,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: window.remotion_staticBase,
+            indent: undefined,
+        }).serializedString,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
@@ -70,7 +74,11 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         disallowParallelEncoding,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: window.remotion_staticBase,
+            indent: undefined,
+        }).serializedString,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;
@@ -112,7 +120,7 @@ exports.updateAvailable = updateAvailable;
 const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
     return callApi('/api/update-default-props', {
         compositionId,
-        defaultProps: (0, input_props_serialization_1.serializeJSONWithDate)({
+        defaultProps: remotion_1.Internals.serializeJSONWithDate({
             data: defaultProps,
             indent: undefined,
             staticBase: window.remotion_staticBase,

package/dist/editor/components/SetTimelineInOutProvider.js

@@ -4,16 +4,17 @@ exports.SetTimelineInOutProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const in_out_1 = require("../state/in-out");
+const marks_1 = require("../state/marks");
 const SetTimelineInOutProvider = ({ children }) => {
-    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
-        inFrame: null,
-        outFrame: null,
-    });
+    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)(() => (0, marks_1.loadMarks)());
     const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
         return {
             setInAndOutFrames,
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        (0, marks_1.persistMarks)(inAndOutFrames);
+    }, [inAndOutFrames]);
     return ((0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
 };
 exports.SetTimelineInOutProvider = SetTimelineInOutProvider;

package/dist/editor/components/SidebarRenderButton.js

@@ -22,7 +22,9 @@ const SidebarRenderButton = ({ composition, visible }) => {
     }, []);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const isVideo = composition.durationInFrames > 1;
+    const isVideo = typeof composition.durationInFrames === 'undefined'
+        ? true
+        : composition.durationInFrames > 1;
     const onClick = (0, react_1.useCallback)((e) => {
         var _a;
         const defaults = window.remotion_renderDefaults;