@remotion/studio 4.0.473 → 4.0.475

package/dist/components/Timeline/TimelineSequence.js

@@ -62,19 +62,28 @@ const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
 };
 const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, onMoveDragPointerDown, }) => {
     var _a, _b;
-    const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const ref = (0, react_1.useRef)(null);
+    const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
-            onSelect({
+            if ((0, TimelineSelection_1.shouldSelectTimelineRowOnPointerDown)({
+                selected,
                 shiftKey: e.shiftKey,
-                toggleKey: e.metaKey || e.ctrlKey,
-            });
-            if (TimelineSelection_1.TIMELINE_TOP_DRAG && fromCanUpdate) {
+                metaKey: e.metaKey,
+                ctrlKey: e.ctrlKey,
+            })) {
+                onSelect({
+                    shiftKey: e.shiftKey,
+                    toggleKey: e.metaKey || e.ctrlKey,
+                });
+            }
+            if (fromCanUpdate) {
                 onMoveDragPointerDown(e);
             }
         }
-    }, [fromCanUpdate, onMoveDragPointerDown, onSelect]);
+    }, [fromCanUpdate, onMoveDragPointerDown, onSelect, selected]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
     const sequenceFrame = relativeFrame + sequenceFrameOffset;
@@ -94,7 +103,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
             opacity: isInRange ? 1 : 0.5,
         };
     }, [isInRange, style]);
-    return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -151,15 +160,15 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
-    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+    const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
-            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
-    }, [codeValues, nodePath]);
-    const durationCanUpdate = Boolean(((_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
-    const fromCanUpdate = Boolean(((_b = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    }, [propStatuses, nodePath]);
+    const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+    const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
@@ -208,8 +217,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    const showRightEdgeDragHandle = TimelineSelection_1.TIMELINE_TOP_DRAG &&
-        (s.type === 'sequence' || s.type === 'image') &&
+    const showRightEdgeDragHandle = (s.type === 'sequence' || s.type === 'image') &&
         !s.loopDisplay &&
         !s.isInsideSeries &&
         nodePath !== null &&

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -2,18 +2,18 @@
 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 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 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 duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -34,7 +34,6 @@ const labelContainerStyle = {
     display: 'flex',
     flexDirection: 'row',
     minWidth: 0,
-    gap: 4,
 };
 const effectDropHighlight = {
     backgroundColor: 'rgba(0, 155, 255, 0.16)',
@@ -73,6 +72,9 @@ const sequenceReorderRejectionStyle = {
 const hasSequenceReorderDragType = (dataTransfer) => {
     return Array.from(dataTransfer.types).includes(SEQUENCE_REORDER_MIME_TYPE);
 };
+const isSequenceReorderDrag = (dataTransfer) => {
+    return (currentSequenceDrag !== null || hasSequenceReorderDragType(dataTransfer));
+};
 const getSequenceReorderDragData = (dataTransfer) => {
     if (currentSequenceDrag) {
         return currentSequenceDrag;
@@ -100,28 +102,6 @@ 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;
@@ -130,8 +110,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
@@ -159,11 +139,10 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     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 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;
@@ -516,7 +495,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
     const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!TimelineSelection_1.SELECTION_ENABLED || !canOpenInEditor) {
+        if (!canOpenInEditor) {
             return;
         }
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
@@ -526,26 +505,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         e.stopPropagation();
         openInEditor();
     }, [canOpenInEditor, openInEditor]);
-    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+    const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
-            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
-    }, [codeValues, nodePath]);
-    const codeHiddenStatus = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.hidden;
+    }, [propStatuses, nodePath]);
+    const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
-        const codeValue = codeHiddenStatus && codeHiddenStatus.status === 'static'
+        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 = (codeValue !== null && codeValue !== void 0 ? codeValue : runtimeValue);
+        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 ||
-            !codeValuesForOverride ||
+            !propStatusesForOverride ||
             !codeHiddenStatus ||
             codeHiddenStatus.status !== 'static' ||
             previewServerState.type !== 'connected') {
@@ -568,18 +547,18 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     schema,
                 },
             ],
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
             undoLabel: newValue ? 'Hide sequence' : 'Show sequence',
             redoLabel: newValue ? 'Hide sequence again' : 'Show sequence again',
         });
     }, [
         codeHiddenStatus,
-        codeValuesForOverride,
+        propStatusesForOverride,
         nodePath,
         previewServerState,
         sequence.controls,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const outerHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM, [sequence.type]);
@@ -623,7 +602,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         };
     }, [sequenceDropIndicator]);
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
-        if (!canDropEffect || !hasEffectDragType(e.dataTransfer)) {
+        if (!canDropEffect ||
+            isSequenceReorderDrag(e.dataTransfer) ||
+            !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
         }
         e.preventDefault();
@@ -640,43 +621,37 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         if (!canDropEffect ||
             previewServerState.type !== 'connected' ||
             nodePath === null ||
-            validatedLocation === null) {
+            validatedLocation === null ||
+            isSequenceReorderDrag(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, { sequence: sequence, selected: selected, containsSelection: containsSelection }), 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.js

@@ -12,19 +12,7 @@ const getTruncatedDisplayName = (displayName) => {
     return displayName;
 };
 const TimelineSequenceName = ({ sequence, selected, containsSelection }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { documentationLink } = sequence;
-    const hoverable = !TimelineSelection_1.SELECTION_ENABLED && documentationLink !== null;
-    const onClick = (0, react_1.useCallback)(() => {
-        if (documentationLink === null) {
-            return;
-        }
-        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-    }, [documentationLink]);
-    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
-    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const style = (0, react_1.useMemo)(() => {
-        const hoverEffect = hovered && hoverable;
         return {
             alignItems: 'center',
             alignSelf: 'stretch',
@@ -33,18 +21,16 @@ const TimelineSequenceName = ({ sequence, selected, containsSelection }) => {
             fontSize: 12,
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
-            overflow: 'hidden',
             color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
             userSelect: 'none',
             WebkitUserSelect: 'none',
-            textDecoration: hoverEffect ? 'underline' : 'none',
-            cursor: hoverEffect ? 'pointer' : undefined,
+            textDecoration: 'none',
             boxShadow: containsSelection && !selected
                 ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                 : undefined,
         };
-    }, [hovered, hoverable, selected, containsSelection]);
+    }, [selected, containsSelection]);
     const text = getTruncatedDisplayName(sequence.displayName) || '<Sequence>';
-    return (jsx_runtime_1.jsx("div", { onPointerEnter: hoverable ? onPointerEnter : undefined, onPointerLeave: hoverable ? onPointerLeave : undefined, title: documentationLink ? `Open documentation: ${documentationLink}` : text, style: style, onClick: hoverable ? onClick : undefined, children: text }));
+    return (jsx_runtime_1.jsx("div", { title: text, style: style, children: text }));
 };
 exports.TimelineSequenceName = TimelineSequenceName;

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -37,7 +37,7 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
+const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -47,12 +47,12 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             : ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue,
+        propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -67,11 +67,11 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             : null;
         const stringifiedValue = JSON.stringify(value);
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
-        if (value === codeValue.codeValue) {
+        if (value === propStatus.codeValue) {
             return Promise.resolve();
         }
         if (defaultValue === stringifiedValue &&
-            codeValue.codeValue === undefined) {
+            propStatus.codeValue === undefined) {
             return Promise.resolve();
         }
         return (0, save_sequence_prop_1.saveSequenceProps)({
@@ -85,20 +85,20 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
                     schema,
                 },
             ],
-            setCodeValues,
+            setPropStatuses,
             clientId,
             undoLabel: `Update ${fieldLabel}`,
             redoLabel: `Update ${fieldLabel} again`,
         });
     }, [
-        codeValue,
+        propStatus,
         clientId,
         field.description,
         field.fieldSchema.default,
         field.key,
         nodePath,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const onDragValueChange = (0, react_1.useCallback)((value) => {
@@ -113,36 +113,36 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         }
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
-    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
 };
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, }) => {
     var _a, _b;
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
-    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
+    const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
+    const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [getDragOverrides, nodePath, field.key]);
-    const keyframeControls = codeValue !== null &&
+    const keyframeControls = propStatus !== null &&
         (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
-            propStatus: codeValue,
+            propStatus,
             selected: selection.selected,
             keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
                 schema,
                 key: field.key,
             }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: codeValue, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null })) : null;
+        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo })) : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -150,24 +150,24 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         };
     }, [field.rowHeight]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
-        if (!codeValue || codeValue.status === 'computed') {
+        if (!propStatus || propStatus.status === 'computed') {
             return false;
         }
         return isResettableStatus({
-            status: codeValue,
+            status: propStatus,
             defaultValue: field.fieldSchema.default,
         });
-    }, [codeValue, field.fieldSchema.default]);
+    }, [propStatus, field.fieldSchema.default]);
     const canPerformReset = previewServerState.type === 'connected' &&
-        codeValue !== null &&
-        codeValue.status !== 'computed';
+        propStatus !== null &&
+        propStatus.status !== 'computed';
     const canShowReset = canPerformReset && field.fieldSchema.default !== undefined;
     const onReset = (0, react_1.useCallback)(() => {
         var _a;
         if (!canShowReset ||
             !canResetToDefault ||
             previewServerState.type !== 'connected' ||
-            codeValue === null) {
+            propStatus === null) {
             return;
         }
         const defaultValue = field.fieldSchema.default !== undefined
@@ -185,7 +185,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                     schema,
                 },
             ],
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
             undoLabel: `Reset ${fieldLabel}`,
             redoLabel: `Reapply ${fieldLabel}`,
@@ -199,9 +199,9 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         nodePath,
         previewServerState,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
-        codeValue,
+        propStatus,
     ]);
     const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
         if (!clientId) {
@@ -214,7 +214,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             sourceFrame,
             value,
             schema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -222,25 +222,25 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         field.key,
         nodePath,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
     ]);
     const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
-        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+        if (propStatus === null || !isKeyframedStatus(propStatus)) {
             throw new Error('Expected keyframed status');
         }
         setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
-            status: codeValue,
+            status: propStatus,
             frame: jsxFrame,
             value,
         }));
-    }, [codeValue, field.key, jsxFrame, nodePath, setDragOverrides]);
+    }, [propStatus, field.key, jsxFrame, nodePath, setDragOverrides]);
     const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
     const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
         var _a;
-        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+        if (propStatus === null || !isKeyframedStatus(propStatus)) {
             return;
         }
         setSelectedModal({
@@ -249,12 +249,12 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             nodePath,
             fieldKey: field.key,
             fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
-            status: codeValue,
+            status: propStatus,
             schema,
             effectIndex: null,
         });
     }, [
-        codeValue,
+        propStatus,
         field.description,
         field.key,
         nodePath,
@@ -277,7 +277,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-        if (codeValue !== null && isKeyframedStatus(codeValue)) {
+        if (propStatus !== null && isKeyframedStatus(propStatus)) {
             values.push({
                 type: 'item',
                 id: 'keyframe-settings-sequence-field',
@@ -294,16 +294,16 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         return values;
     }, [
         canShowReset,
-        codeValue,
+        propStatus,
         onOpenKeyframeSettings,
         onReset,
         previewServerState,
     ]);
-    if (codeValue === null) {
+    if (propStatus === null) {
         return null;
     }
     const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
-            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(codeValue) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: codeValue, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : codeValue.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CodeValues, OverrideIdToNodePaths, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -29,19 +29,19 @@ export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames
     readonly targets: readonly TimelineSequenceFromDragTarget[];
     readonly deltaFrames: number;
 }) => SaveSequencePropChange[];
-export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
-export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;