@remotion/promo-pages 4.0.455 → 4.0.457

package/dist/Homepage.js

@@ -861,8 +861,10 @@ import React14, { useCallback as useCallback6, useImperativeHandle, useRef as us
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
+  createContext as createContext15,
   forwardRef as forwardRef5,
   useCallback as useCallback7,
+  useContext as useContext17,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo18,
   useRef as useRef9,
@@ -871,9 +873,9 @@ import {
 import React15, { forwardRef as forwardRef4, useMemo as useMemo17 } from "react";
 import { useContext as useContext16, useMemo as useMemo16, useState as useState7 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
+import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
-  createContext as createContext15,
+  createContext as createContext16,
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
@@ -882,29 +884,29 @@ import {
   useState as useState9
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext29 } from "react";
-import React17, { createContext as createContext16, useMemo as useMemo20 } from "react";
+import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
+import React17, { createContext as createContext17, useMemo as useMemo20 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-import { useContext as useContext18 } from "react";
-import { createContext as createContext17, useEffect as useEffect7, useState as useState11 } from "react";
+import { useContext as useContext19 } from "react";
+import { createContext as createContext18, useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { createContext as createContext18, useMemo as useMemo21, useReducer } from "react";
+import { createContext as createContext19, useMemo as useMemo21, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
-  useContext as useContext27,
+  useContext as useContext28,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo29,
   useRef as useRef18,
   useState as useState16
 } from "react";
-import { useContext as useContext20, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
+import { useContext as useContext21, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
 import React20, {
-  createContext as createContext19,
+  createContext as createContext20,
   createRef as createRef2,
   useCallback as useCallback9,
-  useContext as useContext19,
+  useContext as useContext20,
   useMemo as useMemo23,
   useRef as useRef11,
   useState as useState12
@@ -912,20 +914,20 @@ import React20, {
 import { useMemo as useMemo22 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef12 } from "react";
-import { useContext as useContext22, useEffect as useEffect8, useMemo as useMemo24, useState as useState13 } from "react";
-import { useContext as useContext21 } from "react";
+import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo24, useState as useState13 } from "react";
+import { useContext as useContext22 } from "react";
 import {
   useCallback as useCallback12,
-  useContext as useContext25,
+  useContext as useContext26,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
 import { useCallback as useCallback11, useMemo as useMemo27, useRef as useRef15 } from "react";
-import { useContext as useContext24, useMemo as useMemo26 } from "react";
+import { useContext as useContext25, useMemo as useMemo26 } from "react";
 import React21, {
   useCallback as useCallback10,
-  useContext as useContext23,
+  useContext as useContext24,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo25,
@@ -937,11 +939,11 @@ import React22 from "react";
 import { useEffect as useEffect10, useState as useState15 } from "react";
 import { useEffect as useEffect11, useRef as useRef16 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext20, useContext as useContext26, useMemo as useMemo28 } from "react";
+import { createContext as createContext21, useContext as useContext27, useMemo as useMemo28 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
@@ -954,7 +956,7 @@ import { forwardRef as forwardRef9, useCallback as useCallback14, useState as us
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   useCallback as useCallback15,
-  useContext as useContext30,
+  useContext as useContext31,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
   useRef as useRef20,
@@ -973,16 +975,16 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
 import { useMemo as useMemo33 } from "react";
-import { createContext as createContext21, useContext as useContext31, useMemo as useMemo32 } from "react";
+import { createContext as createContext22, useContext as useContext32, useMemo as useMemo32 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
-import React32, { createContext as createContext22 } from "react";
-import { useContext as useContext32 } from "react";
+import React32, { createContext as createContext23 } from "react";
+import { useContext as useContext33 } from "react";
 import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo34,
@@ -991,7 +993,7 @@ import {
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
-  useContext as useContext34,
+  useContext as useContext35,
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo35,
@@ -1005,14 +1007,14 @@ import React36, { useMemo as useMemo36 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef11, useMemo as useMemo37 } from "react";
 import React37 from "react";
-import React38, { createContext as createContext23 } from "react";
+import React38, { createContext as createContext24 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React40 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext37 } from "react";
 import {
   forwardRef as forwardRef12,
-  useContext as useContext35,
+  useContext as useContext36,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
@@ -2534,7 +2536,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.455";
+var VERSION = "4.0.457";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2834,12 +2836,13 @@ var RegularSequenceRefForwardingFunction = ({
   height,
   width,
   showInTimeline = true,
-  controls,
+  _experimentalControls: controls,
   _experimentalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
+  _remotionInternalIsMedia: isMedia,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -2915,6 +2918,33 @@ var RegularSequenceRefForwardingFunction = ({
     if (!env.isStudio) {
       return;
     }
+    if (isMedia) {
+      registerSequence({
+        type: isMedia.type,
+        controls: controls ?? null,
+        effects: memoizedEffects,
+        displayName: timelineClipName,
+        doesVolumeChange: isMedia.data.doesVolumeChange,
+        duration: actualDurationInFrames,
+        from,
+        id,
+        loopDisplay,
+        nonce: nonce.get(),
+        parent: parentSequence?.id ?? null,
+        playbackRate: isMedia.data.playbackRate,
+        postmountDisplay: postmountDisplay ?? null,
+        premountDisplay: premountDisplay ?? null,
+        rootId,
+        showInTimeline,
+        src: isMedia.data.src,
+        stack: stack ?? inheritedStack,
+        startMediaFrom: isMedia.data.startMediaFrom,
+        volume: isMedia.data.volumes
+      });
+      return () => {
+        unregisterSequence(id);
+      };
+    }
     registerSequence({
       from,
       duration: actualDurationInFrames,
@@ -2955,7 +2985,8 @@ var RegularSequenceRefForwardingFunction = ({
     env.isStudio,
     inheritedStack,
     controls,
-    memoizedEffects
+    memoizedEffects,
+    isMedia
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -3537,7 +3568,7 @@ var wrapInSchema = (Component, schema) => {
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
       return React15.createElement(Component, {
         ...props,
-        controls: null,
+        _experimentalControls: null,
         ref
       });
     }
@@ -3552,7 +3583,7 @@ var wrapInSchema = (Component, schema) => {
     const mergedProps = mergeValues(props, values, schemaKeys);
     return React15.createElement(Component, {
       ...mergedProps,
-      controls,
+      _experimentalControls: controls,
       ref
     });
   });
@@ -3596,6 +3627,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
+var HtmlInCanvasAncestorContext = createContext15(false);
 var htmlInCanvasSchema = {
   "style.translate": {
     type: "translate",
@@ -3633,11 +3665,12 @@ var HtmlInCanvasInner = forwardRef5(({
   children,
   onPaint,
   onInit,
-  controls,
+  _experimentalControls: controls,
   style,
   durationInFrames,
   ...sequenceProps
 }, ref) => {
+  const isInsideAncestorHtmlInCanvas = useContext17(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   if (!isHtmlInCanvasSupported()) {
@@ -3780,20 +3813,26 @@ var HtmlInCanvasInner = forwardRef5(({
       ...style
     };
   }, [width, height, style]);
+  if (isInsideAncestorHtmlInCanvas) {
+    throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
+  }
   return /* @__PURE__ */ jsx15(Sequence, {
     durationInFrames: resolvedDuration,
     name: "<HtmlInCanvas>",
-    controls,
+    _experimentalControls: controls,
     layout: "none",
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx15("canvas", {
-      ref: setLayoutCanvasRef,
-      width,
-      height,
-      children: /* @__PURE__ */ jsx15("div", {
-        ref: divRef,
-        style: innerStyle,
-        children
+    children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
+      value: true,
+      children: /* @__PURE__ */ jsx15("canvas", {
+        ref: setLayoutCanvasRef,
+        width,
+        height,
+        children: /* @__PURE__ */ jsx15("div", {
+          ref: divRef,
+          style: innerStyle,
+          children
+        })
       })
     })
   });
@@ -3801,7 +3840,7 @@ var HtmlInCanvasInner = forwardRef5(({
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
-  isHtmlInCanvasSupported
+  isSupported: isHtmlInCanvasSupported
 });
 HtmlInCanvas.displayName = "HtmlInCanvas";
 addSequenceStackTraces(HtmlInCanvas);
@@ -3834,7 +3873,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext15({
+var RenderAssetManager = createContext16({
   registerRenderAsset: () => {
     return;
   },
@@ -3891,7 +3930,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 };
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext17(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext18(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState10(() => {
@@ -3972,11 +4011,18 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext16(null);
+var LoopContext = createContext17(null);
 var useLoop = () => {
   return React17.useContext(LoopContext);
 };
-var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+var Loop = ({
+  durationInFrames,
+  times = Infinity,
+  children,
+  name,
+  showInTimeline,
+  ...props
+}) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
   validateDurationInFrames(durationInFrames, {
@@ -4021,6 +4067,7 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
       _remotionInternalLoopDisplay: loopDisplay,
       layout: props.layout,
       style,
+      showInTimeline,
       children
     })
   });
@@ -4035,7 +4082,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext17({});
+var PreloadContext = createContext18({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -4073,7 +4120,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext18(PreloadContext);
+  const preloads2 = useContext19(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -4356,7 +4403,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext18({
+var DurationsContext = createContext19({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -4567,8 +4614,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext19(null);
-var SharedAudioTagsContext = createContext19(null);
+var SharedAudioContext = createContext20(null);
+var SharedAudioTagsContext = createContext20(null);
 var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
   const logLevel = useLogLevel();
   const ctxAndGain = useSingletonAudioContext({
@@ -4652,16 +4699,23 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       return Promise.resolve();
     }
     audioContextIsPlayingEventually.current = true;
-    isResuming.current = waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(() => {}).finally(() => {
+    const resumePromise = ctxAndGain.audioContext.resume();
+    isResuming.current = new Promise((resolve) => {
+      waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(resolve);
+      resumePromise.catch((err) => {
+        Log.warn({ logLevel, tag: "audio" }, "AudioContext resume rejected, continuing without audio sync", err);
+        resolve();
+      });
+    }).finally(() => {
       isResuming.current = null;
     });
     ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
     ctxAndGain.gainNode?.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
     ctxAndGain.gainNode?.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
-    return ctxAndGain.audioContext.resume().then(() => {
+    return resumePromise.then(() => {
       nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
       nodesToResume.current.clear();
-    });
+    }).catch(() => {});
   }, [ctxAndGain, logLevel]);
   const getIsResumingAudioContext = useCallback9(() => {
     return isResuming.current;
@@ -4712,7 +4766,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext19(SharedAudioContext);
+  const audioCtx = useContext20(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
   const refs = useMemo23(() => {
@@ -4887,8 +4941,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext19(SharedAudioContext);
-  const tagsCtx = useContext19(SharedAudioTagsContext);
+  const audioCtx = useContext20(SharedAudioContext);
+  const tagsCtx = useContext20(SharedAudioTagsContext);
   const [elem] = useState12(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -5067,7 +5121,7 @@ var useVolume = ({
   const audioStuffRef = useRef13(null);
   const currentVolumeRef = useRef13(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext20(SharedAudioContext);
+  const sharedAudioContext = useContext21(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -5132,7 +5186,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext21(SequenceContext);
+  const parentSequence = useContext22(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -5157,8 +5211,12 @@ var getTimelineDuration = ({
   playbackRate,
   trimBefore,
   trimAfter,
-  parentSequenceDurationInFrames
+  parentSequenceDurationInFrames,
+  loop
 }) => {
+  if (loop) {
+    return compositionDurationInFrames;
+  }
   const mediaDuration = calculateMediaDuration({
     mediaDurationInFrames: compositionDurationInFrames * playbackRate + (trimBefore ?? 0),
     playbackRate,
@@ -5209,34 +5267,36 @@ var useBasicMediaInTimeline = ({
   displayName,
   trimBefore,
   trimAfter,
-  playbackRate
+  playbackRate,
+  sequenceDurationInFrames,
+  mediaStartsAt,
+  loop
 }) => {
   if (!src) {
     throw new Error("No src passed");
   }
-  const startsAt = useMediaStartsAt();
-  const parentSequence = useContext22(SequenceContext);
-  const videoConfig = useVideoConfig();
+  const parentSequence = useContext23(SequenceContext);
   const [initialVolume] = useState13(() => volume);
   const duration = getTimelineDuration({
-    compositionDurationInFrames: videoConfig.durationInFrames,
+    compositionDurationInFrames: sequenceDurationInFrames,
     playbackRate,
     trimBefore,
     trimAfter,
-    parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null
+    parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
+    loop
   });
   const volumes = useMemo24(() => {
     if (typeof volume === "number") {
       return volume;
     }
-    return new Array(Math.floor(Math.max(0, duration + startsAt))).fill(true).map((_, i) => {
+    return new Array(Math.floor(Math.max(0, duration + mediaStartsAt))).fill(true).map((_, i) => {
       return evaluateVolume({
-        frame: i + startsAt,
+        frame: i + mediaStartsAt,
         volume,
         mediaVolume
       });
     }).join(",");
-  }, [duration, startsAt, volume, mediaVolume]);
+  }, [duration, mediaStartsAt, volume, mediaVolume]);
   useEffect8(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
@@ -5245,16 +5305,31 @@ var useBasicMediaInTimeline = ({
   const doesVolumeChange = typeof volume === "function";
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
-  const env = useRemotionEnvironment();
-  return {
+  const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
+  const memoizedResult = useMemo24(() => {
+    return {
+      volumes,
+      duration,
+      doesVolumeChange,
+      nonce,
+      rootId,
+      finalDisplayName: displayName ?? getAssetDisplayName(src),
+      startMediaFrom,
+      src,
+      playbackRate
+    };
+  }, [
     volumes,
     duration,
     doesVolumeChange,
     nonce,
     rootId,
-    isStudio: env.isStudio,
-    finalDisplayName: displayName ?? getAssetDisplayName(src)
-  };
+    displayName,
+    src,
+    startMediaFrom,
+    playbackRate
+  ]);
+  return memoizedResult;
 };
 var useImageInTimeline = ({
   src,
@@ -5267,9 +5342,11 @@ var useImageInTimeline = ({
   loopDisplay,
   controls
 }) => {
-  const parentSequence = useContext22(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext22(SequenceManager);
-  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+  const parentSequence = useContext23(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
+  const { durationInFrames } = useVideoConfig();
+  const mediaStartsAt = useMediaStartsAt();
+  const { duration, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
     volume: undefined,
     mediaVolume: 0,
     mediaType: "image",
@@ -5277,8 +5354,12 @@ var useImageInTimeline = ({
     displayName,
     trimAfter: undefined,
     trimBefore: undefined,
-    playbackRate: 1
+    playbackRate: 1,
+    sequenceDurationInFrames: durationInFrames,
+    mediaStartsAt,
+    loop: false
   });
+  const { isStudio } = useRemotionEnvironment();
   useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
@@ -5343,18 +5424,12 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay
 }) => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext22(SequenceManager);
-  const {
-    volumes,
-    duration,
-    doesVolumeChange,
-    nonce,
-    rootId,
-    isStudio,
-    finalDisplayName
-  } = useBasicMediaInTimeline({
+  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
+  const { durationInFrames } = useVideoConfig();
+  const mediaStartsAt = useMediaStartsAt();
+  const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
     volume,
     mediaVolume,
     mediaType,
@@ -5362,8 +5437,12 @@ var useMediaInTimeline = ({
     displayName,
     trimAfter: undefined,
     trimBefore: undefined,
-    playbackRate
+    playbackRate,
+    sequenceDurationInFrames: durationInFrames,
+    mediaStartsAt,
+    loop: false
   });
+  const { isStudio } = useRemotionEnvironment();
   useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
@@ -5416,10 +5495,10 @@ var useMediaInTimeline = ({
     showInTimeline,
     premountDisplay,
     postmountDisplay,
-    isStudio,
     loopDisplay,
     rootId,
-    finalDisplayName
+    finalDisplayName,
+    isStudio
   ]);
 };
 var useBufferManager = (logLevel, mountTime) => {
@@ -5502,7 +5581,7 @@ var useBufferManager = (logLevel, mountTime) => {
 };
 var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext23(LogLevelContext);
+  const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
   return /* @__PURE__ */ jsx21(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -5532,7 +5611,7 @@ var useIsPlayerBuffering = (bufferManager) => {
   return isBuffering;
 };
 var useBufferState = () => {
-  const buffer = useContext24(BufferingContextReact);
+  const buffer = useContext25(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo26(() => ({
     delayPlayback: () => {
@@ -6037,7 +6116,7 @@ var useMediaPlayback = ({
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext25(BufferingContextReact);
+  const buffering = useContext26(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef17(null);
@@ -6312,11 +6391,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext20({
+var MediaVolumeContext = createContext21({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext20({
+var SetMediaVolumeContext = createContext21({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -6325,15 +6404,15 @@ var SetMediaVolumeContext = createContext20({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext26(MediaVolumeContext);
-  const { setMediaVolume } = useContext26(SetMediaVolumeContext);
+  const { mediaVolume } = useContext27(MediaVolumeContext);
+  const { setMediaVolume } = useContext27(SetMediaVolumeContext);
   return useMemo28(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext26(MediaVolumeContext);
-  const { setMediaMuted } = useContext26(SetMediaVolumeContext);
+  const { mediaMuted } = useContext27(MediaVolumeContext);
+  const { setMediaMuted } = useContext27(SetMediaVolumeContext);
   return useMemo28(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -6383,12 +6462,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext27(SequenceVisibilityToggleContext);
+  const { hidden } = useContext28(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext27(SequenceContext);
+  const sequenceContext = useContext28(SequenceContext);
   const [timelineId] = useState16(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -6543,8 +6622,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext28(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext28(RenderAssetManager);
+  const sequenceContext = useContext29(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
@@ -6653,7 +6732,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 };
 var AudioForRendering = forwardRef7(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext29(SharedAudioTagsContext);
+  const audioTagsContext = useContext30(SharedAudioTagsContext);
   const {
     startFrom,
     endAt,
@@ -6672,7 +6751,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext29(DurationsContext);
+  const { durations, setDurations } = useContext30(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -6854,13 +6933,13 @@ var ImgInner = ({
   name,
   stack,
   ref,
-  controls,
+  _experimentalControls: controls,
   ...props2
 }) => {
   const imageRef = useRef20(null);
   const errors = useRef20({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext30(SequenceContext);
+  const sequenceContext = useContext31(SequenceContext);
   const [timelineId] = useState18(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
@@ -7180,9 +7259,9 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext21(null);
+var MediaEnabledContext = createContext22(null);
 var useVideoEnabled = () => {
-  const context = useContext31(MediaEnabledContext);
+  const context = useContext32(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -7192,7 +7271,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext31(MediaEnabledContext);
+  const context = useContext32(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -7462,7 +7541,7 @@ var setupEnvVariables = () => {
   });
 };
 var CurrentScaleContext = React32.createContext(null);
-var PreviewSizeContext = createContext22({
+var PreviewSizeContext = createContext23({
   setSize: () => {
     return;
   },
@@ -7486,8 +7565,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useSequenceControlOverride = (key) => {
-  const seqContext = useContext32(SequenceContext);
-  const { dragOverrides: overrides } = useContext32(VisualModeOverridesContext);
+  const seqContext = useContext33(SequenceContext);
+  const { dragOverrides: overrides } = useContext33(VisualModeOverridesContext);
   if (!seqContext) {
     return;
   }
@@ -7524,9 +7603,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -7738,7 +7817,7 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext34(SharedAudioContext);
+  const context = useContext35(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -7794,8 +7873,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext34(SequenceContext);
-  const { hidden } = useContext34(SequenceVisibilityToggleContext);
+  const parentSequence = useContext35(SequenceContext);
+  const { hidden } = useContext35(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
@@ -8353,7 +8432,7 @@ var flattenChildren = (children) => {
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext23(false);
+var IsInsideSeriesContext = createContext24(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx34(IsInsideSeriesContext.Provider, {
     value: true,
@@ -8911,13 +8990,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef23(null);
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext36(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
   const id = useMemo38(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -9127,7 +9206,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext36(DurationsContext);
+  const { durations, setDurations } = useContext37(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -9166,6 +9245,7 @@ var VideoForwardingFunction = (props2, ref) => {
       }),
       layout: "none",
       name,
+      showInTimeline: false,
       children: /* @__PURE__ */ jsx37(Html5Video, {
         ...propsOtherThanLoop,
         ref,
@@ -24216,7 +24296,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "44k",
+            content: "45k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -24409,14 +24489,14 @@ import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
 import { useContext as useContext210, useEffect as useEffect42, useState as useState40 } from "react";
-import { useContext as useContext43, useLayoutEffect as useLayoutEffect17 } from "react";
+import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
 import { useCallback as useCallback34, useRef as useRef42 } from "react";
 import { useEffect as useEffect24, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext44, useEffect as useEffect52, useRef as useRef52 } from "react";
+import { useContext as useContext45, useEffect as useEffect52, useRef as useRef52 } from "react";
 import { useEffect as useEffect310, useRef as useRef310 } from "react";
-import { useCallback as useCallback24, useContext as useContext38, useMemo as useMemo52, useRef as useRef26, useState as useState310 } from "react";
+import { useCallback as useCallback24, useContext as useContext39, useMemo as useMemo52, useRef as useRef26, useState as useState310 } from "react";
 import { useEffect as useEffect43, useRef as useRef43 } from "react";
 import { useCallback as useCallback35, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -25702,7 +25782,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext43(Internals.BufferingContextReact);
+  const bufferManager = useContext44(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -25785,21 +25865,21 @@ var usePlayer = () => {
   const playStart = useRef26(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext38(Internals.SharedAudioContext);
-  const audioTagsContext = useContext38(Internals.SharedAudioTagsContext);
+  const audioContext = useContext39(Internals.SharedAudioContext);
+  const audioTagsContext = useContext39(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
   const frameRef = useRef26(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext38(PlayerEventEmitterContext);
+  const emitter = useContext39(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext38(Internals.BufferingContextReact);
+  const bufferingContext = useContext39(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -26146,12 +26226,12 @@ var usePlayback = ({
   const frame = Internals.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext44(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext45(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const timelineContext = Internals.useTimelineContext();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateTimestamp = useRef52(0);
-  const context = useContext44(Internals.BufferingContextReact);
+  const context = useContext45(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -26220,7 +26300,9 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      sharedAudioContext?.resume?.();
+      if (!muted) {
+        sharedAudioContext?.resume?.();
+      }
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
@@ -26249,7 +26331,7 @@ var usePlayback = ({
     };
     const queueNextFrame = () => {
       const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
-      if (getIsResumingAudioContext !== null) {
+      if (getIsResumingAudioContext !== null && !muted) {
         getIsResumingAudioContext.then(() => {
           if (!sharedAudioContext?.audioContext) {
             return;
@@ -28783,7 +28865,7 @@ var Thumbnail = forward2(ThumbnailFn);
 import {
   useCallback as useCallback49,
   useEffect as useEffect58,
-  useMemo as useMemo65,
+  useMemo as useMemo66,
   useRef as useRef53,
   useState as useState56
 } from "react";
@@ -29534,7 +29616,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React57, { useContext as useContext45, useMemo as useMemo54 } from "react";
+import React57, { useContext as useContext46, useMemo as useMemo54 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
@@ -29551,7 +29633,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext45(Context);
+  const context = useContext46(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -29559,15 +29641,15 @@ function useColorMode() {
 }
 
 // ../media/dist/esm/index.mjs
-import { useContext as useContext310, useEffect as useEffect210, useMemo as useMemo213, useRef as useRef44, useState as useState210 } from "react";
+import { useState as useState312 } from "react";
+import { useMemo as useMemo312 } from "react";
+import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo56, useRef as useRef44, useState as useState41 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useMemo as useMemo56 } from "react";
-import { useContext as useContext47, useLayoutEffect as useLayoutEffect18 } from "react";
-import { useContext as useContext212, useEffect as useEffect44, useState as useState41 } from "react";
+import { useContext as useContext48, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-import { useContext as useContext46, useLayoutEffect as useLayoutEffect24, useMemo as useMemo312, useState as useState312 } from "react";
+import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -29581,9 +29663,10 @@ import {
 } from "mediabunny";
 import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx315 } from "react/jsx-runtime";
+import { useMemo as useMemo63, useState as useState63 } from "react";
 import {
-  useContext as useContext53,
-  useEffect as useEffect312,
+  useContext as useContext47,
+  useEffect as useEffect210,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
   useRef as useRef210,
@@ -29591,7 +29674,7 @@ import {
 } from "react";
 import { jsx as jsx412 } from "react/jsx-runtime";
 import {
-  useContext as useContext63,
+  useContext as useContext53,
   useLayoutEffect as useLayoutEffect43,
   useMemo as useMemo55,
   useRef as useRef312,
@@ -29636,6 +29719,31 @@ var __callDispose = (stack, error2, hasError) => {
   };
   return next();
 };
+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
+  };
+};
 var getTimeInSeconds = ({
   loop,
   mediaDurationInSeconds,
@@ -31262,41 +31370,6 @@ var callOnErrorAndResolve = ({
   }
   return ["fallback", error2];
 };
-var useLoopDisplay = ({
-  loop,
-  mediaDurationInSeconds,
-  playbackRate,
-  trimAfter,
-  trimBefore
-}) => {
-  const { durationInFrames: compDuration, fps } = useVideoConfig();
-  const loopDisplay = useMemo56(() => {
-    if (!loop || !mediaDurationInSeconds) {
-      return;
-    }
-    const durationInFrames = Internals.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;
-};
 var useCommonEffects = ({
   mediaPlayerRef,
   mediaPlayerReady,
@@ -31320,7 +31393,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext47(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext48(Internals.SharedAudioContext);
   useLayoutEffect18(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -31441,109 +31514,6 @@ var useCommonEffects = ({
     Internals.Log.trace({ logLevel, tag: "@remotion/media" }, `[${label3}] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady, label3, mediaPlayerRef]);
 };
-var useMediaInTimeline2 = ({
-  volume,
-  mediaVolume,
-  src,
-  mediaType,
-  playbackRate,
-  displayName,
-  stack,
-  showInTimeline,
-  premountDisplay,
-  postmountDisplay,
-  loopDisplay,
-  trimBefore,
-  trimAfter,
-  controls,
-  _experimentalEffects
-}) => {
-  const parentSequence = useContext212(Internals.SequenceContext);
-  const startsAt = Internals.useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext212(Internals.SequenceManager);
-  const [mediaId] = useState41(() => String(Math.random()));
-  const {
-    volumes,
-    duration,
-    doesVolumeChange,
-    nonce,
-    rootId,
-    isStudio,
-    finalDisplayName
-  } = Internals.useBasicMediaInTimeline({
-    volume,
-    mediaVolume,
-    mediaType,
-    src,
-    displayName,
-    trimBefore,
-    trimAfter,
-    playbackRate
-  });
-  useEffect44(() => {
-    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,
-      effects: _experimentalEffects
-    });
-    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,
-    _experimentalEffects
-  ]);
-  return {
-    id: mediaId
-  };
-};
 var {
   useUnsafeVideoConfig: useUnsafeVideoConfig2,
   Timeline,
@@ -31575,23 +31545,22 @@ var AudioForPreviewAssertedShowing = ({
   fallbackHtml5AudioProps,
   onError,
   credentials,
-  controls
+  setMediaDurationInSeconds
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame();
   const mediaPlayerRef = useRef44(null);
   const initialTrimBeforeRef = useRef44(trimBefore);
   const initialTrimAfterRef = useRef44(trimAfter);
-  const [mediaPlayerReady, setMediaPlayerReady] = useState210(false);
-  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState210(false);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState41(false);
+  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState41(false);
   const [playing] = Timeline.usePlayingState();
   const timelineContext = Internals.useTimelineContext();
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext310(SharedAudioContext2);
+  const sharedAudioContext = useContext212(SharedAudioContext2);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState2();
   const [mediaVolume] = useMediaVolumeState2();
-  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState210(null);
   const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior ?? "repeat");
   const userPreferredVolume = evaluateVolume2({
     frame: volumePropFrame,
@@ -31609,38 +31578,11 @@ var AudioForPreviewAssertedShowing = ({
   const currentTimeRef = useRef44(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
-  const parentSequence = useContext310(SequenceContext2);
+  const parentSequence = useContext212(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 effects = useMemo213(() => {
-    return [];
-  }, []);
-  useMediaInTimeline2({
-    volume,
-    mediaVolume,
-    mediaType: "audio",
-    src,
-    playbackRate,
-    displayName: name ?? null,
-    stack,
-    showInTimeline,
-    premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    loopDisplay,
-    trimAfter,
-    trimBefore,
-    controls,
-    _experimentalEffects: effects
-  });
-  const bufferingContext = useContext310(Internals.BufferingContextReact);
+  const bufferingContext = useContext212(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -31677,7 +31619,7 @@ var AudioForPreviewAssertedShowing = ({
     logLevel,
     label: "AudioForPreview"
   });
-  useEffect210(() => {
+  useEffect44(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -31814,7 +31756,8 @@ var AudioForPreviewAssertedShowing = ({
     disallowFallbackToHtml5Audio,
     buffer,
     onError,
-    credentials
+    credentials,
+    setMediaDurationInSeconds
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx58(Audio, {
@@ -31857,14 +31800,14 @@ var AudioForPreview2 = ({
   fallbackHtml5AudioProps,
   onError,
   credentials,
-  controls
+  setMediaDurationInSeconds
 }) => {
   const preloadedSrc = usePreload2(src);
   const defaultLogLevel = Internals.useLogLevel();
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo213(() => {
+  const showShow = useMemo56(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -31888,6 +31831,9 @@ var AudioForPreview2 = ({
   if (!showShow) {
     return null;
   }
+  if (!setMediaDurationInSeconds) {
+    throw new Error("setMediaDurationInSeconds is required");
+  }
   return /* @__PURE__ */ jsx58(AudioForPreviewAssertedShowing, {
     audioStreamIndex,
     src: preloadedSrc,
@@ -31907,7 +31853,7 @@ var AudioForPreview2 = ({
     onError,
     credentials,
     fallbackHtml5AudioProps,
-    controls
+    setMediaDurationInSeconds
   });
 };
 var makeAudioCache = () => {
@@ -33724,7 +33670,7 @@ var AudioForRendering2 = ({
   const frame = useCurrentFrame();
   const absoluteFrame = Internals.useTimelinePosition();
   const videoConfig = Internals.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext46(Internals.RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext311(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
@@ -33735,9 +33681,9 @@ var AudioForRendering2 = ({
   }
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
-  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState312(false);
-  const sequenceContext = useContext46(Internals.SequenceContext);
-  const id = useMemo312(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
+  const sequenceContext = useContext311(Internals.SequenceContext);
+  const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -33925,28 +33871,75 @@ var AudioInner = (props) => {
     name,
     stack,
     showInTimeline,
-    controls,
+    _experimentalControls: controls,
     from,
     durationInFrames,
     ...otherProps
   } = props;
   const environment = useRemotionEnvironment();
+  const [mediaVolume] = Internals.useMediaVolumeState();
+  const mediaStartsAt = Internals.useMediaStartsAt();
+  const videoConfig = useVideoConfig();
+  const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
+  const basicInfo = Internals.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] = useState312(null);
+  const loopDisplay = useMemo312(() => 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 = useMemo312(() => ({
+    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.`);
   }
   validateMediaProps2({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
+  if (sequenceDurationInFrames === 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsx315(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__ */ jsx315(AudioForRendering2, {
       ...otherProps
     }) : /* @__PURE__ */ jsx315(AudioForPreview2, {
       name,
       ...otherProps,
       stack: stack ?? null,
-      controls
+      setMediaDurationInSeconds
     })
   });
 };
@@ -34001,9 +33994,7 @@ var {
   warnAboutTooHighVolume: warnAboutTooHighVolume22,
   usePreload: usePreload22,
   SequenceContext: SequenceContext22,
-  SequenceVisibilityToggleContext: SequenceVisibilityToggleContext2,
-  useEffectChainState: useEffectChainState2,
-  useMemoizedEffects: useMemoizedEffects2
+  useEffectChainState: useEffectChainState2
 } = Internals;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
@@ -34017,7 +34008,6 @@ var VideoForPreviewAssertedShowing = ({
   onVideoFrame,
   showInTimeline,
   loop,
-  name,
   trimAfter,
   trimBefore,
   stack,
@@ -34028,10 +34018,10 @@ var VideoForPreviewAssertedShowing = ({
   headless,
   onError,
   credentials,
-  controls,
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects
+  _experimentalEffects,
+  setMediaDurationInSeconds
 }) => {
   const src = usePreload22(unpreloadedSrc);
   const canvasRef = useRef210(null);
@@ -34046,12 +34036,10 @@ var VideoForPreviewAssertedShowing = ({
   const [playing] = Timeline2.usePlayingState();
   const timelineContext = Internals.useTimelineContext();
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext53(SharedAudioContext22);
+  const sharedAudioContext = useContext47(SharedAudioContext22);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState22();
   const [mediaVolume] = useMediaVolumeState22();
-  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState43(null);
-  const { hidden } = useContext53(SequenceVisibilityToggleContext2);
   const volumePropFrame = useFrameForVolumeProp22(loopVolumeCurveBehavior);
   const userPreferredVolume = evaluateVolume22({
     frame: volumePropFrame,
@@ -34065,49 +34053,23 @@ var VideoForPreviewAssertedShowing = ({
   const effectChainState = useEffectChainState2();
   const experimentalEffectsRef = useRef210(_experimentalEffects);
   experimentalEffectsRef.current = _experimentalEffects;
-  const memoizedEffects = useMemoizedEffects2(_experimentalEffects.flat());
   const effectChainStateRef = useRef210(effectChainState);
   effectChainStateRef.current = effectChainState;
   const frameRef = useRef210(frame);
   frameRef.current = frame;
-  const parentSequence = useContext53(SequenceContext22);
+  const parentSequence = useContext47(SequenceContext22);
   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 } = useMediaInTimeline2({
-    volume,
-    mediaType: "video",
-    src,
-    playbackRate,
-    displayName: name ?? null,
-    stack,
-    showInTimeline,
-    premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    loopDisplay,
-    mediaVolume,
-    trimAfter,
-    trimBefore,
-    controls,
-    _experimentalEffects: memoizedEffects
-  });
-  const isSequenceHidden = hidden[timelineId] ?? false;
   const currentTime = frame / videoConfig.fps;
   const currentTimeRef = useRef210(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
-  const buffering = useContext53(Internals.BufferingContextReact);
+  const buffering = useContext47(Internals.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
+  const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
   const initialPlaying = useRef210(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef210(isPremounting);
@@ -34155,7 +34117,7 @@ var VideoForPreviewAssertedShowing = ({
       cacheVideoFrame(src, canvas);
     };
   }, [_experimentalInitiallyDrawCachedFrame, src]);
-  useEffect312(() => {
+  useEffect210(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -34292,7 +34254,8 @@ var VideoForPreviewAssertedShowing = ({
     sharedAudioContext,
     videoConfig.fps,
     onError,
-    credentials
+    credentials,
+    setMediaDurationInSeconds
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
   const classNameValue = useMemo412(() => {
@@ -34338,10 +34301,9 @@ var VideoForPreviewAssertedShowing = ({
   const actualStyle = useMemo412(() => {
     return {
       ...style2,
-      opacity: isSequenceHidden ? 0 : style2?.opacity ?? 1,
       objectFit: objectFitProp
     };
-  }, [isSequenceHidden, objectFitProp, style2]);
+  }, [objectFitProp, style2]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx412(Html5Video, {
       src,
@@ -34353,7 +34315,7 @@ var VideoForPreviewAssertedShowing = ({
       trimBefore,
       playbackRate,
       loopVolumeCurveBehavior,
-      name,
+      name: "<Html5Video> (fallback)",
       loop,
       showInTimeline,
       stack: stack ?? undefined,
@@ -34398,8 +34360,7 @@ var VideoForPreview2 = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsx412(VideoForPreviewAssertedShowing, {
-    ...props,
-    controls: props.controls
+    ...props
   });
 };
 var VideoForRendering2 = ({
@@ -34417,7 +34378,6 @@ var VideoForRendering2 = ({
   className: className2,
   fallbackOffthreadVideoProps,
   audioStreamIndex,
-  name,
   disallowFallbackToOffthreadVideo,
   stack,
   toneFrequency,
@@ -34434,9 +34394,9 @@ var VideoForRendering2 = ({
   const frame = useCurrentFrame();
   const absoluteFrame = Internals.useTimelinePosition();
   const { fps } = useVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext63(Internals.RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext53(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
-  const sequenceContext = useContext63(Internals.SequenceContext);
+  const sequenceContext = useContext53(Internals.SequenceContext);
   const id = useMemo55(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -34648,12 +34608,12 @@ var VideoForRendering2 = ({
       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: className2,
       onVideoFrame,
       volume: volumeProp,
@@ -34759,7 +34719,6 @@ var InnerVideo = ({
   loop,
   loopVolumeCurveBehavior,
   muted,
-  name,
   onVideoFrame,
   playbackRate,
   style: style2,
@@ -34773,10 +34732,11 @@ var InnerVideo = ({
   headless,
   onError,
   credentials,
-  controls,
+  _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects
+  _experimentalEffects,
+  setMediaDurationInSeconds
 }) => {
   const environment = useRemotionEnvironment();
   if (typeof src !== "string") {
@@ -34802,7 +34762,6 @@ var InnerVideo = ({
       delayRenderRetries: delayRenderRetries ?? null,
       delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
       disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
-      name,
       fallbackOffthreadVideoProps,
       logLevel,
       loop,
@@ -34824,9 +34783,9 @@ var InnerVideo = ({
     });
   }
   return /* @__PURE__ */ jsx65(VideoForPreview2, {
+    setMediaDurationInSeconds,
     audioStreamIndex: audioStreamIndex ?? 0,
     className: className2,
-    name,
     logLevel,
     loop,
     loopVolumeCurveBehavior,
@@ -34878,19 +34837,66 @@ var VideoInner = ({
   headless,
   onError,
   credentials,
-  controls,
+  _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
   _experimentalEffects,
-  from,
-  durationInFrames
+  durationInFrames,
+  from
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
+  const [mediaVolume] = Internals.useMediaVolumeState();
+  const mediaStartsAt = Internals.useMediaStartsAt();
+  const videoConfig = useVideoConfig();
+  const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
+  const basicInfo = Internals.useBasicMediaInTimeline({
+    src,
+    volume,
+    playbackRate: playbackRate ?? 1,
+    trimBefore,
+    trimAfter,
+    sequenceDurationInFrames,
+    mediaType: "video",
+    displayName: name ?? "<Video>",
+    mediaVolume,
+    mediaStartsAt,
+    loop: loop ?? false
+  });
+  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState63(null);
+  const loopDisplay = useMemo63(() => getLoopDisplay({
+    loop: loop ?? false,
+    mediaDurationInSeconds,
+    playbackRate: playbackRate ?? 1,
+    trimAfter,
+    trimBefore,
+    sequenceDurationInFrames,
+    compFps: videoConfig.fps
+  }), [
+    loop,
+    mediaDurationInSeconds,
+    playbackRate,
+    trimAfter,
+    trimBefore,
+    sequenceDurationInFrames,
+    videoConfig.fps
+  ]);
+  const isMedia = useMemo63(() => ({
+    type: "video",
+    data: basicInfo
+  }), [basicInfo]);
+  if (sequenceDurationInFrames === 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsx65(Sequence, {
     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__ */ jsx65(InnerVideo, {
       audioStreamIndex: audioStreamIndex ?? 0,
       className: className2,
@@ -34902,7 +34908,6 @@ var VideoInner = ({
       loop: loop ?? false,
       loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
       muted: muted ?? false,
-      name,
       onVideoFrame,
       playbackRate: playbackRate ?? 1,
       showInTimeline: showInTimeline ?? true,
@@ -34917,10 +34922,11 @@ var VideoInner = ({
       headless: headless ?? false,
       onError,
       credentials,
-      controls,
+      _experimentalControls: controls,
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
-      _experimentalEffects: _experimentalEffects ?? []
+      _experimentalEffects: _experimentalEffects ?? [],
+      setMediaDurationInSeconds
     })
   });
 };
@@ -36228,7 +36234,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.455";
+var VERSION2 = "4.0.457";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -41234,7 +41240,7 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback46, useEffect as useEffect53, useMemo as useMemo63, useRef as useRef50, useState as useState51 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect53, useMemo as useMemo64, useRef as useRef50, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
 import { useCallback as useCallback45, useEffect as useEffect51, useMemo as useMemo61, useState as useState50 } from "react";
@@ -41454,7 +41460,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo63(() => {
+  const knobStyle = useMemo64(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -41468,7 +41474,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo63(() => {
+  const fillStyle = useMemo64(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -41477,7 +41483,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo63(() => {
+  const active = useMemo64(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -41890,7 +41896,7 @@ var Demo = () => {
   const updateCardOrder = useCallback49((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo65(() => {
+  const props = useMemo66(() => {
     return {
       theme: colorMode,
       onToggle: () => {
@@ -42632,7 +42638,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect66, useRef as useRef58, useState as useState63 } from "react";
+import { useEffect as useEffect66, useRef as useRef58, useState as useState64 } from "react";
 import { jsx as jsx126, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -42641,7 +42647,7 @@ var icon4 = {
 var RealMP4Videos = () => {
   const ref = useRef58(null);
   const videoRef = useRef58(null);
-  const [vid, setVid] = useState63("/img/render-progress.webm");
+  const [vid, setVid] = useState64("/img/render-progress.webm");
   useEffect66(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
@@ -42893,7 +42899,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef59, useState as useState65 } from "react";
+import { useRef as useRef59, useState as useState66 } from "react";
 import { jsx as jsx128, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -42946,10 +42952,10 @@ var icon5 = {
   marginLeft: 10
 };
 var VideoAppsShowcase = () => {
-  const [activeTab, setActiveTab] = useState65(0);
-  const [isMuted, setIsMuted] = useState65(true);
-  const [isPlaying, setIsPlaying] = useState65(false);
-  const [videoLoaded, setVideoLoaded] = useState65(false);
+  const [activeTab, setActiveTab] = useState66(0);
+  const [isMuted, setIsMuted] = useState66(true);
+  const [isPlaying, setIsPlaying] = useState66(false);
+  const [videoLoaded, setVideoLoaded] = useState66(false);
   const videoRef = useRef59(null);
   const containerRef = useRef59(null);
   const handleTabChange = (index2) => {
@@ -44466,7 +44472,7 @@ var ChooseTemplate = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState66 } from "react";
+import { useState as useState67 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx164, jsxs as jsxs65 } from "react/jsx-runtime";
@@ -44492,7 +44498,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "44k"
+        children: "45k"
       })
     ]
   });
@@ -44501,7 +44507,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx166, jsxs as jsxs66 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState66(null);
+  const [clicked, setClicked] = useState67(null);
   return /* @__PURE__ */ jsxs66("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [