@remotion/studio 4.0.443 → 4.0.444

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/frame-database.d.ts

@@ -6,11 +6,11 @@ export declare const getFrameDatabaseKeyPrefix: (src: string) => string;
 type VideoFrameAndLastUsed = {
     frame: VideoFrame;
     lastUsed: number;
+    size: number;
 };
 export declare const frameDatabase: Map<FrameDatabaseKey, VideoFrameAndLastUsed>;
 export declare const aspectRatioCache: Map<string, number>;
 export declare const getTimestampFromFrameDatabaseKey: (key: FrameDatabaseKey) => number;
 export declare const getAspectRatioFromCache: (src: string) => number | null;
-export declare const clearOldFrames: () => void;
-export declare const clearFramesForSrc: (src: string) => void;
+export declare const addFrameToCache: (key: FrameDatabaseKey, frame: VideoFrame) => void;
 export {};

package/dist/helpers/frame-database.js

@@ -1,7 +1,7 @@
 "use strict";
 // Cache the thumbnails of the timeline
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearFramesForSrc = exports.clearOldFrames = exports.getAspectRatioFromCache = exports.getTimestampFromFrameDatabaseKey = exports.aspectRatioCache = exports.frameDatabase = exports.getFrameDatabaseKeyPrefix = exports.makeFrameDatabaseKey = void 0;
+exports.addFrameToCache = exports.getAspectRatioFromCache = exports.getTimestampFromFrameDatabaseKey = exports.aspectRatioCache = exports.frameDatabase = exports.getFrameDatabaseKeyPrefix = exports.makeFrameDatabaseKey = void 0;
 const KEY_SEPARATOR = '|';
 const makeFrameDatabaseKey = (src, timestamp) => `${src}${KEY_SEPARATOR}${timestamp}`;
 exports.makeFrameDatabaseKey = makeFrameDatabaseKey;
@@ -9,6 +9,8 @@ const getFrameDatabaseKeyPrefix = (src) => {
     return `${src}${KEY_SEPARATOR}`;
 };
 exports.getFrameDatabaseKeyPrefix = getFrameDatabaseKeyPrefix;
+const MAX_CACHE_SIZE_BYTES = 10 * 1024 * 1024; // 10 MB
+let totalCacheSize = 0;
 exports.frameDatabase = new Map();
 exports.aspectRatioCache = new Map();
 const getTimestampFromFrameDatabaseKey = (key) => {
@@ -24,31 +26,40 @@ const getAspectRatioFromCache = (src) => {
     return null;
 };
 exports.getAspectRatioFromCache = getAspectRatioFromCache;
-// a 16:9 thumbnail is 43x23px wide - 43 * 23 * 4 = 4052 bytes
-// Our allowance is a 50MB frame cache, so we can store 12340 thumbnails
-const MAX_FRAMES_IN_CACHE = 12340;
-const clearOldFrames = () => {
-    if (exports.frameDatabase.size <= MAX_FRAMES_IN_CACHE) {
-        return;
-    }
-    const framesToRemove = Array.from(exports.frameDatabase.entries()).sort((a, b) => a[1].lastUsed - b[1].lastUsed);
-    for (const [key, frame] of framesToRemove.slice(0, framesToRemove.length - MAX_FRAMES_IN_CACHE)) {
-        frame.frame.close();
-        exports.frameDatabase.delete(key);
-    }
-};
-exports.clearOldFrames = clearOldFrames;
-const clearFramesForSrc = (src) => {
-    const keysToRemove = [];
-    const prefix = (0, exports.getFrameDatabaseKeyPrefix)(src);
-    for (const [key, frame] of exports.frameDatabase.entries()) {
-        if (key.startsWith(prefix)) {
-            frame.frame.close();
-            keysToRemove.push(key);
+const evictLRU = () => {
+    while (totalCacheSize > MAX_CACHE_SIZE_BYTES && exports.frameDatabase.size > 0) {
+        let oldestKey;
+        let oldestTime = Infinity;
+        for (const [key, candidate] of exports.frameDatabase) {
+            if (candidate.lastUsed < oldestTime) {
+                oldestTime = candidate.lastUsed;
+                oldestKey = key;
+            }
+        }
+        if (!oldestKey) {
+            break;
+        }
+        const entry = exports.frameDatabase.get(oldestKey);
+        if (entry) {
+            totalCacheSize -= entry.size;
+            entry.frame.close();
+            exports.frameDatabase.delete(oldestKey);
         }
     }
-    for (const key of keysToRemove) {
-        exports.frameDatabase.delete(key);
+};
+const addFrameToCache = (key, frame) => {
+    const existing = exports.frameDatabase.get(key);
+    if (existing) {
+        totalCacheSize -= existing.size;
+        existing.frame.close();
     }
+    const size = frame.allocationSize();
+    totalCacheSize += size;
+    exports.frameDatabase.set(key, {
+        frame,
+        lastUsed: Date.now(),
+        size,
+    });
+    evictLRU();
 };
-exports.clearFramesForSrc = clearFramesForSrc;
+exports.addFrameToCache = addFrameToCache;

package/dist/helpers/use-max-media-duration.js

@@ -53,7 +53,7 @@ const useMaxMediaDuration = (s, fps) => {
         };
     }, [src, fps]);
     if (maxMediaDuration !== null && (s.type === 'audio' || s.type === 'video')) {
-        return maxMediaDuration / s.playbackRate;
+        return maxMediaDuration;
     }
     return maxMediaDuration;
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.443",
+	"version": "4.0.444",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.443",
-		"@remotion/player": "4.0.443",
-		"@remotion/media-utils": "4.0.443",
-		"@remotion/renderer": "4.0.443",
-		"@remotion/web-renderer": "4.0.443",
-		"@remotion/studio-shared": "4.0.443",
-		"@remotion/zod-types": "4.0.443",
+		"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",
 		"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.443",
+		"@remotion/eslint-config-internal": "4.0.444",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/error-overlay/remotion-overlay/CompositionIdsDropdown.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CompositionIdsDropdown: React.FC<{
-    readonly compositionIds: readonly string[];
-    readonly currentId?: string | null;
-}>;

package/dist/error-overlay/remotion-overlay/CompositionIdsDropdown.js

@@ -1,108 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionIdsDropdown = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Button_1 = require("../../components/Button");
-const colors_1 = require("../../helpers/colors");
-const carets_1 = require("./carets");
-const CompositionIdListItem_1 = require("./CompositionIdListItem");
-const containerStyle = {
-    display: 'inline-block',
-    position: 'relative',
-};
-// Button styling provided by shared Button component
-const dropdownStyle = {
-    position: 'absolute',
-    top: '110%',
-    left: 0,
-    width: 320,
-    maxHeight: 300,
-    overflowY: 'auto',
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    borderRadius: 8,
-    padding: 8,
-    boxShadow: '0 6px 24px rgba(0,0,0,0.35)',
-    zIndex: 1000,
-    fontFamily: 'inherit',
-    fontSize: 14,
-};
-const searchStyle = {
-    width: '100%',
-    padding: '6px 8px',
-    borderRadius: 6,
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    background: colors_1.INPUT_BACKGROUND,
-    color: colors_1.TEXT_COLOR,
-    marginBottom: 8,
-    outline: 'none',
-    fontFamily: 'inherit',
-    fontSize: 14,
-};
-const CompositionIdsDropdown = ({ compositionIds, currentId }) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [query, setQuery] = (0, react_1.useState)('');
-    const containerRef = (0, react_1.useRef)(null);
-    const filtered = (0, react_1.useMemo)(() => {
-        const q = query.trim().toLowerCase();
-        if (!q) {
-            return compositionIds;
-        }
-        return compositionIds.filter((id) => id.toLowerCase().includes(q));
-    }, [compositionIds, query]);
-    const onSelect = (id) => {
-        const isQuery = window.remotion_isReadOnlyStudio;
-        if (isQuery) {
-            window.location.href = `${window.location.pathname}?/${id}`;
-        }
-        else {
-            window.location.href = `/${id}`;
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        if (!open) {
-            return;
-        }
-        const onClickAway = (e) => {
-            if (!containerRef.current) {
-                return;
-            }
-            if (!containerRef.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-        const onKey = (e) => {
-            if (e.key === 'Escape') {
-                setOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', onClickAway);
-        document.addEventListener('touchstart', onClickAway, { passive: true });
-        document.addEventListener('keydown', onKey);
-        return () => {
-            document.removeEventListener('mousedown', onClickAway);
-            document.removeEventListener('touchstart', onClickAway);
-            document.removeEventListener('keydown', onKey);
-        };
-    }, [open, containerRef]);
-    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, children: [
-            jsx_runtime_1.jsxs(Button_1.Button, { onClick: () => setOpen((p) => !p), buttonContainerStyle: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: 8,
-                    minWidth: 180,
-                }, children: [
-                    jsx_runtime_1.jsx("span", { style: {
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            fontSize: '14px',
-                            lineHeight: '24px',
-                        }, children: currentId !== null && currentId !== void 0 ? currentId : 'Select composition' }), jsx_runtime_1.jsx(carets_1.CaretDown, { size: 20, invert: open })
-                ] }), open ? (jsx_runtime_1.jsxs("div", { style: dropdownStyle, children: [
-                    jsx_runtime_1.jsx("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search compositions...", style: searchStyle, "aria-label": "Search compositions" }), jsx_runtime_1.jsx("div", { children: filtered.length === 0 ? (jsx_runtime_1.jsx("div", { style: { opacity: 0.7, padding: 8, textAlign: 'center' }, children: "No compositions found" })) : (filtered.map((id) => (jsx_runtime_1.jsx(CompositionIdListItem_1.CompositionIdListItem, { id: id, isActive: id === currentId, onSelect: onSelect }, id)))) })
-                ] })) : null] }));
-};
-exports.CompositionIdsDropdown = CompositionIdsDropdown;