Add click to mute/unmute volume button

src/components/player/Player.tsx

@@ -238,7 +238,7 @@ const listenHandler = (
   }
 };
 
-const Player = ({ currentEntryList, children }: any, ref: any) => {
+const Player = ({ currentEntryList, muted, children }: any, ref: any) => {
   const dispatch = useAppDispatch();
   const player1Ref = useRef<any>();
   const player2Ref = useRef<any>();
@@ -634,6 +634,7 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
             player1Ref.current.audioEl.current.src = getSrc1();
           }
         }}
+        muted={muted}
         crossOrigin="anonymous"
       />
       <ReactAudioPlayer
@@ -657,6 +658,7 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
             player2Ref.current.audioEl.current.src = getSrc2();
           }
         }}
+        muted={muted}
         crossOrigin="anonymous"
       />
       {children}

src/components/player/PlayerBar.tsx

@@ -48,6 +48,7 @@ const PlayerBar = () => {
   const [manualSeek, setManualSeek] = useState(0);
   const [currentEntryList, setCurrentEntryList] = useState('entry');
   const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume')));
+  const [muted, setMuted] = useState(false);
   const playersRef = useRef<any>();
   const history = useHistory();
 
@@ -278,7 +279,7 @@ const PlayerBar = () => {
   };
 
   return (
-    <Player ref={playersRef} currentEntryList={currentEntryList}>
+    <Player ref={playersRef} currentEntryList={currentEntryList} muted={muted}>
       {playQueue.showDebugWindow && <DebugWindow currentEntryList={currentEntryList} />}
       <PlayerContainer>
         <FlexboxGrid align="middle" style={{ height: '100%' }}>
@@ -686,14 +687,11 @@ const PlayerBar = () => {
                   {/* Volume Slider */}
                   <VolumeIcon
                     icon={
-                      playQueue.volume > 0.7
-                        ? 'volume-up'
-                        : playQueue.volume === 0
-                        ? 'volume-off'
-                        : 'volume-down'
+                      muted ? 'volume-off' : playQueue.volume > 0.7 ? 'volume-up' : 'volume-down'
                     }
+                    onClick={() => setMuted(!muted)}
                     size="lg"
-                    style={{ marginRight: '15px', padding: '0' }}
+                    style={{ cursor: 'pointer', marginRight: '15px', padding: '0' }}
                   />
                   <CustomSlider
                     tabIndex={0}