Feat: Added Volume Control Slider to BrainzPlayer

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;

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;
@@ -148,7 +149,11 @@ export default class AppleMusicPlayer
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    const player = this.appleMusicPlayer;
+    if (prevProps.volume !== volume && player) {
+      player.volume = (volume ?? 100) / 100;
+    }
     if (prevProps.show && !show) {
       this.stopAndClear();
     }

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;
@@ -153,6 +154,7 @@ export default function BrainzPlayer() {
     currentTrackURL,
     playerPaused,
     isActivated,
+    volume,
     durationMs,
     progressMs,
     listenSubmitted,
@@ -1023,6 +1025,7 @@ export default function BrainzPlayer() {
       >
         {userPreferences?.brainzplayer?.spotifyEnabled !== false && (
           <SpotifyPlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof
@@ -1045,6 +1048,7 @@ export default function BrainzPlayer() {
         )}
         {userPreferences?.brainzplayer?.youtubeEnabled !== false && (
           <YoutubePlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof
@@ -1068,6 +1072,7 @@ export default function BrainzPlayer() {
         )}
         {userPreferences?.brainzplayer?.soundcloudEnabled !== false && (
           <SoundcloudPlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof
@@ -1090,6 +1095,7 @@ export default function BrainzPlayer() {
         )}
         {userPreferences?.brainzplayer?.appleMusicEnabled !== false && (
           <AppleMusicPlayer
+            volume={volume}
             show={
               isActivated &&
               dataSourceRefs[currentDataSourceIndex]?.current instanceof

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,9 @@ function valueReducer(
         currentListenIndex: newCurrentListenIndex,
       };
     }
+    case "VOLUME_CHANGE": {
+      return { ...state, volume: action.data };
+    }
     case "MOVE_AMBIENT_QUEUE_ITEM": {
       const { ambientQueue } = state;
       const evt = action.data as any;

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";
 
@@ -29,6 +30,7 @@ import {
   useBrainzPlayerDispatch,
 } from "./BrainzPlayerContext";
 import Queue from "./Queue";
+import VolumeControlButton from "./VolumeControlButton";
 
 type BrainzPlayerUIProps = {
   currentDataSourceName?: string;
@@ -88,7 +90,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;
@@ -191,13 +193,18 @@ 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" });
   };
 
   return (
     <>
+      <div className={`volume ${showVolume ? "show" : ""}`}>
+        <VolumeControlButton />
+      </div>
+
       <div className={`queue ${showQueue ? "show" : ""}`}>
         <Queue clearQueue={clearQueue} onHide={() => setShowQueue(false)} />
       </div>
@@ -264,20 +271,29 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
         </div>
         <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)}
+                className="hidden-sm hidden-xs"
               />
-            </a>
+            </>
           )}
+
           <FontAwesomeIcon
             icon={faBarsStaggered}
             style={{ color: showQueue ? "green" : "" }}

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");
@@ -152,7 +153,11 @@ export default class SoundcloudPlayer
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    if (prevProps.volume !== volume && this.soundcloudPlayer?.setVolume) {
+      this.soundcloudPlayer?.setVolume((volume ?? 100) / 100);
+    }
+
     if (prevProps.show && !show && this.soundcloudPlayer) {
       this.soundcloudPlayer.pause();
     }
@@ -405,6 +410,7 @@ export default class SoundcloudPlayer
 
   render() {
     const { show } = this.props;
+
     return (
       <div
         className={`soundcloud ${!show ? "hidden" : ""}`}

frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx

@@ -142,7 +142,11 @@ export default class SpotifyPlayer
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    if (prevProps.volume !== volume && this.spotifyPlayer?.setVolume) {
+      this.spotifyPlayer?.setVolume((volume ?? 100) / 100);
+    }
+
     if (prevProps.show === true && show === false) {
       this.stopAndClear();
     }
@@ -436,7 +440,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 +466,7 @@ export default class SpotifyPlayer
           );
         }
       },
-      volume: 0.7, // Careful with this, now…
+      volume: volume ?? 100 / 100,
     });
 
     // Error handling
@@ -515,9 +519,9 @@ export default class SpotifyPlayer
       duration,
       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,

frontend/js/src/common/brainzplayer/VolumeControlButton.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useBrainzPlayerDispatch } from "./BrainzPlayerContext";
+
+function VolumeControlButton() {
+  const dispatch = useBrainzPlayerDispatch();
+  const handleVolumeChange = (e: React.MouseEvent<HTMLInputElement>) => {
+    dispatch({
+      type: "VOLUME_CHANGE",
+      data: e.currentTarget?.value ?? 100,
+    });
+  };
+  return (
+    <input
+      onMouseUp={handleVolumeChange}
+      className="volume-input"
+      type="range"
+      defaultValue="100"
+      max="100"
+      min="0"
+      step="5"
+    />
+  );
+}
+
+export default VolumeControlButton;

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 & {
@@ -118,7 +119,10 @@ export default class YoutubePlayer extends React.Component<YoutubePlayerProps>
   checkVideoLoadedTimerId?: NodeJS.Timeout;
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show } = this.props;
+    const { show, volume } = this.props;
+    if (prevProps.volume !== volume && this.youtubePlayer?.setVolume) {
+      this.youtubePlayer?.setVolume(volume ?? 100);
+    }
     if (prevProps.show && !show && this.youtubePlayer) {
       this.youtubePlayer.stopVideo();
       // Clear playlist
@@ -375,6 +379,7 @@ 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 (
       <Draggable
         handle=".youtube-drag-handle"

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 = {