@remotion/studio 4.0.475 → 4.0.477

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -1,13 +1,46 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
@@ -16,7 +49,9 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
+const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
+const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -102,22 +137,26 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, trackIndex, }) => {
-    var _a, _b;
-    var _c, _d;
-    const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
+const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
+    var _a, _b, _c;
+    var _d, _e;
+    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     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 { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
+    const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
     const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
         location: originalLocation,
@@ -138,7 +177,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     }, [originalLocation]);
     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 = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
+    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
     const canReorderSequence = previewConnected &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
@@ -146,6 +185,10 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
+    const disableInteractivityDisabled = !previewConnected ||
+        !sequence.showInTimeline ||
+        !nodePath ||
+        !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
     const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
             return;
@@ -188,6 +231,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
     }, [confirm, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
+        if (disableInteractivityDisabled ||
+            !nodePath ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        (0, disable_sequence_interactivity_1.disableSequenceInteractivity)({
+            fileName: validatedLocation.source,
+            nodePath,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+        });
+    }, [
+        disableInteractivityDisabled,
+        nodePath,
+        previewServerState,
+        setPropStatuses,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
     const getSequenceDropTarget = (0, react_1.useCallback)((e) => {
         const dragData = getSequenceReorderDragData(e.dataTransfer);
         if (!dragData) {
@@ -354,139 +417,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         ? sequence.src
         : null;
     const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!previewConnected) {
-            return [];
-        }
-        const editorName = window.remotion_editorName;
-        const { documentationLink } = sequence;
-        return [
-            editorName
-                ? {
-                    type: 'item',
-                    id: 'show-in-editor',
-                    keyHint: null,
-                    label: `Show in ${editorName}`,
-                    leftItem: null,
-                    disabled: !canOpenInEditor,
-                    onClick: () => {
-                        openInEditor();
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'show-in-editor',
-                }
-                : null,
-            {
-                type: 'item',
-                id: 'copy-file-location',
-                keyHint: null,
-                label: 'Copy file location',
-                leftItem: null,
-                disabled: !fileLocation,
-                onClick: () => {
-                    if (!fileLocation) {
-                        return;
-                    }
-                    navigator.clipboard
-                        .writeText(fileLocation)
-                        .then(() => {
-                        (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
-                    })
-                        .catch((err) => {
-                        (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
-                    });
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'copy-file-location',
-            },
-            documentationLink
-                ? {
-                    type: 'item',
-                    id: 'open-component-docs',
-                    keyHint: null,
-                    label: 'Open component docs',
-                    leftItem: null,
-                    disabled: false,
-                    onClick: () => {
-                        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'open-component-docs',
-                }
-                : null,
-            assetLinkInfo
-                ? {
-                    type: 'item',
-                    id: 'show-asset',
-                    keyHint: null,
-                    label: 'Show asset',
-                    leftItem: null,
-                    disabled: false,
-                    onClick: () => {
-                        (0, timeline_asset_link_1.openTimelineAssetLink)(assetLinkInfo, selectAsset);
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'show-asset',
-                }
-                : null,
-            documentationLink
-                ? {
-                    type: 'divider',
-                    id: 'open-component-docs-divider',
-                }
-                : null,
-            {
-                type: 'item',
-                id: 'duplicate-sequence',
-                keyHint: null,
-                label: 'Duplicate',
-                leftItem: null,
-                disabled: duplicateDisabled,
-                onClick: () => {
-                    if (duplicateDisabled) {
-                        return;
-                    }
-                    onDuplicateSequenceFromSource();
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'duplicate-sequence',
-            },
-            {
-                type: 'item',
-                id: 'delete-sequence',
-                keyHint: null,
-                label: 'Delete',
-                leftItem: null,
-                disabled: deleteDisabled,
-                onClick: () => {
-                    if (deleteDisabled) {
-                        return;
-                    }
-                    onDeleteSequenceFromSource();
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'delete-sequence',
-            },
-        ].filter(no_react_1.NoReactInternals.truthy);
-    }, [
-        assetLinkInfo,
-        deleteDisabled,
-        duplicateDisabled,
-        fileLocation,
-        onDeleteSequenceFromSource,
-        onDuplicateSequenceFromSource,
-        canOpenInEditor,
-        openInEditor,
-        previewConnected,
-        selectAsset,
-        sequence,
-    ]);
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         if (nodePathInfo === null) {
@@ -511,6 +441,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             : 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'
@@ -520,6 +451,14 @@ 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 ||
@@ -588,10 +527,223 @@ 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 canRenameSelectedSequence = canRenameThisSequence &&
+        selected &&
+        selectedItems.length === 1 &&
+        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) === 'sequence';
+    const onCancelRenaming = (0, react_1.useCallback)(() => {
+        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,
+    ]);
+    react_1.default.useEffect(() => {
+        if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+            setIsRenaming(false);
+            return;
+        }
+        const onKeyDown = (e) => {
+            if (!isHighestContext) {
+                return;
+            }
+            const commandKey = window.navigator.platform.startsWith('Mac')
+                ? e.metaKey
+                : e.ctrlKey;
+            if (commandKey || e.key.toLowerCase() !== 'enter') {
+                return;
+            }
+            if (document.activeElement instanceof HTMLInputElement ||
+                document.activeElement instanceof HTMLTextAreaElement) {
+                return;
+            }
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            setIsRenaming(true);
+        };
+        window.addEventListener('keydown', onKeyDown, true);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown, true);
+        };
+    }, [canRenameSelectedSequence, isHighestContext]);
+    const onRenameSequence = (0, react_1.useCallback)(() => {
+        if (!canRenameThisSequence) {
+            return;
+        }
+        setIsRenaming(true);
+    }, [canRenameThisSequence]);
+    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
+    const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
+        typeof freezeStatus.codeValue === 'number';
+    const canToggleFreeze = previewConnected &&
+        Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        freezeStatus !== undefined &&
+        freezeStatus !== null &&
+        freezeStatus.status === 'static';
+    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
+        if (!canToggleFreeze ||
+            !sequence.controls ||
+            !nodePath ||
+            !validatedLocation ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
+        const maxFrame = Number.isFinite(sequence.duration)
+            ? Math.max(0, sequence.duration - 1)
+            : rawFreezeFrame;
+        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
+        const remove = isFrozen;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: 'freeze',
+                    value: remove ? null : freezeFrame,
+                    defaultValue: null,
+                    schema: sequence.controls.schema,
+                },
+            ],
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
+            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
+        });
+    }, [
+        canToggleFreeze,
+        isFrozen,
+        nodePath,
+        previewServerState,
+        sequence.controls,
+        sequence.duration,
+        sequence.from,
+        sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedLocation,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        if (!previewConnected) {
+            return [];
+        }
+        return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
+            assetLinkInfo,
+            canOpenInEditor,
+            deleteDisabled,
+            disableInteractivityDisabled,
+            duplicateDisabled,
+            fileLocation,
+            includeSourceEditItems: true,
+            onDeleteSequenceFromSource,
+            onDisableSequenceInteractivity,
+            onDuplicateSequenceFromSource,
+            openInEditor,
+            originalLocation,
+            selectAsset,
+            sequence,
+            sourceActions: [
+                {
+                    type: 'item',
+                    id: 'rename-sequence',
+                    keyHint: null,
+                    label: 'Rename...',
+                    leftItem: null,
+                    disabled: !canRenameThisSequence,
+                    onClick: () => {
+                        onRenameSequence();
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'rename-sequence',
+                },
+                {
+                    type: 'item',
+                    id: 'toggle-freeze-frame',
+                    keyHint: null,
+                    label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
+                    leftItem: null,
+                    disabled: !canToggleFreeze,
+                    onClick: () => {
+                        onToggleFreezeFrame();
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'toggle-freeze-frame',
+                },
+            ],
+        });
+    }, [
+        assetLinkInfo,
+        canOpenInEditor,
+        canRenameThisSequence,
+        canToggleFreeze,
+        deleteDisabled,
+        disableInteractivityDisabled,
+        duplicateDisabled,
+        fileLocation,
+        isFrozen,
+        onDeleteSequenceFromSource,
+        onDisableSequenceInteractivity,
+        onDuplicateSequenceFromSource,
+        onRenameSequence,
+        onToggleFreezeFrame,
+        openInEditor,
+        originalLocation,
+        previewConnected,
+        selectAsset,
+        sequence,
+    ]);
     const canDropEffect = previewServerState.type === 'connected' &&
         nodePath !== null &&
         validatedLocation !== null &&
-        ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
+        ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
         if (!sequenceDropIndicator) {
             return null;
@@ -647,7 +799,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
     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 ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { 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(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import type { TSequence } from 'remotion';
 export declare const TimelineSequenceName: React.FC<{
-    readonly sequence: TSequence;
+    readonly displayName: string;
     readonly selected: boolean;
     readonly containsSelection: boolean;
+    readonly editing: boolean;
+    readonly onCancelEditing: () => void;
+    readonly onSaveName: (name: string) => Promise<void>;
 }>;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -5,13 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const TimelineSelection_1 = require("./TimelineSelection");
 const MAX_DISPLAY_NAME_LENGTH = 1000;
+const MAX_RENAME_INPUT_WIDTH = 240;
+const RENAME_INPUT_CLASS_NAME = 'remotion-timeline-sequence-name-input';
 const getTruncatedDisplayName = (displayName) => {
     if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
         return displayName.slice(0, MAX_DISPLAY_NAME_LENGTH) + '...';
     }
     return displayName;
 };
-const TimelineSequenceName = ({ sequence, selected, containsSelection }) => {
+const TimelineSequenceName = ({ displayName, 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);
     const style = (0, react_1.useMemo)(() => {
         return {
             alignItems: 'center',
@@ -30,7 +35,67 @@ const TimelineSequenceName = ({ sequence, selected, containsSelection }) => {
                 : undefined,
         };
     }, [selected, containsSelection]);
-    const text = getTruncatedDisplayName(sequence.displayName) || '<Sequence>';
+    const inputStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            background: 'transparent',
+            border: 0,
+            color: (0, TimelineSelection_1.getTimelineColor)(false, false),
+            fontFamily: 'inherit',
+            fontSize: 12,
+            outline: 'none',
+            paddingBottom: 0,
+            paddingTop: 0,
+            boxSizing: 'border-box',
+            maxWidth: MAX_RENAME_INPUT_WIDTH,
+            minWidth: 0,
+            userSelect: 'text',
+            WebkitUserSelect: 'text',
+        };
+    }, [style]);
+    const text = getTruncatedDisplayName(displayName) || '<Sequence>';
+    (0, react_1.useEffect)(() => {
+        if (!editing) {
+            setDraftName(displayName);
+            return;
+        }
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        input.focus();
+        const basenameIndex = displayName.lastIndexOf('.');
+        const selectionEnd = basenameIndex > 0 ? basenameIndex : displayName.length;
+        input.setSelectionRange(0, selectionEnd);
+    }, [displayName, editing]);
+    const save = (0, react_1.useCallback)(() => {
+        onSaveName(draftName).catch(() => undefined);
+    }, [draftName, onSaveName]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Escape') {
+            cancelNextBlurRef.current = true;
+            e.preventDefault();
+            onCancelEditing();
+            return;
+        }
+        if (e.key === 'Enter') {
+            cancelNextBlurRef.current = true;
+            e.preventDefault();
+            save();
+        }
+    }, [onCancelEditing, save]);
+    const onBlur = (0, react_1.useCallback)(() => {
+        if (cancelNextBlurRef.current) {
+            cancelNextBlurRef.current = false;
+            return;
+        }
+        save();
+    }, [save]);
+    if (editing) {
+        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx("style", { children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: rgba(255, 255, 255, 0.72); color: black; }` }), jsx_runtime_1.jsx("input", { ref: inputRef, className: RENAME_INPUT_CLASS_NAME, value: draftName, onChange: (e) => setDraftName(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, size: Math.max(1, draftName.length), style: inputStyle })
+            ] }));
+    }
     return (jsx_runtime_1.jsx("div", { title: text, style: style, children: text }));
 };
 exports.TimelineSequenceName = TimelineSequenceName;

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -132,7 +132,7 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin" });
     }
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
         ] }));
 };
 exports.TimelineTransformOriginField = TimelineTransformOriginField;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -101,7 +101,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         }
     }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
         ] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -120,7 +120,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [propStatus, onSave, dragX, codeX]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
         ] }));
 };
 exports.TimelineUvCoordinateField = TimelineUvCoordinateField;