@remotion/studio 4.0.445 → 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-bqd9dhnk.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/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/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.445",
+	"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.445",
-		"@remotion/player": "4.0.445",
-		"@remotion/media-utils": "4.0.445",
-		"@remotion/renderer": "4.0.445",
-		"@remotion/web-renderer": "4.0.445",
-		"@remotion/studio-shared": "4.0.445",
-		"@remotion/zod-types": "4.0.445",
+		"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.445",
+		"@remotion/eslint-config-internal": "4.0.446",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},