@remotion/promo-pages 4.0.488 → 4.0.490

package/dist/Homepage.js

@@ -2049,26 +2049,20 @@ var continueRenderInternal = ({
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
-    if (h === handle) {
-      if (environment.isRendering && scope !== undefined) {
-        if (!scope.remotion_delayRenderTimeouts[handle]) {
-          return false;
-        }
-        const { label: label2, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
-        clearTimeout(timeout);
-        const message = [
-          label2 ? `"${label2}"` : "A handle",
-          DELAY_RENDER_CLEAR_TOKEN,
-          `${Date.now() - startTime}ms`
-        ].filter(truthy).join(" ");
-        Log.verbose({ logLevel, tag: "delayRender()" }, message);
-        delete scope.remotion_delayRenderTimeouts[handle];
-      }
-      return false;
-    }
-    return true;
-  });
+  const handleExists = scope.remotion_delayRenderHandles.includes(handle);
+  const timeoutEntry = scope.remotion_delayRenderTimeouts[handle];
+  if (handleExists && environment.isRendering && timeoutEntry) {
+    const { label: label2, startTime, timeout } = timeoutEntry;
+    clearTimeout(timeout);
+    const message = [
+      label2 ? `"${label2}"` : "A handle",
+      DELAY_RENDER_CLEAR_TOKEN,
+      `${Date.now() - startTime}ms`
+    ].filter(truthy).join(" ");
+    Log.verbose({ logLevel, tag: "delayRender()" }, message);
+    delete scope.remotion_delayRenderTimeouts[handle];
+  }
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => h !== handle);
   if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
@@ -2341,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.488";
+var VERSION = "4.0.490";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2722,7 +2716,8 @@ var transformSchema = {
     max: 100,
     step: 0.01,
     default: 1,
-    description: "Scale"
+    description: "Scale",
+    defaultKeyframeOutput: "perceptual-scale"
   },
   "style.rotate": {
     type: "rotation-css",
@@ -3526,8 +3521,20 @@ var serializeStringInterpolationValue = ({
   }
   return values.slice(0, dimensions).map((value, index) => `${stringifyNumber(value)}${units[index]}`).join(" ");
 };
+var toSignedArea = (scale) => {
+  if (scale === 0) {
+    return 0;
+  }
+  return Math.sign(scale) * scale * scale;
+};
+var fromSignedArea = (area) => {
+  if (area === 0) {
+    return 0;
+  }
+  return Math.sign(area) * Math.sqrt(Math.abs(area));
+};
 function interpolateFunction(input, inputRange, outputRange, options) {
-  const { extrapolateLeft, extrapolateRight, easing } = options;
+  const { extrapolateLeft, extrapolateRight, easing, output } = options;
   let result = input;
   const [inputMin, inputMax] = inputRange;
   const [outputMin, outputMax] = outputRange;
@@ -3558,7 +3565,13 @@ function interpolateFunction(input, inputRange, outputRange, options) {
   }
   result = (result - inputMin) / (inputMax - inputMin);
   result = easing(result);
-  result = result * (outputMax - outputMin) + outputMin;
+  if (output === "perceptual-scale") {
+    const signedAreaMin = toSignedArea(outputMin);
+    const signedAreaMax = toSignedArea(outputMax);
+    result = fromSignedArea(result * (signedAreaMax - signedAreaMin) + signedAreaMin);
+  } else {
+    result = result * (outputMax - outputMin) + outputMin;
+  }
   return result;
 }
 function findRange(input, inputRange) {
@@ -3571,6 +3584,9 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var resolveOutputOption = (output) => {
+  return output ?? "linear";
+};
 var shouldExtendRightForEasing = (easing) => {
   return easing.remotionShouldExtendRight === true;
 };
@@ -3592,12 +3608,14 @@ var interpolateSegment = ({
   outputRange,
   easing,
   extrapolateLeft,
-  extrapolateRight
+  extrapolateRight,
+  output
 }) => {
   return interpolateFunction(input, inputRange, outputRange, {
     easing,
     extrapolateLeft,
-    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight,
+    output
   });
 };
 var interpolateNumber = ({
@@ -3606,6 +3624,7 @@ var interpolateNumber = ({
   outputRange,
   options
 }) => {
+  const output = resolveOutputOption(options?.output);
   if (inputRange.length === 1) {
     return outputRange[0];
   }
@@ -3630,7 +3649,8 @@ var interpolateNumber = ({
     outputRange: [outputRange[range], outputRange[range + 1]],
     easing,
     extrapolateLeft,
-    extrapolateRight
+    extrapolateRight,
+    output
   });
   for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
     const previousEasing = resolveEasingForSegment({
@@ -3650,7 +3670,8 @@ var interpolateNumber = ({
       outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
       easing: previousEasing,
       extrapolateLeft,
-      extrapolateRight: "extend"
+      extrapolateRight: "extend",
+      output
     });
     result += continuedSegmentValue - outputRange[segmentIndex + 1];
   }
@@ -3698,14 +3719,18 @@ var interpolateString = ({
       }
     }
   }
-  return serializeStringInterpolationValue({
-    kind,
-    values: [0, 0, 0].map((_, axis) => interpolateNumber({
+  const values = [0, 0, 0];
+  for (let axis = 0;axis < dimensions; axis++) {
+    values[axis] = interpolateNumber({
       input,
       inputRange,
       outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
       options
-    })),
+    });
+  }
+  return serializeStringInterpolationValue({
+    kind,
+    values,
     units,
     dimensions
   });
@@ -3789,6 +3814,12 @@ function assertValidInterpolatePosterizeOption(posterize) {
     throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
   }
 }
+function assertValidInterpolateOutputOption(output) {
+  if (output === undefined || output === "linear" || output === "perceptual-scale") {
+    return;
+  }
+  throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
+}
 function interpolate(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -3806,6 +3837,7 @@ function interpolate(input, inputRange, outputRange, options) {
   checkValidInputRange(inputRange);
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption(options?.posterize);
+  assertValidInterpolateOutputOption(options?.output);
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
@@ -4750,6 +4782,7 @@ var interpolateKeyframedStatus = ({
       easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
       extrapolateLeft: clamping.left,
       extrapolateRight: clamping.right,
+      output: status.output,
       posterize: status.posterize
     });
   } catch {
@@ -4990,7 +5023,7 @@ var getFlatSchemaWithAllKeys = (schema) => {
   const out = {};
   const addKey = (key, field) => {
     if (key in out) {
-      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+      return;
     }
     out[key] = field;
   };
@@ -10869,6 +10902,22 @@ var Img = withInteractivitySchema({
   supportsEffects: true
 });
 addSequenceStackTraces(Img);
+var sourcePathToIdentityPrefix = (packageName) => {
+  if (packageName === "remotion") {
+    return "dev.remotion.remotion";
+  }
+  if (packageName.startsWith("@remotion/")) {
+    const normalizedPackageName = packageName.slice("@remotion/".length).replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    return `dev.remotion.${normalizedPackageName}`;
+  }
+  throw new Error(`Unsupported Remotion package name: ${packageName}`);
+};
+var makeRemotionComponentIdentity = ({
+  packageName,
+  componentName
+}) => {
+  return `${sourcePathToIdentityPrefix(packageName)}.${componentName}`;
+};
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
@@ -10882,6 +10931,11 @@ var setRef = (ref, value) => {
     ref.current = value;
   }
 };
+var withSchema = (options) => {
+  const Wrapped = withInteractivitySchema(options);
+  addSequenceStackTraces(Wrapped);
+  return Wrapped;
+};
 var makeInteractiveElement = (tag, displayName) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
@@ -10921,15 +10975,17 @@ var makeInteractiveElement = (tag, displayName) => {
     });
   });
   Inner.displayName = displayName;
-  const Wrapped = withInteractivitySchema({
+  const Wrapped = withSchema({
     Component: Inner,
     componentName: displayName,
-    componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
+    componentIdentity: makeRemotionComponentIdentity({
+      packageName: "remotion",
+      componentName: displayName.slice(1, -1)
+    }),
     schema: interactiveElementSchema,
     supportsEffects: false
   });
   Wrapped.displayName = displayName;
-  addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
 var Interactive = {
@@ -10938,7 +10994,8 @@ var Interactive = {
   textSchema,
   premountSchema,
   sequenceSchema,
-  withSchema: withInteractivitySchema,
+  withSchema,
+  _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
   A: makeInteractiveElement("a", "<Interactive.A>"),
   Article: makeInteractiveElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
@@ -17970,7 +18027,6 @@ var Arrow = Interactive.withSchema({
   schema: arrowSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Arrow);
 var shortenVector = (vector, radius) => {
   const [x, y] = vector;
   const currentLength = Math.sqrt(x * x + y * y);
@@ -18395,7 +18451,6 @@ var Callout = Interactive.withSchema({
   schema: calloutSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Callout);
 var makeCircle = ({ radius }) => {
   const instructions = [
     {
@@ -18458,7 +18513,6 @@ var Circle = Interactive.withSchema({
   schema: circleSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Circle);
 var makeEllipse = ({ rx, ry }) => {
   const instructions = [
     {
@@ -18516,7 +18570,6 @@ var Ellipse = Interactive.withSchema({
   schema: ellipseSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Ellipse);
 var makeHeart = ({
   height,
   aspectRatio = 1.1,
@@ -18655,7 +18708,6 @@ var Heart = Interactive.withSchema({
   schema: heartSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Heart);
 var getCoord = ({
   counterClockwise,
   actualProgress,
@@ -18810,7 +18862,6 @@ var Pie = Interactive.withSchema({
   schema: pieSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Pie);
 function polygon({
   points,
   radius,
@@ -18910,7 +18961,6 @@ var Polygon = Interactive.withSchema({
   schema: polygonSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Polygon);
 var makeRect = ({
   width,
   height,
@@ -18977,7 +19027,6 @@ var Rect = Interactive.withSchema({
   schema: rectSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Rect);
 var KAPPA = 0.5522847498307936;
 var CAP_HANDLE = 4 / 3;
 var curve = ({
@@ -19189,7 +19238,6 @@ var Spark = Interactive.withSchema({
   schema: sparkSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Spark);
 var star = ({
   centerX,
   centerY,
@@ -19300,7 +19348,6 @@ var Star = Interactive.withSchema({
   schema: starSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Star);
 var makeTriangle = ({
   length: length2,
   direction = "right",
@@ -19407,7 +19454,6 @@ var Triangle = Interactive.withSchema({
   schema: triangleSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Triangle);
 
 // ../svg-3d-engine/dist/esm/index.mjs
 function truthy2(value) {
@@ -29719,7 +29765,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "52K",
+            content: "53K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29914,7 +29960,7 @@ import {
   useImperativeHandle as useImperativeHandle22,
   useLayoutEffect as useLayoutEffect33,
   useMemo as useMemo142,
-  useRef as useRef112,
+  useRef as useRef122,
   useState as useState132
 } from "react";
 import React102, {
@@ -29950,7 +29996,7 @@ import { jsx as jsx114, jsxs as jsxs82, Fragment as Fragment23 } from "react/jsx
 import { useCallback as useCallback92, useMemo as useMemo112 } from "react";
 import { useCallback as useCallback82, useMemo as useMemo102, useRef as useRef92 } from "react";
 import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
-import { useCallback as useCallback112, useMemo as useMemo132, useState as useState122 } from "react";
+import { useCallback as useCallback112, useMemo as useMemo132, useRef as useRef112, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
 
 // ../core/dist/esm/no-react.mjs
@@ -30204,8 +30250,20 @@ var serializeStringInterpolationValue2 = ({
   }
   return values.slice(0, dimensions).map((value, index2) => `${stringifyNumber2(value)}${units[index2]}`).join(" ");
 };
+var toSignedArea2 = (scale) => {
+  if (scale === 0) {
+    return 0;
+  }
+  return Math.sign(scale) * scale * scale;
+};
+var fromSignedArea2 = (area) => {
+  if (area === 0) {
+    return 0;
+  }
+  return Math.sign(area) * Math.sqrt(Math.abs(area));
+};
 function interpolateFunction2(input, inputRange, outputRange, options2) {
-  const { extrapolateLeft, extrapolateRight, easing } = options2;
+  const { extrapolateLeft, extrapolateRight, easing, output } = options2;
   let result = input;
   const [inputMin, inputMax] = inputRange;
   const [outputMin, outputMax] = outputRange;
@@ -30236,7 +30294,13 @@ function interpolateFunction2(input, inputRange, outputRange, options2) {
   }
   result = (result - inputMin) / (inputMax - inputMin);
   result = easing(result);
-  result = result * (outputMax - outputMin) + outputMin;
+  if (output === "perceptual-scale") {
+    const signedAreaMin = toSignedArea2(outputMin);
+    const signedAreaMax = toSignedArea2(outputMax);
+    result = fromSignedArea2(result * (signedAreaMax - signedAreaMin) + signedAreaMin);
+  } else {
+    result = result * (outputMax - outputMin) + outputMin;
+  }
   return result;
 }
 function findRange2(input, inputRange) {
@@ -30249,6 +30313,9 @@ function findRange2(input, inputRange) {
   return i - 1;
 }
 var defaultEasing2 = (num) => num;
+var resolveOutputOption2 = (output) => {
+  return output ?? "linear";
+};
 var shouldExtendRightForEasing2 = (easing) => {
   return easing.remotionShouldExtendRight === true;
 };
@@ -30270,12 +30337,14 @@ var interpolateSegment2 = ({
   outputRange,
   easing,
   extrapolateLeft,
-  extrapolateRight
+  extrapolateRight,
+  output
 }) => {
   return interpolateFunction2(input, inputRange, outputRange, {
     easing,
     extrapolateLeft,
-    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing2(easing) ? "extend" : extrapolateRight
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing2(easing) ? "extend" : extrapolateRight,
+    output
   });
 };
 var interpolateNumber2 = ({
@@ -30284,6 +30353,7 @@ var interpolateNumber2 = ({
   outputRange,
   options: options2
 }) => {
+  const output = resolveOutputOption2(options2?.output);
   if (inputRange.length === 1) {
     return outputRange[0];
   }
@@ -30308,7 +30378,8 @@ var interpolateNumber2 = ({
     outputRange: [outputRange[range], outputRange[range + 1]],
     easing,
     extrapolateLeft,
-    extrapolateRight
+    extrapolateRight,
+    output
   });
   for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
     const previousEasing = resolveEasingForSegment2({
@@ -30328,7 +30399,8 @@ var interpolateNumber2 = ({
       outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
       easing: previousEasing,
       extrapolateLeft,
-      extrapolateRight: "extend"
+      extrapolateRight: "extend",
+      output
     });
     result += continuedSegmentValue - outputRange[segmentIndex + 1];
   }
@@ -30376,14 +30448,18 @@ var interpolateString2 = ({
       }
     }
   }
-  return serializeStringInterpolationValue2({
-    kind,
-    values: [0, 0, 0].map((_, axis) => interpolateNumber2({
+  const values = [0, 0, 0];
+  for (let axis = 0;axis < dimensions; axis++) {
+    values[axis] = interpolateNumber2({
       input,
       inputRange,
       outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
       options: options2
-    })),
+    });
+  }
+  return serializeStringInterpolationValue2({
+    kind,
+    values,
     units,
     dimensions
   });
@@ -30467,6 +30543,12 @@ function assertValidInterpolatePosterizeOption2(posterize) {
     throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
   }
 }
+function assertValidInterpolateOutputOption2(output) {
+  if (output === undefined || output === "linear" || output === "perceptual-scale") {
+    return;
+  }
+  throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
+}
 function interpolate3(input, inputRange, outputRange, options2) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -30484,6 +30566,7 @@ function interpolate3(input, inputRange, outputRange, options2) {
   checkValidInputRange2(inputRange);
   assertValidInterpolateEasingOption2(options2?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption2(options2?.posterize);
+  assertValidInterpolateOutputOption2(options2?.output);
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
@@ -30616,7 +30699,8 @@ var transformSchema2 = {
     max: 100,
     step: 0.01,
     default: 1,
-    description: "Scale"
+    description: "Scale",
+    defaultKeyframeOutput: "perceptual-scale"
   },
   "style.rotate": {
     type: "rotation-css",
@@ -31410,7 +31494,7 @@ import {
   useImperativeHandle as useImperativeHandle42,
   useLayoutEffect as useLayoutEffect42,
   useMemo as useMemo172,
-  useRef as useRef132,
+  useRef as useRef142,
   useState as useState142
 } from "react";
 import React133, {
@@ -31419,7 +31503,7 @@ import React133, {
   useCallback as useCallback122,
   useImperativeHandle as useImperativeHandle32,
   useMemo as useMemo162,
-  useRef as useRef122
+  useRef as useRef132
 } from "react";
 import { useContext as useContext62, useMemo as useMemo152 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
@@ -34369,7 +34453,9 @@ var SharedPlayerContexts = ({
       mediaVolume
     };
   }, [playerMuted, mediaVolume]);
-  const shouldCreateAudioContext = audioEnabled && !playerMuted && mediaVolume > 0;
+  const audioContextWasCreated = useRef112(false);
+  const shouldCreateAudioContext = audioContextWasCreated.current || audioEnabled && !playerMuted && mediaVolume > 0;
+  audioContextWasCreated.current = shouldCreateAudioContext;
   const setMediaVolumeAndPersist = useCallback112((vol) => {
     setMediaVolume(vol);
     if (persistVolumeToStorage) {
@@ -34623,9 +34709,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState132(false);
   const [rootId] = useState132("player-comp");
-  const rootRef = useRef112(null);
-  const audioAndVideoTags = useRef112([]);
-  const imperativePlaying = useRef112(false);
+  const rootRef = useRef122(null);
+  const audioAndVideoTags = useRef122([]);
+  const imperativePlaying = useRef122(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState132(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -34826,7 +34912,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef122(null);
+  const container4 = useRef132(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -34952,7 +35038,7 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState142(() => String(random(null)));
-  const rootRef = useRef132(null);
+  const rootRef = useRef142(null);
   const timelineState = useMemo172(() => {
     const value = {
       playing: false,
@@ -35803,11 +35889,11 @@ function useColorMode() {
 // ../media/dist/esm/index.mjs
 import { useMemo as useMemo312, useState as useState312 } from "react";
 import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo58, useRef as useRef50, useState as useState41 } from "react";
-import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import {
   AudioBufferSink,
   InputDisposedError
 } from "mediabunny";
+import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useContext as useContext50, useLayoutEffect as useLayoutEffect19 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
@@ -36649,6 +36735,120 @@ var getDurationOrCompute = async (input) => {
     skipLiveWait: true
   }) ?? input.computeDuration(undefined, { skipLiveWait: true });
 };
+var normalizeMediaHeaders = (headers) => {
+  if (!headers) {
+    return;
+  }
+  const entries = [];
+  if (headers instanceof Headers) {
+    headers.forEach((value, key) => {
+      entries.push([key.toLowerCase(), value]);
+    });
+  } else if (Array.isArray(headers)) {
+    for (const [key, value] of headers) {
+      entries.push([key.toLowerCase(), value]);
+    }
+  } else {
+    for (const [key, value] of Object.entries(headers)) {
+      entries.push([key.toLowerCase(), value]);
+    }
+  }
+  entries.sort(([a2], [b2]) => a2 < b2 ? -1 : a2 > b2 ? 1 : 0);
+  return entries;
+};
+var normalizeMediaRequestInit = (requestInit) => {
+  if (!requestInit) {
+    return;
+  }
+  const headers = normalizeMediaHeaders(requestInit.headers);
+  const normalized = {
+    ...requestInit.cache === undefined ? null : { cache: requestInit.cache },
+    ...requestInit.credentials === undefined ? null : { credentials: requestInit.credentials },
+    ...headers === undefined ? null : { headers },
+    ...requestInit.integrity === undefined ? null : { integrity: requestInit.integrity },
+    ...requestInit.mode === undefined ? null : { mode: requestInit.mode },
+    ...requestInit.redirect === undefined ? null : { redirect: requestInit.redirect },
+    ...requestInit.referrer === undefined ? null : { referrer: requestInit.referrer },
+    ...requestInit.referrerPolicy === undefined ? null : { referrerPolicy: requestInit.referrerPolicy }
+  };
+  return Object.keys(normalized).length === 0 ? undefined : normalized;
+};
+var getMediaRequestInitFingerprint = (requestInit) => {
+  const normalized = normalizeMediaRequestInit(requestInit);
+  if (!normalized) {
+    return null;
+  }
+  return [
+    normalized.cache ?? null,
+    normalized.credentials ?? null,
+    normalized.integrity ?? null,
+    normalized.mode ?? null,
+    normalized.redirect ?? null,
+    normalized.referrer ?? null,
+    normalized.referrerPolicy ?? null,
+    normalized.headers ?? null
+  ];
+};
+var resolveRequestInit = ({
+  credentials,
+  requestInit
+}) => {
+  if (credentials === undefined) {
+    return normalizeMediaRequestInit(requestInit);
+  }
+  return normalizeMediaRequestInit({
+    credentials,
+    ...requestInit
+  });
+};
+var sharedInputs = {};
+var getSharedInputCacheKey = ({
+  src,
+  credentials,
+  requestInit
+}) => JSON.stringify([
+  src,
+  credentials ?? null,
+  getMediaRequestInitFingerprint(requestInit)
+]);
+var acquireSharedInput = ({
+  src,
+  credentials,
+  requestInit
+}) => {
+  const normalizedRequestInit = normalizeMediaRequestInit(requestInit);
+  const cacheKey = getSharedInputCacheKey({
+    src,
+    credentials,
+    requestInit: normalizedRequestInit
+  });
+  const existing = sharedInputs[cacheKey];
+  if (existing) {
+    existing.refCount++;
+    return { input: existing.input, cacheKey };
+  }
+  const resolvedRequestInit = resolveRequestInit({
+    credentials,
+    requestInit: normalizedRequestInit
+  });
+  const input = new Input2({
+    source: new UrlSource(src, resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined),
+    formats: ALL_FORMATS
+  });
+  sharedInputs[cacheKey] = { input, refCount: 1 };
+  return { input, cacheKey };
+};
+var releaseSharedInput = (cacheKey) => {
+  const entry = sharedInputs[cacheKey];
+  if (!entry) {
+    return;
+  }
+  entry.refCount--;
+  if (entry.refCount <= 0) {
+    delete sharedInputs[cacheKey];
+    entry.input.dispose();
+  }
+};
 var resolveAudioTrack = async ({
   videoTrack,
   audioTracks,
@@ -36761,72 +36961,6 @@ class PremountAwareDelayPlayback {
     };
   }
 }
-var normalizeMediaHeaders = (headers) => {
-  if (!headers) {
-    return;
-  }
-  const entries = [];
-  if (headers instanceof Headers) {
-    headers.forEach((value, key) => {
-      entries.push([key.toLowerCase(), value]);
-    });
-  } else if (Array.isArray(headers)) {
-    for (const [key, value] of headers) {
-      entries.push([key.toLowerCase(), value]);
-    }
-  } else {
-    for (const [key, value] of Object.entries(headers)) {
-      entries.push([key.toLowerCase(), value]);
-    }
-  }
-  entries.sort(([a2], [b2]) => a2 < b2 ? -1 : a2 > b2 ? 1 : 0);
-  return entries;
-};
-var normalizeMediaRequestInit = (requestInit) => {
-  if (!requestInit) {
-    return;
-  }
-  const headers = normalizeMediaHeaders(requestInit.headers);
-  const normalized = {
-    ...requestInit.cache === undefined ? null : { cache: requestInit.cache },
-    ...requestInit.credentials === undefined ? null : { credentials: requestInit.credentials },
-    ...headers === undefined ? null : { headers },
-    ...requestInit.integrity === undefined ? null : { integrity: requestInit.integrity },
-    ...requestInit.mode === undefined ? null : { mode: requestInit.mode },
-    ...requestInit.redirect === undefined ? null : { redirect: requestInit.redirect },
-    ...requestInit.referrer === undefined ? null : { referrer: requestInit.referrer },
-    ...requestInit.referrerPolicy === undefined ? null : { referrerPolicy: requestInit.referrerPolicy }
-  };
-  return Object.keys(normalized).length === 0 ? undefined : normalized;
-};
-var getMediaRequestInitFingerprint = (requestInit) => {
-  const normalized = normalizeMediaRequestInit(requestInit);
-  if (!normalized) {
-    return null;
-  }
-  return [
-    normalized.cache ?? null,
-    normalized.credentials ?? null,
-    normalized.integrity ?? null,
-    normalized.mode ?? null,
-    normalized.redirect ?? null,
-    normalized.referrer ?? null,
-    normalized.referrerPolicy ?? null,
-    normalized.headers ?? null
-  ];
-};
-var resolveRequestInit = ({
-  credentials,
-  requestInit
-}) => {
-  if (credentials === undefined) {
-    return normalizeMediaRequestInit(requestInit);
-  }
-  return normalizeMediaRequestInit({
-    credentials,
-    ...requestInit
-  });
-};
 var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
@@ -37432,13 +37566,13 @@ class MediaPlayer {
     this.onVideoFrameCallback = onVideoFrameCallback;
     this.playing = playing;
     this.sequenceOffset = sequenceOffset;
-    const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
-    this.input = new Input2({
-      source: new UrlSource(this.src, resolvedRequestInit ? {
-        requestInit: resolvedRequestInit
-      } : undefined),
-      formats: ALL_FORMATS
+    const { input, cacheKey } = acquireSharedInput({
+      src: this.src,
+      credentials,
+      requestInit
     });
+    this.input = input;
+    this.inputCacheKey = cacheKey;
     this.tagType = tagType;
     this.getEffects = getEffects;
     this.getEffectChainState = getEffectChainState;
@@ -37456,8 +37590,10 @@ class MediaPlayer {
     }
   }
   input;
+  inputCacheKey;
+  disposed = false;
   isDisposalError() {
-    return this.input.disposed === true;
+    return this.disposed || this.input.disposed === true;
   }
   initialize(startTimeUnresolved, initialMuted) {
     const promise = this._initialize(startTimeUnresolved, initialMuted);
@@ -37492,7 +37628,7 @@ class MediaPlayer {
     try {
       const _ = __using(__stack, this.delayPlaybackHandleIfNotPremounting(), 0);
       try {
-        if (this.input.disposed) {
+        if (this.isDisposalError()) {
           return { type: "disposed" };
         }
         try {
@@ -37513,7 +37649,7 @@ class MediaPlayer {
           this.input.getPrimaryVideoTrack(),
           this.input.getAudioTracks()
         ]);
-        if (this.input.disposed) {
+        if (this.isDisposalError()) {
           return { type: "disposed" };
         }
         this.totalDuration = durationInSeconds;
@@ -37536,7 +37672,7 @@ class MediaPlayer {
           if (!canDecode) {
             return { type: "cannot-decode" };
           }
-          if (this.input.disposed) {
+          if (this.isDisposalError()) {
             return { type: "disposed" };
           }
           this.videoIteratorManager = await videoIteratorManager({
@@ -37569,7 +37705,7 @@ class MediaPlayer {
           if (!canDecode) {
             return { type: "cannot-decode" };
           }
-          if (this.input.disposed) {
+          if (this.isDisposalError()) {
             return { type: "disposed" };
           }
           this.audioIteratorManager = audioIteratorManager({
@@ -37788,6 +37924,10 @@ class MediaPlayer {
     }
   }
   async dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
     if (this.initializationPromise) {
       try {
         await this.initializationPromise;
@@ -37796,7 +37936,7 @@ class MediaPlayer {
     this.nonceManager.createAsyncOperation();
     this.videoIteratorManager?.destroy();
     this.audioIteratorManager?.destroyIterator();
-    this.input.dispose();
+    releaseSharedInput(this.inputCacheKey);
   }
   getTargetTime = (mediaTimestamp, currentTime) => {
     if (!this.sharedAudioContext) {
@@ -40553,7 +40693,6 @@ var Audio2 = Interactive.withSchema({
   schema: audioSchema,
   supportsEffects: false
 });
-Internals.addSequenceStackTraces(Audio2);
 var cache2 = new Map;
 var cacheVideoFrame = (src, sourceCanvas) => {
   const { width, height } = sourceCanvas;
@@ -41583,7 +41722,6 @@ var Video = Interactive.withSchema({
   schema: videoSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
 import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo61, useState as useState48 } from "react";
@@ -42891,7 +43029,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.488";
+var VERSION2 = "4.0.490";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -50059,7 +50197,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx134("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "52k"
+        children: "53k"
       })
     ]
   });