Removed setVolume from render function in all the players and fixed s…

…potify volume updates in spotify app
metabrainz · Jan 14, 2025 · c851b1e · c851b1e
1 parent f156734
commit c851b1e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,