@remotion/studio 4.0.466 → 4.0.468

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/calculate-timeline.js

@@ -46,6 +46,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sortedSequences);
         const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
         const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
+        const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
         tracks.push({
             sequence: {
                 ...sequence,
@@ -59,6 +60,9 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
+            keyframeDisplayOffset: hasKeyframeRows
+                ? cascadedStart - sequence.from
+                : 0,
             nodePathInfo: nodePath
                 ? {
                     sequenceSubscriptionKey: nodePath,

package/dist/helpers/format-media-duration.d.ts

@@ -0,0 +1 @@
+export declare const formatMediaDuration: (seconds: number) => string;

package/dist/helpers/format-media-duration.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatMediaDuration = void 0;
+const formatMediaDuration = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    const sFixed = s.toFixed(2).padStart(5, '0');
+    if (h > 0) {
+        return `${h}:${String(m).padStart(2, '0')}:${sFixed}`;
+    }
+    return `${String(m).padStart(2, '0')}:${sFixed}`;
+};
+exports.formatMediaDuration = formatMediaDuration;

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

@@ -13,10 +13,11 @@ const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDura
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
-    const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom));
+    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
-    const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames - 1));
+    const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames));
     const marginLeft = lastFrame === 0
         ? 0
         : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -9,6 +9,7 @@ type Track = {
     sequence: TSequence;
     depth: number;
     nodePathInfo: SequenceNodePathInfo | null;
+    keyframeDisplayOffset: number;
 };
 export type TrackWithHash = Track & {
     hash: string;

package/dist/helpers/timeline-layout.d.ts

@@ -1,9 +1,9 @@
 import { type AnySchemaFieldInfo, type CodeValues, type DragOverrides, type EffectSchemaFieldInfo, type SchemaFieldInfo, type SequenceControls, type SequenceSchemaFieldInfo } from '@remotion/studio-shared';
-import type { GetDragOverrides, SequenceSchema as SequenceSchemaShape, TSequence } from 'remotion';
+import type { GetDragOverrides, GetEffectDragOverrides, SequenceSchema as SequenceSchemaShape, TSequence } from 'remotion';
 import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
+export { getEffectFieldsToShow, getFieldsToShow, SCHEMA_FIELD_ROW_HEIGHT, } from '@remotion/studio-shared';
 export type { AnySchemaFieldInfo, CodeValues, DragOverrides, EffectSchemaFieldInfo, SchemaFieldInfo, SequenceControls, SequenceSchemaFieldInfo, };
-export { SCHEMA_FIELD_ROW_HEIGHT, getEffectFieldsToShow, getFieldsToShow, } from '@remotion/studio-shared';
 export declare const TIMELINE_PADDING = 16;
 export declare const TIMELINE_BORDER = 1;
 export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
@@ -29,10 +29,11 @@ export type TimelineTreeNode = {
     readonly label: string;
     readonly field: AnySchemaFieldInfo | null;
 };
-export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, codeValues, }: {
+export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, codeValues, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     getDragOverrides: GetDragOverrides;
+    getEffectDragOverrides: GetEffectDragOverrides;
     codeValues: CodeValues;
 }) => TimelineTreeNode[];
 export type FlatTreeRow = {
@@ -52,6 +53,9 @@ export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExp
     codeValues: CodeValues;
 }) => number;
 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;
+export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 58;
+export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 58;
+export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 25;
+export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 25;
+export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 25;
+export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => 25 | 58 | 75;

package/dist/helpers/timeline-layout.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getFieldsToShow = exports.getEffectFieldsToShow = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
-Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_ROW_HEIGHT; } });
 Object.defineProperty(exports, "getEffectFieldsToShow", { enumerable: true, get: function () { return studio_shared_2.getEffectFieldsToShow; } });
 Object.defineProperty(exports, "getFieldsToShow", { enumerable: true, get: function () { return studio_shared_2.getFieldsToShow; } });
+Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_ROW_HEIGHT; } });
 exports.TIMELINE_PADDING = 16;
 exports.TIMELINE_BORDER = 1;
 exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 exports.TREE_GROUP_ROW_HEIGHT = 22;
 exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
-const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValues, }) => {
+const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, codeValues, }) => {
     var _a;
     const roots = [];
     const { sequenceSubscriptionKey, index, auxiliaryKeys } = nodePathInfo;
@@ -51,7 +51,13 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
             effectInfo: null,
             children: sequence.effects.map((effect, i) => {
                 var _a;
-                const effectFields = (0, studio_shared_1.getEffectFieldsToShow)(effect, i);
+                const effectFields = (0, studio_shared_1.getEffectFieldsToShow)({
+                    effect,
+                    effectIndex: i,
+                    nodePath: sequenceSubscriptionKey,
+                    codeValues,
+                    getEffectDragOverrides,
+                });
                 return {
                     kind: 'group',
                     nodePathInfo: {
@@ -120,6 +126,7 @@ const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, codeVal
         nodePathInfo,
         // We assume that no drag overrides can change the timeline layout
         getDragOverrides: () => ({}),
+        getEffectDragOverrides: () => ({}),
         codeValues,
     });
     const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
@@ -132,8 +139,13 @@ const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, codeVal
 };
 exports.getExpandedTrackHeight = getExpandedTrackHeight;
 exports.TIMELINE_LAYER_HEIGHT_VIDEO = 75;
-exports.TIMELINE_LAYER_HEIGHT_IMAGE = 50;
-exports.TIMELINE_LAYER_HEIGHT_AUDIO = 25;
+exports.TIMELINE_LAYER_HEIGHT_IMAGE = 58;
+exports.TIMELINE_LAYER_HEIGHT_AUDIO = 58;
+exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 25;
+// The horizontal row inside a timeline list item (eye + arrow + label).
+exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = 25;
+// The waveform stripe rendered underneath the filmstrip in TimelineVideoInfo.
+exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 25;
 const getTimelineLayerHeight = (type) => {
     if (type === 'video') {
         return exports.TIMELINE_LAYER_HEIGHT_VIDEO;
@@ -141,6 +153,9 @@ const getTimelineLayerHeight = (type) => {
     if (type === 'image') {
         return exports.TIMELINE_LAYER_HEIGHT_IMAGE;
     }
-    return exports.TIMELINE_LAYER_HEIGHT_AUDIO;
+    if (type === 'audio') {
+        return exports.TIMELINE_LAYER_HEIGHT_AUDIO;
+    }
+    return exports.TIMELINE_LAYER_HEIGHT_DEFAULT;
 };
 exports.getTimelineLayerHeight = getTimelineLayerHeight;

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

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMaxMediaDuration = void 0;
-const media_utils_1 = require("@remotion/media-utils");
-const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
-const get_duration_or_compute_1 = require("./get-duration-or-compute");
+const use_media_metadata_1 = require("./use-media-metadata");
 const cache = new Map();
+const getCacheKey = (src, fps) => JSON.stringify([src, fps]);
 const getSrc = (s) => {
     if (s.type === 'video') {
         return s.src;
@@ -18,40 +17,38 @@ const getSrc = (s) => {
 const useMaxMediaDuration = (s, fps) => {
     var _a;
     const src = getSrc(s);
-    const [maxMediaDuration, setMaxMediaDuration] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : Infinity);
+    const cacheKey = src ? getCacheKey(src, fps) : null;
+    const [maxMediaDuration, setMaxMediaDuration] = (0, react_1.useState)(cacheKey ? ((_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : null) : Infinity);
     (0, react_1.useEffect)(() => {
-        if (!src) {
+        var _a;
+        if (!src || !cacheKey) {
             return;
         }
-        const input = new mediabunny_1.Input({
-            formats: mediabunny_1.ALL_FORMATS,
-            source: new mediabunny_1.UrlSource(src),
-        });
-        (0, get_duration_or_compute_1.getDurationOrCompute)(input)
-            .then((duration) => {
-            cache.set(src, Math.floor(duration * fps));
-            setMaxMediaDuration(Math.floor(duration * fps));
+        const cached = (_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : null;
+        setMaxMediaDuration(cached);
+        if (cached !== null) {
+            return;
+        }
+        let cancelled = false;
+        (0, use_media_metadata_1.getMediaMetadata)(src)
+            .then((metadata) => {
+            if (cancelled || !metadata) {
+                return;
+            }
+            const duration = Math.floor(metadata.duration * fps);
+            cache.set(cacheKey, duration);
+            setMaxMediaDuration(duration);
         })
-            .catch((e) => {
-            if (e instanceof mediabunny_1.InputDisposedError) {
+            .catch(() => {
+            if (cancelled) {
                 return;
             }
-            // In case of CORS errors, fall back to getVideoMetadata
-            return (0, media_utils_1.getVideoMetadata)(src)
-                .then((metadata) => {
-                var _a;
-                const durationOrInfinity = (_a = metadata.durationInSeconds) !== null && _a !== void 0 ? _a : Infinity;
-                cache.set(src, Math.floor(durationOrInfinity * fps));
-                setMaxMediaDuration(Math.floor(durationOrInfinity * fps));
-            })
-                .catch(() => {
-                // Silently handle getVideoMetadata failures to prevent unhandled rejections
-            });
+            setMaxMediaDuration(null);
         });
         return () => {
-            input.dispose();
+            cancelled = true;
         };
-    }, [src, fps]);
+    }, [cacheKey, fps, src]);
     if (maxMediaDuration !== null && (s.type === 'audio' || s.type === 'video')) {
         return maxMediaDuration;
     }

package/dist/helpers/use-media-metadata.d.ts

@@ -0,0 +1,10 @@
+export type MediaMetadata = {
+    duration: number;
+    format: string | null;
+    width: number | null;
+    height: number | null;
+    videoCodec: string | null;
+    audioCodec: string | null;
+};
+export declare const getMediaMetadata: (src: string) => Promise<MediaMetadata | null>;
+export declare const useMediaMetadata: (src: string | null) => MediaMetadata | null;

package/dist/helpers/use-media-metadata.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaMetadata = exports.getMediaMetadata = void 0;
+const media_utils_1 = require("@remotion/media-utils");
+const mediabunny_1 = require("mediabunny");
+const react_1 = require("react");
+const get_duration_or_compute_1 = require("./get-duration-or-compute");
+const cache = new Map();
+const pendingRequests = new Map();
+const safeCall = async (fn) => {
+    try {
+        return await fn();
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const getMediabunnyMetadata = async (src) => {
+    var _a;
+    let input;
+    try {
+        input = new mediabunny_1.Input({
+            formats: mediabunny_1.ALL_FORMATS,
+            source: new mediabunny_1.UrlSource(src),
+        });
+    }
+    catch (_b) {
+        return null;
+    }
+    try {
+        const [duration, format, videoTrack, audioTrack] = await Promise.all([
+            safeCall(() => (0, get_duration_or_compute_1.getDurationOrCompute)(input)),
+            safeCall(() => input.getFormat()),
+            safeCall(() => input.getPrimaryVideoTrack()),
+            safeCall(() => input.getPrimaryAudioTrack()),
+        ]);
+        if (duration === null) {
+            return null;
+        }
+        const [width, height, videoCodec, audioCodec] = await Promise.all([
+            videoTrack ? safeCall(() => videoTrack.getDisplayWidth()) : null,
+            videoTrack ? safeCall(() => videoTrack.getDisplayHeight()) : null,
+            videoTrack ? safeCall(() => videoTrack.getCodec()) : null,
+            audioTrack ? safeCall(() => audioTrack.getCodec()) : null,
+        ]);
+        return {
+            duration,
+            format: (_a = format === null || format === void 0 ? void 0 : format.name) !== null && _a !== void 0 ? _a : null,
+            width,
+            height,
+            videoCodec,
+            audioCodec,
+        };
+    }
+    finally {
+        try {
+            input.dispose();
+        }
+        catch (_c) {
+            // ignore
+        }
+    }
+};
+const getFallbackVideoMetadata = async (src) => {
+    try {
+        const metadata = await (0, media_utils_1.getVideoMetadata)(src);
+        return {
+            duration: metadata.durationInSeconds,
+            format: null,
+            width: metadata.width,
+            height: metadata.height,
+            videoCodec: null,
+            audioCodec: null,
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const getMediaMetadata = (src) => {
+    const cached = cache.get(src);
+    if (cached) {
+        return Promise.resolve(cached);
+    }
+    const pendingRequest = pendingRequests.get(src);
+    if (pendingRequest) {
+        return pendingRequest;
+    }
+    const request = getMediabunnyMetadata(src)
+        .catch(() => null)
+        .then((metadata) => metadata !== null && metadata !== void 0 ? metadata : getFallbackVideoMetadata(src))
+        .then((metadata) => {
+        if (metadata) {
+            cache.set(src, metadata);
+        }
+        return metadata;
+    })
+        .finally(() => {
+        pendingRequests.delete(src);
+    });
+    pendingRequests.set(src, request);
+    return request;
+};
+exports.getMediaMetadata = getMediaMetadata;
+const useMediaMetadata = (src) => {
+    var _a;
+    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        setMediaMetadata(cached);
+        if (!src || cached) {
+            return;
+        }
+        let cancelled = false;
+        (0, exports.getMediaMetadata)(src)
+            .then((metadata) => {
+            if (cancelled) {
+                return;
+            }
+            setMediaMetadata(metadata);
+        })
+            .catch(() => {
+            if (cancelled) {
+                return;
+            }
+            setMediaMetadata(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    return mediaMetadata;
+};
+exports.useMediaMetadata = useMediaMetadata;

package/package.json

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