@remotion/media 4.0.454 → 4.0.456

package/dist/esm/index.mjs

@@ -37,20 +37,53 @@ var __callDispose = (stack, error, hasError) => {
 };
 
 // src/audio/audio.tsx
-import { Internals as Internals17, Sequence, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
+import { useState as useState3 } from "react";
+import { useMemo as useMemo3 } from "react";
+import {
+  useVideoConfig as useVideoConfig2
+} from "remotion";
+import { Internals as Internals16, Sequence, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
+
+// src/show-in-timeline.ts
+import { Internals } from "remotion";
+var getLoopDisplay = ({
+  loop,
+  mediaDurationInSeconds,
+  playbackRate,
+  trimAfter,
+  trimBefore,
+  sequenceDurationInFrames,
+  compFps
+}) => {
+  if (!loop || !mediaDurationInSeconds) {
+    return;
+  }
+  const durationInFrames = Internals.calculateMediaDuration({
+    mediaDurationInFrames: mediaDurationInSeconds * compFps,
+    playbackRate,
+    trimAfter,
+    trimBefore
+  });
+  const maxTimes = sequenceDurationInFrames / durationInFrames;
+  return {
+    numberOfTimes: maxTimes,
+    startOffset: 0,
+    durationInFrames
+  };
+};
 
 // src/audio/audio-for-preview.tsx
-import { useContext as useContext3, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { useContext as useContext2, useEffect, useMemo, useRef, useState } from "react";
 import {
-  Internals as Internals8,
+  Internals as Internals7,
   Audio as RemotionAudio,
   useBufferState,
   useCurrentFrame,
-  useVideoConfig as useVideoConfig2
+  useVideoConfig
 } from "remotion";
 
 // src/get-time-in-seconds.ts
-import { Internals } from "remotion";
+import { Internals as Internals2 } from "remotion";
 var getTimeInSeconds = ({
   loop,
   mediaDurationInSeconds,
@@ -65,7 +98,7 @@ var getTimeInSeconds = ({
   if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === "fail") {
     throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
   }
-  const loopDuration = loop ? Internals.calculateMediaDuration({
+  const loopDuration = loop ? Internals2.calculateMediaDuration({
     trimAfter,
     mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
     playbackRate: 1,
@@ -91,7 +124,7 @@ var calculateEndTime = ({
   if (mediaDurationInSeconds === null && ifNoMediaDuration === "fail") {
     throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
   }
-  const mediaDuration = Internals.calculateMediaDuration({
+  const mediaDuration = Internals2.calculateMediaDuration({
     trimAfter,
     mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
     playbackRate: 1,
@@ -102,11 +135,11 @@ var calculateEndTime = ({
 
 // src/media-player.ts
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 
 // src/audio-iterator-manager.ts
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
-import { Internals as Internals2 } from "remotion";
+import { Internals as Internals3 } from "remotion";
 
 // src/make-iterator-with-priming.ts
 var AUDIO_PRIMING_SECONDS = 0.5;
@@ -451,7 +484,7 @@ var audioIteratorManager = ({
     node.connect(gainNode);
     const started = scheduleAudioNode(node, mediaTimestamp, originalUnloopedMediaTimestamp, currentTime);
     if (started.type === "not-started") {
-      Internals2.Log.verbose({ logLevel, tag: "audio-scheduling" }, "not started, disconnected: %s %s", mediaTimestamp.toFixed(3), buffer.duration.toFixed(3));
+      Internals3.Log.verbose({ logLevel, tag: "audio-scheduling" }, "not started, disconnected: %s %s", mediaTimestamp.toFixed(3), buffer.duration.toFixed(3));
       node.disconnect();
       return;
     }
@@ -765,6 +798,21 @@ var getDurationOrCompute = async (input) => {
   }) ?? input.computeDuration(undefined, { skipLiveWait: true });
 };
 
+// src/helpers/resolve-audio-track.ts
+var resolveAudioTrack = async ({
+  videoTrack,
+  audioTracks,
+  audioStreamIndex
+}) => {
+  if (audioStreamIndex !== null) {
+    return audioTracks[audioStreamIndex] ?? null;
+  }
+  if (videoTrack) {
+    return await videoTrack.getPrimaryPairableAudioTrack() ?? null;
+  }
+  return audioTracks[0] ?? null;
+};
+
 // src/is-type-of-error.ts
 function isNetworkError(error) {
   if (error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource")) {
@@ -793,7 +841,7 @@ var makeNonceManager = () => {
 
 // src/video-iterator-manager.ts
 import { CanvasSink } from "mediabunny";
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals4 } from "remotion";
 
 // src/canvas-ahead-of-time.ts
 var canvasesAheadOfTime = (videoSink, startTimestamp) => {
@@ -1020,6 +1068,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
 };
 
 // src/video-iterator-manager.ts
+var { runEffectChain } = Internals4;
 var videoIteratorManager = async ({
   delayPlaybackHandleIfNotPremounting,
   canvas,
@@ -1030,7 +1079,10 @@ var videoIteratorManager = async ({
   videoTrack,
   getLoopSegmentMediaEndTimestamp,
   getStartTime,
-  getIsLooping
+  getIsLooping,
+  getEffects,
+  getEffectChainState,
+  getCurrentFrame
 }) => {
   let videoIteratorsCreated = 0;
   let videoFrameIterator = null;
@@ -1050,10 +1102,24 @@ var videoIteratorManager = async ({
     alpha: true
   });
   const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
-  const drawFrame = (frame) => {
+  const drawFrame = async (frame) => {
     if (context && canvas) {
-      context.clearRect(0, 0, canvas.width, canvas.height);
-      context.drawImage(frame.canvas, 0, 0);
+      const effects = getEffects();
+      const chainState = getEffectChainState(canvas.width, canvas.height);
+      if (effects.length > 0 && chainState && canvas instanceof HTMLCanvasElement) {
+        await runEffectChain({
+          state: chainState,
+          source: frame.canvas,
+          effects,
+          output: canvas,
+          frame: getCurrentFrame(),
+          width: canvas.width,
+          height: canvas.height
+        });
+      } else {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(frame.canvas, 0, 0);
+      }
     }
     framesRendered++;
     drawDebugOverlay();
@@ -1061,7 +1127,7 @@ var videoIteratorManager = async ({
     if (callback) {
       callback(frame.canvas);
     }
-    Internals3.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
+    Internals4.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
   const startVideoIterator = async (timeToSeek, nonce) => {
     let __stack = [];
@@ -1084,7 +1150,7 @@ var videoIteratorManager = async ({
       if (!iterator.initialFrame) {
         return;
       }
-      drawFrame(iterator.initialFrame);
+      await drawFrame(iterator.initialFrame);
     } catch (_catch) {
       var _err = _catch, _hasErr = 1;
     } finally {
@@ -1104,7 +1170,7 @@ var videoIteratorManager = async ({
     }
     const videoSatisfyResult = videoFrameIterator.tryToSatisfySeek(newTime);
     if (videoSatisfyResult.type === "satisfied") {
-      drawFrame(videoSatisfyResult.frame);
+      await drawFrame(videoSatisfyResult.frame);
       return;
     }
     if (nonce.isStale()) {
@@ -1158,6 +1224,9 @@ class MediaPlayer {
   debugOverlay = false;
   nonceManager;
   onVideoFrameCallback = null;
+  getEffects;
+  getEffectChainState;
+  getCurrentFrame;
   initializationPromise = null;
   bufferState;
   isPremounting;
@@ -1184,7 +1253,10 @@ class MediaPlayer {
     playing,
     sequenceOffset,
     credentials,
-    tagType
+    tagType,
+    getEffects,
+    getEffectChainState,
+    getCurrentFrame
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -1213,6 +1285,9 @@ class MediaPlayer {
       formats: ALL_FORMATS
     });
     this.tagType = tagType;
+    this.getEffects = getEffects;
+    this.getEffectChainState = getEffectChainState;
+    this.getCurrentFrame = getCurrentFrame;
     if (canvas) {
       const context = canvas.getContext("2d", {
         alpha: true,
@@ -1276,7 +1351,7 @@ class MediaPlayer {
           if (isNetworkError(err)) {
             throw error;
           }
-          Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+          Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
           return { type: "unknown-container-format" };
         }
         const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
@@ -1288,7 +1363,11 @@ class MediaPlayer {
           return { type: "disposed" };
         }
         this.totalDuration = durationInSeconds;
-        const audioTrack = await (this.audioStreamIndex === null ? videoTrack?.getPrimaryPairableAudioTrack() : audioTracks[this.audioStreamIndex] ?? null);
+        const audioTrack = await resolveAudioTrack({
+          videoTrack,
+          audioTracks,
+          audioStreamIndex: this.audioStreamIndex
+        });
         if (!videoTrack && !audioTrack) {
           return { type: "no-tracks" };
         }
@@ -1316,7 +1395,10 @@ class MediaPlayer {
             drawDebugOverlay: this.drawDebugOverlay,
             getLoopSegmentMediaEndTimestamp: () => this.getLoopSegmentMediaEndTimestamp(),
             getStartTime: () => this.getStartTime(),
-            getIsLooping: () => this.loop
+            getIsLooping: () => this.loop,
+            getEffects: this.getEffects,
+            getEffectChainState: this.getEffectChainState,
+            getCurrentFrame: this.getCurrentFrame
           });
         }
         const startTime = this.getTrimmedTime(startTimeUnresolved);
@@ -1376,16 +1458,16 @@ class MediaPlayer {
           if (this.isDisposalError()) {
             return { type: "disposed" };
           }
-          Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
+          Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
         }
         return { type: "success", durationInSeconds };
       } catch (error) {
         const err = error;
         if (isNetworkError(err)) {
-          Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
+          Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
           return { type: "network-error" };
         }
-        Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
+        Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
         throw error;
       }
     } catch (_catch) {
@@ -1673,45 +1755,6 @@ var callOnErrorAndResolve = ({
   return ["fallback", error];
 };
 
-// src/show-in-timeline.ts
-import { useMemo } from "react";
-import { Internals as Internals5, useVideoConfig } from "remotion";
-var useLoopDisplay = ({
-  loop,
-  mediaDurationInSeconds,
-  playbackRate,
-  trimAfter,
-  trimBefore
-}) => {
-  const { durationInFrames: compDuration, fps } = useVideoConfig();
-  const loopDisplay = useMemo(() => {
-    if (!loop || !mediaDurationInSeconds) {
-      return;
-    }
-    const durationInFrames = Internals5.calculateMediaDuration({
-      mediaDurationInFrames: mediaDurationInSeconds * fps,
-      playbackRate,
-      trimAfter,
-      trimBefore
-    });
-    const maxTimes = compDuration / durationInFrames;
-    return {
-      numberOfTimes: maxTimes,
-      startOffset: 0,
-      durationInFrames
-    };
-  }, [
-    compDuration,
-    fps,
-    loop,
-    mediaDurationInSeconds,
-    playbackRate,
-    trimAfter,
-    trimBefore
-  ]);
-  return loopDisplay;
-};
-
 // src/use-common-effects.ts
 import { useContext, useLayoutEffect } from "react";
 import { Internals as Internals6 } from "remotion";
@@ -1860,110 +1903,6 @@ var useCommonEffects = ({
   }, [currentTime, logLevel, mediaPlayerReady, label, mediaPlayerRef]);
 };
 
-// src/use-media-in-timeline.ts
-import { useContext as useContext2, useEffect, useState } from "react";
-import { Internals as Internals7 } from "remotion";
-var useMediaInTimeline = ({
-  volume,
-  mediaVolume,
-  src,
-  mediaType,
-  playbackRate,
-  displayName,
-  stack,
-  showInTimeline,
-  premountDisplay,
-  postmountDisplay,
-  loopDisplay,
-  trimBefore,
-  trimAfter,
-  controls
-}) => {
-  const parentSequence = useContext2(Internals7.SequenceContext);
-  const startsAt = Internals7.useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext2(Internals7.SequenceManager);
-  const [mediaId] = useState(() => String(Math.random()));
-  const {
-    volumes,
-    duration,
-    doesVolumeChange,
-    nonce,
-    rootId,
-    isStudio,
-    finalDisplayName
-  } = Internals7.useBasicMediaInTimeline({
-    volume,
-    mediaVolume,
-    mediaType,
-    src,
-    displayName,
-    trimBefore,
-    trimAfter,
-    playbackRate
-  });
-  useEffect(() => {
-    if (!src) {
-      throw new Error("No src passed");
-    }
-    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
-      return;
-    }
-    if (!showInTimeline) {
-      return;
-    }
-    registerSequence({
-      type: mediaType,
-      src,
-      id: mediaId,
-      duration,
-      from: 0,
-      parent: parentSequence?.id ?? null,
-      displayName: finalDisplayName,
-      rootId,
-      volume: volumes,
-      showInTimeline: true,
-      nonce: nonce.get(),
-      startMediaFrom: 0 - startsAt + (trimBefore ?? 0),
-      doesVolumeChange,
-      loopDisplay,
-      playbackRate,
-      stack,
-      premountDisplay,
-      postmountDisplay,
-      controls: controls ?? null
-    });
-    return () => {
-      unregisterSequence(mediaId);
-    };
-  }, [
-    controls,
-    doesVolumeChange,
-    duration,
-    finalDisplayName,
-    isStudio,
-    loopDisplay,
-    mediaId,
-    mediaType,
-    nonce,
-    parentSequence?.id,
-    playbackRate,
-    postmountDisplay,
-    premountDisplay,
-    registerSequence,
-    rootId,
-    showInTimeline,
-    src,
-    stack,
-    startsAt,
-    unregisterSequence,
-    volumes,
-    trimBefore
-  ]);
-  return {
-    id: mediaId
-  };
-};
-
 // src/audio/audio-for-preview.tsx
 import { jsx } from "react/jsx-runtime";
 var {
@@ -1977,7 +1916,7 @@ var {
   warnAboutTooHighVolume,
   usePreload,
   SequenceContext
-} = Internals8;
+} = Internals7;
 var AudioForPreviewAssertedShowing = ({
   src,
   playbackRate,
@@ -1997,23 +1936,22 @@ var AudioForPreviewAssertedShowing = ({
   fallbackHtml5AudioProps,
   onError,
   credentials,
-  controls
+  setMediaDurationInSeconds
 }) => {
   const videoConfig = useUnsafeVideoConfig();
   const frame = useCurrentFrame();
   const mediaPlayerRef = useRef(null);
   const initialTrimBeforeRef = useRef(trimBefore);
   const initialTrimAfterRef = useRef(trimAfter);
-  const [mediaPlayerReady, setMediaPlayerReady] = useState2(false);
-  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState2(false);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
+  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
   const [playing] = Timeline.usePlayingState();
-  const timelineContext = Internals8.useTimelineContext();
+  const timelineContext = Internals7.useTimelineContext();
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext3(SharedAudioContext);
+  const sharedAudioContext = useContext2(SharedAudioContext);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState();
   const [mediaVolume] = useMediaVolumeState();
-  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState2(null);
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -2031,39 +1969,16 @@ var AudioForPreviewAssertedShowing = ({
   const currentTimeRef = useRef(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload(src);
-  const parentSequence = useContext3(SequenceContext);
+  const parentSequence = useContext2(SequenceContext);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
-  const loopDisplay = useLoopDisplay({
-    loop,
-    mediaDurationInSeconds,
-    playbackRate,
-    trimAfter,
-    trimBefore
-  });
-  useMediaInTimeline({
-    volume,
-    mediaVolume,
-    mediaType: "audio",
-    src,
-    playbackRate,
-    displayName: name ?? null,
-    stack,
-    showInTimeline,
-    premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    loopDisplay,
-    trimAfter,
-    trimBefore,
-    controls
-  });
-  const bufferingContext = useContext3(Internals8.BufferingContextReact);
+  const bufferingContext = useContext2(Internals7.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
-  const isPlayerBuffering = Internals8.useIsPlayerBuffering(bufferingContext);
+  const isPlayerBuffering = Internals7.useIsPlayerBuffering(bufferingContext);
   const initialPlaying = useRef(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef(isPremounting);
   const initialIsPostmounting = useRef(isPostmounting);
@@ -2095,7 +2010,7 @@ var AudioForPreviewAssertedShowing = ({
     logLevel,
     label: "AudioForPreview"
   });
-  useEffect2(() => {
+  useEffect(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -2138,7 +2053,10 @@ var AudioForPreviewAssertedShowing = ({
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
         credentials,
-        tagType: "audio"
+        tagType: "audio",
+        getEffects: () => [],
+        getEffectChainState: () => null,
+        getCurrentFrame: () => 0
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -2156,7 +2074,7 @@ var AudioForPreviewAssertedShowing = ({
           if (action === "fail") {
             throw errorToUse;
           } else {
-            Internals8.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+            Internals7.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
             setShouldFallbackToNativeAudio(true);
           }
         };
@@ -2179,7 +2097,7 @@ var AudioForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
-          Internals8.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
+          Internals7.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
         }
       }).catch((error) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -2192,7 +2110,7 @@ var AudioForPreviewAssertedShowing = ({
         if (action === "fail") {
           throw errorToUse;
         } else {
-          Internals8.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
+          Internals7.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
           setShouldFallbackToNativeAudio(true);
         }
       });
@@ -2207,12 +2125,12 @@ var AudioForPreviewAssertedShowing = ({
       if (action === "fail") {
         throw errorToUse;
       }
-      Internals8.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
+      Internals7.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeAudio(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals8.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
+        Internals7.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -2229,7 +2147,8 @@ var AudioForPreviewAssertedShowing = ({
     disallowFallbackToHtml5Audio,
     buffer,
     onError,
-    credentials
+    credentials,
+    setMediaDurationInSeconds
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx(RemotionAudio, {
@@ -2272,14 +2191,14 @@ var AudioForPreview = ({
   fallbackHtml5AudioProps,
   onError,
   credentials,
-  controls
+  setMediaDurationInSeconds
 }) => {
   const preloadedSrc = usePreload(src);
-  const defaultLogLevel = Internals8.useLogLevel();
+  const defaultLogLevel = Internals7.useLogLevel();
   const frame = useCurrentFrame();
-  const videoConfig = useVideoConfig2();
+  const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo2(() => {
+  const showShow = useMemo(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -2303,6 +2222,9 @@ var AudioForPreview = ({
   if (!showShow) {
     return null;
   }
+  if (!setMediaDurationInSeconds) {
+    throw new Error("setMediaDurationInSeconds is required");
+  }
   return /* @__PURE__ */ jsx(AudioForPreviewAssertedShowing, {
     audioStreamIndex,
     src: preloadedSrc,
@@ -2322,16 +2244,16 @@ var AudioForPreview = ({
     onError,
     credentials,
     fallbackHtml5AudioProps,
-    controls
+    setMediaDurationInSeconds
   });
 };
 
 // src/audio/audio-for-rendering.tsx
-import { useContext as useContext4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState3 } from "react";
+import { useContext as useContext3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 import {
   cancelRender as cancelRender2,
   Html5Audio,
-  Internals as Internals16,
+  Internals as Internals15,
   random,
   useCurrentFrame as useCurrentFrame2,
   useDelayRender,
@@ -2340,13 +2262,13 @@ import {
 
 // src/caches.ts
 import React2 from "react";
-import { cancelRender, Internals as Internals13 } from "remotion";
+import { cancelRender, Internals as Internals12 } from "remotion";
 
 // src/audio-extraction/audio-manager.ts
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 
 // src/audio-extraction/audio-iterator.ts
-import { Internals as Internals9 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/audio-extraction/audio-cache.ts
 var makeAudioCache = () => {
@@ -2425,7 +2347,7 @@ var warnAboutMatroskaOnce = (src, logLevel) => {
     return;
   }
   warned[src] = true;
-  Internals9.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
+  Internals8.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
 };
 var makeAudioIterator2 = ({
   audioSampleSink,
@@ -2493,7 +2415,7 @@ var makeAudioIterator2 = ({
     if (openTimestamps.length > 0) {
       const first = openTimestamps[0];
       const last = openTimestamps[openTimestamps.length - 1];
-      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
+      Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
     }
   };
   const getCacheStats = () => {
@@ -2590,7 +2512,7 @@ var makeAudioManager = () => {
       if (seenKeys.has(key)) {
         iterator.prepareForDeletion();
         iterators.splice(iterators.indexOf(iterator), 1);
-        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
+        Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
       }
       seenKeys.add(key);
     }
@@ -2611,7 +2533,7 @@ var makeAudioManager = () => {
       attempts++;
     }
     if ((await getTotalCacheStats()).totalSize > maxCacheSize && attempts >= maxAttempts) {
-      Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
+      Internals9.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
     }
     for (const iterator of iterators) {
       if (iterator.src === src && await iterator.waitForCompletion() && iterator.canSatisfyRequestedTime(timeInSeconds)) {
@@ -2680,7 +2602,7 @@ var makeAudioManager = () => {
 };
 
 // src/video-extraction/keyframe-manager.ts
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/render-timestamp-range.ts
 var renderTimestampRange = (timestamps) => {
@@ -2694,7 +2616,7 @@ var renderTimestampRange = (timestamps) => {
 };
 
 // src/video-extraction/keyframe-bank.ts
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/video-extraction/get-allocation-size.ts
 var getAllocationSize = (sample) => {
@@ -2757,7 +2679,7 @@ var makeKeyframeBank = async ({
       }
     }
     if (deletedTimestamps.length > 0) {
-      Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
     }
   };
   const hasDecodedEnoughForTimestamp = (timestamp) => {
@@ -2780,7 +2702,7 @@ var makeKeyframeBank = async ({
     frameTimestamps.push(frame.timestamp);
     allocationSize += getAllocationSize(frame);
     lastUsed = Date.now();
-    Internals11.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
+    Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
   };
   const ensureEnoughFramesForTimestamp = async (timestampInSeconds, logLevel, fps) => {
     while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
@@ -2835,7 +2757,7 @@ var makeKeyframeBank = async ({
     throw new Error("No first frame found");
   }
   const startTimestampInSeconds = firstFrame.value.timestamp;
-  Internals11.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
+  Internals10.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
   addFrame(firstFrame.value, parentLogLevel);
   const getRangeOfTimestamps = () => {
     if (frameTimestamps.length === 0) {
@@ -2853,7 +2775,7 @@ var makeKeyframeBank = async ({
   const prepareForDeletion = (logLevel, reason) => {
     const range = getRangeOfTimestamps();
     if (range) {
-      Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
+      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
     }
     let framesDeleted = 0;
     for (const frameTimestamp of frameTimestamps.slice()) {
@@ -2926,10 +2848,10 @@ var makeKeyframeManager = () => {
         if (size === 0) {
           continue;
         }
-        Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
+        Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
       }
     }
-    Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = () => {
     let count = 0;
@@ -2983,7 +2905,7 @@ var makeKeyframeManager = () => {
       const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel, "deleted oldest keyframe bank to stay under max cache size");
       sources[mostInThePastSrc].splice(mostInThePastIndex, 1);
       if (range) {
-        Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
+        Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
       }
     }
     return { finish: false };
@@ -2997,12 +2919,12 @@ var makeKeyframeManager = () => {
       if (finish) {
         break;
       }
-      Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
+      Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
       cacheStats = getTotalCacheStats();
       attempts++;
     }
     if (cacheStats.totalSize > maxCacheSize && attempts >= maxAttempts) {
-      Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
+      Internals11.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
     }
   };
   const clearKeyframeBanksBeforeTime = ({
@@ -3023,7 +2945,7 @@ var makeKeyframeManager = () => {
       }
       if (range.lastTimestamp < threshold) {
         bank.prepareForDeletion(logLevel, "cleared before threshold " + threshold);
-        Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
+        Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
         const bankIndex = banks.indexOf(bank);
         delete sources[src][bankIndex];
       } else {
@@ -3045,7 +2967,7 @@ var makeKeyframeManager = () => {
     const existingBanks = sources[src] ?? [];
     const existingBank = existingBanks?.find((bank) => bank.canSatisfyTimestamp(timestamp));
     if (!existingBank) {
-      Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
+      Internals11.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
       const newKeyframeBank = await makeKeyframeBank({
         videoSampleSink,
         logLevel,
@@ -3056,10 +2978,10 @@ var makeKeyframeManager = () => {
       return newKeyframeBank;
     }
     if (existingBank.canSatisfyTimestamp(timestamp)) {
-      Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
+      Internals11.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
       return existingBank;
     }
-    Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
+    Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
     existingBank.prepareForDeletion(logLevel, "already existed but evicted");
     sources[src] = sources[src].filter((bank) => bank !== existingBank);
     const replacementKeybank = await makeKeyframeBank({
@@ -3150,20 +3072,20 @@ var getUncachedMaxCacheSize = (logLevel) => {
     if (window.remotion_mediaCacheSizeInBytes > 20000 * 1024 * 1024) {
       cancelRender(new Error(`The maximum value for the "mediaCacheSizeInBytes" prop is 20GB (${20000 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
     }
-    Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
     return window.remotion_mediaCacheSizeInBytes;
   }
   if (typeof window !== "undefined" && window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
     const value = window.remotion_initialMemoryAvailable / 2;
     if (value < 500 * 1024 * 1024) {
-      Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
+      Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
       return 500 * 1024 * 1024;
     }
     if (value > 20000 * 1024 * 1024) {
-      Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
+      Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
       return 20000 * 1024 * 1024;
     }
-    Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+    Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
     return value;
   }
   return 1000 * 1000 * 1000;
@@ -3177,7 +3099,7 @@ var getMaxVideoCacheSize = (logLevel) => {
   return cachedMaxCacheSize;
 };
 var useMaxMediaCacheSize = (logLevel) => {
-  const context = React2.useContext(Internals13.MaxMediaCacheSizeContext);
+  const context = React2.useContext(Internals12.MaxMediaCacheSizeContext);
   if (context === null) {
     return getMaxVideoCacheSize(logLevel);
   }
@@ -3431,7 +3353,7 @@ var combineAudioDataAndClosePrevious = (audioDataArray) => {
 };
 
 // src/get-sink.ts
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals13 } from "remotion";
 
 // src/video-extraction/get-frames-since-keyframe.ts
 import {
@@ -3555,8 +3477,15 @@ var getSinks = async (src, credentials) => {
     if (format === "network-error") {
       return "network-error";
     }
-    const videoTrack = await input.getPrimaryVideoTrack();
-    const audioTrack = videoTrack === null ? (await input.getAudioTracks())[index ?? 0] : await (index === null ? videoTrack?.getPrimaryPairableAudioTrack() : (await input.getAudioTracks())[index] ?? null);
+    const [videoTrack, audioTracks] = await Promise.all([
+      input.getPrimaryVideoTrack(),
+      input.getAudioTracks()
+    ]);
+    const audioTrack = await resolveAudioTrack({
+      videoTrack,
+      audioTracks,
+      audioStreamIndex: index
+    });
     if (!audioTrack) {
       return "no-audio-track";
     }
@@ -3593,7 +3522,7 @@ var getSink = (src, logLevel, credentials) => {
   const cacheKey = credentials ? `${src}::${credentials}` : src;
   let promise = sinkPromises[cacheKey];
   if (!promise) {
-    Internals14.Log.verbose({
+    Internals13.Log.verbose({
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
@@ -3734,7 +3663,7 @@ var extractAudio = (params) => {
 };
 
 // src/video-extraction/extract-frame.ts
-import { Internals as Internals15 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 var extractFrameInternal = async ({
   src,
   timeInSeconds: unloopedTimeInSeconds,
@@ -3816,7 +3745,7 @@ var extractFrameInternal = async ({
       durationInSeconds: await sink.getDuration()
     };
   } catch (err) {
-    Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
+    Internals14.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
     return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
   }
 };
@@ -4220,13 +4149,13 @@ var AudioForRendering = ({
   onError,
   credentials
 }) => {
-  const defaultLogLevel = Internals16.useLogLevel();
+  const defaultLogLevel = Internals15.useLogLevel();
   const logLevel = overriddenLogLevel ?? defaultLogLevel;
   const frame = useCurrentFrame2();
-  const absoluteFrame = Internals16.useTimelinePosition();
-  const videoConfig = Internals16.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext4(Internals16.RenderAssetManager);
-  const startsAt = Internals16.useMediaStartsAt();
+  const absoluteFrame = Internals15.useTimelinePosition();
+  const videoConfig = Internals15.useUnsafeVideoConfig();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals15.RenderAssetManager);
+  const startsAt = Internals15.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
     throw new Error("No video config found");
@@ -4236,16 +4165,16 @@ var AudioForRendering = ({
   }
   const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender();
-  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState3(false);
-  const sequenceContext = useContext4(Internals16.SequenceContext);
-  const id = useMemo3(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState2(false);
+  const sequenceContext = useContext3(Internals15.SequenceContext);
+  const id = useMemo2(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
     sequenceContext?.durationInFrames
   ]);
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
-  const audioEnabled = Internals16.useAudioEnabled();
+  const audioEnabled = Internals15.useAudioEnabled();
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
@@ -4296,7 +4225,7 @@ var AudioForRendering = ({
         if (action === "fail") {
           cancelRender2(errorToUse);
         }
-        Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+        Internals15.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         setReplaceWithHtml5Audio(true);
       };
       if (result.type === "unknown-container-format") {
@@ -4323,12 +4252,12 @@ var AudioForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals16.evaluateVolume({
+      const volume = Internals15.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals16.warnAboutTooHighVolume(volume);
+      Internals15.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -4405,7 +4334,7 @@ var AudioForRendering = ({
 
 // src/audio/audio.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var { validateMediaProps } = Internals17;
+var { validateMediaProps } = Internals16;
 var audioSchema = {
   volume: {
     type: "number",
@@ -4429,41 +4358,92 @@ var AudioInner = (props) => {
     name,
     stack,
     showInTimeline,
-    controls,
+    _experimentalControls: controls,
     from,
     durationInFrames,
     ...otherProps
   } = props;
   const environment = useRemotionEnvironment2();
+  const [mediaVolume] = Internals16.useMediaVolumeState();
+  const mediaStartsAt = Internals16.useMediaStartsAt();
+  const videoConfig = useVideoConfig2();
+  const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
+  const basicInfo = Internals16.useBasicMediaInTimeline({
+    src: props.src,
+    volume: props.volume,
+    playbackRate: props.playbackRate ?? 1,
+    trimBefore: props.trimBefore,
+    trimAfter: props.trimAfter,
+    sequenceDurationInFrames,
+    mediaType: "audio",
+    displayName: name ?? "<Audio>",
+    mediaVolume,
+    mediaStartsAt,
+    loop: props.loop ?? false
+  });
+  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState3(null);
+  const loopDisplay = useMemo3(() => getLoopDisplay({
+    loop: props.loop ?? false,
+    mediaDurationInSeconds,
+    playbackRate: props.playbackRate ?? 1,
+    trimAfter: props.trimAfter,
+    trimBefore: props.trimBefore,
+    sequenceDurationInFrames,
+    compFps: videoConfig.fps
+  }), [
+    props.loop,
+    mediaDurationInSeconds,
+    props.playbackRate,
+    props.trimAfter,
+    props.trimBefore,
+    sequenceDurationInFrames,
+    videoConfig.fps
+  ]);
+  const isMedia = useMemo3(() => ({
+    type: "audio",
+    data: basicInfo
+  }), [basicInfo]);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
+  if (sequenceDurationInFrames === 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsx3(Sequence, {
     layout: "none",
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
-    showInTimeline: false,
+    durationInFrames: basicInfo.duration,
+    _remotionInternalStack: stack,
+    _remotionInternalIsMedia: isMedia,
+    name: name ?? "<Audio>",
+    _experimentalControls: controls,
+    _remotionInternalLoopDisplay: loopDisplay,
+    showInTimeline: showInTimeline ?? true,
     children: environment.isRendering ? /* @__PURE__ */ jsx3(AudioForRendering, {
       ...otherProps
     }) : /* @__PURE__ */ jsx3(AudioForPreview, {
       name,
       ...otherProps,
       stack: stack ?? null,
-      controls
+      setMediaDurationInSeconds
     })
   });
 };
-var Audio = Internals17.wrapInSchema(AudioInner, audioSchema);
-Internals17.addSequenceStackTraces(Audio);
+var Audio = Internals16.wrapInSchema(AudioInner, audioSchema);
+Internals16.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { Internals as Internals21, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
+import { useMemo as useMemo6, useState as useState6 } from "react";
+import {
+  useVideoConfig as useVideoConfig5
+} from "remotion";
+import { Internals as Internals20, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
 
 // src/video/video-for-preview.tsx
 import {
-  useContext as useContext5,
-  useEffect as useEffect3,
+  useContext as useContext4,
+  useEffect as useEffect2,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo4,
   useRef as useRef2,
@@ -4471,7 +4451,7 @@ import {
 } from "react";
 import {
   Html5Video,
-  Internals as Internals19,
+  Internals as Internals18,
   useBufferState as useBufferState2,
   useCurrentFrame as useCurrentFrame3,
   useVideoConfig as useVideoConfig3
@@ -4501,7 +4481,7 @@ var getCachedVideoFrame = (src) => {
 };
 
 // src/video/warn-object-fit-css.ts
-import { Internals as Internals18 } from "remotion";
+import { Internals as Internals17 } from "remotion";
 var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
 var warnedStyle = false;
 var warnedClassName = false;
@@ -4512,11 +4492,11 @@ var warnAboutObjectFitInStyleOrClassName = ({
 }) => {
   if (!warnedStyle && style?.objectFit) {
     warnedStyle = true;
-    Internals18.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
+    Internals17.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
   }
   if (!warnedClassName && className && OBJECT_FIT_CLASS_PATTERN.test(className)) {
     warnedClassName = true;
-    Internals18.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
+    Internals17.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
   }
 };
 
@@ -4533,8 +4513,8 @@ var {
   warnAboutTooHighVolume: warnAboutTooHighVolume2,
   usePreload: usePreload2,
   SequenceContext: SequenceContext2,
-  SequenceVisibilityToggleContext
-} = Internals19;
+  useEffectChainState
+} = Internals18;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
   style,
@@ -4547,7 +4527,6 @@ var VideoForPreviewAssertedShowing = ({
   onVideoFrame,
   showInTimeline,
   loop,
-  name,
   trimAfter,
   trimBefore,
   stack,
@@ -4558,9 +4537,10 @@ var VideoForPreviewAssertedShowing = ({
   headless,
   onError,
   credentials,
-  controls,
   objectFit: objectFitProp,
-  _experimentalInitiallyDrawCachedFrame
+  _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects,
+  setMediaDurationInSeconds
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4573,14 +4553,12 @@ var VideoForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
-  const timelineContext = Internals19.useTimelineContext();
+  const timelineContext = Internals18.useTimelineContext();
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext5(SharedAudioContext2);
+  const sharedAudioContext = useContext4(SharedAudioContext2);
   const buffer = useBufferState2();
   const [mediaMuted] = useMediaMutedState2();
   const [mediaVolume] = useMediaVolumeState2();
-  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState4(null);
-  const { hidden } = useContext5(SequenceVisibilityToggleContext);
   const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior);
   const userPreferredVolume = evaluateVolume2({
     frame: volumePropFrame,
@@ -4591,44 +4569,27 @@ var VideoForPreviewAssertedShowing = ({
     throw new Error("No video config found");
   }
   warnAboutTooHighVolume2(userPreferredVolume);
-  const parentSequence = useContext5(SequenceContext2);
+  const effectChainState = useEffectChainState();
+  const experimentalEffectsRef = useRef2(_experimentalEffects);
+  experimentalEffectsRef.current = _experimentalEffects;
+  const effectChainStateRef = useRef2(effectChainState);
+  effectChainStateRef.current = effectChainState;
+  const frameRef = useRef2(frame);
+  frameRef.current = frame;
+  const parentSequence = useContext4(SequenceContext2);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
-  const loopDisplay = useLoopDisplay({
-    loop,
-    mediaDurationInSeconds,
-    playbackRate,
-    trimAfter,
-    trimBefore
-  });
-  const { id: timelineId } = useMediaInTimeline({
-    volume,
-    mediaType: "video",
-    src,
-    playbackRate,
-    displayName: name ?? null,
-    stack,
-    showInTimeline,
-    premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    loopDisplay,
-    mediaVolume,
-    trimAfter,
-    trimBefore,
-    controls
-  });
-  const isSequenceHidden = hidden[timelineId] ?? false;
   const currentTime = frame / videoConfig.fps;
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
-  const buffering = useContext5(Internals19.BufferingContextReact);
+  const buffering = useContext4(Internals18.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
-  const isPlayerBuffering = Internals19.useIsPlayerBuffering(buffering);
+  const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
+  const isPlayerBuffering = Internals18.useIsPlayerBuffering(buffering);
   const initialPlaying = useRef2(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef2(isPremounting);
   const initialIsPostmounting = useRef2(isPostmounting);
@@ -4675,7 +4636,7 @@ var VideoForPreviewAssertedShowing = ({
       cacheVideoFrame(src, canvas);
     };
   }, [_experimentalInitiallyDrawCachedFrame, src]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -4718,7 +4679,10 @@ var VideoForPreviewAssertedShowing = ({
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
         credentials,
-        tagType: "video"
+        tagType: "video",
+        getEffects: () => experimentalEffectsRef.current,
+        getEffectChainState: (width, height) => effectChainStateRef.current?.get(width, height),
+        getCurrentFrame: () => frameRef.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -4736,7 +4700,7 @@ var VideoForPreviewAssertedShowing = ({
           if (action === "fail") {
             throw errorToUse;
           }
-          Internals19.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals18.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
           setShouldFallbackToNativeVideo(true);
         };
         if (result.type === "unknown-container-format") {
@@ -4771,7 +4735,7 @@ var VideoForPreviewAssertedShowing = ({
         if (action === "fail") {
           throw errorToUse;
         }
-        Internals19.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
+        Internals18.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
         setShouldFallbackToNativeVideo(true);
       });
     } catch (error) {
@@ -4785,12 +4749,12 @@ var VideoForPreviewAssertedShowing = ({
       if (action === "fail") {
         throw errorToUse;
       }
-      Internals19.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
+      Internals18.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals19.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
+        Internals18.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -4809,11 +4773,12 @@ var VideoForPreviewAssertedShowing = ({
     sharedAudioContext,
     videoConfig.fps,
     onError,
-    credentials
+    credentials,
+    setMediaDurationInSeconds
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo4(() => {
-    return [Internals19.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals19.truthy).join(" ");
+    return [Internals18.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals18.truthy).join(" ");
   }, [className]);
   useCommonEffects({
     mediaPlayerRef,
@@ -4855,10 +4820,9 @@ var VideoForPreviewAssertedShowing = ({
   const actualStyle = useMemo4(() => {
     return {
       ...style,
-      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1,
       objectFit: objectFitProp
     };
-  }, [isSequenceHidden, objectFitProp, style]);
+  }, [objectFitProp, style]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx4(Html5Video, {
       src,
@@ -4870,7 +4834,7 @@ var VideoForPreviewAssertedShowing = ({
       trimBefore,
       playbackRate,
       loopVolumeCurveBehavior,
-      name,
+      name: "<Html5Video> (fallback)",
       loop,
       showInTimeline,
       stack: stack ?? undefined,
@@ -4915,21 +4879,20 @@ var VideoForPreview = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsx4(VideoForPreviewAssertedShowing, {
-    ...props,
-    controls: props.controls
+    ...props
   });
 };
 
 // src/video/video-for-rendering.tsx
 import {
-  useContext as useContext6,
+  useContext as useContext5,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo5,
   useRef as useRef3,
   useState as useState5
 } from "react";
 import {
-  Internals as Internals20,
+  Internals as Internals19,
   Loop,
   random as random2,
   useCurrentFrame as useCurrentFrame4,
@@ -4953,7 +4916,6 @@ var VideoForRendering = ({
   className,
   fallbackOffthreadVideoProps,
   audioStreamIndex,
-  name,
   disallowFallbackToOffthreadVideo,
   stack,
   toneFrequency,
@@ -4968,11 +4930,11 @@ var VideoForRendering = ({
     throw new TypeError("No `src` was passed to <Video>.");
   }
   const frame = useCurrentFrame4();
-  const absoluteFrame = Internals20.useTimelinePosition();
+  const absoluteFrame = Internals19.useTimelinePosition();
   const { fps } = useVideoConfig4();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals20.RenderAssetManager);
-  const startsAt = Internals20.useMediaStartsAt();
-  const sequenceContext = useContext6(Internals20.SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals19.RenderAssetManager);
+  const startsAt = Internals19.useMediaStartsAt();
+  const sequenceContext = useContext5(Internals19.SequenceContext);
   const id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -4983,8 +4945,8 @@ var VideoForRendering = ({
   const { delayRender, continueRender, cancelRender: cancelRender3 } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
-  const audioEnabled = Internals20.useAudioEnabled();
-  const videoEnabled = Internals20.useVideoEnabled();
+  const audioEnabled = Internals19.useAudioEnabled();
+  const videoEnabled = Internals19.useVideoEnabled();
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
   const [error, setError] = useState5(null);
   if (error) {
@@ -5049,7 +5011,7 @@ var VideoForRendering = ({
           return;
         }
         if (window.remotion_isMainTab) {
-          Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals19.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: mediaDurationInSeconds
@@ -5104,12 +5066,12 @@ var VideoForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals20.evaluateVolume({
+      const volume = Internals19.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals20.warnAboutTooHighVolume(volume);
+      Internals19.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -5167,7 +5129,7 @@ var VideoForRendering = ({
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo5(() => {
-    return [Internals20.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals20.truthy).join(" ");
+    return [Internals19.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals19.truthy).join(" ");
   }, [className]);
   const styleWithObjectFit = useMemo5(() => {
     return {
@@ -5176,7 +5138,7 @@ var VideoForRendering = ({
     };
   }, [objectFitProp, style]);
   if (replaceWithOffthreadVideo) {
-    const fallback = /* @__PURE__ */ jsx5(Internals20.InnerOffthreadVideo, {
+    const fallback = /* @__PURE__ */ jsx5(Internals19.InnerOffthreadVideo, {
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -5184,12 +5146,12 @@ var VideoForRendering = ({
       loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
       delayRenderRetries: delayRenderRetries ?? undefined,
       delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+      name: "Fallback to <OffthreadVideo>",
       style: styleWithObjectFit,
       allowAmplificationDuringRender: true,
       transparent: fallbackOffthreadVideoProps?.transparent ?? true,
       toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true,
       audioStreamIndex: audioStreamIndex ?? 0,
-      name,
       className,
       onVideoFrame,
       volume: volumeProp,
@@ -5216,7 +5178,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: Internals20.calculateMediaDuration({
+        durationInFrames: Internals19.calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -5239,7 +5201,7 @@ var VideoForRendering = ({
 
 // src/video/video.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals21;
+var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals20;
 var videoSchema = {
   volume: {
     type: "number",
@@ -5298,7 +5260,6 @@ var InnerVideo = ({
   loop,
   loopVolumeCurveBehavior,
   muted,
-  name,
   onVideoFrame,
   playbackRate,
   style,
@@ -5312,9 +5273,11 @@ var InnerVideo = ({
   headless,
   onError,
   credentials,
-  controls,
+  _experimentalControls: controls,
   objectFit,
-  _experimentalInitiallyDrawCachedFrame
+  _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects,
+  setMediaDurationInSeconds
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5340,7 +5303,6 @@ var InnerVideo = ({
       delayRenderRetries: delayRenderRetries ?? null,
       delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
       disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
-      name,
       fallbackOffthreadVideoProps,
       logLevel,
       loop,
@@ -5362,9 +5324,9 @@ var InnerVideo = ({
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {
+    setMediaDurationInSeconds,
     audioStreamIndex: audioStreamIndex ?? 0,
     className,
-    name,
     logLevel,
     loop,
     loopVolumeCurveBehavior,
@@ -5386,6 +5348,7 @@ var InnerVideo = ({
     credentials,
     controls,
     objectFit,
+    _experimentalEffects,
     _experimentalInitiallyDrawCachedFrame
   });
 };
@@ -5415,18 +5378,66 @@ var VideoInner = ({
   headless,
   onError,
   credentials,
-  controls,
+  _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  from,
-  durationInFrames
+  _experimentalEffects,
+  durationInFrames,
+  from
 }) => {
-  const fallbackLogLevel = Internals21.useLogLevel();
+  const fallbackLogLevel = Internals20.useLogLevel();
+  const [mediaVolume] = Internals20.useMediaVolumeState();
+  const mediaStartsAt = Internals20.useMediaStartsAt();
+  const videoConfig = useVideoConfig5();
+  const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
+  const basicInfo = Internals20.useBasicMediaInTimeline({
+    src,
+    volume,
+    playbackRate: playbackRate ?? 1,
+    trimBefore,
+    trimAfter,
+    sequenceDurationInFrames,
+    mediaType: "video",
+    displayName: name ?? "<Video>",
+    mediaVolume,
+    mediaStartsAt,
+    loop: loop ?? false
+  });
+  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState6(null);
+  const loopDisplay = useMemo6(() => getLoopDisplay({
+    loop: loop ?? false,
+    mediaDurationInSeconds,
+    playbackRate: playbackRate ?? 1,
+    trimAfter,
+    trimBefore,
+    sequenceDurationInFrames,
+    compFps: videoConfig.fps
+  }), [
+    loop,
+    mediaDurationInSeconds,
+    playbackRate,
+    trimAfter,
+    trimBefore,
+    sequenceDurationInFrames,
+    videoConfig.fps
+  ]);
+  const isMedia = useMemo6(() => ({
+    type: "video",
+    data: basicInfo
+  }), [basicInfo]);
+  if (sequenceDurationInFrames === 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsx6(Sequence2, {
     layout: "none",
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
-    showInTimeline: false,
+    durationInFrames: basicInfo.duration,
+    _remotionInternalStack: stack,
+    _remotionInternalIsMedia: isMedia,
+    name: name ?? "<Video>",
+    _experimentalControls: controls,
+    _remotionInternalLoopDisplay: loopDisplay,
+    showInTimeline: showInTimeline ?? true,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
       audioStreamIndex: audioStreamIndex ?? 0,
       className,
@@ -5438,7 +5449,6 @@ var VideoInner = ({
       loop: loop ?? false,
       loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
       muted: muted ?? false,
-      name,
       onVideoFrame,
       playbackRate: playbackRate ?? 1,
       showInTimeline: showInTimeline ?? true,
@@ -5453,14 +5463,16 @@ var VideoInner = ({
       headless: headless ?? false,
       onError,
       credentials,
-      controls,
+      _experimentalControls: controls,
       objectFit: objectFit ?? "contain",
-      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
+      _experimentalEffects: _experimentalEffects ?? [],
+      setMediaDurationInSeconds
     })
   });
 };
-var Video = Internals21.wrapInSchema(VideoInner, videoSchema);
-Internals21.addSequenceStackTraces(Video);
+var Video = Internals20.wrapInSchema(VideoInner, videoSchema);
+Internals20.addSequenceStackTraces(Video);
 
 // src/index.ts
 var experimental_Audio = Audio;