@remotion/studio 4.0.513 → 4.0.515

package/dist/esm/renderEntry.mjs

@@ -4,13 +4,12 @@ import {
   WHITE,
   __require,
   __toESM
-} from "./chunk-r46yxrjr.js";
+} from "./chunk-s6k99gh2.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import {
-  AbsoluteFill,
   getInputProps,
   getRemotionEnvironment,
   continueRender as globalContinueRender,
@@ -57,7 +56,7 @@ var DelayedSpinner = () => {
   if (!show) {
     return null;
   }
-  return /* @__PURE__ */ jsx(AbsoluteFill, {
+  return /* @__PURE__ */ jsx(Internals.AbsoluteFillElement, {
     style: {
       justifyContent: "center",
       alignItems: "center",
@@ -214,7 +213,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-tv7r0jy3.js").then(({ StudioInternals }) => {
+    import("./chunk-v5a8vpv4.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/browser-studio-operations.d.ts

@@ -1,3 +1,8 @@
 import type { BrowserStudioOperations } from '@remotion/studio-shared';
 export declare const BROWSER_STUDIO_OPERATIONS_READY_EVENT = "remotion-browser-studio-operations-ready";
 export declare const getBrowserStudioOperations: () => BrowserStudioOperations | null;
+export declare const getBrowserStudioKeyframeOperations: () => import("@remotion/studio-shared").BrowserStudioKeyframeOperations | null;
+export declare const getBrowserStudioEffectOperations: () => import("@remotion/studio-shared").BrowserStudioEffectOperations | null;
+export declare const canUseKeyframeOperations: () => boolean;
+export declare const canUseEffectOperations: () => boolean;
+export declare const canInstallPackages: () => boolean;

package/dist/helpers/browser-studio-operations.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBrowserStudioOperations = exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = void 0;
+exports.canInstallPackages = exports.canUseEffectOperations = exports.canUseKeyframeOperations = exports.getBrowserStudioEffectOperations = exports.getBrowserStudioKeyframeOperations = exports.getBrowserStudioOperations = exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = void 0;
 // Browser Studio may be hosted by a different studio-shared version, so this
 // handshake intentionally has no shared runtime import.
 exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = 'remotion-browser-studio-operations-ready';
@@ -12,3 +12,29 @@ const getBrowserStudioOperations = () => {
     return (_a = window.remotion_browserStudio) !== null && _a !== void 0 ? _a : null;
 };
 exports.getBrowserStudioOperations = getBrowserStudioOperations;
+const getBrowserStudioKeyframeOperations = () => {
+    var _a;
+    var _b;
+    return (_b = (_a = (0, exports.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.keyframes) !== null && _b !== void 0 ? _b : null;
+};
+exports.getBrowserStudioKeyframeOperations = getBrowserStudioKeyframeOperations;
+const getBrowserStudioEffectOperations = () => {
+    var _a;
+    var _b;
+    return (_b = (_a = (0, exports.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.effects) !== null && _b !== void 0 ? _b : null;
+};
+exports.getBrowserStudioEffectOperations = getBrowserStudioEffectOperations;
+const canUseKeyframeOperations = () => !window.remotion_isReadOnlyStudio ||
+    (0, exports.getBrowserStudioKeyframeOperations)() !== null;
+exports.canUseKeyframeOperations = canUseKeyframeOperations;
+const canUseEffectOperations = () => !window.remotion_isReadOnlyStudio ||
+    (0, exports.getBrowserStudioEffectOperations)() !== null;
+exports.canUseEffectOperations = canUseEffectOperations;
+const canInstallPackages = () => {
+    const browserStudioOperations = (0, exports.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        return true;
+    }
+    return !window.remotion_isReadOnlyStudio;
+};
+exports.canInstallPackages = canInstallPackages;

package/dist/helpers/colors.d.ts

@@ -62,7 +62,7 @@ export declare const ERROR_LINK_COLOR = "#58a6ff";
 export declare const INFO_BLUE = "#60a5fa";
 export declare const SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
 export declare const STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
-export declare const TIMELINE_BACKGROUND_COLOR = "#0F1113";
+export declare const TIMELINE_BACKGROUND_COLOR = "#15181B";
 export declare const TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
 export declare const TIMELINE_BLUE = "#0b84ff";

package/dist/helpers/colors.js

@@ -68,7 +68,7 @@ exports.ERROR_LINK_COLOR = '#58a6ff';
 exports.INFO_BLUE = '#60a5fa';
 exports.SERVER_DISCONNECTED_BACKGROUND = '#e74c3c';
 exports.STACK_FRAME_BORDER_BLUE = 'rgb(66, 144, 245)';
-exports.TIMELINE_BACKGROUND_COLOR = '#0F1113';
+exports.TIMELINE_BACKGROUND_COLOR = '#15181B';
 exports.TIMELINE_SELECTED_BACKGROUND_COLOR = '#3B3F42';
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = '#B0B0B0';
 exports.TIMELINE_BLUE = '#0b84ff';

package/dist/helpers/get-timeline-max-zoom.d.ts

@@ -0,0 +1,26 @@
+export declare const TIMELINE_MIN_ZOOM = 1;
+export declare const TIMELINE_MAX_ZOOM_FLOOR = 5;
+/**
+ * How many frames fill the timeline viewport at max zoom.
+ * 30 frames matches the previous 5x cap on a 150-frame composition
+ * (5 seconds at 30fps) and keeps a single frame wide enough to trim.
+ */
+export declare const TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = 30;
+export declare const getTimelineMaxZoom: (durationInFrames: number) => number;
+export declare const clampTimelineZoom: ({ zoom, durationInFrames, }: {
+    zoom: number;
+    durationInFrames: number;
+}) => number;
+export declare const timelineZoomToSliderValue: ({ zoom, maxZoom, }: {
+    zoom: number;
+    maxZoom: number;
+}) => number;
+export declare const sliderValueToTimelineZoom: ({ sliderValue, maxZoom, }: {
+    sliderValue: number;
+    maxZoom: number;
+}) => number;
+export declare const TIMELINE_ZOOM_SLIDER_PROPS: {
+    readonly min: 0;
+    readonly max: 1000;
+    readonly step: 1;
+};

package/dist/helpers/get-timeline-max-zoom.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TIMELINE_ZOOM_SLIDER_PROPS = exports.sliderValueToTimelineZoom = exports.timelineZoomToSliderValue = exports.clampTimelineZoom = exports.getTimelineMaxZoom = exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = exports.TIMELINE_MAX_ZOOM_FLOOR = exports.TIMELINE_MIN_ZOOM = void 0;
+exports.TIMELINE_MIN_ZOOM = 1;
+exports.TIMELINE_MAX_ZOOM_FLOOR = 5;
+/**
+ * How many frames fill the timeline viewport at max zoom.
+ * 30 frames matches the previous 5x cap on a 150-frame composition
+ * (5 seconds at 30fps) and keeps a single frame wide enough to trim.
+ */
+exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = 30;
+const TIMELINE_ZOOM_SLIDER_MAX = 1000;
+const getTimelineMaxZoom = (durationInFrames) => {
+    const frameLevelZoom = durationInFrames / exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM;
+    return Math.max(exports.TIMELINE_MAX_ZOOM_FLOOR, Math.ceil(frameLevelZoom * 10) / 10);
+};
+exports.getTimelineMaxZoom = getTimelineMaxZoom;
+const clampTimelineZoom = ({ zoom, durationInFrames, }) => {
+    const clamped = Math.min((0, exports.getTimelineMaxZoom)(durationInFrames), Math.max(exports.TIMELINE_MIN_ZOOM, zoom));
+    return Math.round(clamped * 10) / 10;
+};
+exports.clampTimelineZoom = clampTimelineZoom;
+const timelineZoomToSliderValue = ({ zoom, maxZoom, }) => {
+    if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
+        return 0;
+    }
+    const clampedZoom = Math.min(maxZoom, Math.max(exports.TIMELINE_MIN_ZOOM, zoom));
+    const t = Math.log(clampedZoom / exports.TIMELINE_MIN_ZOOM) /
+        Math.log(maxZoom / exports.TIMELINE_MIN_ZOOM);
+    return Math.round(t * TIMELINE_ZOOM_SLIDER_MAX);
+};
+exports.timelineZoomToSliderValue = timelineZoomToSliderValue;
+const sliderValueToTimelineZoom = ({ sliderValue, maxZoom, }) => {
+    if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
+        return exports.TIMELINE_MIN_ZOOM;
+    }
+    const t = sliderValue / TIMELINE_ZOOM_SLIDER_MAX;
+    return exports.TIMELINE_MIN_ZOOM * (maxZoom / exports.TIMELINE_MIN_ZOOM) ** t;
+};
+exports.sliderValueToTimelineZoom = sliderValueToTimelineZoom;
+exports.TIMELINE_ZOOM_SLIDER_PROPS = {
+    min: 0,
+    max: TIMELINE_ZOOM_SLIDER_MAX,
+    step: 1,
+};

package/dist/helpers/inject-css.js

@@ -58,22 +58,24 @@ const makeDefaultGlobalCSS = () => {
 
   input:focus,
   textarea:focus,
-  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch):not(.__remotion-inspector-section-title),
+  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch):not(.__remotion-inspector-section-title):not(.__remotion-timeline-expand-arrow-button),
   a:focus {
 	    outline: none;
 	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
 	  }
 
   .__remotion-composition-selector-item:focus,
-  .__remotion-inspector-inline-action:focus,
-  .__remotion-inspector-section-title:focus {
+  .__remotion-inspector-quick-action:focus,
+  .__remotion-inspector-section-title:focus,
+  .__remotion-timeline-expand-arrow-button:focus {
     outline: none;
     box-shadow: none;
   }
 
   .__remotion-composition-selector-item:focus-visible,
-  .__remotion-inspector-inline-action:focus-visible,
-  .__remotion-inspector-section-title:focus-visible {
+  .__remotion-inspector-quick-action:focus-visible,
+  .__remotion-inspector-section-title:focus-visible,
+  .__remotion-timeline-expand-arrow-button:focus-visible {
     box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
   }
 

package/dist/helpers/render-codec-label.d.ts

@@ -1,2 +1,2 @@
-export declare const renderHumanReadableAudioCodec: (codec: "aac" | "ac3" | "alaw" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis" | null) => string;
+export declare const renderHumanReadableAudioCodec: (codec: "aac" | "ac3" | "alaw" | "dts" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis" | null) => string;
 export declare const renderHumanReadableVideoCodec: (codec: "av1" | "avc" | "hevc" | "prores" | "vp8" | "vp9" | null) => string;

package/dist/helpers/retry-payload.js

@@ -201,6 +201,7 @@ const makeClientRetryPayload = (job) => {
         initialKeyframeIntervalInSeconds: job.type === 'client-video' ? job.keyframeIntervalInSeconds : null,
         initialMuted: job.type === 'client-video' ? job.muted : null,
         initialTransparent: job.type === 'client-video' ? job.transparent : null,
+        initialAllowHtmlInCanvas: job.allowHtmlInCanvas,
         initialPageResponsiveness: job.type === 'client-video' ? job.pageResponsiveness : 'disabled',
     };
 };

package/dist/helpers/studio-runtime-config.d.ts

@@ -2,5 +2,5 @@ export declare const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 export declare const getStudioAskAIEnabled: () => boolean;
 export declare const getStudioInteractivityEnabled: () => boolean;
 export declare const getStudioKeyboardShortcutsEnabled: () => boolean;
-export declare const getStudioMaxTimelineTracks: () => number;
+export declare const getStudioMaxTimelineTracks: () => number | null;
 export declare const getStudioBufferStateDelayInMilliseconds: () => number;

package/dist/helpers/studio-runtime-config.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStudioBufferStateDelayInMilliseconds = exports.getStudioMaxTimelineTracks = exports.getStudioKeyboardShortcutsEnabled = exports.getStudioInteractivityEnabled = exports.getStudioAskAIEnabled = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 const defaultStudioRuntimeConfig = {
     askAIEnabled: false,
@@ -12,6 +11,7 @@ const defaultStudioRuntimeConfig = {
     keyboardShortcutsEnabled: true,
     maxTimelineTracks: null,
     publicLicenseKey: null,
+    configFileStudioSettings: null,
 };
 const getStudioRuntimeConfig = () => {
     var _a;
@@ -33,8 +33,7 @@ const getStudioKeyboardShortcutsEnabled = () => {
 };
 exports.getStudioKeyboardShortcutsEnabled = getStudioKeyboardShortcutsEnabled;
 const getStudioMaxTimelineTracks = () => {
-    var _a;
-    return (_a = getStudioRuntimeConfig().maxTimelineTracks) !== null && _a !== void 0 ? _a : studio_shared_1.DEFAULT_TIMELINE_TRACKS;
+    return getStudioRuntimeConfig().maxTimelineTracks;
 };
 exports.getStudioMaxTimelineTracks = getStudioMaxTimelineTracks;
 const getStudioBufferStateDelayInMilliseconds = () => {

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

@@ -1,5 +1,5 @@
 import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type InteractivitySchemaFieldInfo, type SchemaFieldGroup, type SchemaFieldGroupInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls, type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
-import type { GetDragOverrides, GetEffectDragOverrides, InteractivitySchema as InteractivitySchemaShape, TSequence } from 'remotion';
+import type { GetDragOverrides, GetEffectDragOverrides, InteractivitySchema as InteractivitySchemaShape, RuntimeValueStore, TSequence } from 'remotion';
 import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
 export { SCHEMA_FIELD_GROUPS, getEffectFieldsToShow, getFieldsToShow, getSchemaFieldGroup, SCHEMA_FIELD_ROW_HEIGHT, } from '@remotion/studio-shared';
@@ -30,6 +30,8 @@ export type TimelineTreeNode = {
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
     readonly field: AnySchemaFieldInfo | null;
+    readonly runtimeValue: unknown;
+    readonly runtimeValueStore: RuntimeValueStore | null;
 };
 export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, includeSourceControls, runtimeValues, }: {
     sequence: TSequence;

package/dist/helpers/timeline-layout.js

@@ -44,6 +44,8 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                 },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
+                runtimeValue: runtimeValues === null || runtimeValues === void 0 ? void 0 : runtimeValues[f.key],
+                runtimeValueStore: null,
             });
         }
     }
@@ -85,6 +87,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                     },
                     children: effectFields.map((f) => {
                         var _a;
+                        var _b, _c;
                         return ({
                             kind: 'field',
                             nodePathInfo: {
@@ -99,8 +102,10 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                                 numberOfSequencesWithThisNodePath: 0,
                                 supportsEffects,
                             },
-                            label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
+                            label: (_b = f.description) !== null && _b !== void 0 ? _b : f.key,
                             field: f,
+                            runtimeValue: null,
+                            runtimeValueStore: (_c = (_a = sequence.effectRuntimeValues) === null || _a === void 0 ? void 0 : _a[i]) !== null && _c !== void 0 ? _c : null,
                         });
                     }),
                 };

package/dist/helpers/url-state.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
 const getUrlHandlingType = () => {
-    if (window.remotion_isReadOnlyStudio) {
+    if (window.remotion_isReadOnlyStudio || window.remotion_browserStudio) {
         return 'query-string';
     }
     return 'spa';
@@ -32,7 +32,8 @@ const reloadUrl = () => {
 exports.reloadUrl = reloadUrl;
 const getRoute = () => {
     if (getUrlHandlingType() === 'query-string') {
-        return window.location.search.substring(1);
+        const route = window.location.search.substring(1);
+        return route.startsWith('/') ? route : '';
     }
     return window.location.pathname;
 };

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMaxMediaDuration = void 0;
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const is_video_with_last_frame_hold_1 = require("./is-video-with-last-frame-hold");
 const use_media_metadata_1 = require("./use-media-metadata");
 const cache = new Map();
@@ -19,7 +20,8 @@ const useMaxMediaDuration = (s, fps) => {
     var _a;
     const holdsLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
     const src = holdsLastFrame ? null : getSrc(s);
-    const cacheKey = src ? getCacheKey(src, fps) : null;
+    const resolvedSrc = remotion_1.Internals.usePreload(src !== null && src !== void 0 ? src : '');
+    const cacheKey = src ? getCacheKey(resolvedSrc, 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)(() => {
         var _a;
@@ -32,7 +34,7 @@ const useMaxMediaDuration = (s, fps) => {
             return;
         }
         let cancelled = false;
-        (0, use_media_metadata_1.getMediaMetadata)(src)
+        (0, use_media_metadata_1.getMediaMetadata)(resolvedSrc)
             .then((metadata) => {
             if (cancelled || !metadata) {
                 return;
@@ -50,7 +52,7 @@ const useMaxMediaDuration = (s, fps) => {
         return () => {
             cancelled = true;
         };
-    }, [cacheKey, fps, src]);
+    }, [cacheKey, fps, resolvedSrc, src]);
     if (holdsLastFrame) {
         return Infinity;
     }

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

@@ -4,6 +4,7 @@ exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMeta
 const media_utils_1 = require("@remotion/media-utils");
 const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 const cache = new Map();
 const pendingRequests = new Map();
@@ -22,19 +23,38 @@ const safeCall = async (fn) => {
 };
 const getMediabunnyMetadata = async (src) => {
     var _a, _b;
-    let input;
-    try {
-        input = new mediabunny_1.Input({
-            formats: mediabunny_1.ALL_FORMATS,
-            source: new mediabunny_1.UrlSource(src),
-        });
-    }
-    catch (_c) {
+    const lease = (() => {
+        try {
+            return remotion_1.Internals.globalMediaResourceManager.acquire({
+                key: remotion_1.Internals.getMediabunnyInputResourceKey({
+                    src,
+                    credentials: null,
+                    requestInitFingerprint: null,
+                    revision: null,
+                }),
+                create: () => {
+                    const createdInput = new mediabunny_1.Input({
+                        formats: mediabunny_1.ALL_FORMATS,
+                        source: new mediabunny_1.UrlSource(src),
+                    });
+                    return {
+                        resource: createdInput,
+                        dispose: () => createdInput.dispose(),
+                    };
+                },
+            });
+        }
+        catch (_a) {
+            return null;
+        }
+    })();
+    if (lease === null) {
         return null;
     }
+    const input = lease.resource;
     try {
         const [duration, format, videoTrack, audioTrack] = await Promise.all([
-            safeCall(() => (0, get_duration_or_compute_1.getDurationOrCompute)(input)),
+            safeCall(() => lease.getOrCreateValue(remotion_1.Internals.MEDIABUNNY_DURATION_VALUE_KEY, () => (0, get_duration_or_compute_1.getDurationOrCompute)(input))),
             safeCall(() => input.getFormat()),
             safeCall(() => input.getPrimaryVideoTrack()),
             safeCall(() => input.getPrimaryAudioTrack()),
@@ -66,12 +86,7 @@ const getMediabunnyMetadata = async (src) => {
         };
     }
     finally {
-        try {
-            input.dispose();
-        }
-        catch (_d) {
-            // ignore
-        }
+        lease.release();
     }
 };
 const getFallbackVideoMetadata = async (src) => {
@@ -121,15 +136,17 @@ const getMediaMetadata = (src) => {
 };
 exports.getMediaMetadata = getMediaMetadata;
 const useMediaMetadata = (src) => {
-    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedMediaMetadata)(src) : null);
+    const resolvedSrc = remotion_1.Internals.usePreload(src !== null && src !== void 0 ? src : '');
+    const metadataSrc = src === null ? null : resolvedSrc;
+    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(metadataSrc ? (0, exports.getCachedMediaMetadata)(metadataSrc) : null);
     (0, react_1.useEffect)(() => {
-        const cached = src ? (0, exports.getCachedMediaMetadata)(src) : null;
+        const cached = metadataSrc ? (0, exports.getCachedMediaMetadata)(metadataSrc) : null;
         setMediaMetadata(cached);
-        if (!src || cached) {
+        if (!metadataSrc || cached) {
             return;
         }
         let cancelled = false;
-        (0, exports.getMediaMetadata)(src)
+        (0, exports.getMediaMetadata)(metadataSrc)
             .then((metadata) => {
             if (cancelled) {
                 return;
@@ -145,7 +162,7 @@ const useMediaMetadata = (src) => {
         return () => {
             cancelled = true;
         };
-    }, [src]);
+    }, [metadataSrc]);
     return mediaMetadata;
 };
 exports.useMediaMetadata = useMediaMetadata;