@remotion/player 4.0.0-fastlambda.7 → 4.0.0-forcepublish.6

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

@@ -13,7 +13,6 @@ const player_css_classname_1 = require("./player-css-classname");
 const PlayerUI_1 = __importDefault(require("./PlayerUI"));
 const validate_playbackrate_1 = require("./utils/validate-playbackrate");
 const volume_persistance_1 = require("./volume-persistance");
-remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
 const componentOrNullIfLazy = (props) => {
     if ('component' in props) {
         return props.component;
@@ -21,7 +20,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 +58,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 +178,13 @@ 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));
+    (0, react_1.useLayoutEffect)(() => {
+        // Inject CSS only on client, and also only after the Player has hydrated
+        remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
+    }, []);
+    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

@@ -34,6 +34,13 @@ const barBackground = {
     width: '100%',
     borderRadius: BAR_HEIGHT / 2,
 };
+const findBodyInWhichDivIsLocated = (div) => {
+    let current = div;
+    while (current.parentElement) {
+        current = current.parentElement;
+    }
+    return current;
+};
 const PlayerSeekBar = ({ durationInFrames }) => {
     const containerRef = (0, react_1.useRef)(null);
     const barHovered = (0, use_hover_state_1.useHoverState)(containerRef);
@@ -87,11 +94,12 @@ const PlayerSeekBar = ({ durationInFrames }) => {
         if (!dragging.dragging) {
             return;
         }
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
+        const body = findBodyInWhichDivIsLocated(containerRef.current);
+        body.addEventListener('pointermove', onPointerMove);
+        body.addEventListener('pointerup', onPointerUp);
         return () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
+            body.removeEventListener('pointermove', onPointerMove);
+            body.removeEventListener('pointerup', onPointerUp);
         };
     }, [dragging.dragging, onPointerMove, onPointerUp]);
     const knobStyle = (0, react_1.useMemo)(() => {
@@ -117,6 +125,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) {
@@ -85,6 +119,32 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             document.exitFullscreen();
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        const { current } = container;
+        if (!current) {
+            return;
+        }
+        const fullscreenChange = () => {
+            var _a;
+            const element = (_a = document.webkitFullscreenElement) !== null && _a !== void 0 ? _a : document.fullscreenElement;
+            if (element && element === container.current) {
+                player.emitter.dispatchFullscreenChangeUpdate({
+                    isFullscreen: true,
+                });
+            }
+            else {
+                player.emitter.dispatchFullscreenChangeUpdate({
+                    isFullscreen: false,
+                });
+            }
+        };
+        current.addEventListener('webkitfullscreenchange', fullscreenChange);
+        current.addEventListener('fullscreenchange', fullscreenChange);
+        return () => {
+            current.removeEventListener('webkitfullscreenchange', fullscreenChange);
+            current.removeEventListener('fullscreenchange', fullscreenChange);
+        };
+    }, [player.emitter]);
     const durationInFrames = (_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1;
     (0, react_1.useImperativeHandle)(ref, () => {
         const methods = {
@@ -250,10 +310,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 +320,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.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/event-emitter.d.ts

@@ -10,6 +10,9 @@ declare type TimeUpdateEventPayload = {
 declare type RateChangeEventPayload = {
     playbackRate: number;
 };
+declare type FullscreenChangeEventPayload = {
+    isFullscreen: boolean;
+};
 declare type StateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
@@ -18,6 +21,7 @@ declare type StateEventMap = {
     ended: undefined;
     error: ErrorPayload;
     timeupdate: TimeUpdateEventPayload;
+    fullscreenchange: FullscreenChangeEventPayload;
 };
 export declare type EventTypes = keyof StateEventMap;
 export declare type CallbackListener<T extends EventTypes> = (data: {
@@ -38,5 +42,6 @@ export declare class PlayerEmitter {
     dispatchRatechange(playbackRate: number): void;
     dispatchError(error: Error): void;
     dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
+    dispatchFullscreenChangeUpdate(event: FullscreenChangeEventPayload): void;
 }
 export {};

package/dist/event-emitter.js

@@ -11,6 +11,7 @@ class PlayerEmitter {
             ratechange: [],
             seeked: [],
             timeupdate: [],
+            fullscreenchange: [],
         };
     }
     addEventListener(name, callback) {
@@ -51,5 +52,8 @@ class PlayerEmitter {
     dispatchTimeUpdate(event) {
         this.dispatchEvent('timeupdate', event);
     }
+    dispatchFullscreenChangeUpdate(event) {
+        this.dispatchEvent('fullscreenchange', event);
+    }
 }
 exports.PlayerEmitter = PlayerEmitter;

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,4 +1,5 @@
-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';
@@ -12,17 +13,22 @@ export declare const PlayerInternals: {
         frameBack: (frames: number) => void;
         frameForward: (frames: number) => void;
         isLastFrame: boolean;
+        isFirstFrame: boolean;
         emitter: PlayerEmitter;
         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;