@remotion/player - npm Package Compare versions

Comparing version 4.0.270 to 4.0.271

dist/cjs/Player.d.ts

@@ -59,2 +59,3 @@ import type { ComponentType } from 'react';
     readonly logLevel?: LogLevel;
+    readonly noSuspense?: boolean;
     readonly acknowledgeRemotionLicense?: boolean;
@@ -61,0 +62,0 @@ } & CompProps<Props> & PropsIfHasProps<Schema, Props>;

dist/cjs/Player.js

@@ -26,3 +26,3 @@ "use strict";
 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') {
@@ -50,2 +50,3 @@ // eslint-disable-next-line react-hooks/rules-of-hooks
         componentName: 'Player',
+        noSuspense: Boolean(noSuspense),
     });
@@ -163,3 +164,3 @@ (0, validate_initial_frame_js_1.validateInitialFrame)({ initialFrame, durationInFrames });
                             ? 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) }) }) }) }) }));
 };
@@ -166,0 +167,0 @@ const forward = react_1.forwardRef;

dist/cjs/PlayerUI.d.ts

@@ -53,3 +53,4 @@ import React from 'react';
     readonly overrideInternalClassName: string | undefined;
+    readonly noSuspense: boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

dist/cjs/PlayerUI.js

@@ -44,3 +44,3 @@ "use strict";
 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;
@@ -429,3 +429,3 @@ const config = remotion_1.Internals.useUnsafeVideoConfig();
                     : 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 }));
@@ -432,0 +432,0 @@ }

dist/cjs/Thumbnail.d.ts

@@ -20,4 +20,5 @@ import type { CSSProperties } from 'react';
     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;

dist/cjs/Thumbnail.js

@@ -14,3 +14,3 @@ "use strict";
 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') {
@@ -46,2 +46,3 @@ // eslint-disable-next-line react-hooks/rules-of-hooks
         componentName: 'Thumbnail',
+        noSuspense: Boolean(noSuspense),
     });
@@ -52,3 +53,3 @@ const [emitter] = (0, react_1.useState)(() => new event_emitter_js_1.ThumbnailEmitter());
     }, [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) }) }) }) }));
 };
@@ -55,0 +56,0 @@ const forward = react_1.forwardRef;

dist/cjs/ThumbnailUI.d.ts

@@ -12,3 +12,4 @@ import React from 'react';
     readonly overrideInternalClassName: string | undefined;
+    readonly noSuspense: boolean;
 } & React.RefAttributes<ThumbnailMethods>>;
 export default _default;

dist/cjs/ThumbnailUI.js

@@ -41,3 +41,3 @@ "use strict";
 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;
@@ -117,3 +117,3 @@ const config = remotion_1.Internals.useUnsafeVideoConfig();
     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 }));
@@ -120,0 +120,0 @@ }

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

@@ -52,11 +52,23 @@ "use strict";
                 : 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,
+                    },
+                };
             });
@@ -63,0 +75,0 @@ });

package.json

@@ -6,3 +6,3 @@ {
   "name": "@remotion/player",
-  "version": "4.0.270",
+  "version": "4.0.271",
   "description": "React component for embedding a Remotion preview into your app",
@@ -32,3 +32,3 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "remotion": "4.0.270"
+    "remotion": "4.0.271"
   },
@@ -48,3 +48,3 @@ "peerDependencies": {
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.270"
+    "@remotion/eslint-config-internal": "4.0.271"
   },
@@ -51,0 +51,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

509559

0.31%

Lines of code

11206

0.3%

Dependency changes

• + Added

  remotion@4.0.271
  (transitive)

• - Removed

  remotion@4.0.270
  (transitive)

• Updated

  remotion@4.0.271