From d6e437e6c966bfb466c970bb9778d38aaeede237 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 14 Apr 2024 10:00:51 -0600
Subject: [PATCH] Make volume props optional

---
 web/src/components/player/VideoControls.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 4dc7962ee7..872289aa04 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -38,14 +38,14 @@ type VideoControlsProps = {
   features?: VideoControls;
   isPlaying: boolean;
   show: boolean;
-  muted: boolean;
-  volume: number;
+  muted?: boolean;
+  volume?: number;
   controlsOpen?: boolean;
   playbackRates?: number[];
   playbackRate: number;
   hotKeys?: boolean;
   setControlsOpen?: (open: boolean) => void;
-  setMuted: (muted: boolean) => void;
+  setMuted?: (muted: boolean) => void;
   onPlayPause: (play: boolean) => void;
   onSeek: (diff: number) => void;
   onSetPlaybackRate: (rate: number) => void;
@@ -95,7 +95,7 @@ export default function VideoControls({
   // volume control
 
   const VolumeIcon = useMemo(() => {
-    if (volume == 0.0 || muted) {
+    if (!volume || volume == 0.0 || muted) {
       return MdVolumeOff;
     } else if (volume <= 0.33) {
       return MdVolumeMute;
@@ -122,7 +122,7 @@ export default function VideoControls({
           }
           break;
         case "m":
-          if (down && !repeat && video) {
+          if (setMuted && down && !repeat && video) {
             setMuted(!muted);
           }
           break;
@@ -156,13 +156,16 @@ export default function VideoControls({
             className="size-5"
             onClick={(e: React.MouseEvent) => {
               e.stopPropagation();
-              setMuted(!muted);
+
+              if (setMuted) {
+                setMuted(!muted);
+              }
             }}
           />
           {muted == false && (
             <VolumeSlider
               className="w-20"
-              value={[volume]}
+              value={[volume ?? 1.0]}
               min={0}
               max={1}
               step={0.02}