@remotion/studio 4.0.519 → 4.0.521

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/UpdateStatusContext.d.ts

@@ -6,7 +6,12 @@ export type Bug = {
     link: string;
     versions: string[];
 };
+type UpgradeState = 'idle' | 'upgrading' | 'upgraded' | 'shutting-down' | 'shutdown';
 type UpdateStatusContextValue = {
+    readonly upgradeState: UpgradeState;
+    readonly upgradeError: string | null;
+    readonly upgrade: (version: string) => Promise<void>;
+    readonly shutdown: () => Promise<void>;
     readonly error: string | null;
     readonly info: UpdateAvailableResponse | null;
     readonly knownBugs: Bug[] | null;

package/dist/components/UpdateStatusContext.js

@@ -4,13 +4,56 @@ exports.useUpdateStatus = exports.UpdateStatusProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const shut_down_studio_1 = require("../api/shut-down-studio");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
+const call_api_1 = require("./call-api");
 const actions_1 = require("./RenderQueue/actions");
 const UpdateStatusContext = (0, react_1.createContext)(null);
 const UpdateStatusProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [upgradeState, setUpgradeState] = (0, react_1.useState)('idle');
+    const [upgradeError, setUpgradeError] = (0, react_1.useState)(null);
+    const busy = (0, react_1.useRef)(false);
+    const upgrade = (0, react_1.useCallback)(async (version) => {
+        if (busy.current) {
+            return;
+        }
+        busy.current = true;
+        setUpgradeState('upgrading');
+        setUpgradeError(null);
+        try {
+            await (0, call_api_1.callApi)('/api/upgrade-remotion', { version });
+            setUpgradeState('upgraded');
+        }
+        catch (err) {
+            setUpgradeError(err.message);
+            setUpgradeState('idle');
+        }
+        finally {
+            busy.current = false;
+        }
+    }, []);
+    const shutdown = (0, react_1.useCallback)(async () => {
+        if (busy.current) {
+            return;
+        }
+        busy.current = true;
+        setUpgradeState('shutting-down');
+        setUpgradeError(null);
+        try {
+            await (0, shut_down_studio_1.shutDownStudio)();
+            setUpgradeState('shutdown');
+        }
+        catch (err) {
+            setUpgradeError(err.message);
+            setUpgradeState('upgraded');
+        }
+        finally {
+            busy.current = false;
+        }
+    }, []);
     const [info, setInfo] = (0, react_1.useState)(null);
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -59,8 +102,16 @@ const UpdateStatusProvider = ({ children }) => {
         };
     }, [showUpdates]);
     const value = (0, react_1.useMemo)(() => {
-        return { error, info, knownBugs };
-    }, [error, info, knownBugs]);
+        return {
+            error,
+            info,
+            knownBugs,
+            upgradeState,
+            upgradeError,
+            upgrade,
+            shutdown,
+        };
+    }, [error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown]);
     return (jsx_runtime_1.jsx(UpdateStatusContext.Provider, { value: value, children: children }));
 };
 exports.UpdateStatusProvider = UpdateStatusProvider;

package/dist/components/UpdatesSettings.js

@@ -8,6 +8,7 @@ const copy_text_1 = require("../helpers/copy-text");
 const clipboard_1 = require("../icons/clipboard");
 const InlineAction_1 = require("./InlineAction");
 const KnownBugs_1 = require("./KnownBugs");
+const ModalButton_1 = require("./ModalButton");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
@@ -86,6 +87,7 @@ const commands = {
     yarn: 'yarn remotion upgrade',
     pnpm: 'pnpm exec remotion upgrade',
     bun: 'bun remotion upgrade',
+    nub: 'nubx remotion upgrade',
     unknown: 'npx remotion upgrade',
 };
 const skillsUpdateCommand = 'npx remotion skills update';
@@ -170,7 +172,7 @@ const RenderedReleaseNotes = ({ release }) => {
 };
 const UpdatesSettings = () => {
     const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
-    const { error, info, knownBugs } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const { error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown, } = (0, UpdateStatusContext_1.useUpdateStatus)();
     const [releaseNotes, setReleaseNotes] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!(info === null || info === void 0 ? void 0 : info.updateAvailable)) {
@@ -222,6 +224,23 @@ const UpdatesSettings = () => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
     }, []);
+    const onUpgrade = (0, react_1.useCallback)(() => {
+        if (info) {
+            upgrade(info.latestVersion);
+        }
+    }, [info, upgrade]);
+    if (upgradeState !== 'idle') {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx("div", { style: title, children: upgradeState === 'upgrading'
+                        ? 'Upgrading Remotion...'
+                        : 'Remotion has been upgraded.' }), jsx_runtime_1.jsx("div", { style: text, children: upgradeState === 'upgrading'
+                        ? 'This may take a few minutes. You can follow the progress in your terminal.'
+                        : upgradeState === 'shutdown'
+                            ? 'Studio is shutting down. Run your Studio start command again in the terminal to use the new version.'
+                            : 'Restart Studio to use the new version. Shut down the server below, then run your Studio start command again in the terminal.' }), upgradeState === 'upgraded' || upgradeState === 'shutting-down' ? (jsx_runtime_1.jsx("div", { style: { marginTop: 12 }, children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: shutdown, disabled: upgradeState === 'shutting-down', children: upgradeState === 'shutting-down'
+                            ? 'Shutting down...'
+                            : 'Shut down Studio' }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null] }));
+    }
     if (info === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: error ? (jsx_runtime_1.jsx("div", { style: { paddingTop: 12 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: 'Could not check for updates: ' + error, align: "flex-start", type: "error" }) })) : (jsx_runtime_1.jsx("div", { style: title, children: "Checking for updates..." })) }));
     }
@@ -235,9 +254,11 @@ const UpdatesSettings = () => {
                 jsx_runtime_1.jsxs("div", { style: title, children: ["You", "'re", " up to date."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Remotion ", info.currentVersion, " and your Remotion Agent Skills are up to date."] })
             ] }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To update, run the following ", updateActionType, ":"] })
-                ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["A new Remotion update is available. Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [info.updateAvailable && info.packageManager !== 'unknown' ? (jsx_runtime_1.jsxs("div", { style: { paddingTop: 12 }, children: [
+                    jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onUpgrade, children: ["Upgrade to ", info.latestVersion] }), jsx_runtime_1.jsx("div", { style: { ...text, marginTop: 8 }, children: "You will need to restart Studio after upgrading." })
+                ] })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null, hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["Or run the following ", updateActionType, ":"] })
+                ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["A new Remotion update is available. You can also run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                     jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
                 ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will update Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
                         ? ' and update your project Remotion Agent Skills.'

package/dist/components/WebMcp.js

@@ -5,7 +5,10 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const pause_1 = require("../api/pause");
 const play_1 = require("../api/play");
+const restart_studio_1 = require("../api/restart-studio");
 const seek_1 = require("../api/seek");
+const shut_down_studio_1 = require("../api/shut-down-studio");
+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 +24,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 +68,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 +205,62 @@ const WebMcp = () => {
             }).filter((timelineTrack) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(timelineTrack, durationInFrames));
         };
         Promise.all([
+            modelContext.registerTool({
+                name: 'restart_studio',
+                title: 'Restart Studio',
+                description: 'Restart the Studio server. The browser temporarily disconnects and reconnects when Studio is ready. Only available in a writable Studio with a server backend.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => (0, restart_studio_1.restartStudio)(),
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'shut_down_studio',
+                title: 'Shut down Studio',
+                description: 'Gracefully shut down the Studio server. The browser disconnects. Start Studio again from the terminal to reconnect. Only available in a writable Studio with a server backend.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => (0, shut_down_studio_1.shutDownStudio)(),
+            }, { signal: controller.signal }),
+            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 +556,7 @@ const WebMcp = () => {
                 annotations: { readOnlyHint: true },
                 execute: () => {
                     var _a;
+                    var _b, _c;
                     const compositionId = currentCompositionRef.current;
                     if (compositionId === null) {
                         return Promise.resolve({
@@ -509,17 +570,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 +895,8 @@ const WebMcp = () => {
                 },
                 annotations: { readOnlyHint: false },
                 execute: ({ zoom }) => {
+                    var _a;
+                    var _b;
                     if (typeof zoom !== 'number' ||
                         !Number.isFinite(zoom) ||
                         zoom < 0 ||
@@ -837,13 +911,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 +932,7 @@ const WebMcp = () => {
                         currentComposition: compositionId,
                         timelineZoom: (0, get_timeline_max_zoom_1.timelineZoomToNormalized)({
                             zoom: timelineZoom,
-                            maxZoom,
+                            minZoom,
                         }),
                     });
                 },
@@ -931,7 +1010,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 {};