@remotion/studio 4.0.462 → 4.0.464

package/dist/components/Timeline/TimelineFieldRow.js

@@ -2,18 +2,17 @@
 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 client_id_1 = require("../../helpers/client-id");
 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 timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
 const fieldName = {
@@ -21,13 +20,6 @@ const fieldName = {
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const fieldLabelRow = {
-    flex: '0 0 50%',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-};
 const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -44,10 +36,17 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         shouldResortToDefaultValueIfUndefined: true,
     });
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
     const onSave = (0, react_1.useCallback)((value) => {
         if (!codeValue || !codeValue.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
@@ -59,49 +58,19 @@ 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,
+            clientId,
         });
     }, [
         codeValue,
+        clientId,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -123,7 +92,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     }, [clearDragOverrides, nodePath]);
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
+const TimelineFieldRow = ({ field, validatedLocation, rowDepth, nodePath, schema }) => {
     var _a, _b;
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
@@ -132,13 +101,13 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
         return {
             ...fieldRowBase,
             height: field.rowHeight,
-            paddingLeft,
         };
-    }, [field.rowHeight, paddingLeft]);
+    }, [field.rowHeight]);
+    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
     if (codeValue === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
+    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, children: [
+            jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineImageInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('image') - 2;
@@ -33,23 +34,10 @@ const TimelineImageInfo = ({ src, visualizationWidth }) => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.onload = () => {
-            const scale = (HEIGHT * window.devicePixelRatio) / img.naturalHeight;
-            const scaledWidth = img.naturalWidth * scale;
-            const scaledHeight = HEIGHT * window.devicePixelRatio;
-            const offscreen = document.createElement('canvas');
-            offscreen.width = scaledWidth;
-            offscreen.height = scaledHeight;
-            const offCtx = offscreen.getContext('2d');
-            if (!offCtx) {
-                return;
-            }
-            offCtx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
-            const pattern = ctx.createPattern(offscreen, 'repeat-x');
-            if (!pattern) {
-                return;
-            }
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, visualizationWidth * window.devicePixelRatio, HEIGHT * window.devicePixelRatio);
+            (0, timeline_utils_1.drawRepeatingImageThumbnail)({
+                canvas,
+                image: img,
+            });
         };
         img.src = src;
         return () => {

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.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const INDENT = 10;
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;

package/dist/components/Timeline/TimelineListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = exports.INDENT = void 0;
+exports.TimelineListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -11,22 +11,24 @@ const call_api_1 = require("../call-api");
 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");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineStack_1 = require("./TimelineStack");
-const use_resolved_stack_1 = require("./use-resolved-stack");
-exports.INDENT = 10;
+const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 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;
+    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_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -155,18 +157,56 @@ 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 ||
+            previewServerState.type !== 'connected') {
+            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,
+            clientId: previewServerState.clientId,
         });
-    }, [sequence.id, setHidden]);
+    }, [
+        codeHiddenStatus,
+        codeValuesForOverride,
+        nodePath,
+        previewServerState,
+        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,
@@ -179,18 +219,19 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
             color: 'white',
             fontFamily: 'Arial, Helvetica, sans-serif',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
             wordBreak: 'break-all',
             textAlign: 'left',
-            paddingLeft: 5,
         };
     }, []);
     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 = previewConnected &&
+        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.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: 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, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, children: 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 &&
                 hasExpandableContent &&

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const TimelineRowChrome: React.FC<{
+    readonly depth: number;
+    readonly eye: React.ReactNode;
+    readonly arrow: React.ReactNode;
+    readonly children: React.ReactNode;
+    readonly style?: React.CSSProperties;
+}>;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineRowChrome = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Padder_1 = require("./Padder");
+const timeline_row_layout_1 = require("./timeline-row-layout");
+const rowBase = {
+    display: 'flex',
+    alignItems: 'center',
+};
+const TimelineRowChrome = ({ depth, eye, arrow, children, style }) => {
+    const rowStyle = (0, react_1.useMemo)(() => ({
+        ...rowBase,
+        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+        ...style,
+    }), [style]);
+    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    return (jsx_runtime_1.jsxs("div", { style: rowStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow, children] }));
+};
+exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineTracks.js

@@ -40,7 +40,6 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
-const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
@@ -74,9 +73,6 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
             jsx_runtime_1.jsxs("div", { style: content, children: [
                     jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                        if ((0, is_collapsed_1.isTrackHidden)(track)) {
-                            return null;
-                        }
                         const isExpanded = track.nodePathInfo !== null && getIsExpanded(track.nodePathInfo);
                         return (jsx_runtime_1.jsxs("div", { children: [
                                 jsx_runtime_1.jsx("div", { style: {

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

@@ -0,0 +1,13 @@
+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, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    fieldKey: string;
+    value: unknown;
+    defaultValue: string | null;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;

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

@@ -0,0 +1,31 @@
+"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, clientId, }) => {
+    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,
+            clientId,
+        }),
+        errorLabel: 'Could not save effect prop',
+    });
+};
+exports.saveEffectProp = saveEffectProp;

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

@@ -0,0 +1,11 @@
+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>;
+    errorLabel: string;
+};
+export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
+export {};

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enqueueSavePropChange = void 0;
+const remotion_1 = require("remotion");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const queues = new Map();
+const getQueue = (nodePath) => {
+    const key = remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath);
+    let q = queues.get(key);
+    if (!q) {
+        q = { chain: Promise.resolve(), cancelled: false };
+        queues.set(key, q);
+    }
+    return q;
+};
+const dropQueue = (nodePath, q) => {
+    const key = remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath);
+    if (queues.get(key) === q) {
+        queues.delete(key);
+    }
+};
+const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }) => {
+    const q = getQueue(nodePath);
+    if (q.cancelled) {
+        return Promise.resolve();
+    }
+    setCodeValues(nodePath, (prev) => {
+        return applyOptimistic(prev);
+    });
+    const myQueue = q;
+    const next = myQueue.chain.then(async () => {
+        if (myQueue.cancelled) {
+            return;
+        }
+        try {
+            await apiCall();
+            if (myQueue.cancelled) {
+                return;
+            }
+            // If nothing more is queued, reset baseline so the next round starts fresh.
+            if (myQueue.chain === next) {
+                dropQueue(nodePath, myQueue);
+            }
+        }
+        catch (err) {
+            myQueue.cancelled = true;
+            dropQueue(nodePath, myQueue);
+            (0, NotificationCenter_1.showNotification)(`${errorLabel}: ${err instanceof Error ? err.message : String(err)}`, 4000);
+        }
+    });
+    myQueue.chain = next;
+    return next;
+};
+exports.enqueueSavePropChange = enqueueSavePropChange;

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

@@ -0,0 +1,12 @@
+import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+export type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    value: unknown;
+    defaultValue: string | null;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveSequenceProp = 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 saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setCodeValues,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
+            previous: prev,
+            fieldKey,
+            value,
+            schema,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
+            fileName,
+            nodePath,
+            key: fieldKey,
+            value: JSON.stringify(value),
+            defaultValue,
+            schema,
+            clientId,
+        }),
+        errorLabel: 'Could not save sequence prop',
+    });
+};
+exports.saveSequenceProp = saveSequenceProp;

package/dist/components/Timeline/should-show-track-in-timeline.d.ts

@@ -0,0 +1,2 @@
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const shouldShowTrackInTimeline: (track: TrackWithHash, durationInFrames: number) => boolean;

package/dist/components/Timeline/should-show-track-in-timeline.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowTrackInTimeline = void 0;
+// A track is shown in the timeline list when:
+// - The sequence opted-in via `showInTimeline` (the default).
+//   Children of a sequence with `showInTimeline: false` keep being listed
+//   on their own; their depth is independently flattened by
+//   `getTimelineNestedLevel` so the parent does not contribute an indent.
+// - The sequence has a positive duration.
+// - The sequence starts before the composition ends.
+const shouldShowTrackInTimeline = (track, durationInFrames) => {
+    if (!track.sequence.showInTimeline) {
+        return false;
+    }
+    if (track.sequence.duration <= 0) {
+        return false;
+    }
+    if (track.sequence.from > durationInFrames) {
+        return false;
+    }
+    return true;
+};
+exports.shouldShowTrackInTimeline = shouldShowTrackInTimeline;

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineFieldLabelRowStyle = void 0;
+const timeline_row_layout_1 = require("./timeline-row-layout");
+const getTimelineFieldLabelRowStyle = (depth) => {
+    return {
+        flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth)}`,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    };
+};
+exports.getTimelineFieldLabelRowStyle = getTimelineFieldLabelRowStyle;

package/dist/components/Timeline/timeline-indent.d.ts

@@ -0,0 +1 @@
+export declare const TIMELINE_INDENT = 10;

package/dist/components/Timeline/timeline-indent.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TIMELINE_INDENT = void 0;
+exports.TIMELINE_INDENT = 10;