@remotion/player 4.0.0-alpha10 → 4.0.0-alpha12

package/dist/esm/index.mjs

@@ -624,7 +624,12 @@ const useElementSize = (ref, options) => {
             elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
         };
     }, [updateSize]);
-    return size ? { ...size, refresh: updateSize } : null;
+    return useMemo(() => {
+        if (!size) {
+            return null;
+        }
+        return { ...size, refresh: updateSize };
+    }, [size, updateSize]);
 };
 
 const PLAYER_CSS_CLASSNAME = '__remotion-player';
@@ -707,6 +712,9 @@ const VolumeOffIcon = () => {
 const VolumeOnIcon = () => {
     return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: 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" }) }));
 };
+const SettingsIcon = ({ iconSize }) => {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: iconSize !== null && iconSize !== void 0 ? iconSize : ICON_SIZE, viewBox: "0 0 512 512", style: { fill: '#fff' }, children: 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" }) }));
+};
 
 const BAR_HEIGHT$1 = 5;
 const KNOB_SIZE$1 = 12;
@@ -749,7 +757,6 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
             display: 'inline-flex',
             background: 'none',
             border: 'none',
-            padding: 6,
             justifyContent: 'center',
             alignItems: 'center',
             touchAction: 'none',
@@ -820,6 +827,148 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
                 } }), jsx("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? jsx(VolumeOffIcon, {}) : jsx(VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? (jsx("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle })) : null] }));
 };
 
+// hook to hide a popup/modal when clicked outside
+function useComponentVisible(initialIsVisible) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+    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 };
+}
+
+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 = () => (jsx("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: 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" }) }));
+const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
+    const { setPlaybackRate, playbackRate } = useContext(Internals.Timeline.TimelineContext);
+    const [keyboardSelectedRate, setKeyboardSelectedRate] = useState(playbackRate);
+    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 = useCallback((rate) => {
+        setPlaybackRate(rate);
+        setIsComponentVisible(false);
+    }, [setIsComponentVisible, setPlaybackRate]);
+    return (jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
+            return (jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
+        }) }));
+};
+const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onSelect(rate);
+    }, [onSelect, rate]);
+    const [hovered, setHovered] = useState(false);
+    const onMouseEnter = useCallback(() => {
+        setHovered(true);
+    }, []);
+    const onMouseLeave = useCallback(() => {
+        setHovered(false);
+    }, []);
+    const actualStyle = useMemo(() => {
+        return {
+            ...rateDiv,
+            backgroundColor: hovered || keyboardSelectedRate === rate ? '#eee' : 'transparent',
+        };
+    }, [hovered, keyboardSelectedRate, rate]);
+    return (jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? jsx(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 } = useComponentVisible(false);
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsComponentVisible(!isComponentVisible);
+    }, [isComponentVisible, setIsComponentVisible]);
+    return (jsx("div", { ref: ref, children: jsxs("button", { type: "button", "aria-label": "Change playback rate", style: playbackButton, onClick: onClick, children: [jsx(SettingsIcon, { iconSize: 22 }), isComponentVisible && (jsx(PlaybackPopup, { playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
+};
+
 const getFrameFromX = (clientX, durationInFrames, width) => {
     var _a;
     const pos = clientX;
@@ -1047,7 +1196,7 @@ const leftPartStyle = {
     alignItems: 'center',
 };
 const xSpacer = {
-    width: 10,
+    width: 12,
 };
 const ySpacer = {
     height: 8,
@@ -1057,7 +1206,7 @@ const flex1 = {
 };
 const fullscreen = {};
 const PlayPauseButton = ({ playing }) => playing ? jsx(PauseIcon, {}) : jsx(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 = useRef(null);
     const frame = Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = useState(false);
@@ -1127,7 +1276,24 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
             textOverflow: 'ellipsis',
         };
     }, [maxTimeLabelWidth]);
-    return (jsxs("div", { style: containerCss, children: [jsxs("div", { style: controlsRow, children: [jsxs("div", { style: leftPartStyle, children: [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 ? (jsx(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? (jsxs(Fragment, { children: [jsx("div", { style: xSpacer }), jsx(MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, jsx("div", { style: xSpacer }), jsxs("div", { style: timeLabel, children: [formatTime(frame / fps), " / ", formatTime(durationInFrames / fps)] }), jsx("div", { style: xSpacer })] }), jsx("div", { style: flex1 }), jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
+    const playbackRates = 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 (jsxs("div", { style: containerCss, children: [jsxs("div", { style: controlsRow, children: [jsxs("div", { style: leftPartStyle, children: [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 ? (jsx(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? (jsxs(Fragment, { children: [jsx("div", { style: xSpacer }), jsx(MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, jsx("div", { style: xSpacer }), jsxs("div", { style: timeLabel, children: [formatTime(frame / fps), " / ", formatTime(durationInFrames / fps)] }), jsx("div", { style: xSpacer })] }), jsx("div", { style: flex1 }), playbackRates && jsx(PlaybackrateControl, { playbackRates: playbackRates }), playbackRates && supportsFullscreen && allowFullscreen ? (jsx("div", { style: xSpacer })) : null, jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (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 ? (jsx(FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), jsx("div", { style: ySpacer }), jsx(PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };
@@ -1220,7 +1386,7 @@ if (reactVersion$1 === '0') {
     throw new Error(`Version ${reactVersion$1} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense$1 = parseInt(reactVersion$1, 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;
     const config = Internals.useUnsafeVideoConfig();
     const video = Internals.useVideo();
@@ -1496,7 +1662,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
         ].some(Boolean);
-    const content = (jsxs(Fragment, { children: [jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: 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 ? (jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx(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] }));
+    const content = (jsxs(Fragment, { children: [jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: 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 ? (jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx(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, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
     if (IS_NODE && !doesReactVersionSupportSuspense$1) {
         return (jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
@@ -1682,7 +1848,7 @@ const componentOrNullIfLazy = (props) => {
     }
     return null;
 };
-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
         useLayoutEffect(() => {
@@ -1710,6 +1876,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const rootRef = useRef(null);
     const audioAndVideoTags = useRef([]);
     const imperativePlaying = useRef(false);
+    const [currentPlaybackRate, setCurrentPlaybackRate] = useState(playbackRate);
     if (typeof compositionHeight !== 'number') {
         throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
     }
@@ -1765,10 +1932,13 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         numberOfSharedAudioTags < 0) {
         throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
     }
-    validatePlaybackRate(playbackRate);
+    validatePlaybackRate(currentPlaybackRate);
     useEffect(() => {
-        emitter.dispatchRateChange(playbackRate);
-    }, [emitter, playbackRate]);
+        emitter.dispatchRateChange(currentPlaybackRate);
+    }, [emitter, currentPlaybackRate]);
+    useEffect(() => {
+        setCurrentPlaybackRate(playbackRate);
+    }, [playbackRate]);
     useImperativeHandle(ref, () => rootRef.current, []);
     const timelineContextValue = useMemo(() => {
         return {
@@ -1776,14 +1946,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 = useMemo(() => {
         return {
             setFrame,
@@ -1803,7 +1973,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const actualInputProps = useMemo(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
     return (jsx(Internals.IsPlayerContextProvider, { children: jsx(SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: actualInputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: jsx(Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: jsx(PlayerUI$1, { 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$1 = forwardRef;
 /**

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

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