@remotion/player 4.0.270 → 4.0.271

package/dist/cjs/Player.d.ts

@@ -56,6 +56,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly browserMediaControlsBehavior?: BrowserMediaControlsBehavior;
     readonly overrideInternalClassName?: string;
     readonly logLevel?: LogLevel;
+    readonly noSuspense?: boolean;
     readonly acknowledgeRemotionLicense?: boolean;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;

package/dist/cjs/Player.js

@@ -23,7 +23,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', acknowledgeRemotionLicense, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -46,6 +46,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const component = remotion_1.Internals.useLazyComponent({
         compProps: componentProps,
         componentName: 'Player',
+        noSuspense: Boolean(noSuspense),
     });
     (0, validate_initial_frame_js_1.validateInitialFrame)({ initialFrame, durationInFrames });
     const [frame, setFrame] = (0, react_1.useState)(() => ({
@@ -158,7 +159,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }, [passedBrowserMediaControlsBehavior]);
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
-                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined }) }) }) }) }));
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/PlayerUI.d.ts

@@ -50,5 +50,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly overflowVisible: boolean;
     readonly browserMediaControlsBehavior: BrowserMediaControlsBehavior;
     readonly overrideInternalClassName: string | undefined;
+    readonly noSuspense: boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/cjs/PlayerUI.js

@@ -41,7 +41,7 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, overrideInternalClassName, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, overrideInternalClassName, noSuspense, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -425,7 +425,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
                                 }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }), (0, jsx_runtime_1.jsx)(license_blacklist_js_1.RenderWarningIfBlacklist, {})] }), shouldShowPoster && posterFillMode === 'player-size' ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, playing: player.playing, toggle: player.toggle, durationInFrames: config.durationInFrames, containerRef: container, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay
                     ? handlePointerDown
                     : undefined, renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider })) : null] }));
-    if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
+    if (noSuspense || (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense)) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));

package/dist/cjs/Thumbnail.d.ts

@@ -17,6 +17,7 @@ export type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<str
     readonly className?: string;
     readonly overrideInternalClassName?: string;
     readonly logLevel?: LogLevel;
+    readonly noSuspense?: boolean;
 };
 export type ThumbnailPropsWithoutZod<Props extends Record<string, unknown>> = ThumbnailProps<AnyZodObject, Props>;
 export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;

package/dist/cjs/Thumbnail.js

@@ -11,7 +11,7 @@ const emitter_context_js_1 = require("./emitter-context.js");
 const event_emitter_js_1 = require("./event-emitter.js");
 const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
 const ThumbnailUI_js_1 = __importDefault(require("./ThumbnailUI.js"));
-const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, overrideInternalClassName, logLevel = 'info', ...componentProps }, ref) => {
+const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, overrideInternalClassName, logLevel = 'info', noSuspense, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -42,12 +42,13 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const Component = remotion_1.Internals.useLazyComponent({
         compProps: componentProps,
         componentName: 'Thumbnail',
+        noSuspense: Boolean(noSuspense),
     });
     const [emitter] = (0, react_1.useState)(() => new event_emitter_js_1.ThumbnailEmitter());
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName, noSuspense: Boolean(noSuspense) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/ThumbnailUI.d.ts

@@ -9,5 +9,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly className: string | undefined;
     readonly overflowVisible: boolean;
     readonly overrideInternalClassName: string | undefined;
+    readonly noSuspense: boolean;
 } & React.RefAttributes<ThumbnailMethods>>;
 export default _default;

package/dist/cjs/ThumbnailUI.js

@@ -38,7 +38,7 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className, overflowVisible, overrideInternalClassName, }, ref) => {
+const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className, overflowVisible, noSuspense, overrideInternalClassName, }, ref) => {
     var _a, _b;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -113,7 +113,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
         return null;
     }
     const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: (0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName), children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScaleContext, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null }) }));
-    if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
+    if (noSuspense || (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense)) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));

package/dist/cjs/utils/use-element-size.js

@@ -49,15 +49,27 @@ const useElementSize = (ref, options) => {
             const height = options.shouldApplyCssTransforms
                 ? newSize[0].height
                 : newSize[0].height * (1 / probableCssParentScale);
-            setSize({
-                width,
-                height,
-                left: newSize[0].x,
-                top: newSize[0].y,
-                windowSize: {
-                    height: window.innerHeight,
-                    width: window.innerWidth,
-                },
+            setSize((prevState) => {
+                const isSame = prevState &&
+                    prevState.width === width &&
+                    prevState.height === height &&
+                    prevState.left === newSize[0].x &&
+                    prevState.top === newSize[0].y &&
+                    prevState.windowSize.height === window.innerHeight &&
+                    prevState.windowSize.width === window.innerWidth;
+                if (isSame) {
+                    return prevState;
+                }
+                return {
+                    width,
+                    height,
+                    left: newSize[0].x,
+                    top: newSize[0].y,
+                    windowSize: {
+                        height: window.innerHeight,
+                        width: window.innerWidth,
+                    },
+                };
             });
         });
     }, [options.shouldApplyCssTransforms]);

package/dist/esm/index.mjs

@@ -1058,15 +1058,21 @@ var useElementSize = (ref, options) => {
       const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
       const width = options.shouldApplyCssTransforms ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
       const height = options.shouldApplyCssTransforms ? newSize[0].height : newSize[0].height * (1 / probableCssParentScale);
-      setSize({
-        width,
-        height,
-        left: newSize[0].x,
-        top: newSize[0].y,
-        windowSize: {
-          height: window.innerHeight,
-          width: window.innerWidth
+      setSize((prevState) => {
+        const isSame = prevState && prevState.width === width && prevState.height === height && prevState.left === newSize[0].x && prevState.top === newSize[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
+        if (isSame) {
+          return prevState;
         }
+        return {
+          width,
+          height,
+          left: newSize[0].x,
+          top: newSize[0].y,
+          windowSize: {
+            height: window.innerHeight,
+            width: window.innerWidth
+          }
+        };
       });
     });
   }, [options.shouldApplyCssTransforms]);
@@ -2385,7 +2391,8 @@ var PlayerUI = ({
   hideControlsWhenPointerDoesntMove,
   overflowVisible,
   browserMediaControlsBehavior,
-  overrideInternalClassName
+  overrideInternalClassName,
+  noSuspense
 }, ref) => {
   const config = Internals11.useUnsafeVideoConfig();
   const video = Internals11.useVideo();
@@ -2804,7 +2811,7 @@ var PlayerUI = ({
       }) : null
     ]
   });
-  if (IS_NODE && !doesReactVersionSupportSuspense) {
+  if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense) {
     return /* @__PURE__ */ jsx12("div", {
       ref: container,
       style: outerStyle,
@@ -3132,6 +3139,7 @@ var PlayerFn = ({
   browserMediaControlsBehavior: passedBrowserMediaControlsBehavior,
   overrideInternalClassName,
   logLevel = "info",
+  noSuspense,
   acknowledgeRemotionLicense,
   ...componentProps
 }, ref) => {
@@ -3153,7 +3161,8 @@ var PlayerFn = ({
   useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
   const component = Internals15.useLazyComponent({
     compProps: componentProps,
-    componentName: "Player"
+    componentName: "Player",
+    noSuspense: Boolean(noSuspense)
   });
   validateInitialFrame({ initialFrame, durationInFrames });
   const [frame, setFrame] = useState13(() => ({
@@ -3305,7 +3314,8 @@ var PlayerFn = ({
             hideControlsWhenPointerDoesntMove,
             overflowVisible,
             browserMediaControlsBehavior,
-            overrideInternalClassName: overrideInternalClassName ?? undefined
+            overrideInternalClassName: overrideInternalClassName ?? undefined,
+            noSuspense: Boolean(noSuspense)
           })
         })
       })
@@ -3365,6 +3375,7 @@ var ThumbnailUI = ({
   renderLoading,
   className: className2,
   overflowVisible,
+  noSuspense,
   overrideInternalClassName
 }, ref) => {
   const config = Internals16.useUnsafeVideoConfig();
@@ -3454,7 +3465,7 @@ var ThumbnailUI = ({
       }) : null
     })
   });
-  if (IS_NODE && !doesReactVersionSupportSuspense2) {
+  if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense2) {
     return /* @__PURE__ */ jsx15("div", {
       ref: container,
       style: outerStyle,
@@ -3490,6 +3501,7 @@ var ThumbnailFn = ({
   overflowVisible = false,
   overrideInternalClassName,
   logLevel = "info",
+  noSuspense,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3520,7 +3532,8 @@ var ThumbnailFn = ({
   useImperativeHandle4(ref, () => rootRef.current, []);
   const Component = Internals17.useLazyComponent({
     compProps: componentProps,
-    componentName: "Thumbnail"
+    componentName: "Thumbnail",
+    noSuspense: Boolean(noSuspense)
   });
   const [emitter] = useState14(() => new ThumbnailEmitter);
   const passedInputProps = useMemo17(() => {
@@ -3547,7 +3560,8 @@ var ThumbnailFn = ({
           renderLoading,
           style: style2,
           overflowVisible,
-          overrideInternalClassName
+          overrideInternalClassName,
+          noSuspense: Boolean(noSuspense)
         })
       })
     })

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.270",
+  "version": "4.0.271",
   "description": "React component for embedding a Remotion preview into your app",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.270"
+    "remotion": "4.0.271"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -43,7 +43,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.270"
+    "@remotion/eslint-config-internal": "4.0.271"
   },
   "keywords": [
     "remotion",