@remotion/studio 4.0.444 → 4.0.446

package/dist/esm/renderEntry.mjs

@@ -208,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-1zvzzrkf.js").then(({ StudioInternals }) => {
+    import("./chunk-2dkkw8x5.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/get-asset-metadata.d.ts

@@ -3,6 +3,9 @@ import type { Dimensions } from './is-current-selected-still';
 export declare const remotion_outputsBase: string;
 export type AssetMetadata = {
     type: 'not-found';
+} | {
+    type: 'metadata-error';
+    error: Error;
 } | {
     type: 'found';
     size: number;

package/dist/helpers/get-asset-metadata.js

@@ -23,55 +23,63 @@ const getAssetMetadata = async (canvasContent, addTime) => {
     if (canvasContent.type === 'composition') {
         throw new Error('cannot get dimensions for composition');
     }
-    const src = getSrcFromCanvasContent(canvasContent);
-    const file = await fetch(src, {
-        method: 'HEAD',
-    });
-    if (file.status === 404) {
-        return { type: 'not-found' };
-    }
-    if (file.status !== 200) {
-        throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
-    }
-    const size = file.headers.get('content-length');
-    if (!size) {
-        throw new Error('Unexpected error: content-length is null');
-    }
-    const fetchedAt = Date.now();
-    const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
-    const fileType = (0, Preview_1.getPreviewFileType)(src);
-    if (fileType === 'video') {
-        const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
+    try {
+        const src = getSrcFromCanvasContent(canvasContent);
+        const file = await fetch(src, {
+            method: 'HEAD',
+        });
+        if (file.status === 404) {
+            return { type: 'not-found' };
+        }
+        if (file.status !== 200) {
+            throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
+        }
+        const size = file.headers.get('content-length');
+        if (!size) {
+            throw new Error('Unexpected error: content-length is null');
+        }
+        const fetchedAt = Date.now();
+        const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
+        const fileType = (0, Preview_1.getPreviewFileType)(src);
+        if (fileType === 'video') {
+            const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
+            return {
+                type: 'found',
+                size: Number(size),
+                dimensions: { width: resolution.width, height: resolution.height },
+                fetchedAt,
+            };
+        }
+        if (fileType === 'image') {
+            const resolution = await new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => {
+                    resolve({
+                        type: 'found',
+                        size: Number(size),
+                        dimensions: { width: img.width, height: img.height },
+                        fetchedAt,
+                    });
+                };
+                img.onerror = () => {
+                    reject(new Error('Failed to load image'));
+                };
+                img.src = srcWithTime;
+            });
+            return resolution;
+        }
         return {
             type: 'found',
+            dimensions: 'none',
             size: Number(size),
-            dimensions: { width: resolution.width, height: resolution.height },
             fetchedAt,
         };
     }
-    if (fileType === 'image') {
-        const resolution = await new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => {
-                resolve({
-                    type: 'found',
-                    size: Number(size),
-                    dimensions: { width: img.width, height: img.height },
-                    fetchedAt,
-                });
-            };
-            img.onerror = () => {
-                reject(new Error('Failed to load image'));
-            };
-            img.src = srcWithTime;
-        });
-        return resolution;
+    catch (err) {
+        return {
+            type: 'metadata-error',
+            error: err instanceof Error ? err : new Error(String(err)),
+        };
     }
-    return {
-        type: 'found',
-        dimensions: 'none',
-        size: Number(size),
-        fetchedAt,
-    };
 };
 exports.getAssetMetadata = getAssetMetadata;

package/dist/helpers/get-effective-translation.d.ts

@@ -1,5 +1,5 @@
 import type { Size } from '@remotion/player';
-import type { Translation } from 'remotion';
+import { type PreviewSize, type Translation } from 'remotion';
 export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
     canvasSize: Size;
     scale: number;
@@ -25,3 +25,15 @@ export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, co
     centerX: number;
     centerY: number;
 };
+export declare const applyZoomAroundFocalPoint: ({ canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }: {
+    readonly canvasSize: Size;
+    readonly contentDimensions: {
+        width: number;
+        height: number;
+    };
+    readonly previewSizeBefore: PreviewSize;
+    readonly oldNumericSize: number;
+    readonly newNumericSize: number;
+    readonly clientX: number;
+    readonly clientY: number;
+}) => PreviewSize;

package/dist/helpers/get-effective-translation.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+const remotion_1 = require("remotion");
+const smooth_zoom_1 = require("./smooth-zoom");
 const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
     const maxTranslation = Math.abs(canvasSize.width / 2 +
         (scale * compositionWidth) / 2 -
@@ -43,3 +45,45 @@ const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth
     };
 };
 exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;
+const applyZoomAroundFocalPoint = ({ canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }) => {
+    const scale = remotion_1.Internals.calculateScale({
+        canvasSize,
+        compositionHeight: contentDimensions.height,
+        compositionWidth: contentDimensions.width,
+        previewSize: previewSizeBefore.size,
+    });
+    const clampedNew = Math.min(smooth_zoom_1.MAX_ZOOM, Math.max(smooth_zoom_1.MIN_ZOOM, newNumericSize));
+    if (clampedNew === oldNumericSize) {
+        return previewSizeBefore;
+    }
+    const { centerX, centerY } = (0, exports.getCenterPointWhileScrolling)({
+        size: canvasSize,
+        clientX,
+        clientY,
+        compositionWidth: contentDimensions.width,
+        compositionHeight: contentDimensions.height,
+        scale,
+        translation: previewSizeBefore.translation,
+    });
+    const zoomDifference = clampedNew - oldNumericSize;
+    const uvCoordinatesX = centerX / contentDimensions.width;
+    const uvCoordinatesY = centerY / contentDimensions.height;
+    const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
+        (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
+    const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
+        (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
+    return {
+        size: clampedNew,
+        translation: (0, exports.getEffectiveTranslation)({
+            translation: {
+                x: previewSizeBefore.translation.x - correctionLeft / 2,
+                y: previewSizeBefore.translation.y - correctionTop / 2,
+            },
+            canvasSize,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            scale,
+        }),
+    };
+};
+exports.applyZoomAroundFocalPoint = applyZoomAroundFocalPoint;

package/dist/helpers/sidebar-scroll-into-view.d.ts

@@ -0,0 +1,13 @@
+export declare const scrollSidebarRowIntoViewIfNeeded: (element: HTMLElement | null) => void;
+export declare const markCompositionSidebarScrollFromRowClick: (compositionId: string) => void;
+export declare const maybeScrollCompositionSidebarRowIntoView: ({ element, compositionId, selected, }: {
+    element: HTMLElement | null;
+    compositionId: string;
+    selected: boolean;
+}) => void;
+export declare const markAssetSidebarScrollFromRowClick: (assetPath: string) => void;
+export declare const maybeScrollAssetSidebarRowIntoView: ({ element, assetPath, selected, }: {
+    element: HTMLElement | null;
+    assetPath: string;
+    selected: boolean;
+}) => void;

package/dist/helpers/sidebar-scroll-into-view.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.maybeScrollAssetSidebarRowIntoView = exports.markAssetSidebarScrollFromRowClick = exports.maybeScrollCompositionSidebarRowIntoView = exports.markCompositionSidebarScrollFromRowClick = exports.scrollSidebarRowIntoViewIfNeeded = void 0;
+const getComputedOverflowY = (el) => {
+    return getComputedStyle(el).overflowY;
+};
+const findVerticalScrollParent = (element) => {
+    var _a;
+    let cur = (_a = element === null || element === void 0 ? void 0 : element.parentElement) !== null && _a !== void 0 ? _a : null;
+    while (cur) {
+        const overflowY = getComputedOverflowY(cur);
+        if (overflowY === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowY === 'overlay') {
+            return cur;
+        }
+        cur = cur.parentElement;
+    }
+    return null;
+};
+const isVerticallyFullyVisibleInSidebarList = (element) => {
+    const scrollParent = findVerticalScrollParent(element);
+    const rect = element.getBoundingClientRect();
+    if (!scrollParent) {
+        return rect.top >= 0 && rect.bottom <= window.innerHeight;
+    }
+    const parentRect = scrollParent.getBoundingClientRect();
+    return rect.top >= parentRect.top && rect.bottom <= parentRect.bottom;
+};
+const scrollSidebarRowIntoViewIfNeeded = (element) => {
+    if (!element) {
+        return;
+    }
+    if (isVerticallyFullyVisibleInSidebarList(element)) {
+        return;
+    }
+    element.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+};
+exports.scrollSidebarRowIntoViewIfNeeded = scrollSidebarRowIntoViewIfNeeded;
+let skipCompositionScrollIntoViewForId = null;
+const markCompositionSidebarScrollFromRowClick = (compositionId) => {
+    skipCompositionScrollIntoViewForId = compositionId;
+};
+exports.markCompositionSidebarScrollFromRowClick = markCompositionSidebarScrollFromRowClick;
+const shouldSkipCompositionScrollIntoView = (compositionId) => {
+    if (skipCompositionScrollIntoViewForId === compositionId) {
+        skipCompositionScrollIntoViewForId = null;
+        return true;
+    }
+    return false;
+};
+const maybeScrollCompositionSidebarRowIntoView = ({ element, compositionId, selected, }) => {
+    if (!selected) {
+        return;
+    }
+    if (shouldSkipCompositionScrollIntoView(compositionId)) {
+        return;
+    }
+    (0, exports.scrollSidebarRowIntoViewIfNeeded)(element);
+};
+exports.maybeScrollCompositionSidebarRowIntoView = maybeScrollCompositionSidebarRowIntoView;
+let skipAssetScrollIntoViewForPath = null;
+const markAssetSidebarScrollFromRowClick = (assetPath) => {
+    skipAssetScrollIntoViewForPath = assetPath;
+};
+exports.markAssetSidebarScrollFromRowClick = markAssetSidebarScrollFromRowClick;
+const shouldSkipAssetScrollIntoView = (assetPath) => {
+    if (skipAssetScrollIntoViewForPath === assetPath) {
+        skipAssetScrollIntoViewForPath = null;
+        return true;
+    }
+    return false;
+};
+const maybeScrollAssetSidebarRowIntoView = ({ element, assetPath, selected, }) => {
+    if (!selected) {
+        return;
+    }
+    if (shouldSkipAssetScrollIntoView(assetPath)) {
+        return;
+    }
+    (0, exports.scrollSidebarRowIntoViewIfNeeded)(element);
+};
+exports.maybeScrollAssetSidebarRowIntoView = maybeScrollAssetSidebarRowIntoView;

package/dist/helpers/use-studio-canvas-dimensions.js

@@ -9,7 +9,9 @@ const useStudioCanvasDimensions = ({ canvasSize, contentDimensions, assetMetadat
     const { centerX, centerY, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none' ||
             contentDimensions === null ||
-            (assetMetadata && assetMetadata.type === 'not-found') ||
+            (assetMetadata &&
+                (assetMetadata.type === 'not-found' ||
+                    assetMetadata.type === 'metadata-error')) ||
             !canvasSize) {
             return {
                 centerX: previewSize.translation.x,

package/dist/state/timeline-zoom.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 export declare const TIMELINE_MIN_ZOOM = 1;
 export declare const TIMELINE_MAX_ZOOM = 5;
+export type TimelineSetZoomOptions = {
+    anchorFrame: number | null;
+    anchorContentX: number | null;
+};
 export declare const TimelineZoomCtx: React.Context<{
     zoom: Record<string, number>;
-    setZoom: (compositionId: string, prev: (prevZoom: number) => number) => void;
+    setZoom: (compositionId: string, prev: (prevZoom: number) => number, options?: TimelineSetZoomOptions | undefined) => void;
 }>;
 export declare const TimelineZoomContext: React.FC<{
     readonly children: React.ReactNode;

package/dist/state/timeline-zoom.js

@@ -15,26 +15,31 @@ exports.TimelineZoomCtx = (0, react_1.createContext)({
     },
 });
 const TimelineZoomContext = ({ children }) => {
-    const [zoom, setZoom] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
+    const [zoom, setZoomState] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
+    const setZoom = (0, react_1.useCallback)((compositionId, callback, options) => {
+        setZoomState((prevZoomMap) => {
+            var _a, _b, _c, _d;
+            const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
+            const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
+            const anchorFrame = (_b = options === null || options === void 0 ? void 0 : options.anchorFrame) !== null && _b !== void 0 ? _b : null;
+            const anchorContentX = (_c = options === null || options === void 0 ? void 0 : options.anchorContentX) !== null && _c !== void 0 ? _c : null;
+            (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
+                oldZoom: (_d = prevZoomMap[compositionId]) !== null && _d !== void 0 ? _d : exports.TIMELINE_MIN_ZOOM,
+                newZoom,
+                currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                anchorFrame,
+                anchorContentX,
+            });
+            return { ...prevZoomMap, [compositionId]: newZoom };
+        });
+    }, []);
     const value = (0, react_1.useMemo)(() => {
         return {
             zoom,
-            setZoom: (compositionId, callback) => {
-                setZoom((prevZoomMap) => {
-                    var _a, _b;
-                    const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
-                    const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
-                    (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
-                        oldZoom: (_b = prevZoomMap[compositionId]) !== null && _b !== void 0 ? _b : exports.TIMELINE_MIN_ZOOM,
-                        newZoom,
-                        currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
-                    });
-                    return { ...prevZoomMap, [compositionId]: newZoom };
-                });
-            },
+            setZoom,
         };
-    }, [zoom]);
+    }, [zoom, setZoom]);
     return (jsx_runtime_1.jsx(exports.TimelineZoomCtx.Provider, { value: value, children: children }));
 };
 exports.TimelineZoomContext = TimelineZoomContext;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.444",
+	"version": "4.0.446",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.444",
-		"@remotion/player": "4.0.444",
-		"@remotion/media-utils": "4.0.444",
-		"@remotion/renderer": "4.0.444",
-		"@remotion/web-renderer": "4.0.444",
-		"@remotion/studio-shared": "4.0.444",
-		"@remotion/zod-types": "4.0.444",
+		"remotion": "4.0.446",
+		"@remotion/player": "4.0.446",
+		"@remotion/media-utils": "4.0.446",
+		"@remotion/renderer": "4.0.446",
+		"@remotion/web-renderer": "4.0.446",
+		"@remotion/studio-shared": "4.0.446",
+		"@remotion/zod-types": "4.0.446",
 		"mediabunny": "1.39.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.444",
+		"@remotion/eslint-config-internal": "4.0.446",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},