remotion 4.0.496 → 4.0.498

package/dist/esm/index.mjs

@@ -1310,7 +1310,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.496";
+var VERSION = "4.0.498";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1847,6 +1847,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",
@@ -1874,20 +1913,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 = {
@@ -2191,6 +2223,9 @@ var PremountContext = createContext15({
 
 // src/v5-flag.ts
 var ENABLE_V5_BREAKING_CHANGES = false;
+var resolveV5Default = (value) => {
+  return value ?? ENABLE_V5_BREAKING_CHANGES;
+};
 
 // src/use-premounting.ts
 var usePremounting = ({
@@ -5319,39 +5354,56 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
 };
 var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
 
-// src/animated-image/decode-image.ts
-var CACHE_SIZE = 5;
-var getActualTime = ({
-  loopBehavior,
-  durationFound,
-  timeInSec
-}) => {
-  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
-};
-var decodeImage = async ({
+// src/animated-image/create-image-decoder.ts
+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 };
+};
+
+// src/animated-image/decode-image.ts
+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) => {
@@ -5457,6 +5509,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
   };
@@ -5503,6 +5562,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...premountSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -5513,7 +5573,9 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var getCanvasPropsFromSequenceProps = (props) => {
   const canvasProps = {};
@@ -5565,6 +5627,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,
@@ -5572,22 +5643,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,
@@ -5597,6 +5677,11 @@ var AnimatedImageContent = forwardRef4(({
     initialLoopBehavior,
     continueRender2
   ]);
+  useEffect5(() => {
+    return () => {
+      imageDecoder?.close();
+    };
+  }, [imageDecoder]);
   useLayoutEffect2(() => {
     if (!imageDecoder) {
       return;
@@ -5666,6 +5751,11 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   requestInit,
   effects = [],
   controls,
@@ -5677,6 +5767,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,
@@ -5688,24 +5796,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
+      })
     })
   });
 };
@@ -6504,13 +6621,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;
       }
     },
@@ -6846,19 +6967,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 () => {
@@ -6926,7 +7050,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;
@@ -7030,10 +7154,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(),
@@ -7048,6 +7172,7 @@ var useSharedAudio = ({
       }
     };
   });
+  elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
@@ -8856,6 +8981,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");
   }
@@ -8925,7 +9051,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       name,
       children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         ref
       })
@@ -8953,7 +9079,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     ref,
     onNativeError: onError,
     onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
@@ -9013,7 +9139,9 @@ var solidSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var SolidInner = ({
   color,
@@ -9578,7 +9706,9 @@ var htmlInCanvasSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -9616,6 +9746,7 @@ function truncateSrcForLabel(src) {
 import { jsx as jsx26 } from "react/jsx-runtime";
 var canvasImageSchema = {
   ...baseSchema,
+  ...premountSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -9626,7 +9757,9 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -9950,6 +10083,10 @@ var CanvasImageInner = forwardRef10(({
   from,
   trimBefore,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   hidden,
   name,
   showInTimeline,
@@ -9967,39 +10104,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
+      })
     })
   });
 });
@@ -10259,6 +10422,11 @@ var NativeImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  style,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -10266,24 +10434,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
+      })
     })
   });
 };
@@ -10296,7 +10491,10 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
-  ...transformSchema
+  ...premountSchema,
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -10352,6 +10550,10 @@ var ImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   width,
   height,
@@ -10365,6 +10567,7 @@ var ImgInner = ({
   ...props2
 }) => {
   const refForOutline = useRef24(null);
+  const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
@@ -10378,13 +10581,17 @@ var ImgInner = ({
       trimBefore,
       durationInFrames,
       freeze,
+      premountFor,
+      postmountFor,
+      styleWhilePremounted,
+      styleWhilePostmounted,
       controls,
       width,
       height,
       className,
       style,
       id,
-      pauseWhenLoading,
+      pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
@@ -10413,7 +10620,7 @@ var ImgInner = ({
     className,
     style,
     id,
-    pauseWhenLoading,
+    pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -10421,6 +10628,10 @@ var ImgInner = ({
     trimBefore,
     durationInFrames,
     freeze,
+    premountFor,
+    postmountFor,
+    styleWhilePremounted,
+    styleWhilePostmounted,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -10462,7 +10673,20 @@ var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema
 };
+var interactiveBackgroundElementSchema = {
+  ...interactiveElementSchema,
+  ...backgroundSchema
+};
+var interactiveBorderElementSchema = {
+  ...interactiveBackgroundElementSchema,
+  ...borderSchema
+};
 var interactiveTextElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...textSchema,
+  ...textContentSchema
+};
+var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
@@ -10541,6 +10765,8 @@ var Interactive = {
   baseSchema,
   transformSchema,
   textSchema,
+  backgroundSchema,
+  borderSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -10577,13 +10803,44 @@ 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>")
 };
 // src/internals.ts
 import { createRef as createRef3 } from "react";
 
+// src/animated-image/get-duration-in-seconds.ts
+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();
+  }
+};
+
 // src/CompositionManager.tsx
 import React31 from "react";
 var compositionsRef = React31.createRef();
@@ -11718,6 +11975,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");
   }
@@ -11742,7 +12000,7 @@ var InnerOffthreadVideo = (props2) => {
       durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         trimAfter: undefined,
         name: undefined,
@@ -11757,7 +12015,7 @@ var InnerOffthreadVideo = (props2) => {
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
-      pauseWhenBuffering: pauseWhenBuffering ?? false,
+      pauseWhenBuffering: shouldPauseWhenBuffering,
       ...otherProps,
       trimAfter: undefined,
       name: undefined,
@@ -11782,7 +12040,7 @@ var InnerOffthreadVideo = (props2) => {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     showInTimeline: showInTimeline ?? true,
     onAutoPlayError: onAutoPlayError ?? undefined,
     onVideoFrame: onVideoFrame ?? null,
@@ -11840,7 +12098,7 @@ var OffthreadVideo = ({
     onAutoPlayError: onAutoPlayError ?? null,
     onError,
     onVideoFrame,
-    pauseWhenBuffering: pauseWhenBuffering ?? true,
+    pauseWhenBuffering: resolveV5Default(pauseWhenBuffering),
     playbackRate: playbackRate ?? 1,
     preservePitch,
     toneFrequency: toneFrequency ?? 1,
@@ -12006,6 +12264,7 @@ var Internals = {
   useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
+  getAnimatedImageDurationInSeconds,
   getAssetDisplayName,
   Timeline: exports_timeline_position_state,
   validateMediaTrimProps,
@@ -12030,7 +12289,6 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
-  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -12180,6 +12438,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(({
@@ -12799,6 +13058,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");
   }
@@ -12857,7 +13117,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,
@@ -12883,7 +13143,7 @@ var VideoForwardingFunction = (props2, ref) => {
     ...otherProps,
     ref,
     onVideoFrame: onVideoFrame ?? null,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     onDuration,
     _remotionInternalStack: stack ?? null,
     _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,