@remotion/studio 4.0.462 → 4.0.463

package/dist/components/AssetSelector.js

@@ -11,6 +11,7 @@ const write_static_file_1 = require("../api/write-static-file");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
 const folders_1 = require("../state/folders");
@@ -68,13 +69,8 @@ const AssetSelector = ({ readOnlyStudio }) => {
     }, [assetFoldersExpanded, staticFiles]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setAssetFoldersExpanded((p) => {
-            var _a;
             const key = [parentName, folderName].filter(Boolean).join('/');
-            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
-            const foldersExpandedState = {
-                ...p,
-                [key]: !prev,
-            };
+            const foldersExpandedState = (0, persist_boolean_map_1.toggleBooleanMapKey)(p, key);
             (0, persist_open_folders_1.persistExpandedFolders)('assets', foldersExpandedState);
             return foldersExpandedState;
         });

package/dist/components/CompSelectorRef.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const folders_1 = require("../state/folders");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
@@ -14,13 +15,8 @@ const CompSelectorRef = ({ children }) => {
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setCompositionFoldersExpanded((p) => {
-            var _a;
             const key = (0, persist_open_folders_1.openFolderKey)({ folderName, parentName });
-            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
-            const foldersExpandedState = {
-                ...p,
-                [key]: !prev,
-            };
+            const foldersExpandedState = (0, persist_boolean_map_1.toggleBooleanMapKey)(p, key);
             (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
             return foldersExpandedState;
         });

package/dist/components/ExpandedTracksProvider.js

@@ -4,30 +4,15 @@ exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.E
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const nodePathInfoToExpandedKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
     info.auxiliaryKeys.join('.'),
     info.index,
 ].join('.');
-const LOCAL_STORAGE_KEY = 'remotion.editor.expandedTracks';
+const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
 const loadExpandedTracks = () => {
-    if (typeof window === 'undefined') {
-        return {};
-    }
-    const item = window.localStorage.getItem(LOCAL_STORAGE_KEY);
-    if (item === null) {
-        return {};
-    }
-    try {
-        const parsed = JSON.parse(item);
-        if (parsed && typeof parsed === 'object') {
-            return parsed;
-        }
-        return {};
-    }
-    catch (_a) {
-        return {};
-    }
+    return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
 };
 exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     getIsExpanded: () => {
@@ -44,8 +29,8 @@ const ExpandedTracksProvider = ({ children }) => {
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
             const key = nodePathInfoToExpandedKey(nodePathInfo);
-            const next = { ...prev, [key]: !prev[key] };
-            window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(next));
+            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -2,17 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubscribeToNodePaths = void 0;
 const react_1 = require("react");
-const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
 const SubscribeToNodePaths = ({ overrideId, schema, stack, effects }) => {
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
-        return effects
-            .map((effect) => {
-            return effect.schema;
-        })
-            .filter(no_react_1.NoReactInternals.truthy);
+        return effects.map((effect) => effect.schema);
     }, [effects]);
     (0, use_sequence_props_subscription_1.useSequencePropsSubscription)({
         overrideId,

package/dist/components/Timeline/TimelineColorField.js

@@ -176,6 +176,6 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsxs("span", { style: swatchWrapperStyle, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onSwatchClick, title: currentValue, children: [
                     jsx_runtime_1.jsx("span", { style: swatchFill }), jsx_runtime_1.jsx("input", { ref: inputRef, type: "color", value: hexValue, onChange: onColorChange, onFocus: onFocus, onBlur: onBlur, disabled: !propStatus.canUpdate, name: field.key, tabIndex: tabIndex, style: hiddenInputStyle })
-                ] }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", onClick: onPickColor, disabled: !propStatus.canUpdate, style: eyedropperButtonBase, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle }) })) : null] }));
+                ] }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", onClick: onPickColor, disabled: !propStatus.canUpdate, style: eyedropperButtonBase, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: "rgba(255, 255, 255, 0.7)" }) })) : null] }));
 };
 exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -7,8 +7,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Padder_1 = require("./Padder");
+const save_prop_queue_1 = require("./save-prop-queue");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
     display: 'flex',
@@ -73,28 +73,26 @@ const Value = ({ field, nodePath, validatedLocation }) => {
             propStatus.codeValue === undefined) {
             return Promise.resolve();
         }
-        let previousUpdate;
-        setCodeValues(nodePath, (prev) => {
-            previousUpdate = prev;
-            return (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+        return (0, save_prop_queue_1.enqueueSavePropChange)({
+            nodePath,
+            setCodeValues,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
                 previous: prev,
                 effectIndex: field.effectIndex,
                 fieldKey: field.key,
                 value,
                 schema: field.effectSchema,
-            });
-        });
-        return (0, call_api_1.callApi)('/api/save-effect-props', {
-            fileName: validatedLocation.source,
-            sequenceNodePath: nodePath,
-            effectIndex: field.effectIndex,
-            key: field.key,
-            value: stringifiedValue,
-            defaultValue,
-            schema: field.effectSchema,
-        })
-            .then((data) => {
-            setCodeValues(nodePath, (prev) => {
+            }),
+            apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
+                fileName: validatedLocation.source,
+                sequenceNodePath: nodePath,
+                effectIndex: field.effectIndex,
+                key: field.key,
+                value: stringifiedValue,
+                defaultValue,
+                schema: field.effectSchema,
+            }),
+            mergeServerResponse: (prev, data) => {
                 if (!prev.canUpdate) {
                     return prev;
                 }
@@ -105,19 +103,11 @@ const Value = ({ field, nodePath, validatedLocation }) => {
                         effects: [...prev.effects, data],
                     };
                 }
-                const next = [...prev.effects];
-                next[idx] = data;
-                return { ...prev, effects: next };
-            });
-        })
-            .catch((err) => {
-            setCodeValues(nodePath, (current) => {
-                if (previousUpdate) {
-                    return previousUpdate;
-                }
-                return current;
-            });
-            (0, NotificationCenter_1.showNotification)(`Could not save effect prop: ${err instanceof Error ? err.message : String(err)}`, 4000);
+                const nextEffects = [...prev.effects];
+                nextEffects[idx] = data;
+                return { ...prev, effects: nextEffects };
+            },
+            errorLabel: 'Could not save effect prop',
         });
     }, [
         field.effectIndex,

package/dist/components/Timeline/TimelineEffectGroupRow.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { GetIsExpanded } from '../ExpandedTracksProvider';
+export declare const TimelineEffectGroupRow: React.FC<{
+    readonly label: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly effectIndex: number;
+    readonly effectSchema: SequenceSchema;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly validatedLocation: CodePosition;
+    readonly nestedDepth: number;
+    readonly style: React.CSSProperties;
+    readonly getIsExpanded: GetIsExpanded;
+    readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+}>;

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEffectGroupRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const Padder_1 = require("./Padder");
+const save_effect_prop_1 = require("./save-effect-prop");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const groupRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+};
+const rowLabel = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, nodePath, validatedLocation, nestedDepth, style, getIsExpanded, toggleTrack, }) => {
+    var _a;
+    var _b;
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues,
+        nodePath,
+        effectIndex,
+    }), [codeValues, nodePath, effectIndex]);
+    const disabledStatus = effectStatus.type === 'can-update-effect'
+        ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : null)
+        : null;
+    const isDisabled = (0, react_1.useMemo)(() => {
+        if (disabledStatus && disabledStatus.canUpdate) {
+            return Boolean(disabledStatus.codeValue);
+        }
+        return false;
+    }, [disabledStatus]);
+    const canToggle = disabledStatus !== null && disabledStatus.canUpdate;
+    const onToggle = (0, react_1.useCallback)((type) => {
+        if (!canToggle) {
+            return;
+        }
+        const newValue = type !== 'enable';
+        const fieldSchema = effectSchema.disabled;
+        const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
+            ? JSON.stringify(fieldSchema.default)
+            : null;
+        (0, save_effect_prop_1.saveEffectProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            effectIndex,
+            fieldKey: 'disabled',
+            value: newValue,
+            defaultValue,
+            schema: effectSchema,
+            setCodeValues,
+        });
+    }, [
+        canToggle,
+        effectIndex,
+        effectSchema,
+        nodePath,
+        setCodeValues,
+        validatedLocation.source,
+    ]);
+    const isExpanded = getIsExpanded(nodePathInfo);
+    const mergedStyle = (0, react_1.useMemo)(() => ({ ...groupRowBase, ...style }), [style]);
+    return (jsx_runtime_1.jsxs("div", { style: mergedStyle, children: [
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), jsx_runtime_1.jsx("span", { style: rowLabel, children: label })
+        ] }));
+};
+exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const Padder_1 = require("./Padder");
 const TimelineEffectFieldRow_1 = require("./TimelineEffectFieldRow");
+const TimelineEffectGroupRow_1 = require("./TimelineEffectGroupRow");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const TimelineListItem_1 = require("./TimelineListItem");
@@ -34,6 +35,9 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
         paddingLeft,
     }), [node, paddingLeft]);
     if (node.kind === 'group') {
+        if (node.effectInfo) {
+            return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, nodePath: nodePath, validatedLocation: validatedLocation, nestedDepth: nestedDepth, style: groupStyle, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+        }
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsxs("div", { style: groupStyle, children: [
                 jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })

package/dist/components/Timeline/TimelineFieldRow.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Padder_1 = require("./Padder");
+const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
     display: 'flex',
@@ -59,46 +57,14 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             codeValue.codeValue === undefined) {
             return Promise.resolve();
         }
-        let previousUpdate;
-        // Optimistic update to prevent flicker
-        setCodeValues(nodePath, (prev) => {
-            previousUpdate = prev;
-            return (0, studio_shared_1.optimisticUpdateForCodeValues)({
-                previous: prev,
-                fieldKey: field.key,
-                value,
-                schema,
-            });
-        });
-        return (0, call_api_1.callApi)('/api/save-sequence-props', {
+        return (0, save_sequence_prop_1.saveSequenceProp)({
             fileName: validatedLocation.source,
             nodePath,
-            key: field.key,
-            value: stringifiedValue,
+            fieldKey: field.key,
+            value,
             defaultValue,
             schema,
-        })
-            .then((data) => {
-            setCodeValues(nodePath, (prev) => {
-                if (!data.canUpdate) {
-                    return data;
-                }
-                return {
-                    canUpdate: true,
-                    props: data.props,
-                    effects: prev.canUpdate ? prev.effects : [],
-                };
-            });
-        })
-            .catch((err) => {
-            // In case something went wrong, undo optimistic update
-            setCodeValues(nodePath, (current) => {
-                if (previousUpdate) {
-                    return previousUpdate;
-                }
-                return current;
-            });
-            (0, NotificationCenter_1.showNotification)(`Could not save sequence prop: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            setCodeValues,
         });
     }, [
         codeValue,

package/dist/components/Timeline/TimelineLayerEye.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 export declare const TimelineLayerEye: React.FC<{
-    onInvoked: (type: 'enable' | 'disable') => void;
-    hidden: boolean;
-    type: 'eye' | 'speaker';
+    readonly onInvoked: (type: 'enable' | 'disable') => void;
+    readonly hidden: boolean;
+    readonly type: 'eye' | 'speaker' | 'effect';
 }>;
+export declare const TimelineLayerEyeSpacer: React.FC;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineLayerEye = void 0;
+exports.TimelineLayerEyeSpacer = exports.TimelineLayerEye = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -9,6 +9,10 @@ const eyeIcon = {
     color: 'currentColor',
     pointerEvents: 'none',
 };
+const effectIcon = {
+    ...eyeIcon,
+    width: 15,
+};
 const speakerIcon = {
     ...eyeIcon,
     height: 10,
@@ -34,6 +38,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         if (type === 'speaker') {
             return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: jsx_runtime_1.jsx("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
         }
+        if (type === 'effect') {
+            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", style: effectIcon, children: jsx_runtime_1.jsx("path", { d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z", fill: "white" }) }));
+        }
         return (jsx_runtime_1.jsx("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
     }, [hidden, type]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -54,3 +61,13 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
     return (jsx_runtime_1.jsx("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
+const spacerStyle = {
+    width: 16,
+    height: 16,
+    marginRight: 6,
+    flexShrink: 0,
+};
+const TimelineLayerEyeSpacer = () => {
+    return jsx_runtime_1.jsx("div", { style: spacerStyle });
+};
+exports.TimelineLayerEyeSpacer = TimelineLayerEyeSpacer;

package/dist/components/Timeline/TimelineListItem.js

@@ -12,6 +12,7 @@ const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Padder_1 = require("./Padder");
+const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -19,14 +20,16 @@ const TimelineStack_1 = require("./TimelineStack");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 exports.INDENT = 10;
 const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
-    var _a, _b;
-    const nodePath = (_a = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _a !== void 0 ? _a : null;
+    var _a;
+    var _b, _c;
+    const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_b = sequence.stack) !== null && _b !== void 0 ? _b : null);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_c = sequence.stack) !== null && _c !== void 0 ? _c : null);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -155,18 +158,53 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
+    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+        return nodePath
+            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            : undefined;
+    }, [codeValues, nodePath]);
+    const codeHiddenStatus = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.hidden;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
-        return (_a = hidden[sequence.id]) !== null && _a !== void 0 ? _a : false;
-    }, [hidden, sequence.id]);
+        const codeValue = codeHiddenStatus && codeHiddenStatus.canUpdate
+            ? codeHiddenStatus.codeValue
+            : undefined;
+        const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
+        const effective = (codeValue !== null && codeValue !== void 0 ? codeValue : runtimeValue);
+        return effective !== null && effective !== void 0 ? effective : false;
+    }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
-        setHidden((prev) => {
-            return {
-                ...prev,
-                [sequence.id]: type !== 'enable',
-            };
+        if (!sequence.controls ||
+            !nodePath ||
+            !validatedLocation ||
+            !codeValuesForOverride ||
+            !codeHiddenStatus ||
+            !codeHiddenStatus.canUpdate) {
+            return;
+        }
+        const newValue = type !== 'enable';
+        const { schema } = sequence.controls;
+        const fieldSchema = schema.hidden;
+        const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
+            ? JSON.stringify(fieldSchema.default)
+            : null;
+        (0, save_sequence_prop_1.saveSequenceProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: 'hidden',
+            value: newValue,
+            defaultValue,
+            schema,
+            setCodeValues,
         });
-    }, [sequence.id, setHidden]);
+    }, [
+        codeHiddenStatus,
+        codeValuesForOverride,
+        nodePath,
+        sequence.controls,
+        setCodeValues,
+        validatedLocation,
+    ]);
     const outer = (0, react_1.useMemo)(() => {
         return {
             height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
@@ -188,8 +226,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         };
     }, []);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [
-                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), previewConnected ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+    const canToggleVisibility = Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        codeHiddenStatus !== undefined &&
+        codeHiddenStatus !== null &&
+        codeHiddenStatus.canUpdate;
+    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), previewConnected ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
             ] }) }));
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -0,0 +1,12 @@
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetCodeValues } from './save-sequence-prop';
+export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    fieldKey: string;
+    value: unknown;
+    defaultValue: string | null;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+}) => Promise<void>;

package/dist/components/Timeline/save-effect-prop.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveEffectProp = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const call_api_1 = require("../call-api");
+const save_prop_queue_1 = require("./save-prop-queue");
+const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setCodeValues,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+            previous: prev,
+            effectIndex,
+            fieldKey,
+            value,
+            schema,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
+            fileName,
+            sequenceNodePath: nodePath,
+            effectIndex,
+            key: fieldKey,
+            value: JSON.stringify(value),
+            defaultValue,
+            schema,
+        }),
+        mergeServerResponse: (prev, data) => {
+            if (!prev.canUpdate) {
+                return prev;
+            }
+            const idx = prev.effects.findIndex((e) => e.effectIndex === effectIndex);
+            if (idx === -1) {
+                return { ...prev, effects: [...prev.effects, data] };
+            }
+            const nextEffects = [...prev.effects];
+            nextEffects[idx] = data;
+            return { ...prev, effects: nextEffects };
+        },
+        errorLabel: 'Could not save effect prop',
+    });
+};
+exports.saveEffectProp = saveEffectProp;

package/dist/components/Timeline/save-prop-queue.d.ts

@@ -0,0 +1,12 @@
+import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey } from 'remotion';
+type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+export type EnqueueSaveOptions<TResponse> = {
+    nodePath: SequencePropsSubscriptionKey;
+    setCodeValues: SetCodeValues;
+    applyOptimistic: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse;
+    apiCall: () => Promise<TResponse>;
+    mergeServerResponse: (prev: CanUpdateSequencePropsResponse, response: TResponse) => CanUpdateSequencePropsResponse;
+    errorLabel: string;
+};
+export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, apiCall, mergeServerResponse, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
+export {};