@remotion/player 3.2.12-crf.7 → 3.2.14

package/dist/Player.d.ts

@@ -2,7 +2,7 @@ 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';
+import type { RenderLoading, RenderPoster } from './PlayerUI';
 declare type PropsIfHasProps<Props> = {} extends Props ? {
     inputProps?: Props;
 } : {
@@ -31,9 +31,14 @@ export declare type PlayerProps<T> = {
     renderLoading?: RenderLoading;
     moveToBeginningWhenEnded?: boolean;
     className?: string;
+    initialFrame?: number;
+    renderPoster?: RenderPoster;
+    showPosterWhenPaused?: boolean;
+    showPosterWhenEnded?: boolean;
+    showPosterWhenUnplayed?: boolean;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, ...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

@@ -11,6 +11,7 @@ const emitter_context_1 = require("./emitter-context");
 const event_emitter_1 = require("./event-emitter");
 const player_css_classname_1 = require("./player-css-classname");
 const PlayerUI_1 = __importDefault(require("./PlayerUI"));
+const validate_initial_frame_1 = require("./utils/validate-initial-frame");
 const validate_playbackrate_1 = require("./utils/validate-playbackrate");
 const volume_persistance_1 = require("./volume-persistance");
 const componentOrNullIfLazy = (props) => {
@@ -20,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, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -40,7 +41,8 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
     }
     const component = remotion_1.Internals.useLazyComponent(componentProps);
-    const [frame, setFrame] = (0, react_1.useState)(0);
+    (0, validate_initial_frame_1.validateInitialFrame)({ initialFrame, durationInFrames });
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const [rootId] = (0, react_1.useState)('player-comp');
     const [emitter] = (0, react_1.useState)(() => new event_emitter_1.PlayerEmitter());
@@ -180,13 +182,16 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    (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'));
-    }, []);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (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 }) }) }) }) }) }) }) }) }));
+                                            : 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, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster }) }) }) }) }) }) }) }) }));
 };
 exports.PlayerFn = PlayerFn;
 exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);

package/dist/PlayerControls.d.ts

@@ -22,4 +22,6 @@ export declare const Controls: React.FC<{
     allowFullscreen: boolean;
     onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
     spaceKeyToPlayOrPause: boolean;
+    onSeekEnd: () => void;
+    onSeekStart: () => void;
 }>;

package/dist/PlayerControls.js

@@ -62,7 +62,7 @@ const timeLabel = {
     fontFamily: 'sans-serif',
     fontSize: 14,
 };
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
@@ -90,6 +90,6 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
     }, []);
     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 }) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames })] }));
+                                : 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, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames })] }));
 };
 exports.Controls = Controls;

package/dist/PlayerSeekBar.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 export declare const PlayerSeekBar: React.FC<{
     durationInFrames: number;
+    onSeekStart: () => void;
+    onSeekEnd: () => void;
 }>;

package/dist/PlayerSeekBar.js

@@ -41,7 +41,7 @@ const findBodyInWhichDivIsLocated = (div) => {
     }
     return current;
 };
-const PlayerSeekBar = ({ durationInFrames }) => {
+const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart }) => {
     const containerRef = (0, react_1.useRef)(null);
     const barHovered = (0, use_hover_state_1.useHoverState)(containerRef);
     const size = (0, use_element_size_1.useElementSize)(containerRef, {
@@ -64,7 +64,8 @@ const PlayerSeekBar = ({ durationInFrames }) => {
             dragging: true,
             wasPlaying: playing,
         });
-    }, [size, durationInFrames, pause, seek, playing]);
+        onSeekStart();
+    }, [size, durationInFrames, pause, seek, playing, onSeekStart]);
     const onPointerMove = (0, react_1.useCallback)((e) => {
         var _a;
         if (!size) {
@@ -89,7 +90,8 @@ const PlayerSeekBar = ({ durationInFrames }) => {
         else {
             pause();
         }
-    }, [dragging, pause, play]);
+        onSeekEnd();
+    }, [dragging, onSeekEnd, pause, play]);
     (0, react_1.useEffect)(() => {
         if (!dragging.dragging) {
             return;

package/dist/PlayerUI.d.ts

@@ -7,6 +7,7 @@ export declare type RenderLoading = (canvas: {
     height: number;
     width: number;
 }) => React.ReactChild;
+export declare type RenderPoster = RenderLoading;
 declare const _default: (props: {
     controls: boolean;
     loop: boolean;
@@ -24,8 +25,12 @@ declare const _default: (props: {
     mediaVolume: number;
     errorFallback: ErrorFallback;
     playbackRate: number;
-    renderLoading?: RenderLoading | undefined;
+    renderLoading: RenderLoading | undefined;
+    renderPoster: RenderLoading | undefined;
     className: string | undefined;
     moveToBeginningWhenEnded: boolean;
+    showPosterWhenPaused: boolean;
+    showPosterWhenEnded: boolean;
+    showPosterWhenUnplayed: boolean;
 } & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default _default;

package/dist/PlayerUI.js

@@ -42,7 +42,7 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, className, moveToBeginningWhenEnded, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -55,6 +55,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const [hasPausedToResume, setHasPausedToResume] = (0, react_1.useState)(false);
     const [shouldAutoplay, setShouldAutoPlay] = (0, react_1.useState)(autoPlay);
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(() => false);
+    const [seeking, setSeeking] = (0, react_1.useState)(false);
     (0, use_playback_1.usePlayback)({
         loop,
         playbackRate,
@@ -292,6 +293,12 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const onSingleClick = (0, react_1.useCallback)((e) => {
         toggle(e);
     }, [toggle]);
+    const onSeekStart = (0, react_1.useCallback)(() => {
+        setSeeking(true);
+    }, []);
+    const onSeekEnd = (0, react_1.useCallback)(() => {
+        setSeeking(false);
+    }, []);
     const onDoubleClick = (0, react_1.useCallback)(() => {
         if (isFullscreen) {
             exitFullscreen();
@@ -310,7 +317,22 @@ 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 : {}) }) })) : 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] }));
+    const poster = renderPoster
+        ? renderPoster({
+            height: outerStyle.height,
+            width: outerStyle.width,
+        })
+        : null;
+    if (poster === undefined) {
+        throw new TypeError('renderPoster() must return a React element, but undefined was returned');
+    }
+    const shouldShowPoster = poster &&
+        [
+            showPosterWhenPaused && !player.isPlaying() && !seeking,
+            showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
+            showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
+        ].some(Boolean);
+    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 }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : 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, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart })) : null] }));
     if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

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/index.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import type { CallbackListener, EventTypes } from './event-emitter';
 import { PlayerEmitter } from './event-emitter';
 export { ErrorFallback, Player, PlayerProps } from './Player';
 export { PlayerMethods, PlayerRef } from './player-methods';
-export type { RenderLoading } from './PlayerUI';
+export type { RenderLoading, RenderPoster } from './PlayerUI';
 export { PreviewSize } from './utils/preview-size';
 export { Size } from './utils/use-element-size';
 export type { CallbackListener, EventTypes };
@@ -23,6 +22,7 @@ export declare const PlayerInternals: {
         seek: (newFrame: number) => void;
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
+        hasPlayed: boolean;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
         loop: boolean;

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

@@ -51,7 +51,7 @@ test('No durationInFrames should give errors', () => {
             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/);
+        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
     }
 });
 test('Invalid playbackRate should give error', () => {

package/dist/use-player.d.ts

@@ -13,6 +13,7 @@ declare type UsePlayerMethods = {
     seek: (newFrame: number) => void;
     getCurrentFrame: () => number;
     isPlaying: () => boolean;
+    hasPlayed: boolean;
 };
 export declare const usePlayer: () => UsePlayerMethods;
 export {};

package/dist/use-player.js

@@ -7,8 +7,9 @@ const emitter_context_1 = require("./emitter-context");
 const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
+    const [hasPlayed, setHasPlayed] = (0, react_1.useState)(false);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const playStart = (0, react_1.useRef)(0);
+    const playStart = (0, react_1.useRef)(frame);
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
@@ -32,6 +33,7 @@ const usePlayer = () => {
         if (imperativePlaying.current) {
             return;
         }
+        setHasPlayed(true);
         if (isLastFrame) {
             seek(0);
         }
@@ -109,6 +111,7 @@ const usePlayer = () => {
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
             pauseAndReturnToPlayStart,
+            hasPlayed,
         };
     }, [
         frameBack,
@@ -122,6 +125,7 @@ const usePlayer = () => {
         isFirstFrame,
         pauseAndReturnToPlayStart,
         imperativePlaying,
+        hasPlayed,
     ]);
     return returnValue;
 };

package/dist/utils/validate-initial-frame.d.ts

@@ -0,0 +1,4 @@
+export declare const validateInitialFrame: ({ initialFrame, durationInFrames, }: {
+    initialFrame: unknown;
+    durationInFrames: unknown;
+}) => void;

package/dist/utils/validate-initial-frame.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInitialFrame = void 0;
+const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
+    if (typeof durationInFrames !== 'number') {
+        throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
+    }
+    if (typeof initialFrame === 'undefined') {
+        return;
+    }
+    if (typeof initialFrame !== 'number') {
+        throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (Number.isNaN(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is NaN`);
+    }
+    if (!Number.isFinite(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
+    }
+    if (initialFrame % 1 !== 0) {
+        throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (initialFrame > durationInFrames - 1) {
+        throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
+    }
+};
+exports.validateInitialFrame = validateInitialFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "3.2.12-crf.7+93db68411",
+	"version": "3.2.14",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -28,7 +28,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.2.12-crf.7+93db68411"
+		"remotion": "3.2.14"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -63,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "93db68411377be8a8345f52ad3ea4d281424decc"
+	"gitHead": "544ef952c9df79b015496d68202776787f15cd93"
 }