@remotion/studio 4.0.463 → 4.0.464

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -5,15 +5,16 @@ 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 Padder_1 = require("./Padder");
 const save_prop_queue_1 = require("./save-prop-queue");
+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,19 +22,16 @@ 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 }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
     const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues: visualModeCodeValues,
         nodePath,
@@ -62,6 +60,9 @@ const Value = ({ field, nodePath, validatedLocation }) => {
         if (!propStatus.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;
@@ -91,25 +92,12 @@ const Value = ({ field, nodePath, validatedLocation }) => {
                 value: stringifiedValue,
                 defaultValue,
                 schema: field.effectSchema,
+                clientId,
             }),
-            mergeServerResponse: (prev, data) => {
-                if (!prev.canUpdate) {
-                    return prev;
-                }
-                const idx = prev.effects.findIndex((e) => e.effectIndex === field.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',
         });
     }, [
+        clientId,
         field.effectIndex,
         field.effectSchema,
         field.fieldSchema.default,
@@ -141,6 +129,9 @@ const Value = ({ field, nodePath, validatedLocation }) => {
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (propStatus === null || !propStatus.canUpdate) {
+        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+        }
         return null;
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
@@ -151,17 +142,17 @@ const Value = ({ field, nodePath, validatedLocation }) => {
     });
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineEffectFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath }) => {
+const TimelineEffectFieldRow = ({ field, validatedLocation, rowDepth, nodePath }) => {
     var _a;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
             height: field.rowHeight,
-            paddingLeft,
         };
-    }, [field.rowHeight, paddingLeft]);
-    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: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation })
+    }, [field.rowHeight]);
+    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
+    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: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation })
         ] }));
 };
 exports.TimelineEffectFieldRow = TimelineEffectFieldRow;

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

@@ -10,8 +10,7 @@ export declare const TimelineEffectGroupRow: React.FC<{
     readonly effectSchema: SequenceSchema;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;
-    readonly nestedDepth: number;
-    readonly style: React.CSSProperties;
+    readonly rowDepth: number;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
 }>;

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -4,22 +4,22 @@ 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 client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 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 TimelineRowChrome_1 = require("./TimelineRowChrome");
 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, }) => {
+const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
     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({
@@ -36,9 +36,9 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         }
         return false;
     }, [disabledStatus]);
-    const canToggle = disabledStatus !== null && disabledStatus.canUpdate;
+    const canToggle = previewConnected && disabledStatus !== null && disabledStatus.canUpdate;
     const onToggle = (0, react_1.useCallback)((type) => {
-        if (!canToggle) {
+        if (!canToggle || previewServerState.type !== 'connected') {
             return;
         }
         const newValue = type !== 'enable';
@@ -55,19 +55,22 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
             defaultValue,
             schema: effectSchema,
             setCodeValues,
+            clientId: previewServerState.clientId,
         });
     }, [
         canToggle,
         effectIndex,
         effectSchema,
         nodePath,
+        previewServerState,
         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 })
-        ] }));
+    const rowStyle = (0, react_1.useMemo)(() => ({
+        height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+        paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+    }), []);
+    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: label }) }));
 };
 exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -2,58 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const Padder_1 = require("./Padder");
+const timeline_row_layout_1 = require("./timeline-row-layout");
 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");
-const groupRowBase = {
-    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-    display: 'flex',
-    alignItems: 'center',
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const labelOnlyRowBase = {
-    display: 'flex',
-    alignItems: 'center',
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
 const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, }) => {
-    const paddingLeft = timeline_layout_1.EXPANDED_SECTION_PADDING_LEFT + depth * TimelineListItem_1.INDENT;
-    const groupStyle = (0, react_1.useMemo)(() => ({ ...groupRowBase, paddingLeft }), [paddingLeft]);
-    const labelOnlyStyle = (0, react_1.useMemo)(() => ({
-        ...labelOnlyRowBase,
-        height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        paddingLeft,
-    }), [node, paddingLeft]);
+    const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
     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 }));
+            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, rowDepth: rowDepth, 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 })
-            ] }));
+        return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
+                height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+                paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+            }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath }));
+            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, schema: schema }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
-    return (jsx_runtime_1.jsxs("div", { style: labelOnlyStyle, children: [
-            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
-        ] }));
+    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
+            height: (0, timeline_layout_1.getTreeRowHeight)(node),
+            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+        }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
 };
 exports.TimelineExpandedRow = TimelineExpandedRow;

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

@@ -6,8 +6,7 @@ import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
-    readonly paddingLeft: number;
-    readonly nestedDepth: number;
+    readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -4,14 +4,15 @@ exports.TimelineFieldRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 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 = {
@@ -19,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);
@@ -42,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;
@@ -65,9 +66,11 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             defaultValue,
             schema,
             setCodeValues,
+            clientId,
         });
     }, [
         codeValue,
+        clientId,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -89,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);
@@ -98,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/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,17 +11,16 @@ 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;
-    var _b, _c;
+    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';
@@ -29,7 +28,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     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 originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -179,7 +178,8 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             !validatedLocation ||
             !codeValuesForOverride ||
             !codeHiddenStatus ||
-            !codeHiddenStatus.canUpdate) {
+            !codeHiddenStatus.canUpdate ||
+            previewServerState.type !== 'connected') {
             return;
         }
         const newValue = type !== 'enable';
@@ -196,11 +196,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             defaultValue,
             schema,
             setCodeValues,
+            clientId: previewServerState.clientId,
         });
     }, [
         codeHiddenStatus,
         codeValuesForOverride,
         nodePath,
+        previewServerState,
         sequence.controls,
         setCodeValues,
         validatedLocation,
@@ -217,23 +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 canToggleVisibility = Boolean(sequence.controls) &&
+    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.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 })
-            ] }) }));
+    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

@@ -1,6 +1,6 @@
 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, }: {
+export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
@@ -9,4 +9,5 @@ export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKe
     defaultValue: string | null;
     schema: SequenceSchema;
     setCodeValues: SetCodeValues;
+    clientId: string;
 }) => Promise<void>;

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

@@ -4,7 +4,7 @@ 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, }) => {
+const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
         setCodeValues,
@@ -23,19 +23,8 @@ const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defa
             value: JSON.stringify(value),
             defaultValue,
             schema,
+            clientId,
         }),
-        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',
     });
 };

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

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