@remotion/studio 4.0.469 → 4.0.471

package/dist/components/Timeline/{TimelineListItem.js → TimelineSequenceItem.js}

@@ -1,16 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = void 0;
+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 timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
@@ -29,7 +32,34 @@ const labelContainerStyle = {
     minWidth: 0,
     gap: 4,
 };
-const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
+const effectDropHighlight = {
+    backgroundColor: 'rgba(0, 155, 255, 0.16)',
+    outline: '1px solid rgba(0, 155, 255, 0.75)',
+    outlineOffset: -1,
+};
+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 }) => {
     var _a;
     var _b;
     const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
@@ -42,7 +72,12 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
+    const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
+    const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
+        location: originalLocation,
+        root: window.remotion_cwd,
+    }), [originalLocation]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -59,35 +94,12 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
-    const onDuplicateSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+    const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
             return;
         }
-        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const message = 'This sequence is programmatically duplicated ' +
-                nodePathInfo.numberOfSequencesWithThisNodePath +
-                ' times in the code. Duplicating inserts another copy. Continue?';
-            // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-            if (!window.confirm(message)) {
-                return;
-            }
-        }
-        try {
-            const result = await (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
-                fileName: validatedLocation.source,
-                nodePath: nodePath.nodePath,
-            });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Duplicated sequence in source file', 2000);
-            }
-            else {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        }
-    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo]).catch(() => undefined);
+    }, [nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
@@ -103,8 +115,12 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
         }
         try {
             const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
-                fileName: validatedLocation.source,
-                nodePath: nodePath.nodePath,
+                nodes: [
+                    {
+                        fileName: validatedLocation.source,
+                        nodePath: nodePath.nodePath,
+                    },
+                ],
             });
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
@@ -146,6 +162,30 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
                     value: 'show-in-editor',
                 }
                 : null,
+            {
+                type: 'item',
+                id: 'copy-file-location',
+                keyHint: null,
+                label: 'Copy file location',
+                leftItem: null,
+                disabled: !fileLocation,
+                onClick: () => {
+                    if (!fileLocation) {
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(fileLocation)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'copy-file-location',
+            },
             documentationLink
                 ? {
                     type: 'item',
@@ -223,6 +263,7 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
         assetLinkInfo,
         deleteDisabled,
         duplicateDisabled,
+        fileLocation,
         onDeleteSequenceFromSource,
         onDuplicateSequenceFromSource,
         canOpenInEditor,
@@ -242,6 +283,10 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
         if (!TimelineSelection_1.SELECTION_ENABLED || !canOpenInEditor) {
             return;
         }
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
         e.stopPropagation();
         openInEditor();
     }, [canOpenInEditor, openInEditor]);
@@ -306,6 +351,14 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
             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) &&
@@ -314,7 +367,60 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.canUpdate;
-    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: inner, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDoubleClick: TimelineSelection_1.SELECTION_ENABLED && canOpenInEditor
+    const canDropEffect = previewServerState.type === 'connected' &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        sequence.type !== 'audio';
+    const onEffectDragOver = (0, react_1.useCallback)((e) => {
+        if (!canDropEffect || !hasEffectDragType(e.dataTransfer)) {
+            return;
+        }
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+        setEffectDropHovered(true);
+    }, [canDropEffect]);
+    const onEffectDragLeave = (0, react_1.useCallback)((e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setEffectDropHovered(false);
+    }, []);
+    const onEffectDrop = (0, react_1.useCallback)(async (e) => {
+        if (!canDropEffect ||
+            previewServerState.type !== 'connected' ||
+            nodePath === null ||
+            validatedLocation === null) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setEffectDropHovered(false);
+        const dragData = getEffectDragData(e.dataTransfer);
+        if (!dragData) {
+            (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
+            return;
+        }
+        try {
+            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);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [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 })
@@ -323,6 +429,6 @@ const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null] }));
 };
-exports.TimelineListItem = TimelineListItem;
+exports.TimelineSequenceItem = TimelineSequenceItem;

package/dist/components/Timeline/{TimelineFieldRow.d.ts → TimelineSequencePropItem.d.ts}

@@ -3,11 +3,12 @@ import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
-export declare const TimelineFieldRow: React.FC<{
+export declare const TimelineSequencePropItem: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly schema: SequenceSchema;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/{TimelineFieldRow.js → TimelineSequencePropItem.js}

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldRow = void 0;
+exports.TimelineSequencePropItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const ContextMenu_1 = require("../ContextMenu");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
+const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
@@ -86,22 +89,95 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     }, [clearDragOverrides, nodePath]);
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineFieldRow = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema }) => {
+const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, }) => {
     var _a, _b;
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     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 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 &&
+        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
+            propStatus: codeValue,
+            selected: selection.selected,
+        }) ? (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;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
+    const isNonDefault = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!codeValue || !codeValue.canUpdate) {
+            return false;
+        }
+        const effectiveCodeValue = (_a = codeValue.codeValue) !== null && _a !== void 0 ? _a : field.fieldSchema.default;
+        return (JSON.stringify(effectiveCodeValue) !==
+            JSON.stringify(field.fieldSchema.default));
+    }, [codeValue, field.fieldSchema.default]);
+    const canPerformReset = previewServerState.type === 'connected' &&
+        codeValue !== null &&
+        codeValue.canUpdate;
+    const onReset = (0, react_1.useCallback)(() => {
+        if (!canPerformReset ||
+            previewServerState.type !== 'connected' ||
+            codeValue === null ||
+            !isNonDefault) {
+            return;
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        (0, save_sequence_prop_1.saveSequenceProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            value: field.fieldSchema.default,
+            defaultValue,
+            schema,
+            setCodeValues,
+            clientId: previewServerState.clientId,
+        });
+    }, [
+        canPerformReset,
+        field.fieldSchema.default,
+        field.key,
+        isNonDefault,
+        nodePath,
+        previewServerState,
+        schema,
+        setCodeValues,
+        validatedLocation.source,
+        codeValue,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'reset-sequence-field',
+                keyHint: null,
+                label: 'Reset',
+                leftItem: null,
+                disabled: !canPerformReset,
+                onClick: onReset,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'reset-sequence-field',
+            },
+        ];
+    }, [canPerformReset, onReset]);
     if (codeValue === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), 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 }), codeValue.canUpdate ? (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 }) }))] }));
+    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 }), codeValue.canUpdate ? (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 }) })) : codeValue.reason === 'keyframed' ? (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 }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
-exports.TimelineFieldRow = TimelineFieldRow;
+exports.TimelineSequencePropItem = TimelineSequencePropItem;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -14,7 +14,6 @@ const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
-    boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
     position: 'absolute',
     backgroundColor: colors_1.TIMELINE_BACKGROUND,
     top: 0,

package/dist/components/Timeline/TimelineTrack.js

@@ -42,10 +42,12 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequence_1 = require("./TimelineSequence");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const TimelineTrackUnmemoized = ({ track }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerConnected = previewServerState.type === 'connected';
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(track.nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(track.nodePathInfo);
     const layerStyle = (0, react_1.useMemo)(() => ({
@@ -58,7 +60,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         getIsExpanded(track.nodePathInfo);
     const showRowHighlight = track.nodePathInfo !== null && (rowSelected || containsSelection);
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [showRowHighlight ? (jsx_runtime_1.jsx("div", { style: TimelineSelection_1.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [showRowHighlight && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

package/dist/components/Timeline/TimelineTranslateField.js

@@ -5,20 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
+const timeline_translate_utils_1 = require("./timeline-translate-utils");
 const leftDraggerStyle = {
     paddingLeft: 0,
 };
 const rightDraggerStyle = {
     paddingRight: 0,
 };
-const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
-const parseTranslate = (value) => {
-    const m = value.match(PIXEL_PATTERN);
-    if (!m) {
-        return [0, 0];
-    }
-    return [Number(m[1]), m[2] !== undefined ? Number(m[2]) : 0];
-};
 const containerStyle = {
     display: 'flex',
     gap: 4,
@@ -27,8 +20,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
     var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
-    const [codeX, codeY] = (0, react_1.useMemo)(() => parseTranslate(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
-    const makeString = (0, react_1.useCallback)((x, y) => `${x}px ${y}px`, []);
+    const [codeX, codeY] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
     const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {
@@ -41,11 +33,11 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange(makeString(newVal, currentY));
-    }, [onDragValueChange, dragY, codeY, makeString]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY));
+    }, [onDragValueChange, dragY, codeY]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        const newStr = makeString(newVal, currentY);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY);
         if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
@@ -56,13 +48,13 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragX(null);
             onDragEnd();
         }
-    }, [dragY, codeY, makeString, propStatus, onSave, onDragEnd]);
+    }, [dragY, codeY, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-                const newStr = makeString(parsed, currentY);
+                const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY);
                 if (newStr !== propStatus.codeValue) {
                     setDragX(parsed);
                     onSave(newStr).finally(() => {
@@ -71,16 +63,16 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 }
             }
         }
-    }, [propStatus, dragY, codeY, makeString, onSave]);
+    }, [propStatus, dragY, codeY, onSave]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange(makeString(currentX, newVal));
-    }, [onDragValueChange, dragX, codeX, makeString]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal));
+    }, [onDragValueChange, dragX, codeX]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        const newStr = makeString(currentX, newVal);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal);
         if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
@@ -91,13 +83,13 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragY(null);
             onDragEnd();
         }
-    }, [dragX, codeX, makeString, propStatus, onSave, onDragEnd]);
+    }, [dragX, codeX, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-                const newStr = makeString(currentX, parsed);
+                const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed);
                 if (newStr !== propStatus.codeValue) {
                     setDragY(parsed);
                     onSave(newStr).finally(() => {
@@ -106,7 +98,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 }
             }
         }
-    }, [propStatus, onSave, dragX, codeX, makeString]);
+    }, [propStatus, onSave, dragX, codeX]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
         ] }));

package/dist/components/Timeline/call-add-keyframe.d.ts

@@ -0,0 +1,23 @@
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetCodeValues } from './save-sequence-prop';
+export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    sourceFrame: number;
+    value: unknown;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;
+export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    fieldKey: string;
+    sourceFrame: number;
+    value: unknown;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;

package/dist/components/Timeline/call-add-keyframe.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callAddEffectKeyframe = exports.callAddSequenceKeyframe = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const call_api_1 = require("../call-api");
+const save_prop_queue_1 = require("./save-prop-queue");
+const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setCodeValues,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticAddSequenceKeyframe)({
+            previous: prev,
+            fieldKey,
+            frame: sourceFrame,
+            value,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/add-sequence-keyframe', {
+            fileName,
+            nodePath,
+            key: fieldKey,
+            frame: sourceFrame,
+            value: JSON.stringify(value),
+            schema,
+            clientId,
+        }),
+        errorLabel: 'Could not add keyframe',
+    });
+};
+exports.callAddSequenceKeyframe = callAddSequenceKeyframe;
+const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setCodeValues,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticAddEffectKeyframe)({
+            previous: prev,
+            effectIndex,
+            fieldKey,
+            frame: sourceFrame,
+            value,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/add-effect-keyframe', {
+            fileName,
+            sequenceNodePath: nodePath,
+            effectIndex,
+            key: fieldKey,
+            frame: sourceFrame,
+            value: JSON.stringify(value),
+            schema,
+            clientId,
+        }),
+        errorLabel: 'Could not add keyframe',
+    });
+};
+exports.callAddEffectKeyframe = callAddEffectKeyframe;

package/dist/components/Timeline/call-delete-keyframe.d.ts

@@ -0,0 +1,37 @@
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetCodeValues } from './save-sequence-prop';
+export type DeleteSequenceKeyframeChange = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    sourceFrame: number;
+    schema: SequenceSchema;
+};
+export type DeleteEffectKeyframeChange = DeleteSequenceKeyframeChange & {
+    effectIndex: number;
+};
+export declare const callDeleteSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, schema, setCodeValues, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    sourceFrame: number;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;
+export declare const callDeleteEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, schema, setCodeValues, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    fieldKey: string;
+    sourceFrame: number;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;
+export declare const callDeleteKeyframes: ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }: {
+    sequenceKeyframes: DeleteSequenceKeyframeChange[];
+    effectKeyframes: DeleteEffectKeyframeChange[];
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;