@remotion/promo-pages 4.0.497 → 4.0.499

package/dist/Homepage.js

@@ -2349,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.497";
+var VERSION = "4.0.499";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -3187,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,
@@ -9662,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");
   }
@@ -9731,7 +9735,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       name,
       children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         ref
       })
@@ -9759,7 +9763,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     ref,
     onNativeError: onError,
     onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
@@ -11166,6 +11170,7 @@ var ImgInner = ({
   ...props2
 }) => {
   const refForOutline = useRef24(null);
+  const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
@@ -11189,7 +11194,7 @@ var ImgInner = ({
       className,
       style,
       id,
-      pauseWhenLoading,
+      pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
@@ -11218,7 +11223,7 @@ var ImgInner = ({
     className,
     style,
     id,
-    pauseWhenLoading,
+    pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -12412,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");
   }
@@ -12436,7 +12442,7 @@ var InnerOffthreadVideo = (props2) => {
       durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         trimAfter: undefined,
         name: undefined,
@@ -12451,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,
@@ -12476,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,
@@ -12534,7 +12540,7 @@ var OffthreadVideo = ({
     onAutoPlayError: onAutoPlayError ?? null,
     onError,
     onVideoFrame,
-    pauseWhenBuffering: pauseWhenBuffering ?? true,
+    pauseWhenBuffering: resolveV5Default(pauseWhenBuffering),
     playbackRate: playbackRate ?? 1,
     preservePitch,
     toneFrequency: toneFrequency ?? 1,
@@ -13417,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");
   }
@@ -13475,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,
@@ -13501,7 +13508,7 @@ var VideoForwardingFunction = (props2, ref) => {
     ...otherProps,
     ref,
     onVideoFrame: onVideoFrame ?? null,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     onDuration,
     _remotionInternalStack: stack ?? null,
     _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,
@@ -30248,7 +30255,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "53K",
+            content: "54K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -31997,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,
@@ -37657,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);
@@ -37695,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") {
@@ -37719,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)
@@ -37776,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);
@@ -37794,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
@@ -37815,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 {
@@ -37837,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",
@@ -37868,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,
@@ -37977,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) {
@@ -37992,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;
@@ -38326,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,
@@ -43737,7 +43806,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.497";
+var VERSION2 = "4.0.499";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -47123,10 +47192,10 @@ var drawElement = async ({
   finishTransform();
   return {
     cleanupAfterChildren: () => {
+      finishOverflowHidden();
       finishFilter();
       finishOpacity();
       finishClipPath();
-      finishOverflowHidden();
     }
   };
 };
@@ -51120,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"
       })
     ]
   });

package/dist/design.js

@@ -5579,7 +5579,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.497";
+var VERSION = "4.0.499";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6417,6 +6417,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,
@@ -12892,6 +12895,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");
   }
@@ -12961,7 +12965,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       name,
       children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         ref
       })
@@ -12989,7 +12993,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     ref,
     onNativeError: onError,
     onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
@@ -14396,6 +14400,7 @@ var ImgInner = ({
   ...props2
 }) => {
   const refForOutline = useRef24(null);
+  const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
@@ -14419,7 +14424,7 @@ var ImgInner = ({
       className,
       style,
       id,
-      pauseWhenLoading,
+      pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
@@ -14448,7 +14453,7 @@ var ImgInner = ({
     className,
     style,
     id,
-    pauseWhenLoading,
+    pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -15642,6 +15647,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");
   }
@@ -15666,7 +15672,7 @@ var InnerOffthreadVideo = (props2) => {
       durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         trimAfter: undefined,
         name: undefined,
@@ -15681,7 +15687,7 @@ var InnerOffthreadVideo = (props2) => {
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
-      pauseWhenBuffering: pauseWhenBuffering ?? false,
+      pauseWhenBuffering: shouldPauseWhenBuffering,
       ...otherProps,
       trimAfter: undefined,
       name: undefined,
@@ -15706,7 +15712,7 @@ var InnerOffthreadVideo = (props2) => {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     showInTimeline: showInTimeline ?? true,
     onAutoPlayError: onAutoPlayError ?? undefined,
     onVideoFrame: onVideoFrame ?? null,
@@ -15764,7 +15770,7 @@ var OffthreadVideo = ({
     onAutoPlayError: onAutoPlayError ?? null,
     onError,
     onVideoFrame,
-    pauseWhenBuffering: pauseWhenBuffering ?? true,
+    pauseWhenBuffering: resolveV5Default(pauseWhenBuffering),
     playbackRate: playbackRate ?? 1,
     preservePitch,
     toneFrequency: toneFrequency ?? 1,
@@ -16647,6 +16653,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");
   }
@@ -16705,7 +16712,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,
@@ -16731,7 +16738,7 @@ var VideoForwardingFunction = (props2, ref) => {
     ...otherProps,
     ref,
     onVideoFrame: onVideoFrame ?? null,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     onDuration,
     _remotionInternalStack: stack ?? null,
     _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,

package/dist/experts.js

@@ -2349,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.497";
+var VERSION = "4.0.499";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -3187,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,
@@ -9662,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");
   }
@@ -9731,7 +9735,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       name,
       children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         ref
       })
@@ -9759,7 +9763,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     ref,
     onNativeError: onError,
     onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
@@ -11166,6 +11170,7 @@ var ImgInner = ({
   ...props2
 }) => {
   const refForOutline = useRef24(null);
+  const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
@@ -11189,7 +11194,7 @@ var ImgInner = ({
       className,
       style,
       id,
-      pauseWhenLoading,
+      pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
@@ -11218,7 +11223,7 @@ var ImgInner = ({
     className,
     style,
     id,
-    pauseWhenLoading,
+    pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -12412,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");
   }
@@ -12436,7 +12442,7 @@ var InnerOffthreadVideo = (props2) => {
       durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         trimAfter: undefined,
         name: undefined,
@@ -12451,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,
@@ -12476,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,
@@ -12534,7 +12540,7 @@ var OffthreadVideo = ({
     onAutoPlayError: onAutoPlayError ?? null,
     onError,
     onVideoFrame,
-    pauseWhenBuffering: pauseWhenBuffering ?? true,
+    pauseWhenBuffering: resolveV5Default(pauseWhenBuffering),
     playbackRate: playbackRate ?? 1,
     preservePitch,
     toneFrequency: toneFrequency ?? 1,
@@ -13417,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");
   }
@@ -13475,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,
@@ -13501,7 +13508,7 @@ var VideoForwardingFunction = (props2, ref) => {
     ...otherProps,
     ref,
     onVideoFrame: onVideoFrame ?? null,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     onDuration,
     _remotionInternalStack: stack ?? null,
     _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,