@remotion/player 3.1.1 → 3.1.4

package/dist/Player.d.ts

@@ -29,9 +29,11 @@ export declare type PlayerProps<T> = {
     numberOfSharedAudioTags?: number;
     playbackRate?: number;
     renderLoading?: RenderLoading;
+    moveToBeginningWhenEnded?: boolean;
+    className?: string;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
 declare module 'react' {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }

package/dist/Player.js

@@ -21,7 +21,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, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, ...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, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -179,9 +179,9 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), clickToPlay: typeof clickToPlay === 'boolean'
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                                             ? clickToPlay
-                                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate }) }) }) }) }) }) }) }) }));
+                                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined }) }) }) }) }) }) }) }) }));
 };
 exports.PlayerFn = PlayerFn;
 exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);

package/dist/PlayerControls.js

@@ -77,7 +77,9 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
     (0, react_1.useEffect)(() => {
         if (playButtonRef.current && spaceKeyToPlayOrPause) {
             // This switches focus to play button when player.playing flag changes
-            playButtonRef.current.focus();
+            playButtonRef.current.focus({
+                preventScroll: true,
+            });
         }
     }, [player.playing, spaceKeyToPlayOrPause]);
     (0, react_1.useEffect)(() => {

package/dist/PlayerUI.d.ts

@@ -25,5 +25,7 @@ declare const _default: (props: {
     errorFallback: ErrorFallback;
     playbackRate: number;
     renderLoading?: RenderLoading | undefined;
+    className: string | undefined;
+    moveToBeginningWhenEnded: boolean;
 } & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default _default;

package/dist/PlayerUI.js

@@ -42,7 +42,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, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, className, moveToBeginningWhenEnded, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -55,7 +55,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const [hasPausedToResume, setHasPausedToResume] = (0, react_1.useState)(false);
     const [shouldAutoplay, setShouldAutoPlay] = (0, react_1.useState)(autoPlay);
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(() => false);
-    (0, use_playback_1.usePlayback)({ loop, playbackRate });
+    (0, use_playback_1.usePlayback)({ loop, playbackRate, moveToBeginningWhenEnded });
     const player = (0, use_player_1.usePlayer)();
     (0, react_1.useEffect)(() => {
         if (hasPausedToResume && !player.playing) {
@@ -280,7 +280,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     }
     const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }) })) : null }) }), 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 })) : null] }));
     if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
-        return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, children: content }));
+        return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
     const loadingMarkup = renderLoading
         ? renderLoading({
@@ -288,6 +288,6 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             width: outerStyle.width,
         })
         : null;
-    return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, 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 }) }));
 };
 exports.default = (0, react_1.forwardRef)(PlayerUI);

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CallbackListener, EventTypes } from './event-emitter';
 import { PlayerEmitter } from './event-emitter';
 export { ErrorFallback, Player } from './Player';
@@ -23,9 +22,10 @@ export declare const PlayerInternals: {
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
     };
-    usePlayback: ({ loop, playbackRate, }: {
+    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, }: {
         loop: boolean;
         playbackRate: number;
+        moveToBeginningWhenEnded: boolean;
     }) => void;
     useElementSize: (ref: import("react").RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;

package/dist/use-playback.d.ts

@@ -1,4 +1,5 @@
-export declare const usePlayback: ({ loop, playbackRate, }: {
+export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, }: {
     loop: boolean;
     playbackRate: number;
+    moveToBeginningWhenEnded: boolean;
 }) => void;

package/dist/use-playback.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_next_frame_1 = require("./calculate-next-frame");
 const use_player_1 = require("./use-player");
-const usePlayback = ({ loop, playbackRate, }) => {
+const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, }) => {
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { playing, pause, emitter } = (0, use_player_1.usePlayer)();
@@ -46,7 +46,8 @@ const usePlayback = ({ loop, playbackRate, }) => {
                 shouldLoop: loop,
             });
             framesAdvanced += framesToAdvance;
-            if (nextFrame !== frameRef.current) {
+            if (nextFrame !== frameRef.current &&
+                (!hasEnded || moveToBeginningWhenEnded)) {
                 setFrame(nextFrame);
             }
             if (hasEnded) {
@@ -73,6 +74,7 @@ const usePlayback = ({ loop, playbackRate, }) => {
         playbackRate,
         inFrame,
         outFrame,
+        moveToBeginningWhenEnded,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "3.1.1",
+	"version": "3.1.4",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -28,7 +28,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.1.1"
+		"remotion": "3.1.4"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -63,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c48f9b57f744d40f9bf868c84b0f8e165ca5e679"
+	"gitHead": "cb662e72c635e5e70c5541d85e276ce2f4075099"
 }