@remotion/studio 4.0.475 → 4.0.476

package/dist/components/Timeline/TimelineRotationField.js

@@ -16,11 +16,26 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         }
         return typeof effectiveValue === 'number' ? effectiveValue : 0;
     }, [effectiveValue, isCssRotation]);
+    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
+        field.fieldSchema.type === 'rotation-degrees'
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const min = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
+        : Infinity;
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    }), [configuredStep]);
     const serializeValue = (0, react_1.useCallback)((value) => {
         return isCssRotation
-            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value)
+            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
             : (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-    }, [isCssRotation]);
+    }, [decimalPlaces, isCssRotation]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
         onDragValueChange(serializeValue(newVal));
@@ -50,21 +65,6 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             }
         }
     }, [propStatus, onSave, serializeValue]);
-    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
-        field.fieldSchema.type === 'rotation-degrees'
-        ? field.fieldSchema.step
-        : undefined;
-    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
-    const min = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
-        : -Infinity;
-    const max = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-        : Infinity;
-    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 1,
-        step: configuredStep,
-    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
         const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
             decimalPlaces,

package/dist/components/Timeline/TimelineScaleField.js

@@ -99,7 +99,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
     const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 2,
+        defaultDecimalPlaces: 3,
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -1,13 +1,47 @@
 "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,6 +50,7 @@ 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 save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
@@ -103,19 +138,22 @@ 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;
+    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 { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
@@ -138,7 +176,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 +184,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 +230,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,6 +416,205 @@ 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 isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
+    const onToggleExpand = (0, react_1.useCallback)(() => {
+        if (nodePathInfo === null) {
+            return;
+        }
+        toggleTrack(nodePathInfo);
+    }, [nodePathInfo, toggleTrack]);
+    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
+        if (!canOpenInEditor) {
+            return;
+        }
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
+        e.stopPropagation();
+        openInEditor();
+    }, [canOpenInEditor, openInEditor]);
+    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'
+            ? codeHiddenStatus.codeValue
+            : undefined;
+        const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
+        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 ||
+            !validatedLocation ||
+            !propStatusesForOverride ||
+            !codeHiddenStatus ||
+            codeHiddenStatus.status !== 'static' ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        const newValue = type !== 'enable';
+        const { schema } = sequence.controls;
+        const fieldSchema = schema.hidden;
+        const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
+            ? JSON.stringify(fieldSchema.default)
+            : null;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: 'hidden',
+                    value: newValue,
+                    defaultValue,
+                    schema,
+                },
+            ],
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            undoLabel: newValue ? 'Hide sequence' : 'Show sequence',
+            redoLabel: newValue ? 'Hide sequence again' : 'Show sequence again',
+        });
+    }, [
+        codeHiddenStatus,
+        propStatusesForOverride,
+        nodePath,
+        previewServerState,
+        sequence.controls,
+        setPropStatuses,
+        validatedLocation,
+    ]);
+    const outerHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM, [sequence.type]);
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            height: timeline_layout_1.TIMELINE_LIST_ITEM_ROW_HEIGHT,
+            color: 'white',
+            fontFamily: 'Arial, Helvetica, sans-serif',
+            wordBreak: 'break-all',
+            textAlign: 'left',
+            flexShrink: 0,
+        };
+    }, []);
+    const rowStyle = (0, react_1.useMemo)(() => {
+        return effectDropHovered
+            ? {
+                ...inner,
+                ...effectDropHighlight,
+            }
+            : inner;
+    }, [effectDropHovered, inner]);
+    const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
+    const canToggleVisibility = previewConnected &&
+        Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        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 contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -439,6 +700,34 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     id: 'open-component-docs-divider',
                 }
                 : null,
+            {
+                type: 'item',
+                id: 'rename-sequence',
+                keyHint: 'Enter',
+                label: 'Rename...',
+                leftItem: null,
+                disabled: !canRenameThisSequence,
+                onClick: () => {
+                    onRenameSequence();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'rename-sequence',
+            },
+            {
+                type: 'item',
+                id: 'disable-interactivity',
+                keyHint: null,
+                label: 'Disable interactivity',
+                leftItem: null,
+                disabled: disableInteractivityDisabled,
+                onClick: () => {
+                    onDisableSequenceInteractivity();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'disable-interactivity',
+            },
             {
                 type: 'item',
                 id: 'duplicate-sequence',
@@ -476,122 +765,25 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         ].filter(no_react_1.NoReactInternals.truthy);
     }, [
         assetLinkInfo,
+        canOpenInEditor,
+        canRenameThisSequence,
         deleteDisabled,
+        disableInteractivityDisabled,
         duplicateDisabled,
         fileLocation,
         onDeleteSequenceFromSource,
+        onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
-        canOpenInEditor,
+        onRenameSequence,
         openInEditor,
         previewConnected,
         selectAsset,
         sequence,
     ]);
-    const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
-    const onToggleExpand = (0, react_1.useCallback)(() => {
-        if (nodePathInfo === null) {
-            return;
-        }
-        toggleTrack(nodePathInfo);
-    }, [nodePathInfo, toggleTrack]);
-    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!canOpenInEditor) {
-            return;
-        }
-        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
-            e.stopPropagation();
-            return;
-        }
-        e.stopPropagation();
-        openInEditor();
-    }, [canOpenInEditor, openInEditor]);
-    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 isItemHidden = (0, react_1.useMemo)(() => {
-        var _a;
-        const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
-            ? codeHiddenStatus.codeValue
-            : undefined;
-        const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
-        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 onToggleVisibility = (0, react_1.useCallback)((type) => {
-        if (!sequence.controls ||
-            !nodePath ||
-            !validatedLocation ||
-            !propStatusesForOverride ||
-            !codeHiddenStatus ||
-            codeHiddenStatus.status !== 'static' ||
-            previewServerState.type !== 'connected') {
-            return;
-        }
-        const newValue = type !== 'enable';
-        const { schema } = sequence.controls;
-        const fieldSchema = schema.hidden;
-        const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
-            ? JSON.stringify(fieldSchema.default)
-            : null;
-        (0, save_sequence_prop_1.saveSequenceProps)({
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: 'hidden',
-                    value: newValue,
-                    defaultValue,
-                    schema,
-                },
-            ],
-            setPropStatuses,
-            clientId: previewServerState.clientId,
-            undoLabel: newValue ? 'Hide sequence' : 'Show sequence',
-            redoLabel: newValue ? 'Hide sequence again' : 'Show sequence again',
-        });
-    }, [
-        codeHiddenStatus,
-        propStatusesForOverride,
-        nodePath,
-        previewServerState,
-        sequence.controls,
-        setPropStatuses,
-        validatedLocation,
-    ]);
-    const outerHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM, [sequence.type]);
-    const inner = (0, react_1.useMemo)(() => {
-        return {
-            height: timeline_layout_1.TIMELINE_LIST_ITEM_ROW_HEIGHT,
-            color: 'white',
-            fontFamily: 'Arial, Helvetica, sans-serif',
-            wordBreak: 'break-all',
-            textAlign: 'left',
-            flexShrink: 0,
-        };
-    }, []);
-    const rowStyle = (0, react_1.useMemo)(() => {
-        return effectDropHovered
-            ? {
-                ...inner,
-                ...effectDropHighlight,
-            }
-            : inner;
-    }, [effectDropHovered, inner]);
-    const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-    const canToggleVisibility = previewConnected &&
-        Boolean(sequence.controls) &&
-        nodePath !== null &&
-        validatedLocation !== null &&
-        codeHiddenStatus !== undefined &&
-        codeHiddenStatus !== null &&
-        codeHiddenStatus.status === 'static';
     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 +839,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;