@remotion/studio 4.0.474 → 4.0.476

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -1,21 +1,56 @@
 "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 studio_shared_1 = require("@remotion/studio-shared");
-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 install_required_package_1 = require("../../helpers/install-required-package");
 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");
+const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 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");
@@ -34,7 +69,6 @@ const labelContainerStyle = {
     display: 'flex',
     flexDirection: 'row',
     minWidth: 0,
-    gap: 4,
 };
 const effectDropHighlight = {
     backgroundColor: 'rgba(0, 155, 255, 0.16)',
@@ -103,42 +137,23 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const hasEffectDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE ||
-        type === 'application/json' ||
-        type === 'text/plain');
-};
-const getEffectDragData = (dataTransfer) => {
-    for (const type of [
-        studio_shared_1.EFFECT_DRAG_MIME_TYPE,
-        'application/json',
-        'text/plain',
-    ]) {
-        const value = dataTransfer.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseEffectDragData)(value);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return null;
-};
 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);
@@ -161,15 +176,18 @@ 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 canReorderSequence = TimelineSelection_1.SELECTION_ENABLED &&
-        previewConnected &&
+    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;
-    const canHandleSequenceDrag = TimelineSelection_1.SELECTION_ENABLED && previewConnected;
+    const canHandleSequenceDrag = previewConnected;
     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;
@@ -212,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) {
@@ -378,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 [];
@@ -463,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',
@@ -500,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 (!TimelineSelection_1.SELECTION_ENABLED || !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;
@@ -628,7 +796,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
         if (!canDropEffect ||
             isSequenceReorderDrag(e.dataTransfer) ||
-            !hasEffectDragType(e.dataTransfer)) {
+            !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
         }
         e.preventDefault();
@@ -647,43 +815,35 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             nodePath === null ||
             validatedLocation === null ||
             isSequenceReorderDrag(e.dataTransfer) ||
-            !hasEffectDragType(e.dataTransfer)) {
+            !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
         }
-        e.preventDefault();
-        e.stopPropagation();
-        setEffectDropHovered(false);
-        const dragData = getEffectDragData(e.dataTransfer);
+        const dragData = (0, effect_drag_and_drop_1.getEffectDragData)(e.dataTransfer);
         if (!dragData) {
-            (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
-            return;
-        }
-        try {
-            const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
-            await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
-            const result = await (0, call_api_1.callApi)('/api/add-effect', {
-                fileName: validatedLocation.source,
-                sequenceNodePath: nodePath,
-                effectName: dragData.effect.name,
-                effectImportPath: dragData.effect.importPath,
-                effectConfig: dragData.effect.config,
-                clientId: previewServerState.clientId,
-            });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)(`Added ${dragData.effect.name}()`, 2000);
-            }
-            else {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            if ((0, effect_drag_and_drop_1.hasExplicitEffectDragType)(e.dataTransfer)) {
+                e.preventDefault();
+                e.stopPropagation();
+                setEffectDropHovered(false);
+                (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
             }
+            return;
         }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        }
+        e.preventDefault();
+        e.stopPropagation();
+        setEffectDropHovered(false);
+        await (0, effect_drag_and_drop_1.addEffectFromDragData)({
+            dragData,
+            fileName: validatedLocation.source,
+            nodePath,
+            clientId: previewServerState.clientId,
+        });
     }, [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: TimelineSelection_1.SELECTION_ENABLED && 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.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc }) : null, jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
+    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, { 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 })
+                    ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
             ] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&

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>;
 }>;