@remotion/studio 4.0.470 → 4.0.472

package/dist/components/Timeline/TimelineSelection.js

@@ -8,6 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = '#3B3F42';
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND = '#B0B0B0';
@@ -255,7 +256,7 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
 const TimelineSelectionProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const canSelect = exports.SELECTION_ENABLED &&
+    const canSelect = (exports.SELECTION_ENABLED || exports.ENABLE_OUTLINES) &&
         previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
@@ -347,7 +348,7 @@ const TimelineSelectionProvider = ({ children }) => {
     ]);
     const currentSelection = (0, react_1.useRef)(value);
     currentSelection.current = value;
-    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
             ] }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;

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

@@ -4,4 +4,5 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly s: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly sequenceFrameOffset: number;
 }>;

package/dist/components/Timeline/TimelineSequence.js

@@ -46,19 +46,21 @@ const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
+const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEdgeDragHandle");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
-const TimelineSequenceFn = ({ s, nodePathInfo }) => {
+const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo }));
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, onMoveDragPointerDown, }) => {
     var _a, _b;
     const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -68,13 +70,17 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                 shiftKey: e.shiftKey,
                 toggleKey: e.metaKey || e.ctrlKey,
             });
+            if (TimelineSelection_1.TIMELINE_TOP_DRAG && fromCanUpdate) {
+                onMoveDragPointerDown(e);
+            }
         }
-    }, [onSelect]);
+    }, [fromCanUpdate, onMoveDragPointerDown, onSelect]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
+    const sequenceFrame = relativeFrame + sequenceFrameOffset;
     const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
     const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
-    const roundedFrame = Math.round(relativeFrame * 100) / 100;
+    const roundedFrame = Math.round(sequenceFrame * 100) / 100;
     const isInRange = relativeFrame >= 0 && relativeFrame < displayDurationInFrames;
     const isPremounting = relativeFrameWithPremount >= 0 &&
         relativeFrameWithPremount < displayDurationInFrames &&
@@ -86,7 +92,6 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
         return {
             ...style,
             opacity: isInRange ? 1 : 0.5,
-            ...(TimelineSelection_1.TIMELINE_TOP_DRAG ? { cursor: 'pointer' } : {}),
         };
     }, [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: {
@@ -123,14 +128,43 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
 };
-const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo }) => {
+const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a;
+    var _a, _b;
+    var _c, _d, _e, _f;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : 30);
+    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
+    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
+        };
+    }, [originalLocation]);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+        return nodePath
+            ? remotion_1.Internals.getCodeValuesCtx(codeValues, 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');
+    const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
+        nodePathInfo,
+        windowWidth,
+        timelineDurationInFrames: (_e = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _e !== void 0 ? _e : 1,
+    });
     if (!video) {
         throw new TypeError('Expected video config');
     }
@@ -174,9 +208,16 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
+    const showRightEdgeDragHandle = TimelineSelection_1.TIMELINE_TOP_DRAG &&
+        (s.type === 'sequence' || s.type === 'image') &&
+        !s.loopDisplay &&
+        !s.isInsideSeries &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        durationCanUpdate;
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
+    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_f = video.durationInFrames) !== null && _f !== void 0 ? _f : 1 })) : null] }));
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -9,6 +9,7 @@ const relativeFrameStyle = {
     opacity: 0.5,
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
+    userSelect: 'none',
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
     return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -2,6 +2,7 @@
 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");
@@ -31,10 +32,37 @@ const labelContainerStyle = {
     minWidth: 0,
     gap: 4,
 };
+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;
+    var _a, _b;
+    var _c;
+    const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : 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);
@@ -44,6 +72,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     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,
@@ -269,7 +298,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const codeHiddenStatus = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.hidden;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
-        const codeValue = codeHiddenStatus && codeHiddenStatus.canUpdate
+        const codeValue = codeHiddenStatus && codeHiddenStatus.status === 'static'
             ? codeHiddenStatus.codeValue
             : undefined;
         const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
@@ -282,7 +311,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             !validatedLocation ||
             !codeValuesForOverride ||
             !codeHiddenStatus ||
-            !codeHiddenStatus.canUpdate ||
+            codeHiddenStatus.status !== 'static' ||
             previewServerState.type !== 'connected') {
             return;
         }
@@ -322,6 +351,14 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             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) &&
@@ -329,8 +366,61 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         validatedLocation !== null &&
         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
+        codeHiddenStatus.status === 'static';
+    const canDropEffect = previewServerState.type === 'connected' &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
+    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 })

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequencePropItem = 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 client_id_1 = require("../../helpers/client-id");
 const ContextMenu_1 = require("../ContextMenu");
+const call_add_keyframe_1 = require("./call-add-keyframe");
 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");
@@ -17,6 +19,23 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldRowBase = {};
+const isKeyframedStatus = (status) => {
+    return status.status === 'keyframed';
+};
+const isResettableStatus = ({ status, defaultValue, }) => {
+    var _a;
+    if (defaultValue === undefined) {
+        return false;
+    }
+    if (status.status === 'keyframed') {
+        return true;
+    }
+    if (status.status === 'computed') {
+        return false;
+    }
+    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 { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -38,9 +57,6 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         ? previewServerState.clientId
         : null;
     const onSave = (0, react_1.useCallback)((value) => {
-        if (!codeValue || !codeValue.canUpdate) {
-            return Promise.reject(new Error('Cannot save'));
-        }
         if (!clientId) {
             return Promise.reject(new Error('Not connected to studio server'));
         }
@@ -79,7 +95,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         if (nodePath === null) {
             throw new Error('Cannot drag value');
         }
-        setDragOverrides(nodePath, field.key, value);
+        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeStaticDragOverride(value));
     }, [setDragOverrides, nodePath, field.key]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         if (nodePath === null) {
@@ -87,17 +103,22 @@ 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 }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, 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 { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setCodeValues, setDragOverrides, clearDragOverrides } = (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 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 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];
@@ -106,6 +127,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
             propStatus: codeValue,
             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;
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -113,23 +138,24 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const isNonDefault = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!codeValue || !codeValue.canUpdate) {
+    const canResetToDefault = (0, react_1.useMemo)(() => {
+        if (!codeValue || codeValue.status === 'computed') {
             return false;
         }
-        const effectiveCodeValue = (_a = codeValue.codeValue) !== null && _a !== void 0 ? _a : field.fieldSchema.default;
-        return (JSON.stringify(effectiveCodeValue) !==
-            JSON.stringify(field.fieldSchema.default));
+        return isResettableStatus({
+            status: codeValue,
+            defaultValue: field.fieldSchema.default,
+        });
     }, [codeValue, field.fieldSchema.default]);
     const canPerformReset = previewServerState.type === 'connected' &&
         codeValue !== null &&
-        codeValue.canUpdate;
+        codeValue.status !== 'computed';
+    const canShowReset = canPerformReset && field.fieldSchema.default !== undefined;
     const onReset = (0, react_1.useCallback)(() => {
-        if (!canPerformReset ||
+        if (!canShowReset ||
+            !canResetToDefault ||
             previewServerState.type !== 'connected' ||
-            codeValue === null ||
-            !isNonDefault) {
+            codeValue === null) {
             return;
         }
         const defaultValue = field.fieldSchema.default !== undefined
@@ -146,10 +172,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             clientId: previewServerState.clientId,
         });
     }, [
-        canPerformReset,
+        canResetToDefault,
+        canShowReset,
         field.fieldSchema.default,
         field.key,
-        isNonDefault,
         nodePath,
         previewServerState,
         schema,
@@ -157,6 +183,41 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         validatedLocation.source,
         codeValue,
     ]);
+    const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
+        return (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            sourceFrame,
+            value,
+            schema,
+            setCodeValues,
+            clientId,
+        });
+    }, [
+        clientId,
+        field.key,
+        nodePath,
+        schema,
+        setCodeValues,
+        validatedLocation.source,
+    ]);
+    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
+        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+            throw new Error('Expected keyframed status');
+        }
+        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
+            status: codeValue,
+            frame: jsxFrame,
+            value,
+        }));
+    }, [codeValue, field.key, jsxFrame, nodePath, setDragOverrides]);
+    const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         return [
             {
@@ -165,19 +226,19 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 keyHint: null,
                 label: 'Reset',
                 leftItem: null,
-                disabled: !canPerformReset,
+                disabled: !canShowReset,
                 onClick: onReset,
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'reset-sequence-field',
             },
         ];
-    }, [canPerformReset, onReset]);
+    }, [canShowReset, onReset]);
     if (codeValue === 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 }), 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 }) }))] }));
+            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 }) }))] }));
     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

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { CodeValues, OverrideIdToNodePaths, 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';
+export type TimelineSequenceDurationDragTarget = {
+    readonly fileName: string;
+    readonly initialDuration: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+};
+export type TimelineSequenceFromDragTarget = {
+    readonly fileName: string;
+    readonly initialFrom: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+};
+export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly deltaFrames: number;
+}) => number;
+export declare const getTimelineSequenceDurationDragChanges: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceDurationDragTarget[];
+    readonly deltaFrames: number;
+}) => SaveSequencePropChange[];
+export declare const getTimelineSequenceFromDragValue: ({ initialFrom, deltaFrames, }: {
+    readonly initialFrom: number;
+    readonly deltaFrames: number;
+}) => number;
+export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceFromDragTarget[];
+    readonly deltaFrames: number;
+}) => SaveSequencePropChange[];
+export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+    readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly codeValues: CodeValues;
+}) => TimelineSequenceDurationDragTarget[] | null;
+export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+    readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly codeValues: CodeValues;
+}) => TimelineSequenceFromDragTarget[] | null;
+export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
+    readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly windowWidth: number;
+    readonly timelineDurationInFrames: number;
+}) => {
+    dragging: boolean;
+    onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+};
+export declare const TimelineSequenceRightEdgeDragHandle: React.FC<{
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly windowWidth: number;
+    readonly timelineDurationInFrames: number;
+}>;