@remotion/studio 4.0.496 → 4.0.498

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceDurationDraggable = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -9,11 +9,14 @@ const no_react_1 = require("remotion/no-react");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const editor_snapping_1 = require("../../state/editor-snapping");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
 const HANDLE_WIDTH = 6;
+exports.timelineSequenceFromDragSnapThresholdPx = 10;
 const baseStyle = {
     position: 'absolute',
     top: 0,
@@ -81,50 +84,102 @@ const canUpdateTrimBefore = ({ propStatuses, nodePath, }) => {
     const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.trimBefore) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
-const isTimelineSequenceDurationDraggable = (sequence) => {
+const isTransitionSeriesSequence = (sequence) => {
+    var _a;
+    return ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
+        'dev.remotion.transitions.TransitionSeries.Sequence';
+};
+exports.isTransitionSeriesSequence = isTransitionSeriesSequence;
+const isSeriesSequence = (sequence) => {
     var _a;
-    const isInteractiveSeriesSequence = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
+    return ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
         'dev.remotion.remotion.Series.Sequence';
+};
+const isCascadingSequence = (sequence) => isSeriesSequence(sequence) || (0, exports.isTransitionSeriesSequence)(sequence);
+exports.isCascadingSequence = isCascadingSequence;
+const isTransitionSeriesTransition = (sequence) => {
+    var _a;
+    return ((_a = sequence === null || sequence === void 0 ? void 0 : sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
+        'dev.remotion.transitions.TransitionSeries.Transition';
+};
+const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
+    if (!(0, exports.isTransitionSeriesSequence)(sequence)) {
+        return 1;
+    }
+    const siblings = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
+        candidate.rootId === sequence.rootId &&
+        ((0, exports.isTransitionSeriesSequence)(candidate) ||
+            isTransitionSeriesTransition(candidate))));
+    const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);
+    if (sequenceIndex === -1) {
+        return 1;
+    }
+    const previous = siblings[sequenceIndex - 1];
+    const next = siblings[sequenceIndex + 1];
+    return Math.max(1, isTransitionSeriesTransition(previous) ? previous.duration : 1, isTransitionSeriesTransition(next) ? next.duration : 1);
+};
+const isTimelineSequenceDurationDraggable = (sequence) => {
+    const isInteractiveCascadingSequence = (0, exports.isCascadingSequence)(sequence);
     return ((sequence.type === 'sequence' ||
         sequence.type === 'image' ||
         sequence.type === 'audio' ||
         sequence.type === 'video') &&
         !sequence.loopDisplay &&
-        (!sequence.isInsideSeries || isInteractiveSeriesSequence) &&
+        (!sequence.isInsideSeries || isInteractiveCascadingSequence) &&
         Boolean(sequence.controls));
 };
 exports.isTimelineSequenceDurationDraggable = isTimelineSequenceDurationDraggable;
-const isLeftEdgeDraggableSequence = (sequence) => {
-    return (!sequence.isInsideSeries &&
+const isTimelineSequenceLeftEdgeDraggable = (sequence) => {
+    return ((!sequence.isInsideSeries || (0, exports.isCascadingSequence)(sequence)) &&
         Boolean(sequence.controls) &&
         (sequence.type === 'sequence' ||
             sequence.type === 'image' ||
             sequence.type === 'audio' ||
             sequence.type === 'video'));
 };
+exports.isTimelineSequenceLeftEdgeDraggable = isTimelineSequenceLeftEdgeDraggable;
+const playbackRateComponentIdentities = new Set([
+    'dev.remotion.gif.Gif',
+    'dev.remotion.media.Audio',
+    'dev.remotion.media.Video',
+    'dev.remotion.remotion.AnimatedImage',
+]);
+const getTrimBeforePlaybackRate = (sequence) => {
+    var _a, _b;
+    const componentIdentity = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity;
+    if (componentIdentity === null ||
+        componentIdentity === undefined ||
+        !playbackRateComponentIdentities.has(componentIdentity)) {
+        return 1;
+    }
+    const runtimePlaybackRate = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.currentRuntimeValueDotNotation.playbackRate;
+    return typeof runtimePlaybackRate === 'number' ? runtimePlaybackRate : 1;
+};
 const isFromDraggableSequence = (sequence) => {
     return (!sequence.loopDisplay &&
         !sequence.isInsideSeries &&
         Boolean(sequence.controls));
 };
-const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, }) => Math.max(1, initialDuration + deltaFrames);
+const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, minimumDuration = 1, }) => Math.max(minimumDuration, initialDuration + deltaFrames);
 exports.getTimelineSequenceDurationDragValue = getTimelineSequenceDurationDragValue;
-const getTimelineSequenceLeftEdgeDragDelta = ({ initialDuration, initialTrimBefore, deltaFrames, }) => {
-    const minDeltaFrames = 0 - initialTrimBefore;
-    const maxDeltaFrames = initialDuration - 1;
+const getTimelineSequenceLeftEdgeDragDelta = ({ initialDuration, initialTrimBefore, deltaFrames, playbackRate, minimumDuration = 1, }) => {
+    const minDeltaFrames = 0 - initialTrimBefore / playbackRate;
+    const maxDeltaFrames = initialDuration - minimumDuration;
     return Math.max(minDeltaFrames, Math.min(deltaFrames, maxDeltaFrames));
 };
 exports.getTimelineSequenceLeftEdgeDragDelta = getTimelineSequenceLeftEdgeDragDelta;
-const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }) => {
+const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, playbackRate, minimumDuration = 1, }) => {
     const clampedDeltaFrames = (0, exports.getTimelineSequenceLeftEdgeDragDelta)({
         initialDuration,
         initialTrimBefore,
         deltaFrames,
+        playbackRate,
+        minimumDuration,
     });
     return {
         durationInFrames: initialDuration - clampedDeltaFrames,
         from: initialFrom + clampedDeltaFrames,
-        trimBefore: initialTrimBefore + clampedDeltaFrames,
+        trimBefore: initialTrimBefore + clampedDeltaFrames * playbackRate,
     };
 };
 exports.getTimelineSequenceLeftEdgeDragValues = getTimelineSequenceLeftEdgeDragValues;
@@ -135,13 +190,16 @@ const getTimelineSequenceLeftEdgeDragChanges = ({ targets, deltaFrames, }) => {
             initialFrom: target.initialFrom,
             initialTrimBefore: target.initialTrimBefore,
             deltaFrames,
+            playbackRate: target.playbackRate,
+            minimumDuration: target.minimumDuration,
         });
         const changes = [];
-        if (nextValues.from !== target.initialFrom) {
+        if (target.positionField !== null &&
+            nextValues.from !== target.initialFrom) {
             changes.push({
                 fileName: target.fileName,
                 nodePath: target.nodePath,
-                fieldKey: 'from',
+                fieldKey: target.positionField,
                 value: nextValues.from,
                 defaultValue: '0',
                 schema: target.schema,
@@ -176,6 +234,7 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
         const nextValue = (0, exports.getTimelineSequenceDurationDragValue)({
             initialDuration: target.initialDuration,
             deltaFrames,
+            minimumDuration: target.minimumDuration,
         });
         if (nextValue === target.initialDuration) {
             return [];
@@ -195,6 +254,33 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
 exports.getTimelineSequenceDurationDragChanges = getTimelineSequenceDurationDragChanges;
 const getTimelineSequenceFromDragValue = ({ initialFrom, deltaFrames, }) => initialFrom + deltaFrames;
 exports.getTimelineSequenceFromDragValue = getTimelineSequenceFromDragValue;
+const getTimelineSequenceFromDragDelta = ({ deltaFrames, pxPerFrame, snappingEnabled, targets, }) => {
+    var _a;
+    if (!snappingEnabled) {
+        return deltaFrames;
+    }
+    let closestSnap;
+    for (const target of targets) {
+        if (!target.canSnapToTimelineStart) {
+            continue;
+        }
+        const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
+            initialFrom: target.initialFrom,
+            deltaFrames,
+        });
+        const distancePx = Math.abs(nextFrom * pxPerFrame);
+        if (distancePx > exports.timelineSequenceFromDragSnapThresholdPx ||
+            (closestSnap && closestSnap.distancePx <= distancePx)) {
+            continue;
+        }
+        closestSnap = {
+            deltaFrames: -target.initialFrom,
+            distancePx,
+        };
+    }
+    return (_a = closestSnap === null || closestSnap === void 0 ? void 0 : closestSnap.deltaFrames) !== null && _a !== void 0 ? _a : deltaFrames;
+};
+exports.getTimelineSequenceFromDragDelta = getTimelineSequenceFromDragDelta;
 const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
     return targets.flatMap((target) => {
         const nextValue = (0, exports.getTimelineSequenceFromDragValue)({
@@ -289,6 +375,10 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
             targets.set(key, {
                 fileName: nodePath.absolutePath,
                 initialDuration: originalSequence.duration,
+                minimumDuration: getMinimumSequenceDuration({
+                    sequence: originalSequence,
+                    sequences,
+                }),
                 nodePath,
                 schema: controls.schema,
             });
@@ -320,12 +410,13 @@ const getTimelineSequenceLeftEdgeDragTargets = ({ draggedNodePathInfo, selectedI
         if (!track ||
             !track.nodePathInfo ||
             !originalSequence ||
-            !isLeftEdgeDraggableSequence(originalSequence)) {
+            !(0, exports.isTimelineSequenceLeftEdgeDraggable)(originalSequence)) {
             return null;
         }
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         const trimsMedia = originalSequence.type === 'audio' || originalSequence.type === 'video';
-        if (!canUpdateFrom({ propStatuses, nodePath }) ||
+        const positionField = (0, exports.isCascadingSequence)(originalSequence) ? null : 'from';
+        if ((positionField === 'from' && !canUpdateFrom({ propStatuses, nodePath })) ||
             !canUpdateDurationInFrames({ propStatuses, nodePath }) ||
             !canUpdateTrimBefore({ propStatuses, nodePath })) {
             return null;
@@ -339,11 +430,17 @@ const getTimelineSequenceLeftEdgeDragTargets = ({ draggedNodePathInfo, selectedI
             targets.set(key, {
                 fileName: nodePath.absolutePath,
                 initialDuration: originalSequence.duration,
-                initialFrom: originalSequence.from,
+                initialFrom: positionField === 'from' ? originalSequence.from : 0,
                 initialTrimBefore: trimsMedia
                     ? ((_a = originalSequence.trimBefore) !== null && _a !== void 0 ? _a : Math.max(0, originalSequence.startMediaFrom))
                     : ((_b = originalSequence.trimBefore) !== null && _b !== void 0 ? _b : 0),
+                minimumDuration: getMinimumSequenceDuration({
+                    sequence: originalSequence,
+                    sequences,
+                }),
                 nodePath,
+                playbackRate: getTrimBeforePlaybackRate(originalSequence),
+                positionField,
                 schema: controls.schema,
             });
         }
@@ -388,6 +485,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
                 propStatuses,
             });
             targets.set(key, {
+                canSnapToTimelineStart: originalSequence.parent === null,
                 effectKeyframes,
                 fileName: nodePath.absolutePath,
                 initialFrom: originalSequence.from,
@@ -468,6 +566,8 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
             return;
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes,
             setPropStatuses: latestSetPropStatuses,
             clientId: latestServerState.clientId,
@@ -549,8 +649,12 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
                     initialFrom: target.initialFrom,
                     initialTrimBefore: target.initialTrimBefore,
                     deltaFrames,
+                    playbackRate: target.playbackRate,
+                    minimumDuration: target.minimumDuration,
                 });
-                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextValues.from));
+                if (target.positionField !== null) {
+                    latestRef.current.setDragOverrides(target.nodePath, target.positionField, remotion_1.Internals.makeStaticDragOverride(nextValues.from));
+                }
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(nextValues.durationInFrames));
                 latestRef.current.setDragOverrides(target.nodePath, 'trimBefore', remotion_1.Internals.makeStaticDragOverride(nextValues.trimBefore));
             }
@@ -598,6 +702,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     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 { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
@@ -609,6 +714,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        editorSnapping,
     });
     latestRef.current = {
         nodePathInfo,
@@ -619,6 +725,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        editorSnapping,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -651,6 +758,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             return;
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
             changes,
             movedKeyframes: {
                 sequenceKeyframes: keyframeMoves.sequenceKeyframes,
@@ -730,7 +838,12 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 return;
             }
             const dx = e.clientX - dragState.initialClientX;
-            const deltaFrames = Math.round(dx / dragState.pxPerFrame);
+            const deltaFrames = (0, exports.getTimelineSequenceFromDragDelta)({
+                deltaFrames: Math.round(dx / dragState.pxPerFrame),
+                pxPerFrame: dragState.pxPerFrame,
+                snappingEnabled: latestRef.current.editorSnapping,
+                targets: dragState.targets,
+            });
             dragState.latestDeltaFrames = deltaFrames;
             for (const target of dragState.targets) {
                 const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
@@ -843,6 +956,8 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             return;
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes,
             setPropStatuses: latestSetPropStatuses,
             clientId: latestServerState.clientId,
@@ -923,6 +1038,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,
                     deltaFrames,
+                    minimumDuration: target.minimumDuration,
                 })));
             }
         };

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

@@ -2,4 +2,20 @@ import React from 'react';
 export declare const TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 export declare const TimelineTimePlaceholders: React.FC;
 export declare const TimelineTimePadding: React.FC;
+export declare const getNiceSecondInterval: (rawNthSecond: number) => number;
+type TickInterval = {
+    readonly interval: number;
+    readonly unit: 'frames' | 'seconds';
+};
+export type TimelineTickScale = {
+    readonly labelEverySeconds: number;
+    readonly mediumTickEvery: TickInterval | null;
+    readonly minorTickEvery: TickInterval | null;
+};
+export declare const getTimelineTickScale: ({ fps, frameInterval, rawSecondMarkerEveryNth, }: {
+    readonly fps: number;
+    readonly frameInterval: number;
+    readonly rawSecondMarkerEveryNth: number;
+}) => TimelineTickScale;
 export declare const TimelineTimeIndicators: React.FC;
+export {};

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineTimeIndicators = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
+exports.TimelineTimeIndicators = exports.getTimelineTickScale = exports.getNiceSecondInterval = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -33,6 +33,10 @@ const secondTick = {
 const TICK_LABEL_FONT_SIZE = 12;
 const TICK_LABEL_MARGIN_LEFT = 8;
 const TICK_LABEL_MIN_GAP = 16;
+const MIN_SPACING_BETWEEN_FRAME_TICKS_PX = 5;
+const MIN_SPACING_BETWEEN_TIME_TICKS_PX = 16;
+const MIN_SPACING_BETWEEN_MEDIUM_FRAME_TICKS_PX = 24;
+const MIN_SPACING_BETWEEN_MEDIUM_TIME_TICKS_PX = 48;
 const tickLabel = {
     fontSize: TICK_LABEL_FONT_SIZE,
     marginLeft: TICK_LABEL_MARGIN_LEFT,
@@ -60,6 +64,101 @@ const TimelineTimePadding = () => {
         } }));
 };
 exports.TimelineTimePadding = TimelineTimePadding;
+const NICE_SECOND_INTERVALS = [
+    1,
+    2,
+    5,
+    10,
+    15,
+    30,
+    60,
+    2 * 60,
+    3 * 60,
+    5 * 60,
+    10 * 60,
+    15 * 60,
+    20 * 60,
+    30 * 60,
+    60 * 60,
+];
+const getNiceSecondInterval = (rawNthSecond) => {
+    for (const n of NICE_SECOND_INTERVALS) {
+        if (n >= rawNthSecond) {
+            return n;
+        }
+    }
+    return Math.ceil(rawNthSecond / 3600) * 3600;
+};
+exports.getNiceSecondInterval = getNiceSecondInterval;
+const getIntegerDivisors = (value) => {
+    const lowerDivisors = [];
+    const upperDivisors = [];
+    for (let candidate = 1; candidate <= Math.sqrt(value); candidate++) {
+        if (value % candidate !== 0) {
+            continue;
+        }
+        lowerDivisors.push(candidate);
+        if (candidate !== value / candidate) {
+            upperDivisors.unshift(value / candidate);
+        }
+    }
+    return [...lowerDivisors, ...upperDivisors];
+};
+const getFrameIntervals = (fps) => {
+    if (Number.isInteger(fps)) {
+        return getIntegerDivisors(fps);
+    }
+    return [1, 2, 5, 10, 15, 20, 30, 60].filter((interval) => interval < fps);
+};
+const getSecondIntervals = (labelEverySeconds) => {
+    const hourlyIntervals = getIntegerDivisors(labelEverySeconds / 3600).map((hours) => hours * 3600);
+    return [...new Set([...NICE_SECOND_INTERVALS, ...hourlyIntervals])].sort((a, b) => a - b);
+};
+const getTimelineTickScale = ({ fps, frameInterval, rawSecondMarkerEveryNth, }) => {
+    const labelEverySeconds = (0, exports.getNiceSecondInterval)(rawSecondMarkerEveryNth);
+    const frameIntervals = getFrameIntervals(fps);
+    const rawFrameInterval = MIN_SPACING_BETWEEN_FRAME_TICKS_PX / frameInterval;
+    const minorFrameInterval = frameIntervals.find((interval) => interval >= rawFrameInterval && interval < fps);
+    if (minorFrameInterval !== undefined) {
+        const rawMediumFrameInterval = MIN_SPACING_BETWEEN_MEDIUM_FRAME_TICKS_PX / frameInterval;
+        const mediumFrameInterval = frameIntervals.find((interval) => interval >= rawMediumFrameInterval &&
+            interval < fps &&
+            interval % minorFrameInterval === 0);
+        return {
+            labelEverySeconds,
+            mediumTickEvery: mediumFrameInterval === undefined
+                ? null
+                : { interval: mediumFrameInterval, unit: 'frames' },
+            minorTickEvery: { interval: minorFrameInterval, unit: 'frames' },
+        };
+    }
+    const pixelsPerSecond = frameInterval * fps;
+    const secondIntervals = getSecondIntervals(labelEverySeconds);
+    const rawMinorSecondInterval = MIN_SPACING_BETWEEN_TIME_TICKS_PX / pixelsPerSecond;
+    const minorSecondInterval = secondIntervals.find((interval) => interval >= rawMinorSecondInterval &&
+        interval < labelEverySeconds &&
+        labelEverySeconds % interval === 0);
+    if (minorSecondInterval === undefined) {
+        return {
+            labelEverySeconds,
+            mediumTickEvery: null,
+            minorTickEvery: null,
+        };
+    }
+    const rawMediumSecondInterval = MIN_SPACING_BETWEEN_MEDIUM_TIME_TICKS_PX / pixelsPerSecond;
+    const mediumSecondInterval = secondIntervals.find((interval) => interval >= rawMediumSecondInterval &&
+        interval < labelEverySeconds &&
+        interval % minorSecondInterval === 0 &&
+        labelEverySeconds % interval === 0);
+    return {
+        labelEverySeconds,
+        mediumTickEvery: mediumSecondInterval === undefined
+            ? null
+            : { interval: mediumSecondInterval, unit: 'seconds' },
+        minorTickEvery: { interval: minorSecondInterval, unit: 'seconds' },
+    };
+};
+exports.getTimelineTickScale = getTimelineTickScale;
 const TimelineTimeIndicators = () => {
     const sliderTrack = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const video = remotion_1.Internals.useVideo();
@@ -101,53 +200,73 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
     }, [windowWidth]);
     const ticks = (0, react_1.useMemo)(() => {
         const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
-        const MIN_SPACING_BETWEEN_TICKS_PX = 5;
         const maxTickLabelWidth = (0, render_frame_1.renderFrame)(durationInFrames - 1, fps).length *
             TICK_LABEL_FONT_SIZE *
             0.6;
         const minSpacingBetweenTickLabelsPx = TICK_LABEL_MARGIN_LEFT + maxTickLabelWidth + TICK_LABEL_MIN_GAP;
         const seconds = Math.floor(durationInFrames / fps);
-        const secondMarkerEveryNth = Math.ceil(minSpacingBetweenTickLabelsPx / (frameInterval * fps));
-        const frameMarkerEveryNth = Math.ceil(MIN_SPACING_BETWEEN_TICKS_PX / frameInterval);
-        // Big ticks showing for every second
-        const secondTicks = new Array(seconds)
-            .fill(true)
-            .map((_, index) => {
-            return {
+        const rawSecondMarkerEveryNth = minSpacingBetweenTickLabelsPx / (frameInterval * fps);
+        const tickScale = (0, exports.getTimelineTickScale)({
+            fps,
+            frameInterval,
+            rawSecondMarkerEveryNth,
+        });
+        // Labeled ticks use human-friendly time intervals.
+        const secondTicks = [];
+        for (let index = 0; index < seconds; index += tickScale.labelEverySeconds) {
+            secondTicks.push({
                 frame: index * fps,
                 style: {
                     ...secondTick,
                     left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
                 },
                 showTime: index > 0,
-            };
-        })
-            .filter((_, idx) => idx % secondMarkerEveryNth === 0);
-        const frameTicks = new Array(durationInFrames)
-            .fill(true)
-            .map((_, index) => {
-            return {
-                frame: index,
-                style: {
-                    ...tick,
-                    left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
-                    height: index % fps === 0
-                        ? 10
-                        : (index / frameMarkerEveryNth) % 2 === 0
+            });
+        }
+        const hasSecondTick = new Set(secondTicks.map((t) => t.frame));
+        const subdivisionTicks = [];
+        const { minorTickEvery, mediumTickEvery } = tickScale;
+        if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'frames') {
+            for (let frame = 0; frame < durationInFrames; frame += minorTickEvery.interval) {
+                if (hasSecondTick.has(frame)) {
+                    continue;
+                }
+                subdivisionTicks.push({
+                    frame,
+                    style: {
+                        ...tick,
+                        left: frameInterval * frame + timeline_layout_1.TIMELINE_PADDING,
+                        height: (Number.isInteger(fps) && frame % fps === 0) ||
+                            ((mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'frames' &&
+                                frame % mediumTickEvery.interval === 0)
                             ? 5
                             : 2,
-                },
-                showTime: false,
-            };
-        })
-            .filter((_, idx) => idx % frameMarkerEveryNth === 0);
-        // Merge and deduplicate ticks
-        const hasTicks = [];
-        return [...secondTicks, ...frameTicks].filter((t) => {
-            const alreadyUsed = hasTicks.find((ht) => ht === t.frame) !== undefined;
-            hasTicks.push(t.frame);
-            return !alreadyUsed;
-        });
+                    },
+                    showTime: false,
+                });
+            }
+        }
+        if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'seconds') {
+            for (let second = 0; second < seconds; second += minorTickEvery.interval) {
+                const frame = second * fps;
+                if (hasSecondTick.has(frame)) {
+                    continue;
+                }
+                subdivisionTicks.push({
+                    frame,
+                    style: {
+                        ...tick,
+                        left: frameInterval * frame + timeline_layout_1.TIMELINE_PADDING,
+                        height: (mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'seconds' &&
+                            second % mediumTickEvery.interval === 0
+                            ? 5
+                            : 2,
+                    },
+                    showTime: false,
+                });
+            }
+        }
+        return [...secondTicks, ...subdivisionTicks];
     }, [durationInFrames, fps, windowWidth]);
     return (jsx_runtime_1.jsx("div", { ref: ref, style: style, children: ticks.map((t) => {
             return (jsx_runtime_1.jsx("div", { style: t.style, children: t.showTime ? (jsx_runtime_1.jsx("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));

package/dist/components/Timeline/TimelineTranslateField.js

@@ -17,6 +17,7 @@ const containerStyle = {
     display: 'flex',
     gap: 4,
 };
+const translateDragSensitivity = 3;
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
@@ -100,7 +101,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         }
     }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity })
         ] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

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

@@ -15,4 +15,5 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly postmountWidth: number;
     readonly loopDisplay: LoopDisplay | undefined;
     readonly frozenMediaFrame: number | null;
+    readonly extendLastFrame: boolean;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -26,7 +26,7 @@ const filmstripContainerStyle = {
     fontFamily: 'Arial, Helvetica',
 };
 const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, }) => {
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, extendLastFrame, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -108,6 +108,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFr
                 };
             }
             (0, timeline_utils_1.extractFrames)({
+                repeatLastFrame: extendLastFrame,
                 timestampsInSeconds: ({ track, }) => {
                     aspectRatio.current = track.width / track.height;
                     timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
@@ -216,6 +217,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFr
             }
         }
         (0, timeline_utils_1.extractFrames)({
+            repeatLastFrame: extendLastFrame,
             timestampsInSeconds: ({ track, }) => {
                 aspectRatio.current = track.width / track.height;
                 timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
@@ -307,6 +309,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFr
     }, [
         durationInFrames,
         error,
+        extendLastFrame,
         fps,
         frozenMediaFrame,
         loopDisplay,