frontend: implements volume slider

frontend/src/components/NowPlaying.tsx

@@ -1,14 +1,24 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { FaPlay, FaPause, FaStepForward, FaStepBackward } from 'react-icons/fa';
+import { FaPlay, FaPause, FaStepForward, FaStepBackward, FaVolumeUp } from 'react-icons/fa';
 
 interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
   songName: string;
   fileName: string;
   isPlaying: boolean;
+  volume: number;
   onPlayPause: () => void;
   onSkip: () => void;
   onPrevious: () => void;
+  
+  // Sent when the volume setting actually changes value
+  onVolumeSettingChange: (volume: number) => void;
+
+  // Sent when the volume is about to start changing
+  onVolumeWillChange: (volume: number) => void;
+
+  // Sent when the volume has changed
+  onVolumeDidChange: (volume: number) => void;
 }
 
 const NowPlaying: React.FC<NowPlayingProps> = (props) => {
@@ -20,13 +30,30 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
             <div className="text-white text-lg font-bold truncate">{props.songName}</div>
             <div className="text-white text-sm truncate">{props.fileName}</div>
           </div>
-          <div className="flex flex-row gap-4">
+          <div className="flex flex-row items-center gap-4">
+
+            <div className="flex items-center gap-2 text-white">
+              <FaVolumeUp size={20} />
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={props.volume}
+                onMouseDown={() => props.onVolumeWillChange(props.volume)}
+                onMouseUp={() => props.onVolumeDidChange(props.volume)}
+                onChange={(e) => props.onVolumeSettingChange(Number(e.target.value))}
+                className="w-24 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full hover:[&::-webkit-slider-thumb]:bg-violet-300"
+              />
+            </div>
+
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPrevious}>
               <FaStepBackward size={24} />
             </button>
+
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPlayPause}>
               {props.isPlaying ? <FaPause size={24} /> : <FaPlay size={24} />}
             </button>
+
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onSkip}>
               <FaStepForward size={24} />
             </button>