@remotion/studio 4.0.470 → 4.0.471

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/get-left-of-timeline-slider.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getXPositionOfItemInTimelineImperatively = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
-    const proportion = frame / (duration - 1);
+    const proportion = frame / duration;
     return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
 };
 exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

package/dist/helpers/get-timeline-sequence-layout.js

@@ -3,35 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 exports.SEQUENCE_BORDER_WIDTH = 1;
-const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+const getWidthOfTrack = ({ durationInFrames, timelineDuration, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
     const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
-    const base = durationInFrames === Infinity || lastFrame === 0
+    const base = durationInFrames === Infinity || timelineDuration <= 0
         ? fullWidth
-        : (spatialDuration / lastFrame) * fullWidth;
+        : (spatialDuration / timelineDuration) * fullWidth;
     return Math.max(0, base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft);
 };
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const timelineDuration = (_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1;
-    const lastFrame = timelineDuration - 1;
     const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames, timelineDuration - startFrom));
-    // Unclipped spatial duration: without the lastFrame - startFrom constraint
+    // Unclipped spatial duration: without the timeline-end constraint
     const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames));
-    const marginLeft = lastFrame === 0
+    const marginLeft = timelineDuration <= 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+        : (startFrom / timelineDuration) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
     const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     const width = getWidthOfTrack({
         durationInFrames,
-        lastFrame,
+        timelineDuration,
         nonNegativeMarginLeft,
         spatialDuration,
         windowWidth,
     });
     const naturalWidth = getWidthOfTrack({
         durationInFrames,
-        lastFrame,
+        timelineDuration,
         nonNegativeMarginLeft,
         spatialDuration: naturalSpatialDuration,
         windowWidth,
@@ -39,7 +38,7 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     const premountWidth = premountDisplay
         ? getWidthOfTrack({
             durationInFrames: premountDisplay,
-            lastFrame,
+            timelineDuration,
             nonNegativeMarginLeft,
             spatialDuration: premountDisplay,
             windowWidth,
@@ -48,7 +47,7 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     const postmountWidth = postmountDisplay
         ? getWidthOfTrack({
             durationInFrames: postmountDisplay,
-            lastFrame,
+            timelineDuration,
             nonNegativeMarginLeft,
             spatialDuration: postmountDisplay,
             windowWidth,

package/dist/helpers/open-in-editor.d.ts

@@ -1,7 +1,24 @@
-import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { CompositionComponentInfoResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+type ResolvedCompositionComponentInfo = {
+    location: CompositionComponentInfoResponse['location'];
+    canAddSequence: boolean;
+};
+export declare const subscribeToCompositionComponentInfo: (listener: () => void) => () => void;
+export declare const getCachedCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => ResolvedCompositionComponentInfo | null;
+export declare const useCachedCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string | null;
+    compositionId: string | null;
+}) => ResolvedCompositionComponentInfo | null;
+export declare const loadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<ResolvedCompositionComponentInfo>;
 export declare const preloadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
     compositionFile: string;
     compositionId: string;
@@ -10,3 +27,4 @@ export declare const openCompositionComponentInEditor: ({ compositionFile, compo
     compositionFile: string;
     compositionId: string;
 }) => Promise<void>;
+export {};

package/dist/helpers/open-in-editor.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
@@ -26,9 +27,40 @@ const openOriginalPositionInEditor = async (originalPosition) => {
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
 const componentResolutionCache = new Map();
+const componentResolutionResults = new Map();
+const componentResolutionListeners = new Set();
 const getComponentResolutionCacheKey = ({ compositionFile, compositionId, }) => {
     return `${compositionFile}::${compositionId}`;
 };
+const notifyComponentResolutionListeners = () => {
+    for (const listener of componentResolutionListeners) {
+        listener();
+    }
+};
+const subscribeToCompositionComponentInfo = (listener) => {
+    componentResolutionListeners.add(listener);
+    return () => {
+        componentResolutionListeners.delete(listener);
+    };
+};
+exports.subscribeToCompositionComponentInfo = subscribeToCompositionComponentInfo;
+const getCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    var _a;
+    return ((_a = componentResolutionResults.get(getComponentResolutionCacheKey({ compositionFile, compositionId }))) !== null && _a !== void 0 ? _a : null);
+};
+exports.getCachedCompositionComponentInfo = getCachedCompositionComponentInfo;
+const useCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    return (0, react_1.useSyncExternalStore)(exports.subscribeToCompositionComponentInfo, () => {
+        if (compositionFile === null || compositionId === null) {
+            return null;
+        }
+        return (0, exports.getCachedCompositionComponentInfo)({
+            compositionFile,
+            compositionId,
+        });
+    }, () => null);
+};
+exports.useCachedCompositionComponentInfo = useCachedCompositionComponentInfo;
 const loadCompositionComponentInfo = async ({ compositionFile, compositionId, }) => {
     const cacheKey = getComponentResolutionCacheKey({
         compositionFile,
@@ -43,10 +75,13 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
             compositionFile,
             compositionId,
         });
-        return {
+        const result = {
             location: body.location,
             canAddSequence: body.canAddSequence,
         };
+        componentResolutionResults.set(cacheKey, result);
+        notifyComponentResolutionListeners();
+        return result;
     })();
     componentResolutionCache.set(cacheKey, promise);
     try {
@@ -54,18 +89,21 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
     }
     catch (err) {
         componentResolutionCache.delete(cacheKey);
+        componentResolutionResults.delete(cacheKey);
+        notifyComponentResolutionListeners();
         throw err;
     }
 };
+exports.loadCompositionComponentInfo = loadCompositionComponentInfo;
 const preloadCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
-    loadCompositionComponentInfo({
+    (0, exports.loadCompositionComponentInfo)({
         compositionFile,
         compositionId,
     }).catch(() => undefined);
 };
 exports.preloadCompositionComponentInfo = preloadCompositionComponentInfo;
 const openCompositionComponentInEditor = async ({ compositionFile, compositionId, }) => {
-    const info = await loadCompositionComponentInfo({
+    const info = await (0, exports.loadCompositionComponentInfo)({
         compositionFile,
         compositionId,
     });

package/dist/helpers/use-menu-structure.js

@@ -171,7 +171,6 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
     (0, react_1.useEffect)(() => {
         if (type !== 'connected' ||
-            !window.remotion_editorName ||
             !currentComposition ||
             !(resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source)) {
             return;

package/dist/state/z-index.js

@@ -70,7 +70,10 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
         // If a menu is opened, then this component will also still receive the pointerdown event.
         // However we may not interpret it as a outside click, so we need to wait for the next tick
         requestAnimationFrame(() => {
-            window.addEventListener('pointerdown', listener);
+            // The third argument `true` registers a capture-phase listener. Some Studio
+            // elements stop pointerdown propagation while still being outside the menu,
+            // so bubbling listeners would miss those clicks and keep the menu open.
+            window.addEventListener('pointerdown', listener, true);
         });
         return () => {
             if (onUp) {
@@ -78,7 +81,7 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
                 window.removeEventListener('pointerup', onUp, { once: true });
             }
             onUp = null;
-            return window.removeEventListener('pointerdown', listener);
+            return window.removeEventListener('pointerdown', listener, true);
         };
     }, [currentIndex, disabled, highestContext.highestIndex, onOutsideClick]);
     const value = (0, react_1.useMemo)(() => {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.470",
+	"version": "4.0.471",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,14 +25,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.470",
-		"@remotion/player": "4.0.470",
-		"@remotion/media-utils": "4.0.470",
-		"@remotion/renderer": "4.0.470",
-		"@remotion/web-renderer": "4.0.470",
-		"@remotion/studio-shared": "4.0.470",
-		"@remotion/timeline-utils": "4.0.470",
-		"@remotion/zod-types": "4.0.470",
+		"remotion": "4.0.471",
+		"@remotion/player": "4.0.471",
+		"@remotion/media-utils": "4.0.471",
+		"@remotion/renderer": "4.0.471",
+		"@remotion/web-renderer": "4.0.471",
+		"@remotion/studio-shared": "4.0.471",
+		"@remotion/timeline-utils": "4.0.471",
+		"@remotion/zod-types": "4.0.471",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.45.0",
 		"memfs": "3.4.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.470",
+		"@remotion/eslint-config-internal": "4.0.471",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},