@remotion/studio 4.0.443 → 4.0.445

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-bqd9dhnk.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/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/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/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.443",
+	"version": "4.0.445",
 	"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.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",
 		"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.445",
 		"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;