@remotion/studio 4.0.442 → 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-j8c13fkw.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/timeline-layout.d.ts

@@ -16,4 +16,7 @@ export type SchemaFieldInfo = {
 };
 export declare const getSchemaFields: (controls: SequenceControls | null) => SchemaFieldInfo[] | null;
 export declare const getExpandedTrackHeight: (controls: SequenceControls | null) => number;
-export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => 25 | 50;
+export declare const TIMELINE_LAYER_HEIGHT_VIDEO = 75;
+export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 50;
+export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 25;
+export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => 25 | 50 | 75;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.getExpandedTrackHeight = exports.getSchemaFields = exports.UNSUPPORTED_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getSchemaFields = exports.UNSUPPORTED_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = void 0;
 exports.TIMELINE_PADDING = 16;
 exports.TIMELINE_BORDER = 1;
 exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
@@ -43,10 +43,16 @@ const getExpandedTrackHeight = (controls) => {
     return fields.reduce((sum, f) => sum + f.rowHeight, 0) + separators;
 };
 exports.getExpandedTrackHeight = getExpandedTrackHeight;
+exports.TIMELINE_LAYER_HEIGHT_VIDEO = 75;
+exports.TIMELINE_LAYER_HEIGHT_IMAGE = 50;
+exports.TIMELINE_LAYER_HEIGHT_AUDIO = 25;
 const getTimelineLayerHeight = (type) => {
-    if (type === 'video' || type === 'image') {
-        return 50;
+    if (type === 'video') {
+        return exports.TIMELINE_LAYER_HEIGHT_VIDEO;
     }
-    return 25;
+    if (type === 'image') {
+        return exports.TIMELINE_LAYER_HEIGHT_IMAGE;
+    }
+    return exports.TIMELINE_LAYER_HEIGHT_AUDIO;
 };
 exports.getTimelineLayerHeight = getTimelineLayerHeight;

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.442",
+	"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.442",
-		"@remotion/player": "4.0.442",
-		"@remotion/media-utils": "4.0.442",
-		"@remotion/renderer": "4.0.442",
-		"@remotion/web-renderer": "4.0.442",
-		"@remotion/studio-shared": "4.0.442",
-		"@remotion/zod-types": "4.0.442",
+		"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.442",
+		"@remotion/eslint-config-internal": "4.0.444",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/OpenEditorButton.d.ts

@@ -1,3 +0,0 @@
-export declare const OpenEditorButton: React.FC<{
-    type: 'git' | 'editor';
-}>;

package/dist/components/OpenEditorButton.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenEditorButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const svgStyle = {
-    width: 11,
-    height: 11,
-};
-const buttonStyle = {
-    border: 'none',
-    height: '20px',
-    display: 'flex',
-    paddingInline: '6px',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const OpenEditorButton = ({ type }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const svgFillColor = (0, react_1.useMemo)(() => {
-        return hovered ? 'white' : colors_1.LIGHT_TEXT;
-    }, [hovered]);
-    const handleClick = (0, react_1.useCallback)(async () => {
-        if (type === 'editor') {
-            await (0, open_in_editor_1.openInEditor)({
-                originalFileName: `${window.remotion_cwd}`,
-                originalLineNumber: 1,
-                originalColumnNumber: 1,
-                originalFunctionName: null,
-                originalScriptCode: null,
-            })
-                .then((res) => res.json())
-                .then(({ success }) => {
-                if (!success) {
-                    (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
-                }
-            })
-                .catch((err) => {
-                // eslint-disable-next-line no-console
-                console.error(err);
-                (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
-            });
-        }
-        if (type === 'git') {
-            if (!window.remotion_gitSource) {
-                throw new Error('No git source');
-            }
-            window.open((0, get_git_menu_item_1.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
-        }
-    }, [type]);
-    const buttonTooltip = type === 'git'
-        ? `Open ${(0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)} Repo`
-        : `Open in ${window.remotion_editorName}`;
-    const openInEditorSvg = (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    return (jsx_runtime_1.jsx("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
-};
-exports.OpenEditorButton = OpenEditorButton;

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;