@remotion/player 3.3.97 → 3.3.99

package/dist/cjs/MediaVolumeSlider.js

@@ -70,7 +70,6 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
             display: 'inline-flex',
             background: 'none',
             border: 'none',
-            padding: 6,
             justifyContent: 'center',
             alignItems: 'center',
             touchAction: 'none',

package/dist/cjs/PlaybackrateControl.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Checkmark: () => JSX.Element;
+export declare const PlaybackrateControl: React.FC<{
+    playbackRates: number[];
+}>;

package/dist/cjs/PlaybackrateControl.js

@@ -0,0 +1,136 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaybackrateControl = exports.Checkmark = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const icons_js_1 = require("./icons.js");
+const use_component_visible_js_1 = __importDefault(require("./utils/use-component-visible.js"));
+const playbackPopup = {
+    position: 'absolute',
+    right: 0,
+    width: 125,
+    bottom: 35,
+    background: '#fff',
+    borderRadius: 4,
+    overflow: 'hidden',
+    color: 'black',
+    textAlign: 'left',
+};
+const rateDiv = {
+    height: 30,
+    paddingRight: 15,
+    paddingLeft: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const checkmarkContainer = {
+    width: 22,
+    display: 'flex',
+    alignItems: 'center',
+};
+const checkmarkStyle = {
+    width: 14,
+    height: 14,
+    color: 'black',
+};
+const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+exports.Checkmark = Checkmark;
+const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
+    const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const [keyboardSelectedRate, setKeyboardSelectedRate] = (0, react_1.useState)(playbackRate);
+    (0, react_1.useEffect)(() => {
+        const listener = (e) => {
+            e.preventDefault();
+            if (e.key === 'ArrowUp') {
+                const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
+                if (currentIndex === 0) {
+                    return;
+                }
+                if (currentIndex === -1) {
+                    setKeyboardSelectedRate(playbackRates[0]);
+                }
+                else {
+                    setKeyboardSelectedRate(playbackRates[currentIndex - 1]);
+                }
+            }
+            else if (e.key === 'ArrowDown') {
+                const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
+                if (currentIndex === playbackRates.length - 1) {
+                    return;
+                }
+                if (currentIndex === -1) {
+                    setKeyboardSelectedRate(playbackRates[playbackRates.length - 1]);
+                }
+                else {
+                    setKeyboardSelectedRate(playbackRates[currentIndex + 1]);
+                }
+            }
+            else if (e.key === 'Enter') {
+                setPlaybackRate(keyboardSelectedRate);
+                setIsComponentVisible(false);
+            }
+        };
+        window.addEventListener('keydown', listener);
+        return () => {
+            window.removeEventListener('keydown', listener);
+        };
+    }, [
+        playbackRates,
+        keyboardSelectedRate,
+        setPlaybackRate,
+        setIsComponentVisible,
+    ]);
+    const onSelect = (0, react_1.useCallback)((rate) => {
+        setPlaybackRate(rate);
+        setIsComponentVisible(false);
+    }, [setIsComponentVisible, setPlaybackRate]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: playbackPopup, children: playbackRates.map((rate) => {
+            return ((0, jsx_runtime_1.jsx)(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
+        }) }));
+};
+const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onSelect(rate);
+    }, [onSelect, rate]);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onMouseEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onMouseLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const actualStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...rateDiv,
+            backgroundColor: hovered || keyboardSelectedRate === rate ? '#eee' : 'transparent',
+        };
+    }, [hovered, keyboardSelectedRate, rate]);
+    return ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { style: checkmarkContainer, children: rate === selectedRate ? (0, jsx_runtime_1.jsx)(exports.Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
+};
+const playbackButton = {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '6px 0 6px 0',
+    border: 'none',
+    background: 'none',
+    height: 36,
+    cursor: 'pointer',
+};
+const PlaybackrateControl = ({ playbackRates }) => {
+    const { ref, isComponentVisible, setIsComponentVisible } = (0, use_component_visible_js_1.default)(false);
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsComponentVisible(!isComponentVisible);
+    }, [isComponentVisible, setIsComponentVisible]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": "Change playback rate", style: playbackButton, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(icons_js_1.SettingsIcon, { iconSize: 22 }), isComponentVisible && ((0, jsx_runtime_1.jsx)(PlaybackPopup, { playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
+};
+exports.PlaybackrateControl = PlaybackrateControl;

package/dist/cjs/Player.d.ts

@@ -40,6 +40,7 @@ export declare type PlayerProps<T> = {
     renderFullscreenButton?: RenderFullscreenButton;
     alwaysShowControls?: boolean;
     initiallyMuted?: boolean;
+    showPlaybackRateControl?: boolean | number[];
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
 /**

package/dist/cjs/Player.js

@@ -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, renderFullscreenButton, renderPlayPauseButton, alwaysShowControls = false, initiallyMuted = false, ...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, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -50,6 +50,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const rootRef = (0, react_1.useRef)(null);
     const audioAndVideoTags = (0, react_1.useRef)([]);
     const imperativePlaying = (0, react_1.useRef)(false);
+    const [currentPlaybackRate, setCurrentPlaybackRate] = (0, react_1.useState)(playbackRate);
     if (typeof compositionHeight !== 'number') {
         throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
     }
@@ -104,10 +105,13 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         numberOfSharedAudioTags < 0) {
         throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
     }
-    (0, validate_playbackrate_js_1.validatePlaybackRate)(playbackRate);
+    (0, validate_playbackrate_js_1.validatePlaybackRate)(currentPlaybackRate);
     (0, react_1.useEffect)(() => {
-        emitter.dispatchRateChange(playbackRate);
-    }, [emitter, playbackRate]);
+        emitter.dispatchRateChange(currentPlaybackRate);
+    }, [emitter, currentPlaybackRate]);
+    (0, react_1.useEffect)(() => {
+        setCurrentPlaybackRate(playbackRate);
+    }, [playbackRate]);
     (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
@@ -115,14 +119,14 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             playing,
             rootId,
             shouldRegisterSequences: false,
-            playbackRate,
+            playbackRate: currentPlaybackRate,
             imperativePlaying,
-            setPlaybackRate: () => {
-                throw new Error('playback rate');
+            setPlaybackRate: (rate) => {
+                setCurrentPlaybackRate(rate);
             },
             audioAndVideoTags,
         };
-    }, [frame, playbackRate, playing, rootId]);
+    }, [frame, currentPlaybackRate, playing, rootId]);
     const setTimelineContextValue = (0, react_1.useMemo)(() => {
         return {
             setFrame,
@@ -141,7 +145,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     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'
                             ? 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 }) }) }) }) }));
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, 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, showPlaybackRateControl: showPlaybackRateControl }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /**

package/dist/cjs/PlayerControls.d.ts

@@ -37,4 +37,5 @@ export declare const Controls: React.FC<{
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreenButton: RenderFullscreenButton | null;
     alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
 }>;

package/dist/cjs/PlayerControls.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const format_time_js_1 = require("./format-time.js");
 const icons_js_1 = require("./icons.js");
 const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
+const PlaybackrateControl_js_1 = require("./PlaybackrateControl.js");
 const PlayerSeekBar_js_1 = require("./PlayerSeekBar.js");
 const use_video_controls_resize_js_1 = require("./use-video-controls-resize.js");
 const gradientSteps = [
@@ -66,7 +67,7 @@ const leftPartStyle = {
     alignItems: 'center',
 };
 const xSpacer = {
-    width: 10,
+    width: 12,
 };
 const ySpacer = {
     height: 8,
@@ -76,7 +77,7 @@ const flex1 = {
 };
 const fullscreen = {};
 const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_js_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.PlayIcon, {});
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
@@ -146,7 +147,24 @@ 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: 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_js_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_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_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
+    const playbackRates = (0, react_1.useMemo)(() => {
+        if (showPlaybackRateControl === true) {
+            return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
+        }
+        if (Array.isArray(showPlaybackRateControl)) {
+            for (const rate of showPlaybackRateControl) {
+                if (typeof rate !== 'number') {
+                    throw new Error('Every item in showPlaybackRateControl must be a number');
+                }
+                if (rate <= 0) {
+                    throw new Error('Every item in showPlaybackRateControl must be positive');
+                }
+            }
+            return showPlaybackRateControl;
+        }
+        return null;
+    }, [showPlaybackRateControl]);
+    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_js_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_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), playbackRates && (0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { playbackRates: playbackRates }), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (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: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_js_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_js_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };

package/dist/cjs/PlayerUI.d.ts

@@ -35,5 +35,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreen: RenderFullscreenButton | null;
     alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/cjs/PlayerUI.js

@@ -41,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, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, }, 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, alwaysShowControls, showPlaybackRateControl, }, ref) => {
     var _a, _b, _c, _d, _e;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -168,6 +168,15 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     }, [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,
@@ -209,9 +218,8 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
                     throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${typeof vol}`);
                 }
                 setMediaVolume(vol);
-                player.emitter.dispatchVolumeChange(vol);
             },
-            isMuted: () => mediaMuted || mediaVolume === 0,
+            isMuted: () => isMuted,
             mute: () => {
                 setMediaMuted(true);
             },
@@ -227,6 +235,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         isFullscreen,
         loop,
         mediaMuted,
+        isMuted,
         mediaVolume,
         player,
         requestFullscreen,
@@ -308,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 : {}), ...((_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, showPlaybackRateControl: showPlaybackRateControl })) : 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

@@ -22,6 +22,9 @@ declare type VolumeChangeEventPayload = {
 declare type FullscreenChangeEventPayload = {
     isFullscreen: boolean;
 };
+declare type MuteChangeEventPayload = {
+    isMuted: boolean;
+};
 declare type PlayerStateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
@@ -34,6 +37,7 @@ declare type PlayerStateEventMap = {
     timeupdate: TimeUpdateEventPayload;
     frameupdate: FrameUpdateEventPayload;
     fullscreenchange: FullscreenChangeEventPayload;
+    mutechange: MuteChangeEventPayload;
 };
 declare type ThumbnailStateEventMap = {
     error: ErrorPayload;
@@ -65,6 +69,7 @@ export declare class PlayerEmitter {
     dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
     dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
     dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
+    dispatchMuteChange(event: MuteChangeEventPayload): void;
 }
 export declare class ThumbnailEmitter {
     listeners: ThumbnailListeners;

package/dist/cjs/event-emitter.js

@@ -15,6 +15,7 @@ class PlayerEmitter {
             frameupdate: [],
             fullscreenchange: [],
             volumechange: [],
+            mutechange: [],
         };
     }
     addEventListener(name, callback) {
@@ -71,6 +72,9 @@ class PlayerEmitter {
     dispatchFullscreenChange(event) {
         this.dispatchEvent('fullscreenchange', event);
     }
+    dispatchMuteChange(event) {
+        this.dispatchEvent('mutechange', event);
+    }
 }
 exports.PlayerEmitter = PlayerEmitter;
 class ThumbnailEmitter {

package/dist/cjs/icons.d.ts

@@ -8,3 +8,6 @@ export declare const FullscreenIcon: React.FC<{
 }>;
 export declare const VolumeOffIcon: React.FC;
 export declare const VolumeOnIcon: React.FC;
+export declare const SettingsIcon: React.FC<{
+    iconSize?: number;
+}>;

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
+exports.SettingsIcon = exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 exports.ICON_SIZE = 25;
 exports.fullscreenIconSize = 16;
@@ -48,3 +48,7 @@ const VolumeOnIcon = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;
+const SettingsIcon = ({ iconSize }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", height: iconSize !== null && iconSize !== void 0 ? iconSize : exports.ICON_SIZE, viewBox: "0 0 512 512", style: { fill: '#fff' }, children: (0, jsx_runtime_1.jsx)("path", { d: "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" }) }));
+};
+exports.SettingsIcon = SettingsIcon;

package/dist/cjs/utils/use-component-visible.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function useComponentVisible(initialIsVisible: boolean): {
+    ref: import("react").RefObject<HTMLDivElement>;
+    isComponentVisible: boolean;
+    setIsComponentVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/cjs/utils/use-component-visible.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+// hook to hide a popup/modal when clicked outside
+function useComponentVisible(initialIsVisible) {
+    const [isComponentVisible, setIsComponentVisible] = (0, react_1.useState)(initialIsVisible);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsComponentVisible(false);
+            }
+        };
+        document.addEventListener('pointerup', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('pointerup', handleClickOutside, true);
+        };
+    }, []);
+    return { ref, isComponentVisible, setIsComponentVisible };
+}
+exports.default = useComponentVisible;

package/dist/esm/PlaybackrateControl.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Checkmark: () => JSX.Element;
+export declare const PlaybackrateControl: React.FC<{
+    playbackRates: number[];
+}>;

package/dist/esm/Player.d.ts

@@ -40,6 +40,7 @@ export declare type PlayerProps<T> = {
     renderFullscreenButton?: RenderFullscreenButton;
     alwaysShowControls?: boolean;
     initiallyMuted?: boolean;
+    showPlaybackRateControl?: boolean | number[];
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
 /**

package/dist/esm/PlayerControls.d.ts

@@ -37,4 +37,5 @@ export declare const Controls: React.FC<{
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreenButton: RenderFullscreenButton | null;
     alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
 }>;

package/dist/esm/PlayerUI.d.ts

@@ -35,5 +35,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreen: RenderFullscreenButton | null;
     alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

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

@@ -22,6 +22,9 @@ declare type VolumeChangeEventPayload = {
 declare type FullscreenChangeEventPayload = {
     isFullscreen: boolean;
 };
+declare type MuteChangeEventPayload = {
+    isMuted: boolean;
+};
 declare type PlayerStateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
@@ -34,6 +37,7 @@ declare type PlayerStateEventMap = {
     timeupdate: TimeUpdateEventPayload;
     frameupdate: FrameUpdateEventPayload;
     fullscreenchange: FullscreenChangeEventPayload;
+    mutechange: MuteChangeEventPayload;
 };
 declare type ThumbnailStateEventMap = {
     error: ErrorPayload;
@@ -65,6 +69,7 @@ export declare class PlayerEmitter {
     dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
     dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
     dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
+    dispatchMuteChange(event: MuteChangeEventPayload): void;
 }
 export declare class ThumbnailEmitter {
     listeners: ThumbnailListeners;

package/dist/esm/icons.d.ts

@@ -8,3 +8,6 @@ export declare const FullscreenIcon: React.FC<{
 }>;
 export declare const VolumeOffIcon: React.FC;
 export declare const VolumeOnIcon: React.FC;
+export declare const SettingsIcon: React.FC<{
+    iconSize?: number;
+}>;