@remotion/studio 4.0.483 → 4.0.485

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -63,6 +63,7 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
 const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const use_rename_sequence_1 = require("./use-rename-sequence");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const labelContainerStyle = {
@@ -83,6 +84,7 @@ const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onTog
     const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: false,
     });
     if (filteredTree.length === 0) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
@@ -157,7 +159,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
@@ -188,6 +189,14 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
+    const { canRename: canRenameThisSequence, displayName, fallbackDisplayName, propStatusesForOverride, saveName, } = (0, use_rename_sequence_1.useRenameSequence)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePathInfo,
+        sequence,
+        validatedLocation,
+    });
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
     const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
@@ -437,13 +446,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
-    const propStatusesForOverride = (0, react_1.useMemo)(() => {
-        return nodePath
-            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
-            : undefined;
-    }, [propStatuses, nodePath]);
     const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
-    const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
         const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
@@ -453,14 +456,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
         return effective !== null && effective !== void 0 ? effective : false;
     }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
-    const displayName = (0, react_1.useMemo)(() => {
-        if (codeNameStatus &&
-            codeNameStatus.status === 'static' &&
-            typeof codeNameStatus.codeValue === 'string') {
-            return codeNameStatus.codeValue;
-        }
-        return sequence.displayName;
-    }, [codeNameStatus, sequence.displayName]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
@@ -529,14 +524,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
-    const canRenameThisSequence = previewServerState.type === 'connected' &&
-        !window.remotion_isReadOnlyStudio &&
-        Boolean(sequence.controls) &&
-        nodePath !== null &&
-        validatedLocation !== null &&
-        codeNameStatus !== undefined &&
-        codeNameStatus !== null &&
-        codeNameStatus.status === 'static';
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -557,45 +544,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         setIsRenaming(false);
     }, []);
     const onSaveName = (0, react_1.useCallback)(async (name) => {
-        if (!canRenameThisSequence ||
-            previewServerState.type !== 'connected' ||
-            !sequence.controls ||
-            !nodePath ||
-            !validatedLocation) {
-            setIsRenaming(false);
-            return;
-        }
-        if (name === displayName) {
-            setIsRenaming(false);
-            return;
-        }
-        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: 'name',
-                    value: name,
-                    defaultValue: null,
-                    schema: sequence.controls.schema,
-                },
-            ],
-            setPropStatuses,
-            clientId: previewServerState.clientId,
-            undoLabel: 'Rename sequence',
-            redoLabel: 'Rename sequence again',
-        });
         setIsRenaming(false);
-        await savePromise;
-    }, [
-        canRenameThisSequence,
-        displayName,
-        nodePath,
-        previewServerState,
-        sequence.controls,
-        setPropStatuses,
-        validatedLocation,
-    ]);
+        await saveName(name);
+    }, [saveName]);
     react_1.default.useEffect(() => {
         if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
             setIsRenaming(false);
@@ -805,7 +756,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const trackRow = (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 && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
             ? onSequenceDoubleClick
             : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TimelineSequenceName: React.FC<{
     readonly displayName: string;
+    readonly fallbackDisplayName: string;
     readonly selected: boolean;
     readonly containsSelection: boolean;
     readonly editing: boolean;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -13,7 +13,7 @@ const getTruncatedDisplayName = (displayName) => {
     }
     return displayName;
 };
-const TimelineSequenceName = ({ displayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
+const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
     const inputRef = (0, react_1.useRef)(null);
     const [draftName, setDraftName] = (0, react_1.useState)(displayName);
     const cancelNextBlurRef = (0, react_1.useRef)(false);
@@ -53,10 +53,11 @@ const TimelineSequenceName = ({ displayName, selected, containsSelection, editin
             WebkitUserSelect: 'text',
         };
     }, [style]);
-    const text = getTruncatedDisplayName(displayName) || '<Sequence>';
+    const editableDisplayName = displayName || fallbackDisplayName;
+    const text = getTruncatedDisplayName(editableDisplayName);
     (0, react_1.useEffect)(() => {
         if (!editing) {
-            setDraftName(displayName);
+            setDraftName(editableDisplayName);
             return;
         }
         const input = inputRef.current;
@@ -64,10 +65,10 @@ const TimelineSequenceName = ({ displayName, selected, containsSelection, editin
             return;
         }
         input.focus();
-        const basenameIndex = displayName.lastIndexOf('.');
-        const selectionEnd = basenameIndex > 0 ? basenameIndex : displayName.length;
+        const basenameIndex = editableDisplayName.lastIndexOf('.');
+        const selectionEnd = basenameIndex > 0 ? basenameIndex : editableDisplayName.length;
         input.setSelectionRange(0, selectionEnd);
-    }, [displayName, editing]);
+    }, [editableDisplayName, editing]);
     const save = (0, react_1.useCallback)(() => {
         onSaveName(draftName).catch(() => undefined);
     }, [draftName, onSaveName]);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, InteractivitySchema, 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 { SchemaFieldInfo } from '../../helpers/timeline-layout';

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -9,6 +9,7 @@ const client_id_1 = require("../../helpers/client-id");
 const modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
+const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 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");
@@ -19,6 +20,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -62,9 +64,11 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
         if (!clientId) {
             return Promise.reject(new Error('Not connected to studio server'));
         }
-        const defaultValue = field.fieldSchema.default !== undefined
-            ? JSON.stringify(field.fieldSchema.default)
-            : null;
+        const defaultValue = field.fieldSchema.type === 'text-content'
+            ? null
+            : field.fieldSchema.default !== undefined
+                ? JSON.stringify(field.fieldSchema.default)
+                : null;
         const stringifiedValue = JSON.stringify(value);
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
         if (value === propStatus.codeValue) {
@@ -95,6 +99,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
         clientId,
         field.description,
         field.fieldSchema.default,
+        field.fieldSchema.type,
         field.key,
         nodePath,
         schema,
@@ -162,6 +167,9 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
@@ -303,10 +311,84 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         onReset,
         previewServerState,
     ]);
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
+        if (propStatus === null || propStatus.status === 'computed') {
+            return;
+        }
+        const keyframeSelection = {
+            type: 'keyframe',
+            nodePathInfo,
+            frame: sourceFrame + keyframeDisplayOffset,
+        };
+        if (propStatus.status === 'static') {
+            if (!keyframable || previewServerState.type !== 'connected') {
+                return;
+            }
+            const value = remotion_1.Internals.getEffectiveVisualModeValue({
+                propStatus,
+                dragOverrideValue,
+                frame: sourceFrame,
+                defaultValue: field.fieldSchema.default,
+                shouldResortToDefaultValueIfUndefined: true,
+            });
+            event.stopPropagation();
+            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName: validatedLocation.source,
+                nodePath,
+                fieldKey: field.key,
+                sourceFrame,
+                value,
+                schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+            selectItems([keyframeSelection], { reveal: true });
+            seekToDisplayFrame(keyframeSelection.frame);
+            return;
+        }
+        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
+            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
+            keyframeDisplayOffset,
+            keyframes: propStatus.keyframes,
+            nodePathInfo,
+            sourceFrame,
+        });
+        if (targetSelection === null) {
+            return;
+        }
+        event.stopPropagation();
+        selectItems([targetSelection], { reveal: true });
+        if (targetSelection.type === 'keyframe') {
+            seekToDisplayFrame(targetSelection.frame);
+        }
+    }, [
+        dragOverrideValue,
+        field.fieldSchema.default,
+        field.key,
+        keyframeDisplayOffset,
+        keyframable,
+        nodePath,
+        nodePathInfo,
+        previewServerState,
+        propStatus,
+        schema,
+        seekToDisplayFrame,
+        selectItems,
+        setPropStatuses,
+        sourceFrame,
+        validatedLocation.source,
+    ]);
     if (propStatus === null) {
         return null;
     }
-    const row = (jsx_runtime_1.jsxs(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, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+    const row = (jsx_runtime_1.jsxs(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, outerHeight: null, children: [
             jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

package/dist/components/Timeline/TimelineSlider.js

@@ -16,12 +16,18 @@ const container = {
     top: 0,
     pointerEvents: 'none',
 };
+const PLAYHEAD_LINE_WIDTH = 1;
 const line = {
     height: '100vh',
-    width: 1,
+    width: PLAYHEAD_LINE_WIDTH,
     position: 'fixed',
     backgroundColor: '#f02c00',
 };
+const PLAYHEAD_CENTER_OFFSET = PLAYHEAD_LINE_WIDTH / 2;
+const getTimelineSliderTransform = ({ durationInFrames, frame, width, }) => {
+    const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, durationInFrames, width);
+    return `translateX(${left - PLAYHEAD_CENTER_OFFSET}px)`;
+};
 exports.redrawTimelineSliderFast = (0, react_1.createRef)();
 const TimelineSlider = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -53,7 +59,11 @@ const TimelineSliderInner = () => {
         if (!el || measuredWidth === undefined || measuredWidth === 0) {
             return;
         }
-        el.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, measuredWidth)}px)`;
+        el.style.transform = getTimelineSliderTransform({
+            durationInFrames: videoConfig.durationInFrames,
+            frame: timelinePosition,
+            width: measuredWidth,
+        });
     }, [
         timelinePosition,
         videoConfig.durationInFrames,
@@ -69,7 +79,11 @@ const TimelineSliderInner = () => {
                 if (!current) {
                     throw new Error('unexpectedly did not have ref to timelineslider');
                 }
-                current.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, (0, imperative_state_1.getCurrentDuration)(), (_b = width !== null && width !== void 0 ? width : (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0)}px)`;
+                current.style.transform = getTimelineSliderTransform({
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame,
+                    width: (_b = width !== null && width !== void 0 ? width : (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0,
+                });
             },
         };
     }, []);

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineTextContentField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly nodePath: SequencePropsSubscriptionKey | null;
+    readonly onDragEnd: () => void;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onSave: TimelineFieldOnSave;
+}>;

package/dist/components/Timeline/TimelineTextContentField.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTextContentField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RemTextarea_1 = require("../NewComposition/RemTextarea");
+const focus_inspector_field_1 = require("./focus-inspector-field");
+const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd, onDragValueChange, onSave, propStatus, }) => {
+    var _a;
+    const inputRef = (0, react_1.useRef)(null);
+    const currentValue = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '');
+    const draftRef = (0, react_1.useRef)({
+        dirty: false,
+        value: currentValue,
+    });
+    const latestRef = (0, react_1.useRef)({
+        codeValue: propStatus.codeValue,
+        onDragEnd,
+        onDragValueChange,
+        onSave,
+    });
+    latestRef.current = {
+        codeValue: propStatus.codeValue,
+        onDragEnd,
+        onDragValueChange,
+        onSave,
+    };
+    if (!draftRef.current.dirty) {
+        draftRef.current.value = currentValue;
+    }
+    const commitPending = (0, react_1.useCallback)(() => {
+        var _a;
+        var _b, _c;
+        if (!draftRef.current.dirty) {
+            return false;
+        }
+        const value = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : draftRef.current.value;
+        const savedValue = String((_c = latestRef.current.codeValue) !== null && _c !== void 0 ? _c : '');
+        draftRef.current = {
+            dirty: false,
+            value,
+        };
+        if (value === savedValue) {
+            latestRef.current.onDragEnd();
+            return false;
+        }
+        latestRef.current
+            .onSave(value)
+            .finally(() => {
+            if (!draftRef.current.dirty && draftRef.current.value === value) {
+                latestRef.current.onDragEnd();
+            }
+        })
+            .catch(() => undefined);
+        return true;
+    }, []);
+    const setInputRef = (0, react_1.useCallback)((element) => {
+        if (element === null && inputRef.current !== null) {
+            commitPending();
+        }
+        inputRef.current = element;
+        (0, focus_inspector_field_1.registerFocusInspectorFieldElement)({
+            element,
+            fieldKey: field.key,
+            nodePath,
+        });
+        (0, focus_inspector_field_1.registerCommitPendingInspectorField)({
+            commitPending: element === null ? null : commitPending,
+            fieldKey: field.key,
+            nodePath,
+        });
+    }, [commitPending, field.key, nodePath]);
+    const onChange = (0, react_1.useCallback)((event) => {
+        const { value } = event.currentTarget;
+        draftRef.current = {
+            dirty: true,
+            value,
+        };
+        latestRef.current.onDragValueChange(value);
+    }, []);
+    const onKeyDownCapture = (0, react_1.useCallback)((event) => {
+        var _a;
+        if (event.key === 'Escape') {
+            const savedValue = String((_a = latestRef.current.codeValue) !== null && _a !== void 0 ? _a : '');
+            draftRef.current = {
+                dirty: false,
+                value: savedValue,
+            };
+            event.currentTarget.value = savedValue;
+            latestRef.current.onDragEnd();
+            event.currentTarget.blur();
+        }
+    }, []);
+    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: "ok", small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onKeyDownCapture: onKeyDownCapture, style: {
+            boxSizing: 'border-box',
+            height: 40,
+            width: 160,
+        } }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
+};
+exports.TimelineTextContentField = TimelineTextContentField;

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -4,14 +4,29 @@ exports.TimelineWidthProvider = exports.TimelineWidthContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 exports.TimelineWidthContext = (0, react_1.createContext)(null);
 const TimelineWidthProvider = ({ children }) => {
-    var _a;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
+    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
+    const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const width = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        var _c, _d, _e;
+        const zoom = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+            ? ((_c = zoomMap[canvasContent.compositionId]) !== null && _c !== void 0 ? _c : timeline_zoom_1.TIMELINE_MIN_ZOOM)
+            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        const scrollableWidth = (_d = size === null || size === void 0 ? void 0 : size.width) !== null && _d !== void 0 ? _d : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (scrollableWidth === undefined) {
+            return (_e = (_b = timeline_refs_1.sliderAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _e !== void 0 ? _e : null;
+        }
+        return scrollableWidth * zoom;
+    }, [canvasContent, size === null || size === void 0 ? void 0 : size.width, zoomMap]);
+    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: width, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -1,4 +1,4 @@
-import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -10,7 +10,13 @@ export declare const deleteSelectedTimelineItem: ({ selection, sequences, overri
     clientId: string;
     confirm: ConfirmationDialogFunction;
 }) => Promise<boolean> | null;
-export declare const getTimelineSelectionAfterDeletingItems: (selections: readonly TimelineSelection[]) => readonly TimelineSelection[];
+export declare const getTimelineSelectionAfterDeletingItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }: {
+    readonly selections: readonly TimelineSelection[];
+    readonly sequences?: TSequence[] | undefined;
+    readonly overrideIdsToNodePaths?: OverrideIdToNodePaths | undefined;
+    readonly propStatuses?: PropStatuses | undefined;
+    readonly timelinePosition?: number | undefined;
+}) => readonly TimelineSelection[];
 export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = void 0;
+const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
     const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     if (duplicatedNodePathInfos.length === 0) {
@@ -150,7 +155,81 @@ const getSequenceSelectionAfterDeletingEffect = (selection) => {
         },
     };
 };
-const getTimelineSelectionAfterDeletingItems = (selections) => {
+const getEasingSelectionAfterDeletingKeyframes = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
+    var _a;
+    if (sequences === undefined ||
+        overrideIdsToNodePaths === undefined ||
+        propStatuses === undefined ||
+        timelinePosition === undefined) {
+        return null;
+    }
+    const keyframeSelections = selections.filter(isKeyframeSelection);
+    if (keyframeSelections.length !== 1) {
+        return null;
+    }
+    const [selection] = keyframeSelections;
+    if (!selection) {
+        return null;
+    }
+    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
+    if (field === null) {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    if (!track || !track.sequence.controls) {
+        return null;
+    }
+    const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+    const sourceFrame = selection.frame - track.keyframeDisplayOffset;
+    if (field.type === 'sequence') {
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
+        if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
+            !(0, update_selected_easing_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
+            return null;
+        }
+        return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+            deletedSourceFrames: [sourceFrame],
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            nodePathInfo: selection.nodePathInfo,
+            propStatus: sequencePropStatus,
+            timelinePosition,
+        });
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: field.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? effectStatus.props[field.fieldKey]
+        : null;
+    if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
+        !(0, update_selected_easing_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
+        return null;
+    }
+    return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+        deletedSourceFrames: [sourceFrame],
+        keyframeDisplayOffset: track.keyframeDisplayOffset,
+        nodePathInfo: selection.nodePathInfo,
+        propStatus: effectPropStatus,
+        timelinePosition,
+    });
+};
+const getTimelineSelectionAfterDeletingItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
+    const easingSelection = getEasingSelectionAfterDeletingKeyframes({
+        selections,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+        timelinePosition,
+    });
+    if (easingSelection !== null) {
+        return [easingSelection];
+    }
     const nextSelections = new Map();
     for (const selection of selections) {
         const nextSelection = getSequenceSelectionAfterDeletingEffect(selection);