@remotion/studio 4.0.513 → 4.0.515

package/dist/components/Timeline/TimelineVirtualization.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineVirtualization = exports.TimelineVirtualizationProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_refs_1 = require("./timeline-refs");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const use_timeline_height_1 = require("./use-timeline-height");
+const TimelineVirtualizationContext = (0, react_1.createContext)(null);
+const getSelectionTrackKey = (selection) => {
+    if (selection.type === 'guide') {
+        return null;
+    }
+    return (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selection.nodePathInfo);
+};
+const TimelineVirtualizationProvider = ({ children, hasBeenCut, isStill, timeline }) => {
+    const trackHeights = (0, use_timeline_height_1.useTimelineTrackHeights)({ timeline });
+    const { revealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const paddingStart = isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT;
+    const paddingEnd = timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
+        (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0);
+    const layout = (0, react_1.useMemo)(() => {
+        var _a;
+        var _b, _c;
+        const siblingIndexes = new Array(timeline.length);
+        const subtreeEndIndexes = new Array(timeline.length).fill(timeline.length);
+        const openTracks = [];
+        const siblingCounts = new Map();
+        for (let index = 0; index < timeline.length; index++) {
+            const { depth } = timeline[index];
+            while (openTracks.length > 0 &&
+                openTracks[openTracks.length - 1].depth >= depth) {
+                const completed = openTracks.pop();
+                subtreeEndIndexes[completed.index] = index;
+            }
+            const parentIndex = (_b = (_a = openTracks[openTracks.length - 1]) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : null;
+            const siblingIndex = (_c = siblingCounts.get(parentIndex)) !== null && _c !== void 0 ? _c : 0;
+            siblingIndexes[index] = siblingIndex;
+            siblingCounts.set(parentIndex, siblingIndex + 1);
+            openTracks.push({ depth, index });
+        }
+        const offsets = new Array(timeline.length + 1);
+        offsets[0] = paddingStart;
+        for (let index = 0; index < trackHeights.length; index++) {
+            offsets[index + 1] = offsets[index] + trackHeights[index];
+        }
+        const rows = timeline.map((track, index) => ({
+            afterDropLineOffset: offsets[subtreeEndIndexes[index]] - offsets[index],
+            siblingIndex: siblingIndexes[index],
+            track,
+        }));
+        const rootTrackIndexes = new Map();
+        for (let index = 0; index < timeline.length; index++) {
+            const { nodePathInfo } = timeline[index];
+            if (nodePathInfo !== null) {
+                rootTrackIndexes.set((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo), index);
+            }
+        }
+        return {
+            rootTrackIndexes,
+            rows,
+            tracksEnd: offsets[offsets.length - 1],
+        };
+    }, [paddingStart, timeline, trackHeights]);
+    const selectedTrackIndexes = (0, react_1.useMemo)(() => {
+        const indexes = new Set();
+        if (selectedItems.length !== 1) {
+            return indexes;
+        }
+        for (const selectedItem of selectedItems) {
+            const key = getSelectionTrackKey(selectedItem);
+            const index = key === null ? undefined : layout.rootTrackIndexes.get(key);
+            if (index !== undefined) {
+                indexes.add(index);
+            }
+        }
+        return indexes;
+    }, [layout.rootTrackIndexes, selectedItems]);
+    const trackHeightsRef = (0, react_1.useRef)(trackHeights);
+    trackHeightsRef.current = trackHeights;
+    const timelineRef = (0, react_1.useRef)(timeline);
+    timelineRef.current = timeline;
+    const estimateSize = (0, react_1.useCallback)((index) => {
+        var _a;
+        return (_a = trackHeightsRef.current[index]) !== null && _a !== void 0 ? _a : 0;
+    }, []);
+    const getItemKey = (0, react_1.useCallback)((index) => {
+        var _a;
+        var _b;
+        return (_b = (_a = timelineRef.current[index]) === null || _a === void 0 ? void 0 : _a.sequence.id) !== null && _b !== void 0 ? _b : index;
+    }, []);
+    const rangeExtractor = (0, react_1.useCallback)((range) => {
+        const indexes = new Set((0, react_virtual_1.defaultRangeExtractor)(range));
+        for (const selectedIndex of selectedTrackIndexes) {
+            indexes.add(selectedIndex);
+        }
+        return [...indexes].sort((a, b) => a - b);
+    }, [selectedTrackIndexes]);
+    const getScrollElement = (0, react_1.useCallback)(() => timeline_refs_1.timelineVerticalScroll.current, []);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: timeline.length,
+        estimateSize,
+        getItemKey,
+        getScrollElement,
+        overscan: 8,
+        paddingEnd,
+        paddingStart,
+        rangeExtractor,
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        virtualizer.measure();
+    }, [trackHeights, virtualizer]);
+    (0, react_1.useEffect)(() => {
+        if (revealRequest === null) {
+            return;
+        }
+        const key = getSelectionTrackKey(revealRequest.item);
+        const index = key === null ? undefined : layout.rootTrackIndexes.get(key);
+        if (index !== undefined) {
+            virtualizer.scrollToIndex(index, { align: 'center' });
+        }
+    }, [layout.rootTrackIndexes, revealRequest, virtualizer]);
+    const virtualItems = virtualizer.getVirtualItems();
+    const value = (0, react_1.useMemo)(() => ({
+        rows: layout.rows,
+        totalSize: layout.tracksEnd + paddingEnd,
+        tracksEnd: layout.tracksEnd,
+        virtualItems,
+    }), [layout.rows, layout.tracksEnd, paddingEnd, virtualItems]);
+    return (jsx_runtime_1.jsx(TimelineVirtualizationContext.Provider, { value: value, children: children }));
+};
+exports.TimelineVirtualizationProvider = TimelineVirtualizationProvider;
+const useTimelineVirtualization = () => {
+    const context = (0, react_1.useContext)(TimelineVirtualizationContext);
+    if (context === null) {
+        throw new Error('useTimelineVirtualization must be used inside TimelineVirtualizationProvider');
+    }
+    return context;
+};
+exports.useTimelineVirtualization = useTimelineVirtualization;

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

@@ -2,7 +2,9 @@
 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 browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
+const effect_operations_api_1 = require("../effect-operations-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 +39,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 {
@@ -62,7 +64,10 @@ const deleteEffects = (effects) => {
     if (effects.length === 0) {
         return Promise.resolve(false);
     }
-    return (0, call_api_1.callApi)('/api/delete-effect', effects.map((effect) => {
+    if (!(0, browser_studio_operations_1.canUseEffectOperations)()) {
+        return Promise.resolve(false);
+    }
+    return (0, effect_operations_api_1.deleteEffects)(effects.map((effect) => {
         const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
         return effect.type === 'single-effect'
             ? {

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateSelectedTimelineItems = exports.isDuplicatableEffectSelection = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
     if (nodePathInfos.length === 0) {
@@ -64,7 +66,7 @@ exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
 const isDuplicatableEffectSelection = (selection) => selection.type === 'sequence-effect';
 exports.isDuplicatableEffectSelection = isDuplicatableEffectSelection;
 const duplicateEffectsFromSource = (effects) => {
-    return (0, call_api_1.callApi)('/api/duplicate-effect', effects.map((effect) => {
+    return (0, effect_operations_api_1.duplicateEffects)(effects.map((effect) => {
         const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
         return {
             fileName: nodePath.absolutePath,
@@ -92,7 +94,7 @@ const duplicateSelectedTimelineItems = ({ selections, confirm, }) => {
         return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
     }
     const effectSelections = selections.filter(exports.isDuplicatableEffectSelection);
-    if (effectSelections.length === 0) {
+    if (effectSelections.length === 0 || !(0, browser_studio_operations_1.canUseEffectOperations)()) {
         return null;
     }
     return duplicateEffectsFromSource(effectSelections);

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/save-effect-prop.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectProp = exports.saveMultipleEffectProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
-const call_api_1 = require("../call-api");
+const effect_operations_api_1 = require("../effect-operations-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 saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
@@ -21,7 +21,7 @@ const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel
             schema: change.schema,
         }));
     }
-    return (0, call_api_1.callApi)('/api/save-multiple-effect-props', {
+    return (0, effect_operations_api_1.saveMultipleEffectProps)({
         edits: changes.map((change) => change.type === 'effect-param'
             ? {
                 type: 'effect-param',
@@ -71,7 +71,7 @@ const saveEffectProp = (input) => {
                 schema,
             }),
         applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', input.type === 'effect-param'
+        apiCall: () => (0, effect_operations_api_1.saveEffectProps)(input.type === 'effect-param'
             ? {
                 type: 'effect-param',
                 fileName,

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,