@remotion/player 4.0.0-alpha13 → 4.0.0-alpha16

package/dist/esm/index.mjs

@@ -712,9 +712,6 @@ 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;
@@ -845,17 +842,10 @@ function useComponentVisible(initialIsVisible) {
     return { ref, isComponentVisible, setIsComponentVisible };
 }
 
-const playbackPopup = {
-    position: 'absolute',
-    right: 0,
-    width: 125,
-    bottom: 35,
-    background: '#fff',
-    borderRadius: 4,
-    overflow: 'hidden',
-    color: 'black',
-    textAlign: 'left',
-};
+// To align
+const BOTTOM = 35;
+// Arbitrary to clamp the height of the popup
+const THRESHOLD = 70;
 const rateDiv = {
     height: 30,
     paddingRight: 15,
@@ -875,7 +865,7 @@ const checkmarkStyle = {
     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 PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     const { setPlaybackRate, playbackRate } = useContext(Internals.Timeline.TimelineContext);
     const [keyboardSelectedRate, setKeyboardSelectedRate] = useState(playbackRate);
     useEffect(() => {
@@ -924,6 +914,20 @@ const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
         setPlaybackRate(rate);
         setIsComponentVisible(false);
     }, [setIsComponentVisible, setPlaybackRate]);
+    const playbackPopup = useMemo(() => {
+        return {
+            position: 'absolute',
+            right: 0,
+            width: 125,
+            maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
+            bottom: 35,
+            background: '#fff',
+            borderRadius: 4,
+            overflow: 'auto',
+            color: 'black',
+            textAlign: 'left',
+        };
+    }, [canvasSize.height]);
     return (jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
             return (jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
         }) }));
@@ -949,24 +953,45 @@ const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate
     }, [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',
+const label = {
+    fontSize: 13,
+    fontWeight: 'bold',
+    color: 'white',
+    border: '2px solid white',
+    borderRadius: 20,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+};
+const playerButtonStyle = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
     border: 'none',
-    background: 'none',
-    height: 36,
     cursor: 'pointer',
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 6,
+    paddingBottom: 6,
+    height: 37,
+    display: 'inline-flex',
+    marginBottom: 0,
+    marginTop: 0,
+    alignItems: 'center',
+};
+const button = {
+    ...playerButtonStyle,
+    position: 'relative',
 };
-const PlaybackrateControl = ({ playbackRates }) => {
+const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
     const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
+    const { playbackRate } = useContext(Internals.Timeline.TimelineContext);
     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 }))] }) }));
+    return (jsx("div", { ref: ref, children: jsxs("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [jsxs("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && (jsx(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
 };
 
 const getFrameFromX = (clientX, durationInFrames, width) => {
@@ -1167,20 +1192,6 @@ const containerStyle = {
     flexDirection: 'column',
     transition: 'opacity 0.3s',
 };
-const buttonStyle = {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 6,
-    paddingBottom: 6,
-    height: 37,
-    display: 'inline',
-    marginBottom: 0,
-    marginTop: 0,
-};
 const controlsRow = {
     display: 'flex',
     flexDirection: 'row',
@@ -1206,11 +1217,15 @@ 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, showPlaybackRateControl, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
+    var _a;
     const playButtonRef = useRef(null);
     const frame = Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = useState(false);
-    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({ allowFullscreen, playerWidth });
+    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
+        allowFullscreen,
+        playerWidth: (_a = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _a !== void 0 ? _a : 0,
+    });
     const [shouldShowInitially, setInitiallyShowControls] = useState(() => {
         if (typeof initiallyShowControls === 'boolean') {
             return initiallyShowControls;
@@ -1293,7 +1308,7 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
         }
         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
+    return (jsxs("div", { style: containerCss, children: [jsxs("div", { style: controlsRow, children: [jsxs("div", { style: leftPartStyle, children: [jsx("button", { ref: playButtonRef, type: "button", style: playerButtonStyle, 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 && canvasSize && (jsx(PlaybackrateControl, { canvasSize: canvasSize, 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: playerButtonStyle, 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 })] }));
 };
@@ -1387,7 +1402,7 @@ if (reactVersion$1 === '0') {
 }
 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, showPlaybackRateControl, }, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const config = Internals.useUnsafeVideoConfig();
     const video = Internals.useVideo();
     const container = useRef(null);
@@ -1662,7 +1677,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, showPlaybackRateControl: showPlaybackRateControl })) : 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, canvasSize: canvasSize, 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 }));
     }

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

@@ -1,10 +1,10 @@
 import type { SyntheticEvent } from 'react';
 import type { PlayerEmitter } from './event-emitter.js';
-export declare type ThumbnailMethods = {
+export type ThumbnailMethods = {
     getContainerNode: () => HTMLDivElement | null;
     getScale: () => number;
 };
-export declare type PlayerMethods = ThumbnailMethods & {
+export type PlayerMethods = ThumbnailMethods & {
     play: (e?: SyntheticEvent) => void;
     pause: () => void;
     toggle: (e?: SyntheticEvent) => void;
@@ -20,5 +20,5 @@ export declare type PlayerMethods = ThumbnailMethods & {
     mute: () => void;
     unmute: () => void;
 };
-export declare type ThumbnailRef = PlayerEmitter & ThumbnailMethods;
-export declare type PlayerRef = PlayerEmitter & PlayerMethods;
+export type ThumbnailRef = PlayerEmitter & ThumbnailMethods;
+export type PlayerRef = PlayerEmitter & PlayerMethods;

package/dist/esm/use-player.d.ts

@@ -1,6 +1,6 @@
 import type { SyntheticEvent } from 'react';
 import type { PlayerEmitter } from './event-emitter.js';
-declare type UsePlayerMethods = {
+type UsePlayerMethods = {
     frameBack: (frames: number) => void;
     frameForward: (frames: number) => void;
     isLastFrame: boolean;

package/dist/esm/use-thumbnail.d.ts

@@ -1,5 +1,5 @@
 import type { ThumbnailEmitter } from './event-emitter.js';
-declare type UseThumbnailMethods = {
+type UseThumbnailMethods = {
     emitter: ThumbnailEmitter;
 };
 export declare const useThumbnail: () => UseThumbnailMethods;

package/dist/esm/use-video-controls-resize.d.ts

@@ -1,4 +1,4 @@
-declare type Info = {
+type Info = {
     maxTimeLabelWidth: number | null;
     displayVerticalVolumeSlider: boolean;
 };

package/dist/esm/utils/cancellable-promise.d.ts

@@ -1,4 +1,4 @@
-export declare type CancellablePromise = {
+export type CancellablePromise = {
     promise: Promise<unknown>;
     cancel: () => void;
 };

package/dist/esm/utils/preview-size.d.ts

@@ -1,8 +1,8 @@
-export declare type Translation = {
+export type Translation = {
     x: number;
     y: number;
 };
-export declare type PreviewSize = {
+export type PreviewSize = {
     size: number | 'auto';
     translation: Translation;
 };

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

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

package/dist/esm/utils/use-element-size.d.ts

@@ -1,4 +1,4 @@
-export declare type Size = {
+export type Size = {
     width: number;
     height: number;
     left: number;