@remotion/studio 4.0.519 → 4.0.520

package/dist/components/Timeline/TimelineZoomControls.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
@@ -45,6 +46,7 @@ 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_refs_1 = require("./timeline-refs");
 const TIMELINE_ZOOM_BUTTON_FACTOR = 1.2;
 const container = {
     color: colors_1.BLACK,
@@ -55,10 +57,11 @@ const container = {
 const buttonStyle = {
     fontSize: 24,
 };
-const TimelineZoomSlider = ({ maxWidth, maxZoom }) => {
-    var _a;
+const TimelineZoomSlider = ({ maxWidth, minZoom, timelineViewportWidth }) => {
+    var _a, _b;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const onChange = (0, react_1.useCallback)((e) => {
@@ -67,26 +70,40 @@ const TimelineZoomSlider = ({ maxWidth, maxZoom }) => {
         }
         setZoom(canvasContent.compositionId, () => (0, get_timeline_max_zoom_1.sliderValueToTimelineZoom)({
             sliderValue: Number(e.target.value),
-            maxZoom,
+            minZoom,
         }), {
             anchorFrame: null,
             anchorContentX: null,
         });
-    }, [canvasContent, maxZoom, setZoom]);
+    }, [canvasContent, minZoom, setZoom]);
     if (isStill ||
         canvasContent === null ||
         canvasContent.type !== 'composition') {
         return null;
     }
-    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 zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+        durationInFrames: (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1,
+        timelineViewportWidth,
+        zoom: (_b = zoomMap[canvasContent.compositionId]) !== null && _b !== void 0 ? _b : null,
+    });
+    const roundedZoom = Math.round(zoom * 100) / 100;
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${roundedZoom}px/frame)`, alt: `Timeline zoom (${roundedZoom}px/frame)`, 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, minZoom }), onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
 };
 const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
     var _a;
+    var _b, _c, _d;
     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 timelineSize = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const timelineViewportWidth = (_c = (_b = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _b !== void 0 ? _b : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0;
+    const minZoom = (0, get_timeline_max_zoom_1.getTimelineMinZoom)({
+        durationInFrames: (_d = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _d !== void 0 ? _d : 1,
+        timelineViewportWidth,
+    });
     const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
@@ -106,7 +123,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, 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 }) })
+            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, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), 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/delete-selected-timeline-item.js

@@ -52,11 +52,11 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
         if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
-        return true;
+        return result.success;
     })
         .catch((err) => {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        return true;
+        return false;
     });
 };
 exports.deleteSequencesFromSource = deleteSequencesFromSource;

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

@@ -3,6 +3,7 @@ export declare const canScrollTimelineIntoDirection: () => {
     canScrollLeft: boolean;
 };
 export declare const SCROLL_INCREMENT = 200;
+export declare const getTimelineContentWidth: () => number;
 export declare const EDGE_SCROLL_VERTICAL_INCREMENT = 60;
 export type TimelineEdgeScrollDirections = {
     x: 'left' | 'right' | null;

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

@@ -1,6 +1,6 @@
 "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.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.SCROLL_INCREMENT = 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.getTimelineContentWidth = 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");
@@ -15,6 +15,12 @@ const canScrollTimelineIntoDirection = () => {
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
 exports.SCROLL_INCREMENT = 200;
+const getTimelineContentWidth = () => {
+    var _a, _b;
+    var _c, _d;
+    return ((_d = (_c = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0);
+};
+exports.getTimelineContentWidth = getTimelineContentWidth;
 exports.EDGE_SCROLL_VERTICAL_INCREMENT = 60;
 const EDGE_SCROLL_INTERVAL_MS = 100;
 // Once edge-scrolling has started, the pointer must move this many pixels
@@ -169,10 +175,10 @@ const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
 };
 exports.getFrameWhileScrollingLeft = getFrameWhileScrollingLeft;
 const isCursorInViewport = ({ frame, durationInFrames, }) => {
-    var _a, _b;
-    var _c, _d;
-    const width = (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _c !== void 0 ? _c : 0;
-    const scrollLeft = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+    var _a;
+    var _b;
+    const width = (0, exports.getTimelineContentWidth)();
+    const scrollLeft = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
     const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
         nextFrame: frame,
         durationInFrames,
@@ -194,14 +200,14 @@ const isCursorInViewport = ({ frame, durationInFrames, }) => {
 };
 exports.isCursorInViewport = isCursorInViewport;
 const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
-    var _a, _b, _c;
-    var _d, _e;
+    var _a, _b;
+    var _c;
     // 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;
+    const width = (0, exports.getTimelineContentWidth)();
+    const scrollLeft = (_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) !== null && _c !== void 0 ? _c : 0;
     if (direction === 'fit-left') {
         const currentFrameLeft = (0, exports.getFrameFromX)({
             clientX: scrollLeft,
@@ -281,22 +287,20 @@ const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, })
 };
 exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
 const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
-    var _a, _b;
+    var _a;
     const frameIncrement = getFrameIncrement(durationInFrames);
     const framesRemaining = durationInFrames - 1 - nextFrame;
     const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
-    const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
+    const scrollPos = (0, exports.getTimelineContentWidth)() -
         fromRight -
-        ((_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) +
+        ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) +
         timeline_layout_1.TIMELINE_PADDING +
         4; // clearfix;
     return scrollPos;
 };
 exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRightEdge;
 const getFrameIncrement = (durationInFrames) => {
-    var _a;
-    var _b;
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    const width = (0, exports.getTimelineContentWidth)();
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
@@ -366,7 +370,7 @@ const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames
     if (!current) {
         return () => undefined;
     }
-    const oldTimelineWidth = current.scrollWidth;
+    const oldTimelineWidth = (0, exports.getTimelineContentWidth)();
     const oldScrollLeft = current.scrollLeft;
     const frameIncrement = (0, exports.getFrameIncrementFromWidth)(currentDurationInFrames, oldTimelineWidth);
     const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
@@ -381,7 +385,7 @@ const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames
             anchorContentX: prevCursorPosition,
             oldScrollLeft,
             oldTimelineWidth,
-            newTimelineWidth: current.scrollWidth,
+            newTimelineWidth: (0, exports.getTimelineContentWidth)(),
         });
     };
 };

package/dist/components/Timeline/use-delete-timeline-items.d.ts

@@ -0,0 +1 @@
+export declare const useDeleteTimelineItems: () => (selectedItemsOverride: readonly import("@remotion/canvas").CanvasSelectionItem[] | null) => void;

package/dist/components/Timeline/use-delete-timeline-items.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteTimelineItems = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const editor_guides_1 = require("../../state/editor-guides");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
+const imperative_state_1 = require("./imperative-state");
+const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
+const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
+const useDeleteTimelineItems = () => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    return (0, react_1.useCallback)((selectedItemsOverride) => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const { clientId } = previewServerState;
+        const { selectedItems: currentSelectedItems, clearSelection, selectItems, } = currentSelection.current;
+        const selectedItems = selectedItemsOverride !== null && selectedItemsOverride !== void 0 ? selectedItemsOverride : currentSelectedItems;
+        const sequences = sequencesRef.current;
+        const propStatuses = propStatusesRef.current;
+        const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
+        if (selectedItems.length === 0) {
+            return;
+        }
+        const selectedGuide = selectedItems.find((item) => item.type === 'guide');
+        if (selectedGuide) {
+            setGuidesList((prevGuides) => {
+                const newGuides = prevGuides.filter((guide) => guide.id !== selectedGuide.guideId);
+                (0, editor_guides_1.persistGuidesList)(newGuides);
+                return newGuides;
+            });
+            clearSelection();
+            return;
+        }
+        const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            setPropStatuses,
+            clientId,
+            confirm,
+            propStatuses,
+            timelinePosition,
+        });
+        if (deletePromise !== null) {
+            deletePromise
+                .then((deleted) => {
+                if (!deleted) {
+                    return;
+                }
+                const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
+                    selections: selectedItems,
+                    sequences,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    propStatuses,
+                    timelinePosition,
+                });
+                if (nextSelection.length === 0) {
+                    clearSelection();
+                }
+                else {
+                    selectItems(nextSelection);
+                }
+            })
+                .catch(() => undefined);
+            return;
+        }
+        const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+        if (easingSelections.length === selectedItems.length) {
+            const resetEasingPromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+                selections: easingSelections,
+                sequences,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                propStatuses,
+                setPropStatuses,
+                clientId,
+                easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
+            });
+            if (resetEasingPromise !== null) {
+                resetEasingPromise.catch(() => undefined);
+                return;
+            }
+        }
+        const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
+            selections: selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses,
+            setPropStatuses,
+            clientId,
+        });
+        if (resetPromise !== null) {
+            resetPromise.catch(() => undefined);
+        }
+    }, [
+        confirm,
+        currentSelection,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        sequencesRef,
+        setGuidesList,
+        setPropStatuses,
+    ]);
+};
+exports.useDeleteTimelineItems = useDeleteTimelineItems;

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -17,15 +17,8 @@ const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
-const isEventInsideElement = (event, element) => {
-    if (event.target instanceof Node && element.contains(event.target)) {
-        return true;
-    }
-    const rect = element.getBoundingClientRect();
-    return (event.clientX >= rect.left &&
-        event.clientX <= rect.right &&
-        event.clientY >= rect.top &&
-        event.clientY <= rect.bottom);
+const isEventTargetInsideElement = (event, element) => {
+    return event.target instanceof Node && element.contains(event.target);
 };
 const useTimelineAssetDrop = () => {
     var _a, _b;
@@ -60,13 +53,14 @@ const useTimelineAssetDrop = () => {
             return null;
         }
         const scrollable = timeline_refs_1.scrollableRef.current;
-        return scrollable !== null && isEventInsideElement(event, scrollable)
+        return scrollable !== null &&
+            isEventTargetInsideElement(event, scrollable)
             ? (0, timeline_scroll_logic_1.getFrameFromTimelineDrop)({
                 clientX: event.clientX,
                 durationInFrames: videoConfig.durationInFrames,
                 scrollLeft: scrollable.scrollLeft,
                 timelineLeft: scrollable.getBoundingClientRect().left,
-                timelineWidth: scrollable.scrollWidth,
+                timelineWidth: (0, timeline_scroll_logic_1.getTimelineContentWidth)(),
             })
             : (0, imperative_state_1.getCurrentFrame)();
     }, [videoConfig]);
@@ -76,7 +70,7 @@ const useTimelineAssetDrop = () => {
         if (timeline === null ||
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
-            !isEventInsideElement(event, timeline)) {
+            !isEventTargetInsideElement(event, timeline)) {
             setAssetDropFrame(null);
             return;
         }
@@ -86,7 +80,7 @@ const useTimelineAssetDrop = () => {
         const scrollable = timeline_refs_1.scrollableRef.current;
         const shouldShowDropFrame = canInsertAsset &&
             scrollable !== null &&
-            isEventInsideElement(event, scrollable);
+            isEventTargetInsideElement(event, scrollable);
         setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
     }, [canInsertAsset, getDropFrame]);
     const onAssetDrop = (0, react_1.useCallback)(async (event) => {
@@ -96,7 +90,7 @@ const useTimelineAssetDrop = () => {
         if (timeline === null ||
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
-            !isEventInsideElement(event, timeline)) {
+            !isEventTargetInsideElement(event, timeline)) {
             return;
         }
         const localFiles = (0, drop_handler_data_1.isFileDragEvent)(event)

package/dist/components/WebMcp.js

@@ -6,6 +6,7 @@ const remotion_1 = require("remotion");
 const pause_1 = require("../api/pause");
 const play_1 = require("../api/play");
 const seek_1 = require("../api/seek");
+const current_error_1 = require("../error-overlay/current-error");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const format_file_location_1 = require("../helpers/format-file-location");
@@ -21,6 +22,7 @@ const find_track_for_node_path_info_1 = require("./Timeline/find-track-for-node-
 const imperative_state_1 = require("./Timeline/imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("./Timeline/parse-keyframe-field-from-node-path");
 const should_show_track_in_timeline_1 = require("./Timeline/should-show-track-in-timeline");
+const timeline_refs_1 = require("./Timeline/timeline-refs");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const use_resolved_stack_react_to_change_1 = require("./Timeline/use-resolved-stack-react-to-change");
@@ -64,7 +66,7 @@ const WebMcp = () => {
     const { canSelect, clearSelection, selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const { canvasContent, compositions, currentCompositionMetadata, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { playbackRate: currentPlaybackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
-    const [, , imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
+    const { isPlaying } = remotion_1.Internals.Timeline.useTimelineContext();
     const { mediaVolume, playerMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { setZoom: setTimelineZoom, zoom: timelineZoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -201,6 +203,38 @@ const WebMcp = () => {
             }).filter((timelineTrack) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(timelineTrack, durationInFrames));
         };
         Promise.all([
+            modelContext.registerTool({
+                name: 'get_current_error',
+                title: 'Get current Studio error',
+                description: 'Read the error currently shown in the Remotion Studio error overlay. Returns null when the overlay is not visible and includes symbolicated stack frames when symbolication succeeds.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: async () => {
+                    var _a, _b;
+                    const currentError = (0, current_error_1.getCurrentError)();
+                    if (currentError === null) {
+                        return null;
+                    }
+                    let symbolicatedStackFrames = null;
+                    try {
+                        const record = await currentError.symbolication;
+                        symbolicatedStackFrames = (_a = record === null || record === void 0 ? void 0 : record.stackFrames) !== null && _a !== void 0 ? _a : null;
+                    }
+                    catch (_c) {
+                        // Fall back to the original stack if symbolication fails.
+                    }
+                    return {
+                        name: currentError.error.name,
+                        message: currentError.error.message,
+                        stack: (_b = currentError.error.stack) !== null && _b !== void 0 ? _b : null,
+                        symbolicatedStackFrames,
+                    };
+                },
+            }, { signal: controller.signal }),
             modelContext.registerTool({
                 name: 'get_compositions',
                 title: 'Get Studio compositions',
@@ -496,6 +530,7 @@ const WebMcp = () => {
                 annotations: { readOnlyHint: true },
                 execute: () => {
                     var _a;
+                    var _b, _c;
                     const compositionId = currentCompositionRef.current;
                     if (compositionId === null) {
                         return Promise.resolve({
@@ -509,17 +544,28 @@ const WebMcp = () => {
                             timelineZoom: null,
                         });
                     }
+                    const durationInFrames = (0, imperative_state_1.getCurrentDuration)();
+                    const timelineViewportWidth = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+                    const minZoom = (0, get_timeline_max_zoom_1.getTimelineMinZoom)({
+                        durationInFrames,
+                        timelineViewportWidth,
+                    });
+                    const timelineZoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+                        durationInFrames,
+                        timelineViewportWidth,
+                        zoom: (_c = timelineZoomRef.current[compositionId]) !== null && _c !== void 0 ? _c : null,
+                    });
                     return Promise.resolve({
                         currentComposition: compositionId,
                         currentFrame: (0, imperative_state_1.getCurrentFrame)(),
-                        playing: imperativePlaying.current,
+                        playing: isPlaying(),
                         muted: playerMutedRef.current,
                         volume: mediaVolumeRef.current,
                         playbackRate: playbackRateRef.current,
                         looping: (0, loop_1.loadLoopOption)(),
                         timelineZoom: (0, get_timeline_max_zoom_1.timelineZoomToNormalized)({
-                            zoom: (_a = timelineZoomRef.current[compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM,
-                            maxZoom: (0, get_timeline_max_zoom_1.getTimelineMaxZoom)((0, imperative_state_1.getCurrentDuration)()),
+                            zoom: timelineZoom,
+                            minZoom,
                         }),
                     });
                 },
@@ -823,6 +869,8 @@ const WebMcp = () => {
                 },
                 annotations: { readOnlyHint: false },
                 execute: ({ zoom }) => {
+                    var _a;
+                    var _b;
                     if (typeof zoom !== 'number' ||
                         !Number.isFinite(zoom) ||
                         zoom < 0 ||
@@ -837,13 +885,18 @@ const WebMcp = () => {
                     if (durationInFrames <= 1) {
                         throw new Error('The current composition is a still and has no timeline zoom.');
                     }
-                    const maxZoom = (0, get_timeline_max_zoom_1.getTimelineMaxZoom)(durationInFrames);
+                    const timelineViewportWidth = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+                    const minZoom = (0, get_timeline_max_zoom_1.getTimelineMinZoom)({
+                        durationInFrames,
+                        timelineViewportWidth,
+                    });
                     const timelineZoom = (0, get_timeline_max_zoom_1.clampTimelineZoom)({
                         zoom: (0, get_timeline_max_zoom_1.normalizedToTimelineZoom)({
                             normalized: zoom,
-                            maxZoom,
+                            minZoom,
                         }),
                         durationInFrames,
+                        timelineViewportWidth,
                     });
                     setTimelineZoom(compositionId, () => timelineZoom, {
                         anchorFrame: null,
@@ -853,7 +906,7 @@ const WebMcp = () => {
                         currentComposition: compositionId,
                         timelineZoom: (0, get_timeline_max_zoom_1.timelineZoomToNormalized)({
                             zoom: timelineZoom,
-                            maxZoom,
+                            minZoom,
                         }),
                     });
                 },
@@ -931,7 +984,7 @@ const WebMcp = () => {
         };
     }, [
         clearSelection,
-        imperativePlaying,
+        isPlaying,
         selectComposition,
         selectItems,
         setEditorShowGuides,

package/dist/components/ZoomPersistor.js

@@ -6,7 +6,7 @@ const remotion_1 = require("remotion");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const makeKey = () => {
-    return `remotion.zoom-map`;
+    return `remotion.zoom-map-pixels-per-frame`;
 };
 const persistCurrentZoom = (zoom) => {
     localStorage.setItem(makeKey(), JSON.stringify(zoom));
@@ -17,7 +17,7 @@ const getZoomFromLocalStorage = () => {
 };
 exports.getZoomFromLocalStorage = getZoomFromLocalStorage;
 const ZoomPersistor = () => {
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const urlState = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();

package/dist/components/composition-drag-data.d.ts

@@ -0,0 +1,36 @@
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+export type CompositionDragData = {
+    readonly type: 'remotion-composition';
+    readonly version: 1;
+    readonly compositionId: string;
+    readonly compositionFile: string | null;
+};
+export type CompositionDragPreviewMetadata = {
+    readonly type: 'composition';
+    readonly width: number | null;
+    readonly height: number | null;
+    readonly durationInFrames: number | null;
+    readonly mimeType: string;
+};
+type MakeCompositionDragDataInput = {
+    readonly compositionFile: string | null;
+    readonly compositionId: string;
+    readonly width: number | null;
+    readonly height: number | null;
+    readonly durationInFrames: number | null;
+};
+type SerializedCompositionDragData = {
+    readonly mimeType: string;
+    readonly payload: string;
+};
+type CompositionDragDataTransfer = {
+    readonly types: ArrayLike<string>;
+    readonly getData: (mimeType: string) => string;
+};
+export declare const makeCompositionDragData: ({ compositionFile, compositionId, width, height, durationInFrames, }: MakeCompositionDragDataInput) => SerializedCompositionDragData & {
+    readonly data: CompositionDragData;
+};
+export declare const getCompositionDragPreviewMetadata: (mimeTypes: ArrayLike<string>) => CompositionDragPreviewMetadata | null;
+export declare const parseCompositionDragData: (source: CompositionDragDataTransfer | SerializedCompositionDragData) => CompositionDragData | null;
+export declare const compositionDragDataToSymbolicatedStack: (dragData: CompositionDragData) => SymbolicatedStackFrame | null;
+export {};