LB-1702: Added Volume Control Slider to BrainzPlayer

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

@@ -10,6 +10,7 @@
 } 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,17 @@
     if (!show) {
       return null;
     }
-    return <div>{this.getAlbumArt()}</div>;
+    return (
+      <BrainzPlayerContext.Consumer>
+        {(context) => {
+          const { volume } = context;
+          const player = this.appleMusicPlayer?.player;
+          if (player) {
+            player.volume = volume;
+          }
+          return <div>{this.getAlbumArt()}</div>;
+        }}
+      </BrainzPlayerContext.Consumer>
+    );
   }
 }

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

@@ -153,6 +153,7 @@ export default function BrainzPlayer() {
     currentTrackURL,
     playerPaused,
     isActivated,
+    volume,
     durationMs,
     progressMs,
     listenSubmitted,

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

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

@@ -3,6 +3,7 @@ import {
   faBarsStaggered,
   faFastBackward,
   faFastForward,
+  faVolumeUp,
   faHeart,
   faHeartCrack,
   faMusic,
@@ -75,6 +76,34 @@ 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
+          ? volumeRef.current.value
+          : 100
+        : 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 +291,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
             disabled={disabled}
           />
         </div>
+        <VolumeControlButton />
         <div className="actions">
           {isPlayingATrack && currentDataSourceName && (
             <a

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>
     );
   }
 }

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,14 @@ 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);
+          return <div data-testid="spotify-player">{this.getAlbumArt()}</div>;
+        }}
+      </BrainzPlayerContext.Consumer>
+    );
   }
 }

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>
     );
   }
 }