From a1cd0c4871e63d6fa4b8881a7d331213d55798df Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Fri, 27 Dec 2024 17:05:48 +0530
Subject: [PATCH 01/14] Added Volume Control Slider to BrainzPlayer

---
 frontend/css/brainzplayer.less                |  1 +
 .../common/brainzplayer/AppleMusicPlayer.tsx  | 13 ++++-
 .../src/common/brainzplayer/BrainzPlayer.tsx  |  1 +
 .../brainzplayer/BrainzPlayerContext.tsx      |  7 +++
 .../common/brainzplayer/BrainzPlayerUI.tsx    | 26 +++++++++
 .../common/brainzplayer/SoundcloudPlayer.tsx  | 45 ++++++++------
 .../src/common/brainzplayer/SpotifyPlayer.tsx | 14 ++++-
 .../src/common/brainzplayer/YoutubePlayer.tsx | 58 +++++++++++--------
 .../MultiTrackMBIDMappingModal.tsx            |  3 +-
 9 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/frontend/css/brainzplayer.less b/frontend/css/brainzplayer.less
index 9f67b334e7..5c5b93cc43 100644
--- a/frontend/css/brainzplayer.less
+++ b/frontend/css/brainzplayer.less
@@ -300,6 +300,7 @@
     opacity: 0.3;
   }
 
+  
   .dropup-content {
     // A lot of these styles are copied part from Bootstrap
     // and part from ListenBrainz (ListenCard).
diff --git a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
index ef9ddf8998..7f12637a8e 100644
--- a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
@@ -10,6 +10,7 @@ import {
 } from "../../utils/utils";
 import { DataSourceProps, DataSourceType } from "./BrainzPlayer";
 import GlobalAppContext from "../../utils/GlobalAppContext";
+import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 export type AppleMusicPlayerProps = DataSourceProps;
@@ -470,6 +471,16 @@ export default class AppleMusicPlayer
     if (!show) {
       return null;
     }
-    return <div>{this.getAlbumArt()}</div>;
+    return (
+      <BrainzPlayerContext.Consumer>
+        {(context) => {
+          const { volume } = context;
+          if (this.appleMusicPlayer.player) {
+            this.appleMusicPlayer.player.volume = volume;
+          }
+          return <div>{this.getAlbumArt()}</div>;
+        }}
+      </BrainzPlayerContext.Consumer>
+    );
   }
 }
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
index 21ec09ae0e..e8a43dcf55 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
@@ -153,6 +153,7 @@ export default function BrainzPlayer() {
     currentTrackURL,
     playerPaused,
     isActivated,
+    volume,
     durationMs,
     progressMs,
     listenSubmitted,
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
index 1cac993697..802ab88e2f 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
@@ -40,6 +40,7 @@ export type BrainzPlayerContextT = {
   currentTrackURL?: string;
   playerPaused: boolean;
   isActivated: boolean;
+  volume: number;
   durationMs: number;
   progressMs: number;
   updateTime: number;
@@ -57,6 +58,7 @@ export const initialValue: BrainzPlayerContextT = {
   currentTrackArtist: "",
   playerPaused: true,
   isActivated: false,
+  volume: 100,
   durationMs: 0,
   progressMs: 0,
   updateTime: performance.now(),
@@ -73,6 +75,7 @@ export type BrainzPlayerActionType = Partial<BrainzPlayerContextT> & {
     | "SET_PLAYBACK_TIMER"
     | "TOGGLE_REPEAT_MODE"
     | "MOVE_QUEUE_ITEM"
+    | "VOLUME_CHANGE"
     | "CLEAR_QUEUE_AFTER_CURRENT_AND_SET_AMBIENT_QUEUE"
     | "MOVE_AMBIENT_QUEUE_ITEM"
     | "MOVE_AMBIENT_QUEUE_ITEMS_TO_QUEUE"
@@ -179,6 +182,10 @@ function valueReducer(
         currentListenIndex: newCurrentListenIndex,
       };
     }
+    case "VOLUME_CHANGE": {
+      // console.log(action.payload);
+      return { ...state, volume: action.payload };
+    }
     case "MOVE_AMBIENT_QUEUE_ITEM": {
       const { ambientQueue } = state;
       const evt = action.data as any;
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
index 9bf6579261..a6b90b4543 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -3,6 +3,7 @@ import {
   faBarsStaggered,
   faFastBackward,
   faFastForward,
+  faVolumeUp,
   faHeart,
   faHeartCrack,
   faMusic,
@@ -75,6 +76,30 @@ function PlaybackControlButton(props: PlaybackControlButtonProps) {
   );
 }
 
+function VolumeControlButton() {
+  const { volume } = useBrainzPlayerContext();
+  const dispatch = useBrainzPlayerDispatch();
+  const volumeRef = React.useRef<HTMLInputElement>(null);
+  const handleVolumeChange = () => {
+    dispatch({
+      type: "VOLUME_CHANGE",
+      payload: volumeRef ? volumeRef.current.value : 100,
+    });
+  };
+  return (
+    <input
+      ref={volumeRef}
+      onMouseUp={handleVolumeChange}
+      className="volume"
+      type="range"
+      defaultValue="100"
+      max="100"
+      min="0"
+      step="5"
+    />
+  );
+}
+
 function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
   const {
     currentDataSourceName,
@@ -262,6 +287,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
             disabled={disabled}
           />
         </div>
+        <VolumeControlButton />
         <div className="actions">
           {isPlayingATrack && currentDataSourceName && (
             <a
diff --git a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
index c0c23b81fd..bc200ac6b1 100644
--- a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
@@ -9,6 +9,7 @@ import {
   searchForSoundcloudTrack,
 } from "../../utils/utils";
 import GlobalAppContext from "../../utils/GlobalAppContext";
+import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 require("../../../lib/soundcloud-player-api");
@@ -406,24 +407,32 @@ export default class SoundcloudPlayer
   render() {
     const { show } = this.props;
     return (
-      <div
-        className={`soundcloud ${!show ? "hidden" : ""}`}
-        data-testid={`soundcloud ${!show ? "hidden" : ""}`}
-      >
-        <iframe
-          id="soundcloud-iframe"
-          ref={this.iFrameRef}
-          title="Soundcloud player"
-          width="100%"
-          height="420px"
-          style={{ display: "none" }}
-          scrolling="no"
-          frameBorder="no"
-          allow="autoplay"
-          src="https://w.soundcloud.com/player/?auto_play=false"
-        />
-        <div>{this.getAlbumArt()}</div>
-      </div>
+      <BrainzPlayerContext.Consumer>
+        {(context) => {
+          const { volume } = context;
+          this.soundcloudPlayer?.setVolume(volume / 100);
+          return (
+            <div
+              className={`soundcloud ${!show ? "hidden" : ""}`}
+              data-testid={`soundcloud ${!show ? "hidden" : ""}`}
+            >
+              <iframe
+                id="soundcloud-iframe"
+                ref={this.iFrameRef}
+                title="Soundcloud player"
+                width="100%"
+                height="420px"
+                style={{ display: "none" }}
+                scrolling="no"
+                frameBorder="no"
+                allow="autoplay"
+                src="https://w.soundcloud.com/player/?auto_play=false"
+              />
+              <div>{this.getAlbumArt()}</div>
+            </div>
+          );
+        }}
+      </BrainzPlayerContext.Consumer>
     );
   }
 }
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index 32802ef04a..731b15d159 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -18,6 +18,7 @@ import {
   getArtistName,
 } from "../../utils/utils";
 import { DataSourceType, DataSourceProps } from "./BrainzPlayer";
+import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import GlobalAppContext from "../../utils/GlobalAppContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
@@ -515,7 +516,6 @@ export default class SpotifyPlayer
       duration,
       track_window: { current_track, previous_tracks },
     } = playerState;
-
     const { currentSpotifyTrack, durationMs } = this.state;
     const { playerPaused } = this.props;
     const {
@@ -617,6 +617,16 @@ export default class SpotifyPlayer
     if (!show) {
       return null;
     }
-    return <div data-testid="spotify-player">{this.getAlbumArt()}</div>;
+    return (
+      <BrainzPlayerContext.Consumer>
+        {(context) => {
+          const { volume } = context;
+          this.spotifyPlayer?.setVolume(volume / 100).then(() => {
+            console.log("volume set to ", volume);
+          });
+          return <div data-testid="spotify-player">{this.getAlbumArt()}</div>;
+        }}
+      </BrainzPlayerContext.Consumer>
+    );
   }
 }
diff --git a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
index d1848d0c8d..92c5086a14 100644
--- a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
@@ -24,6 +24,7 @@ import {
   searchForYoutubeTrack,
 } from "../../utils/utils";
 import { DataSourceProps, DataSourceType } from "./BrainzPlayer";
+import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 export type YoutubePlayerProps = DataSourceProps & {
@@ -376,30 +377,41 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
     const leftBound =
       document.body.clientWidth - draggableBoundPadding * 2 - 350;
     return (
-      <Draggable
-        handle=".youtube-drag-handle"
-        bounds={{
-          left: -leftBound,
-          right: -draggableBoundPadding,
-          bottom: -draggableBoundPadding,
+      <BrainzPlayerContext.Consumer>
+        {(context) => {
+          const { volume } = context;
+          this.youtubePlayer?.setVolume(volume);
+          return (
+            <Draggable
+              handle=".youtube-drag-handle"
+              bounds={{
+                left: -leftBound,
+                right: -draggableBoundPadding,
+                bottom: -draggableBoundPadding,
+              }}
+            >
+              <div
+                className={`youtube-wrapper${!show ? " hidden" : ""}`}
+                data-testid={`youtube-wrapper${!show ? " hidden" : ""}`}
+              >
+                <button
+                  className="btn btn-sm youtube-drag-handle"
+                  type="button"
+                >
+                  <FontAwesomeIcon icon={faArrowsAlt} />
+                </button>
+                <YouTube
+                  className="youtube-player"
+                  opts={options}
+                  onError={this.onError}
+                  onStateChange={this.handlePlayerStateChanged}
+                  onReady={this.onReady}
+                />
+              </div>
+            </Draggable>
+          );
         }}
-      >
-        <div
-          className={`youtube-wrapper${!show ? " hidden" : ""}`}
-          data-testid={`youtube-wrapper${!show ? " hidden" : ""}`}
-        >
-          <button className="btn btn-sm youtube-drag-handle" type="button">
-            <FontAwesomeIcon icon={faArrowsAlt} />
-          </button>
-          <YouTube
-            className="youtube-player"
-            opts={options}
-            onError={this.onError}
-            onStateChange={this.handlePlayerStateChanged}
-            onReady={this.onReady}
-          />
-        </div>
-      </Draggable>
+      </BrainzPlayerContext.Consumer>
     );
   }
 }
diff --git a/frontend/js/src/settings/link-listens/MultiTrackMBIDMappingModal.tsx b/frontend/js/src/settings/link-listens/MultiTrackMBIDMappingModal.tsx
index 81533b68c4..14e09fe8b1 100644
--- a/frontend/js/src/settings/link-listens/MultiTrackMBIDMappingModal.tsx
+++ b/frontend/js/src/settings/link-listens/MultiTrackMBIDMappingModal.tsx
@@ -300,7 +300,8 @@ export default NiceModal.create(
       matchingTracks && Object.entries(matchingTracks);
     const hasMatches = Boolean(matchingTracksEntries?.length);
     const unmatchedItems =
-      unlinkedListens.filter((md) => !matchingTracks?.[md.recording_msid]) ?? [];
+      unlinkedListens.filter((md) => !matchingTracks?.[md.recording_msid]) ??
+      [];
 
     // We may need to escape or replace the Lucene search special characters
     // + - && || ! ( ) { } [ ] ^ " ~ * ? : \ /     as described in

From f753ce3642c083570eda9f45302398b781bbf1f7 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Fri, 27 Dec 2024 18:02:53 +0530
Subject: [PATCH 02/14] Removed debug console.log() statements

---
 frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx | 1 -
 frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx       | 4 +---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
index 802ab88e2f..2415b415e5 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
@@ -183,7 +183,6 @@ function valueReducer(
       };
     }
     case "VOLUME_CHANGE": {
-      // console.log(action.payload);
       return { ...state, volume: action.payload };
     }
     case "MOVE_AMBIENT_QUEUE_ITEM": {
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index 731b15d159..3b5df42279 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -621,9 +621,7 @@ export default class SpotifyPlayer
       <BrainzPlayerContext.Consumer>
         {(context) => {
           const { volume } = context;
-          this.spotifyPlayer?.setVolume(volume / 100).then(() => {
-            console.log("volume set to ", volume);
-          });
+          this.spotifyPlayer?.setVolume(volume / 100);
           return <div data-testid="spotify-player">{this.getAlbumArt()}</div>;
         }}
       </BrainzPlayerContext.Consumer>

From 49e3cc3d1788771e1575c0fa19490b1b2a9feb12 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Sat, 4 Jan 2025 02:47:26 +0530
Subject: [PATCH 03/14] Lint css files

---
 frontend/css/brainzplayer.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/css/brainzplayer.less b/frontend/css/brainzplayer.less
index 5c5b93cc43..9f67b334e7 100644
--- a/frontend/css/brainzplayer.less
+++ b/frontend/css/brainzplayer.less
@@ -300,7 +300,6 @@
     opacity: 0.3;
   }
 
-  
   .dropup-content {
     // A lot of these styles are copied part from Bootstrap
     // and part from ListenBrainz (ListenCard).

From e21d4496ed068c8493d4c4ab224ff97fdd40f268 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Tue, 7 Jan 2025 20:38:09 +0530
Subject: [PATCH 04/14] Fixed some errors

---
 frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
index 2415b415e5..050319f787 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
@@ -86,6 +86,7 @@ export type BrainzPlayerActionType = Partial<BrainzPlayerContextT> & {
     | "ADD_LISTEN_TO_BOTTOM_OF_AMBIENT_QUEUE"
     | "ADD_MULTIPLE_LISTEN_TO_BOTTOM_OF_AMBIENT_QUEUE";
   data?: any;
+  payload?: any;
 };
 
 function valueReducer(

From 602ecaa3197b6b00f549dc086ffd7c2782f4a172 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Wed, 8 Jan 2025 14:06:02 +0530
Subject: [PATCH 05/14] Fix some TS errors

---
 frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx | 5 +++--
 frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx   | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
index 7f12637a8e..e49c07d3d1 100644
--- a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
@@ -475,8 +475,9 @@ export default class AppleMusicPlayer
       <BrainzPlayerContext.Consumer>
         {(context) => {
           const { volume } = context;
-          if (this.appleMusicPlayer.player) {
-            this.appleMusicPlayer.player.volume = volume;
+          const player = this.appleMusicPlayer?.player;
+          if (player) {
+            player.volume = volume;
           }
           return <div>{this.getAlbumArt()}</div>;
         }}
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
index a6b90b4543..245da8cf42 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -83,7 +83,11 @@ function VolumeControlButton() {
   const handleVolumeChange = () => {
     dispatch({
       type: "VOLUME_CHANGE",
-      payload: volumeRef ? volumeRef.current.value : 100,
+      payload: volumeRef
+        ? volumeRef.current?.value
+          ? volumeRef.current.value
+          : 100
+        : 100,
     });
   };
   return (

From c9b2d31eb7841475d99089d614f3d556b428b1ff Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Wed, 8 Jan 2025 22:02:02 +0530
Subject: [PATCH 06/14] Better coding practices and implemented few suggested
 changes

---
 .../common/brainzplayer/AppleMusicPlayer.tsx  | 21 +++----
 .../src/common/brainzplayer/BrainzPlayer.tsx  |  4 ++
 .../brainzplayer/BrainzPlayerContext.tsx      |  3 +-
 .../common/brainzplayer/BrainzPlayerUI.tsx    |  7 +--
 .../common/brainzplayer/SoundcloudPlayer.tsx  | 50 +++++++--------
 .../src/common/brainzplayer/SpotifyPlayer.tsx | 16 ++---
 .../src/common/brainzplayer/YoutubePlayer.tsx | 63 ++++++++-----------
 frontend/js/src/utils/musickit.d.ts           |  1 +
 8 files changed, 67 insertions(+), 98 deletions(-)

diff --git a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
index e49c07d3d1..00074e53b0 100644
--- a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
@@ -13,7 +13,7 @@ import GlobalAppContext from "../../utils/GlobalAppContext";
 import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
-export type AppleMusicPlayerProps = DataSourceProps;
+export type AppleMusicPlayerProps = DataSourceProps & { volume: number };
 
 export type AppleMusicPlayerState = {
   currentAppleMusicTrack?: MusicKit.MediaItem;
@@ -467,21 +467,14 @@ export default class AppleMusicPlayer
   };
 
   render() {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    const player = this.appleMusicPlayer;
+    if (player) {
+      player.volume = volume / 100;
+    }
     if (!show) {
       return null;
     }
-    return (
-      <BrainzPlayerContext.Consumer>
-        {(context) => {
-          const { volume } = context;
-          const player = this.appleMusicPlayer?.player;
-          if (player) {
-            player.volume = volume;
-          }
-          return <div>{this.getAlbumArt()}</div>;
-        }}
-      </BrainzPlayerContext.Consumer>
-    );
+    return <div>{this.getAlbumArt()}</div>;
   }
 }
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
index e8a43dcf55..7edd080283 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
@@ -1024,6 +1024,7 @@ export default function BrainzPlayer() {
       >
         {userPreferences?.brainzplayer?.spotifyEnabled !== false && (
           <SpotifyPlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof
@@ -1046,6 +1047,7 @@ export default function BrainzPlayer() {
         )}
         {userPreferences?.brainzplayer?.youtubeEnabled !== false && (
           <YoutubePlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof
@@ -1069,6 +1071,7 @@ export default function BrainzPlayer() {
         )}
         {userPreferences?.brainzplayer?.soundcloudEnabled !== false && (
           <SoundcloudPlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof
@@ -1091,6 +1094,7 @@ export default function BrainzPlayer() {
         )}
         {userPreferences?.brainzplayer?.appleMusicEnabled !== false && (
           <AppleMusicPlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
index 050319f787..54f11dffd8 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerContext.tsx
@@ -86,7 +86,6 @@ export type BrainzPlayerActionType = Partial<BrainzPlayerContextT> & {
     | "ADD_LISTEN_TO_BOTTOM_OF_AMBIENT_QUEUE"
     | "ADD_MULTIPLE_LISTEN_TO_BOTTOM_OF_AMBIENT_QUEUE";
   data?: any;
-  payload?: any;
 };
 
 function valueReducer(
@@ -184,7 +183,7 @@ function valueReducer(
       };
     }
     case "VOLUME_CHANGE": {
-      return { ...state, volume: action.payload };
+      return { ...state, volume: action.data };
     }
     case "MOVE_AMBIENT_QUEUE_ITEM": {
       const { ambientQueue } = state;
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
index 245da8cf42..c97160ad81 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -3,7 +3,6 @@ import {
   faBarsStaggered,
   faFastBackward,
   faFastForward,
-  faVolumeUp,
   faHeart,
   faHeartCrack,
   faMusic,
@@ -83,11 +82,7 @@ function VolumeControlButton() {
   const handleVolumeChange = () => {
     dispatch({
       type: "VOLUME_CHANGE",
-      payload: volumeRef
-        ? volumeRef.current?.value
-          ? volumeRef.current.value
-          : 100
-        : 100,
+      data: volumeRef?.current?.value ?? 100,
     });
   };
   return (
diff --git a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
index bc200ac6b1..e56a6def7e 100644
--- a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
@@ -65,7 +65,7 @@ export type SoundcloudPlayerState = {
 
 export type SoundCloudPlayerProps = DataSourceProps & {
   refreshSoundcloudToken: () => Promise<string>;
-};
+} & { volume: number };
 
 export default class SoundcloudPlayer
   extends React.Component<SoundCloudPlayerProps, SoundcloudPlayerState>
@@ -405,34 +405,28 @@ export default class SoundcloudPlayer
   };
 
   render() {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    this.soundcloudPlayer?.setVolume(volume / 100);
+
     return (
-      <BrainzPlayerContext.Consumer>
-        {(context) => {
-          const { volume } = context;
-          this.soundcloudPlayer?.setVolume(volume / 100);
-          return (
-            <div
-              className={`soundcloud ${!show ? "hidden" : ""}`}
-              data-testid={`soundcloud ${!show ? "hidden" : ""}`}
-            >
-              <iframe
-                id="soundcloud-iframe"
-                ref={this.iFrameRef}
-                title="Soundcloud player"
-                width="100%"
-                height="420px"
-                style={{ display: "none" }}
-                scrolling="no"
-                frameBorder="no"
-                allow="autoplay"
-                src="https://w.soundcloud.com/player/?auto_play=false"
-              />
-              <div>{this.getAlbumArt()}</div>
-            </div>
-          );
-        }}
-      </BrainzPlayerContext.Consumer>
+      <div
+        className={`soundcloud ${!show ? "hidden" : ""}`}
+        data-testid={`soundcloud ${!show ? "hidden" : ""}`}
+      >
+        <iframe
+          id="soundcloud-iframe"
+          ref={this.iFrameRef}
+          title="Soundcloud player"
+          width="100%"
+          height="420px"
+          style={{ display: "none" }}
+          scrolling="no"
+          frameBorder="no"
+          allow="autoplay"
+          src="https://w.soundcloud.com/player/?auto_play=false"
+        />
+        <div>{this.getAlbumArt()}</div>
+      </div>
     );
   }
 }
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index 3b5df42279..54dd3f78be 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -18,7 +18,6 @@ import {
   getArtistName,
 } from "../../utils/utils";
 import { DataSourceType, DataSourceProps } from "./BrainzPlayer";
-import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import GlobalAppContext from "../../utils/GlobalAppContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
@@ -38,7 +37,7 @@ const fixSpotifyPlayerStyleIssue = () => {
 
 export type SpotifyPlayerProps = DataSourceProps & {
   refreshSpotifyToken: () => Promise<string>;
-};
+} & { volume: number };
 
 export type SpotifyPlayerState = {
   currentSpotifyTrack?: SpotifyTrack;
@@ -613,18 +612,11 @@ export default class SpotifyPlayer
   };
 
   render() {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    this.spotifyPlayer?.setVolume(volume / 100);
     if (!show) {
       return null;
     }
-    return (
-      <BrainzPlayerContext.Consumer>
-        {(context) => {
-          const { volume } = context;
-          this.spotifyPlayer?.setVolume(volume / 100);
-          return <div data-testid="spotify-player">{this.getAlbumArt()}</div>;
-        }}
-      </BrainzPlayerContext.Consumer>
-    );
+    return <div data-testid="spotify-player">{this.getAlbumArt()}</div>;
   }
 }
diff --git a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
index 92c5086a14..504bdfd831 100644
--- a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
@@ -30,7 +30,7 @@ import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSetting
 export type YoutubePlayerProps = DataSourceProps & {
   youtubeUser?: YoutubeUser;
   refreshYoutubeToken: () => Promise<string>;
-};
+} & { volume: number };
 
 // For some reason Youtube types do not document getVideoData,
 // which we need to determine if there was no search results
@@ -358,7 +358,8 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
   };
 
   render() {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    this.youtubePlayer?.setVolume(volume);
     const options: Options = {
       playerVars: {
         controls: 0,
@@ -376,42 +377,32 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
     // width of screen - padding on each side - youtube player width
     const leftBound =
       document.body.clientWidth - draggableBoundPadding * 2 - 350;
+
     return (
-      <BrainzPlayerContext.Consumer>
-        {(context) => {
-          const { volume } = context;
-          this.youtubePlayer?.setVolume(volume);
-          return (
-            <Draggable
-              handle=".youtube-drag-handle"
-              bounds={{
-                left: -leftBound,
-                right: -draggableBoundPadding,
-                bottom: -draggableBoundPadding,
-              }}
-            >
-              <div
-                className={`youtube-wrapper${!show ? " hidden" : ""}`}
-                data-testid={`youtube-wrapper${!show ? " hidden" : ""}`}
-              >
-                <button
-                  className="btn btn-sm youtube-drag-handle"
-                  type="button"
-                >
-                  <FontAwesomeIcon icon={faArrowsAlt} />
-                </button>
-                <YouTube
-                  className="youtube-player"
-                  opts={options}
-                  onError={this.onError}
-                  onStateChange={this.handlePlayerStateChanged}
-                  onReady={this.onReady}
-                />
-              </div>
-            </Draggable>
-          );
+      <Draggable
+        handle=".youtube-drag-handle"
+        bounds={{
+          left: -leftBound,
+          right: -draggableBoundPadding,
+          bottom: -draggableBoundPadding,
         }}
-      </BrainzPlayerContext.Consumer>
+      >
+        <div
+          className={`youtube-wrapper${!show ? " hidden" : ""}`}
+          data-testid={`youtube-wrapper${!show ? " hidden" : ""}`}
+        >
+          <button className="btn btn-sm youtube-drag-handle" type="button">
+            <FontAwesomeIcon icon={faArrowsAlt} />
+          </button>
+          <YouTube
+            className="youtube-player"
+            opts={options}
+            onError={this.onError}
+            onStateChange={this.handlePlayerStateChanged}
+            onReady={this.onReady}
+          />
+        </div>
+      </Draggable>
     );
   }
 }
diff --git a/frontend/js/src/utils/musickit.d.ts b/frontend/js/src/utils/musickit.d.ts
index ba1ef9e7a2..e6b6d4c99c 100644
--- a/frontend/js/src/utils/musickit.d.ts
+++ b/frontend/js/src/utils/musickit.d.ts
@@ -228,6 +228,7 @@ declare namespace MusicKit {
     setQueue(options: SetQueueOptions): Promise<any>;
 
     stop(): void;
+    volume: number;
   }
 
   declare type NowPlayingItem = {

From db6dcfe2b33fc681b9a7668091f1d0c08ffe887b Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Wed, 8 Jan 2025 22:15:03 +0530
Subject: [PATCH 07/14] Fixed test files errors

---
 frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx | 1 +
 frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx    | 1 +
 frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx    | 1 +
 3 files changed, 3 insertions(+)

diff --git a/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx b/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx
index 80b493176f..aef8e7b5d8 100644
--- a/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx
+++ b/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx
@@ -26,6 +26,7 @@ const defaultContext = {
 
 const props = {
   show: true,
+  volume: 100,
   playerPaused: false,
   refreshSoundcloudToken: new APIService("base-uri").refreshSoundcloudToken,
   onPlayerPausedChange: (paused: boolean) => {},
diff --git a/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx b/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx
index 71d72c143f..4d02b15b94 100644
--- a/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx
+++ b/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx
@@ -28,6 +28,7 @@ const defaultContext = {
 const props = {
   refreshSpotifyToken: new APIService("base-uri").refreshSpotifyToken,
   show: true,
+  volume: 100,
   playerPaused: false,
   onPlayerPausedChange: (paused: boolean) => {},
   onProgressChange: (progressMs: number) => {},
diff --git a/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx b/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx
index 261e770e18..b0d044cae9 100644
--- a/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx
+++ b/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx
@@ -8,6 +8,7 @@ import APIService from "../../../src/utils/APIService";
 
 const props = {
   show: true,
+  volume: 100,
   playerPaused: false,
   youtubeUser: {
     api_key: "fake-api-key",

From ab8fd775e8eec8d3ae776fdb766035568fe81550 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Thu, 9 Jan 2025 13:06:45 +0530
Subject: [PATCH 08/14] Moved VolumeControlButton to a new file and set default
 volume

---
 .../common/brainzplayer/AppleMusicPlayer.tsx  |  4 +--
 .../src/common/brainzplayer/BrainzPlayer.tsx  |  1 +
 .../common/brainzplayer/BrainzPlayerUI.tsx    | 29 ++---------------
 .../common/brainzplayer/SoundcloudPlayer.tsx  |  4 +--
 .../src/common/brainzplayer/SpotifyPlayer.tsx | 10 +++---
 .../brainzplayer/VolumeControlButton.tsx      | 32 +++++++++++++++++++
 .../src/common/brainzplayer/YoutubePlayer.tsx |  4 +--
 .../brainzplayer/SpotifyPlayer.test.tsx       |  1 -
 8 files changed, 47 insertions(+), 38 deletions(-)
 create mode 100644 frontend/js/src/common/brainzplayer/VolumeControlButton.tsx

diff --git a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
index 00074e53b0..df4e40be30 100644
--- a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
@@ -13,7 +13,7 @@ import GlobalAppContext from "../../utils/GlobalAppContext";
 import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
-export type AppleMusicPlayerProps = DataSourceProps & { volume: number };
+export type AppleMusicPlayerProps = DataSourceProps;
 
 export type AppleMusicPlayerState = {
   currentAppleMusicTrack?: MusicKit.MediaItem;
@@ -470,7 +470,7 @@ export default class AppleMusicPlayer
     const { show, volume } = this.props;
     const player = this.appleMusicPlayer;
     if (player) {
-      player.volume = volume / 100;
+      player.volume = (volume ?? 100) / 100;
     }
     if (!show) {
       return null;
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
index 7edd080283..1c11620416 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
@@ -58,6 +58,7 @@ export type DataSourceTypes =
 
 export type DataSourceProps = {
   show: boolean;
+  volume?: number;
   playerPaused: boolean;
   onPlayerPausedChange: (paused: boolean) => void;
   onProgressChange: (progressMs: number) => void;
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
index c97160ad81..4591a40e2f 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -29,6 +29,7 @@ import {
   useBrainzPlayerDispatch,
 } from "./BrainzPlayerContext";
 import Queue from "./Queue";
+import VolumeControlButton from "./VolumeControlButton";
 
 type BrainzPlayerUIProps = {
   currentDataSourceName?: string;
@@ -75,30 +76,6 @@ function PlaybackControlButton(props: PlaybackControlButtonProps) {
   );
 }
 
-function VolumeControlButton() {
-  const { volume } = useBrainzPlayerContext();
-  const dispatch = useBrainzPlayerDispatch();
-  const volumeRef = React.useRef<HTMLInputElement>(null);
-  const handleVolumeChange = () => {
-    dispatch({
-      type: "VOLUME_CHANGE",
-      data: volumeRef?.current?.value ?? 100,
-    });
-  };
-  return (
-    <input
-      ref={volumeRef}
-      onMouseUp={handleVolumeChange}
-      className="volume"
-      type="range"
-      defaultValue="100"
-      max="100"
-      min="0"
-      step="5"
-    />
-  );
-}
-
 function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
   const {
     currentDataSourceName,
@@ -112,7 +89,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
   const { currentUser } = React.useContext(GlobalAppContext);
 
   // BrainzPlayerContext
-  const { queueRepeatMode } = useBrainzPlayerContext();
+  const { queueRepeatMode, volume } = useBrainzPlayerContext();
   const dispatch = useBrainzPlayerDispatch();
 
   // const { currentListenFeedback } = this.state;
@@ -286,7 +263,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
             disabled={disabled}
           />
         </div>
-        <VolumeControlButton />
+        <VolumeControlButton volume={volume} />
         <div className="actions">
           {isPlayingATrack && currentDataSourceName && (
             <a
diff --git a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
index e56a6def7e..d89ff0c4ad 100644
--- a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
@@ -65,7 +65,7 @@ export type SoundcloudPlayerState = {
 
 export type SoundCloudPlayerProps = DataSourceProps & {
   refreshSoundcloudToken: () => Promise<string>;
-} & { volume: number };
+};
 
 export default class SoundcloudPlayer
   extends React.Component<SoundCloudPlayerProps, SoundcloudPlayerState>
@@ -406,7 +406,7 @@ export default class SoundcloudPlayer
 
   render() {
     const { show, volume } = this.props;
-    this.soundcloudPlayer?.setVolume(volume / 100);
+    this.soundcloudPlayer?.setVolume((volume ?? 100) / 100);
 
     return (
       <div
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index 54dd3f78be..38383a179a 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -37,7 +37,7 @@ const fixSpotifyPlayerStyleIssue = () => {
 
 export type SpotifyPlayerProps = DataSourceProps & {
   refreshSpotifyToken: () => Promise<string>;
-} & { volume: number };
+};
 
 export type SpotifyPlayerState = {
   currentSpotifyTrack?: SpotifyTrack;
@@ -316,7 +316,7 @@ export default class SpotifyPlayer
   };
 
   playListen = (listen: Listen | JSPFTrack): void => {
-    const { show } = this.props;
+    const { show, volume } = this.props;
     if (!show) {
       return;
     }
@@ -436,7 +436,7 @@ export default class SpotifyPlayer
       );
       return;
     }
-    const { refreshSpotifyToken } = this.props;
+    const { refreshSpotifyToken, volume } = this.props;
     const { spotifyAuth: spotifyUser = undefined } = this.context;
 
     this.spotifyPlayer = new window.Spotify.Player({
@@ -462,7 +462,7 @@ export default class SpotifyPlayer
           );
         }
       },
-      volume: 0.7, // Careful with this, now…
+      volume, // Careful with this, now…
     });
 
     // Error handling
@@ -613,7 +613,7 @@ export default class SpotifyPlayer
 
   render() {
     const { show, volume } = this.props;
-    this.spotifyPlayer?.setVolume(volume / 100);
+    this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
     if (!show) {
       return null;
     }
diff --git a/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
new file mode 100644
index 0000000000..95727f6067
--- /dev/null
+++ b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { useBrainzPlayerDispatch } from "./BrainzPlayerContext";
+
+type VolumeControlButtonProps = {
+  volume: number;
+};
+
+function VolumeControlButton(props: VolumeControlButtonProps) {
+  const { volume } = props;
+  const dispatch = useBrainzPlayerDispatch();
+  const volumeRef = React.useRef<HTMLInputElement>(null);
+  const handleVolumeChange = () => {
+    dispatch({
+      type: "VOLUME_CHANGE",
+      data: volumeRef?.current?.value ?? 100,
+    });
+  };
+  return (
+    <input
+      ref={volumeRef}
+      onMouseUp={handleVolumeChange}
+      className="volume"
+      type="range"
+      defaultValue="100"
+      max="100"
+      min="0"
+      step="5"
+    />
+  );
+}
+
+export default VolumeControlButton;
diff --git a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
index 504bdfd831..63d3879cd1 100644
--- a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
@@ -30,7 +30,7 @@ import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSetting
 export type YoutubePlayerProps = DataSourceProps & {
   youtubeUser?: YoutubeUser;
   refreshYoutubeToken: () => Promise<string>;
-} & { volume: number };
+};
 
 // For some reason Youtube types do not document getVideoData,
 // which we need to determine if there was no search results
@@ -359,7 +359,7 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
 
   render() {
     const { show, volume } = this.props;
-    this.youtubePlayer?.setVolume(volume);
+    this.youtubePlayer?.setVolume(volume ?? 100);
     const options: Options = {
       playerVars: {
         controls: 0,
diff --git a/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx b/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx
index 4d02b15b94..71d72c143f 100644
--- a/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx
+++ b/frontend/js/tests/common/brainzplayer/SpotifyPlayer.test.tsx
@@ -28,7 +28,6 @@ const defaultContext = {
 const props = {
   refreshSpotifyToken: new APIService("base-uri").refreshSpotifyToken,
   show: true,
-  volume: 100,
   playerPaused: false,
   onPlayerPausedChange: (paused: boolean) => {},
   onProgressChange: (progressMs: number) => {},

From b7b042327002bd4039ac1a55b7892afb836daf17 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Sun, 12 Jan 2025 23:05:25 +0530
Subject: [PATCH 09/14] Hide volume slider for small and extra small viewports

---
 frontend/css/brainzplayer.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/css/brainzplayer.less b/frontend/css/brainzplayer.less
index 9f67b334e7..2ac86d2bc2 100644
--- a/frontend/css/brainzplayer.less
+++ b/frontend/css/brainzplayer.less
@@ -349,6 +349,10 @@
       }
     }
   }
+  .volume {
+    .hidden-xs;
+    .hidden-sm;
+  }
 }
 
 .queue {

From 89b67bd2d6acabd27fc17ee897b2c050b85ee83a Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Tue, 14 Jan 2025 12:03:19 +0530
Subject: [PATCH 10/14] Changed few css classes and code refactoring

---
 frontend/css/brainzplayer.less                              | 4 ----
 frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx       | 4 ++--
 frontend/js/src/common/brainzplayer/VolumeControlButton.tsx | 1 -
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/css/brainzplayer.less b/frontend/css/brainzplayer.less
index 2ac86d2bc2..9f67b334e7 100644
--- a/frontend/css/brainzplayer.less
+++ b/frontend/css/brainzplayer.less
@@ -349,10 +349,6 @@
       }
     }
   }
-  .volume {
-    .hidden-xs;
-    .hidden-sm;
-  }
 }
 
 .queue {
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index 38383a179a..3fb100148e 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -316,7 +316,7 @@ export default class SpotifyPlayer
   };
 
   playListen = (listen: Listen | JSPFTrack): void => {
-    const { show, volume } = this.props;
+    const { show } = this.props;
     if (!show) {
       return;
     }
@@ -462,7 +462,7 @@ export default class SpotifyPlayer
           );
         }
       },
-      volume, // Careful with this, now…
+      volume: volume ?? 100 / 100,
     });
 
     // Error handling
diff --git a/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
index 95727f6067..40fb343fa9 100644
--- a/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
+++ b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
@@ -6,7 +6,6 @@ type VolumeControlButtonProps = {
 };
 
 function VolumeControlButton(props: VolumeControlButtonProps) {
-  const { volume } = props;
   const dispatch = useBrainzPlayerDispatch();
   const volumeRef = React.useRef<HTMLInputElement>(null);
   const handleVolumeChange = () => {

From c851b1e10d885d14faebbcfd6595b5c00e918a28 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Tue, 14 Jan 2025 18:13:46 +0530
Subject: [PATCH 11/14] Removed setVolume from render function in all the
 players and fixed spotify volume updates in spotify app

---
 .../js/src/common/brainzplayer/AppleMusicPlayer.tsx  | 12 ++++++------
 .../js/src/common/brainzplayer/SoundcloudPlayer.tsx  |  6 +++---
 .../js/src/common/brainzplayer/SpotifyPlayer.tsx     | 10 ++++++----
 .../js/src/common/brainzplayer/YoutubePlayer.tsx     |  6 +++---
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
index df4e40be30..dac79766e3 100644
--- a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
@@ -149,7 +149,11 @@ export default class AppleMusicPlayer
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    const player = this.appleMusicPlayer;
+    if (player) {
+      player.volume = (volume ?? 100) / 100;
+    }
     if (prevProps.show && !show) {
       this.stopAndClear();
     }
@@ -467,11 +471,7 @@ export default class AppleMusicPlayer
   };
 
   render() {
-    const { show, volume } = this.props;
-    const player = this.appleMusicPlayer;
-    if (player) {
-      player.volume = (volume ?? 100) / 100;
-    }
+    const { show } = this.props;
     if (!show) {
       return null;
     }
diff --git a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
index d89ff0c4ad..b1f4982c30 100644
--- a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
@@ -153,7 +153,8 @@ export default class SoundcloudPlayer
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    this.soundcloudPlayer?.setVolume((volume ?? 100) / 100);
     if (prevProps.show && !show && this.soundcloudPlayer) {
       this.soundcloudPlayer.pause();
     }
@@ -405,8 +406,7 @@ export default class SoundcloudPlayer
   };
 
   render() {
-    const { show, volume } = this.props;
-    this.soundcloudPlayer?.setVolume((volume ?? 100) / 100);
+    const { show } = this.props;
 
     return (
       <div
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index 3fb100148e..f27a73f4da 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -142,7 +142,9 @@ export default class SpotifyPlayer
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
+
     if (prevProps.show === true && show === false) {
       this.stopAndClear();
     }
@@ -516,7 +518,8 @@ export default class SpotifyPlayer
       track_window: { current_track, previous_tracks },
     } = playerState;
     const { currentSpotifyTrack, durationMs } = this.state;
-    const { playerPaused } = this.props;
+    const { playerPaused, volume } = this.props;
+    this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
     const {
       onPlayerPausedChange,
       onProgressChange,
@@ -612,8 +615,7 @@ export default class SpotifyPlayer
   };
 
   render() {
-    const { show, volume } = this.props;
-    this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
+    const { show } = this.props;
     if (!show) {
       return null;
     }
diff --git a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
index 63d3879cd1..4486b8a6f1 100644
--- a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
@@ -119,7 +119,8 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
   checkVideoLoadedTimerId?: NodeJS.Timeout;
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    this.youtubePlayer?.setVolume(volume ?? 100);
     if (prevProps.show && !show && this.youtubePlayer) {
       this.youtubePlayer.stopVideo();
       // Clear playlist
@@ -358,8 +359,7 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
   };
 
   render() {
-    const { show, volume } = this.props;
-    this.youtubePlayer?.setVolume(volume ?? 100);
+    const { show } = this.props;
     const options: Options = {
       playerVars: {
         controls: 0,

From 1faccbe928171272e151bcca28edd7629135e67a Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Wed, 15 Jan 2025 18:00:10 +0530
Subject: [PATCH 12/14] Removed unused elemts from props, fixed linting errors

---
 frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx      | 2 +-
 frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx    | 5 ++++-
 frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx       | 4 +++-
 frontend/js/src/common/brainzplayer/VolumeControlButton.tsx | 6 +-----
 frontend/js/src/common/brainzplayer/YoutubePlayer.tsx       | 4 +++-
 .../js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx  | 1 -
 .../js/tests/common/brainzplayer/YoutubePlayer.test.tsx     | 1 -
 7 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
index 4591a40e2f..9953c42adb 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -263,7 +263,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
             disabled={disabled}
           />
         </div>
-        <VolumeControlButton volume={volume} />
+        <VolumeControlButton />
         <div className="actions">
           {isPlayingATrack && currentDataSourceName && (
             <a
diff --git a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
index b1f4982c30..52c09b8f64 100644
--- a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
@@ -154,7 +154,10 @@ export default class SoundcloudPlayer
 
   componentDidUpdate(prevProps: DataSourceProps) {
     const { show, volume } = this.props;
-    this.soundcloudPlayer?.setVolume((volume ?? 100) / 100);
+    if (this.soundcloudPlayer?.setVolume) {
+      this.soundcloudPlayer?.setVolume((volume ?? 100) / 100);
+    }
+
     if (prevProps.show && !show && this.soundcloudPlayer) {
       this.soundcloudPlayer.pause();
     }
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index f27a73f4da..5282f767e4 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -143,7 +143,9 @@ export default class SpotifyPlayer
 
   componentDidUpdate(prevProps: DataSourceProps) {
     const { show, volume } = this.props;
-    this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
+    if (this.spotifyPlayer?.setVolume) {
+      this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
+    }
 
     if (prevProps.show === true && show === false) {
       this.stopAndClear();
diff --git a/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
index 40fb343fa9..065b09bc19 100644
--- a/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
+++ b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
@@ -1,11 +1,7 @@
 import * as React from "react";
 import { useBrainzPlayerDispatch } from "./BrainzPlayerContext";
 
-type VolumeControlButtonProps = {
-  volume: number;
-};
-
-function VolumeControlButton(props: VolumeControlButtonProps) {
+function VolumeControlButton() {
   const dispatch = useBrainzPlayerDispatch();
   const volumeRef = React.useRef<HTMLInputElement>(null);
   const handleVolumeChange = () => {
diff --git a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
index 4486b8a6f1..c5d8976caf 100644
--- a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
@@ -120,7 +120,9 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
 
   componentDidUpdate(prevProps: DataSourceProps) {
     const { show, volume } = this.props;
-    this.youtubePlayer?.setVolume(volume ?? 100);
+    if (this.youtubePlayer?.setVolume) {
+      this.youtubePlayer?.setVolume(volume ?? 100);
+    }
     if (prevProps.show && !show && this.youtubePlayer) {
       this.youtubePlayer.stopVideo();
       // Clear playlist
diff --git a/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx b/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx
index aef8e7b5d8..80b493176f 100644
--- a/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx
+++ b/frontend/js/tests/common/brainzplayer/SoundcloudPlayer.test.tsx
@@ -26,7 +26,6 @@ const defaultContext = {
 
 const props = {
   show: true,
-  volume: 100,
   playerPaused: false,
   refreshSoundcloudToken: new APIService("base-uri").refreshSoundcloudToken,
   onPlayerPausedChange: (paused: boolean) => {},
diff --git a/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx b/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx
index b0d044cae9..261e770e18 100644
--- a/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx
+++ b/frontend/js/tests/common/brainzplayer/YoutubePlayer.test.tsx
@@ -8,7 +8,6 @@ import APIService from "../../../src/utils/APIService";
 
 const props = {
   show: true,
-  volume: 100,
   playerPaused: false,
   youtubeUser: {
     api_key: "fake-api-key",

From d551af7d242e849682f0bfcb814f6f6c4b697cfa Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Thu, 16 Jan 2025 13:38:07 +0530
Subject: [PATCH 13/14] Added button to reveal volume slider and refactored
 code

---
 frontend/css/brainzplayer.less                | 17 +++++++++
 .../common/brainzplayer/AppleMusicPlayer.tsx  |  2 +-
 .../common/brainzplayer/BrainzPlayerUI.tsx    | 38 +++++++++++++------
 .../common/brainzplayer/SoundcloudPlayer.tsx  |  2 +-
 .../src/common/brainzplayer/SpotifyPlayer.tsx |  2 +-
 .../brainzplayer/VolumeControlButton.tsx      |  8 ++--
 .../src/common/brainzplayer/YoutubePlayer.tsx |  2 +-
 7 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/frontend/css/brainzplayer.less b/frontend/css/brainzplayer.less
index 9f67b334e7..2b3b3d747c 100644
--- a/frontend/css/brainzplayer.less
+++ b/frontend/css/brainzplayer.less
@@ -351,6 +351,23 @@
   }
 }
 
+.volume {
+  position: fixed;
+  width: fit-content;
+  z-index: 109;
+  height: 10em;
+  background-color: #f8f8f8;
+  right: 16em;
+  .volume-input {
+    width: 7em;
+    margin-top: @brainzplayer-height;
+    transform: rotate(270deg);
+  }
+  &.show {
+    bottom: @brainzplayer-height;
+  }
+}
+
 .queue {
   position: fixed;
   padding: 1em;
diff --git a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
index dac79766e3..a393544da0 100644
--- a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
@@ -151,7 +151,7 @@ export default class AppleMusicPlayer
   componentDidUpdate(prevProps: DataSourceProps) {
     const { show, volume } = this.props;
     const player = this.appleMusicPlayer;
-    if (player) {
+    if (prevProps.volume !== volume && player) {
       player.volume = (volume ?? 100) / 100;
     }
     if (prevProps.show && !show) {
diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
index 9953c42adb..5cb40fb4ac 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -9,6 +9,7 @@ import {
   faPauseCircle,
   faPlayCircle,
   faSlash,
+  faVolumeUp,
 } from "@fortawesome/free-solid-svg-icons";
 import * as React from "react";
 
@@ -192,6 +193,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
   const playbackDisabledText = "Playback disabled in preferences";
 
   const [showQueue, setShowQueue] = React.useState(false);
+  const [showVolume, setShowVolume] = React.useState(false);
 
   const toggleRepeatMode = () => {
     dispatch({ type: "TOGGLE_REPEAT_MODE" });
@@ -199,6 +201,10 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
 
   return (
     <>
+      <div className={`volume ${showVolume ? "show" : ""}`}>
+        <VolumeControlButton />
+      </div>
+
       <div className={`queue ${showQueue ? "show" : ""}`}>
         <Queue clearQueue={clearQueue} onHide={() => setShowQueue(false)} />
       </div>
@@ -263,23 +269,31 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
             disabled={disabled}
           />
         </div>
-        <VolumeControlButton />
         <div className="actions">
           {isPlayingATrack && currentDataSourceName && (
-            <a
-              href={trackUrl || "#"}
-              className="music-service-icon"
-              aria-label={`Open in ${currentDataSourceName}`}
-              title={`Open in ${currentDataSourceName}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <>
+              <a
+                href={trackUrl || "#"}
+                className="music-service-icon"
+                aria-label={`Open in ${currentDataSourceName}`}
+                title={`Open in ${currentDataSourceName}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FontAwesomeIcon
+                  icon={currentDataSourceIcon!}
+                  color={currentDataSourceIconColor}
+                />
+              </a>
               <FontAwesomeIcon
-                icon={currentDataSourceIcon!}
-                color={currentDataSourceIconColor}
+                icon={faVolumeUp}
+                style={{ color: showVolume ? "green" : "" }}
+                onClick={() => setShowVolume((showVolume) => !showVolume)}
+                className="hidden-sm hidden-xs"
               />
-            </a>
+            </>
           )}
+
           <FontAwesomeIcon
             icon={faBarsStaggered}
             style={{ color: showQueue ? "green" : "" }}
diff --git a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
index 52c09b8f64..5b0896790b 100644
--- a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
@@ -154,7 +154,7 @@ export default class SoundcloudPlayer
 
   componentDidUpdate(prevProps: DataSourceProps) {
     const { show, volume } = this.props;
-    if (this.soundcloudPlayer?.setVolume) {
+    if (prevProps.volume !== volume && this.soundcloudPlayer?.setVolume) {
       this.soundcloudPlayer?.setVolume((volume ?? 100) / 100);
     }
 
diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
index 5282f767e4..614fbbe85e 100644
--- a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -143,7 +143,7 @@ export default class SpotifyPlayer
 
   componentDidUpdate(prevProps: DataSourceProps) {
     const { show, volume } = this.props;
-    if (this.spotifyPlayer?.setVolume) {
+    if (prevProps.volume !== volume && this.spotifyPlayer?.setVolume) {
       this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
     }
 
diff --git a/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
index 065b09bc19..cdb8d9cc39 100644
--- a/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
+++ b/frontend/js/src/common/brainzplayer/VolumeControlButton.tsx
@@ -3,18 +3,16 @@ import { useBrainzPlayerDispatch } from "./BrainzPlayerContext";
 
 function VolumeControlButton() {
   const dispatch = useBrainzPlayerDispatch();
-  const volumeRef = React.useRef<HTMLInputElement>(null);
-  const handleVolumeChange = () => {
+  const handleVolumeChange = (e: React.MouseEvent<HTMLInputElement>) => {
     dispatch({
       type: "VOLUME_CHANGE",
-      data: volumeRef?.current?.value ?? 100,
+      data: e.currentTarget?.value ?? 100,
     });
   };
   return (
     <input
-      ref={volumeRef}
       onMouseUp={handleVolumeChange}
-      className="volume"
+      className="volume-input"
       type="range"
       defaultValue="100"
       max="100"
diff --git a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
index c5d8976caf..a87f88088e 100644
--- a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
+++ b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
@@ -120,7 +120,7 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
 
   componentDidUpdate(prevProps: DataSourceProps) {
     const { show, volume } = this.props;
-    if (this.youtubePlayer?.setVolume) {
+    if (prevProps.volume !== volume && this.youtubePlayer?.setVolume) {
       this.youtubePlayer?.setVolume(volume ?? 100);
     }
     if (prevProps.show && !show && this.youtubePlayer) {

From 890daf7547bf1c980735b889289e508a22589873 Mon Sep 17 00:00:00 2001
From: Suvid Singhal <anooptest100@gmail.com>
Date: Thu, 16 Jan 2025 13:43:14 +0530
Subject: [PATCH 14/14] Fix a small error

---
 frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
index 5cb40fb4ac..91697f6419 100644
--- a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
+++ b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -288,7 +288,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
               <FontAwesomeIcon
                 icon={faVolumeUp}
                 style={{ color: showVolume ? "green" : "" }}
-                onClick={() => setShowVolume((showVolume) => !showVolume)}
+                onClick={() => setShowVolume(!showVolume)}
                 className="hidden-sm hidden-xs"
               />
             </>