@remotion/studio 4.0.465 → 4.0.467

package/dist/esm/renderEntry.mjs

@@ -1,7 +1,6 @@
 import {
-  __require,
-  __toESM
-} from "./chunk-6jf1natv.js";
+  __require
+} from "./chunk-5gtx3pza.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -207,7 +206,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-pqk2qd0d.js").then(({ StudioInternals }) => {
+    import("./chunk-vwnse6c9.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

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/make-render-command.d.ts

@@ -10,7 +10,7 @@ export declare const normalizeServeUrlForRenderCommand: ({ locationHref, composi
 type StrictRequired<T> = {
     [K in keyof T]-?: Exclude<T[K], undefined>;
 };
-type RenderMediaCommandOptions = Omit<StrictRequired<Pick<RenderMediaOptions, 'codec' | 'crf' | 'concurrency' | 'disallowParallelEncoding' | 'muted' | 'enforceAudioTrack' | 'everyNthFrame' | 'numberOfGifLoops' | 'colorSpace' | 'scale' | 'logLevel' | 'repro' | 'metadata' | 'jpegQuality' | 'pixelFormat' | 'proResProfile' | 'x264Preset' | 'audioCodec' | 'forSeamlessAacConcatenation' | 'separateAudioTo' | 'hardwareAcceleration' | 'chromeMode' | 'offthreadVideoCacheSizeInBytes' | 'offthreadVideoThreads' | 'mediaCacheSizeInBytes' | 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'sampleRate'>>, 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'jpegQuality' | 'proResProfile'> & {
+type RenderMediaCommandOptions = Omit<StrictRequired<Pick<RenderMediaOptions, 'codec' | 'crf' | 'concurrency' | 'disallowParallelEncoding' | 'muted' | 'enforceAudioTrack' | 'everyNthFrame' | 'numberOfGifLoops' | 'colorSpace' | 'scale' | 'logLevel' | 'repro' | 'metadata' | 'jpegQuality' | 'pixelFormat' | 'proResProfile' | 'x264Preset' | 'gopSize' | 'audioCodec' | 'forSeamlessAacConcatenation' | 'separateAudioTo' | 'hardwareAcceleration' | 'chromeMode' | 'offthreadVideoCacheSizeInBytes' | 'offthreadVideoThreads' | 'mediaCacheSizeInBytes' | 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'sampleRate'>>, 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'jpegQuality' | 'proResProfile'> & {
     audioBitrate: string | null;
     videoBitrate: string | null;
     encodingMaxRate: string | null;
@@ -48,5 +48,5 @@ type ReadOnlyStudioRenderCommandInput = RenderMediaCommandOptions & RenderStillC
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
 };
-export declare const makeReadOnlyStudioRenderCommand: ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }: ReadOnlyStudioRenderCommandInput) => string;
+export declare const makeReadOnlyStudioRenderCommand: ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, gopSize, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }: ReadOnlyStudioRenderCommandInput) => string;
 export {};

package/dist/helpers/make-render-command.js

@@ -80,7 +80,7 @@ const renderMediaValueFlag = (option, value, defaultValue) => {
 const renderMediaBooleanFlag = (option, value, defaultValue) => {
     return booleanFlag(getRenderMediaFlag(option), value, defaultValue);
 };
-const makeReadOnlyStudioRenderCommand = ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }) => {
+const makeReadOnlyStudioRenderCommand = ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, gopSize, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }) => {
     var _a;
     const serveUrl = (0, exports.normalizeServeUrlForRenderCommand)({
         locationHref,
@@ -154,6 +154,7 @@ const makeReadOnlyStudioRenderCommand = ({ remotionVersion, locationHref, compos
                 renderMediaValueFlag('colorSpace', colorSpace, renderDefaults.colorSpace),
                 valueFlag(options.proResProfileOption.cliFlag, proResProfile, renderDefaults.proResProfile),
                 renderMediaValueFlag('x264Preset', x264Preset, renderDefaults.x264Preset),
+                renderMediaValueFlag('gopSize', gopSize, renderDefaults.gopSize),
                 valueFlag(options.crfOption.cliFlag, crf, null),
                 valueFlag(options.jpegQualityOption.cliFlag, jpegQuality, renderDefaults.jpegQuality),
                 renderMediaValueFlag('videoBitrate', videoBitrate, renderDefaults.videoBitrate),

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

@@ -2,3 +2,11 @@ import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+export declare const preloadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => void;
+export declare const openCompositionComponentInEditor: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<void>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
     return fetch(`/api/open-in-editor`, {
@@ -30,3 +30,60 @@ const openOriginalPositionInEditor = async (originalPosition) => {
     });
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
+const componentResolutionCache = new Map();
+const getComponentResolutionCacheKey = ({ compositionFile, compositionId, }) => {
+    return `${compositionFile}::${compositionId}`;
+};
+const loadCompositionComponentInfo = async ({ compositionFile, compositionId, }) => {
+    const cacheKey = getComponentResolutionCacheKey({
+        compositionFile,
+        compositionId,
+    });
+    const existing = componentResolutionCache.get(cacheKey);
+    if (existing) {
+        return existing;
+    }
+    const promise = (async () => {
+        const response = await fetch(`/api/composition-component-info`, {
+            method: 'post',
+            headers: {
+                'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+                compositionFile,
+                compositionId,
+            }),
+        });
+        const body = (await response.json());
+        if (!body.success) {
+            throw new Error(body.error);
+        }
+        return {
+            location: body.location,
+            canAddSequence: body.canAddSequence,
+        };
+    })();
+    componentResolutionCache.set(cacheKey, promise);
+    try {
+        return await promise;
+    }
+    catch (err) {
+        componentResolutionCache.delete(cacheKey);
+        throw err;
+    }
+};
+const preloadCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    loadCompositionComponentInfo({
+        compositionFile,
+        compositionId,
+    }).catch(() => undefined);
+};
+exports.preloadCompositionComponentInfo = preloadCompositionComponentInfo;
+const openCompositionComponentInEditor = async ({ compositionFile, compositionId, }) => {
+    const info = await loadCompositionComponentInfo({
+        compositionFile,
+        compositionId,
+    });
+    await (0, exports.openOriginalPositionInEditor)(info.location);
+};
+exports.openCompositionComponentInEditor = openCompositionComponentInEditor;

package/dist/helpers/render-modal-sections.d.ts

@@ -1,5 +1,5 @@
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';
+type Section = 'general' | 'data' | 'picture' | 'audio' | 'gif' | 'encoding' | 'environment' | 'advanced';
 export declare const useRenderModalSections: (renderMode: RenderType, codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => {
     tab: Section;
     setTab: import("react").Dispatch<import("react").SetStateAction<Section>>;

package/dist/helpers/render-modal-sections.js

@@ -6,19 +6,49 @@ const useRenderModalSections = (renderMode, codec) => {
     const [selectedTab, setTab] = (0, react_1.useState)('general');
     const shownTabs = (0, react_1.useMemo)(() => {
         if (renderMode === 'audio') {
-            return ['general', 'data', 'audio', 'advanced'];
+            return [
+                'general',
+                'data',
+                'audio',
+                'encoding',
+                'environment',
+                'advanced',
+            ];
         }
         if (renderMode === 'still') {
-            return ['general', 'data', 'picture', 'advanced'];
+            return ['general', 'data', 'picture', 'environment', 'advanced'];
         }
         if (renderMode === 'sequence') {
-            return ['general', 'data', 'picture', 'advanced'];
+            return [
+                'general',
+                'data',
+                'picture',
+                'encoding',
+                'environment',
+                'advanced',
+            ];
         }
         if (renderMode === 'video') {
             if (codec === 'gif') {
-                return ['general', 'data', 'picture', 'gif', 'advanced'];
+                return [
+                    'general',
+                    'data',
+                    'picture',
+                    'gif',
+                    'encoding',
+                    'environment',
+                    'advanced',
+                ];
             }
-            return ['general', 'data', 'picture', 'audio', 'advanced'];
+            return [
+                'general',
+                'data',
+                'picture',
+                'audio',
+                'encoding',
+                'environment',
+                'advanced',
+            ];
         }
         throw new TypeError('Unknown render mode');
     }, [codec, renderMode]);

package/dist/helpers/retry-payload.js

@@ -25,6 +25,7 @@ const makeRetryPayload = (job) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: null,
             initialx264Preset: defaults.x264Preset,
+            initialGopSize: defaults.gopSize,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
@@ -78,6 +79,7 @@ const makeRetryPayload = (job) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: null,
             initialx264Preset: defaults.x264Preset,
+            initialGopSize: defaults.gopSize,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
@@ -133,6 +135,7 @@ const makeRetryPayload = (job) => {
             initialEnforceAudioTrack: job.enforceAudioTrack,
             initialProResProfile: (_d = job.proResProfile) !== null && _d !== void 0 ? _d : null,
             initialx264Preset: (_e = job.x264Preset) !== null && _e !== void 0 ? _e : defaults.x264Preset,
+            initialGopSize: job.gopSize,
             initialPixelFormat: job.pixelFormat,
             initialAudioBitrate: job.audioBitrate,
             initialVideoBitrate: job.videoBitrate,

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;
@@ -15,6 +15,7 @@ export type TimelineFieldOnDragValueChange = (value: unknown) => void;
 export type TimelineEffectGroupInfo = {
     readonly effectIndex: number;
     readonly effectSchema: SequenceSchemaShape;
+    readonly documentationLink: string | null;
 };
 export type TimelineTreeNode = {
     readonly kind: 'group';
@@ -28,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 = {
@@ -51,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;
@@ -50,7 +50,14 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
             label: 'Effects',
             effectInfo: null,
             children: sequence.effects.map((effect, i) => {
-                const effectFields = (0, studio_shared_1.getEffectFieldsToShow)(effect, i);
+                var _a;
+                const effectFields = (0, studio_shared_1.getEffectFieldsToShow)({
+                    effect,
+                    effectIndex: i,
+                    nodePath: sequenceSubscriptionKey,
+                    codeValues,
+                    getEffectDragOverrides,
+                });
                 return {
                     kind: 'group',
                     nodePathInfo: {
@@ -60,7 +67,11 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
                         numberOfSequencesWithThisNodePath: 0,
                     },
                     label: effect.label,
-                    effectInfo: { effectIndex: i, effectSchema: effect.schema },
+                    effectInfo: {
+                        effectIndex: i,
+                        effectSchema: effect.schema,
+                        documentationLink: (_a = effect.documentationLink) !== null && _a !== void 0 ? _a : null,
+                    },
                     children: effectFields.map((f) => {
                         var _a;
                         return ({
@@ -115,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 });
@@ -127,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;
@@ -136,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;