@remotion/promo-pages 4.0.496 → 4.0.498

package/dist/Homepage.js

@@ -2349,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.496";
+var VERSION = "4.0.498";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2827,6 +2827,45 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var borderSchema = {
+  "style.borderWidth": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Border width",
+    hiddenFromList: false
+  },
+  "style.borderStyle": {
+    type: "enum",
+    default: "none",
+    description: "Border style",
+    variants: {
+      none: {},
+      hidden: {},
+      solid: {},
+      dashed: {},
+      dotted: {},
+      double: {},
+      groove: {},
+      ridge: {},
+      inset: {},
+      outset: {}
+    }
+  },
+  "style.borderColor": {
+    type: "color",
+    default: undefined,
+    description: "Border color"
+  }
+};
+var backgroundSchema = {
+  "style.backgroundColor": {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  }
+};
 var textContentSchema = {
   children: {
     type: "text-content",
@@ -2854,20 +2893,13 @@ var premountSchema = {
     keyframable: false
   }
 };
-var premountStyleSchema = {
-  styleWhilePremounted: {
-    type: "hidden"
-  },
-  styleWhilePostmounted: {
-    type: "hidden"
-  }
-};
 var sequencePremountSchema = {
-  ...premountSchema,
-  ...premountStyleSchema
+  ...premountSchema
 };
 var sequenceStyleSchema = {
   ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema,
   ...sequencePremountSchema
 };
 var hiddenField = {
@@ -3155,6 +3187,9 @@ var PremountContext = createContext15({
   premountFramesRemaining: 0
 });
 var ENABLE_V5_BREAKING_CHANGES = false;
+var resolveV5Default = (value) => {
+  return value ?? ENABLE_V5_BREAKING_CHANGES;
+};
 var usePremounting = ({
   from,
   durationInFrames,
@@ -6203,38 +6238,53 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   });
 };
 var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
-var CACHE_SIZE = 5;
-var getActualTime = ({
-  loopBehavior,
-  durationFound,
-  timeInSec
-}) => {
-  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
-};
-var decodeImage = async ({
+var createImageDecoder = async ({
   resolvedSrc,
   signal,
   requestInit,
-  currentTime,
-  initialLoopBehavior
+  contentType
 }) => {
   if (typeof ImageDecoder === "undefined") {
     throw new Error("Your browser does not support the WebCodecs ImageDecoder API.");
   }
-  const res = await fetch(resolvedSrc, { ...requestInit, signal });
-  const { body } = res;
+  const response = await fetch(resolvedSrc, { ...requestInit, signal });
+  const { body } = response;
   if (!body) {
     throw new Error("Got no body");
   }
   const decoder = new ImageDecoder({
     data: body,
-    type: res.headers.get("Content-Type") || "image/gif"
+    type: contentType ?? response.headers.get("Content-Type") ?? "image/gif"
   });
-  await decoder.completed;
+  await Promise.all([decoder.completed, decoder.tracks.ready]);
   const { selectedTrack } = decoder.tracks;
   if (!selectedTrack) {
+    decoder.close();
     throw new Error("No selected track");
   }
+  return { decoder, selectedTrack };
+};
+var CACHE_SIZE = 5;
+var getActualTime = ({
+  loopBehavior,
+  durationFound,
+  timeInSec
+}) => {
+  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
+};
+var decodeImage = async ({
+  resolvedSrc,
+  signal,
+  requestInit,
+  currentTime,
+  initialLoopBehavior
+}) => {
+  const { decoder, selectedTrack } = await createImageDecoder({
+    resolvedSrc,
+    signal,
+    requestInit,
+    contentType: null
+  });
   const cache2 = [];
   let durationFound = null;
   const getFrameByIndex = async (frameIndex) => {
@@ -6340,6 +6390,13 @@ var decodeImage = async ({
     return closest;
   };
   return {
+    close: () => {
+      for (const item of cache2) {
+        item.frame?.close();
+        item.frame = null;
+      }
+      decoder.close();
+    },
     getFrame,
     frameCount: selectedTrack.frameCount
   };
@@ -6377,6 +6434,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...premountSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -6387,7 +6445,9 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var getCanvasPropsFromSequenceProps = (props) => {
   const canvasProps = {};
@@ -6439,6 +6499,15 @@ var AnimatedImageContent = forwardRef4(({
   const [initialLoopBehavior] = useState6(() => loopBehavior);
   useEffect5(() => {
     const controller = new AbortController;
+    let cancelled = false;
+    let continued = false;
+    const continueRenderOnce = () => {
+      if (continued) {
+        return;
+      }
+      continued = true;
+      continueRender2(decodeHandle);
+    };
     decodeImage({
       resolvedSrc,
       signal: controller.signal,
@@ -6446,22 +6515,31 @@ var AnimatedImageContent = forwardRef4(({
       currentTime: currentTimeRef.current,
       initialLoopBehavior
     }).then((d) => {
+      if (cancelled) {
+        d.close();
+        return;
+      }
       setImageDecoder(d);
-      continueRender2(decodeHandle);
+      continueRenderOnce();
     }).catch((err) => {
+      if (cancelled) {
+        return;
+      }
       if (err.name === "AbortError") {
-        continueRender2(decodeHandle);
+        continueRenderOnce();
         return;
       }
       if (onError) {
         onError?.(err);
-        continueRender2(decodeHandle);
+        continueRenderOnce();
       } else {
         cancelRender(err);
       }
     });
     return () => {
+      cancelled = true;
       controller.abort();
+      continueRenderOnce();
     };
   }, [
     resolvedSrc,
@@ -6471,6 +6549,11 @@ var AnimatedImageContent = forwardRef4(({
     initialLoopBehavior,
     continueRender2
   ]);
+  useEffect5(() => {
+    return () => {
+      imageDecoder?.close();
+    };
+  }, [imageDecoder]);
   useLayoutEffect2(() => {
     if (!imageDecoder) {
       return;
@@ -6540,6 +6623,11 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   requestInit,
   effects = [],
   controls,
@@ -6551,6 +6639,24 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
   const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
@@ -6562,24 +6668,33 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style,
+    style: premountingStyle ?? undefined,
     requestInit,
     ...canvasProps
   };
-  return /* @__PURE__ */ jsx14(Sequence, {
-    layout: "none",
-    durationInFrames,
-    name: "<AnimatedImage>",
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    ...sequenceProps,
-    outlineRef: actualRef,
-    children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
-      ...animatedImageProps,
-      ref: actualRef,
-      effects,
-      controls
+  return /* @__PURE__ */ jsx14(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx14(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      name: "<AnimatedImage>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
+      controls,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      ...sequenceProps,
+      outlineRef: actualRef,
+      children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
+        ...animatedImageProps,
+        ref: actualRef,
+        effects,
+        controls
+      })
     })
   });
 };
@@ -7295,13 +7410,17 @@ var makeSharedElementSourceNode = ({
 }) => {
   let connected = null;
   let disposed = false;
+  let currentAudioContext = audioContext;
   return {
+    setAudioContext: (newAudioContext) => {
+      currentAudioContext = newAudioContext;
+    },
     attemptToConnect: () => {
       if (disposed) {
         throw new Error("SharedElementSourceNode has been disposed");
       }
-      if (!connected && ref.current) {
-        const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
+      if (!connected && ref.current && currentAudioContext) {
+        const mediaElementSourceNode = currentAudioContext.createMediaElementSource(ref.current);
         connected = mediaElementSourceNode;
       }
     },
@@ -7629,19 +7748,22 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audioCtx = useContext21(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo22(() => {
+  const [refs] = useState10(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
         id: Math.random(),
         ref,
-        mediaElementSourceNode: audioContext ? makeSharedElementSourceNode({
+        mediaElementSourceNode: makeSharedElementSourceNode({
           audioContext,
           ref
-        }) : null
+        })
       };
     });
-  }, [audioContext, numberOfAudioTags]);
+  });
+  for (const { mediaElementSourceNode } of refs) {
+    mediaElementSourceNode?.setAudioContext(audioContext);
+  }
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
@@ -7709,7 +7831,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
-      throw new TypeError("Error occured in ");
+      throw new TypeError(`Unknown audio ref ${id}; refs: ${refs.map((r) => r.id).join(", ")}`);
     }
     cloned[index] = false;
     takenAudios.current = cloned;
@@ -7813,10 +7935,10 @@ var useSharedAudio = ({
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React20.createRef();
-    const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
-      audioContext: audioCtx.audioContext,
+    const mediaElementSourceNode = makeSharedElementSourceNode({
+      audioContext: audioCtx?.audioContext ?? null,
       ref: el
-    }) : null;
+    });
     return {
       el,
       id: Math.random(),
@@ -7831,6 +7953,7 @@ var useSharedAudio = ({
       }
     };
   });
+  elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
@@ -9542,6 +9665,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
+  const shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);
   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");
   }
@@ -9611,7 +9735,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       name,
       children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         ref
       })
@@ -9639,7 +9763,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     ref,
     onNativeError: onError,
     onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
@@ -9688,7 +9812,9 @@ var solidSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var SolidInner = ({
   color,
@@ -10242,7 +10368,9 @@ var htmlInCanvasSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -10264,6 +10392,7 @@ function truncateSrcForLabel(src) {
 }
 var canvasImageSchema = {
   ...baseSchema,
+  ...premountSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -10274,7 +10403,9 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -10598,6 +10729,10 @@ var CanvasImageInner = forwardRef10(({
   from,
   trimBefore,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   hidden,
   name,
   showInTimeline,
@@ -10615,39 +10750,65 @@ var CanvasImageInner = forwardRef10(({
   useImperativeHandle7(ref, () => {
     return actualRef.current;
   }, []);
-  return /* @__PURE__ */ jsx26(Sequence, {
-    layout: "none",
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    showInTimeline: showInTimeline ?? true,
-    name: name ?? "<CanvasImage>",
-    _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    _remotionInternalIsMedia: { type: "image", src },
-    _remotionInternalStack: stack,
-    outlineRef: outlineRef ?? actualRef,
-    children: /* @__PURE__ */ jsx26(CanvasImageContent, {
-      ref: actualRef,
-      src,
-      width,
-      height,
-      fit,
-      effects,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
+  return /* @__PURE__ */ jsx26(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx26(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      showInTimeline: showInTimeline ?? true,
+      name: name ?? "<CanvasImage>",
+      _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
       controls,
-      className,
-      style,
-      id,
-      onError,
-      pauseWhenLoading,
-      maxRetries,
-      delayRenderRetries,
-      delayRenderTimeoutInMilliseconds,
-      refForOutline: outlineRef ?? null,
-      ...canvasProps
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalStack: stack,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      outlineRef: outlineRef ?? actualRef,
+      children: /* @__PURE__ */ jsx26(CanvasImageContent, {
+        ref: actualRef,
+        src,
+        width,
+        height,
+        fit,
+        effects,
+        controls,
+        className,
+        style: premountingStyle ?? undefined,
+        id,
+        onError,
+        pauseWhenLoading,
+        maxRetries,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        refForOutline: outlineRef ?? null,
+        ...canvasProps
+      })
     })
   });
 });
@@ -10864,6 +11025,11 @@ var NativeImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  style,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -10871,24 +11037,51 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  return /* @__PURE__ */ jsx28(Sequence, {
-    layout: "none",
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    _remotionInternalStack: stack,
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
-    _remotionInternalIsMedia: { type: "image", src },
-    name: name ?? "<Img>",
-    controls,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    outlineRef: refForOutline,
-    children: /* @__PURE__ */ jsx28(ImgContent, {
-      src,
-      refForOutline,
-      ...props2
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
+  return /* @__PURE__ */ jsx28(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx28(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
+      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      name: name ?? "<Img>",
+      controls,
+      showInTimeline: showInTimeline ?? true,
+      hidden,
+      outlineRef: refForOutline,
+      children: /* @__PURE__ */ jsx28(ImgContent, {
+        src,
+        refForOutline,
+        style: premountingStyle ?? undefined,
+        ...props2
+      })
     })
   });
 };
@@ -10901,7 +11094,10 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
-  ...transformSchema
+  ...premountSchema,
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -10957,6 +11153,10 @@ var ImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   width,
   height,
@@ -10970,6 +11170,7 @@ var ImgInner = ({
   ...props2
 }) => {
   const refForOutline = useRef24(null);
+  const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
@@ -10983,13 +11184,17 @@ var ImgInner = ({
       trimBefore,
       durationInFrames,
       freeze,
+      premountFor,
+      postmountFor,
+      styleWhilePremounted,
+      styleWhilePostmounted,
       controls,
       width,
       height,
       className,
       style,
       id,
-      pauseWhenLoading,
+      pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
@@ -11018,7 +11223,7 @@ var ImgInner = ({
     className,
     style,
     id,
-    pauseWhenLoading,
+    pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -11026,6 +11231,10 @@ var ImgInner = ({
     trimBefore,
     durationInFrames,
     freeze,
+    premountFor,
+    postmountFor,
+    styleWhilePremounted,
+    styleWhilePostmounted,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -11064,7 +11273,20 @@ var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema
 };
+var interactiveBackgroundElementSchema = {
+  ...interactiveElementSchema,
+  ...backgroundSchema
+};
+var interactiveBorderElementSchema = {
+  ...interactiveBackgroundElementSchema,
+  ...borderSchema
+};
 var interactiveTextElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...textSchema,
+  ...textContentSchema
+};
+var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
@@ -11143,6 +11365,8 @@ var Interactive = {
   baseSchema,
   transformSchema,
   textSchema,
+  backgroundSchema,
+  borderSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -11179,10 +11403,39 @@ var Interactive = {
   Small: makeInteractiveTextElement("small", "<Interactive.Small>"),
   Span: makeInteractiveTextElement("span", "<Interactive.Span>"),
   Strong: makeInteractiveTextElement("strong", "<Interactive.Strong>"),
-  Svg: makeInteractiveNonTextElement("svg", "<Interactive.Svg>"),
-  Text: makeInteractiveTextElement("text", "<Interactive.Text>"),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveBorderElementSchema),
+  Text: makeInteractiveElement("text", "<Interactive.Text>", interactiveSvgTextElementSchema),
   Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
+var getAnimatedImageDurationInSeconds = async ({
+  resolvedSrc,
+  signal,
+  requestInit,
+  contentType
+}) => {
+  const { decoder, selectedTrack } = await createImageDecoder({
+    resolvedSrc,
+    signal,
+    requestInit,
+    contentType
+  });
+  try {
+    const { image } = await decoder.decode({
+      frameIndex: selectedTrack.frameCount - 1,
+      completeFramesOnly: true
+    });
+    try {
+      if (image.duration === null) {
+        throw new Error("Could not determine animated image duration");
+      }
+      return (image.timestamp + image.duration) / 1e6;
+    } finally {
+      image.close();
+    }
+  } finally {
+    decoder.close();
+  }
+};
 var compositionsRef = React31.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -12164,6 +12417,7 @@ var InnerOffthreadVideo = (props2) => {
     ...otherProps
   } = props2;
   const environment = useRemotionEnvironment();
+  const shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
@@ -12188,7 +12442,7 @@ var InnerOffthreadVideo = (props2) => {
       durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         trimAfter: undefined,
         name: undefined,
@@ -12203,7 +12457,7 @@ var InnerOffthreadVideo = (props2) => {
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
-      pauseWhenBuffering: pauseWhenBuffering ?? false,
+      pauseWhenBuffering: shouldPauseWhenBuffering,
       ...otherProps,
       trimAfter: undefined,
       name: undefined,
@@ -12228,7 +12482,7 @@ var InnerOffthreadVideo = (props2) => {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     showInTimeline: showInTimeline ?? true,
     onAutoPlayError: onAutoPlayError ?? undefined,
     onVideoFrame: onVideoFrame ?? null,
@@ -12286,7 +12540,7 @@ var OffthreadVideo = ({
     onAutoPlayError: onAutoPlayError ?? null,
     onError,
     onVideoFrame,
-    pauseWhenBuffering: pauseWhenBuffering ?? true,
+    pauseWhenBuffering: resolveV5Default(pauseWhenBuffering),
     playbackRate: playbackRate ?? 1,
     preservePitch,
     toneFrequency: toneFrequency ?? 1,
@@ -12410,6 +12664,7 @@ var Internals = {
   useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
+  getAnimatedImageDurationInSeconds,
   getAssetDisplayName,
   Timeline: exports_timeline_position_state,
   validateMediaTrimProps,
@@ -12434,7 +12689,6 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
-  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -12573,6 +12827,7 @@ var seriesSequenceSchema = {
   hidden: Interactive.sequenceSchema.hidden,
   showInTimeline: Interactive.sequenceSchema.showInTimeline,
   freeze: Interactive.baseSchema.freeze,
+  trimBefore: Interactive.sequenceSchema.trimBefore,
   layout: Interactive.sequenceSchema.layout
 };
 var SeriesSequenceInner = forwardRef14(({
@@ -13168,6 +13423,7 @@ var VideoForwardingFunction = (props2, ref) => {
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
+  const shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
@@ -13226,7 +13482,7 @@ var VideoForwardingFunction = (props2, ref) => {
       durationInFrames: trimAfterValue === undefined ? undefined : trimAfterValue / (props2.playbackRate ?? 1),
       name,
       children: /* @__PURE__ */ jsx39(Html5Video, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         onVideoFrame,
         ...otherProps,
         ref,
@@ -13252,7 +13508,7 @@ var VideoForwardingFunction = (props2, ref) => {
     ...otherProps,
     ref,
     onVideoFrame: onVideoFrame ?? null,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     onDuration,
     _remotionInternalStack: stack ?? null,
     _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,
@@ -18194,7 +18450,9 @@ var makeShapeSchema = (shapeFields) => {
       defaultValue: "#0b84ff",
       description: "Fill"
     }),
-    ...Internals.transformSchema
+    ...Internals.transformSchema,
+    ...Interactive.backgroundSchema,
+    ...Interactive.borderSchema
   };
 };
 var arrowSchema = makeShapeSchema({
@@ -29997,7 +30255,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "53K",
+            content: "54K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -30950,6 +31208,45 @@ var transformSchema2 = {
     hiddenFromList: false
   }
 };
+var borderSchema2 = {
+  "style.borderWidth": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Border width",
+    hiddenFromList: false
+  },
+  "style.borderStyle": {
+    type: "enum",
+    default: "none",
+    description: "Border style",
+    variants: {
+      none: {},
+      hidden: {},
+      solid: {},
+      dashed: {},
+      dotted: {},
+      double: {},
+      groove: {},
+      ridge: {},
+      inset: {},
+      outset: {}
+    }
+  },
+  "style.borderColor": {
+    type: "color",
+    default: undefined,
+    description: "Border color"
+  }
+};
+var backgroundSchema2 = {
+  "style.backgroundColor": {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  }
+};
 var premountSchema2 = {
   premountFor: {
     type: "number",
@@ -30969,20 +31266,13 @@ var premountSchema2 = {
     keyframable: false
   }
 };
-var premountStyleSchema2 = {
-  styleWhilePremounted: {
-    type: "hidden"
-  },
-  styleWhilePostmounted: {
-    type: "hidden"
-  }
-};
 var sequencePremountSchema2 = {
-  ...premountSchema2,
-  ...premountStyleSchema2
+  ...premountSchema2
 };
 var sequenceStyleSchema2 = {
   ...transformSchema2,
+  ...backgroundSchema2,
+  ...borderSchema2,
   ...sequencePremountSchema2
 };
 var hiddenField2 = {
@@ -31714,8 +32004,9 @@ var NoReactInternals = {
   getOffthreadVideoSource: getOffthreadVideoSource2,
   getExpectedMediaFrameUncorrected: getExpectedMediaFrameUncorrected2,
   ENABLE_V5_BREAKING_CHANGES: ENABLE_V5_BREAKING_CHANGES2,
-  MIN_NODE_VERSION: ENABLE_V5_BREAKING_CHANGES2 ? 18 : 16,
+  MIN_NODE_VERSION: ENABLE_V5_BREAKING_CHANGES2 ? 22 : 16,
   MIN_BUN_VERSION: ENABLE_V5_BREAKING_CHANGES2 ? "1.1.3" : "1.0.3",
+  MIN_ESLINT_VERSION: ENABLE_V5_BREAKING_CHANGES2 ? "8.57.0" : "7.15.0",
   colorNames: colorNames2,
   DATE_TOKEN: DATE_TOKEN2,
   FILE_TOKEN: FILE_TOKEN2,
@@ -36542,6 +36833,10 @@ async function* makeLoopingIterator({
     passStartInSeconds = loopStartInSeconds;
   }
 }
+var MINIMUM_AUDIO_BUFFERING_TIME_SECONDS = 0.1;
+var hasEnoughAudioToStartPlayback = (bufferedDuration) => {
+  return bufferedDuration >= MINIMUM_AUDIO_BUFFERING_TIME_SECONDS;
+};
 var anchorToContinuousTime = ({
   anchor,
   unloopedTimeInSeconds,
@@ -36724,7 +37019,7 @@ var audioIteratorManager = ({
           onDone();
           return;
         }
-        onScheduled(result.value.timelineTimestamp);
+        onScheduled(result.value.sourceDurationInSeconds);
         notifyNodeScheduled();
         onAudioChunk({
           buffer: result.value,
@@ -36806,24 +37101,32 @@ var audioIteratorManager = ({
     });
     audioIteratorsCreated++;
     audioBufferIterator = iterator;
-    let chunksScheduled = 0;
+    let bufferedDuration = 0;
+    let hasUnblockedPlayback = false;
+    const unblockPlayback = () => {
+      if (hasUnblockedPlayback) {
+        return;
+      }
+      hasUnblockedPlayback = true;
+      delayHandle.unblock();
+    };
     proceedScheduling({
       iterator,
       nonce,
       getTargetTime,
       playbackRate,
       scheduleAudioNode,
-      onScheduled: () => {
-        chunksScheduled++;
-        if (chunksScheduled === 6) {
-          delayHandle.unblock();
+      onScheduled: (sourceDurationInSeconds) => {
+        bufferedDuration += sourceDurationInSeconds;
+        if (hasEnoughAudioToStartPlayback(bufferedDuration)) {
+          unblockPlayback();
         }
       },
       onDestroyed: () => {
-        delayHandle.unblock();
+        unblockPlayback();
       },
       onDone: () => {
-        delayHandle.unblock();
+        unblockPlayback();
       },
       logLevel,
       currentTime: sharedAudioContext.audioContext.currentTime,
@@ -37362,7 +37665,6 @@ var makePrewarmedVideoIteratorCache = (videoSink) => {
     destroy
   };
 };
-var MAXIMUM_AWAITED_PEEK_DISTANCE_SECONDS = 0.05;
 var createVideoIterator = async (timeToSeek, cache2) => {
   let destroyed = false;
   const iterator = cache2.makeIteratorOrUsePrewarmed(timeToSeek);
@@ -37400,22 +37702,12 @@ var createVideoIterator = async (timeToSeek, cache2) => {
       wait: next.wait
     };
   };
-  const peek = async () => {
-    const peeked = peekIfReady();
-    if (peeked.type === "ready") {
-      return peeked.frame;
-    }
-    return setPeekedFrame(await peeked.wait());
-  };
   const getFrameEndTimestampFromPeek = (frame) => {
     return frame ? roundTo4Digits(frame.timestamp) : Infinity;
   };
-  const getFrameEndTimestamp = async () => {
-    return getFrameEndTimestampFromPeek(await peek());
-  };
-  const getFrameEndTimestampIfCloseEnough = async ({
-    timestamp,
-    frameTimestamp
+  const getFrameEndTimestamp = async ({
+    pendingFrameBehavior,
+    shouldContinue
   }) => {
     const peeked = peekIfReady();
     if (peeked.type === "ready") {
@@ -37424,10 +37716,16 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         timestamp: getFrameEndTimestampFromPeek(peeked.frame)
       };
     }
-    if (timestamp - frameTimestamp > MAXIMUM_AWAITED_PEEK_DISTANCE_SECONDS) {
+    if (pendingFrameBehavior === "restart-iterator") {
       return { type: "pending" };
     }
+    if (!shouldContinue()) {
+      return { type: "cancelled" };
+    }
     const awaitedPeeked = setPeekedFrame(await peeked.wait());
+    if (!shouldContinue()) {
+      return { type: "cancelled" };
+    }
     return {
       type: "ready",
       timestamp: getFrameEndTimestampFromPeek(awaitedPeeked)
@@ -37481,7 +37779,13 @@ var createVideoIterator = async (timeToSeek, cache2) => {
       return;
     });
   };
-  const tryToSatisfySeek = async (time) => {
+  const tryToSatisfySeek = async (time, options2) => {
+    if (!options2.shouldContinue()) {
+      return {
+        type: "not-satisfied",
+        reason: "seek was superseded"
+      };
+    }
     const timestamp = roundTo4Digits(time);
     if (lastReturnedFrame) {
       const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
@@ -37499,8 +37803,23 @@ var createVideoIterator = async (timeToSeek, cache2) => {
           reason: `iterator is too far, most recently returned ${frameTimestamp}`
         };
       }
-      const frameEndTimestamp = await getFrameEndTimestamp();
-      if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
+      const frameEndTimestamp = await getFrameEndTimestamp({
+        pendingFrameBehavior: options2.pendingFrameBehavior,
+        shouldContinue: options2.shouldContinue
+      });
+      if (frameEndTimestamp.type === "cancelled") {
+        return {
+          type: "not-satisfied",
+          reason: "seek was superseded"
+        };
+      }
+      if (frameEndTimestamp.type === "pending") {
+        return {
+          type: "not-satisfied",
+          reason: "iterator did not have next frame ready"
+        };
+      }
+      if (frameTimestamp <= timestamp && frameEndTimestamp.timestamp > timestamp) {
         return {
           type: "satisfied",
           frame: lastReturnedFrame
@@ -37520,6 +37839,12 @@ var createVideoIterator = async (timeToSeek, cache2) => {
       };
     }
     while (true) {
+      if (!options2.shouldContinue()) {
+        return {
+          type: "not-satisfied",
+          reason: "seek was superseded"
+        };
+      }
       const frame = getNextOrNullIfNotAvailable();
       if (frame.type === "need-to-wait-for-it") {
         return {
@@ -37542,10 +37867,16 @@ var createVideoIterator = async (timeToSeek, cache2) => {
           };
         }
         const frameTimestamp = roundTo4Digits(frame.frame.timestamp);
-        const frameEndTimestamp = await getFrameEndTimestampIfCloseEnough({
-          frameTimestamp,
-          timestamp
+        const frameEndTimestamp = await getFrameEndTimestamp({
+          pendingFrameBehavior: options2.pendingFrameBehavior,
+          shouldContinue: options2.shouldContinue
         });
+        if (frameEndTimestamp.type === "cancelled") {
+          return {
+            type: "not-satisfied",
+            reason: "seek was superseded"
+          };
+        }
         if (frameEndTimestamp.type === "pending") {
           return {
             type: "not-satisfied",
@@ -37573,6 +37904,19 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   };
 };
 var { runEffectChain: runEffectChain2 } = Internals;
+var isSequentialMediaTimeAdvance = ({
+  previousTime,
+  newTime,
+  fps,
+  playbackRate,
+  isPlaying
+}) => {
+  if (!isPlaying || newTime < previousTime) {
+    return false;
+  }
+  const maximumSequentialAdvance = Math.abs(playbackRate) / fps;
+  return roundTo4Digits(newTime - previousTime) <= roundTo4Digits(maximumSequentialAdvance);
+};
 var videoIteratorManager = async ({
   delayPlaybackHandleIfNotPremounting,
   canvas,
@@ -37682,13 +38026,20 @@ var videoIteratorManager = async ({
       __callDispose(__stack, _err, _hasErr);
     }
   };
-  const seek2 = async ({ newTime, nonce }) => {
+  const seek2 = async ({
+    newTime,
+    nonce,
+    fps,
+    playbackRate,
+    isPlaying
+  }) => {
     if (!videoFrameIterator) {
       return;
     }
     if (currentSeek !== null && roundTo4Digits(currentSeek) === roundTo4Digits(newTime)) {
       return;
     }
+    const previousTime = currentSeek;
     currentSeek = newTime;
     if (getIsLooping()) {
       if (getLoopSegmentMediaEndTimestamp() - newTime < 1) {
@@ -37697,7 +38048,17 @@ var videoIteratorManager = async ({
         });
       }
     }
-    const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
+    const pendingFrameBehavior = previousTime !== null && isSequentialMediaTimeAdvance({
+      previousTime,
+      newTime,
+      fps,
+      playbackRate,
+      isPlaying
+    }) ? "wait" : "restart-iterator";
+    const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime, {
+      pendingFrameBehavior,
+      shouldContinue: () => !nonce.isStale()
+    });
     if (videoSatisfyResult.type === "satisfied") {
       await drawFrame(videoSatisfyResult.frame);
       return;
@@ -38031,7 +38392,10 @@ class MediaPlayer {
       await Promise.all([
         this.videoIteratorManager?.seek({
           newTime,
-          nonce
+          nonce,
+          fps: this.fps,
+          playbackRate: this.playbackRate,
+          isPlaying: this.playing
         }),
         this.audioIteratorManager?.seek({
           newTime,
@@ -41817,7 +42181,6 @@ var videoSchema = {
   },
   ...Internals.baseSchema,
   ...Internals.premountSchema,
-  ...Internals.premountStyleSchema,
   volume: {
     type: "number",
     min: 0,
@@ -41838,7 +42201,9 @@ var videoSchema = {
   },
   muted: { type: "boolean", default: false, description: "Muted" },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals.transformSchema
+  ...Internals.transformSchema,
+  ...Interactive.backgroundSchema,
+  ...Interactive.borderSchema
 };
 var InnerVideo = ({
   src,
@@ -43441,7 +43806,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.496";
+var VERSION2 = "4.0.498";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -45074,6 +45439,67 @@ var hasScaleCssValue = (style2) => {
 var hasAnyTransformCssValue = (style2) => {
   return hasTransformCssValue(style2) || hasRotateCssValue(style2) || hasScaleCssValue(style2);
 };
+var parseScaleComponent = (component) => {
+  if (component.endsWith("%")) {
+    return Number(component.slice(0, -1)) / 100;
+  }
+  return Number(component);
+};
+var parseScale = (transform) => {
+  const match = /^scale\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const scaleValue = match[1].trim();
+  if (scaleValue === "") {
+    return null;
+  }
+  const components = scaleValue.split(/\s+/).map(parseScaleComponent);
+  if (components.length < 1 || components.length > 3 || components.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return {
+    x: components[0],
+    y: components[1] ?? components[0],
+    z: components[2] ?? 1
+  };
+};
+var parseAxisRotate = (transform) => {
+  const match = /^rotate\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const rotateValue = match[1].trim();
+  const keywordAxis = /^(x|y|z)\s+(.+)$/i.exec(rotateValue);
+  if (keywordAxis) {
+    const axisKeyword = keywordAxis[1].toLowerCase();
+    const angle = keywordAxis[2];
+    const rotateFunction = axisKeyword === "x" ? "rotateX" : axisKeyword === "y" ? "rotateY" : "rotate";
+    return `${rotateFunction}(${angle})`;
+  }
+  const vectorAxis = /^(\S+)\s+(\S+)\s+(\S+)\s+(.+)$/.exec(rotateValue);
+  if (!vectorAxis) {
+    return null;
+  }
+  const axisVector = vectorAxis.slice(1, 4).map(Number);
+  if (axisVector.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return `rotate3d(${axisVector.join(", ")}, ${vectorAxis[4]})`;
+};
+var makeDOMMatrix = (transform) => {
+  if (transform) {
+    const scale = parseScale(transform);
+    if (scale) {
+      return new DOMMatrix().scale(scale.x, scale.y, scale.z);
+    }
+    const axisRotate = parseAxisRotate(transform);
+    if (axisRotate) {
+      return new DOMMatrix(axisRotate);
+    }
+  }
+  return new DOMMatrix(transform);
+};
 var isValidColor = (color) => {
   try {
     const result = NoReactInternals.processColor(color);
@@ -45471,15 +45897,15 @@ var calculateTransforms = ({
     const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle: transformStyle, element: parent }) && hasAnyTransformCssValue(transformStyle);
     if (hasApplicableTransformCssValue || parent === element) {
       const toParse = hasApplicableTransformCssValue && hasTransformCssValue(transformStyle) ? transformStyle.transform : undefined;
-      const matrix = new DOMMatrix(toParse);
+      const matrix = makeDOMMatrix(toParse);
       const resetTransforms = makeTransformResetter(parent);
       const { scale, rotate: rotate2 } = parent.style;
       const additionalMatrices = [];
       if (hasApplicableTransformCssValue && rotate2 !== "" && rotate2 !== "none") {
-        additionalMatrices.push(new DOMMatrix(`rotate(${rotate2})`));
+        additionalMatrices.push(makeDOMMatrix(`rotate(${rotate2})`));
       }
       if (hasApplicableTransformCssValue && scale !== "" && scale !== "none") {
-        additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+        additionalMatrices.push(makeDOMMatrix(`scale(${scale})`));
       }
       additionalMatrices.push(matrix);
       const cleanup = resetTransforms(hasApplicableTransformCssValue);
@@ -50763,7 +51189,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx134("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "53k"
+        children: "54k"
       })
     ]
   });