@remotion/player 4.0.0-bitrate.18 → 4.0.0-copy.4

package/LICENSE.md

@@ -1,34 +1,34 @@
 # Remotion License
 
-Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion create videos for free (even commercial), while a company license is required for for-profit organisations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)
 - [Company license](#company-license)
 
 ## Free license
 
-Copyright © 2022 [Jonny Burger](https://jonny.io)
+Copyright © 2022 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 
 You are eligible to use Remotion for free if you are:
 
 - an individual
-- a for-profit organisation with up to 3 employees
-- a non-profit or not-for-profit organisation
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
 - evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify and the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
-It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, sublicensing your own derivate of Remotion.
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
 
 ### Warranty notice
 
-The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
 
 ### Support
 
@@ -36,6 +36,6 @@ Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
 ## Company license
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support.
+You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](/docs/support)).
 
 Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license.

package/README.md

@@ -83,4 +83,4 @@ The most important props accepted:
 | compositionWidth  | The width of the composition in pixels   |
 | fps               | The frame rate of the video              |
 
-For a complete reference of the available props, refer to [@remotion/player API](https://www.remotion.dev/docs/player/api).
+For a complete reference of the available props, refer to [@remotion/player API](https://www.remotion.dev/docs/player/player).

package/dist/MediaVolumeSlider.js

@@ -16,7 +16,9 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     const parentDivRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const hover = (0, use_hover_state_1.useHoverState)(parentDivRef);
-    const [randomClass] = (0, react_1.useState)(() => `slider-${(0, remotion_1.random)(null)}`.replace('.', ''));
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const randomId = typeof react_1.useId === 'undefined' ? 'volume-slider' : (0, react_1.useId)();
+    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
     const isMutedOrZero = mediaMuted || mediaVolume === 0;
     const onVolumeChange = (e) => {
         setMediaVolume(parseFloat(e.target.value));

package/dist/Player.d.ts

@@ -1,13 +1,10 @@
-import type { ComponentType, MutableRefObject } from 'react';
+import type { ComponentType } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
 import type { PlayerRef } from './player-methods';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
 import type { RenderLoading, RenderPoster } from './PlayerUI';
-declare type PropsIfHasProps<Props> = {} extends Props ? {
-    inputProps?: Props;
-} : {
-    inputProps: Props;
-};
+import type { PropsIfHasProps } from './utils/props-if-has-props';
 export declare type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
@@ -39,11 +36,11 @@ export declare type PlayerProps<T> = {
     inFrame?: number | null;
     outFrame?: number | null;
     initiallyShowControls?: number | boolean;
+    renderPlayPauseButton?: RenderPlayPauseButton;
+    renderFullscreenButton?: RenderFullscreenButton;
 } & 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, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...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;
 }
-export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;
-export {};
+export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/Player.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Player = exports.PlayerFn = exports.componentOrNullIfLazy = void 0;
+exports.Player = exports.componentOrNullIfLazy = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -11,10 +11,10 @@ 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 SharedPlayerContext_1 = require("./SharedPlayerContext");
 const validate_in_out_frame_1 = require("./utils/validate-in-out-frame");
 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) => {
     if ('component' in props) {
         return props.component;
@@ -22,7 +22,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, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...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, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -48,8 +48,6 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const [rootId] = (0, react_1.useState)('player-comp');
     const [emitter] = (0, react_1.useState)(() => new event_emitter_1.PlayerEmitter());
     const rootRef = (0, react_1.useRef)(null);
-    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(false);
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)((0, volume_persistance_1.getPreferredVolume)());
     const audioAndVideoTags = (0, react_1.useRef)([]);
     const imperativePlaying = (0, react_1.useRef)(false);
     if (typeof compositionHeight !== 'number') {
@@ -106,10 +104,6 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     (0, react_1.useEffect)(() => {
         emitter.dispatchRatechange(playbackRate);
     }, [emitter, playbackRate]);
-    const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
-        setMediaVolume(vol);
-        (0, volume_persistance_1.persistVolume)(vol);
-    }, []);
     (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
@@ -131,60 +125,6 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             setPlaying,
         };
     }, [setFrame]);
-    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            mediaMuted,
-            mediaVolume,
-        };
-    }, [mediaMuted, mediaVolume]);
-    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setMediaMuted,
-            setMediaVolume: setMediaVolumeAndPersist,
-        };
-    }, [setMediaVolumeAndPersist]);
-    const compositionManagerContext = (0, react_1.useMemo)(() => {
-        return {
-            compositions: [
-                {
-                    component: component,
-                    durationInFrames,
-                    height: compositionHeight,
-                    width: compositionWidth,
-                    fps,
-                    id: 'player-comp',
-                    props: inputProps,
-                    nonce: 777,
-                    scale: 1,
-                    folderName: null,
-                    defaultProps: undefined,
-                    parentFolderName: null,
-                },
-            ],
-            folders: [],
-            registerFolder: () => undefined,
-            unregisterFolder: () => undefined,
-            currentComposition: 'player-comp',
-            registerComposition: () => undefined,
-            registerSequence: () => undefined,
-            sequences: [],
-            setCurrentComposition: () => undefined,
-            unregisterComposition: () => undefined,
-            unregisterSequence: () => undefined,
-            registerAsset: () => undefined,
-            unregisterAsset: () => undefined,
-            currentCompositionMetadata: null,
-            setCurrentCompositionMetadata: () => undefined,
-            assets: [],
-        };
-    }, [
-        component,
-        durationInFrames,
-        compositionHeight,
-        compositionWidth,
-        fps,
-        inputProps,
-    ]);
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
@@ -195,9 +135,6 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             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)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { 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, 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 }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, 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), 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 }) }) }) }));
 };
-exports.PlayerFn = PlayerFn;
-exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);
+exports.Player = (0, react_1.forwardRef)(PlayerFn);

package/dist/PlayerControls.d.ts

@@ -1,6 +1,12 @@
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player';
+export declare type RenderPlayPauseButton = (props: {
+    playing: boolean;
+}) => ReactNode;
+export declare type RenderFullscreenButton = (props: {
+    isFullscreen: boolean;
+}) => ReactNode;
 export declare const X_SPACER = 10;
 export declare const X_PADDING = 12;
 declare global {
@@ -30,4 +36,6 @@ export declare const Controls: React.FC<{
     outFrame: number | null;
     initiallyShowControls: number | boolean;
     playerWidth: number;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreenButton: RenderFullscreenButton | null;
 }>;

package/dist/PlayerControls.js

@@ -60,7 +60,8 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, }) => {
+const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {});
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
@@ -130,8 +131,8 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
             textOverflow: 'ellipsis',
         };
     }, [maxTimeLabelWidth]);
-    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, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : 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
+    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: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), 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, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : 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, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
+                                : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };
 exports.Controls = Controls;

package/dist/PlayerUI.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { PlayerRef } from './player-methods';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
 export declare type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
 export declare type RenderLoading = (canvas: {
     height: number;
     width: number;
-}) => React.ReactChild;
+}) => React.ReactNode;
 export declare type RenderPoster = RenderLoading;
 declare const _default: (props: {
     controls: boolean;
@@ -15,14 +16,10 @@ declare const _default: (props: {
     allowFullscreen: boolean;
     inputProps: unknown;
     showVolumeControls: boolean;
-    mediaMuted: boolean;
     style?: React.CSSProperties | undefined;
     clickToPlay: boolean;
     doubleClickToFullscreen: boolean;
     spaceKeyToPlayOrPause: boolean;
-    setMediaVolume: (v: number) => void;
-    setMediaMuted: (v: boolean) => void;
-    mediaVolume: number;
     errorFallback: ErrorFallback;
     playbackRate: number;
     renderLoading: RenderLoading | undefined;
@@ -35,5 +32,7 @@ declare const _default: (props: {
     inFrame: number | null;
     outFrame: number | null;
     initiallyShowControls: number | boolean;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreen: RenderFullscreenButton | null;
 } & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default _default;

package/dist/PlayerUI.js

@@ -33,7 +33,6 @@ 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 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");
@@ -42,7 +41,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, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, }, ref) => {
+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, }, ref) => {
     var _a, _b, _c, _d, _e;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -159,6 +158,8 @@ 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 { setMediaVolume, setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
+    const { mediaMuted, mediaVolume } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     (0, react_1.useImperativeHandle)(ref, () => {
         const methods = {
             play: player.play,
@@ -227,52 +228,13 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     ]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
-        if (!config) {
-            return {};
-        }
-        return {
-            position: 'relative',
-            overflow: 'hidden',
-            ...(0, calculate_player_size_1.calculatePlayerSize)({
-                compositionHeight: config.height,
-                compositionWidth: config.width,
-                currentSize: canvasSize,
-                height: style === null || style === void 0 ? void 0 : style.height,
-                width: style === null || style === void 0 ? void 0 : style.width,
-            }),
-            ...style,
-        };
+        return (0, calculate_scale_1.calculateOuterStyle)({ canvasSize, config, style });
     }, [canvasSize, config, style]);
     const outer = (0, react_1.useMemo)(() => {
-        if (!layout || !config) {
-            return {};
-        }
-        const { centerX, centerY } = layout;
-        return {
-            width: config.width * scale,
-            height: config.height * scale,
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'absolute',
-            left: centerX,
-            top: centerY,
-            overflow: 'hidden',
-        };
+        return (0, calculate_scale_1.calculateOuter)({ config, layout, scale });
     }, [config, layout, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
-        if (!config || !canvasSize || !layout) {
-            return {};
-        }
-        return {
-            position: 'absolute',
-            width: config.width,
-            height: config.height,
-            display: 'flex',
-            transform: `scale(${scale})`,
-            marginLeft: layout.xCorrection,
-            marginTop: layout.yCorrection,
-            overflow: 'hidden',
-        };
+        return (0, calculate_scale_1.calculateContainerStyle)({ canvasSize, config, layout, scale });
     }, [canvasSize, config, layout, scale]);
     const onError = (0, react_1.useCallback)((error) => {
         player.pause();
@@ -311,6 +273,14 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             setShouldAutoPlay(false);
         }
     }, [shouldAutoplay, player]);
+    const loadingMarkup = (0, react_1.useMemo)(() => {
+        return renderLoading
+            ? renderLoading({
+                height: outerStyle.height,
+                width: outerStyle.width,
+            })
+            : null;
+    }, [outerStyle.height, outerStyle.width, renderLoading]);
     if (!config) {
         return null;
     }
@@ -329,16 +299,10 @@ 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_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, { ...((_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_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 })) : 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, { ...((_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_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 })) : 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({
-            height: outerStyle.height,
-            width: outerStyle.width,
-        })
-        : null;
     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/SharedPlayerContext.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { TimelineContextValue } from 'remotion';
+export declare const SharedPlayerContexts: React.FC<{
+    children: React.ReactNode;
+    timelineContext: TimelineContextValue;
+    inputProps?: unknown;
+    fps: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    durationInFrames: number;
+    component: LazyExoticComponent<ComponentType<unknown>>;
+    numberOfSharedAudioTags: number;
+}>;

package/dist/SharedPlayerContext.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedPlayerContexts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const volume_persistance_1 = require("./volume-persistance");
+const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, }) => {
+    const compositionManagerContext = (0, react_1.useMemo)(() => {
+        return {
+            compositions: [
+                {
+                    component: component,
+                    durationInFrames,
+                    height: compositionHeight,
+                    width: compositionWidth,
+                    fps,
+                    id: 'player-comp',
+                    props: inputProps,
+                    nonce: 777,
+                    scale: 1,
+                    folderName: null,
+                    defaultProps: undefined,
+                    parentFolderName: null,
+                },
+            ],
+            folders: [],
+            registerFolder: () => undefined,
+            unregisterFolder: () => undefined,
+            currentComposition: 'player-comp',
+            registerComposition: () => undefined,
+            registerSequence: () => undefined,
+            sequences: [],
+            setCurrentComposition: () => undefined,
+            unregisterComposition: () => undefined,
+            unregisterSequence: () => undefined,
+            registerAsset: () => undefined,
+            unregisterAsset: () => undefined,
+            currentCompositionMetadata: null,
+            setCurrentCompositionMetadata: () => undefined,
+            assets: [],
+        };
+    }, [
+        component,
+        durationInFrames,
+        compositionHeight,
+        compositionWidth,
+        fps,
+        inputProps,
+    ]);
+    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(false);
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)((0, volume_persistance_1.getPreferredVolume)());
+    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            mediaMuted,
+            mediaVolume,
+        };
+    }, [mediaMuted, mediaVolume]);
+    const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
+        setMediaVolume(vol);
+        (0, volume_persistance_1.persistVolume)(vol);
+    }, []);
+    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setMediaMuted,
+            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, children: children }) }) }) }) }) }) }) }));
+};
+exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/Thumbnail.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, MutableRefObject } from 'react';
+import type { CompProps } from 'remotion';
+import type { ThumbnailMethods } from './player-methods';
+import type { ErrorFallback, RenderLoading } from './PlayerUI';
+import type { PropsIfHasProps } from './utils/props-if-has-props';
+declare type ThumbnailProps<T> = PropsIfHasProps<T> & CompProps<T> & {
+    frameToDisplay: number;
+    style?: CSSProperties;
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    inputProps?: unknown;
+    fps: number;
+    errorFallback?: ErrorFallback;
+    renderLoading?: RenderLoading;
+    className?: string;
+};
+export declare const ThumbnailFn: <T>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<T>, ref: MutableRefObject<ThumbnailMethods>) => 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;
+}
+export declare const Thumbnail: <T>(props: ThumbnailProps<T> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
+export {};

package/dist/Thumbnail.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumbnail = exports.ThumbnailFn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const emitter_context_1 = require("./emitter-context");
+const event_emitter_1 = require("./event-emitter");
+const SharedPlayerContext_1 = require("./SharedPlayerContext");
+const ThumbnailUI_1 = __importDefault(require("./ThumbnailUI"));
+const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
+    const [thumbnailId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
+    const rootRef = (0, react_1.useRef)(null);
+    const timelineState = (0, react_1.useMemo)(() => {
+        return {
+            playing: false,
+            frame: frameToDisplay,
+            rootId: thumbnailId,
+            imperativePlaying: {
+                current: false,
+            },
+            playbackRate: 1,
+            setPlaybackRate: () => {
+                throw new Error('thumbnail');
+            },
+            audioAndVideoTags: { current: [] },
+        };
+    }, [frameToDisplay, thumbnailId]);
+    (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
+    const Component = remotion_1.Internals.useLazyComponent(componentProps);
+    const [emitter] = (0, react_1.useState)(() => new event_emitter_1.ThumbnailEmitter());
+    const passedInputProps = (0, react_1.useMemo)(() => {
+        return inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    }, [inputProps]);
+    return ((0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, children: (0, jsx_runtime_1.jsx)(emitter_context_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }));
+};
+exports.ThumbnailFn = ThumbnailFn;
+exports.Thumbnail = (0, react_1.forwardRef)(exports.ThumbnailFn);

package/dist/ThumbnailUI.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ThumbnailMethods } from './player-methods';
+import type { ErrorFallback, RenderLoading } from './PlayerUI';
+declare const _default: (props: {
+    inputProps: unknown;
+    style?: React.CSSProperties | undefined;
+    errorFallback: ErrorFallback;
+    renderLoading: RenderLoading | undefined;
+    className: string | undefined;
+} & React.RefAttributes<ThumbnailMethods | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default _default;