@remotion/promo-pages 4.0.481 → 4.0.483

package/dist/Homepage.js

@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.481";
+var VERSION = "4.0.483";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2735,6 +2735,77 @@ var transformSchema = {
   }
 };
 var sequenceVisualStyleSchema = transformSchema;
+var textSchema = {
+  "style.color": {
+    type: "color",
+    default: undefined,
+    description: "Color"
+  },
+  "style.fontSize": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Font size",
+    hiddenFromList: false
+  },
+  "style.lineHeight": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 0.05,
+    description: "Line height",
+    hiddenFromList: false
+  },
+  "style.fontWeight": {
+    type: "enum",
+    default: "400",
+    description: "Font weight",
+    variants: {
+      "100": {},
+      "200": {},
+      "300": {},
+      "400": {},
+      "500": {},
+      "600": {},
+      "700": {},
+      "800": {},
+      "900": {},
+      normal: {},
+      bold: {}
+    }
+  },
+  "style.fontStyle": {
+    type: "enum",
+    default: "normal",
+    description: "Font style",
+    variants: {
+      normal: {},
+      italic: {},
+      oblique: {}
+    }
+  },
+  "style.textAlign": {
+    type: "enum",
+    default: "left",
+    description: "Text align",
+    variants: {
+      left: {},
+      center: {},
+      right: {},
+      justify: {},
+      start: {},
+      end: {}
+    }
+  },
+  "style.letterSpacing": {
+    type: "number",
+    default: undefined,
+    step: 0.1,
+    description: "Letter spacing",
+    hiddenFromList: false
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -2793,6 +2864,13 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
+var trimBeforeField = {
+  type: "number",
+  default: 0,
+  min: 0,
+  step: 1,
+  hiddenFromList: true
+};
 var freezeField = {
   type: "number",
   default: null,
@@ -2802,6 +2880,7 @@ var freezeField = {
 var baseSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  trimBefore: trimBeforeField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -2821,6 +2900,7 @@ var sequenceSchema = {
 };
 var baseSchemaWithoutFrom = {
   durationInFrames: durationInFramesField,
+  trimBefore: trimBeforeField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -3471,6 +3551,35 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var shouldExtendRightForEasing = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber = ({
   input,
   inputRange,
@@ -3481,15 +3590,6 @@ var interpolateNumber = ({
     return outputRange[0];
   }
   const easingOption = options?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
   if (options?.extrapolateLeft !== undefined) {
     extrapolateLeft = options.extrapolateLeft;
@@ -3500,11 +3600,41 @@ var interpolateNumber = ({
   }
   const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
   const range = findRange(posterizedInput, inputRange);
-  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
+  const easing = resolveEasingForSegment({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
 var interpolateString = ({
   input,
@@ -3978,21 +4108,40 @@ class Easing {
   static back(s = 1.70158) {
     return (t) => t * t * ((s + 1) * t - s);
   }
-  static spring(config = {}) {
-    return (t) => {
+  static spring({
+    allowTail = false,
+    durationRestThreshold,
+    ...config
+  } = {}) {
+    const easing = (t) => {
       if (t <= 0) {
         return 0;
       }
-      if (t >= 1) {
+      if (!allowTail && t >= 1) {
         return 1;
       }
+      if (allowTail) {
+        return spring({
+          fps: springEasingDurationInFrames,
+          frame: t * measureSpring({
+            fps: springEasingDurationInFrames,
+            config,
+            threshold: durationRestThreshold
+          }),
+          config
+        });
+      }
       return spring({
         fps: springEasingDurationInFrames,
         frame: t * springEasingDurationInFrames,
         config,
-        durationInFrames: springEasingDurationInFrames
+        durationInFrames: springEasingDurationInFrames,
+        durationRestThreshold
       });
     };
+    return Object.assign(easing, {
+      remotionShouldExtendRight: allowTail
+    });
   }
   static bounce(t) {
     const u = clampUnit(t);
@@ -4523,25 +4672,31 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
   const processedOutputRange = outputRange.map((c2) => processColor(c2));
   return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
 };
-var easingToFn = (e) => {
-  switch (e.type) {
+var easingToFn = ({
+  easing,
+  forceSpringAllowTail
+}) => {
+  switch (easing.type) {
     case "linear":
       return Easing.linear;
     case "spring":
       return Easing.spring({
-        damping: e.damping,
-        mass: e.mass,
-        overshootClamping: e.overshootClamping,
-        stiffness: e.stiffness
+        allowTail: forceSpringAllowTail ?? easing.allowTail ?? undefined,
+        damping: easing.damping,
+        durationRestThreshold: easing.durationRestThreshold ?? undefined,
+        mass: easing.mass,
+        overshootClamping: easing.overshootClamping,
+        stiffness: easing.stiffness
       });
     case "bezier":
-      return bezier(e.x1, e.y1, e.x2, e.y2);
+      return bezier(easing.x1, easing.y1, easing.x2, easing.y2);
     default:
-      throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
+      throw new TypeError(`Unsupported easing: ${JSON.stringify(easing)}`);
   }
 };
 var interpolateKeyframedStatus = ({
   frame,
+  forceSpringAllowTail,
   status
 }) => {
   const { keyframes, easing, clamping, interpolationFunction } = status;
@@ -4560,7 +4715,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
-        easing: easing.map(easingToFn),
+        easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
         posterize: status.posterize
       });
     } catch {
@@ -4572,7 +4727,7 @@ var interpolateKeyframedStatus = ({
   }
   try {
     return interpolate(frame, inputRange, outputs, {
-      easing: easing.map(easingToFn),
+      easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
       extrapolateLeft: clamping.left,
       extrapolateRight: clamping.right,
       posterize: status.posterize
@@ -4595,6 +4750,7 @@ var resolveDragOverrideValue = ({
     return { type: "none" };
   }
   const interpolated = interpolateKeyframedStatus({
+    forceSpringAllowTail: null,
     frame,
     status: dragOverrideValue.status
   });
@@ -4620,6 +4776,7 @@ var getEffectiveVisualModeValue = ({
   if (propStatus.status === "keyframed") {
     if (frame !== null) {
       return interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status: propStatus
       });
@@ -4688,6 +4845,7 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
     }
     if (status.status === "keyframed") {
       const value = interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status
       });
@@ -4863,6 +5021,17 @@ var findPropsToDelete = ({
 var DEFAULT_LINEAR_EASING = {
   type: "linear"
 };
+var getEasingIndexToDuplicate = ({
+  insertedKeyframeIndex,
+  easingLength,
+  keyframeCount
+}) => {
+  const isSplittingExistingSegment = insertedKeyframeIndex > 0 && insertedKeyframeIndex < keyframeCount - 1;
+  if (!isSplittingExistingSegment || easingLength === 0) {
+    return null;
+  }
+  return Math.min(insertedKeyframeIndex - 1, easingLength - 1);
+};
 var makeStaticDragOverride = (value) => {
   return { type: "static", value };
 };
@@ -4874,6 +5043,16 @@ var makeKeyframedDragOverride = ({
   const existingIndex = status.keyframes.findIndex((keyframe) => keyframe.frame === frame);
   const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
   const easing = [...status.easing];
+  if (existingIndex === -1) {
+    const insertedKeyframeIndex = keyframes.findIndex((keyframe) => keyframe.frame === frame);
+    const easingIndexToDuplicate = getEasingIndexToDuplicate({
+      insertedKeyframeIndex,
+      easingLength: easing.length,
+      keyframeCount: keyframes.length
+    });
+    const easingToDuplicate = easingIndexToDuplicate === null ? DEFAULT_LINEAR_EASING : easing[easingIndexToDuplicate];
+    easing.splice(insertedKeyframeIndex, 0, easingToDuplicate);
+  }
   while (easing.length < keyframes.length - 1) {
     easing.push(DEFAULT_LINEAR_EASING);
   }
@@ -4945,6 +5124,7 @@ var computeEffectiveSchemaValuesDotNotation = ({
           value = dragOverride.value;
         } else if (frame !== null) {
           const interpolated = interpolateKeyframedStatus({
+            forceSpringAllowTail: null,
             frame,
             status
           });
@@ -5122,6 +5302,7 @@ var withInteractivitySchema = ({
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
+  trimBefore = 0,
   freeze,
   durationInFrames = Infinity,
   children,
@@ -5146,7 +5327,6 @@ var RegularSequenceRefForwardingFunction = ({
   const parentSequence = useContext17(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
-  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + from;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -5166,6 +5346,18 @@ var RegularSequenceRefForwardingFunction = ({
   if (!Number.isFinite(from)) {
     throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
   }
+  if (typeof trimBefore !== "number") {
+    throw new TypeError(`You passed to the "trimBefore" prop of your <Sequence> an argument of type ${typeof trimBefore}, but it must be a number.`);
+  }
+  if (trimBefore < 0) {
+    throw new TypeError(`The "trimBefore" prop of <Sequence /> must be greater than or equal to 0, but got ${trimBefore}.`);
+  }
+  if (Number.isNaN(trimBefore)) {
+    throw new TypeError('The "trimBefore" prop of <Sequence /> must be a real number, but it is NaN.');
+  }
+  if (!Number.isFinite(trimBefore)) {
+    throw new TypeError(`The "trimBefore" prop of <Sequence /> must be finite, but it is ${trimBefore}.`);
+  }
   if (typeof freeze !== "undefined" && freeze !== null) {
     if (typeof freeze !== "number") {
       throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
@@ -5179,7 +5371,9 @@ var RegularSequenceRefForwardingFunction = ({
   }
   const absoluteFrame = useTimelinePosition();
   const videoConfig = useVideoConfig();
-  const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
+  const effectiveRelativeFrom = from - trimBefore;
+  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + effectiveRelativeFrom;
+  const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
   const wrapperRefForOutline = useRef6(null);
@@ -5190,7 +5384,7 @@ var RegularSequenceRefForwardingFunction = ({
   const postmounting = useMemo14(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const currentSequenceStart = cumulatedFrom + from;
+  const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
   const parentSequenceStart = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
   const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
@@ -5199,7 +5393,7 @@ var RegularSequenceRefForwardingFunction = ({
     return {
       absoluteFrom,
       cumulatedFrom,
-      relativeFrom: from,
+      relativeFrom: effectiveRelativeFrom,
       cumulatedNegativeFrom,
       durationInFrames: actualDurationInFrames,
       parentFrom: parentSequence?.relativeFrom ?? 0,
@@ -5214,7 +5408,7 @@ var RegularSequenceRefForwardingFunction = ({
   }, [
     cumulatedFrom,
     absoluteFrom,
-    from,
+    effectiveRelativeFrom,
     actualDurationInFrames,
     parentSequence,
     id,
@@ -5236,6 +5430,7 @@ var RegularSequenceRefForwardingFunction = ({
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
+  const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
   const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
@@ -5254,6 +5449,7 @@ var RegularSequenceRefForwardingFunction = ({
           documentationLink: resolvedDocumentationLink,
           duration: actualDurationInFrames,
           from,
+          trimBefore: registeredTrimBefore,
           id,
           loopDisplay,
           nonce: nonce.get(),
@@ -5278,6 +5474,7 @@ var RegularSequenceRefForwardingFunction = ({
           doesVolumeChange: isMedia.data.doesVolumeChange,
           duration: actualDurationInFrames,
           from,
+          trimBefore: registeredTrimBefore,
           id,
           loopDisplay,
           nonce: nonce.get(),
@@ -5303,6 +5500,7 @@ var RegularSequenceRefForwardingFunction = ({
     }
     registerSequence({
       from,
+      trimBefore: registeredTrimBefore,
       duration: actualDurationInFrames,
       id,
       displayName: timelineClipName,
@@ -5336,6 +5534,8 @@ var RegularSequenceRefForwardingFunction = ({
     actualDurationInFrames,
     rootId,
     from,
+    trimBefore,
+    registeredTrimBefore,
     showInTimeline,
     nonce,
     loopDisplay,
@@ -6603,13 +6803,15 @@ var prefetch = (src, options) => {
     resolve = res;
     reject = rej;
   });
+  waitUntilDone.catch(() => {
+    return;
+  });
   const controller = new AbortController;
-  let canBeAborted = true;
+  let reader = null;
   fetch(srcWithoutHash, {
     signal: controller.signal,
     credentials: options?.credentials ?? undefined
   }).then((res) => {
-    canBeAborted = false;
     if (canceled) {
       return null;
     }
@@ -6625,15 +6827,16 @@ var prefetch = (src, options) => {
     if (!res.body) {
       throw new Error(`HTTP response of ${srcWithoutHash} has no body`);
     }
-    const reader = res.body.getReader();
+    const responseReader = res.body.getReader();
+    reader = responseReader;
     return getBlobFromReader({
-      reader,
+      reader: responseReader,
       contentType: options?.contentType ?? headerContentType ?? null,
       contentLength: res.headers.get("Content-Length") ? parseInt(res.headers.get("Content-Length"), 10) : null,
       onProgress: options?.onProgress
     });
   }).then((buf) => {
-    if (!buf) {
+    if (!buf || canceled) {
       return;
     }
     const actualBlob = options?.contentType ? new Blob([buf], { type: options.contentType }) : buf;
@@ -6681,12 +6884,18 @@ var prefetch = (src, options) => {
           return copy;
         });
       } else {
-        canceled = true;
-        if (canBeAborted) {
-          try {
-            controller.abort(new Error("free() called"));
-          } catch {}
+        if (canceled) {
+          return;
         }
+        canceled = true;
+        const cancellationError = new Error("free() called");
+        reject(cancellationError);
+        try {
+          controller.abort(cancellationError);
+        } catch {}
+        reader?.cancel(cancellationError).catch(() => {
+          return;
+        });
       }
     },
     waitUntilDone: () => {
@@ -7858,6 +8067,7 @@ var useMediaInTimeline = ({
       id,
       duration,
       from: 0,
+      trimBefore: null,
       parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
       documentationLink,
@@ -8720,11 +8930,11 @@ var useMediaTag = ({
   ]);
 };
 var MediaVolumeContext = createContext22({
-  mediaMuted: false,
+  playerMuted: false,
   mediaVolume: 1
 });
 var SetMediaVolumeContext = createContext22({
-  setMediaMuted: () => {
+  setPlayerMuted: () => {
     throw new Error("default");
   },
   setMediaVolume: () => {
@@ -8738,12 +8948,12 @@ var useMediaVolumeState = () => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
-var useMediaMutedState = () => {
-  const { mediaMuted } = useContext27(MediaVolumeContext);
-  const { setMediaMuted } = useContext27(SetMediaVolumeContext);
+var usePlayerMutedState = () => {
+  const { playerMuted } = useContext27(MediaVolumeContext);
+  const { setPlayerMuted } = useContext27(SetMediaVolumeContext);
   return useMemo26(() => {
-    return [mediaMuted, setMediaMuted];
-  }, [mediaMuted, setMediaMuted]);
+    return [playerMuted, setPlayerMuted];
+  }, [playerMuted, setPlayerMuted]);
 };
 var warnAboutTooHighVolume = (volume) => {
   if (volume >= 100) {
@@ -8789,7 +8999,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new Error("typecheck error");
   }
   const [mediaVolume] = useMediaVolumeState();
-  const [mediaMuted] = useMediaMutedState();
+  const [playerMuted] = usePlayerMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
@@ -8810,7 +9020,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   });
   const propsToPass = useMemo27(() => {
     return {
-      muted: muted || mediaMuted || userPreferredVolume <= 0,
+      muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
       loop: _remotionInternalNativeLoopPassed,
       crossOrigin: crossOriginValue,
@@ -8818,7 +9028,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     };
   }, [
     _remotionInternalNativeLoopPassed,
-    mediaMuted,
+    playerMuted,
     muted,
     nativeProps,
     preloadedSrc,
@@ -9066,6 +9276,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
   const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const propsWithFreeze = props;
   const {
     startFrom,
     endAt,
@@ -9076,14 +9287,18 @@ var AudioRefForwardingFunction = (props, ref) => {
     pauseWhenBuffering,
     showInTimeline,
     onError: onRemotionError,
+    freeze,
     ...otherProps
-  } = props;
-  const { loop, ...propsOtherThanLoop } = props;
+  } = propsWithFreeze;
+  const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
   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");
   }
+  if (typeof freeze !== "undefined") {
+    throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
+  }
   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.`);
@@ -9215,6 +9430,15 @@ var solidSchema = {
     description: "Height",
     hiddenFromList: false
   },
+  pixelDensity: {
+    type: "number",
+    min: 1,
+    max: 3,
+    step: 0.1,
+    default: 1,
+    description: "Pixel density",
+    hiddenFromList: false
+  },
   ...transformSchema
 };
 var SolidInner = ({
@@ -9331,6 +9555,7 @@ var SolidOuter = forwardRef8(({
   style,
   name,
   from,
+  trimBefore,
   freeze,
   hidden,
   showInTimeline,
@@ -9345,6 +9570,7 @@ var SolidOuter = forwardRef8(({
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
+    trimBefore,
     freeze,
     hidden,
     showInTimeline,
@@ -9411,6 +9637,10 @@ function resolveHtmlInCanvasPixelDensity(pixelDensity) {
   }
   return pixelDensity;
 }
+var isMissingPaintRecordError = (error2) => {
+  return error2 instanceof DOMException && error2.name === "InvalidStateError";
+};
+var missingPaintRecordMessage = "HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.";
 var resizeOffscreenCanvas = ({
   offscreen,
   width,
@@ -9454,6 +9684,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { isRendering } = useRemotionEnvironment();
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
@@ -9502,34 +9733,53 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const offscreen2d = offscreen.getContext("2d");
-      if (!offscreen2d) {
-        throw new Error("Failed to acquire 2D context for <HtmlInCanvas> offscreen canvas");
-      }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
-        initializedRef.current = true;
-        const initImage = placeholderCanvas.captureElementImage(element);
-        const currentOnInit = onInitRef.current;
-        if (currentOnInit) {
-          const cleanup = await currentOnInit({
-            canvas: offscreen,
-            element,
-            elementImage: initImage,
-            pixelDensity: resolvedPixelDensity
-          });
-          if (typeof cleanup !== "function") {
-            throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
-          }
-          if (unmountedRef.current) {
-            cleanup();
+        let initImage = null;
+        try {
+          initImage = placeholderCanvas.captureElementImage(element);
+        } catch (error2) {
+          if (isMissingPaintRecordError(error2) && !isRendering) {} else if (isMissingPaintRecordError(error2)) {
+            throw new Error(missingPaintRecordMessage);
           } else {
-            onInitCleanupRef.current = cleanup;
+            throw error2;
+          }
+        }
+        if (initImage) {
+          initializedRef.current = true;
+          const currentOnInit = onInitRef.current;
+          if (currentOnInit) {
+            const cleanup = await currentOnInit({
+              canvas: offscreen,
+              element,
+              elementImage: initImage,
+              pixelDensity: resolvedPixelDensity
+            });
+            if (typeof cleanup !== "function") {
+              throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
+            }
+            if (unmountedRef.current) {
+              cleanup();
+            } else {
+              onInitCleanupRef.current = cleanup;
+            }
           }
         }
       }
       const handler = onPaintRef.current ?? defaultOnPaint;
-      const elImage = placeholderCanvas.captureElementImage(element);
+      let elImage;
+      try {
+        elImage = placeholderCanvas.captureElementImage(element);
+      } catch (error2) {
+        if (isMissingPaintRecordError(error2) && !isRendering) {
+          continueRender2(handle);
+          return;
+        }
+        if (isMissingPaintRecordError(error2)) {
+          throw new Error(missingPaintRecordMessage);
+        }
+        throw error2;
+      }
       await handler({
         canvas: offscreen,
         element,
@@ -9554,7 +9804,8 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
-    resolvedPixelDensity
+    resolvedPixelDensity,
+    isRendering
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -9690,6 +9941,15 @@ var HtmlInCanvasInner = forwardRef9(({
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
   ...baseSchema,
+  pixelDensity: {
+    type: "number",
+    min: 1,
+    max: 3,
+    step: 0.1,
+    default: 1,
+    description: "Pixel density",
+    hiddenFromList: false
+  },
   ...transformSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
@@ -10007,6 +10267,7 @@ var CanvasImageInner = forwardRef10(({
   delayRenderTimeoutInMilliseconds,
   durationInFrames,
   from,
+  trimBefore,
   freeze,
   hidden,
   name,
@@ -10028,6 +10289,7 @@ var CanvasImageInner = forwardRef10(({
   return /* @__PURE__ */ jsx26(Sequence, {
     layout: "none",
     from: from ?? 0,
+    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
     freeze,
     hidden,
@@ -10264,6 +10526,7 @@ var NativeImgInner = ({
   showInTimeline,
   src,
   from,
+  trimBefore,
   durationInFrames,
   freeze,
   controls,
@@ -10276,6 +10539,7 @@ var NativeImgInner = ({
   return /* @__PURE__ */ jsx28(Sequence, {
     layout: "none",
     from: from ?? 0,
+    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
     freeze,
     _remotionInternalStack: stack,
@@ -10349,6 +10613,7 @@ var ImgInner = ({
   showInTimeline,
   src,
   from,
+  trimBefore,
   durationInFrames,
   freeze,
   controls,
@@ -10374,6 +10639,7 @@ var ImgInner = ({
       showInTimeline,
       src,
       from,
+      trimBefore,
       durationInFrames,
       freeze,
       controls,
@@ -10416,6 +10682,7 @@ var ImgInner = ({
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     from,
+    trimBefore,
     durationInFrames,
     freeze,
     hidden,
@@ -10438,7 +10705,8 @@ var Img = withInteractivitySchema({
 addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema
+  ...transformSchema,
+  ...textSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -10452,6 +10720,7 @@ var makeInteractiveElement = (tag, displayName) => {
     const {
       durationInFrames,
       from,
+      trimBefore,
       freeze,
       hidden,
       name,
@@ -10468,6 +10737,7 @@ var makeInteractiveElement = (tag, displayName) => {
     return /* @__PURE__ */ jsx29(Sequence, {
       layout: "none",
       from: from ?? 0,
+      trimBefore,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
@@ -10498,6 +10768,7 @@ var makeInteractiveElement = (tag, displayName) => {
 var Interactive = {
   baseSchema,
   transformSchema,
+  textSchema,
   premountSchema,
   sequenceSchema,
   withSchema: withInteractivitySchema,
@@ -11327,7 +11598,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
   const [mediaVolume] = useMediaVolumeState();
-  const [mediaMuted] = useMediaMutedState();
+  const [playerMuted] = usePlayerMutedState();
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
     volume,
@@ -11483,7 +11754,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   return /* @__PURE__ */ jsx34("video", {
     ...nativeProps,
     ref: videoRef,
-    muted: muted || mediaMuted || userPreferredVolume <= 0,
+    muted: muted || playerMuted || userPreferredVolume <= 0,
     playsInline: true,
     src: actualSrc,
     loop: _remotionInternalNativeLoopPassed,
@@ -11774,6 +12045,7 @@ var Internals = {
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  textSchema,
   transformSchema,
   premountSchema,
   flattenActiveSchema,
@@ -11783,7 +12055,7 @@ var Internals = {
   useVideo,
   getRoot,
   useMediaVolumeState,
-  useMediaMutedState,
+  usePlayerMutedState,
   useMediaInTimeline,
   useLazyComponent,
   truthy,
@@ -17272,6 +17544,7 @@ var RenderSvg = ({
   pixelDensity,
   durationInFrames,
   from,
+  trimBefore,
   freeze,
   hidden,
   name,
@@ -17381,6 +17654,7 @@ var RenderSvg = ({
   return /* @__PURE__ */ jsx44(Sequence, {
     layout: "none",
     from,
+    trimBefore,
     freeze,
     hidden,
     showInTimeline,
@@ -29248,7 +29522,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "50K",
+            content: "51K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29778,6 +30052,35 @@ function findRange2(input, inputRange) {
   return i - 1;
 }
 var defaultEasing2 = (num) => num;
+var shouldExtendRightForEasing2 = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment2 = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing2;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment2 = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction2(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing2(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber2 = ({
   input,
   inputRange,
@@ -29788,15 +30091,6 @@ var interpolateNumber2 = ({
     return outputRange[0];
   }
   const easingOption = options2?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing2;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
   if (options2?.extrapolateLeft !== undefined) {
     extrapolateLeft = options2.extrapolateLeft;
@@ -29807,11 +30101,41 @@ var interpolateNumber2 = ({
   }
   const posterizedInput = options2?.posterize === undefined ? input : Math.floor(input / options2.posterize) * options2.posterize;
   const range = findRange2(posterizedInput, inputRange);
-  return interpolateFunction2(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
+  const easing = resolveEasingForSegment2({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment2({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment2({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing2(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment2({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
 var interpolateString2 = ({
   input,
@@ -30164,6 +30488,13 @@ var fromField2 = {
   step: 1,
   hiddenFromList: true
 };
+var trimBeforeField2 = {
+  type: "number",
+  default: 0,
+  min: 0,
+  step: 1,
+  hiddenFromList: true
+};
 var freezeField2 = {
   type: "number",
   default: null,
@@ -30173,6 +30504,7 @@ var freezeField2 = {
 var baseSchema2 = {
   durationInFrames: durationInFramesField2,
   from: fromField2,
+  trimBefore: trimBeforeField2,
   freeze: freezeField2,
   hidden: hiddenField2,
   name: sequenceNameField2,
@@ -30192,6 +30524,7 @@ var sequenceSchema2 = {
 };
 var baseSchemaWithoutFrom2 = {
   durationInFrames: durationInFramesField2,
+  trimBefore: trimBeforeField2,
   freeze: freezeField2,
   hidden: hiddenField2,
   name: sequenceNameField2,
@@ -32380,7 +32713,7 @@ var renderDefaultVolumeSlider = (props) => {
 };
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
+  const [playerMuted, setPlayerMuted] = Internals.usePlayerMutedState();
   const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
   const [focused, setFocused] = useState62(false);
   const parentDivRef = useRef52(null);
@@ -32397,11 +32730,11 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const onClick = useCallback42(() => {
     if (isVolume0) {
       setMediaVolume(1);
-      setMediaMuted(false);
+      setPlayerMuted(false);
       return;
     }
-    setMediaMuted((mute) => !mute);
-  }, [isVolume0, setMediaMuted, setMediaVolume]);
+    setPlayerMuted((mute) => !mute);
+  }, [isVolume0, setPlayerMuted, setMediaVolume]);
   const parentDivStyle = useMemo410(() => {
     return {
       display: "inline-flex",
@@ -32439,10 +32772,10 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     });
   }, [onBlur, onClick, volumeContainer]);
   const muteButton = useMemo410(() => {
-    return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
-  }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
+    return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
+  }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
   const volumeSlider = useMemo410(() => {
-    return (focused || hover) && !mediaMuted && !Internals.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+    return (focused || hover) && !playerMuted && !Internals.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -32453,7 +32786,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     displayVerticalVolumeSlider,
     focused,
     hover,
-    mediaMuted,
+    playerMuted,
     mediaVolume,
     renderVolumeSlider,
     setMediaVolume
@@ -33326,11 +33659,11 @@ var PlayerUI = ({
   }, []);
   const player = usePlayer();
   const playerToggle = player.toggle;
-  const { mediaMuted, mediaVolume } = useContext52(Internals.MediaVolumeContext);
+  const { playerMuted, mediaVolume } = useContext52(Internals.MediaVolumeContext);
   useEffect122(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
-  const isMuted = mediaMuted || mediaVolume === 0;
+  const isMuted = playerMuted || mediaVolume === 0;
   useEffect122(() => {
     player.emitter.dispatchMuteChange({
       isMuted
@@ -33439,7 +33772,7 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext52(Internals.SetMediaVolumeContext);
+  const { setMediaVolume, setPlayerMuted } = useContext52(Internals.SetMediaVolumeContext);
   const [showBufferIndicator, setShowBufferState] = useState113(false);
   useEffect122(() => {
     let timeout = null;
@@ -33513,7 +33846,7 @@ var PlayerUI = ({
       requestFullscreen,
       exitFullscreen,
       getVolume: () => {
-        if (mediaMuted) {
+        if (playerMuted) {
           return 0;
         }
         return mediaVolume;
@@ -33532,10 +33865,10 @@ var PlayerUI = ({
       },
       isMuted: () => isMuted,
       mute: () => {
-        setMediaMuted(true);
+        setPlayerMuted(true);
       },
       unmute: () => {
-        setMediaMuted(false);
+        setPlayerMuted(false);
       },
       getScale: () => scale,
       pauseAndReturnToPlayStart: () => {
@@ -33547,12 +33880,12 @@ var PlayerUI = ({
     durationInFrames,
     exitFullscreen,
     loop,
-    mediaMuted,
+    playerMuted,
     isMuted,
     mediaVolume,
     player,
     requestFullscreen,
-    setMediaMuted,
+    setPlayerMuted,
     setMediaVolume,
     toggle,
     scale
@@ -33831,14 +34164,15 @@ var SharedPlayerContexts = ({
     fps,
     inputProps
   ]);
-  const [mediaMuted, setMediaMuted] = useState122(() => initiallyMuted);
+  const [playerMuted, setPlayerMuted] = useState122(() => initiallyMuted);
   const [mediaVolume, setMediaVolume] = useState122(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
   const mediaVolumeContextValue = useMemo132(() => {
     return {
-      mediaMuted,
+      playerMuted,
       mediaVolume
     };
-  }, [mediaMuted, mediaVolume]);
+  }, [playerMuted, mediaVolume]);
+  const shouldCreateAudioContext = audioEnabled && !playerMuted && mediaVolume > 0;
   const setMediaVolumeAndPersist = useCallback112((vol) => {
     setMediaVolume(vol);
     if (persistVolumeToStorage) {
@@ -33847,7 +34181,7 @@ var SharedPlayerContexts = ({
   }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
   const setMediaVolumeContextValue = useMemo132(() => {
     return {
-      setMediaMuted,
+      setPlayerMuted,
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
@@ -33888,7 +34222,7 @@ var SharedPlayerContexts = ({
                         children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
                           children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
                             audioLatencyHint,
-                            audioEnabled,
+                            audioEnabled: shouldCreateAudioContext,
                             previewSampleRate: sampleRate,
                             children: /* @__PURE__ */ jsx133(Internals.SharedAudioTagsContextProvider, {
                               numberOfAudioTags: numberOfSharedAudioTags,
@@ -35623,9 +35957,14 @@ class StaleWaiterError extends Error {
 var CONCURRENCY = 1;
 var waiters = [];
 var running = 0;
+var runningEntry = null;
 var processNext = () => {
   if (running >= CONCURRENCY) {
-    return;
+    if (runningEntry?.waiter.getPriority() === null) {
+      runningEntry.cancel();
+    } else {
+      return;
+    }
   }
   const staleWaiters = [];
   for (let i = waiters.length - 1;i >= 0; i--) {
@@ -35660,11 +35999,37 @@ var processNext = () => {
   }
   const [next] = waiters.splice(bestIndex, 1);
   running++;
+  let settled = false;
+  let cancelled = false;
+  const entry = {
+    waiter: next,
+    cancel: () => {
+      cancelled = true;
+      entry.settle();
+    },
+    settle: () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      running--;
+      if (runningEntry === entry) {
+        runningEntry = null;
+      }
+    }
+  };
+  runningEntry = entry;
   next.fn().then((value) => {
-    running--;
+    entry.settle();
+    if (cancelled) {
+      return;
+    }
     next.onDone(value, processNext);
   }, (err) => {
-    running--;
+    entry.settle();
+    if (cancelled) {
+      return;
+    }
     next.onError(err);
   });
 };
@@ -37376,7 +37741,7 @@ var {
   useUnsafeVideoConfig: useUnsafeVideoConfig2,
   Timeline,
   SharedAudioContext: SharedAudioContext2,
-  useMediaMutedState: useMediaMutedState2,
+  usePlayerMutedState: usePlayerMutedState2,
   useMediaVolumeState: useMediaVolumeState2,
   useFrameForVolumeProp: useFrameForVolumeProp2,
   evaluateVolume: evaluateVolume2,
@@ -37418,7 +37783,7 @@ var AudioForPreviewAssertedShowing = ({
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
   const sharedAudioContext = useContext212(SharedAudioContext2);
   const buffer = useBufferState();
-  const [mediaMuted] = useMediaMutedState2();
+  const [playerMuted] = usePlayerMutedState2();
   const [mediaVolume] = useMediaVolumeState2();
   const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior ?? "repeat");
   const userPreferredVolume = evaluateVolume2({
@@ -37445,7 +37810,7 @@ var AudioForPreviewAssertedShowing = ({
   if (!bufferingContext) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
+  const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
   const initialPlaying = useRef50(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef50(isPremounting);
@@ -38818,7 +39183,7 @@ var getFormatOrNullOrNetworkError = async (input) => {
     return null;
   }
 };
-var getSinks = async (src, credentials, requestInit) => {
+var getSinks = async (src, logLevel, credentials, requestInit) => {
   const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
   const input = new Input22({
     formats: ALL_FORMATS2,
@@ -38857,7 +39222,7 @@ var getSinks = async (src, credentials, requestInit) => {
     });
     const hasAlpha = startPacket?.sideData.alpha;
     if (hasAlpha && !canBrowserUseWebGl2()) {
-      return "cannot-decode-alpha";
+      Internals.Log.warn({ logLevel, tag: "@remotion/media" }, `WebGL2 is not available, using the non-fast CPU path to decode alpha for ${src}.`);
     }
     return {
       sampleSink
@@ -38940,7 +39305,7 @@ var getSink = (src, logLevel, credentials, requestInit) => {
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
-    promise = getSinks(src, credentials, normalizedRequestInit);
+    promise = getSinks(src, logLevel, credentials, normalizedRequestInit);
     sinkPromises[cacheKey] = promise;
   }
   return promise;
@@ -39898,7 +40263,7 @@ var {
   useUnsafeVideoConfig: useUnsafeVideoConfig22,
   Timeline: Timeline2,
   SharedAudioContext: SharedAudioContext22,
-  useMediaMutedState: useMediaMutedState22,
+  usePlayerMutedState: usePlayerMutedState22,
   useMediaVolumeState: useMediaVolumeState22,
   useFrameForVolumeProp: useFrameForVolumeProp22,
   evaluateVolume: evaluateVolume22,
@@ -39959,7 +40324,7 @@ var VideoForPreviewAssertedShowing = ({
   const fallbackVideoRef = useCallback40((video) => {
     refForOutline.current = video;
   }, [refForOutline]);
-  const [mediaMuted] = useMediaMutedState22();
+  const [playerMuted] = usePlayerMutedState22();
   const [mediaVolume] = useMediaVolumeState22();
   const volumePropFrame = useFrameForVolumeProp22(loopVolumeCurveBehavior);
   const userPreferredVolume = evaluateVolume22({
@@ -39988,7 +40353,7 @@ var VideoForPreviewAssertedShowing = ({
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
+  const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
   const initialPlaying = useRef213(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef213(isPremounting);
@@ -42200,7 +42565,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.481";
+var VERSION2 = "4.0.483";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -43527,7 +43892,7 @@ var turnSvgIntoDrawable = (svg) => {
   svg.style.marginBottom = "0";
   svg.style.fill = fill;
   svg.style.color = color;
-  const svgData = new XMLSerializer().serializeToString(svg);
+  const svgData = new XMLSerializer().serializeToString(svg).replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F]/g, "");
   svg.style.marginLeft = originalMarginLeft;
   svg.style.marginRight = originalMarginRight;
   svg.style.marginTop = originalMarginTop;
@@ -50393,7 +50758,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx167("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "50k"
+        children: "51k"
       })
     ]
   });