@remotion/player 4.0.0-alpha.217 → 4.0.0-alpha10

package/dist/cjs/Player.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
-import type { z } from 'zod';
+import type { AnyZodObject } from 'zod';
 import type { PlayerRef } from './player-methods.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { RenderLoading, RenderPoster } from './PlayerUI.js';
@@ -9,7 +9,7 @@ import type { PropsIfHasProps } from './utils/props-if-has-props.js';
 export declare type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
-export declare type PlayerProps<Schema extends z.ZodTypeAny, Props> = {
+export declare type PlayerProps<Schema extends AnyZodObject, Props> = {
     durationInFrames: number;
     compositionWidth: number;
     compositionHeight: number;
@@ -48,4 +48,4 @@ export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) =>
  * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
  * @see [Documentation](https://www.remotion.dev/docs/player/player)
  */
-export declare const Player: <Schema extends z.ZodTypeAny, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;
+export declare const Player: <Schema extends AnyZodObject, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/cjs/Player.js

@@ -64,6 +64,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         allowFloats: false,
     });
     remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
+    remotion_1.Internals.validateDefaultAndInputProps(inputProps, 'inputProps', null);
     (0, validate_in_out_frame_js_1.validateInOutFrames)({
         durationInFrames,
         inFrame,
@@ -106,7 +107,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     (0, validate_playbackrate_js_1.validatePlaybackRate)(playbackRate);
     (0, react_1.useEffect)(() => {
-        emitter.dispatchRatechange(playbackRate);
+        emitter.dispatchRateChange(playbackRate);
     }, [emitter, playbackRate]);
     (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
     const timelineContextValue = (0, react_1.useMemo)(() => {
@@ -139,7 +140,8 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_js_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
         }, []);
     }
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_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'
+    const actualInputProps = (0, react_1.useMemo)(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: actualInputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_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), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, alwaysShowControls: alwaysShowControls }) }) }) }) }));
 };

package/dist/cjs/PlayerUI.d.ts

@@ -14,7 +14,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     loop: boolean;
     autoPlay: boolean;
     allowFullscreen: boolean;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
     showVolumeControls: boolean;
     style?: React.CSSProperties | undefined;
     clickToPlay: boolean;

package/dist/cjs/PlayerUI.js

@@ -42,7 +42,7 @@ if (reactVersion === '0') {
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
 const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, }, ref) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
     const container = (0, react_1.useRef)(null);
@@ -128,12 +128,12 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             var _a;
             const element = (_a = document.webkitFullscreenElement) !== null && _a !== void 0 ? _a : document.fullscreenElement;
             if (element && element === container.current) {
-                player.emitter.dispatchFullscreenChangeUpdate({
+                player.emitter.dispatchFullscreenChange({
                     isFullscreen: true,
                 });
             }
             else {
-                player.emitter.dispatchFullscreenChangeUpdate({
+                player.emitter.dispatchFullscreenChange({
                     isFullscreen: false,
                 });
             }
@@ -158,8 +158,25 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         });
     }, [canvasSize, config]);
     const scale = (_b = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _b !== void 0 ? _b : 1;
+    const initialScaleIgnored = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!initialScaleIgnored.current) {
+            initialScaleIgnored.current = true;
+            return;
+        }
+        player.emitter.dispatchScaleChange(scale);
+    }, [player.emitter, scale]);
     const { setMediaVolume, setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { mediaMuted, mediaVolume } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
+    (0, react_1.useEffect)(() => {
+        player.emitter.dispatchVolumeChange(mediaVolume);
+    }, [player.emitter, mediaVolume]);
+    const isMuted = mediaMuted || mediaVolume === 0;
+    (0, react_1.useEffect)(() => {
+        player.emitter.dispatchMuteChange({
+            isMuted,
+        });
+    }, [player.emitter, isMuted]);
     (0, react_1.useImperativeHandle)(ref, () => {
         const methods = {
             play: player.play,
@@ -202,7 +219,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
                 }
                 setMediaVolume(vol);
             },
-            isMuted: () => mediaMuted || mediaVolume === 0,
+            isMuted: () => isMuted,
             mute: () => {
                 setMediaMuted(true);
             },
@@ -218,6 +235,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         isFullscreen,
         loop,
         mediaMuted,
+        isMuted,
         mediaVolume,
         player,
         requestFullscreen,
@@ -299,7 +317,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             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_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : 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_js_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, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls })) : 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_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : 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_js_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, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_d = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _d !== void 0 ? _d : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls })) : null] }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/cjs/SharedPlayerContext.d.ts

@@ -4,7 +4,7 @@ import type { TimelineContextValue } from 'remotion';
 export declare const SharedPlayerContexts: React.FC<{
     children: React.ReactNode;
     timelineContext: TimelineContextValue;
-    inputProps?: unknown;
+    inputProps?: Record<string, unknown>;
     fps: number;
     compositionWidth: number;
     compositionHeight: number;

package/dist/cjs/SharedPlayerContext.js

@@ -23,6 +23,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
                     defaultProps: undefined,
                     parentFolderName: null,
                     schema: null,
+                    calculateMetadata: null,
                 },
             ],
             folders: [],
@@ -41,6 +42,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
             setCurrentCompositionMetadata: () => undefined,
             assets: [],
             setClipRegion: () => undefined,
+            resolved: null,
         };
     }, [
         component,
@@ -68,6 +70,6 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
             setMediaVolume: setMediaVolumeAndPersist,
         };
     }, [setMediaVolumeAndPersist]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { 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, component: component, children: children }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { 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, component: component, children: children }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/cjs/Thumbnail.d.ts

@@ -1,10 +1,10 @@
 import type { CSSProperties, MutableRefObject } from 'react';
 import type { CompProps } from 'remotion';
-import type { z } from 'zod';
+import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
-declare type ThumbnailProps<Schema extends z.ZodTypeAny, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
+declare type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
     frameToDisplay: number;
     style?: CSSProperties;
     durationInFrames: number;
@@ -15,10 +15,10 @@ declare type ThumbnailProps<Schema extends z.ZodTypeAny, Props> = PropsIfHasProp
     renderLoading?: RenderLoading;
     className?: string;
 };
-export declare const ThumbnailFn: <Schema extends z.ZodTypeAny, Props>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+export declare const ThumbnailFn: <Schema extends AnyZodObject, Props>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
 /**
  * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
  * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
  */
-export declare const Thumbnail: <Schema extends z.ZodTypeAny, Props>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
+export declare const Thumbnail: <Schema extends AnyZodObject, Props>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
 export {};

package/dist/cjs/Thumbnail.js

@@ -35,7 +35,7 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: passedInputProps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
 };
 exports.ThumbnailFn = ThumbnailFn;
 const forward = react_1.forwardRef;

package/dist/cjs/ThumbnailUI.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 declare const _default: React.ForwardRefExoticComponent<{
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
     style?: React.CSSProperties | undefined;
     errorFallback: ErrorFallback;
     renderLoading: RenderLoading | undefined;

package/dist/cjs/ThumbnailUI.js

@@ -38,7 +38,7 @@ if (reactVersion === '0') {
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
 const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className }, ref) => {
-    var _a, _b, _c;
+    var _a, _b;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
     const container = (0, react_1.useRef)(null);
@@ -98,7 +98,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     if (!config) {
         return null;
     }
-    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_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 }) }));
+    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_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 : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/cjs/event-emitter.d.ts

@@ -13,19 +13,31 @@ declare type FrameUpdateEventPayload = {
 declare type RateChangeEventPayload = {
     playbackRate: number;
 };
+declare type ScaleChangeEventPayload = {
+    scale: number;
+};
+declare type VolumeChangeEventPayload = {
+    volume: number;
+};
 declare type FullscreenChangeEventPayload = {
     isFullscreen: boolean;
 };
+declare type MuteChangeEventPayload = {
+    isMuted: boolean;
+};
 declare type PlayerStateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
     play: undefined;
     ratechange: RateChangeEventPayload;
+    scalechange: ScaleChangeEventPayload;
+    volumechange: VolumeChangeEventPayload;
     ended: undefined;
     error: ErrorPayload;
     timeupdate: TimeUpdateEventPayload;
     frameupdate: FrameUpdateEventPayload;
     fullscreenchange: FullscreenChangeEventPayload;
+    mutechange: MuteChangeEventPayload;
 };
 declare type ThumbnailStateEventMap = {
     error: ErrorPayload;
@@ -47,14 +59,17 @@ export declare class PlayerEmitter {
     removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
     private dispatchEvent;
     dispatchSeek(frame: number): void;
+    dispatchVolumeChange(volume: number): void;
     dispatchPause(): void;
     dispatchPlay(): void;
     dispatchEnded(): void;
-    dispatchRatechange(playbackRate: number): void;
+    dispatchRateChange(playbackRate: number): void;
+    dispatchScaleChange(scale: number): void;
     dispatchError(error: Error): void;
     dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
     dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
-    dispatchFullscreenChangeUpdate(event: FullscreenChangeEventPayload): void;
+    dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
+    dispatchMuteChange(event: MuteChangeEventPayload): void;
 }
 export declare class ThumbnailEmitter {
     listeners: ThumbnailListeners;

package/dist/cjs/event-emitter.js

@@ -9,10 +9,13 @@ class PlayerEmitter {
             pause: [],
             play: [],
             ratechange: [],
+            scalechange: [],
             seeked: [],
             timeupdate: [],
             frameupdate: [],
             fullscreenchange: [],
+            volumechange: [],
+            mutechange: [],
         };
     }
     addEventListener(name, callback) {
@@ -31,6 +34,11 @@ class PlayerEmitter {
             frame,
         });
     }
+    dispatchVolumeChange(volume) {
+        this.dispatchEvent('volumechange', {
+            volume,
+        });
+    }
     dispatchPause() {
         this.dispatchEvent('pause', undefined);
     }
@@ -40,11 +48,16 @@ class PlayerEmitter {
     dispatchEnded() {
         this.dispatchEvent('ended', undefined);
     }
-    dispatchRatechange(playbackRate) {
+    dispatchRateChange(playbackRate) {
         this.dispatchEvent('ratechange', {
             playbackRate,
         });
     }
+    dispatchScaleChange(scale) {
+        this.dispatchEvent('scalechange', {
+            scale,
+        });
+    }
     dispatchError(error) {
         this.dispatchEvent('error', {
             error,
@@ -56,9 +69,12 @@ class PlayerEmitter {
     dispatchFrameUpdate(event) {
         this.dispatchEvent('frameupdate', event);
     }
-    dispatchFullscreenChangeUpdate(event) {
+    dispatchFullscreenChange(event) {
         this.dispatchEvent('fullscreenchange', event);
     }
+    dispatchMuteChange(event) {
+        this.dispatchEvent('mutechange', event);
+    }
 }
 exports.PlayerEmitter = PlayerEmitter;
 class ThumbnailEmitter {

package/dist/cjs/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
-export { Player, PlayerProps } from './Player.js';
 export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
+export { Player, PlayerProps } from './Player.js';
 export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';
 export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
 export { Thumbnail } from './Thumbnail.js';

package/dist/cjs/is-backgrounded.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useIsBackgrounded: () => import("react").MutableRefObject<boolean>;

package/dist/cjs/is-backgrounded.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsBackgrounded = void 0;
+const react_1 = require("react");
+const getIsBackgrounded = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    return document.visibilityState === 'hidden';
+};
+const useIsBackgrounded = () => {
+    const isBackgrounded = (0, react_1.useRef)(getIsBackgrounded());
+    (0, react_1.useEffect)(() => {
+        const onVisibilityChange = () => {
+            isBackgrounded.current = getIsBackgrounded();
+        };
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+        };
+    }, []);
+    return isBackgrounded;
+};
+exports.useIsBackgrounded = useIsBackgrounded;

package/dist/cjs/player-methods.d.ts

@@ -12,7 +12,7 @@ export declare type PlayerMethods = ThumbnailMethods & {
     getCurrentFrame: () => number;
     requestFullscreen: () => void;
     exitFullscreen: () => void;
-    isFullscreen: () => void;
+    isFullscreen: () => boolean;
     setVolume: (num: number) => void;
     getVolume: () => number;
     isMuted: () => boolean;

package/dist/cjs/use-playback.js

@@ -4,12 +4,17 @@ exports.usePlayback = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
+const is_backgrounded_js_1 = require("./is-backgrounded.js");
 const use_player_js_1 = require("./use-player.js");
 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_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    // requestAnimationFrame() does not work if the tab is not active.
+    // This means that audio will keep playing even if it has ended.
+    // In that case, we use setTimeout() instead.
+    const isBackgroundedRef = (0, is_backgrounded_js_1.useIsBackgrounded)();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
     const lastTimeUpdateEvent = (0, react_1.useRef)(null);
@@ -24,12 +29,20 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         let reqAnimFrameCall = null;
         const startedTime = performance.now();
         let framesAdvanced = 0;
-        const stop = () => {
-            hasBeenStopped = true;
+        const cancelQueuedFrame = () => {
             if (reqAnimFrameCall !== null) {
-                cancelAnimationFrame(reqAnimFrameCall);
+                if (reqAnimFrameCall.type === 'raf') {
+                    cancelAnimationFrame(reqAnimFrameCall.id);
+                }
+                else {
+                    clearTimeout(reqAnimFrameCall.id);
+                }
             }
         };
+        const stop = () => {
+            hasBeenStopped = true;
+            cancelQueuedFrame();
+        };
         const callback = () => {
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
@@ -56,11 +69,34 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 return;
             }
             if (!hasBeenStopped) {
-                reqAnimFrameCall = requestAnimationFrame(callback);
+                queueNextFrame();
+            }
+        };
+        const queueNextFrame = () => {
+            if (isBackgroundedRef.current) {
+                reqAnimFrameCall = {
+                    type: 'timeout',
+                    // Note: Most likely, this will not be 1000 / fps, but the browser will throttle it to ~1/sec.
+                    id: setTimeout(callback, 1000 / config.fps),
+                };
+            }
+            else {
+                reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
+            }
+        };
+        queueNextFrame();
+        const onVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                return;
             }
+            // If tab goes into the background, cancel requestAnimationFrame() and update immediately.
+            // , so the transition to setTimeout() can be fulfilled.
+            cancelQueuedFrame();
+            callback();
         };
-        reqAnimFrameCall = requestAnimationFrame(callback);
+        window.addEventListener('visibilitychange', onVisibilityChange);
         return () => {
+            window.removeEventListener('visibilitychange', onVisibilityChange);
             stop();
         };
     }, [
@@ -74,6 +110,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         inFrame,
         outFrame,
         moveToBeginningWhenEnded,
+        isBackgroundedRef,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {

package/dist/cjs/utils/props-if-has-props.d.ts

@@ -1,5 +1,5 @@
-import type { z } from 'zod';
-export declare type PropsIfHasProps<Schema extends z.ZodTypeAny, Props> = z.ZodTypeAny extends Schema ? {} extends Props ? {
+import type { AnyZodObject, z } from 'zod';
+export declare type PropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
     inputProps?: z.infer<Schema> & Props;
 } : {
     inputProps: Props;

package/dist/esm/Player.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
-import type { z } from 'zod';
+import type { AnyZodObject } from 'zod';
 import type { PlayerRef } from './player-methods.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { RenderLoading, RenderPoster } from './PlayerUI.js';
@@ -9,7 +9,7 @@ import type { PropsIfHasProps } from './utils/props-if-has-props.js';
 export declare type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
-export declare type PlayerProps<Schema extends z.ZodTypeAny, Props> = {
+export declare type PlayerProps<Schema extends AnyZodObject, Props> = {
     durationInFrames: number;
     compositionWidth: number;
     compositionHeight: number;
@@ -48,4 +48,4 @@ export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) =>
  * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
  * @see [Documentation](https://www.remotion.dev/docs/player/player)
  */
-export declare const Player: <Schema extends z.ZodTypeAny, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;
+export declare const Player: <Schema extends AnyZodObject, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/esm/PlayerUI.d.ts

@@ -14,7 +14,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     loop: boolean;
     autoPlay: boolean;
     allowFullscreen: boolean;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
     showVolumeControls: boolean;
     style?: React.CSSProperties | undefined;
     clickToPlay: boolean;

package/dist/esm/SharedPlayerContext.d.ts

@@ -4,7 +4,7 @@ import type { TimelineContextValue } from 'remotion';
 export declare const SharedPlayerContexts: React.FC<{
     children: React.ReactNode;
     timelineContext: TimelineContextValue;
-    inputProps?: unknown;
+    inputProps?: Record<string, unknown>;
     fps: number;
     compositionWidth: number;
     compositionHeight: number;

package/dist/esm/Thumbnail.d.ts

@@ -1,10 +1,10 @@
 import type { CSSProperties, MutableRefObject } from 'react';
 import type { CompProps } from 'remotion';
-import type { z } from 'zod';
+import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
-declare type ThumbnailProps<Schema extends z.ZodTypeAny, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
+declare type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
     frameToDisplay: number;
     style?: CSSProperties;
     durationInFrames: number;
@@ -15,10 +15,10 @@ declare type ThumbnailProps<Schema extends z.ZodTypeAny, Props> = PropsIfHasProp
     renderLoading?: RenderLoading;
     className?: string;
 };
-export declare const ThumbnailFn: <Schema extends z.ZodTypeAny, Props>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+export declare const ThumbnailFn: <Schema extends AnyZodObject, Props>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
 /**
  * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
  * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
  */
-export declare const Thumbnail: <Schema extends z.ZodTypeAny, Props>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
+export declare const Thumbnail: <Schema extends AnyZodObject, Props>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
 export {};

package/dist/esm/ThumbnailUI.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 declare const _default: React.ForwardRefExoticComponent<{
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
     style?: React.CSSProperties | undefined;
     errorFallback: ErrorFallback;
     renderLoading: RenderLoading | undefined;

package/dist/esm/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;
 }