@remotion/studio 4.0.513 → 4.0.514

package/dist/components/Timeline/TimelineZoomControls.js

@@ -38,12 +38,14 @@ 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 get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const canvas_zoom_1 = require("../../icons/canvas-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
+const TIMELINE_ZOOM_BUTTON_FACTOR = 1.2;
 const container = {
     color: colors_1.BLACK,
     flexDirection: 'row',
@@ -53,7 +55,7 @@ const container = {
 const buttonStyle = {
     fontSize: 24,
 };
-const TimelineZoomSlider = ({ maxWidth }) => {
+const TimelineZoomSlider = ({ maxWidth, maxZoom }) => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -63,33 +65,39 @@ const TimelineZoomSlider = ({ maxWidth }) => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
+        setZoom(canvasContent.compositionId, () => (0, get_timeline_max_zoom_1.sliderValueToTimelineZoom)({
+            sliderValue: Number(e.target.value),
+            maxZoom,
+        }), {
             anchorFrame: null,
             anchorContentX: null,
         });
-    }, [canvasContent, setZoom]);
+    }, [canvasContent, maxZoom, setZoom]);
     if (isStill ||
         canvasContent === null ||
         canvasContent.type !== 'composition') {
         return null;
     }
-    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
-    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: "range", min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
+    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM;
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: "range", min: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.min, max: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.max, step: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.step, value: (0, get_timeline_max_zoom_1.timelineZoomToSliderValue)({ zoom, maxZoom }), onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
 };
 const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
+    var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const maxZoom = (0, get_timeline_max_zoom_1.getTimelineMaxZoom)((_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1);
     const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, (z) => z / TIMELINE_ZOOM_BUTTON_FACTOR, { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const onPlusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, (z) => z * TIMELINE_ZOOM_BUTTON_FACTOR, { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill ||
@@ -98,7 +106,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, maxZoom: maxZoom }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
         ] }));
 };
 exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

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

@@ -2,9 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callAddEffectKeyframe = exports.callAddKeyframes = exports.callAddSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const addSequenceKeyframe = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/add-sequence-keyframe', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.addSequenceKeyframe(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const addEffectKeyframe = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/add-effect-keyframe', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.addEffectKeyframe(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const addKeyframes = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/add-keyframes', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.addKeyframes(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const groupByNodePath = (keyframes) => {
     var _a;
     const groups = new Map();
@@ -27,7 +55,7 @@ const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, va
             value,
             schema,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/add-sequence-keyframe', {
+        apiCall: () => addSequenceKeyframe({
             fileName,
             nodePath,
             key: fieldKey,
@@ -71,7 +99,7 @@ const callAddKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses,
             schema: keyframe.schema,
         }), prev));
     }
-    return (0, call_api_1.callApi)('/api/add-keyframes', {
+    return addKeyframes({
         sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
             nodePath: keyframe.nodePath,
@@ -106,7 +134,7 @@ const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sour
             schema,
         }),
         applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
-        apiCall: () => (0, call_api_1.callApi)('/api/add-effect-keyframe', {
+        apiCall: () => addEffectKeyframe({
             fileName,
             sequenceNodePath: nodePath,
             effectIndex,

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

@@ -2,8 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callDeleteKeyframes = exports.callDeleteEffectKeyframe = exports.callDeleteSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
+const deleteKeyframes = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/delete-keyframes', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.deleteKeyframes(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const groupByNodePath = (keyframes) => {
     var _a;
     const groups = new Map();
@@ -24,7 +34,7 @@ const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame,
             fieldKey,
             frame: sourceFrame,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/delete-keyframes', {
+        apiCall: () => deleteKeyframes({
             sequenceKeyframes: [
                 {
                     fileName,
@@ -51,7 +61,7 @@ const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, s
             fieldKey,
             frame: sourceFrame,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/delete-keyframes', {
+        apiCall: () => deleteKeyframes({
             sequenceKeyframes: [],
             effectKeyframes: [
                 {
@@ -102,7 +112,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             })),
         }));
     }
-    return (0, call_api_1.callApi)('/api/delete-keyframes', {
+    return deleteKeyframes({
         sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
             nodePath: keyframe.nodePath,

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

@@ -2,7 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callMoveKeyframes = exports.applyOptimisticKeyframeMoves = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
+const moveKeyframes = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/move-keyframes', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.moveKeyframes(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const groupByNodePath = (keyframes) => {
     var _a;
     const groups = new Map();
@@ -111,7 +121,7 @@ const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses
         effectKeyframes,
         setPropStatuses,
     });
-    return (0, call_api_1.callApi)('/api/move-keyframes', {
+    return moveKeyframes({
         sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
             nodePath: keyframe.nodePath,

package/dist/components/Timeline/call-update-keyframe-settings.js

@@ -2,10 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callBatchUpdateKeyframeSettings = exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const updateSequenceKeyframeSettings = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/update-sequence-keyframe-settings', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.updateSequenceKeyframeSettings(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const updateEffectKeyframeSettings = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/update-effect-keyframe-settings', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.updateEffectKeyframeSettings(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const batchUpdateKeyframeSettings = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/batch-update-keyframe-settings', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.batchUpdateKeyframeSettings(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
@@ -15,7 +43,7 @@ const callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, sett
             fieldKey,
             settings,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/update-sequence-keyframe-settings', {
+        apiCall: () => updateSequenceKeyframeSettings({
             fileName,
             nodePath,
             key: fieldKey,
@@ -38,7 +66,7 @@ const callUpdateEffectKeyframeSettings = ({ fileName, nodePath, effectIndex, fie
             settings,
         }),
         applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
-        apiCall: () => (0, call_api_1.callApi)('/api/update-effect-keyframe-settings', {
+        apiCall: () => updateEffectKeyframeSettings({
             fileName,
             sequenceNodePath: nodePath,
             effectIndex,
@@ -67,7 +95,7 @@ const callBatchUpdateKeyframeSettings = ({ sequenceKeyframes, effectKeyframes, s
             settings: update.settings,
         }));
     }
-    return (0, call_api_1.callApi)('/api/batch-update-keyframe-settings', {
+    return batchUpdateKeyframeSettings({
         sequenceKeyframes: sequenceKeyframes.map((update) => ({
             fileName: update.fileName,
             nodePath: update.nodePath,

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSequencesFromSource = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
+const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -37,7 +38,7 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
     if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
         return false;
     }
-    return (0, call_api_1.callApi)('/api/delete-jsx-node', {
+    return (0, delete_jsx_node_api_1.deleteJsxNode)({
         nodes: nodePathInfos.map((nodePathInfo) => {
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             return {

package/dist/components/Timeline/get-timeline-keyframes.d.ts

@@ -1,5 +1,4 @@
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse } from 'remotion';
-export declare const getComputedStatusLabel: (propStatus: CanUpdateSequencePropStatusFalse) => string;
+import type { CanUpdateSequencePropStatus } from 'remotion';
 export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined, keyframeDisplayOffset?: number) => {
     frame: number;
     value: unknown;

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -1,13 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getKeyframeDisplayOffset = exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
-const getComputedStatusLabel = (propStatus) => {
-    if (propStatus.status === 'computed') {
-        return 'computed';
-    }
-    throw new Error(`Unsupported prop status: ${propStatus.status}`);
-};
-exports.getComputedStatusLabel = getComputedStatusLabel;
+exports.getKeyframeDisplayOffset = exports.getTimelineKeyframes = void 0;
 const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
     if (!propStatus) {
         return [];

package/dist/components/Timeline/get-timeline-sequence-visible-layout.d.ts

@@ -0,0 +1,30 @@
+type TimelineSequenceVisibleLayout = {
+    readonly marginLeft: number;
+    readonly width: number;
+    readonly cropLeft: number;
+    readonly leftEdgeVisible: boolean;
+    readonly rightEdgeVisible: boolean;
+    readonly premount: {
+        readonly left: number;
+        readonly width: number;
+    } | null;
+    readonly postmount: {
+        readonly left: number;
+        readonly width: number;
+    } | null;
+    readonly media: {
+        readonly left: number;
+        readonly width: number;
+        readonly offset: number;
+        readonly fullWidth: number;
+    } | null;
+};
+export declare const getTimelineSequenceVisibleLayout: ({ marginLeft, width, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }: {
+    readonly marginLeft: number;
+    readonly width: number;
+    readonly premountWidth: number;
+    readonly postmountWidth: number;
+    readonly renderWindowLeft: number;
+    readonly renderWindowWidth: number;
+}) => TimelineSequenceVisibleLayout | null;
+export {};

package/dist/components/Timeline/get-timeline-sequence-visible-layout.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineSequenceVisibleLayout = void 0;
+const getVisibleSection = ({ sectionStart, sectionEnd, cropStart, cropEnd, }) => {
+    const start = Math.max(sectionStart, cropStart);
+    const end = Math.min(sectionEnd, cropEnd);
+    if (end <= start) {
+        return null;
+    }
+    return {
+        left: start - cropStart,
+        width: end - start,
+    };
+};
+const getTimelineSequenceVisibleLayout = ({ marginLeft, width, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }) => {
+    const itemStart = marginLeft;
+    const itemEnd = marginLeft + width;
+    const renderWindowEnd = renderWindowLeft + renderWindowWidth;
+    const visibleStart = Math.max(itemStart, renderWindowLeft);
+    const visibleEnd = Math.min(itemEnd, renderWindowEnd);
+    if (visibleEnd <= visibleStart) {
+        return null;
+    }
+    const cropStart = visibleStart - itemStart;
+    const cropEnd = visibleEnd - itemStart;
+    const mediaStart = premountWidth;
+    const mediaEnd = Math.max(mediaStart, width - postmountWidth);
+    const media = getVisibleSection({
+        sectionStart: mediaStart,
+        sectionEnd: mediaEnd,
+        cropStart,
+        cropEnd,
+    });
+    return {
+        marginLeft: visibleStart,
+        width: visibleEnd - visibleStart,
+        cropLeft: cropStart,
+        leftEdgeVisible: visibleStart === itemStart,
+        rightEdgeVisible: visibleEnd === itemEnd,
+        premount: getVisibleSection({
+            sectionStart: 0,
+            sectionEnd: premountWidth,
+            cropStart,
+            cropEnd,
+        }),
+        postmount: getVisibleSection({
+            sectionStart: Math.max(0, width - postmountWidth),
+            sectionEnd: width,
+            cropStart,
+            cropEnd,
+        }),
+        media: media
+            ? {
+                ...media,
+                offset: Math.max(0, cropStart - mediaStart),
+                fullWidth: Math.max(0, mediaEnd - mediaStart),
+            }
+            : null,
+    };
+};
+exports.getTimelineSequenceVisibleLayout = getTimelineSequenceVisibleLayout;

package/dist/components/Timeline/split-selected-timeline-item.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
-const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const split_jsx_sequence_api_1 = require("../split-jsx-sequence-api");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const staticNumberish = (status) => {
     if (!status) {
@@ -89,7 +89,7 @@ const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame,
 exports.getTimelineSequenceSplitEligibility = getTimelineSequenceSplitEligibility;
 const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
-    return (0, call_api_1.callApi)('/api/split-jsx-sequence', {
+    return (0, split_jsx_sequence_api_1.splitJsxSequence)({
         fileName: nodePath.absolutePath,
         nodePath: nodePath.nodePath,
         sequenceKeys: nodePath.sequenceKeys,

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -2,6 +2,30 @@ export declare const canScrollTimelineIntoDirection: () => {
     canScrollRight: boolean;
     canScrollLeft: boolean;
 };
+export declare const SCROLL_INCREMENT = 200;
+export declare const EDGE_SCROLL_VERTICAL_INCREMENT = 60;
+export type TimelineEdgeScrollDirections = {
+    x: 'left' | 'right' | null;
+    y: 'up' | 'down' | null;
+};
+export type TimelineEdgeAutoScroller = {
+    update: (e: {
+        clientX: number;
+        clientY: number;
+    }) => TimelineEdgeScrollDirections;
+    stop: () => void;
+};
+/**
+ * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
+ * scrubbing, marquee selection). Detects when the pointer is in an edge zone
+ * and repeatedly invokes `onTick` while it stays there. The consumer performs
+ * the actual scrolling (and any dependent updates) inside `onTick`, so it can
+ * read a settled scroll position afterwards.
+ */
+export declare const startTimelineEdgeAutoScroll: ({ includeVertical, onTick, }: {
+    includeVertical: boolean;
+    onTick: (directions: TimelineEdgeScrollDirections) => void;
+}) => TimelineEdgeAutoScroller;
 export declare const getFrameWhileScrollingLeft: ({ durationInFrames, width, }: {
     durationInFrames: number;
     width: number;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSlider_1 = require("./TimelineSlider");
 const canScrollTimelineIntoDirection = () => {
@@ -13,7 +14,126 @@ const canScrollTimelineIntoDirection = () => {
     return { canScrollRight, canScrollLeft };
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
-const SCROLL_INCREMENT = 200;
+exports.SCROLL_INCREMENT = 200;
+exports.EDGE_SCROLL_VERTICAL_INCREMENT = 60;
+const EDGE_SCROLL_INTERVAL_MS = 100;
+// Once edge-scrolling has started, the pointer must move this many pixels
+// back inside the timeline to stop it. Prevents pixel jitter around the edge
+// threshold from rapidly cancelling and restarting the auto-scroll.
+const EDGE_SCROLL_EXIT_HYSTERESIS = 8;
+// The vertical edge zones extend this many pixels into the viewport, so the
+// auto-scroll already engages when dragging close to (not exactly onto) the
+// top or bottom edge.
+const EDGE_SCROLL_VERTICAL_INSET = 8;
+const canScrollTimelineVerticallyIntoDirection = () => {
+    const { current } = timeline_refs_1.timelineVerticalScroll;
+    if (!current) {
+        return { canScrollUp: false, canScrollDown: false };
+    }
+    const { scrollTop, scrollHeight, clientHeight } = current;
+    return {
+        canScrollUp: scrollTop > 0,
+        canScrollDown: scrollHeight - scrollTop - clientHeight > 0,
+    };
+};
+const getEdgeScrollDirections = ({ clientX, clientY, includeVertical, active, }) => {
+    let x = null;
+    const scrollable = timeline_refs_1.scrollableRef.current;
+    if (scrollable) {
+        const rect = scrollable.getBoundingClientRect();
+        const leftThreshold = rect.left + (active.x === 'left' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const rightThreshold = rect.left +
+            scrollable.clientWidth -
+            timeline_layout_1.TIMELINE_PADDING -
+            (active.x === 'right' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const { canScrollLeft, canScrollRight } = (0, exports.canScrollTimelineIntoDirection)();
+        if (clientX <= leftThreshold && canScrollLeft) {
+            x = 'left';
+        }
+        else if (clientX >= rightThreshold && canScrollRight) {
+            x = 'right';
+        }
+    }
+    let y = null;
+    const vertical = timeline_refs_1.timelineVerticalScroll.current;
+    if (includeVertical && vertical) {
+        const rect = vertical.getBoundingClientRect();
+        const topThreshold = rect.top +
+            EDGE_SCROLL_VERTICAL_INSET +
+            (active.y === 'up' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const bottomThreshold = rect.bottom -
+            EDGE_SCROLL_VERTICAL_INSET -
+            (active.y === 'down' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const { canScrollUp, canScrollDown } = canScrollTimelineVerticallyIntoDirection();
+        if (clientY <= topThreshold && canScrollUp) {
+            y = 'up';
+        }
+        else if (clientY >= bottomThreshold && canScrollDown) {
+            y = 'down';
+        }
+    }
+    return { x, y };
+};
+/**
+ * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
+ * scrubbing, marquee selection). Detects when the pointer is in an edge zone
+ * and repeatedly invokes `onTick` while it stays there. The consumer performs
+ * the actual scrolling (and any dependent updates) inside `onTick`, so it can
+ * read a settled scroll position afterwards.
+ */
+const startTimelineEdgeAutoScroll = ({ includeVertical, onTick, }) => {
+    let active = { x: null, y: null };
+    let lastPointer = null;
+    let interval = null;
+    const stopInterval = () => {
+        if (interval !== null) {
+            clearInterval(interval);
+            interval = null;
+        }
+    };
+    const tick = () => {
+        if (lastPointer === null) {
+            return;
+        }
+        active = getEdgeScrollDirections({
+            clientX: lastPointer.clientX,
+            clientY: lastPointer.clientY,
+            includeVertical,
+            active,
+        });
+        if (active.x === null && active.y === null) {
+            stopInterval();
+            return;
+        }
+        onTick(active);
+    };
+    const update = (e) => {
+        lastPointer = { clientX: e.clientX, clientY: e.clientY };
+        active = getEdgeScrollDirections({
+            clientX: e.clientX,
+            clientY: e.clientY,
+            includeVertical,
+            active,
+        });
+        if (active.x !== null || active.y !== null) {
+            if (interval === null) {
+                onTick(active);
+                interval = setInterval(tick, EDGE_SCROLL_INTERVAL_MS);
+            }
+        }
+        else {
+            stopInterval();
+        }
+        return active;
+    };
+    const stop = () => {
+        stopInterval();
+        lastPointer = null;
+        active = { x: null, y: null };
+    };
+    return { update, stop };
+};
+exports.startTimelineEdgeAutoScroll = startTimelineEdgeAutoScroll;
 const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft, }) => {
     var _a;
     return ((0, exports.getFrameFromX)({
@@ -28,7 +148,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = (0, exports.getFrameFromX)({
-        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - SCROLL_INCREMENT,
+        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - exports.SCROLL_INCREMENT,
         durationInFrames,
         width,
         extrapolate: 'clamp',
@@ -71,6 +191,9 @@ exports.isCursorInViewport = isCursorInViewport;
 const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
     var _a, _b, _c;
     var _d, _e;
+    // Sync the imperative frame first: scrolling below triggers the scroll
+    // listener in TimelineSlider, which reads the frame imperatively.
+    (0, imperative_state_1.setCurrentFrame)(frame);
     (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
     const width = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0;
     const scrollLeft = (_e = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _e !== void 0 ? _e : 0;
@@ -183,7 +306,7 @@ const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
     const nextFrame = calculateFrameWhileScrollingRight({
         durationInFrames,
         width,
-        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + SCROLL_INCREMENT,
+        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + exports.SCROLL_INCREMENT,
     });
     const currentFrame = calculateFrameWhileScrollingRight({
         durationInFrames,

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -1,6 +1,4 @@
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineHeight: ({ shown, hasBeenCut, isStill, }: {
-    shown: TimelineTrackData[];
-    hasBeenCut: boolean;
-    isStill: boolean;
-}) => number;
+export declare const useTimelineTrackHeights: ({ timeline, }: {
+    timeline: readonly TimelineTrackData[];
+}) => readonly number[];