@remotion/studio 4.0.526 → 4.0.528

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, InteractivitySchema, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatus, InteractivitySchema, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
+import { type TimelineSequenceEffectKeyframeDragTarget, type TimelineSequenceKeyframeDragTarget } from './get-keyframed-sequence-drag-targets';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 export declare const timelineSequenceFromDragSnapThresholdPx = 10;
 export type TimelineSequenceMediaDurationDragLimits = {
@@ -23,6 +24,7 @@ export declare const getTimelineSequenceMediaDurationDragLimits: ({ cascadedStar
     readonly timelineDurationInFrames: number;
 }) => TimelineSequenceMediaDurationDragLimits | null;
 export type TimelineSequenceDurationDragTarget = {
+    readonly parentPlaybackRate: number;
     readonly fileName: string;
     readonly initialDuration: number;
     readonly maximumDuration: number;
@@ -31,6 +33,7 @@ export type TimelineSequenceDurationDragTarget = {
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceLeftEdgeDragTarget = {
+    readonly parentPlaybackRate: number;
     readonly fileName: string;
     readonly initialDuration: number;
     readonly initialFrom: number;
@@ -42,6 +45,7 @@ export type TimelineSequenceLeftEdgeDragTarget = {
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceFromDragTarget = {
+    readonly parentPlaybackRate: number;
     readonly canSnapToTimelineStart: boolean;
     readonly minimumDeltaFrames: number;
     readonly initialTimelineStart: number;
@@ -51,17 +55,6 @@ export type TimelineSequenceFromDragTarget = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly sequenceKeyframes: TimelineSequenceKeyframeDragTarget[];
 };
-type TimelineSequenceKeyframeDragTarget = {
-    readonly fileName: string;
-    readonly fieldKey: string;
-    readonly isDescendant: boolean;
-    readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: InteractivitySchema;
-    readonly status: CanUpdateSequencePropStatusKeyframed;
-};
-type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarget & {
-    readonly effectIndex: number;
-};
 export declare const isTransitionSeriesSequence: (sequence: TSequence) => boolean;
 export declare const isCascadingSequence: (sequence: TSequence) => boolean;
 export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
@@ -149,9 +142,12 @@ export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo,
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
 export declare const TimelineSequenceLeftEdgeDragHandle: React.NamedExoticComponent<{
+    readonly cursor: "e-resize" | "ew-resize";
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
+    readonly initialEdgeFrame: number;
+    readonly fps: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
     readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly selected: boolean;
@@ -165,12 +161,14 @@ export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth,
     onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const TimelineSequenceRightEdgeDragHandle: React.NamedExoticComponent<{
+    readonly cursor: "ew-resize" | "w-resize";
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly mediaDurationDragLimits: TimelineSequenceMediaDurationDragLimits | null;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
+    readonly initialEdgeFrame: number;
+    readonly fps: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
     readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly selected: boolean;
 }>;
-export {};

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;