@remotion/studio 4.0.527 → 4.0.528

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -47,8 +47,11 @@ const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const editor_snapping_1 = require("../../state/editor-snapping");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
+const get_keyframed_sequence_drag_targets_1 = require("./get-keyframed-sequence-drag-targets");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineTrimTooltip_1 = require("./TimelineTrimTooltip");
+const { getParentSequencePlaybackRate, sortItemsByCommitOrder } = canvas_1.CanvasInternals;
 const HANDLE_INSET = 6;
 const HANDLE_OUTSET = 8;
 const timelineSequenceEdgeDragThresholdPx = 4;
@@ -97,58 +100,9 @@ const baseStyle = {
     bottom: 0,
     // Keep the middle half of narrow layers available for moving.
     width: `calc(${HANDLE_OUTSET}px + min(${HANDLE_INSET}px, 25%))`,
-    cursor: 'ew-resize',
     zIndex: 1,
     touchAction: 'none',
 };
-const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, isDescendant, }) => {
-    var _a;
-    const status = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
-    if (status === null || status === undefined || !status.canUpdate) {
-        return { effectKeyframes: [], sequenceKeyframes: [] };
-    }
-    const sequenceSchema = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.schema;
-    const sequenceKeyframes = sequenceSchema === undefined
-        ? []
-        : Object.entries(status.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
-            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
-            ? [
-                {
-                    fileName: nodePath.absolutePath,
-                    fieldKey,
-                    isDescendant,
-                    nodePath,
-                    schema: sequenceSchema,
-                    status: propStatus,
-                },
-            ]
-            : []);
-    const effectKeyframes = status.effects.flatMap((effectStatus) => {
-        var _a;
-        if (!effectStatus.canUpdate) {
-            return [];
-        }
-        const effectSchema = (_a = sequence.effects[effectStatus.effectIndex]) === null || _a === void 0 ? void 0 : _a.schema;
-        if (effectSchema === undefined) {
-            return [];
-        }
-        return Object.entries(effectStatus.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
-            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
-            ? [
-                {
-                    effectIndex: effectStatus.effectIndex,
-                    fileName: nodePath.absolutePath,
-                    fieldKey,
-                    isDescendant,
-                    nodePath,
-                    schema: effectSchema,
-                    status: propStatus,
-                },
-            ]
-            : []);
-    });
-    return { effectKeyframes, sequenceKeyframes };
-};
 const shiftKeyframedStatus = ({ status, deltaFrames, isDescendant, }) => {
     if (isDescendant) {
         const adjustment = status.keyframeDisplayOffsetAdjustment;
@@ -209,7 +163,7 @@ const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
     if (!(0, exports.isTransitionSeriesSequence)(sequence)) {
         return 1;
     }
-    const siblings = (0, canvas_1.sortItemsByCommitOrder)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
+    const siblings = sortItemsByCommitOrder(sequences.filter((candidate) => candidate.parent === sequence.parent &&
         ((0, exports.isTransitionSeriesSequence)(candidate) ||
             isTransitionSeriesTransition(candidate))), (candidate) => candidate.timelineOrder);
     const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);
@@ -256,7 +210,7 @@ const getTrimBeforePlaybackRate = (sequence) => {
     if (componentIdentity === null ||
         componentIdentity === undefined ||
         !playbackRateComponentIdentities.has(componentIdentity)) {
-        return 1;
+        return sequence.sequencePlaybackRate;
     }
     const runtimePlaybackRate = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.runtimeValues.getSnapshot().playbackRate;
     return typeof runtimePlaybackRate === 'number' ? runtimePlaybackRate : 1;
@@ -298,7 +252,7 @@ const getTimelineSequenceLeftEdgeDragChanges = ({ targets, deltaFrames, }) => {
             initialDuration: target.initialDuration,
             initialFrom: target.initialFrom,
             initialTrimBefore: target.initialTrimBefore,
-            deltaFrames,
+            deltaFrames: deltaFrames * target.parentPlaybackRate,
             playbackRate: target.playbackRate,
             minimumDuration: target.minimumDuration,
         });
@@ -342,7 +296,7 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
     return targets.flatMap((target) => {
         const nextValue = (0, exports.getTimelineSequenceDurationDragValue)({
             initialDuration: target.initialDuration,
-            deltaFrames,
+            deltaFrames: deltaFrames * target.parentPlaybackRate,
             maximumDuration: target.maximumDuration,
             minimumDuration: target.minimumDuration,
         });
@@ -373,15 +327,15 @@ const getTimelineSequenceFromDragDelta = ({ deltaFrames, timelineDurationInFrame
         }
         const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
             initialFrom: target.initialFrom,
-            deltaFrames,
+            deltaFrames: deltaFrames * target.parentPlaybackRate,
         });
-        const distancePx = Math.abs(nextFrom * pxPerFrame);
+        const distancePx = Math.abs((nextFrom / target.parentPlaybackRate) * pxPerFrame);
         if (distancePx > exports.timelineSequenceFromDragSnapThresholdPx ||
             (closestSnap && closestSnap.distancePx <= distancePx)) {
             continue;
         }
         closestSnap = {
-            deltaFrames: -target.initialFrom,
+            deltaFrames: -target.initialFrom / target.parentPlaybackRate,
             distancePx,
         };
     }
@@ -395,7 +349,7 @@ const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
     return targets.flatMap((target) => {
         const nextValue = (0, exports.getTimelineSequenceFromDragValue)({
             initialFrom: target.initialFrom,
-            deltaFrames,
+            deltaFrames: deltaFrames * target.parentPlaybackRate,
         });
         if (nextValue === target.initialFrom) {
             return [];
@@ -423,10 +377,10 @@ const getTimelineSequenceFromDragKeyframeMoves = ({ targets, deltaFrames, }) =>
             nodePath: keyframeTarget.nodePath,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
-            toFrame: keyframe.frame + deltaFrames,
+            toFrame: keyframe.frame + deltaFrames * keyframeTarget.parentPlaybackRate,
             schema: keyframeTarget.schema,
             keyframeDisplayOffsetAdjustmentDelta: keyframeTarget.isDescendant
-                ? -deltaFrames
+                ? -deltaFrames * keyframeTarget.parentPlaybackRate
                 : undefined,
         })))),
         effectKeyframes: targets.flatMap((target) => target.effectKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
@@ -435,10 +389,10 @@ const getTimelineSequenceFromDragKeyframeMoves = ({ targets, deltaFrames, }) =>
             effectIndex: keyframeTarget.effectIndex,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
-            toFrame: keyframe.frame + deltaFrames,
+            toFrame: keyframe.frame + deltaFrames * keyframeTarget.parentPlaybackRate,
             schema: keyframeTarget.schema,
             keyframeDisplayOffsetAdjustmentDelta: keyframeTarget.isDescendant
-                ? -deltaFrames
+                ? -deltaFrames * keyframeTarget.parentPlaybackRate
                 : undefined,
         })))),
     };
@@ -455,7 +409,7 @@ const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
 };
 const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, draggedSequenceMediaDurationDragLimits, selectedSequenceMediaDurationDragLimits, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, timelineDurationInFrames, }) => {
     var _a;
-    var _b, _c, _d;
+    var _b;
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -505,12 +459,18 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, draggedSe
                 return null;
             }
             const minimumDuration = Math.max(1 - originalSequence.from, getMinimumSequenceDuration({ sequence: originalSequence, sequences }));
-            const initialDuration = (_c = mediaDurationDragLimits === null || mediaDurationDragLimits === void 0 ? void 0 : mediaDurationDragLimits.initialDuration) !== null && _c !== void 0 ? _c : originalSequence.duration;
-            const constrainedMaximumDuration = Math.min((_d = mediaDurationDragLimits === null || mediaDurationDragLimits === void 0 ? void 0 : mediaDurationDragLimits.maximumDuration) !== null && _d !== void 0 ? _d : Infinity, timelineDurationInFrames - track.cascadedStart);
+            const initialDuration = mediaDurationDragLimits
+                ? mediaDurationDragLimits.initialDuration * track.keyframePlaybackRate
+                : originalSequence.duration;
+            const constrainedMaximumDuration = Math.min(mediaDurationDragLimits
+                ? mediaDurationDragLimits.maximumDuration * track.keyframePlaybackRate
+                : Infinity, (timelineDurationInFrames - track.cascadedStart) *
+                track.keyframePlaybackRate);
             const maximumDuration = isMedia
                 ? Math.max(minimumDuration, initialDuration, constrainedMaximumDuration)
                 : Math.max(minimumDuration, constrainedMaximumDuration);
             targets.set(key, {
+                parentPlaybackRate: getParentSequencePlaybackRate(originalSequence, sequences),
                 fileName: nodePath.absolutePath,
                 initialDuration,
                 maximumDuration,
@@ -565,6 +525,7 @@ const getTimelineSequenceLeftEdgeDragTargets = ({ draggedNodePathInfo, selectedI
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
             targets.set(key, {
+                parentPlaybackRate: getParentSequencePlaybackRate(originalSequence, sequences),
                 fileName: nodePath.absolutePath,
                 initialDuration: originalSequence.duration,
                 initialFrom: positionField === 'from' ? originalSequence.from : 0,
@@ -669,9 +630,10 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
                 }
                 includedKeyframeNodePaths.add(descendantNodePathKey);
                 return [
-                    getKeyframedSequenceDragTargets({
+                    (0, get_keyframed_sequence_drag_targets_1.getKeyframedSequenceDragTargets)({
                         nodePath: descendantNodePath,
                         sequence,
+                        sequences,
                         propStatuses,
                         isDescendant: sequence.id !== originalSequence.id,
                     }),
@@ -680,8 +642,10 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             const effectKeyframes = descendantKeyframes.flatMap((descendant) => descendant.effectKeyframes);
             const sequenceKeyframes = descendantKeyframes.flatMap((descendant) => descendant.sequenceKeyframes);
             targets.set(key, {
+                parentPlaybackRate: getParentSequencePlaybackRate(originalSequence, sequences),
                 canSnapToTimelineStart: originalSequence.parent === null,
-                minimumDeltaFrames: 1 - originalSequence.duration - originalSequence.from,
+                minimumDeltaFrames: (1 - originalSequence.duration - originalSequence.from) /
+                    getParentSequencePlaybackRate(originalSequence, sequences),
                 initialTimelineStart,
                 effectKeyframes,
                 fileName: nodePath.absolutePath,
@@ -721,17 +685,19 @@ const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides,
         }
     }
 };
-const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, onSelect, selected, }) => {
+const TimelineSequenceLeftEdgeDragHandleInner = ({ cursor, nodePathInfo, windowWidth, timelineDurationInFrames, initialEdgeFrame, fps, onDragEnd, onSelect, selected, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const [trimTooltip, setTrimTooltip] = (0, react_1.useState)(null);
     const stopPointerSessionRef = (0, react_1.useRef)(null);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
+        initialEdgeFrame,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
@@ -742,6 +708,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
     });
     latestRef.current = {
         nodePathInfo,
+        initialEdgeFrame,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
@@ -756,6 +723,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             return;
         }
         dragStateRef.current = null;
+        setTrimTooltip(null);
         latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
@@ -833,6 +801,11 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
                 propStatuses: propStatusesRef.current,
             })) !== null && _b !== void 0 ? _b : [])
             : [];
+        const draggedKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(latestNodePathInfo.sequenceSubscriptionKey);
+        const draggedTarget = targets.find((target) => (0, studio_shared_1.stringifySequenceSubscriptionKey)(target.nodePath) === draggedKey);
+        const handleRect = e.currentTarget.getBoundingClientRect();
+        const initialEdgeClientY = handleRect.top;
+        const initialTimelineEdge = latestRef.current.initialEdgeFrame;
         (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
         dragStateRef.current = {
             initialClientX: e.clientX,
@@ -845,7 +818,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         };
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
+        (0, ForceSpecificCursor_1.forceSpecificCursor)(cursor);
         const onMove = (pointerEvent) => {
             const dragState = dragStateRef.current;
             if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
@@ -866,7 +839,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
                     initialDuration: target.initialDuration,
                     initialFrom: target.initialFrom,
                     initialTrimBefore: target.initialTrimBefore,
-                    deltaFrames,
+                    deltaFrames: deltaFrames * target.parentPlaybackRate,
                     playbackRate: target.playbackRate,
                     minimumDuration: target.minimumDuration,
                 });
@@ -876,6 +849,24 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(nextValues.durationInFrames));
                 latestRef.current.setDragOverrides(target.nodePath, 'trimBefore', remotion_1.Internals.makeStaticDragOverride(nextValues.trimBefore));
             }
+            if (dragState.didMove && draggedTarget) {
+                const values = (0, exports.getTimelineSequenceLeftEdgeDragValues)({
+                    initialDuration: draggedTarget.initialDuration,
+                    initialFrom: draggedTarget.initialFrom,
+                    initialTrimBefore: draggedTarget.initialTrimBefore,
+                    deltaFrames,
+                    playbackRate: draggedTarget.playbackRate,
+                    minimumDuration: draggedTarget.minimumDuration,
+                });
+                const appliedDelta = values.from - draggedTarget.initialFrom;
+                const edgeDelta = draggedTarget.positionField === null ? 0 : appliedDelta;
+                setTrimTooltip({
+                    deltaFrames: appliedDelta,
+                    edgeFrame: initialTimelineEdge + edgeDelta,
+                    x: pointerEvent.clientX,
+                    y: initialEdgeClientY,
+                });
+            }
         };
         const onUp = (pointerEvent) => {
             const dragState = dragStateRef.current;
@@ -912,6 +903,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         });
     }, [
         currentSelection,
+        cursor,
         finishDrag,
         propStatusesRef,
         selected,
@@ -929,9 +921,11 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
     const style = {
         ...baseStyle,
         left: -HANDLE_OUTSET,
+        cursor,
         background: colors_1.TRANSPARENT,
     };
-    return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }), trimTooltip === null ? null : (jsx_runtime_1.jsx(TimelineTrimTooltip_1.TimelineTrimTooltip, { state: trimTooltip, fps: fps }))] }));
 };
 exports.TimelineSequenceLeftEdgeDragHandle = react_1.default.memo(TimelineSequenceLeftEdgeDragHandleInner);
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, }) => {
@@ -1092,7 +1086,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 for (const target of dragState.targets) {
                     const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
                         initialFrom: target.initialFrom,
-                        deltaFrames,
+                        deltaFrames: deltaFrames * target.parentPlaybackRate,
                     });
                     latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
                     for (const keyframeTarget of target.sequenceKeyframes) {
@@ -1100,7 +1094,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                             type: 'keyframed',
                             status: shiftKeyframedStatus({
                                 status: keyframeTarget.status,
-                                deltaFrames,
+                                deltaFrames: deltaFrames * keyframeTarget.parentPlaybackRate,
                                 isDescendant: keyframeTarget.isDescendant,
                             }),
                         });
@@ -1110,7 +1104,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                             type: 'keyframed',
                             status: shiftKeyframedStatus({
                                 status: keyframeTarget.status,
-                                deltaFrames,
+                                deltaFrames: deltaFrames * keyframeTarget.parentPlaybackRate,
                                 isDescendant: keyframeTarget.isDescendant,
                             }),
                         });
@@ -1142,7 +1136,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationDragLimits, windowWidth, timelineDurationInFrames, onDragEnd, onSelect, selected, }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ cursor, nodePathInfo, mediaDurationDragLimits, windowWidth, timelineDurationInFrames, initialEdgeFrame, fps, onDragEnd, onSelect, selected, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -1150,12 +1144,14 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const mediaDurationDragLimitsRegistry = (0, react_1.useContext)(exports.TimelineSequenceMediaDurationDragLimitsContext);
+    const [trimTooltip, setTrimTooltip] = (0, react_1.useState)(null);
     const stopPointerSessionRef = (0, react_1.useRef)(null);
     const dragStateRef = (0, react_1.useRef)(null);
     // Keep latest props/setters available to window listeners installed once at pointerdown.
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
         mediaDurationDragLimits,
+        initialEdgeFrame,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
@@ -1167,6 +1163,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
     latestRef.current = {
         nodePathInfo,
         mediaDurationDragLimits,
+        initialEdgeFrame,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
@@ -1181,6 +1178,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
             return;
         }
         dragStateRef.current = null;
+        setTrimTooltip(null);
         latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
@@ -1259,6 +1257,11 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
                 timelineDurationInFrames,
             })) !== null && _c !== void 0 ? _c : [])
             : [];
+        const draggedKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(latestNodePathInfo.sequenceSubscriptionKey);
+        const draggedTarget = targets.find((target) => (0, studio_shared_1.stringifySequenceSubscriptionKey)(target.nodePath) === draggedKey);
+        const handleRect = e.currentTarget.getBoundingClientRect();
+        const initialEdgeClientY = handleRect.top;
+        const initialTimelineEdge = latestRef.current.initialEdgeFrame;
         (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
         dragStateRef.current = {
             initialClientX: e.clientX,
@@ -1271,7 +1274,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
         };
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
+        (0, ForceSpecificCursor_1.forceSpecificCursor)(cursor);
         const onMove = (pointerEvent) => {
             const dragState = dragStateRef.current;
             if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
@@ -1290,12 +1293,27 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
             for (const target of dragState.targets) {
                 const previewValue = (0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,
-                    deltaFrames,
+                    deltaFrames: deltaFrames * target.parentPlaybackRate,
                     maximumDuration: target.maximumDuration,
                     minimumDuration: target.minimumDuration,
                 });
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(previewValue));
             }
+            if (dragState.didMove && draggedTarget) {
+                const previewValue = (0, exports.getTimelineSequenceDurationDragValue)({
+                    initialDuration: draggedTarget.initialDuration,
+                    deltaFrames,
+                    maximumDuration: draggedTarget.maximumDuration,
+                    minimumDuration: draggedTarget.minimumDuration,
+                });
+                const appliedDelta = previewValue - draggedTarget.initialDuration;
+                setTrimTooltip({
+                    deltaFrames: appliedDelta,
+                    edgeFrame: initialTimelineEdge + appliedDelta,
+                    x: pointerEvent.clientX,
+                    y: initialEdgeClientY,
+                });
+            }
         };
         const onUp = (pointerEvent) => {
             const dragState = dragStateRef.current;
@@ -1332,6 +1350,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
         });
     }, [
         currentSelection,
+        cursor,
         finishDrag,
         mediaDurationDragLimitsRegistry,
         propStatusesRef,
@@ -1350,8 +1369,10 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
     const style = {
         ...baseStyle,
         right: -HANDLE_OUTSET,
+        cursor,
         background: colors_1.TRANSPARENT,
     };
-    return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }), trimTooltip === null ? null : (jsx_runtime_1.jsx(TimelineTrimTooltip_1.TimelineTrimTooltip, { state: trimTooltip, fps: fps }))] }));
 };
 exports.TimelineSequenceRightEdgeDragHandle = react_1.default.memo(TimelineSequenceRightEdgeDragHandleInner);

package/dist/components/Timeline/TimelineTextContentField.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTextContentField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const paths_1 = require("@remotion/paths");
 const react_1 = require("react");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const focus_inspector_field_1 = require("./focus-inspector-field");
@@ -16,9 +17,22 @@ const textAreaStyle = {
         fieldSizing: 'content',
     },
 };
+const isValidPathData = (value) => {
+    if (value.trim() === '') {
+        return true;
+    }
+    try {
+        (0, paths_1.parsePath)(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
 const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd, onDragValueChange, onSave, propStatus, }) => {
     var _a;
     const inputRef = (0, react_1.useRef)(null);
+    const [valid, setValid] = (0, react_1.useState)(true);
     const currentValue = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '');
     const draftRef = (0, react_1.useRef)({
         dirty: false,
@@ -46,6 +60,10 @@ const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd,
             return false;
         }
         const value = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : draftRef.current.value;
+        if (field.typeName === 'svg-path' && !isValidPathData(value)) {
+            latestRef.current.onDragEnd();
+            return false;
+        }
         const savedValue = String((_c = latestRef.current.codeValue) !== null && _c !== void 0 ? _c : '');
         draftRef.current = {
             dirty: false,
@@ -64,7 +82,7 @@ const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd,
         })
             .catch(() => undefined);
         return true;
-    }, []);
+    }, [field.typeName]);
     const setInputRef = (0, react_1.useCallback)((element) => {
         if (element === null && inputRef.current !== null) {
             commitPending();
@@ -87,8 +105,12 @@ const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd,
             dirty: true,
             value,
         };
-        latestRef.current.onDragValueChange(value);
-    }, []);
+        const nextValid = field.typeName !== 'svg-path' || isValidPathData(value);
+        setValid(nextValid);
+        if (nextValid) {
+            latestRef.current.onDragValueChange(value);
+        }
+    }, [field.typeName]);
     const onKeyDownCapture = (0, react_1.useCallback)((event) => {
         var _a;
         if (event.key === 'Escape') {
@@ -98,10 +120,11 @@ const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd,
                 value: savedValue,
             };
             event.currentTarget.value = savedValue;
+            setValid(true);
             latestRef.current.onDragEnd();
             event.currentTarget.blur();
         }
     }, []);
-    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: "ok", small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onDoubleClick: (event) => event.stopPropagation(), onKeyDownCapture: onKeyDownCapture, style: textAreaStyle }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
+    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: valid ? 'ok' : 'error', "aria-invalid": !valid, small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onDoubleClick: (event) => event.stopPropagation(), onKeyDownCapture: onKeyDownCapture, style: textAreaStyle }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
 };
 exports.TimelineTextContentField = TimelineTextContentField;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -38,6 +38,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const resolve_studio_color_1 = require("../../helpers/resolve-studio-color");
+const studio_pixel_ratio_1 = require("../../helpers/studio-pixel-ratio");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const render_frame_1 = require("../../state/render-frame");
 const TimeValue_1 = require("../TimeValue");
@@ -215,8 +217,11 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
                 (frameInterval * fps),
         });
         const draw = () => {
+            const computedStyle = getComputedStyle(canvas);
+            const tickColor = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.WHITE_ALPHA_15, computedStyle);
+            const labelColor = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.LIGHT_TEXT, computedStyle);
             const { clientWidth: width, scrollLeft } = scrollable;
-            const pixelRatio = window.devicePixelRatio;
+            const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
             const canvasWidth = Math.ceil(width * pixelRatio);
             const canvasHeight = exports.TIMELINE_TIME_INDICATOR_HEIGHT * pixelRatio;
             if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
@@ -228,7 +233,7 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
             context.resetTransform();
             context.clearRect(0, 0, canvas.width, canvas.height);
             context.scale(pixelRatio, pixelRatio);
-            context.fillStyle = colors_1.WHITE_ALPHA_15;
+            context.fillStyle = tickColor;
             const firstFrame = Math.max(0, Math.floor((scrollLeft - timeline_layout_1.TIMELINE_PADDING) / frameInterval));
             const lastFrame = Math.min(durationInFrames - 1, Math.ceil((scrollLeft + width - timeline_layout_1.TIMELINE_PADDING) / frameInterval));
             const xForFrame = (frame) => Math.round(frameInterval * frame + timeline_layout_1.TIMELINE_PADDING - scrollLeft) + 0.5;
@@ -243,11 +248,11 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
                 const frame = second * fps;
                 drawTick(frame, 15);
                 if (second > 0) {
-                    context.fillStyle = colors_1.LIGHT_TEXT;
-                    context.font = `${TICK_LABEL_FONT_SIZE}px ${getComputedStyle(canvas).fontFamily}`;
+                    context.fillStyle = labelColor;
+                    context.font = `${TICK_LABEL_FONT_SIZE}px ${computedStyle.fontFamily}`;
                     context.textBaseline = 'top';
                     context.fillText(showFrames ? `${Math.round(frame)}f` : (0, render_frame_1.renderFrame)(frame, fps), xForFrame(frame) + TICK_LABEL_MARGIN_LEFT, 7);
-                    context.fillStyle = colors_1.WHITE_ALPHA_15;
+                    context.fillStyle = tickColor;
                 }
             }
             const { minorTickEvery, mediumTickEvery } = tickScale;

package/dist/components/Timeline/TimelineTrack.js

@@ -66,6 +66,6 @@ const TimelineTrackUnmemoized = ({ track }) => {
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
             jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, cascadedStart: track.cascadedStart, localStart: track.localStart, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
-                ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
+                ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, keyframePlaybackRate: track.keyframePlaybackRate })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export type TimelineTrimTooltipState = {
+    readonly deltaFrames: number;
+    readonly edgeFrame: number;
+    readonly x: number;
+    readonly y: number;
+};
+export declare const TimelineTrimTooltip: React.FC<{
+    readonly state: TimelineTrimTooltipState;
+    readonly fps: number;
+}>;

package/dist/components/Timeline/TimelineTrimTooltip.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTrimTooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const colors_1 = require("../../helpers/colors");
+const render_frame_1 = require("../../state/render-frame");
+const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
+const tooltip = {
+    backgroundColor: colors_1.BLACK_ALPHA_85,
+    borderRadius: 2,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE,
+    fontSize: 11,
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: '14px',
+    padding: '4px 7px',
+    pointerEvents: 'none',
+    position: 'fixed',
+    textAlign: 'right',
+    whiteSpace: 'nowrap',
+    zIndex: 2147483647,
+};
+const TimelineTrimTooltip = ({ state, fps }) => {
+    const { showFrames } = (0, react_1.useContext)(TimelineTickFormatProvider_1.TimelineTickFormatContext);
+    const delta = Math.round(state.deltaFrames);
+    const edge = Math.max(0, Math.round(state.edgeFrame));
+    const format = (frame) => showFrames ? `${frame}f` : (0, render_frame_1.renderFrame)(frame, fps);
+    const deltaLabel = delta === 0
+        ? format(0)
+        : `${delta < 0 ? '−' : '+'}${format(Math.abs(delta))}`;
+    const edgeLabel = format(edge);
+    const tooltipWidth = Math.max(82, Math.ceil(Math.max(deltaLabel.length, edgeLabel.length) * 7 + 14));
+    const left = Math.max(8, Math.min(state.x - tooltipWidth / 2, window.innerWidth - tooltipWidth - 8));
+    const top = Math.max(8, Math.min(state.y - 40, window.innerHeight - 44));
+    return (0, react_dom_1.createPortal)(jsx_runtime_1.jsxs("div", { "aria-hidden": "true", style: { ...tooltip, left, top, width: tooltipWidth }, "data-remotion-timeline-trim-tooltip": "true", children: [
+            jsx_runtime_1.jsx("div", { children: deltaLabel }), jsx_runtime_1.jsx("div", { style: { color: colors_1.LIGHT_TEXT }, children: edgeLabel })
+        ] }), document.body);
+};
+exports.TimelineTrimTooltip = TimelineTrimTooltip;