@remotion/player 4.0.187 → 4.0.189

package/dist/esm/index.mjs

@@ -1007,28 +1007,28 @@ forwardRef as forwardRef2,
 useEffect as useEffect12,
 useImperativeHandle as useImperativeHandle2,
 useLayoutEffect,
-useMemo as useMemo12,
+useMemo as useMemo13,
 useRef as useRef10,
-useState as useState12
+useState as useState13
 } from "react";
 import {Composition, Internals as Internals12} from "remotion";
 
 // src/PlayerUI.tsx
-import React7, {
+import React8, {
 Suspense,
 forwardRef,
-useCallback as useCallback9,
+useCallback as useCallback10,
 useContext as useContext6,
 useEffect as useEffect11,
 useImperativeHandle,
-useMemo as useMemo10,
+useMemo as useMemo11,
 useRef as useRef9,
-useState as useState10
+useState as useState11
 } from "react";
 import {Internals as Internals10} from "remotion";
 
 // src/PlayerControls.tsx
-import {useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo7, useRef as useRef7, useState as useState9} from "react";
+import {useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState10} from "react";
 import {Internals as Internals9} from "remotion";
 
 // src/DefaultPlayPauseButton.tsx
@@ -1048,75 +1048,35 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import React3, {useCallback as useCallback3, useMemo as useMemo3, useRef as useRef4, useState as useState5} from "react";
-import {Internals as Internals6, random} from "remotion";
+import {useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useState as useState6} from "react";
+import {Internals as Internals6} from "remotion";
+
+// src/render-volume-slider.tsx
+import React3, {useCallback as useCallback3, useMemo as useMemo3, useState as useState5} from "react";
+import {random} from "remotion";
 import {
 jsx as jsx5,
 jsxs as jsxs3
 } from "react/jsx-runtime";
-var BAR_HEIGHT = 5;
 var KNOB_SIZE = 12;
-var VOLUME_SLIDER_WIDTH = 100;
-var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals6.useMediaMutedState();
-  const [mediaVolume, setMediaVolume] = Internals6.useMediaVolumeState();
-  const [focused, setFocused] = useState5(false);
-  const parentDivRef = useRef4(null);
-  const inputRef = useRef4(null);
-  const hover = useHoverState(parentDivRef, false);
-  const randomId = typeof React3.useId === "undefined" ? "volume-slider" : React3.useId();
-  const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const isMutedOrZero = mediaMuted || mediaVolume === 0;
-  const onVolumeChange = useCallback3((e) => {
-    setMediaVolume(parseFloat(e.target.value));
-  }, [setMediaVolume]);
-  const onBlur = () => {
-    setTimeout(() => {
-      if (document.activeElement !== inputRef.current) {
-        setFocused(false);
-      }
-    }, 10);
-  };
-  const isVolume0 = mediaVolume === 0;
-  const onClick = useCallback3(() => {
-    if (isVolume0) {
-      setMediaVolume(1);
-      setMediaMuted(false);
-      return;
-    }
-    setMediaMuted((mute) => !mute);
-  }, [isVolume0, setMediaMuted, setMediaVolume]);
-  const parentDivStyle = useMemo3(() => {
-    return {
-      display: "inline-flex",
-      background: "none",
-      border: "none",
-      justifyContent: "center",
-      alignItems: "center",
-      touchAction: "none",
-      ...displayVerticalVolumeSlider && { position: "relative" }
-    };
-  }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo3(() => {
-    return {
-      display: "inline",
-      width: ICON_SIZE,
-      height: ICON_SIZE,
-      cursor: "pointer",
-      appearance: "none",
-      background: "none",
-      border: "none",
-      padding: 0
-    };
-  }, []);
+var BAR_HEIGHT = 5;
+var DefaultVolumeSlider = ({
+  volume,
+  isVertical,
+  onBlur,
+  inputRef,
+  setVolume
+}) => {
   const sliderContainer = useMemo3(() => {
     const paddingLeft = 5;
     const common = {
       paddingLeft,
       height: ICON_SIZE,
-      width: VOLUME_SLIDER_WIDTH
+      width: VOLUME_SLIDER_WIDTH,
+      display: "inline-flex",
+      alignItems: "center"
     };
-    if (displayVerticalVolumeSlider) {
+    if (isVertical) {
       return {
         ...common,
         position: "absolute",
@@ -1126,7 +1086,12 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     return {
       ...common
     };
-  }, [displayVerticalVolumeSlider]);
+  }, [isVertical]);
+  const randomId = typeof React3.useId === "undefined" ? "volume-slider" : React3.useId();
+  const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
+  const onVolumeChange = useCallback3((e) => {
+    setVolume(parseFloat(e.target.value));
+  }, [setVolume]);
   const inputStyle = useMemo3(() => {
     const commonStyle = {
       WebkitAppearance: "none",
@@ -1137,17 +1102,17 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
       width: VOLUME_SLIDER_WIDTH,
       backgroundImage: `linear-gradient(
 				to right,
-				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
+				white ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
 			)`
     };
-    if (displayVerticalVolumeSlider) {
+    if (isVertical) {
       return {
         ...commonStyle,
         bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2
       };
     }
     return commonStyle;
-  }, [displayVerticalVolumeSlider, mediaVolume]);
+  }, [isVertical, volume]);
   const sliderStyle = `
 	.${randomClass}::-webkit-slider-thumb {
 		-webkit-appearance: none;
@@ -1168,58 +1133,144 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
 	}
 `;
   return jsxs3("div", {
-    ref: parentDivRef,
-    style: parentDivStyle,
+    style: sliderContainer,
     children: [
       jsx5("style", {
         dangerouslySetInnerHTML: {
           __html: sliderStyle
         }
       }),
-      jsx5("button", {
-        "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
-        title: isMutedOrZero ? "Unmute sound" : "Mute sound",
-        onClick,
+      jsx5("input", {
+        ref: inputRef,
+        "aria-label": "Change volume",
+        className: randomClass,
+        max: 1,
+        min: 0,
         onBlur,
-        onFocus: () => setFocused(true),
-        style: volumeContainer,
-        type: "button",
-        children: isMutedOrZero ? jsx5(VolumeOffIcon, {}) : jsx5(VolumeOnIcon, {})
-      }),
-      (focused || hover) && !mediaMuted && !Internals6.isIosSafari() ? jsx5("div", {
-        style: sliderContainer,
-        children: jsx5("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
+        onChange: onVolumeChange,
+        step: 0.01,
+        type: "range",
+        value: volume,
+        style: inputStyle
+      })
+    ]
+  });
+};
+var renderDefaultVolumeSlider = (props) => {
+  return jsx5(DefaultVolumeSlider, {
+    ...props
+  });
+};
+
+// src/MediaVolumeSlider.tsx
+import {
+jsx as jsx6,
+jsxs as jsxs4
+} from "react/jsx-runtime";
+var VOLUME_SLIDER_WIDTH = 100;
+var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
+  const [mediaMuted, setMediaMuted] = Internals6.useMediaMutedState();
+  const [mediaVolume, setMediaVolume] = Internals6.useMediaVolumeState();
+  const [focused, setFocused] = useState6(false);
+  const parentDivRef = useRef4(null);
+  const inputRef = useRef4(null);
+  const hover = useHoverState(parentDivRef, false);
+  const onBlur = useCallback4(() => {
+    setTimeout(() => {
+      if (inputRef.current && document.activeElement !== inputRef.current) {
+        setFocused(false);
+      }
+    }, 10);
+  }, []);
+  const isVolume0 = mediaVolume === 0;
+  const onClick = useCallback4(() => {
+    if (isVolume0) {
+      setMediaVolume(1);
+      setMediaMuted(false);
+      return;
+    }
+    setMediaMuted((mute) => !mute);
+  }, [isVolume0, setMediaMuted, setMediaVolume]);
+  const parentDivStyle = useMemo4(() => {
+    return {
+      display: "inline-flex",
+      background: "none",
+      border: "none",
+      justifyContent: "center",
+      alignItems: "center",
+      touchAction: "none",
+      ...displayVerticalVolumeSlider && { position: "relative" }
+    };
+  }, [displayVerticalVolumeSlider]);
+  const volumeContainer = useMemo4(() => {
+    return {
+      display: "inline",
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      cursor: "pointer",
+      appearance: "none",
+      background: "none",
+      border: "none",
+      padding: 0
+    };
+  }, []);
+  const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
+    const isMutedOrZero = muted || volume === 0;
+    return jsx6("button", {
+      "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
+      title: isMutedOrZero ? "Unmute sound" : "Mute sound",
+      onClick,
+      onBlur,
+      onFocus: () => setFocused(true),
+      style: volumeContainer,
+      type: "button",
+      children: isMutedOrZero ? jsx6(VolumeOffIcon, {}) : jsx6(VolumeOnIcon, {})
+    });
+  }, [onBlur, onClick, volumeContainer]);
+  const muteButton = useMemo4(() => {
+    return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
+  }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
+  const volumeSlider = useMemo4(() => {
+    return (focused || hover) && !mediaMuted && !Internals6.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+      isVertical: displayVerticalVolumeSlider,
+      volume: mediaVolume,
+      onBlur: () => setFocused(false),
+      inputRef,
+      setVolume: setMediaVolume
+    }) : null;
+  }, [
+    displayVerticalVolumeSlider,
+    focused,
+    hover,
+    mediaMuted,
+    mediaVolume,
+    renderVolumeSlider,
+    setMediaVolume
+  ]);
+  return jsxs4("div", {
+    ref: parentDivRef,
+    style: parentDivStyle,
+    children: [
+      muteButton,
+      volumeSlider
     ]
   });
 };
 
 // src/PlaybackrateControl.tsx
 import {
-useCallback as useCallback4,
+useCallback as useCallback5,
 useContext as useContext5,
 useEffect as useEffect8,
-useMemo as useMemo4,
-useState as useState7
+useMemo as useMemo5,
+useState as useState8
 } from "react";
 import {Internals as Internals7} from "remotion";
 
 // src/utils/use-component-visible.ts
-import {useEffect as useEffect7, useRef as useRef5, useState as useState6} from "react";
+import {useEffect as useEffect7, useRef as useRef5, useState as useState7} from "react";
 function useComponentVisible(initialIsVisible) {
-  const [isComponentVisible, setIsComponentVisible] = useState6(initialIsVisible);
+  const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
   const ref = useRef5(null);
   useEffect7(() => {
     const handleClickOutside = (event) => {
@@ -1237,8 +1288,8 @@ function useComponentVisible(initialIsVisible) {
 
 // src/PlaybackrateControl.tsx
 import {
-jsx as jsx6,
-jsxs as jsxs4
+jsx as jsx7,
+jsxs as jsxs5
 } from "react/jsx-runtime";
 var BOTTOM = 35;
 var THRESHOLD = 70;
@@ -1260,44 +1311,44 @@ var checkmarkStyle = {
   height: 14,
   color: "black"
 };
-var Checkmark = () => jsx6("svg", {
+var Checkmark = () => jsx7("svg", {
   viewBox: "0 0 512 512",
   style: checkmarkStyle,
-  children: jsx6("path", {
+  children: jsx7("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"
   })
 });
 var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
-  const onClick = useCallback4((e) => {
+  const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     onSelect(rate);
   }, [onSelect, rate]);
-  const [hovered, setHovered] = useState7(false);
-  const onMouseEnter = useCallback4(() => {
+  const [hovered, setHovered] = useState8(false);
+  const onMouseEnter = useCallback5(() => {
     setHovered(true);
   }, []);
-  const onMouseLeave = useCallback4(() => {
+  const onMouseLeave = useCallback5(() => {
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo4(() => {
+  const actualStyle = useMemo5(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
     };
   }, [hovered, isFocused]);
-  return jsxs4("div", {
+  return jsxs5("div", {
     onMouseEnter,
     onMouseLeave,
     tabIndex: 0,
     style: actualStyle,
     onClick,
     children: [
-      jsx6("div", {
+      jsx7("div", {
         style: checkmarkContainer,
-        children: rate === selectedRate ? jsx6(Checkmark, {}) : null
+        children: rate === selectedRate ? jsx7(Checkmark, {}) : null
       }),
       rate.toFixed(1),
       "x"
@@ -1306,7 +1357,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext5(Internals7.Timeline.TimelineContext);
-  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState7(playbackRate);
+  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
   useEffect8(() => {
     const listener = (e) => {
       e.preventDefault();
@@ -1345,11 +1396,11 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate,
     setIsComponentVisible
   ]);
-  const onSelect = useCallback4((rate) => {
+  const onSelect = useCallback5((rate) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo4(() => {
+  const playbackPopup = useMemo5(() => {
     return {
       position: "absolute",
       right: 0,
@@ -1363,10 +1414,10 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
       textAlign: "left"
     };
   }, [canvasSize.height]);
-  return jsx6("div", {
+  return jsx7("div", {
     style: playbackPopup,
     children: playbackRates.map((rate) => {
-      return jsx6(PlaybackrateOption, {
+      return jsx7(PlaybackrateOption, {
         selectedRate: playbackRate,
         onSelect,
         rate,
@@ -1408,27 +1459,27 @@ var button = {
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
   const { playbackRate } = useContext5(Internals7.Timeline.TimelineContext);
-  const onClick = useCallback4((e) => {
+  const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
   }, [setIsComponentVisible]);
-  return jsx6("div", {
+  return jsx7("div", {
     ref,
-    children: jsxs4("button", {
+    children: jsxs5("button", {
       type: "button",
       "aria-label": "Change playback rate",
       style: button,
       onClick,
       children: [
-        jsxs4("div", {
+        jsxs5("div", {
           style: label,
           children: [
             playbackRate,
             "x"
           ]
         }),
-        isComponentVisible && jsx6(PlaybackPopup, {
+        isComponentVisible && jsx7(PlaybackPopup, {
           canvasSize,
           playbackRates,
           setIsComponentVisible
@@ -1439,11 +1490,11 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import {useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef6, useState as useState8} from "react";
+import {useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9} from "react";
 import {Internals as Internals8, interpolate} from "remotion";
 import {
-jsx as jsx7,
-jsxs as jsxs5
+jsx as jsx8,
+jsxs as jsxs6
 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
@@ -1488,11 +1539,11 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
   });
   const { seek, play, pause, playing } = usePlayer();
   const frame = Internals8.Timeline.useTimelinePosition();
-  const [dragging, setDragging] = useState8({
+  const [dragging, setDragging] = useState9({
     dragging: false
   });
   const width = size?.width ?? 0;
-  const onPointerDown = useCallback5((e) => {
+  const onPointerDown = useCallback6((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -1506,7 +1557,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     });
     onSeekStart();
   }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
-  const onPointerMove = useCallback5((e) => {
+  const onPointerMove = useCallback6((e) => {
     if (!size) {
       throw new Error("Player has no size");
     }
@@ -1517,7 +1568,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
     seek(_frame);
   }, [dragging.dragging, durationInFrames, seek, size]);
-  const onPointerUp = useCallback5(() => {
+  const onPointerUp = useCallback6(() => {
     setDragging({
       dragging: false
     });
@@ -1543,7 +1594,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo5(() => {
+  const knobStyle = useMemo6(() => {
     return {
       height: KNOB_SIZE2,
       width: KNOB_SIZE2,
@@ -1556,7 +1607,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       opacity: Number(barHovered)
     };
   }, [barHovered, durationInFrames, frame, width]);
-  const fillStyle = useMemo5(() => {
+  const fillStyle = useMemo6(() => {
     return {
       height: BAR_HEIGHT2,
       backgroundColor: "rgba(255, 255, 255, 1)",
@@ -1565,7 +1616,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       borderRadius: BAR_HEIGHT2 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo5(() => {
+  const active = useMemo6(() => {
     return {
       height: BAR_HEIGHT2,
       backgroundColor: "rgba(255, 255, 255, 0.25)",
@@ -1575,23 +1626,23 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return jsxs5("div", {
+  return jsxs6("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle,
     children: [
-      jsxs5("div", {
+      jsxs6("div", {
         style: barBackground,
         children: [
-          jsx7("div", {
+          jsx8("div", {
             style: active
           }),
-          jsx7("div", {
+          jsx8("div", {
             style: fillStyle
           })
         ]
       }),
-      jsx7("div", {
+      jsx8("div", {
         style: knobStyle
       })
     ]
@@ -1606,14 +1657,14 @@ var formatTime = (timeInSeconds) => {
 };
 
 // src/use-video-controls-resize.ts
-import {useMemo as useMemo6} from "react";
+import {useMemo as useMemo7} from "react";
 var X_SPACER = 10;
 var X_PADDING = 12;
 var useVideoControlsResize = ({
   allowFullscreen: allowFullScreen,
   playerWidth
 }) => {
-  const resizeInfo = useMemo6(() => {
+  const resizeInfo = useMemo7(() => {
     const playPauseIconSize = ICON_SIZE;
     const volumeIconSize = ICON_SIZE;
     const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
@@ -1634,8 +1685,8 @@ var useVideoControlsResize = ({
 
 // src/PlayerControls.tsx
 import {
-jsx as jsx8,
-jsxs as jsxs6,
+jsx as jsx9,
+jsxs as jsxs7,
 Fragment as Fragment2
 } from "react/jsx-runtime";
 var gradientSteps = [
@@ -1740,17 +1791,19 @@ var Controls = ({
   buffering,
   hideControlsWhenPointerDoesntMove,
   onPointerDown,
-  onDoubleClick
+  onDoubleClick,
+  renderMuteButton,
+  renderVolumeSlider
 }) => {
   const playButtonRef = useRef7(null);
   const frame = Internals9.Timeline.useTimelinePosition();
-  const [supportsFullscreen, setSupportsFullscreen] = useState9(false);
+  const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
     allowFullscreen,
     playerWidth: canvasSize?.width ?? 0
   });
-  const [shouldShowInitially, setInitiallyShowControls] = useState9(() => {
+  const [shouldShowInitially, setInitiallyShowControls] = useState10(() => {
     if (typeof initiallyShowControls === "boolean") {
       return initiallyShowControls;
     }
@@ -1771,7 +1824,7 @@ var Controls = ({
     }
     throw new TypeError("initiallyShowControls must be a number or a boolean");
   });
-  const containerCss = useMemo7(() => {
+  const containerCss = useMemo8(() => {
     const shouldShow = hovered || !player.playing || shouldShowInitially || alwaysShowControls;
     return {
       ...containerStyle2,
@@ -1800,7 +1853,7 @@ var Controls = ({
       clearInterval(timeout);
     };
   }, [shouldShowInitially]);
-  const timeLabel = useMemo7(() => {
+  const timeLabel = useMemo8(() => {
     return {
       color: "white",
       fontFamily: "sans-serif",
@@ -1810,7 +1863,7 @@ var Controls = ({
       textOverflow: "ellipsis"
     };
   }, [maxTimeLabelWidth]);
-  const playbackRates = useMemo7(() => {
+  const playbackRates = useMemo8(() => {
     if (showPlaybackRateControl === true) {
       return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
     }
@@ -1829,61 +1882,63 @@ var Controls = ({
   }, [showPlaybackRateControl]);
   const ref = useRef7(null);
   const flexRef = useRef7(null);
-  const onPointerDownIfContainer = useCallback6((e) => {
+  const onPointerDownIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
     }
   }, [onPointerDown]);
-  const onDoubleClickIfContainer = useCallback6((e) => {
+  const onDoubleClickIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onDoubleClick?.(e);
     }
   }, [onDoubleClick]);
-  return jsxs6("div", {
+  return jsxs7("div", {
     ref,
     style: containerCss,
     onPointerDown: onPointerDownIfContainer,
     onDoubleClick: onDoubleClickIfContainer,
     children: [
-      jsxs6("div", {
+      jsxs7("div", {
         ref: flexRef,
         style: controlsRow,
         children: [
-          jsxs6("div", {
+          jsxs7("div", {
             style: leftPartStyle,
             children: [
-              jsx8("button", {
+              jsx9("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 ? jsx8(DefaultPlayPauseButton, {
+                children: renderPlayPauseButton === null ? jsx9(DefaultPlayPauseButton, {
                   buffering,
                   playing: player.playing
                 }) : renderPlayPauseButton({
                   playing: player.playing,
                   isBuffering: buffering
-                }) ?? jsx8(DefaultPlayPauseButton, {
+                }) ?? jsx9(DefaultPlayPauseButton, {
                   buffering,
                   playing: player.playing
                 })
               }),
-              showVolumeControls ? jsxs6(Fragment2, {
+              showVolumeControls ? jsxs7(Fragment2, {
                 children: [
-                  jsx8("div", {
+                  jsx9("div", {
                     style: xSpacer
                   }),
-                  jsx8(MediaVolumeSlider, {
+                  jsx9(MediaVolumeSlider2, {
+                    renderMuteButton,
+                    renderVolumeSlider,
                     displayVerticalVolumeSlider
                   })
                 ]
               }) : null,
-              jsx8("div", {
+              jsx9("div", {
                 style: xSpacer
               }),
-              jsxs6("div", {
+              jsxs7("div", {
                 style: timeLabel,
                 children: [
                   formatTime(frame / fps),
@@ -1891,40 +1946,40 @@ var Controls = ({
                   formatTime(durationInFrames / fps)
                 ]
               }),
-              jsx8("div", {
+              jsx9("div", {
                 style: xSpacer
               })
             ]
           }),
-          jsx8("div", {
+          jsx9("div", {
             style: flex1
           }),
-          playbackRates && canvasSize && jsx8(PlaybackrateControl, {
+          playbackRates && canvasSize && jsx9(PlaybackrateControl, {
             canvasSize,
             playbackRates
           }),
-          playbackRates && supportsFullscreen && allowFullscreen ? jsx8("div", {
+          playbackRates && supportsFullscreen && allowFullscreen ? jsx9("div", {
             style: xSpacer
           }) : null,
-          jsx8("div", {
+          jsx9("div", {
             style: fullscreen,
-            children: supportsFullscreen && allowFullscreen ? jsx8("button", {
+            children: supportsFullscreen && allowFullscreen ? jsx9("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 ? jsx8(FullscreenIcon, {
+              children: renderFullscreenButton === null ? jsx9(FullscreenIcon, {
                 isFullscreen
               }) : renderFullscreenButton({ isFullscreen })
             }) : null
           })
         ]
       }),
-      jsx8("div", {
+      jsx9("div", {
         style: ySpacer
       }),
-      jsx8(PlayerSeekBar, {
+      jsx9(PlayerSeekBar, {
         onSeekEnd,
         onSeekStart,
         durationInFrames,
@@ -1936,9 +1991,9 @@ var Controls = ({
 };
 
 // src/error-boundary.tsx
-import React6 from "react";
+import React7 from "react";
 import {
-jsx as jsx9
+jsx as jsx10
 } from "react/jsx-runtime";
 var errorStyle = {
   display: "flex",
@@ -1949,7 +2004,7 @@ var errorStyle = {
   width: "100%"
 };
 
-class ErrorBoundary extends React6.Component {
+class ErrorBoundary extends React7.Component {
   state = { hasError: null };
   static getDerivedStateFromError(error) {
     return { hasError: error };
@@ -1959,7 +2014,7 @@ class ErrorBoundary extends React6.Component {
   }
   render() {
     if (this.state.hasError) {
-      return jsx9("div", {
+      return jsx10("div", {
         style: errorStyle,
         children: this.props.errorFallback({
           error: this.state.hasError
@@ -1977,7 +2032,7 @@ var PLAYER_CSS_CLASSNAME = "__remotion-player";
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import {useCallback as useCallback8, useMemo as useMemo9} from "react";
+import {useCallback as useCallback9, useMemo as useMemo10} from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2005,17 +2060,17 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import {useCallback as useCallback7, useMemo as useMemo8, useRef as useRef8} from "react";
+import {useCallback as useCallback8, useMemo as useMemo9, useRef as useRef8} from "react";
 var useCancellablePromises = () => {
   const pendingPromises = useRef8([]);
-  const appendPendingPromise = useCallback7((promise) => {
+  const appendPendingPromise = useCallback8((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
-  const removePendingPromise = useCallback7((promise) => {
+  const removePendingPromise = useCallback8((promise) => {
     pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
   }, []);
-  const clearPendingPromises = useCallback7(() => pendingPromises.current.map((p) => p.cancel()), []);
-  const api = useMemo8(() => ({
+  const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
+  const api = useMemo9(() => ({
     appendPendingPromise,
     removePendingPromise,
     clearPendingPromises
@@ -2026,7 +2081,7 @@ var useCancellablePromises = () => {
 // src/utils/use-click-prevention-on-double-click.ts
 var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
   const api = useCancellablePromises();
-  const handleClick = useCallback8(async (e) => {
+  const handleClick = useCallback9(async (e) => {
     if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
       onClick(e);
       return;
@@ -2046,18 +2101,18 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
       }
     }
   }, [api, onClick]);
-  const handlePointerDown = useCallback8(() => {
+  const handlePointerDown = useCallback9(() => {
     document.addEventListener("pointerup", (newEvt) => {
       handleClick(newEvt);
     }, {
       once: true
     });
   }, [handleClick]);
-  const handleDoubleClick = useCallback8(() => {
+  const handleDoubleClick = useCallback9(() => {
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
-  const returnValue = useMemo9(() => {
+  const returnValue = useMemo10(() => {
     if (!doubleClickToFullscreen) {
       return { handlePointerDown: onClick, handleDoubleClick: () => {
         return;
@@ -2070,11 +2125,11 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 
 // src/PlayerUI.tsx
 import {
-jsx as jsx10,
-jsxs as jsxs7,
+jsx as jsx11,
+jsxs as jsxs8,
 Fragment as Fragment3
 } from "react/jsx-runtime";
-var reactVersion = React7.version.split(".")[0];
+var reactVersion = React8.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -2105,6 +2160,8 @@ var PlayerUI = ({
   initiallyShowControls,
   renderFullscreen: renderFullscreenButton,
   renderPlayPauseButton,
+  renderMuteButton,
+  renderVolumeSlider,
   alwaysShowControls,
   showPlaybackRateControl,
   posterFillMode,
@@ -2119,11 +2176,11 @@ var PlayerUI = ({
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
   });
-  const [hasPausedToResume, setHasPausedToResume] = useState10(false);
-  const [shouldAutoplay, setShouldAutoPlay] = useState10(autoPlay);
-  const [isFullscreen, setIsFullscreen] = useState10(() => false);
-  const [seeking, setSeeking] = useState10(false);
-  const supportsFullScreen = useMemo10(() => {
+  const [hasPausedToResume, setHasPausedToResume] = useState11(false);
+  const [shouldAutoplay, setShouldAutoPlay] = useState11(autoPlay);
+  const [isFullscreen, setIsFullscreen] = useState11(() => false);
+  const [seeking, setSeeking] = useState11(false);
+  const supportsFullScreen = useMemo11(() => {
     if (typeof document === "undefined") {
       return false;
     }
@@ -2159,14 +2216,14 @@ var PlayerUI = ({
       document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
     };
   }, []);
-  const toggle = useCallback9((e) => {
+  const toggle = useCallback10((e) => {
     if (player.isPlaying()) {
       player.pause();
     } else {
       player.play(e);
     }
   }, [player]);
-  const requestFullscreen = useCallback9(() => {
+  const requestFullscreen = useCallback10(() => {
     if (!allowFullscreen) {
       throw new Error("allowFullscreen is false");
     }
@@ -2182,7 +2239,7 @@ var PlayerUI = ({
       container.current.requestFullscreen();
     }
   }, [allowFullscreen, supportsFullScreen]);
-  const exitFullscreen = useCallback9(() => {
+  const exitFullscreen = useCallback10(() => {
     if (document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
     } else {
@@ -2214,7 +2271,7 @@ var PlayerUI = ({
     };
   }, [player.emitter]);
   const durationInFrames = config?.durationInFrames ?? 1;
-  const layout = useMemo10(() => {
+  const layout = useMemo11(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -2245,7 +2302,7 @@ var PlayerUI = ({
       isMuted
     });
   }, [player.emitter, isMuted]);
-  const [showBufferIndicator, setShowBufferState] = useState10(false);
+  const [showBufferIndicator, setShowBufferState] = useState11(false);
   useEffect11(() => {
     let timeout = null;
     let stopped = false;
@@ -2358,13 +2415,13 @@ var PlayerUI = ({
     scale
   ]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo10(() => {
+  const outerStyle = useMemo11(() => {
     return calculateOuterStyle({ canvasSize, config, style, overflowVisible });
   }, [canvasSize, config, overflowVisible, style]);
-  const outer = useMemo10(() => {
+  const outer = useMemo11(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo10(() => {
+  const containerStyle3 = useMemo11(() => {
     return calculateContainerStyle({
       canvasSize,
       config,
@@ -2373,28 +2430,28 @@ var PlayerUI = ({
       overflowVisible
     });
   }, [canvasSize, config, layout, overflowVisible, scale]);
-  const onError = useCallback9((error) => {
+  const onError = useCallback10((error) => {
     player.pause();
     player.emitter.dispatchError(error);
   }, [player]);
-  const onFullscreenButtonClick = useCallback9((e) => {
+  const onFullscreenButtonClick = useCallback10((e) => {
     e.stopPropagation();
     requestFullscreen();
   }, [requestFullscreen]);
-  const onExitFullscreenButtonClick = useCallback9((e) => {
+  const onExitFullscreenButtonClick = useCallback10((e) => {
     e.stopPropagation();
     exitFullscreen();
   }, [exitFullscreen]);
-  const onSingleClick = useCallback9((e) => {
+  const onSingleClick = useCallback10((e) => {
     toggle(e);
   }, [toggle]);
-  const onSeekStart = useCallback9(() => {
+  const onSeekStart = useCallback10(() => {
     setSeeking(true);
   }, []);
-  const onSeekEnd = useCallback9(() => {
+  const onSeekEnd = useCallback10(() => {
     setSeeking(false);
   }, []);
-  const onDoubleClick = useCallback9(() => {
+  const onDoubleClick = useCallback10(() => {
     if (isFullscreen) {
       exitFullscreen();
     } else {
@@ -2408,14 +2465,14 @@ var PlayerUI = ({
       setShouldAutoPlay(false);
     }
   }, [shouldAutoplay, player]);
-  const loadingMarkup = useMemo10(() => {
+  const loadingMarkup = useMemo11(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: showBufferIndicator
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
-  const currentScale = useMemo10(() => {
+  const currentScale = useMemo11(() => {
     return {
       type: "scale",
       scale
@@ -2439,30 +2496,30 @@ var PlayerUI = ({
     showPosterWhenBuffering && showBufferIndicator && player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = jsxs7(Fragment3, {
+  const content = jsxs8(Fragment3, {
     children: [
-      jsx10("div", {
+      jsx11("div", {
         style: outer,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
-        children: jsxs7("div", {
+        children: jsxs8("div", {
           style: containerStyle3,
           className: PLAYER_CSS_CLASSNAME,
           children: [
-            VideoComponent ? jsx10(ErrorBoundary, {
+            VideoComponent ? jsx11(ErrorBoundary, {
               onError,
               errorFallback,
-              children: jsx10(Internals10.ClipComposition, {
-                children: jsx10(Internals10.CurrentScaleContext.Provider, {
+              children: jsx11(Internals10.ClipComposition, {
+                children: jsx11(Internals10.CurrentScaleContext.Provider, {
                   value: currentScale,
-                  children: jsx10(VideoComponent, {
+                  children: jsx11(VideoComponent, {
                     ...video?.props ?? {},
                     ...inputProps ?? {}
                   })
                 })
               })
             }) : null,
-            shouldShowPoster && posterFillMode === "composition-size" ? jsx10("div", {
+            shouldShowPoster && posterFillMode === "composition-size" ? jsx11("div", {
               style: {
                 ...outerWithoutScale,
                 width: config.width,
@@ -2475,13 +2532,13 @@ var PlayerUI = ({
           ]
         })
       }),
-      shouldShowPoster && posterFillMode === "player-size" ? jsx10("div", {
+      shouldShowPoster && posterFillMode === "player-size" ? jsx11("div", {
         style: outer,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: poster
       }) : null,
-      controls ? jsx10(Controls, {
+      controls ? jsx11(Controls, {
         fps: config.fps,
         durationInFrames: config.durationInFrames,
         player,
@@ -2505,23 +2562,25 @@ var PlayerUI = ({
         buffering: showBufferIndicator,
         hideControlsWhenPointerDoesntMove,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
-        onPointerDown: clickToPlay ? handlePointerDown : undefined
+        onPointerDown: clickToPlay ? handlePointerDown : undefined,
+        renderMuteButton,
+        renderVolumeSlider
       }) : null
     ]
   });
   if (IS_NODE && !doesReactVersionSupportSuspense) {
-    return jsx10("div", {
+    return jsx11("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return jsx10("div", {
+  return jsx11("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: jsx10(Suspense, {
+    children: jsx11(Suspense, {
       fallback: loadingMarkup,
       children: content
     })
@@ -2530,7 +2589,7 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import {useCallback as useCallback10, useMemo as useMemo11, useState as useState11} from "react";
+import {useCallback as useCallback11, useMemo as useMemo12, useState as useState12} from "react";
 import {Internals as Internals11} from "remotion";
 
 // src/volume-persistance.ts
@@ -2559,7 +2618,7 @@ var getPreferredVolume = () => {
 
 // src/SharedPlayerContext.tsx
 import {
-jsx as jsx11
+jsx as jsx12
 } from "react/jsx-runtime";
 var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
@@ -2573,7 +2632,7 @@ var SharedPlayerContexts = ({
   numberOfSharedAudioTags,
   initiallyMuted
 }) => {
-  const compositionManagerContext = useMemo11(() => {
+  const compositionManagerContext = useMemo12(() => {
     const context = {
       compositions: [
         {
@@ -2617,41 +2676,41 @@ var SharedPlayerContexts = ({
     };
     return context;
   }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
-  const [mediaMuted, setMediaMuted] = useState11(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState11(() => getPreferredVolume());
-  const mediaVolumeContextValue = useMemo11(() => {
+  const [mediaMuted, setMediaMuted] = useState12(() => initiallyMuted);
+  const [mediaVolume, setMediaVolume] = useState12(() => getPreferredVolume());
+  const mediaVolumeContextValue = useMemo12(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeAndPersist = useCallback10((vol) => {
+  const setMediaVolumeAndPersist = useCallback11((vol) => {
     setMediaVolume(vol);
     persistVolume(vol);
   }, []);
-  const setMediaVolumeContextValue = useMemo11(() => {
+  const setMediaVolumeContextValue = useMemo12(() => {
     return {
       setMediaMuted,
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
-  return jsx11(Internals11.CanUseRemotionHooksProvider, {
-    children: jsx11(Internals11.Timeline.TimelineContext.Provider, {
+  return jsx12(Internals11.CanUseRemotionHooksProvider, {
+    children: jsx12(Internals11.Timeline.TimelineContext.Provider, {
       value: timelineContext,
-      children: jsx11(Internals11.CompositionManager.Provider, {
+      children: jsx12(Internals11.CompositionManager.Provider, {
         value: compositionManagerContext,
-        children: jsx11(Internals11.ResolveCompositionConfig, {
-          children: jsx11(Internals11.PrefetchProvider, {
-            children: jsx11(Internals11.DurationsContextProvider, {
-              children: jsx11(Internals11.MediaVolumeContext.Provider, {
+        children: jsx12(Internals11.ResolveCompositionConfig, {
+          children: jsx12(Internals11.PrefetchProvider, {
+            children: jsx12(Internals11.DurationsContextProvider, {
+              children: jsx12(Internals11.MediaVolumeContext.Provider, {
                 value: mediaVolumeContextValue,
-                children: jsx11(Internals11.NativeLayersProvider, {
-                  children: jsx11(Internals11.SetMediaVolumeContext.Provider, {
+                children: jsx12(Internals11.NativeLayersProvider, {
+                  children: jsx12(Internals11.SetMediaVolumeContext.Provider, {
                     value: setMediaVolumeContextValue,
-                    children: jsx11(Internals11.SharedAudioContextProvider, {
+                    children: jsx12(Internals11.SharedAudioContextProvider, {
                       numberOfAudioTags: numberOfSharedAudioTags,
                       component,
-                      children: jsx11(Internals11.BufferingProvider, {
+                      children: jsx12(Internals11.BufferingProvider, {
                         children
                       })
                     })
@@ -2765,7 +2824,7 @@ var validateDefaultAndInputProps = NoReactInternals.validateDefaultAndInputProps
 
 // src/Player.tsx
 import {
-jsx as jsx12
+jsx as jsx13
 } from "react/jsx-runtime";
 var componentOrNullIfLazy = (props) => {
   if ("component" in props) {
@@ -2805,6 +2864,7 @@ var PlayerFn = ({
   initiallyShowControls,
   renderFullscreenButton,
   renderPlayPauseButton,
+  renderVolumeSlider,
   alwaysShowControls = false,
   initiallyMuted = false,
   showPlaybackRateControl = false,
@@ -2812,6 +2872,7 @@ var PlayerFn = ({
   bufferStateDelayInMilliseconds,
   hideControlsWhenPointerDoesntMove = true,
   overflowVisible = false,
+  renderMuteButton,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -2831,15 +2892,15 @@ var PlayerFn = ({
   }
   const component = Internals12.useLazyComponent(componentProps);
   validateInitialFrame({ initialFrame, durationInFrames });
-  const [frame, setFrame] = useState12(() => ({
+  const [frame, setFrame] = useState13(() => ({
     [PLAYER_COMP_ID]: initialFrame ?? 0
   }));
-  const [playing, setPlaying] = useState12(false);
-  const [rootId] = useState12("player-comp");
+  const [playing, setPlaying] = useState13(false);
+  const [rootId] = useState13("player-comp");
   const rootRef = useRef10(null);
   const audioAndVideoTags = useRef10([]);
   const imperativePlaying = useRef10(false);
-  const [currentPlaybackRate, setCurrentPlaybackRate] = useState12(playbackRate);
+  const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
   }
@@ -2891,7 +2952,7 @@ var PlayerFn = ({
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
-  const timelineContextValue = useMemo12(() => {
+  const timelineContextValue = useMemo13(() => {
     return {
       frame,
       playing,
@@ -2904,7 +2965,7 @@ var PlayerFn = ({
       audioAndVideoTags
     };
   }, [frame, currentPlaybackRate, playing, rootId]);
-  const setTimelineContextValue = useMemo12(() => {
+  const setTimelineContextValue = useMemo13(() => {
     return {
       setFrame,
       setPlaying
@@ -2915,9 +2976,9 @@ var PlayerFn = ({
       Internals12.CSSUtils.injectCSS(Internals12.CSSUtils.makeDefaultPreviewCSS(`.${PLAYER_CSS_CLASSNAME}`, "#fff"));
     }, []);
   }
-  const actualInputProps = useMemo12(() => inputProps ?? {}, [inputProps]);
-  return jsx12(Internals12.IsPlayerContextProvider, {
-    children: jsx12(SharedPlayerContexts, {
+  const actualInputProps = useMemo13(() => inputProps ?? {}, [inputProps]);
+  return jsx13(Internals12.IsPlayerContextProvider, {
+    children: jsx13(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       component,
       compositionHeight,
@@ -2926,11 +2987,11 @@ var PlayerFn = ({
       fps,
       numberOfSharedAudioTags,
       initiallyMuted,
-      children: jsx12(Internals12.Timeline.SetTimelineContext.Provider, {
+      children: jsx13(Internals12.Timeline.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
-        children: jsx12(PlayerEmitterProvider, {
+        children: jsx13(PlayerEmitterProvider, {
           currentPlaybackRate,
-          children: jsx12(PlayerUI_default, {
+          children: jsx13(PlayerUI_default, {
             ref: rootRef,
             posterFillMode,
             renderLoading,
@@ -2958,6 +3019,8 @@ var PlayerFn = ({
             initiallyShowControls: initiallyShowControls ?? true,
             renderFullscreen: renderFullscreenButton ?? null,
             renderPlayPauseButton: renderPlayPauseButton ?? null,
+            renderMuteButton: renderMuteButton ?? null,
+            renderVolumeSlider: renderVolumeSlider ?? null,
             alwaysShowControls,
             showPlaybackRateControl,
             bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,
@@ -2977,31 +3040,31 @@ import {
 forwardRef as forwardRef4,
 useImperativeHandle as useImperativeHandle4,
 useLayoutEffect as useLayoutEffect2,
-useMemo as useMemo15,
+useMemo as useMemo16,
 useRef as useRef12,
-useState as useState13
+useState as useState14
 } from "react";
 import {Internals as Internals14, random as random2} from "remotion";
 
 // src/ThumbnailUI.tsx
-import React10, {
+import React11, {
 forwardRef as forwardRef3,
 Suspense as Suspense2,
-useCallback as useCallback11,
+useCallback as useCallback12,
 useImperativeHandle as useImperativeHandle3,
-useMemo as useMemo14,
+useMemo as useMemo15,
 useRef as useRef11
 } from "react";
 import {Internals as Internals13} from "remotion";
 
 // src/use-thumbnail.ts
-import {useContext as useContext7, useMemo as useMemo13} from "react";
+import {useContext as useContext7, useMemo as useMemo14} from "react";
 var useThumbnail = () => {
   const emitter = useContext7(ThumbnailEmitterContext);
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const returnValue = useMemo13(() => {
+  const returnValue = useMemo14(() => {
     return {
       emitter
     };
@@ -3011,9 +3074,9 @@ var useThumbnail = () => {
 
 // src/ThumbnailUI.tsx
 import {
-jsx as jsx13
+jsx as jsx14
 } from "react/jsx-runtime";
-var reactVersion2 = React10.version.split(".")[0];
+var reactVersion2 = React11.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
@@ -3026,7 +3089,7 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
   });
-  const layout = useMemo14(() => {
+  const layout = useMemo15(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -3048,13 +3111,13 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
     return Object.assign(thumbnail.emitter, methods);
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo14(() => {
+  const outerStyle = useMemo15(() => {
     return calculateOuterStyle({ config, style, canvasSize, overflowVisible });
   }, [canvasSize, config, overflowVisible, style]);
-  const outer = useMemo14(() => {
+  const outer = useMemo15(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo14(() => {
+  const containerStyle3 = useMemo15(() => {
     return calculateContainerStyle({
       canvasSize,
       config,
@@ -3063,17 +3126,17 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
       overflowVisible
     });
   }, [canvasSize, config, layout, overflowVisible, scale]);
-  const onError = useCallback11((error) => {
+  const onError = useCallback12((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
-  const loadingMarkup = useMemo14(() => {
+  const loadingMarkup = useMemo15(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: false
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading]);
-  const currentScaleContext = useMemo14(() => {
+  const currentScaleContext = useMemo15(() => {
     return {
       type: "scale",
       scale
@@ -3082,17 +3145,17 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
   if (!config) {
     return null;
   }
-  const content = jsx13("div", {
+  const content = jsx14("div", {
     style: outer,
-    children: jsx13("div", {
+    children: jsx14("div", {
       style: containerStyle3,
       className: PLAYER_CSS_CLASSNAME,
-      children: VideoComponent ? jsx13(ErrorBoundary, {
+      children: VideoComponent ? jsx14(ErrorBoundary, {
         onError,
         errorFallback,
-        children: jsx13(Internals13.CurrentScaleContext.Provider, {
+        children: jsx14(Internals13.CurrentScaleContext.Provider, {
           value: currentScaleContext,
-          children: jsx13(VideoComponent, {
+          children: jsx14(VideoComponent, {
             ...video?.props ?? {},
             ...inputProps ?? {}
           })
@@ -3101,18 +3164,18 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
     })
   });
   if (IS_NODE && !doesReactVersionSupportSuspense2) {
-    return jsx13("div", {
+    return jsx14("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return jsx13("div", {
+  return jsx14("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: jsx13(Suspense2, {
+    children: jsx14(Suspense2, {
       fallback: loadingMarkup,
       children: content
     })
@@ -3122,7 +3185,7 @@ var ThumbnailUI_default = forwardRef3(ThumbnailUI);
 
 // src/Thumbnail.tsx
 import {
-jsx as jsx14
+jsx as jsx15
 } from "react/jsx-runtime";
 var ThumbnailFn = ({
   frameToDisplay,
@@ -3143,9 +3206,9 @@ var ThumbnailFn = ({
       window.remotion_isPlayer = true;
     }, []);
   }
-  const [thumbnailId] = useState13(() => String(random2(null)));
+  const [thumbnailId] = useState14(() => String(random2(null)));
   const rootRef = useRef12(null);
-  const timelineState = useMemo15(() => {
+  const timelineState = useMemo16(() => {
     const value = {
       playing: false,
       frame: {
@@ -3165,12 +3228,12 @@ var ThumbnailFn = ({
   }, [frameToDisplay, thumbnailId]);
   useImperativeHandle4(ref, () => rootRef.current, []);
   const Component = Internals14.useLazyComponent(componentProps);
-  const [emitter] = useState13(() => new ThumbnailEmitter);
-  const passedInputProps = useMemo15(() => {
+  const [emitter] = useState14(() => new ThumbnailEmitter);
+  const passedInputProps = useMemo16(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return jsx14(Internals14.IsPlayerContextProvider, {
-    children: jsx14(SharedPlayerContexts, {
+  return jsx15(Internals14.IsPlayerContextProvider, {
+    children: jsx15(SharedPlayerContexts, {
       timelineContext: timelineState,
       component: Component,
       compositionHeight,
@@ -3179,9 +3242,9 @@ var ThumbnailFn = ({
       fps,
       numberOfSharedAudioTags: 0,
       initiallyMuted: true,
-      children: jsx14(ThumbnailEmitterContext.Provider, {
+      children: jsx15(ThumbnailEmitterContext.Provider, {
         value: emitter,
-        children: jsx14(ThumbnailUI_default, {
+        children: jsx15(ThumbnailUI_default, {
           ref: rootRef,
           className: className2,
           errorFallback,