@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha11

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

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
-import type { z } from 'zod';
 export declare const ZodBooleanEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;

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

@@ -4,9 +4,9 @@ exports.ZodBooleanEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../../Checkbox");
-const SchemaLabel_1 = require("./SchemaLabel");
 const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
 const fullWidth = {
     width: '100%',
 };

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

@@ -9,9 +9,9 @@ const layout_1 = require("../../layout");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
 const RemInput_1 = require("../../NewComposition/RemInput");
 const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

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

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
 const layout_1 = require("../../layout");
 const RemInput_1 = require("../../NewComposition/RemInput");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodEffectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const local_state_1 = require("./local-state");
-const ZodSwitch_1 = require("./ZodSwitch");
 const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
+const ZodSwitch_1 = require("./ZodSwitch");
 const fullWidth = {
     width: '100%',
 };

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

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const Checkmark_1 = require("../../../icons/Checkmark");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodFieldValidation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const layout_1 = require("../../layout");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const InfoBubble_1 = require("../InfoBubble");
 const legend = {
     display: 'flex',

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

@@ -4,8 +4,8 @@ exports.ZonNonEditableValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
-const SchemaLabel_1 = require("./SchemaLabel");
 const Fieldset_1 = require("./Fieldset");
+const SchemaLabel_1 = require("./SchemaLabel");
 const fullWidth = {
     width: '100%',
 };

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

@@ -4,9 +4,9 @@ exports.ZodNumberEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

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

@@ -1,21 +1,40 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodObjectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const local_state_1 = require("./local-state");
-const ZodSwitch_1 = require("./ZodSwitch");
+const layout_1 = require("../layout");
+const deep_equal_1 = require("./deep-equal");
 const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
-const layout_1 = require("../layout");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
-const SchemaLabel_1 = require("./SchemaLabel");
-const deep_equal_1 = require("./deep-equal");
+const ZodSwitch_1 = require("./ZodSwitch");
 const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
@@ -43,7 +62,7 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSa
                         return localValue.value;
                     }, false, false);
                 }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success })), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
-                        return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: localValue.value[key], 
+                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: localValue.value[key], 
                                     // In case of null | {a: string, b: string} type, we need to fallback to the default value
                                     defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)[key], setValue: (val, forceApply) => {
                                         onChange((oldVal) => {

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

@@ -8,10 +8,10 @@ const Checkbox_1 = require("../../Checkbox");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 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 Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodSwitch_1 = require("./ZodSwitch");
 const labelStyle = {
     fontFamily: 'sans-serif',
     fontSize: 14,

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

@@ -7,9 +7,9 @@ const remotion_1 = require("remotion");
 const Checkmark_1 = require("../../../icons/Checkmark");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',

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

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const RemInput_1 = require("../../NewComposition/RemInput");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

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) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

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/RightPanel.js

@@ -4,8 +4,10 @@ exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = v
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
 const DataEditor_1 = require("./RenderModal/DataEditor");
+const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
@@ -16,17 +18,10 @@ const container = {
     display: 'flex',
     flexDirection: 'column',
 };
-const PropsEditor = ({ composition }) => {
-    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const setInputProps = (0, react_1.useCallback)((newProps) => {
-        updateProps({
-            id: composition.id,
-            defaultProps: composition.defaultProps,
-            newProps,
-        });
-    }, [composition.defaultProps, composition.id, updateProps]);
-    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
-    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
+const circle = {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {
@@ -45,6 +40,8 @@ const persistSelectedPanel = (panel) => {
 exports.persistSelectedPanel = persistSelectedPanel;
 exports.rightSidebarTabs = (0, react_1.createRef)();
 const RightPanel = () => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         setPanel('input-props');
@@ -63,6 +60,14 @@ const RightPanel = () => {
         };
     }, []);
     const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const circleStyle = (0, react_1.useMemo)(() => {
+        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
+        return {
+            ...circle,
+            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
+            cursor: 'help',
+        };
+    }, [panel, saving]);
     const composition = (0, react_1.useMemo)(() => {
         for (const comp of compositions) {
             if (comp.id === currentComposition) {
@@ -71,9 +76,37 @@ const RightPanel = () => {
         }
         return null;
     }, [compositions, currentComposition]);
+    const saveToolTip = (0, react_1.useMemo)(() => {
+        return process.env.KEYBOARD_SHORTCUTS_ENABLED
+            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
+            : 'There are unsaved changes';
+    }, []);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        if (composition === null) {
+            return;
+        }
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (composition === null) {
+            return {};
+        }
+        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
+    }, [composition, props]);
+    const unsavedChangesExist = (0, react_1.useMemo)(() => {
+        if (composition === null || composition.defaultProps === undefined) {
+            return false;
+        }
+        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
+    }, [actualProps, composition]);
     if (composition === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id))] }));
 };
 exports.RightPanel = RightPanel;

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,8 +9,8 @@ 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 TimelineInOutToggle_1 = require("../TimelineInOutToggle");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
@@ -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;