@remotion/promo-pages 4.0.356 → 4.0.358

package/dist/Homepage.js

@@ -87,7 +87,7 @@ import {
   useState as useState7
 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext25 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
 import React10, { createContext as createContext11, useMemo as useMemo11 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { useContext as useContext13 } from "react";
@@ -97,8 +97,8 @@ import { createContext as createContext13, useMemo as useMemo12, useReducer } fr
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
-  useContext as useContext23,
-  useEffect as useEffect13,
+  useContext as useContext24,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
   useRef as useRef11,
@@ -144,12 +144,13 @@ import { jsx as jsx16 } from "react/jsx-runtime";
 import React16 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef9 } from "react";
-import { createContext as createContext16, useContext as useContext22, useMemo as useMemo19 } from "react";
+import { useContext as useContext22, useEffect as useEffect13 } from "react";
+import { createContext as createContext16, useContext as useContext23, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
-  useContext as useContext24,
-  useEffect as useEffect14,
+  useContext as useContext25,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo21,
@@ -157,9 +158,9 @@ import {
 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { jsx as jsx19 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext27, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext28, useEffect as useEffect17 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext17, useContext as useContext26, useEffect as useEffect15, useMemo as useMemo222 } from "react";
+import { createContext as createContext17, useContext as useContext27, useEffect as useEffect16, useMemo as useMemo222 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
 import React20, { useMemo as useMemo23 } from "react";
@@ -169,7 +170,7 @@ import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
-  useContext as useContext28,
+  useContext as useContext29,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef13
@@ -185,7 +186,7 @@ import React24, {
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo25,
   useRef as useRef15,
@@ -196,8 +197,8 @@ import React26, { createContext as createContext18 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext29,
-  useEffect as useEffect18,
+  useContext as useContext30,
+  useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo26,
   useState as useState18
@@ -205,14 +206,14 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext30,
-  useEffect as useEffect20,
+  useContext as useContext31,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo27,
   useRef as useRef16,
   useState as useState19
 } from "react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React30, { useMemo as useMemo28 } from "react";
@@ -223,11 +224,11 @@ import React322, { createContext as createContext19 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import React34 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext33 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext31,
-  useEffect as useEffect21,
+  useContext as useContext32,
+  useEffect as useEffect222,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
@@ -739,7 +740,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.356", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.358", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2359,18 +2360,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return relativeSrc;
   }
   return new URL(relativeSrc, window.origin).href;
-}, calculateLoopDuration = ({
-  endAt,
-  mediaDuration,
+}, calculateMediaDuration = ({
+  trimAfter,
+  mediaDurationInFrames,
   playbackRate,
-  startFrom
+  trimBefore
 }) => {
-  let duration = mediaDuration;
-  if (typeof endAt !== "undefined") {
-    duration = endAt;
+  let duration = mediaDurationInFrames;
+  if (typeof trimAfter !== "undefined") {
+    duration = trimAfter;
   }
-  if (typeof startFrom !== "undefined") {
-    duration -= startFrom;
+  if (typeof trimBefore !== "undefined") {
+    duration -= trimBefore;
   }
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
@@ -2956,7 +2957,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     const firstFreeAudio = takenAudios.current.findIndex((a) => a === false);
     if (firstFreeAudio === -1) {
-      throw new Error(`Tried to simultaneously mount ${numberOfAudioTags + 1} <Audio /> tags at the same time. With the current settings, the maximum amount of <Audio /> tags is limited to ${numberOfAudioTags} at the same time. Remotion pre-mounts silent audio tags to help avoid browser autoplay restrictions. See https://remotion.dev/docs/player/autoplay#using-the-numberofsharedaudiotags-prop for more information on how to increase this limit.`);
+      throw new Error(`Tried to simultaneously mount ${numberOfAudioTags + 1} <Html5Audio /> tags at the same time. With the current settings, the maximum amount of <Html5Audio /> tags is limited to ${numberOfAudioTags} at the same time. Remotion pre-mounts silent audio tags to help avoid browser autoplay restrictions. See https://remotion.dev/docs/player/autoplay#using-the-numberofsharedaudiotags-prop for more information on how to increase this limit.`);
     }
     const { id, ref, mediaElementSourceNode } = refs[firstFreeAudio];
     const cloned = [...takenAudios.current];
@@ -3330,36 +3331,30 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   console.warn(message);
   didWarn[message] = true;
-}, useMediaInTimeline = ({
+}, useBasicMediaInTimeline = ({
   volume,
   mediaVolume,
-  mediaRef,
-  src,
   mediaType,
-  playbackRate,
+  src,
   displayName,
-  id,
-  stack,
-  showInTimeline,
-  premountDisplay,
-  postmountDisplay,
-  onAutoPlayError,
-  isPremounting,
-  isPostmounting
+  trimBefore,
+  trimAfter,
+  playbackRate
 }) => {
-  const videoConfig = useVideoConfig();
-  const { rootId, audioAndVideoTags } = useContext18(TimelineContext);
-  const parentSequence = useContext18(SequenceContext);
-  const actualFrom = parentSequence ? parentSequence.relativeFrom + parentSequence.cumulatedFrom : 0;
-  const { imperativePlaying } = useContext18(TimelineContext);
+  if (!src) {
+    throw new Error("No src passed");
+  }
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
+  const parentSequence = useContext18(SequenceContext);
+  const videoConfig = useVideoConfig();
   const [initialVolume] = useState11(() => volume);
-  const logLevel = useLogLevel();
-  const mountTime = useMountTime();
-  const nonce = useNonce();
-  const duration = parentSequence ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames) : videoConfig.durationInFrames;
-  const doesVolumeChange = typeof volume === "function";
+  const mediaDuration = calculateMediaDuration({
+    mediaDurationInFrames: videoConfig.durationInFrames,
+    playbackRate,
+    trimBefore,
+    trimAfter
+  });
+  const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
   const volumes = useMemo15(() => {
     if (typeof volume === "number") {
       return volume;
@@ -3377,15 +3372,59 @@ Check that all your Remotion packages are on the same version. If your dependenc
       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`);
     }
   }, [initialVolume, mediaType, src, volume]);
+  const doesVolumeChange = typeof volume === "function";
+  const nonce = useNonce();
+  const { rootId } = useContext18(TimelineContext);
   const env = useRemotionEnvironment();
+  return {
+    volumes,
+    duration,
+    doesVolumeChange,
+    nonce,
+    rootId,
+    isStudio: env.isStudio,
+    finalDisplayName: displayName ?? getAssetDisplayName(src)
+  };
+}, useMediaInTimeline = ({
+  volume,
+  mediaVolume,
+  src,
+  mediaType,
+  playbackRate,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext18(SequenceContext);
+  const startsAt = useMediaStartsAt();
+  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
+  const {
+    volumes,
+    duration,
+    doesVolumeChange,
+    nonce,
+    rootId,
+    isStudio,
+    finalDisplayName
+  } = useBasicMediaInTimeline({
+    volume,
+    mediaVolume,
+    mediaType,
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate
+  });
   useEffect8(() => {
-    if (!mediaRef.current) {
-      return;
-    }
     if (!src) {
       throw new Error("No src passed");
     }
-    if (!env.isStudio && window.process?.env?.NODE_ENV !== "test") {
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
       return;
     }
     if (!showInTimeline) {
@@ -3398,14 +3437,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
       duration,
       from: 0,
       parent: parentSequence?.id ?? null,
-      displayName: displayName ?? getAssetDisplayName(src),
+      displayName: finalDisplayName,
       rootId,
       volume: volumes,
       showInTimeline: true,
       nonce,
       startMediaFrom: 0 - startsAt,
       doesVolumeChange,
-      loopDisplay: undefined,
+      loopDisplay,
       playbackRate,
       stack,
       premountDisplay,
@@ -3415,66 +3454,26 @@ Check that all your Remotion packages are on the same version. If your dependenc
       unregisterSequence(id);
     };
   }, [
-    actualFrom,
     duration,
     id,
     parentSequence,
     src,
     registerSequence,
-    rootId,
     unregisterSequence,
-    videoConfig,
     volumes,
     doesVolumeChange,
     nonce,
-    mediaRef,
     mediaType,
     startsAt,
     playbackRate,
-    displayName,
     stack,
     showInTimeline,
     premountDisplay,
     postmountDisplay,
-    env.isStudio
-  ]);
-  useEffect8(() => {
-    const tag = {
-      id,
-      play: (reason) => {
-        if (!imperativePlaying.current) {
-          return;
-        }
-        if (isPremounting || isPostmounting) {
-          return;
-        }
-        return playAndHandleNotAllowedError({
-          mediaRef,
-          mediaType,
-          onAutoPlayError,
-          logLevel,
-          mountTime,
-          reason,
-          isPlayer: env.isPlayer
-        });
-      }
-    };
-    audioAndVideoTags.current.push(tag);
-    return () => {
-      audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
-    };
-  }, [
-    audioAndVideoTags,
-    id,
-    mediaRef,
-    mediaType,
-    onAutoPlayError,
-    imperativePlaying,
-    isPremounting,
-    isPostmounting,
-    logLevel,
-    mountTime,
-    env.isPlayer
+    isStudio,
+    loopDisplay,
+    rootId,
+    finalDisplayName
   ]);
 }, useBufferManager = (logLevel, mountTime) => {
   const [blocks, setBlocks] = useState12([]);
@@ -4070,7 +4069,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
   }, [mediaRef, playbackRate]);
   useEffect12(() => {
-    const tagName = mediaType === "audio" ? "<Audio>" : "<Video>";
+    const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
     }
@@ -4185,15 +4184,65 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaTagCurrentTime,
     env.isPlayer
   ]);
+}, useMediaTag = ({
+  mediaRef,
+  id,
+  mediaType,
+  onAutoPlayError,
+  isPremounting,
+  isPostmounting
+}) => {
+  const { audioAndVideoTags, imperativePlaying } = useContext22(TimelineContext);
+  const logLevel = useLogLevel();
+  const mountTime = useMountTime();
+  const env = useRemotionEnvironment();
+  useEffect13(() => {
+    const tag = {
+      id,
+      play: (reason) => {
+        if (!imperativePlaying.current) {
+          return;
+        }
+        if (isPremounting || isPostmounting) {
+          return;
+        }
+        return playAndHandleNotAllowedError({
+          mediaRef,
+          mediaType,
+          onAutoPlayError,
+          logLevel,
+          mountTime,
+          reason,
+          isPlayer: env.isPlayer
+        });
+      }
+    };
+    audioAndVideoTags.current.push(tag);
+    return () => {
+      audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
+    };
+  }, [
+    audioAndVideoTags,
+    id,
+    mediaRef,
+    mediaType,
+    onAutoPlayError,
+    imperativePlaying,
+    isPremounting,
+    isPostmounting,
+    logLevel,
+    mountTime,
+    env.isPlayer
+  ]);
 }, MediaVolumeContext, SetMediaVolumeContext, useMediaVolumeState = () => {
-  const { mediaVolume } = useContext22(MediaVolumeContext);
-  const { setMediaVolume } = useContext22(SetMediaVolumeContext);
+  const { mediaVolume } = useContext23(MediaVolumeContext);
+  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 }, useMediaMutedState = () => {
-  const { mediaMuted } = useContext22(MediaVolumeContext);
-  const { setMediaMuted } = useContext22(SetMediaVolumeContext);
+  const { mediaMuted } = useContext23(MediaVolumeContext);
+  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -4241,12 +4290,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext23(SequenceVisibilityToggleContext);
+  const { hidden } = useContext24(SequenceVisibilityToggleContext);
   if (!src) {
-    throw new TypeError("No 'src' was passed to <Audio>.");
+    throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext23(SequenceContext);
+  const sequenceContext = useContext24(SequenceContext);
   const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -4285,7 +4334,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     props.muted,
     props.loop
   ]);
-  const context = useContext23(SharedAudioContext);
+  const context = useContext24(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -4297,7 +4346,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useMediaInTimeline({
     volume,
     mediaVolume,
-    mediaRef: audioRef,
     src,
     mediaType: "audio",
     playbackRate: playbackRate ?? 1,
@@ -4307,9 +4355,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     showInTimeline,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    onAutoPlayError: null,
-    isPremounting: Boolean(sequenceContext?.premounting),
-    isPostmounting: Boolean(sequenceContext?.postmounting)
+    loopDisplay: undefined
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -4323,6 +4369,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     pauseWhenBuffering,
     onAutoPlayError: null
   });
+  useMediaTag({
+    id: timelineId,
+    isPostmounting: Boolean(sequenceContext?.postmounting),
+    isPremounting: Boolean(sequenceContext?.premounting),
+    mediaRef: audioRef,
+    mediaType: "audio",
+    onAutoPlayError: null
+  });
   useVolume({
     logLevel,
     mediaRef: audioRef,
@@ -4335,7 +4389,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [audioRef]);
   const currentOnDurationCallback = useRef11(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect13(() => {
+  useEffect14(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4384,8 +4438,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext24(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext24(RenderAssetManager);
+  const sequenceContext = useContext25(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo21(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
@@ -4402,7 +4456,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4453,7 +4507,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (!needsToRenderAudioTag) {
       return;
     }
-    const newHandle = delayRender2("Loading <Audio> duration with src=" + src, {
+    const newHandle = delayRender2("Loading <Html5Audio> duration with src=" + src, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -4492,7 +4546,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     onError: onNativeError
   });
 }, AudioForRendering, AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext25(SharedAudioContext);
+  const audioContext = useContext26(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -4508,9 +4562,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext25(DurationsContext);
+  const { durations, setDurations } = useContext26(DurationsContext);
   if (typeof props.src !== "string") {
-    throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
   const onError = useCallback11((e) => {
@@ -4540,7 +4594,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx19(Audio, {
+      return /* @__PURE__ */ jsx19(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -4549,13 +4603,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
     const duration = durationFetched * fps;
     return /* @__PURE__ */ jsx19(Loop, {
       layout: "none",
-      durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue,
-        mediaDuration: duration,
+      durationInFrames: calculateMediaDuration({
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: duration,
         playbackRate: props.playbackRate ?? 1,
-        startFrom: trimBeforeValue
+        trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx19(Audio, {
+      children: /* @__PURE__ */ jsx19(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -4569,7 +4623,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx19(Audio, {
+      children: /* @__PURE__ */ jsx19(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
@@ -4577,7 +4631,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       })
     });
   }
-  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
+  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx19(AudioForRendering, {
       onDuration,
@@ -4599,7 +4653,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
-}, Audio, getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g, invalidFolderNameErrorMessage, FolderContext, rotate, ICON_SIZE = 40, label, container3, Loading = () => {
+}, Html5Audio, getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g, invalidFolderNameErrorMessage, FolderContext, rotate, ICON_SIZE = 40, label, container3, Loading = () => {
   return /* @__PURE__ */ jsxs22(AbsoluteFill, {
     style: container3,
     id: "remotion-comp-loading",
@@ -4706,7 +4760,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect16(() => {
+  useEffect17(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -4721,7 +4775,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   schema,
   ...compProps
 }) => {
-  const compManager = useContext27(CompositionSetters);
+  const compManager = useContext28(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -4732,15 +4786,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext27(CanUseRemotionHooks);
+  const canUseComposition = useContext28(CanUseRemotionHooks);
+  if (typeof window !== "undefined") {
+    window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
+  }
   if (canUseComposition) {
     if (isPlayer) {
       throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext27(FolderContext);
-  useEffect16(() => {
+  const { folderName, parentName } = useContext28(FolderContext);
+  useEffect17(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -4779,7 +4836,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     registerComposition,
     unregisterComposition
   ]);
-  useEffect16(() => {
+  useEffect17(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -4817,7 +4874,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return null;
 }, Composition = (props2) => {
-  const { onlyRenderComposition } = useContext27(CompositionSetters);
+  const { onlyRenderComposition } = useContext28(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
@@ -4868,7 +4925,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const imageRef = useRef13(null);
   const errors = useRef13({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5239,7 +5296,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -5352,9 +5409,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext29(SequenceContext);
+  const sequenceContext = useContext30(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -5373,7 +5430,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5533,7 +5590,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect20(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5555,7 +5612,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext30(SharedAudioContext);
+  const context = useContext31(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -5603,8 +5660,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext30(SequenceContext);
-  const { hidden } = useContext30(SequenceVisibilityToggleContext);
+  const parentSequence = useContext31(SequenceContext);
+  const { hidden } = useContext31(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState19(() => String(Math.random()));
@@ -5621,7 +5678,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   warnAboutTooHighVolume(userPreferredVolume);
   useMediaInTimeline({
-    mediaRef: videoRef,
     volume,
     mediaVolume,
     mediaType: "video",
@@ -5633,9 +5689,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    onAutoPlayError: onAutoPlayError ?? null,
-    isPremounting: Boolean(parentSequence?.premounting),
-    isPostmounting: Boolean(parentSequence?.postmounting)
+    loopDisplay: undefined
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -5649,6 +5703,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     pauseWhenBuffering,
     onAutoPlayError: onAutoPlayError ?? null
   });
+  useMediaTag({
+    id: timelineId,
+    isPostmounting: Boolean(parentSequence?.postmounting),
+    isPremounting: Boolean(parentSequence?.premounting),
+    mediaRef: videoRef,
+    mediaType: "video",
+    onAutoPlayError: onAutoPlayError ?? null
+  });
   useVolume({
     logLevel,
     mediaRef: videoRef,
@@ -5674,7 +5736,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5705,7 +5767,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5722,7 +5784,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6278,13 +6340,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext31(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
   const id = useMemo30(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -6300,7 +6362,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect222(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -6343,7 +6405,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect21(() => {
+  useEffect222(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -6357,7 +6419,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       startFrom: -mediaStartsAt,
       fps: videoConfig.fps
     });
-    const handle = delayRender2(`Rendering <Video /> with src="${props2.src}" at time ${currentTime}`, {
+    const handle = delayRender2(`Rendering <Html5Video /> with src="${props2.src}" at time ${currentTime}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -6431,7 +6493,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
-      const newHandle = delayRender2("Loading <Video> duration with src=" + src, {
+      const newHandle = delayRender2("Loading <Html5Video> duration with src=" + src, {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
@@ -6483,12 +6545,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext32(DurationsContext);
+  const { durations, setDurations } = useContext33(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
   if (typeof props2.src !== "string") {
-    throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
+    throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
   const onDuration = useCallback17((src, durationInSeconds) => {
@@ -6505,7 +6567,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx34(Video, {
+      return /* @__PURE__ */ jsx34(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -6513,15 +6575,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     const mediaDuration = durationFetched * fps;
     return /* @__PURE__ */ jsx34(Loop, {
-      durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue,
-        mediaDuration,
+      durationInFrames: calculateMediaDuration({
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: mediaDuration,
         playbackRate: props2.playbackRate ?? 1,
-        startFrom: trimBeforeValue
+        trimBefore: trimBeforeValue
       }),
       layout: "none",
       name,
-      children: /* @__PURE__ */ jsx34(Video, {
+      children: /* @__PURE__ */ jsx34(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -6535,14 +6597,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx34(Video, {
+      children: /* @__PURE__ */ jsx34(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         ref
       })
     });
   }
-  validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Video");
+  validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Html5Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx34(VideoForRendering, {
       onDuration,
@@ -6563,7 +6625,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     showInTimeline: showInTimeline ?? true,
     onAutoPlayError: onAutoPlayError ?? undefined
   });
-}, Video, proxyObj, Config;
+}, Html5Video, proxyObj, Config;
 var init_esm = __esm(() => {
   __defProp2 = Object.defineProperty;
   if (typeof createContext !== "function") {
@@ -6866,8 +6928,8 @@ var init_esm = __esm(() => {
   });
   AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
   AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
-  Audio = forwardRef6(AudioRefForwardingFunction);
-  addSequenceStackTraces(Audio);
+  Html5Audio = forwardRef6(AudioRefForwardingFunction);
+  addSequenceStackTraces(Html5Audio);
   invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
   FolderContext = createContext17({
     folderName: null,
@@ -6928,6 +6990,7 @@ var init_esm = __esm(() => {
     getRoot,
     useMediaVolumeState,
     useMediaMutedState,
+    useMediaInTimeline,
     useLazyComponent,
     truthy,
     SequenceContext,
@@ -6941,6 +7004,7 @@ var init_esm = __esm(() => {
     SharedAudioContext,
     SharedAudioContextProvider,
     invalidCompositionErrorMessage,
+    calculateMediaDuration,
     isCompositionIdValid,
     getPreviewDomElement,
     compositionsRef,
@@ -6988,7 +7052,8 @@ var init_esm = __esm(() => {
     warnAboutTooHighVolume,
     AudioForPreview,
     OBJECTFIT_CONTAIN_CLASS_NAME,
-    InnerOffthreadVideo
+    InnerOffthreadVideo,
+    useBasicMediaInTimeline
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);
@@ -7025,8 +7090,8 @@ var init_esm = __esm(() => {
   };
   didWarn2 = {};
   VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
-  Video = forwardRef12(VideoForwardingFunction);
-  addSequenceStackTraces(Video);
+  Html5Video = forwardRef12(VideoForwardingFunction);
+  addSequenceStackTraces(Html5Video);
   checkMultipleRemotionVersions();
   proxyObj = {};
   Config = new Proxy(proxyObj, {
@@ -7230,7 +7295,7 @@ var init_esm2 = __esm(() => {
 // src/components/homepage/FreePricing.tsx
 import React2, { useCallback, useMemo } from "react";
 
-// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if (typeof e == "string" || typeof e == "number")
@@ -7251,7 +7316,7 @@ function clsx() {
   return n;
 }
 
-// ../../node_modules/.pnpm/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
+// ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR = "-";
 var createClassGroupUtils = (config) => {
   const classMap = createClassMap(config);
@@ -8742,7 +8807,7 @@ var PricingBulletPoint = ({ text, checked, children }) => {
         style: greyCircle
       }),
       /* @__PURE__ */ jsxs3("div", {
-        className: "fontbrand text-lg	",
+        className: "fontbrand text-lg\t",
         children: [
           text,
           children
@@ -8907,7 +8972,6 @@ var EnterpriseLicense = () => {
 };
 var SEAT_PRICE = 25;
 var RENDER_UNIT_PRICE = 10;
-var WEBCODECS_UNIT_PRICE = 10;
 var icon = {
   height: 16,
   marginLeft: 4
@@ -8915,7 +8979,6 @@ var icon = {
 var CompanyPricing = () => {
   const [devSeatCount, setDevSeatCount] = React2.useState(1);
   const [cloudRenders, setCloudRenders] = React2.useState(1000);
-  const [creations, setCreations] = React2.useState(1000);
   const formatPrice = useCallback((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -8925,8 +8988,8 @@ var CompanyPricing = () => {
     return formatter.format(price);
   }, []);
   const totalPrice = useMemo(() => {
-    return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE + creations / 1000 * WEBCODECS_UNIT_PRICE);
-  }, [cloudRenders, devSeatCount, creations]);
+    return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
+  }, [cloudRenders, devSeatCount]);
   const totalPriceString = useMemo(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
@@ -9011,12 +9074,12 @@ var CompanyPricing = () => {
             children: [
               /* @__PURE__ */ jsx4("div", {
                 className: "fontbrand font-bold text-lg",
-                children: "Server renders"
+                children: "Video renders"
               }),
               /* @__PURE__ */ jsx4("div", {
                 className: "text-muted fontbrand text-sm",
                 children: /* @__PURE__ */ jsx4("a", {
-                  href: "https://www.remotion.dev/docs/compare-ssr",
+                  href: "https://www.remotion.dev/docs/render",
                   className: "underline underline-offset-4 text-inherit",
                   children: "Renders per month (self-hosted)"
                 })
@@ -9051,54 +9114,6 @@ var CompanyPricing = () => {
       /* @__PURE__ */ jsx4("div", {
         style: { height: 14 }
       }),
-      /* @__PURE__ */ jsxs4("div", {
-        className: "flex flex-col md:flex-row md:items-center",
-        children: [
-          /* @__PURE__ */ jsxs4("div", {
-            style: textUnitWrapper,
-            children: [
-              /* @__PURE__ */ jsx4("div", {
-                className: "fontbrand font-bold text-lg",
-                children: "WebCodecs video creations"
-              }),
-              /* @__PURE__ */ jsx4("div", {
-                className: "text-muted fontbrand text-sm",
-                children: /* @__PURE__ */ jsx4("a", {
-                  className: "underline underline-offset-4 text-inherit",
-                  href: "https://remotion.dev/webcodecs",
-                  children: "Client-side video creations per month"
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx4("div", {
-            style: { flex: 3 },
-            className: "hidden md:block"
-          }),
-          /* @__PURE__ */ jsxs4("div", {
-            className: "flex flex-row items-center justify-between mt-3 md:mt-0",
-            children: [
-              /* @__PURE__ */ jsx4(Counter, {
-                count: creations,
-                setCount: setCreations,
-                minCount: 0,
-                step: 1000
-              }),
-              /* @__PURE__ */ jsxs4(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(creations / 1000 * WEBCODECS_UNIT_PRICE)
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx4("div", {
-        style: { height: 20 }
-      }),
       /* @__PURE__ */ jsx4("div", {
         className: "flex flex-row justify-end",
         children: /* @__PURE__ */ jsxs4("div", {
@@ -12186,13 +12201,13 @@ import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs23, Fragment } from "react/jsx-runtime";
 import React6 from "react";
 import { useContext as useContext210, useEffect as useEffect23, useState as useState20 } from "react";
-import { useContext as useContext33, useEffect as useEffect24 } from "react";
+import { useContext as useContext34, useEffect as useEffect24 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 import { useCallback as useCallback18, useRef as useRef18 } from "react";
 import { useEffect as useEffect32, useState as useState23 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
-import { useCallback as useCallback23, useContext as useContext34, useMemo as useMemo31, useRef as useRef22, useState as useState32 } from "react";
+import { useCallback as useCallback23, useContext as useContext35, useMemo as useMemo31, useRef as useRef22, useState as useState32 } from "react";
 import { useEffect as useEffect52, useRef as useRef32 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo210, useState as useState42 } from "react";
 import {
@@ -13319,7 +13334,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext33(Internals.BufferingContextReact);
+  const bufferManager = useContext34(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -13402,20 +13417,20 @@ var usePlayer = () => {
   const playStart = useRef22(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext34(Internals.SharedAudioContext);
-  const { audioAndVideoTags } = useContext34(Internals.Timeline.TimelineContext);
+  const audioContext = useContext35(Internals.SharedAudioContext);
+  const { audioAndVideoTags } = useContext35(Internals.Timeline.TimelineContext);
   const frameRef = useRef22(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext34(PlayerEventEmitterContext);
+  const emitter = useContext35(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 = useContext34(Internals.BufferingContextReact);
+  const bufferingContext = useContext35(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -16245,7 +16260,7 @@ import {
   useState as useState33
 } from "react";
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1;e < arguments.length; e++) {
@@ -16257,33 +16272,33 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
 function _assertThisInitialized(e) {
   if (e === undefined)
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return e;
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
 function _setPrototypeOf(t, e) {
   return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
     return t2.__proto__ = e2, t2;
   }, _setPrototypeOf(t, e);
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
 function _inheritsLoose(t, o) {
   t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
 function _getPrototypeOf(t) {
   return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t2) {
     return t2.__proto__ || Object.getPrototypeOf(t2);
   }, _getPrototypeOf(t);
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
 function _isNativeFunction(t) {
   try {
     return Function.toString.call(t).indexOf("[native code]") !== -1;
@@ -16292,7 +16307,7 @@ function _isNativeFunction(t) {
   }
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
 function _isNativeReflectConstruct() {
   try {
     var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
@@ -16302,7 +16317,7 @@ function _isNativeReflectConstruct() {
   })();
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/construct.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/construct.js
 function _construct(t, e, r2) {
   if (_isNativeReflectConstruct())
     return Reflect.construct.apply(null, arguments);
@@ -16312,7 +16327,7 @@ function _construct(t, e, r2) {
   return r2 && _setPrototypeOf(p, r2.prototype), p;
 }
 
-// ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
+// ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
 function _wrapNativeSuper(t) {
   var r2 = typeof Map == "function" ? new Map : undefined;
   return _wrapNativeSuper = function _wrapNativeSuper(t2) {
@@ -16339,7 +16354,7 @@ function _wrapNativeSuper(t) {
   }, _wrapNativeSuper(t);
 }
 
-// ../../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js
+// ../../node_modules/.bun/polished@4.3.1/node_modules/polished/dist/polished.esm.js
 var PolishedError = /* @__PURE__ */ function(_Error) {
   _inheritsLoose(PolishedError2, _Error);
   function PolishedError2(code) {
@@ -16991,7 +17006,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 React11, { useContext as useContext35, useMemo as useMemo33 } from "react";
+import React11, { useContext as useContext36, useMemo as useMemo33 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var Context = React11.createContext(undefined);
 var ColorModeProvider = ({
@@ -17008,7 +17023,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext35(Context);
+  const context = useContext36(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -18114,7 +18129,7 @@ var HomepageVideoComp = ({
         onRight: onClickRight,
         emojiName: emoji
       }, rerenders),
-      audioSrc ? /* @__PURE__ */ jsx56(Audio, {
+      audioSrc ? /* @__PURE__ */ jsx56(Html5Audio, {
         src: audioSrc
       }) : null
     ]
@@ -20393,54 +20408,6 @@ var TrustedByBanner = () => {
         ]
       })
     },
-    {
-      id: "logo4",
-      url: "https://www.vicemediagroup.com/",
-      light: /* @__PURE__ */ jsxs43("svg", {
-        height: "20",
-        viewBox: "0 0 190 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [
-          /* @__PURE__ */ jsx101("path", {
-            d: "M43.4416 0.472096C37.9752 0.662593 33.9996 3.1639 32.8566 7.12292C32.5171 8.27419 32.4425 8.96992 32.4922 10.4111C32.5171 11.4547 32.575 11.8853 32.7407 12.5148C33.5441 15.5628 35.5319 17.6334 38.7372 18.7432C40.402 19.3313 41.9508 19.5549 44.1871 19.5549C48.9909 19.5549 52.5027 18.0724 54.3165 15.2977C54.6644 14.7676 55.2442 13.4342 55.2442 13.1608C55.2442 13.1194 54.4987 13.0863 53.3806 13.0863H51.5171L51.1858 13.6164C50.3327 14.9664 48.8501 15.8858 46.8375 16.3248C45.8518 16.5401 43.7067 16.6229 42.63 16.4904C39.7808 16.1343 37.7764 14.9167 36.8157 12.9621C36.4181 12.1587 36.269 11.5458 36.2193 10.4608C35.9957 6.06277 38.9857 3.47863 44.2699 3.47863C47.3841 3.47863 49.7612 4.4891 50.9787 6.32781L51.2934 6.79163H53.2232C54.2917 6.79163 55.1613 6.77506 55.1613 6.76678C55.1613 6.75021 55.0951 6.53487 55.004 6.28639C53.803 2.79119 50.0428 0.654311 44.8083 0.480378C44.3776 0.463815 43.7647 0.463815 43.4416 0.472096Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M0.331299 0.745421C0.331299 0.828246 9.89756 18.7847 10.1543 19.1988C10.2703 19.381 10.2951 19.381 12.2167 19.381H14.163L14.3535 19.0745C14.6103 18.6604 24.102 0.786833 24.102 0.71229C24.102 0.687443 23.2241 0.662594 22.1556 0.662594H20.2092L20.0436 0.927634C19.9608 1.07672 18.1635 4.50566 16.0597 8.54751C13.956 12.5976 12.2084 15.8775 12.1752 15.8444C12.1421 15.8112 10.3779 12.4237 8.24935 8.32389C6.11247 4.22406 4.33174 0.819962 4.29032 0.761984C4.18265 0.629466 0.331299 0.6129 0.331299 0.745421Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M26.0484 0.761964C26.0236 0.819942 26.0153 5.02744 26.0236 10.1046L26.0484 19.3396H27.8291H29.6099V10.0218V0.703989L27.8457 0.67914C26.4874 0.662576 26.0732 0.67914 26.0484 0.761964Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M57.8945 10.0218V19.381L67.2786 19.3644L76.6543 19.3396L76.6792 17.9067L76.6958 16.4821H69.0759H61.456V13.9146V11.347H68.289H75.1221V9.93897V8.53095H68.289H61.456V6.04621V3.56146H69.0759H76.6958L76.6792 2.1286L76.6543 0.70401L67.2786 0.679162L57.8945 0.662598V10.0218Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M87.5458 10.0218V19.381H88.7881H90.0305L90.0471 11.6534L90.0719 3.91761L94.3126 11.6286L98.5449 19.3396L99.8784 19.3644L101.212 19.381L101.353 19.1491C101.435 19.0166 103.349 15.5545 105.602 11.4464L109.701 3.98387L109.743 11.6617L109.784 19.3396H111.027H112.269V10.0218V0.70401L110.513 0.679162L108.765 0.662598L108.608 0.886223C108.517 1.01874 106.529 4.61334 104.194 8.87881C101.85 13.1526 99.9115 16.6478 99.8867 16.6478C99.8618 16.6478 97.8906 13.0615 95.497 8.67175L91.1487 0.70401L89.3514 0.679162L87.5458 0.662598V10.0218Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M115.996 0.761986C115.971 0.819964 115.963 5.02746 115.971 10.1046L115.996 19.3396L125.173 19.3644L134.342 19.381V18.2629V17.1447H126.473H118.605V14.0802V11.0157H125.687H132.768V9.93897V8.86225H125.687H118.605V5.88056V2.89887H126.473H134.342V1.78073V0.662598H125.19C117.942 0.662598 116.021 0.687445 115.996 0.761986Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M137.531 0.761966C137.506 0.819944 137.497 5.02744 137.506 10.1046L137.531 19.3396H143.245C149.366 19.3396 149.789 19.3147 151.503 18.8757C156.067 17.7245 158.593 14.5689 158.609 10.0218C158.609 9.59109 158.551 8.87879 158.493 8.44811C157.922 4.67958 155.528 2.18655 151.503 1.16781C149.83 0.745403 149.499 0.720554 143.353 0.687425C138.591 0.654294 137.564 0.67086 137.531 0.761966ZM149.184 3.10591C151.42 3.39579 152.952 4.09981 154.162 5.38359C155.305 6.60111 155.793 7.976 155.793 10.0218C155.793 12.0675 155.305 13.4424 154.162 14.66C152.952 15.9437 151.42 16.6478 149.184 16.9376C148.463 17.037 147.304 17.0619 144.19 17.0619H140.139V10.0218V2.98167H144.19C147.304 2.98167 148.463 3.00652 149.184 3.10591Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M161.384 0.761964C161.359 0.819942 161.351 5.02744 161.359 10.1046L161.384 19.3396H162.668H163.952V10.0218V0.703989L162.684 0.67914C161.724 0.662576 161.409 0.67914 161.384 0.761964Z",
-            fill: "var(--text-color)"
-          }),
-          /* @__PURE__ */ jsx101("path", {
-            d: "M176.268 0.770262C176.177 0.877934 166.503 19.0497 166.42 19.265C166.378 19.3644 166.569 19.381 167.728 19.3644L169.087 19.3396L170.462 16.772L171.837 14.2044H178.082H184.326L185.693 16.772L187.068 19.3396L188.368 19.3644C189.238 19.381 189.669 19.3561 189.669 19.2982C189.669 19.2153 180.194 1.27549 179.929 0.844805C179.813 0.662591 179.779 0.662591 178.082 0.662591C176.781 0.662591 176.334 0.687438 176.268 0.770262ZM180.649 7.23888C181.991 9.74019 183.101 11.8191 183.109 11.8605C183.126 11.8936 180.864 11.9268 178.082 11.9268C175.299 11.9268 173.021 11.9102 173.021 11.8853C173.021 11.8605 174.147 9.7319 175.522 7.15605C177.493 3.4455 178.04 2.5013 178.115 2.58413C178.173 2.6421 179.307 4.73757 180.649 7.23888Z",
-            fill: "var(--text-color)"
-          })
-        ]
-      })
-    },
     {
       id: "logo5",
       url: "https://www.soundcloud.com/",