@remotion/player - npm Package Compare versions

Comparing version 2.5.2 to 2.5.3

dist/event-emitter.d.ts

@@ -22,4 +22,4 @@ declare type SeekPayload = {
 };
-declare type EventTypes = keyof StateEventMap;
-declare type CallbackListener<T extends EventTypes> = (data: {
+export declare type EventTypes = keyof StateEventMap;
+export declare type CallbackListener<T extends EventTypes> = (data: {
     detail: StateEventMap[T];
@@ -26,0 +26,0 @@ }) => void;

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { PlayerEmitter } from './event-emitter';
+import { CallbackListener, EventTypes, PlayerEmitter } from './event-emitter';
 import { ErrorFallback } from './Player';
@@ -43,3 +43,3 @@ export { Player } from './Player';
 };
-export type { ErrorFallback };
+export type { ErrorFallback, CallbackListener, EventTypes };
 //# sourceMappingURL=index.d.ts.map

dist/Loading.js

@@ -6,3 +6,3 @@ "use strict";
 const Loading = ({ size }) => {
-    const triangle = (opacity, triangleSize) => (jsx_runtime_1.jsxs("svg", Object.assign({ xmlnsXlink: "http://www.w3.org/1999/xlink", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 400 400", style: {
+    const triangle = (opacity, triangleSize) => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ xmlnsXlink: "http://www.w3.org/1999/xlink", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 400 400", style: {
             opacity,
@@ -13,6 +13,4 @@ width: triangleSize,
             transform: 'rotate(90deg)',
-        } }, { children: [jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsxs("linearGradient", Object.assign({ id: "gradient" }, { children: [jsx_runtime_1.jsx("stop", { stopColor: "#42e9f5", stopOpacity: "1", offset: "0" }, void 0),
-                        jsx_runtime_1.jsx("stop", { stopColor: "#4290f5", stopOpacity: "1", offset: "100%" }, void 0)] }), void 0) }, void 0),
-            jsx_runtime_1.jsx("g", Object.assign({ stroke: 'url("#gradient")', strokeWidth: "100px", strokeLinejoin: "round" }, { children: jsx_runtime_1.jsx("path", { fill: 'url("#gradient")', d: "M 102 272 a 196 100 0 0 0 195 5 A 196 240 0 0 0 200 102.259 A 196 240 0 0 0 102 272 z", stroke: 'url("#gradient")', strokeWidth: "100px" }, void 0) }), void 0)] }), void 0));
-    return (jsx_runtime_1.jsxs("div", Object.assign({ style: {
+        } }, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", Object.assign({ id: "gradient" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#42e9f5", stopOpacity: "1", offset: "0" }, void 0), (0, jsx_runtime_1.jsx)("stop", { stopColor: "#4290f5", stopOpacity: "1", offset: "100%" }, void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", Object.assign({ stroke: 'url("#gradient")', strokeWidth: "100px", strokeLinejoin: "round" }, { children: (0, jsx_runtime_1.jsx)("path", { fill: 'url("#gradient")', d: "M 102 272 a 196 100 0 0 0 195 5 A 196 240 0 0 0 200 102.259 A 196 240 0 0 0 102 272 z", stroke: 'url("#gradient")', strokeWidth: "100px" }, void 0) }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
             display: 'flex',
@@ -19,0 +17,0 @@ justifyContent: 'center',

dist/PlayerUI.js

@@ -19,3 +19,3 @@ "use strict";
 const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, }, ref) => {
-    var _a, _b;
+    var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -86,2 +86,3 @@ const video = remotion_1.Internals.useVideo();
     }, []);
+    const durationInFrames = (_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1;
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -95,7 +96,13 @@ const methods = {
             seekTo: (f) => {
+                const lastFrame = durationInFrames - 1;
+                const frameToSeekTo = Math.max(0, Math.min(lastFrame, f));
                 if (player.isPlaying()) {
-                    setHasPausedToResume(true);
+                    const pauseToResume = frameToSeekTo !== lastFrame || loop;
+                    setHasPausedToResume(pauseToResume);
                     player.pause();
                 }
-                player.seek(f);
+                if (frameToSeekTo === lastFrame) {
+                    player.pause();
+                }
+                player.seek(frameToSeekTo);
             },
@@ -133,4 +140,6 @@ isFullscreen: () => isFullscreen,
     }, [
+        durationInFrames,
         exitFullscreen,
         isFullscreen,
+        loop,
         mediaMuted,
@@ -244,3 +253,3 @@ mediaVolume,
     }
-    const content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: container, style: outerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError, errorFallback: errorFallback }, { children: (0, jsx_runtime_1.jsx)(VideoComponent, Object.assign({}, ((_a = video === null || video === void 0 ? void 0 : video.props) !== null && _a !== void 0 ? _a : {}), ((_b = inputProps) !== null && _b !== void 0 ? _b : {})), void 0) }), void 0)) : null }), void 0) }), void 0), controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause }, void 0)) : null] }), void 0));
+    const content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: container, style: outerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError, errorFallback: errorFallback }, { children: (0, jsx_runtime_1.jsx)(VideoComponent, Object.assign({}, ((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ((_c = inputProps) !== null && _c !== void 0 ? _c : {})), void 0) }), void 0)) : null }), void 0) }), void 0), controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause }, void 0)) : null] }), void 0));
     // Don't render suspense on Node.js
@@ -247,0 +256,0 @@ if (is_node_1.IS_NODE) {

package.json

 {
 	"name": "@remotion/player",
-	"version": "2.5.2",
+	"version": "2.5.3",
 	"description": "Remotion Player",
@@ -27,3 +27,3 @@ "main": "dist/index.js",
 	"dependencies": {
-		"remotion": "^2.5.2"
+		"remotion": "^2.5.3"
 	},
@@ -53,3 +53,3 @@ "peerDependencies": {
 	},
-	"gitHead": "dbc7653555ce466c47054e1aa7103579d3b60fda"
+	"gitHead": "20ad1b623904cfd5ebefdfa47bcc298326f6ad23"
 }

No alert changes

Improved metrics

Total package byte prevSize

174542

increased by5.83%

Number of package files

151

increased by5.59%

Lines of code

2168

increased by5.7%

Dependency changes

• Updatedremotion@^2.5.3