@remotion/player 4.0.0-preload.17 → 4.0.0-reorg.27

package/dist/MediaVolumeSlider.js

@@ -88,6 +88,6 @@ const MediaVolumeSlider = () => {
         }
         setMediaMuted((mute) => !mute);
     }, [mediaVolume, setMediaMuted, setMediaVolume]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? (0, jsx_runtime_1.jsx)(icons_1.VolumeOffIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.VolumeOnIcon, {}, void 0) }, void 0), (focused || hover) && !mediaMuted ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: player_css_classname_1.VOLUME_SLIDER_INPUT_CSS_CLASSNAME, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume }, void 0)) : null] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? (0, jsx_runtime_1.jsx)(icons_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: player_css_classname_1.VOLUME_SLIDER_INPUT_CSS_CLASSNAME, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume })) : null] }));
 };
 exports.MediaVolumeSlider = MediaVolumeSlider;

package/dist/Player.d.ts

@@ -1,7 +1,8 @@
-import React, { ComponentType, MutableRefObject } from 'react';
-import { CompProps } from 'remotion';
-import { PlayerRef } from './player-methods';
-import { RenderLoading } from './PlayerUI';
+import type { ComponentType, MutableRefObject } from 'react';
+import React from 'react';
+import type { CompProps } from 'remotion';
+import type { PlayerRef } from './player-methods';
+import type { RenderLoading } from './PlayerUI';
 declare type PropsIfHasProps<Props> = {} extends Props ? {
     inputProps?: Props;
 } : {
@@ -28,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>) => React.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 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, 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)(() => {
@@ -59,7 +59,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     remotion_1.Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
     remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
     remotion_1.Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
-    remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component');
+    remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
     if (typeof controls !== 'boolean' && typeof controls !== 'undefined') {
         throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
     }
@@ -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.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'
-                                        ? clickToPlay
-                                        : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0));
+    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, className: className !== null && className !== void 0 ? className : undefined }) }) }) }) }) }) }) }) }));
 };
 exports.PlayerFn = PlayerFn;
 exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);

package/dist/PlayerControls.d.ts

@@ -1,5 +1,16 @@
-import React, { MouseEventHandler } from 'react';
-import { usePlayer } from './use-player';
+import type { MouseEventHandler } from 'react';
+import React from 'react';
+import type { usePlayer } from './use-player';
+declare global {
+    interface Document {
+        webkitFullscreenEnabled?: boolean;
+        webkitFullscreenElement?: Element;
+        webkitExitFullscreen?: Document['exitFullscreen'];
+    }
+    interface HTMLDivElement {
+        webkitRequestFullScreen: HTMLDivElement['requestFullscreen'];
+    }
+}
 export declare const Controls: React.FC<{
     fps: number;
     durationInFrames: number;

package/dist/PlayerControls.js

@@ -8,7 +8,6 @@ const format_time_1 = require("./format-time");
 const icons_1 = require("./icons");
 const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
 const PlayerSeekBar_1 = require("./PlayerSeekBar");
-const browser_supports_fullscreen_1 = require("./utils/browser-supports-fullscreen");
 const containerStyle = {
     boxSizing: 'border-box',
     position: 'absolute',
@@ -66,6 +65,7 @@ const timeLabel = {
 const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
+    const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
     const containerCss = (0, react_1.useMemo)(() => {
         // Hide if playing and mouse outside
         const shouldShow = hovered || !player.playing;
@@ -77,11 +77,19 @@ 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]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: player.playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}, void 0) }, void 0), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, {}, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: flex1 }, void 0), browser_supports_fullscreen_1.browserSupportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // Must be handled client-side to avoid SSR hydration mismatch
+        setSupportsFullscreen((_a = (typeof document !== 'undefined' &&
+            (document.fullscreenEnabled || document.webkitFullscreenEnabled))) !== null && _a !== void 0 ? _a : false);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: player.playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, {})] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }, void 0) }, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }, void 0), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames }, void 0)] }, void 0));
+                                : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames })] }));
 };
 exports.Controls = Controls;

package/dist/PlayerSeekBar.js

@@ -117,6 +117,6 @@ const PlayerSeekBar = ({ durationInFrames }) => {
             borderRadius: BAR_HEIGHT / 2,
         };
     }, [durationInFrames, frame]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: barBackground, children: (0, jsx_runtime_1.jsx)("div", { style: fillStyle }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: knobStyle }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: barBackground, children: (0, jsx_runtime_1.jsx)("div", { style: fillStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: knobStyle })] }));
 };
 exports.PlayerSeekBar = PlayerSeekBar;

package/dist/PlayerUI.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PlayerRef } from './player-methods';
+import type { PlayerRef } from './player-methods';
 export declare type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
@@ -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

@@ -1,7 +1,30 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const calculate_scale_1 = require("./calculate-scale");
 const error_boundary_1 = require("./error-boundary");
@@ -10,12 +33,16 @@ const PlayerControls_1 = require("./PlayerControls");
 const use_hover_state_1 = require("./use-hover-state");
 const use_playback_1 = require("./use-playback");
 const use_player_1 = require("./use-player");
-const browser_supports_fullscreen_1 = require("./utils/browser-supports-fullscreen");
 const calculate_player_size_1 = require("./utils/calculate-player-size");
 const is_node_1 = require("./utils/is-node");
 const use_click_prevention_on_double_click_1 = require("./utils/use-click-prevention-on-double-click");
 const use_element_size_1 = require("./utils/use-element-size");
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, }, ref) => {
+const reactVersion = react_1.default.version.split('.')[0];
+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, className, moveToBeginningWhenEnded, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -28,7 +55,13 @@ 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,
+        inFrame: null,
+        outFrame: null,
+    });
     const player = (0, use_player_1.usePlayer)();
     (0, react_1.useEffect)(() => {
         if (hasPausedToResume && !player.playing) {
@@ -64,7 +97,8 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         if (!allowFullscreen) {
             throw new Error('allowFullscreen is false');
         }
-        if (!browser_supports_fullscreen_1.browserSupportsFullscreen) {
+        const supportsFullScreen = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+        if (!supportsFullScreen) {
             throw new Error('Browser doesnt support fullscreen');
         }
         if (!container.current) {
@@ -250,10 +284,9 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     if (!config) {
         return null;
     }
-    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 : {}) }, 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
-    if (is_node_1.IS_NODE) {
-        return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, children: content }, void 0));
+    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, className: className, children: content }));
     }
     const loadingMarkup = renderLoading
         ? renderLoading({
@@ -261,6 +294,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 }, void 0) }, void 0));
+    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/calculate-scale.d.ts

@@ -1,5 +1,5 @@
-import { PreviewSize } from './utils/preview-size';
-import { Size } from './utils/use-element-size';
+import type { PreviewSize } from './utils/preview-size';
+import type { Size } from './utils/use-element-size';
 export declare const calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
     previewSize: PreviewSize;
     compositionWidth: number;

package/dist/emitter-context.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { PlayerEmitter } from './event-emitter';
+import type { PlayerEmitter } from './event-emitter';
 export declare const PlayerEventEmitterContext: React.Context<PlayerEmitter | undefined>;

package/dist/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
 }

package/dist/error-boundary.js

@@ -31,7 +31,7 @@ class ErrorBoundary extends react_1.default.Component {
             // You can render any custom fallback UI
             return ((0, jsx_runtime_1.jsx)("div", { style: errorStyle, children: this.props.errorFallback({
                     error: this.state.hasError,
-                }) }, void 0));
+                }) }));
         }
         return this.props.children;
     }

package/dist/icons.js

@@ -8,11 +8,11 @@ const rotate = {
     transform: `rotate(90deg)`,
 };
 const PlayIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }));
 };
 exports.PlayIcon = PlayIcon;
 const PauseIcon = () => {
-    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
 };
 exports.PauseIcon = PauseIcon;
 const FullscreenIcon = ({ minimized }) => {
@@ -25,26 +25,26 @@ const FullscreenIcon = ({ minimized }) => {
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
 				L ${inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${viewSize - out} ${inset}
 				L ${viewSize - middleInset} ${middleInset}
 				L ${viewSize - inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${out} ${viewSize - inset}
 				L ${middleInset} ${viewSize - middleInset}
 				L ${inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${viewSize - out} ${viewSize - inset}
 				L ${viewSize - middleInset} ${viewSize - middleInset}
 				L ${viewSize - inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0)] }, void 0));
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
 };
 exports.FullscreenIcon = FullscreenIcon;
 const VolumeOffIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }) }));
 };
 exports.VolumeOffIcon = VolumeOffIcon;
 const VolumeOnIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { CallbackListener, EventTypes, PlayerEmitter } from './event-emitter';
+import type { CallbackListener, EventTypes } from './event-emitter';
+import { PlayerEmitter } from './event-emitter';
 export { ErrorFallback, Player } from './Player';
 export { PlayerMethods, PlayerRef } from './player-methods';
 export type { RenderLoading } from './PlayerUI';
@@ -17,13 +18,17 @@ export declare const PlayerInternals: {
         playing: boolean;
         play: (e?: import("react").SyntheticEvent<Element, Event> | undefined) => void;
         pause: () => void;
+        pauseAndReturnToPlayStart: () => void;
         seek: (newFrame: number) => void;
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
     };
-    usePlayback: ({ loop, playbackRate, }: {
+    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
         loop: boolean;
         playbackRate: number;
+        moveToBeginningWhenEnded: boolean;
+        inFrame: number | null;
+        outFrame: number | null;
     }) => void;
     useElementSize: (ref: import("react").RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;

package/dist/player-methods.d.ts

@@ -1,5 +1,5 @@
-import { SyntheticEvent } from 'react';
-import { PlayerEmitter } from './event-emitter';
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
 export declare type PlayerMethods = {
     play: (e?: SyntheticEvent) => void;
     pause: () => void;

package/dist/test/test-utils.d.ts

@@ -1,6 +1,6 @@
-import { queries, RenderOptions } from '@testing-library/react';
-import { FC, ReactElement } from 'react';
+import type { queries, RenderOptions } from '@testing-library/react';
+import type { FC, ReactElement } from 'react';
 declare const HelloWorld: FC;
-declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions<typeof queries, HTMLElement, HTMLElement>, "queries"> | undefined) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
+declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
 export * from '@testing-library/react';
 export { customRender as render, HelloWorld };

package/dist/test/test-utils.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -14,14 +18,14 @@ exports.HelloWorld = exports.render = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
 const HelloWorld = () => {
-    return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" });
 };
 exports.HelloWorld = HelloWorld;
 const AllTheProviders = ({ children }) => {
     // overwriting console.error console does not gets poluted with all the errors
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     window.console.error = () => { };
-    return (0, jsx_runtime_1.jsx)("div", { children: children }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { children: children });
 };
 const customRender = (ui, options) => (0, react_1.render)(ui, { wrapper: AllTheProviders, ...options });
 exports.render = customRender;

package/dist/test/validate-prop.test.js

@@ -10,7 +10,7 @@ test('no compositionWidth should give errors', () => {
         // @ts-expect-error
         , { 
             // @ts-expect-error
-            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
@@ -20,7 +20,7 @@ test('no compositionHeight should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
-            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
@@ -30,7 +30,7 @@ test('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
-            fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
@@ -38,7 +38,7 @@ test('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
-            fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
@@ -48,7 +48,7 @@ test('No durationInFrames should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
             // @ts-expect-error
-            durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/The "durationInFrames" prop of the <Player\/> component must be a number, but you passed a value of type undefined/);
@@ -56,7 +56,7 @@ test('No durationInFrames should give errors', () => {
 });
 test('Invalid playbackRate should give error', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }, void 0));
+        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
     }
     catch (e) {
         expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
@@ -64,7 +64,7 @@ test('Invalid playbackRate should give error', () => {
 });
 test('playbackRate of 0 should not be possible', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }, void 0));
+        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
     }
     catch (e) {
         expect(e.message).toMatch(/A playback rate of 0 is not supported./);
@@ -74,14 +74,14 @@ test('playbackRate of wrong type should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, 
             // @ts-expect-error
-            playbackRate: 'hi' }, void 0));
+            playbackRate: 'hi' }));
     }
     catch (e) {
         expect(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
 test('playbackRate of undefined should be okay', () => {
-    (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+    (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     expect(true).toBe(true);
 });
 test('passing in <Composition /> instance should not be possible', () => {
@@ -93,21 +93,21 @@ test('passing in <Composition /> instance should not be possible', () => {
                 fps: 30,
                 durationInFrames: 500,
                 component: test_utils_1.HelloWorld,
-            } }, void 0));
+            } }));
     }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
 });
 test('passing in <Composition /> instance should not be possible', () => {
     expect(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
             // @ts-expect-error
-            component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }, void 0), controls: true, showVolumeControls: true, inputProps: {
+            component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
                 id: 'HelloWorld',
                 width: 500,
                 height: 400,
                 fps: 30,
                 durationInFrames: 500,
                 component: test_utils_1.HelloWorld,
-            } }, void 0));
+            } }));
     }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
 });
 test.each([
@@ -122,7 +122,7 @@ test.each([
     const props = {};
     props[a] = 'hey';
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }, void 0));
+        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
     }
     catch (e) {
         expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);

package/dist/use-playback.d.ts

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

package/dist/use-playback.js

@@ -5,12 +5,11 @@ 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, inFrame, outFrame, }) => {
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { playing, pause, emitter } = (0, use_player_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
     const lastTimeUpdateEvent = (0, react_1.useRef)(null);
@@ -46,7 +45,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 +73,7 @@ const usePlayback = ({ loop, playbackRate, }) => {
         playbackRate,
         inFrame,
         outFrame,
+        moveToBeginningWhenEnded,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {

package/dist/use-player.d.ts

@@ -1,14 +1,17 @@
-import { SyntheticEvent } from 'react';
-import { PlayerEmitter } from './event-emitter';
-export declare const usePlayer: () => {
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
+declare type UsePlayerMethods = {
     frameBack: (frames: number) => void;
     frameForward: (frames: number) => void;
     isLastFrame: boolean;
     emitter: PlayerEmitter;
     playing: boolean;
-    play: (e?: SyntheticEvent<Element, Event> | undefined) => void;
+    play: (e?: SyntheticEvent) => void;
     pause: () => void;
+    pauseAndReturnToPlayStart: () => void;
     seek: (newFrame: number) => void;
     getCurrentFrame: () => number;
     isPlaying: () => boolean;
 };
+export declare const usePlayer: () => UsePlayerMethods;
+export {};

package/dist/use-player.js

@@ -8,6 +8,7 @@ const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
+    const playStart = (0, react_1.useRef)(0);
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
@@ -46,6 +47,7 @@ const usePlayer = () => {
         audioAndVideoTags.current.forEach((a) => a.play());
         imperativePlaying.current = true;
         setPlaying(true);
+        playStart.current = frameRef.current;
         emitter.dispatchPlay();
     }, [
         imperativePlaying,
@@ -63,6 +65,14 @@ const usePlayer = () => {
             emitter.dispatchPause();
         }
     }, [emitter, imperativePlaying, setPlaying]);
+    const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setTimelinePosition(playStart.current);
+            setPlaying(false);
+            emitter.dispatchPause();
+        }
+    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
     const hasVideo = Boolean(video);
     const frameBack = (0, react_1.useCallback)((frames) => {
         if (!hasVideo) {
@@ -96,6 +106,7 @@ const usePlayer = () => {
             seek,
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
+            pauseAndReturnToPlayStart,
         };
     }, [
         emitter,
@@ -106,6 +117,7 @@ const usePlayer = () => {
         pause,
         play,
         playing,
+        pauseAndReturnToPlayStart,
         seek,
     ]);
     return returnValue;

package/dist/utils/calculate-player-size.d.ts

@@ -1,5 +1,5 @@
-import { StandardLonghandProperties } from 'csstype';
-import { Size } from './use-element-size';
+import type { StandardLonghandProperties } from 'csstype';
+import type { Size } from './use-element-size';
 export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
     currentSize: Size | null;
     width: StandardLonghandProperties['width'] | undefined;

package/dist/utils/use-cancellable-promises.d.ts

@@ -1,4 +1,4 @@
-import { CancellablePromise } from './cancellable-promise';
+import type { CancellablePromise } from './cancellable-promise';
 declare const useCancellablePromises: () => {
     appendPendingPromise: (promise: CancellablePromise) => void;
     removePendingPromise: (promise: CancellablePromise) => void;

package/dist/utils/use-click-prevention-on-double-click.d.ts

@@ -1,3 +1,3 @@
-import { SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
 declare const useClickPreventionOnDoubleClick: (onClick: (e: SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [(e: SyntheticEvent) => void, () => void];
 export { useClickPreventionOnDoubleClick };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "4.0.0-preload.17+14cd6033f",
+	"version": "4.0.0-reorg.27+4014eaff1",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -28,14 +28,14 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.0-preload.17+14cd6033f"
+		"remotion": "4.0.0-reorg.27+4014eaff1"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@jonny/eslint-config": "3.0.259",
+		"@jonny/eslint-config": "3.0.266",
 		"@testing-library/react": "13.1.1",
 		"@types/jest": "^27.4.0",
 		"@types/node": "^14.14.14",
@@ -49,7 +49,7 @@
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
 		"ts-jest": "^27.0.5",
-		"typescript": "^4.5.5",
+		"typescript": "^4.7.0",
 		"webpack": "5.72.0"
 	},
 	"keywords": [
@@ -63,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "14cd6033f4ad0fa75af142d54a4cd1a23aff3f21"
+	"gitHead": "4014eaff1494315139386236138584496ffc6654"
 }

package/dist/utils/browser-supports-fullscreen.d.ts

@@ -1,11 +0,0 @@
-declare global {
-    interface Document {
-        webkitFullscreenEnabled?: boolean;
-        webkitFullscreenElement?: Element;
-        webkitExitFullscreen?: Document['exitFullscreen'];
-    }
-    interface HTMLDivElement {
-        webkitRequestFullScreen: HTMLDivElement['requestFullscreen'];
-    }
-}
-export declare const browserSupportsFullscreen: boolean | undefined;

package/dist/utils/browser-supports-fullscreen.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.browserSupportsFullscreen = void 0;
-exports.browserSupportsFullscreen = typeof document !== 'undefined' &&
-    (document.fullscreenEnabled || document.webkitFullscreenEnabled);