@remotion/studio 4.0.513 → 4.0.515

package/dist/components/Timeline/TimelineEffectItem.js

@@ -4,11 +4,12 @@ exports.TimelineEffectItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -26,6 +27,14 @@ const rowStyle = {
     height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
     cursor: 'default',
 };
+const labelContainerStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
 const reorderWrapper = {
     position: 'relative',
 };
@@ -69,6 +78,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const canMutateEffects = (0, browser_studio_operations_1.canUseEffectOperations)();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -88,11 +98,13 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         }
         return false;
     }, [disabledStatus]);
-    const canToggle = previewConnected && (disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static';
+    const canToggle = previewConnected && canMutateEffects && (disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static';
     const deleteDisabled = !previewConnected ||
+        !canMutateEffects ||
         effectStatus.type !== 'can-update-effect' ||
         !validatedLocation.source;
     const canReorder = previewConnected &&
+        canMutateEffects &&
         effectStatus.type === 'can-update-effect' &&
         Boolean(validatedLocation.source);
     const nodePathKey = (0, react_1.useMemo)(() => remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
@@ -101,7 +113,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             return;
         }
         try {
-            const result = await (0, call_api_1.callApi)('/api/delete-effect', [
+            const result = await (0, effect_operations_api_1.deleteEffects)([
                 {
                     type: 'single-effect',
                     fileName: validatedLocation.source,
@@ -209,8 +221,11 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             alignItems: 'center',
             color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
             display: 'inline-flex',
-            marginRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+            flexShrink: 1,
             minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
             boxShadow: containsSelection && !selection.selected
                 ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                 : undefined,
@@ -288,7 +303,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         setDropIndicator(null);
         currentEffectDrag = null;
         try {
-            const result = await (0, call_api_1.callApi)('/api/reorder-effect', {
+            const result = await (0, effect_operations_api_1.reorderEffect)({
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
                 fromIndex: dropTarget.dragData.effectIndex,
@@ -321,7 +336,9 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
         };
     }, [dropIndicator]);
-    const row = (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, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const row = (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.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+                jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false })
+            ] }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { RuntimeValueStore, SequencePropsSubscriptionKey } 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 { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
@@ -9,6 +9,7 @@ export declare const TimelineEffectPropValue: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;
     readonly sourceFrame: number;
+    readonly runtimeValueStore: RuntimeValueStore | null;
 }>;
 export declare const TimelineEffectPropItem: React.FC<{
     readonly field: EffectSchemaFieldInfo;
@@ -17,5 +18,6 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
-    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
+    readonly keyframeControlsMode: TimelineKeyframeControlsMode;
+    readonly runtimeValueStore: RuntimeValueStore | null;
 }>;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -5,10 +5,12 @@ 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 browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
-const call_api_1 = require("../call-api");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ContextMenu_1 = require("../ContextMenu");
+const effect_operations_api_1 = require("../effect-operations-api");
 const use_default_editor_info_1 = require("../use-default-editor-info");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
@@ -40,7 +42,11 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame }) => {
+const TimelineComputedEffectPropValue = ({ field, propStatus, runtimeValueStore, validatedLocation }) => {
+    const runtimeValue = (0, use_runtime_values_1.useRuntimeStoreValue)(runtimeValueStore, field.key);
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus, field: field, runtimeValue: runtimeValue, validatedLocation: validatedLocation }));
+};
+const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame, runtimeValueStore }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -123,7 +129,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
                 value,
                 schema: field.effectSchema,
             }),
-            apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
+            apiCall: () => (0, effect_operations_api_1.saveEffectProps)({
                 type: 'value',
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
@@ -177,24 +183,27 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     if (field.fieldSchema.type === 'scale') {
         throw new Error(`Effects do not support scale fields: ${field.key}`);
     }
+    if (!(0, browser_studio_operations_1.canUseEffectOperations)()) {
+        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "read only", formattedValue: false });
+    }
     if (effectStatus.type === 'cannot-update-effect') {
         if (effectStatus.reason === 'computed') {
-            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed", fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
+            return (jsx_runtime_1.jsx(TimelineComputedEffectPropValue, { propStatus: { status: 'computed' }, field: field, runtimeValueStore: runtimeValueStore, validatedLocation: validatedLocation }));
         }
         if (effectStatus.reason === 'not-call-expression') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline", formattedValue: false });
         }
         if (effectStatus.reason === 'not-found') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code", formattedValue: false }));
         }
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (effectStatus.type === 'cannot-update-sequence') {
         if (effectStatus.reason === 'not-found') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code", formattedValue: false }));
         }
         if (effectStatus.reason === 'error') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error" });
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error", formattedValue: false });
         }
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
@@ -205,7 +214,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
         return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
     }
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus), fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
+        return (jsx_runtime_1.jsx(TimelineComputedEffectPropValue, { propStatus: propStatus, field: field, runtimeValueStore: runtimeValueStore, validatedLocation: validatedLocation }));
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         propStatus,
@@ -217,11 +226,11 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
-const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
+const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, runtimeValueStore, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -339,7 +348,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             property: field.key,
         }).catch(() => undefined);
     }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset }) }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -37,11 +37,11 @@ exports.TimelineExpandArrowSpacer = exports.TimelineExpandArrowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
+const caret_1 = require("../../icons/caret");
 const arrowButton = {
     background: 'none',
     border: 'none',
-    color: colors_1.WHITE,
-    cursor: 'pointer',
     padding: 0,
     display: 'flex',
     alignItems: 'center',
@@ -57,9 +57,7 @@ const arrowButton = {
 };
 const arrowSpacer = {
     ...arrowButton,
-    cursor: 'default',
 };
-const svgStyle = { display: 'block' };
 const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = false }) => {
     const handleClick = react_1.default.useCallback((e) => {
         e.stopPropagation();
@@ -71,12 +69,17 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
     const style = (0, react_1.useMemo)(() => {
         return {
             ...arrowButton,
-            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-            cursor: disabled ? 'default' : 'pointer',
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: colors_1.TRANSPARENT,
+                idleColor: colors_1.LIGHT_GRAY,
+                hoverColor: disabled ? colors_1.LIGHT_GRAY : colors_1.WHITE,
+            }),
+            transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
             opacity: disabled ? 0.5 : 1,
         };
     }, [isExpanded, disabled]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: colors_1.LIGHT_GRAY }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} __remotion-timeline-expand-arrow-button`, style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -59,7 +59,10 @@ const rowSeparator = {
 };
 const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(nodePathInfo, {
+        hovered: false,
+        selectedBackground: TimelineSelection_1.TIMELINE_EXPANDED_SELECTED_BACKGROUND,
+    });
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];

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

@@ -16,7 +16,7 @@ type TimelineExpandedRowProps = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
-    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
+    readonly keyframeControlsMode: TimelineKeyframeControlsMode;
 };
 export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;
 export {};

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -45,19 +45,19 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         const isExpanded = getIsExpanded(node.nodePathInfo);
         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,
-            }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     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),
-        }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = react_1.default.memo(TimelineExpandedRowInner);

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -39,8 +39,11 @@ const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const TimelineExpandedRow_1 = require("./TimelineExpandedRow");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSelection_1 = require("./TimelineSelection");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const expandedSectionBase = {
+    backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
     color: colors_1.WHITE,
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
@@ -68,16 +71,16 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
-            height: expandedHeight,
+            height: expandedHeight + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
         };
     }, [expandedHeight]);
     const { schema } = sequence.controls;
     if (flat.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset })
-                ] }, JSON.stringify(node.nodePathInfo)));
-        }) }));
+    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowSelectedBackgroundContext.Provider, { value: TimelineSelection_1.TIMELINE_EXPANDED_SELECTED_BACKGROUND, children: jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
+                    ] }, JSON.stringify(node.nodePathInfo)));
+            }) }) }));
 };
 exports.TimelineExpandedSection = TimelineExpandedSection;

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

@@ -1,8 +1,4 @@
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
-    readonly shown: TimelineTrackData[];
-    readonly hasBeenCut: boolean;
-    readonly isStill: boolean;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -37,7 +37,7 @@ exports.TimelineHeightContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const TimelineSelection_1 = require("./TimelineSelection");
-const use_timeline_height_1 = require("./use-timeline-height");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const baseStyle = {
     display: 'flex',
     flex: 1,
@@ -45,9 +45,9 @@ const baseStyle = {
     overflowX: 'hidden',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
-const TimelineHeightContainerInner = ({ shown, hasBeenCut, isStill, children }) => {
-    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut, isStill });
-    const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
+const TimelineHeightContainerInner = ({ children }) => {
+    const { totalSize } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height: totalSize }), [totalSize]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };
 exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const TimelineImageInfo: React.FC<{
     readonly src: string;
     readonly visualizationWidth: number;
+    readonly offsetInPixels: number;
 }>;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -15,7 +15,7 @@ const containerStyle = {
     borderTopLeftRadius: 2,
     borderBottomLeftRadius: 2,
 };
-const TimelineImageInfo = ({ src, visualizationWidth }) => {
+const TimelineImageInfo = ({ src, visualizationWidth, offsetInPixels }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
@@ -38,13 +38,14 @@ const TimelineImageInfo = ({ src, visualizationWidth }) => {
             (0, timeline_utils_1.drawRepeatingImageThumbnail)({
                 canvas,
                 image: img,
+                offsetInPixels: offsetInPixels * window.devicePixelRatio,
             });
         };
         img.src = src;
         return () => {
             current.removeChild(canvas);
         };
-    }, [src, visualizationWidth]);
+    }, [offsetInPixels, src, visualizationWidth]);
     return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
 };
 exports.TimelineImageInfo = TimelineImageInfo;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -5,6 +5,7 @@ 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 browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -292,6 +293,9 @@ const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable,
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
 const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
+    if (propStatus.status === 'computed') {
+        return false;
+    }
     if (selected) {
         return true;
     }
@@ -342,7 +346,8 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         key: fieldKey,
     });
     const canAddKeyframe = keyframable;
-    const canToggleKeyframe = propStatus.status !== 'computed' &&
+    const canToggleKeyframe = (0, browser_studio_operations_1.canUseKeyframeOperations)() &&
+        propStatus.status !== 'computed' &&
         (hasKeyframeAtCurrentFrame || canAddKeyframe);
     const selectedNodePathInfos = (0, react_1.useMemo)(() => (0, exports.getSelectedKeyframeControlNodePathInfos)({
         clickedNodePathInfo: nodePathInfo,

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

@@ -1,6 +1,2 @@
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineList: React.FC<{
-    readonly timeline: TimelineTrackData[];
-    readonly showTimePadding: boolean;
-}>;
+export declare const TimelineList: React.FC;

package/dist/components/Timeline/TimelineList.js

@@ -2,22 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const nest_timeline_tracks_1 = require("./nest-timeline-tracks");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
-const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
+    position: 'relative',
 };
-const TimelineListTrack = ({ nestedTrack }) => {
+const TimelineListTrack = ({ row }) => {
     var _a;
-    const { track, children, siblingIndex } = nestedTrack;
-    return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, children: children.map((child) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: child }, child.track.sequence.id))) }) }));
+    const { afterDropLineOffset, siblingIndex, track } = row;
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }));
 };
-const TimelineList = ({ timeline, showTimePadding }) => {
-    const nestedTimeline = (0, react_1.useMemo)(() => (0, nest_timeline_tracks_1.nestTimelineTracks)(timeline), [timeline]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [showTimePadding ? jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}) : null, nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
+const TimelineList = () => {
+    const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
+                height: virtualItem.size,
+                left: 0,
+                position: 'absolute',
+                top: virtualItem.start,
+                width: '100%',
+            }, children: jsx_runtime_1.jsx(TimelineListTrack, { row: rows[virtualItem.index] }) }, virtualItem.key))) }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -9,11 +9,11 @@ const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 /**
- * Maps wheel deltaY to zoom delta. Must be large enough that typical ctrl+wheel
- * pinch steps change `TimelineZoomCtx` zoom by at least one 0.1 step after
- * `Math.round(z * 10) / 10` in `timeline-zoom.tsx` (0.005 was too small).
+ * Maps wheel deltaY to a multiplicative zoom change. Must be large enough that
+ * typical ctrl+wheel pinch steps change `TimelineZoomCtx` zoom by at least one
+ * 0.1 step after rounding in `clampTimelineZoom` (0.005 was too small at 1x).
  */
-const ZOOM_WHEEL_DELTA = 0.06;
+const ZOOM_WHEEL_SENSITIVITY = 0.06;
 const TimelinePinchZoom = () => {
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -60,7 +60,7 @@ const TimelinePinchZoom = () => {
         else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
             scaledDeltaY *= scrollEl.clientHeight;
         }
-        setZoom(canvasContent.compositionId, (z) => z - scaledDeltaY * ZOOM_WHEEL_DELTA, { anchorFrame: null, anchorContentX });
+        setZoom(canvasContent.compositionId, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
     }, [
         editorZoomGestures,
         isVideoComposition,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TimelineSelectionInteraction } from './TimelineSelection';
-import { type TimelineSelection } from './TimelineSelection';
+export declare const TimelineRowSelectedBackgroundContext: React.Context<string>;
 export declare const TimelineRowKeyframeControlsColumn: React.FC<{
     readonly children: React.ReactNode;
     readonly depth: number;
@@ -14,7 +14,6 @@ export declare const TimelineRowChrome: React.FC<{
     readonly style: React.CSSProperties;
     readonly selected: boolean;
     readonly selectable: boolean;
-    readonly selectionItem: TimelineSelection | null;
     readonly onSelect: (interaction?: TimelineSelectionInteraction) => void;
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;