remotion 4.0.497 → 4.0.498

package/dist/cjs/Img.js

@@ -16,6 +16,7 @@ const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
@@ -266,8 +267,9 @@ const getFitFromObjectFit = (style) => {
 const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
+    const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -282,7 +284,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", controls: controls, outlineRef: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", controls: controls, outlineRef: refForOutline, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

package/dist/cjs/audio/html5-audio.js

@@ -13,6 +13,7 @@ const prefetch_js_1 = require("../prefetch.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_video_config_js_1 = require("../use-video-config.js");
+const v5_flag_js_1 = require("../v5-flag.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
 const duration_state_js_1 = require("../video/duration-state.js");
@@ -27,6 +28,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const shouldPauseWhenBuffering = (0, v5_flag_js_1.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');
     }
@@ -82,7 +84,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     }
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({
         playbackRate: props.playbackRate,
@@ -92,9 +94,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx_runtime_1.jsx(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
-        // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
+    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, pauseWhenBuffering: shouldPauseWhenBuffering, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.

package/dist/cjs/no-react.d.ts

@@ -49,6 +49,7 @@ export declare const NoReactInternals: {
     ENABLE_V5_BREAKING_CHANGES: false;
     MIN_NODE_VERSION: number;
     MIN_BUN_VERSION: string;
+    MIN_ESLINT_VERSION: string;
     colorNames: {
         [key: string]: number;
     };

package/dist/cjs/no-react.js

@@ -44,8 +44,9 @@ exports.NoReactInternals = {
     getOffthreadVideoSource: offthread_video_source_1.getOffthreadVideoSource,
     getExpectedMediaFrameUncorrected: get_current_time_1.getExpectedMediaFrameUncorrected,
     ENABLE_V5_BREAKING_CHANGES: v5_flag_1.ENABLE_V5_BREAKING_CHANGES,
-    MIN_NODE_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? 18 : 16,
+    MIN_NODE_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? 22 : 16,
     MIN_BUN_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? '1.1.3' : '1.0.3',
+    MIN_ESLINT_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? '8.57.0' : '7.15.0',
     colorNames: interpolate_colors_1.colorNames,
     DATE_TOKEN: input_props_serialization_js_1.DATE_TOKEN,
     FILE_TOKEN: input_props_serialization_js_1.FILE_TOKEN,

package/dist/cjs/v5-flag.d.ts

@@ -1 +1,2 @@
 export declare const ENABLE_V5_BREAKING_CHANGES: false;
+export declare const resolveV5Default: (value: boolean | undefined) => boolean;

package/dist/cjs/v5-flag.js

@@ -1,4 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ENABLE_V5_BREAKING_CHANGES = void 0;
+exports.resolveV5Default = exports.ENABLE_V5_BREAKING_CHANGES = void 0;
 exports.ENABLE_V5_BREAKING_CHANGES = false;
+const resolveV5Default = (value) => {
+    return value !== null && value !== void 0 ? value : exports.ENABLE_V5_BREAKING_CHANGES;
+};
+exports.resolveV5Default = resolveV5Default;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.497";
+export declare const VERSION = "4.0.498";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.497';
+exports.VERSION = '4.0.498';

package/dist/cjs/video/OffthreadVideo.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
+const v5_flag_js_1 = require("../v5-flag.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
 const OffthreadVideoForRendering_js_1 = require("./OffthreadVideoForRendering.js");
@@ -15,6 +16,7 @@ const InnerOffthreadVideo = (props) => {
     // rest gets drilled down
     const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const shouldPauseWhenBuffering = (0, v5_flag_js_1.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');
     }
@@ -31,14 +33,14 @@ const InnerOffthreadVideo = (props) => {
     });
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, stack: undefined, startFrom: undefined, endAt: undefined }) }));
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, stack: undefined, startFrom: undefined, endAt: undefined }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment.isRendering) {
-        return (jsx_runtime_1.jsx(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, stack: undefined, startFrom: undefined, endAt: undefined }));
+        return (jsx_runtime_1.jsx(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, stack: undefined, startFrom: undefined, endAt: undefined }));
     }
     const { transparent, toneMapped, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
-    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview, _remotionInternalNativeLoopPassed: false }));
+    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: shouldPauseWhenBuffering, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview, _remotionInternalNativeLoopPassed: false }));
 };
 exports.InnerOffthreadVideo = InnerOffthreadVideo;
 /*
@@ -49,7 +51,7 @@ const OffthreadVideo = ({ src, acceptableTimeShiftInSeconds, allowAmplificationD
     if (imageFormat) {
         throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
     }
-    return (jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { acceptableTimeShiftInSeconds: acceptableTimeShiftInSeconds, allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : true, audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0, crossOrigin: crossOrigin, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat', muted: muted !== null && muted !== void 0 ? muted : false, name: name, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null, onError: onError, onVideoFrame: onVideoFrame, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : true, playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1, preservePitch: preservePitch, toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, src: src, stack: stack, startFrom: startFrom, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, endAt: endAt, style: style, toneMapped: toneMapped !== null && toneMapped !== void 0 ? toneMapped : true, transparent: transparent !== null && transparent !== void 0 ? transparent : false, trimAfter: trimAfter, trimBefore: trimBefore, useWebAudioApi: useWebAudioApi !== null && useWebAudioApi !== void 0 ? useWebAudioApi : false, volume: volume, ...props }));
+    return (jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { acceptableTimeShiftInSeconds: acceptableTimeShiftInSeconds, allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : true, audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0, crossOrigin: crossOrigin, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat', muted: muted !== null && muted !== void 0 ? muted : false, name: name, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null, onError: onError, onVideoFrame: onVideoFrame, pauseWhenBuffering: (0, v5_flag_js_1.resolveV5Default)(pauseWhenBuffering), playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1, preservePitch: preservePitch, toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, src: src, stack: stack, startFrom: startFrom, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, endAt: endAt, style: style, toneMapped: toneMapped !== null && toneMapped !== void 0 ? toneMapped : true, transparent: transparent !== null && transparent !== void 0 ? transparent : false, trimAfter: trimAfter, trimBefore: trimBefore, useWebAudioApi: useWebAudioApi !== null && useWebAudioApi !== void 0 ? useWebAudioApi : false, volume: volume, ...props }));
 };
 exports.OffthreadVideo = OffthreadVideo;
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.OffthreadVideo);

package/dist/cjs/video/html5-video.js

@@ -12,6 +12,7 @@ const prefetch_js_1 = require("../prefetch.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_video_config_js_1 = require("../use-video-config.js");
+const v5_flag_js_1 = require("../v5-flag.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
 const duration_state_js_1 = require("./duration-state.js");
@@ -23,6 +24,7 @@ const VideoForwardingFunction = (props, ref) => {
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const shouldPauseWhenBuffering = (0, v5_flag_js_1.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');
     }
@@ -61,7 +63,7 @@ const VideoForwardingFunction = (props, ref) => {
         typeof trimAfterValue !== 'undefined') {
         return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue === undefined
                 ? undefined
-                : trimAfterValue / ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, stack: stack }) }));
+                : trimAfterValue / ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, stack: stack }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({
         playbackRate: props.playbackRate,
@@ -71,9 +73,7 @@ const VideoForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx_runtime_1.jsx(VideoForRendering_js_1.VideoForRendering, { onDuration: onDuration, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, ...otherProps, ref: ref }));
     }
-    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, 
-        // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
+    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, pauseWhenBuffering: shouldPauseWhenBuffering, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
 };
 /**
  * @description Wraps the native `<video>` element to include video in your component that is synchronized with Remotion's time.

package/dist/esm/index.mjs

@@ -1310,7 +1310,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.497";
+var VERSION = "4.0.498";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2223,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 = ({
@@ -8978,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");
   }
@@ -9047,7 +9051,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       name,
       children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         ref
       })
@@ -9075,7 +9079,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     ref,
     onNativeError: onError,
     onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
@@ -10563,6 +10567,7 @@ var ImgInner = ({
   ...props2
 }) => {
   const refForOutline = useRef24(null);
+  const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
@@ -10586,7 +10591,7 @@ var ImgInner = ({
       className,
       style,
       id,
-      pauseWhenLoading,
+      pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
@@ -10615,7 +10620,7 @@ var ImgInner = ({
     className,
     style,
     id,
-    pauseWhenLoading,
+    pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -11970,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");
   }
@@ -11994,7 +12000,7 @@ var InnerOffthreadVideo = (props2) => {
       durationInFrames: trimAfterValue,
       name,
       children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        pauseWhenBuffering: shouldPauseWhenBuffering,
         ...otherProps,
         trimAfter: undefined,
         name: undefined,
@@ -12009,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,
@@ -12034,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,
@@ -12092,7 +12098,7 @@ var OffthreadVideo = ({
     onAutoPlayError: onAutoPlayError ?? null,
     onError,
     onVideoFrame,
-    pauseWhenBuffering: pauseWhenBuffering ?? true,
+    pauseWhenBuffering: resolveV5Default(pauseWhenBuffering),
     playbackRate: playbackRate ?? 1,
     preservePitch,
     toneFrequency: toneFrequency ?? 1,
@@ -13052,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");
   }
@@ -13110,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,
@@ -13136,7 +13143,7 @@ var VideoForwardingFunction = (props2, ref) => {
     ...otherProps,
     ref,
     onVideoFrame: onVideoFrame ?? null,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    pauseWhenBuffering: shouldPauseWhenBuffering,
     onDuration,
     _remotionInternalStack: stack ?? null,
     _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,

package/dist/esm/no-react.mjs

@@ -1587,8 +1587,9 @@ var NoReactInternals = {
   getOffthreadVideoSource,
   getExpectedMediaFrameUncorrected,
   ENABLE_V5_BREAKING_CHANGES,
-  MIN_NODE_VERSION: ENABLE_V5_BREAKING_CHANGES ? 18 : 16,
+  MIN_NODE_VERSION: ENABLE_V5_BREAKING_CHANGES ? 22 : 16,
   MIN_BUN_VERSION: ENABLE_V5_BREAKING_CHANGES ? "1.1.3" : "1.0.3",
+  MIN_ESLINT_VERSION: ENABLE_V5_BREAKING_CHANGES ? "8.57.0" : "7.15.0",
   colorNames,
   DATE_TOKEN,
   FILE_TOKEN,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.497";
+var VERSION = "4.0.498";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.497",
+	"version": "4.0.498",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.497",
+		"@remotion/eslint-config-internal": "4.0.498",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},