@remotion/cli 4.1.0-alpha4 → 4.1.0-alpha7

package/dist/chalk/index.d.ts

@@ -1,5 +1,5 @@
 export declare const chalk: {
-    enabled: boolean;
+    enabled: () => boolean;
     visible: boolean;
     styles: Record<string, {
         codes: [number, number];
@@ -23,6 +23,7 @@ export declare const chalk: {
     yellow: (str: string) => string;
     blue: (str: string) => string;
     magenta: (str: string) => string;
+    cyan: (str: string) => string;
     white: (str: string) => string;
     gray: (str: string) => string;
     bgBlack: (str: string) => string;

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;

package/dist/config/index.d.ts

@@ -297,7 +297,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/config/log.d.ts

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

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "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" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 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/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> | undefined>;
+    resolvedComposition: VideoConfig;
     setOutName: (value: React.SetStateAction<string>) => void;
     setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
     startFrame: number;

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/RenderModal/SchemaEditor/local-state.js

@@ -11,16 +11,22 @@ const useLocalState = ({ value, schema, setValue, defaultValue, }) => {
     const parentRevision = (0, react_1.useContext)(RevisionContext).childResetRevision;
     const [resetRevision, setResetRevision] = (0, react_1.useState)(0);
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {};
+        return {
+            [parentRevision]: {
+                value,
+                keyStabilityRevision: 0,
+                zodValidation: schema.safeParse(value),
+            },
+        };
     });
     const currentLocalValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = localValue[parentRevision]) !== null && _a !== void 0 ? _a : {
             value: defaultValue,
             keyStabilityRevision: 0,
-            zodValidation: schema.safeParse(value),
+            zodValidation: schema.safeParse(defaultValue),
         });
-    }, [defaultValue, localValue, parentRevision, schema, value]);
+    }, [defaultValue, localValue, parentRevision, schema]);
     const stateRef = (0, react_1.useRef)(currentLocalValue);
     stateRef.current = currentLocalValue;
     const onChange = (0, react_1.useCallback)(

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

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;

package/dist/editor/components/Timeline/TimelineDragHandler.js

@@ -9,7 +9,6 @@ const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timelin
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const in_out_1 = require("../../state/in-out");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
-const FramePersistor_1 = require("../FramePersistor");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
@@ -17,6 +16,7 @@ const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
 const inner = {
     overflowY: 'auto',
     overflowX: 'hidden',
@@ -50,6 +50,7 @@ const Inner = () => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
     const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
         dragging: false,
     });
@@ -254,11 +255,12 @@ const Inner = () => {
             width,
             extrapolate: 'clamp',
         });
-        (0, FramePersistor_1.persistCurrentFrame)(frame);
+        remotion_1.Internals.persistCurrentFrame(frame, videoConfig.id);
+        setFrame((c) => ({ ...c, [videoConfig.id]: frame }));
         if (dragging.wasPlaying) {
             play();
         }
-    }, [dragging, left, play, videoConfig, width]);
+    }, [dragging, left, play, videoConfig, setFrame, width]);
     const onPointerUpInOut = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return;
@@ -277,29 +279,53 @@ const Inner = () => {
         });
         if (inOutDragging.dragging === 'in') {
             if (frame < 1) {
-                return setInAndOutFrames((prev) => ({
-                    ...prev,
-                    inFrame: null,
-                }));
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            inFrame: null,
+                        },
+                    });
+                });
             }
             const maxFrame = outFrame === null ? Infinity : outFrame - 1;
-            setInAndOutFrames((prev) => ({
-                ...prev,
-                inFrame: Math.min(maxFrame, frame),
-            }));
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        inFrame: Math.min(maxFrame, frame),
+                    },
+                });
+            });
         }
         else {
             if (frame > videoConfig.durationInFrames - 2) {
-                return setInAndOutFrames((prev) => ({
-                    ...prev,
-                    outFrame: null,
-                }));
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            outFrame: null,
+                        },
+                    });
+                });
             }
             const minFrame = inFrame === null ? -Infinity : inFrame + 1;
-            setInAndOutFrames((prev) => ({
-                ...prev,
-                outFrame: Math.max(minFrame, frame),
-            }));
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        outFrame: Math.max(minFrame, frame),
+                    },
+                });
+            });
         }
     }, [
         inFrame,

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { InOutValue } from '../state/in-out';
 export declare const inOutHandles: React.RefObject<{
     inMarkClick: (e: KeyboardEvent | null) => void;
     outMarkClick: (e: KeyboardEvent | null) => void;
     clearMarks: () => void;
-    setMarks: (marks: [number | null, number | null]) => void;
 }>;
+export declare const defaultInOutValue: InOutValue;
 export declare const TimelineInOutPointToggle: React.FC;