@remotion/player 4.0.186 → 4.0.188

package/dist/cjs/MediaVolumeSlider.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 export declare const VOLUME_SLIDER_WIDTH = 100;
+export type RenderMuteButton = (props: {
+    muted: boolean;
+    volume: number;
+}) => React.ReactNode;
 export declare const MediaVolumeSlider: React.FC<{
-    displayVerticalVolumeSlider: Boolean;
+    readonly displayVerticalVolumeSlider: boolean;
+    readonly renderMuteButton: RenderMuteButton | null;
+    readonly renderVolumeSlider: RenderVolumeSlider | null;
 }>;

package/dist/cjs/MediaVolumeSlider.js

@@ -1,62 +1,29 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaVolumeSlider = exports.VOLUME_SLIDER_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const icons_js_1 = require("./icons.js");
+const render_volume_slider_js_1 = require("./render-volume-slider.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
 exports.VOLUME_SLIDER_WIDTH = 100;
-const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
+const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
     const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
     const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
     const [focused, setFocused] = (0, react_1.useState)(false);
     const parentDivRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const hover = (0, use_hover_state_js_1.useHoverState)(parentDivRef, false);
-    // Need to import it from React to fix React 17 ESM support.
-    const randomId = 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    typeof react_1.default.useId === 'undefined' ? 'volume-slider' : react_1.default.useId();
-    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
-    const isMutedOrZero = mediaMuted || mediaVolume === 0;
-    const onVolumeChange = (0, react_1.useCallback)((e) => {
-        setMediaVolume(parseFloat(e.target.value));
-    }, [setMediaVolume]);
-    const onBlur = () => {
+    const onBlur = (0, react_1.useCallback)(() => {
         setTimeout(() => {
             // We need a small delay to check which element was focused next,
             // and if it wasn't the volume slider, we hide it
-            if (document.activeElement !== inputRef.current) {
+            if (inputRef.current && document.activeElement !== inputRef.current) {
                 setFocused(false);
             }
         }, 10);
-    };
+    }, []);
     const isVolume0 = mediaVolume === 0;
     const onClick = (0, react_1.useCallback)(() => {
         if (isVolume0) {
@@ -89,68 +56,34 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
             padding: 0,
         };
     }, []);
-    const sliderContainer = (0, react_1.useMemo)(() => {
-        const paddingLeft = 5;
-        const common = {
-            paddingLeft,
-            height: icons_js_1.ICON_SIZE,
-            width: exports.VOLUME_SLIDER_WIDTH,
-        };
-        if (displayVerticalVolumeSlider) {
-            return {
-                ...common,
-                position: 'absolute',
-                transform: `rotate(-90deg) translateX(${exports.VOLUME_SLIDER_WIDTH / 2 + icons_js_1.ICON_SIZE / 2}px)`,
-            };
-        }
-        return {
-            ...common,
-        };
-    }, [displayVerticalVolumeSlider]);
-    const inputStyle = (0, react_1.useMemo)(() => {
-        const commonStyle = {
-            WebkitAppearance: 'none',
-            backgroundColor: 'rgba(255, 255, 255, 0.5)',
-            borderRadius: BAR_HEIGHT / 2,
-            cursor: 'pointer',
-            height: BAR_HEIGHT,
-            width: exports.VOLUME_SLIDER_WIDTH,
-            backgroundImage: `linear-gradient(
-				to right,
-				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
-			)`,
-        };
-        if (displayVerticalVolumeSlider) {
-            return {
-                ...commonStyle,
-                bottom: icons_js_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2,
-            };
-        }
-        return commonStyle;
-    }, [displayVerticalVolumeSlider, mediaVolume]);
-    const sliderStyle = `
-	.${randomClass}::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
-
-	.${randomClass}::-moz-range-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
-`;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("style", { 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: sliderStyle,
-                } }), (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari() ? ((0, jsx_runtime_1.jsx)("div", { style: sliderContainer, children: (0, jsx_runtime_1.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] }));
+    const renderDefaultMuteButton = (0, react_1.useCallback)(({ muted, volume }) => {
+        const isMutedOrZero = muted || volume === 0;
+        return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}) }));
+    }, [onBlur, onClick, volumeContainer]);
+    const muteButton = (0, react_1.useMemo)(() => {
+        return renderMuteButton
+            ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume })
+            : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
+    }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
+    const volumeSlider = (0, react_1.useMemo)(() => {
+        return (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari()
+            ? (renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : render_volume_slider_js_1.renderDefaultVolumeSlider)({
+                isVertical: displayVerticalVolumeSlider,
+                volume: mediaVolume,
+                onBlur: () => setFocused(false),
+                inputRef,
+                setVolume: setMediaVolume,
+            })
+            : null;
+    }, [
+        displayVerticalVolumeSlider,
+        focused,
+        hover,
+        mediaMuted,
+        mediaVolume,
+        renderVolumeSlider,
+        setMediaVolume,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [muteButton, volumeSlider] }));
 };
 exports.MediaVolumeSlider = MediaVolumeSlider;

package/dist/cjs/Player.d.ts

@@ -2,9 +2,11 @@ import type { ComponentType } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
 import type { AnyZodObject } from 'zod';
+import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
 import type { PlayerRef } from './player-methods.js';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
 export type ErrorFallback = (info: {
     error: Error;
@@ -40,6 +42,8 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly initiallyShowControls?: number | boolean;
     readonly renderPlayPauseButton?: RenderPlayPauseButton;
     readonly renderFullscreenButton?: RenderFullscreenButton;
+    readonly renderMuteButton?: RenderMuteButton;
+    readonly renderVolumeSlider?: RenderVolumeSlider;
     readonly alwaysShowControls?: boolean;
     readonly schema?: Schema;
     readonly initiallyMuted?: boolean;

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, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = 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, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -140,7 +140,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const actualInputProps = (0, react_1.useMemo)(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
-                            : 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), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), 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, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible }) }) }) }) }));
+                            : 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), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), 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, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /**

package/dist/cjs/PlayerControls.d.ts

@@ -1,5 +1,7 @@
 import type { MouseEventHandler, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
+import type { RenderMuteButton } from './MediaVolumeSlider.js';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { usePlayer } from './use-player.js';
 import type { Size } from './utils/use-element-size.js';
 export type RenderPlayPauseButton = (props: {
@@ -34,4 +36,6 @@ export declare const Controls: React.FC<{
     readonly hideControlsWhenPointerDoesntMove: boolean | number;
     readonly onPointerDown: ((ev: PointerEvent | SyntheticEvent) => void) | undefined;
     readonly onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
+    readonly renderMuteButton: RenderMuteButton | null;
+    readonly renderVolumeSlider: RenderVolumeSlider | null;
 }>;

package/dist/cjs/PlayerControls.js

@@ -66,7 +66,7 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, }) => {
+const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, renderMuteButton, renderVolumeSlider, }) => {
     var _a, _b;
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -177,7 +177,7 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [(0, jsx_runtime_1.jsxs)("div", { ref: flexRef, style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: PlaybackrateControl_js_1.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 ? ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : ((_b = renderPlayPauseButton({
                                     playing: player.playing,
                                     isBuffering: buffering,
-                                })) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, 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 && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, 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: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
+                                })) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, 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, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, 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 && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, 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: PlaybackrateControl_js_1.playerButtonStyle, 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

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { PlayerRef } from './player-methods.js';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 export type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
@@ -37,6 +39,8 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly initiallyShowControls: number | boolean;
     readonly renderPlayPauseButton: RenderPlayPauseButton | null;
     readonly renderFullscreen: RenderFullscreenButton | null;
+    readonly renderMuteButton: RenderMuteButton | null;
+    readonly renderVolumeSlider: RenderVolumeSlider | null;
     readonly alwaysShowControls: boolean;
     readonly showPlaybackRateControl: boolean | number[];
     readonly posterFillMode: PosterFillMode;

package/dist/cjs/PlayerUI.js

@@ -40,7 +40,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, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -404,7 +404,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
                                 ...outerWithoutScale,
                                 width: config.width,
                                 height: config.height,
-                            }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, 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, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay ? handlePointerDown : undefined })) : null] }));
+                            }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, 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, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay ? handlePointerDown : undefined, renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider })) : 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/_check-rsc.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/_check-rsc.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+if (typeof react_1.createContext !== 'function') {
+    const err = [
+        'Remotion requires React.createContext, but it is "undefined".',
+        'If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',
+        '',
+        'Before:',
+        '  import {Player} from "@remotion/player";',
+        '',
+        'After:',
+        '  "use client";',
+        '  import {Player} from "@remotion/player";',
+    ];
+    throw new Error(err.join('\n'));
+}

package/dist/cjs/index.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
+export type { RenderMuteButton } from './MediaVolumeSlider.js';
 export type { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
 export { Player } from './Player.js';
 export type { PlayerProps, PlayerPropsWithoutZod } from './Player.js';
 export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';
 export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
+export type { RenderVolumeSlider } from './render-volume-slider.js';
 export { Thumbnail } from './Thumbnail.js';
 export type { ThumbnailProps, ThumbnailPropsWithoutZod } from './Thumbnail.js';
 export type { Size } from './utils/use-element-size.js';

package/dist/cjs/render-volume-slider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type RenderVolumeSliderProps = {
+    readonly volume: number;
+    readonly isVertical: boolean;
+    readonly onBlur: () => void;
+    readonly inputRef: React.RefObject<HTMLInputElement>;
+    readonly setVolume: (u: number) => void;
+};
+export type RenderVolumeSlider = (props: RenderVolumeSliderProps) => React.ReactNode;
+export declare const renderDefaultVolumeSlider: RenderVolumeSlider;
+export {};

package/dist/cjs/render-volume-slider.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderDefaultVolumeSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
+const icons_1 = require("./icons");
+const KNOB_SIZE = 12;
+const BAR_HEIGHT = 5;
+const DefaultVolumeSlider = ({ volume, isVertical, onBlur, inputRef, setVolume, }) => {
+    const sliderContainer = (0, react_1.useMemo)(() => {
+        const paddingLeft = 5;
+        const common = {
+            paddingLeft,
+            height: icons_1.ICON_SIZE,
+            width: MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH,
+            display: 'inline-flex',
+            alignItems: 'center',
+        };
+        if (isVertical) {
+            return {
+                ...common,
+                position: 'absolute',
+                transform: `rotate(-90deg) translateX(${MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH / 2 + icons_1.ICON_SIZE / 2}px)`,
+            };
+        }
+        return {
+            ...common,
+        };
+    }, [isVertical]);
+    // Need to import it from React to fix React 17 ESM support.
+    const randomId = 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    typeof react_1.default.useId === 'undefined' ? 'volume-slider' : react_1.default.useId();
+    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
+    const onVolumeChange = (0, react_1.useCallback)((e) => {
+        setVolume(parseFloat(e.target.value));
+    }, [setVolume]);
+    const inputStyle = (0, react_1.useMemo)(() => {
+        const commonStyle = {
+            WebkitAppearance: 'none',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+            borderRadius: BAR_HEIGHT / 2,
+            cursor: 'pointer',
+            height: BAR_HEIGHT,
+            width: MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH,
+            backgroundImage: `linear-gradient(
+				to right,
+				white ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
+			)`,
+        };
+        if (isVertical) {
+            return {
+                ...commonStyle,
+                bottom: icons_1.ICON_SIZE + MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH / 2,
+            };
+        }
+        return commonStyle;
+    }, [isVertical, volume]);
+    const sliderStyle = `
+	.${randomClass}::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+
+	.${randomClass}::-moz-range-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+`;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: sliderContainer, children: [(0, jsx_runtime_1.jsx)("style", { 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                    __html: sliderStyle,
+                } }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: onBlur, onChange: onVolumeChange, step: 0.01, type: "range", value: volume, style: inputStyle })] }));
+};
+const renderDefaultVolumeSlider = (props) => {
+    return (0, jsx_runtime_1.jsx)(DefaultVolumeSlider, { ...props });
+};
+exports.renderDefaultVolumeSlider = renderDefaultVolumeSlider;