@remotion/studio 4.0.473 → 4.0.475

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -113,13 +113,13 @@ const effectStatusToSnapshot = (effect) => {
         params,
     };
 };
-const getSnapshotsFromSelection = ({ selection, codeValues, }) => {
+const getSnapshotsFromSelection = ({ selection, propStatuses, }) => {
     if (selection.type !== 'sequence-effect' &&
         selection.type !== 'sequence-all-effects') {
         return null;
     }
     const { sequenceSubscriptionKey } = selection.nodePathInfo;
-    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
+    const sequenceStatus = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
     if (!sequenceStatus || !sequenceStatus.canUpdate) {
         return null;
     }
@@ -143,11 +143,11 @@ const getSnapshotsFromSelection = ({ selection, codeValues, }) => {
     return snapshots;
 };
 exports.getSnapshotsFromSelection = getSnapshotsFromSelection;
-const getEffectPropClipboardDataFromSelection = ({ selection, codeValues, }) => {
+const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) => {
     if (selection.type !== 'sequence-effect-prop') {
         return null;
     }
-    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+    const sequenceStatus = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
     if (!sequenceStatus || !sequenceStatus.canUpdate) {
         return null;
     }
@@ -176,7 +176,7 @@ const getEffectPropClipboardDataFromSelection = ({ selection, codeValues, }) =>
     };
 };
 exports.getEffectPropClipboardDataFromSelection = getEffectPropClipboardDataFromSelection;
-const getPasteEffectPropTarget = ({ selectedItems, payload, codeValues, sequences, overrideIdsToNodePaths, }) => {
+const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
     var _a;
     if (selectedItems.length === 0) {
         return { type: 'none' };
@@ -223,7 +223,7 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, codeValues, sequence
     if (!effect || !isVisibleFieldSchema(fieldSchema)) {
         return { type: 'prop-mismatch' };
     }
-    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+    const sequenceStatus = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
     if (!(sequenceStatus === null || sequenceStatus === void 0 ? void 0 : sequenceStatus.canUpdate)) {
         return { type: 'uncopyable' };
     }
@@ -254,9 +254,9 @@ const TimelineClipboardKeybindings = () => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
@@ -269,6 +269,7 @@ const TimelineClipboardKeybindings = () => {
             callback: (e) => {
                 var _a;
                 const { selectedItems } = currentSelection.current;
+                const propStatuses = propStatusesRef.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
@@ -281,7 +282,7 @@ const TimelineClipboardKeybindings = () => {
                     }
                     const payload = (0, exports.getEffectPropClipboardDataFromSelection)({
                         selection: selectedItems[0],
-                        codeValues,
+                        propStatuses,
                     });
                     if (payload === null) {
                         (0, NotificationCenter_1.showNotification)('Cannot copy effect prop because its value cannot be copied', 3000);
@@ -310,7 +311,7 @@ const TimelineClipboardKeybindings = () => {
                 const snapshots = selectedItems.flatMap((selection) => {
                     const itemSnapshots = (0, exports.getSnapshotsFromSelection)({
                         selection,
-                        codeValues,
+                        propStatuses,
                     });
                     return itemSnapshots !== null && itemSnapshots !== void 0 ? itemSnapshots : [null];
                 });
@@ -352,6 +353,8 @@ const TimelineClipboardKeybindings = () => {
                 navigator.clipboard
                     .readText()
                     .then((text) => {
+                    const propStatuses = propStatusesRef.current;
+                    const sequences = sequencesRef.current;
                     const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
                     if (effectPropResult.status !== 'invalid') {
                         e.preventDefault();
@@ -362,7 +365,7 @@ const TimelineClipboardKeybindings = () => {
                         const effectPropTarget = (0, exports.getPasteEffectPropTarget)({
                             selectedItems,
                             payload: effectPropResult.data,
-                            codeValues,
+                            propStatuses,
                             sequences,
                             overrideIdsToNodePaths: overrideIdToNodePathMappings,
                         });
@@ -406,7 +409,7 @@ const TimelineClipboardKeybindings = () => {
                                 }),
                             defaultValue: effectPropTarget.defaultValue,
                             schema: effectPropTarget.schema,
-                            setCodeValues,
+                            setPropStatuses,
                             clientId,
                         }).then(() => {
                             (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
@@ -466,13 +469,13 @@ const TimelineClipboardKeybindings = () => {
         };
     }, [
         canSelect,
-        codeValues,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,
+        propStatusesRef,
         previewServerState,
-        sequences,
-        setCodeValues,
+        sequencesRef,
+        setPropStatuses,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -10,52 +10,39 @@ const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { canSelect, canSelectEasing } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
-        if (!canSelect || previewServerState.type !== 'connected') {
+        if ((!canSelect && !canSelectEasing) ||
+            previewServerState.type !== 'connected') {
             return;
         }
         const { clientId } = previewServerState;
-        const backspace = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Backspace',
-            callback: () => {
-                const { selectedItems, clearSelection } = currentSelection.current;
-                if (selectedItems.length === 0) {
-                    return;
-                }
-                const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
-                    selections: selectedItems,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    codeValues,
-                    setCodeValues,
-                    clientId,
-                });
-                if (resetPromise !== null) {
-                    resetPromise.catch(() => undefined);
-                    return;
-                }
-                const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
-                    selections: selectedItems,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    setCodeValues,
-                    clientId,
-                    confirm,
-                });
-                if (deletePromise === null) {
-                    return;
-                }
+        const handleDelete = () => {
+            const { selectedItems, clearSelection } = currentSelection.current;
+            const sequences = sequencesRef.current;
+            const propStatuses = propStatusesRef.current;
+            if (selectedItems.length === 0) {
+                return;
+            }
+            const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
+                selections: selectedItems,
+                sequences,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                setPropStatuses,
+                clientId,
+                confirm,
+            });
+            if (deletePromise !== null) {
                 deletePromise
                     .then((deleted) => {
                     if (deleted) {
@@ -63,7 +50,49 @@ const TimelineDeleteKeybindings = () => {
                     }
                 })
                     .catch(() => undefined);
-            },
+                return;
+            }
+            const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+            if (easingSelections.length === selectedItems.length) {
+                const resetEasingPromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+                    selections: easingSelections,
+                    sequences,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    propStatuses,
+                    setPropStatuses,
+                    clientId,
+                    easing: 'linear',
+                });
+                if (resetEasingPromise !== null) {
+                    resetEasingPromise.catch(() => undefined);
+                    return;
+                }
+            }
+            const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
+                selections: selectedItems,
+                sequences,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                propStatuses,
+                setPropStatuses,
+                clientId,
+            });
+            if (resetPromise !== null) {
+                resetPromise.catch(() => undefined);
+            }
+        };
+        const backspace = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Backspace',
+            callback: handleDelete,
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const deleteKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Delete',
+            callback: handleDelete,
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -93,18 +122,20 @@ const TimelineDeleteKeybindings = () => {
         });
         return () => {
             backspace.unregister();
+            deleteKey.unregister();
             duplicate.unregister();
         };
     }, [
         canSelect,
-        codeValues,
+        canSelectEasing,
         confirm,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,
+        propStatusesRef,
         previewServerState,
-        sequences,
-        setCodeValues,
+        sequencesRef,
+        setPropStatuses,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDragHandler.js

@@ -82,13 +82,13 @@ const TimelineDragHandler = () => {
         return {
             ...container,
             width: 100 * zoom + '%',
-            ...(TimelineSelection_1.TIMELINE_TOP_DRAG ? { height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT } : {}),
+            height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
     }, [canvasContent, zoomMap]);
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {}) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video ? jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {}) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {

package/dist/components/Timeline/TimelineEffectItem.js

@@ -68,15 +68,15 @@ 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 { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    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);
     const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
-    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
         nodePath,
         effectIndex,
-    }), [codeValues, nodePath, effectIndex]);
+    }), [propStatuses, nodePath, effectIndex]);
     const disabledStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : null)
         : null;
@@ -90,8 +90,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const deleteDisabled = !previewConnected ||
         effectStatus.type !== 'can-update-effect' ||
         !validatedLocation.source;
-    const canReorder = TimelineSelection_1.SELECTION_ENABLED &&
-        previewConnected &&
+    const canReorder = previewConnected &&
         effectStatus.type === 'can-update-effect' &&
         Boolean(validatedLocation.source);
     const nodePathKey = (0, react_1.useMemo)(() => remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
@@ -186,7 +185,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             value: newValue,
             defaultValue,
             schema: effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
         });
     }, [
@@ -195,7 +194,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         effectSchema,
         nodePath,
         previewServerState,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
     ]);
     const isExpanded = getIsExpanded(nodePathInfo);

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -43,15 +43,15 @@ const isResettableStatus = ({ status, defaultValue, }) => {
 const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
     var _a;
     var _b;
-    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (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 { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     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,
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses: visualModePropStatuses,
         nodePath,
         effectIndex: field.effectIndex,
     });
@@ -110,8 +110,8 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         }
         return (0, save_prop_queue_1.enqueueSavePropChange)({
             nodePath,
-            setCodeValues,
-            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+            setPropStatuses,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
                 previous: prev,
                 effectIndex: field.effectIndex,
                 fieldKey: field.key,
@@ -139,7 +139,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         field.key,
         nodePath,
         propStatus,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
@@ -157,7 +157,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
             sourceFrame,
             value,
             schema: field.effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -166,7 +166,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         field.effectSchema,
         field.key,
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     if (field.fieldSchema.type === 'scale') {
@@ -203,7 +203,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue: propStatus,
+        propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         frame: jsxFrame,
@@ -216,8 +216,8 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     var _b, _c;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
@@ -226,11 +226,11 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
         nodePath,
         effectIndex: field.effectIndex,
-    }), [codeValues, nodePath, field.effectIndex]);
+    }), [propStatuses, nodePath, field.effectIndex]);
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
@@ -246,7 +246,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 schema: field.effectSchema,
                 key: field.key,
             }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex })) : null;
+        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo })) : null;
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -278,7 +278,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             value: field.fieldSchema.default,
             defaultValue,
             schema: field.effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
         });
     }, [
@@ -290,7 +290,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         field.key,
         nodePath,
         previewServerState,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
     ]);
     const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {

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

@@ -6,6 +6,7 @@ export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<{
         frame: number;
         value: unknown;
     }[];
+    readonly canEditEasing: boolean;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly showSeparator: boolean;
 }>;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -37,7 +37,9 @@ exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
+const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const row = {
@@ -46,10 +48,13 @@ const row = {
 const rowSeparator = {
     height: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 };
-const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, nodePathInfo, showSeparator }) => {
+const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    const easingSegments = canEditEasing
+        ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
+        : [];
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -56,28 +56,28 @@ const separator = {
 const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        codeValues: visualModeCodeValues,
+        propStatuses: visualModePropStatuses,
     }), [
         sequence,
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        visualModeCodeValues,
+        visualModePropStatuses,
     ]);
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
         sequence,
         nodePathInfo,
         getIsExpanded,
-        codeValues: visualModeCodeValues,
-    }), [sequence, nodePathInfo, getIsExpanded, visualModeCodeValues]);
+        propStatuses: visualModePropStatuses,
+    }), [sequence, nodePathInfo, getIsExpanded, visualModePropStatuses]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -14,6 +14,6 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeD
         nodePathInfo,
         keyframeDisplayOffset,
     });
-    return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
+    return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
 exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -36,12 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 baseStyle = {
     display: 'flex',
     flex: 1,
     minHeight: '100%',
     overflowX: 'hidden',
+    backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
 const TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
     const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });

package/dist/components/Timeline/TimelineItemStack.js

@@ -3,63 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineItemStack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
-const open_in_editor_1 = require("../../helpers/open-in-editor");
-const layout_1 = require("../layout");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const Spinner_1 = require("../Spinner");
-const TimelineSelection_1 = require("./TimelineSelection");
 const source_attribution_1 = require("./TimelineStack/source-attribution");
 const TimelineItemStack = ({ originalLocation }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const [opening, setOpening] = (0, react_1.useState)(false);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const openEditor = (0, react_1.useCallback)(async (location) => {
-        if (!window.remotion_editorName) {
-            return;
-        }
-        setOpening(true);
-        try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(location);
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-        finally {
-            setOpening(false);
-        }
-    }, []);
-    const canOpenInEditor = Boolean(window.remotion_editorName &&
-        connectionStatus === 'connected' &&
-        originalLocation);
-    const canOpenInGitHub = Boolean(window.remotion_gitSource && originalLocation);
-    const hoverable = !TimelineSelection_1.SELECTION_ENABLED && (canOpenInEditor || canOpenInGitHub);
-    const onClick = (0, react_1.useCallback)(() => {
-        if (!originalLocation) {
-            return;
-        }
-        if (canOpenInEditor) {
-            openEditor(originalLocation);
-            return;
-        }
-        if (canOpenInGitHub) {
-            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
-        }
-    }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
-    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const style = (0, react_1.useMemo)(() => {
         return {
             fontSize: 12,
-            color: opening
-                ? colors_1.VERY_LIGHT_TEXT
-                : hovered && hoverable
-                    ? colors_1.LIGHT_TEXT
-                    : colors_1.VERY_LIGHT_TEXT,
-            cursor: hoverable ? 'pointer' : undefined,
+            color: colors_1.VERY_LIGHT_TEXT,
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -70,13 +20,10 @@ const TimelineItemStack = ({ originalLocation }) => {
             userSelect: 'none',
             WebkitUserSelect: 'none',
         };
-    }, [opening, hovered, hoverable]);
+    }, []);
     if (!originalLocation) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { onPointerEnter: hoverable ? onPointerEnter : undefined, onPointerLeave: hoverable ? onPointerLeave : undefined, onClick: hoverable ? onClick : undefined, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) }), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
-                ] })) : null] }));
+    return (jsx_runtime_1.jsx("div", { style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) }));
 };
 exports.TimelineItemStack = TimelineItemStack;