frontend: implements volume slider

frontend/src/components/AddSongPanel.tsx

@@ -13,7 +13,7 @@ const AddSongPanel: React.FC<AddSongPanelProps> = ({ onAddURL }) => {
   }
   
   return (
-    <div className="flex items-center justify-center h-fit bg-black/50 rounded-b-2xl text-white">
+    <div className="flex items-center justify-center h-fit bg-black/50 md:rounded-b-2xl text-white">
       <div className="flex flex-row items-center gap-4 w-full px-8 py-4">
         <input 
           type="text" 

frontend/src/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import SongTable from './SongTable';
 import NowPlaying from './NowPlaying';
 import AddSongPanel from './AddSongPanel';
@@ -8,20 +8,26 @@ const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [nowPlayingSong, setNowPlayingSong] = useState<string | null>(null);
   const [nowPlayingFileName, setNowPlayingFileName] = useState<string | null>(null);
+  const [volume, setVolume] = useState(100);
+  const [volumeSettingIsLocked, setVolumeSettingIsLocked] = useState(false);
   const [songs, setSongs] = useState<PlaylistItem[]>([]);
-  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [_, setWs] = useState<WebSocket | null>(null);
 
-  const fetchPlaylist = async () => {
+  const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
     setSongs(playlist);
-  };
+  }, []);
 
-  const fetchNowPlaying = async () => {
+  const fetchNowPlaying = useCallback(async () => {
     const nowPlaying = await API.getNowPlaying();
     setNowPlayingSong(nowPlaying.nowPlaying);
     setNowPlayingFileName(nowPlaying.currentFile);
     setIsPlaying(!nowPlaying.isPaused);
-  };
+
+    if (!volumeSettingIsLocked) {
+      setVolume(nowPlaying.volume);
+    }
+  }, [volumeSettingIsLocked]);
 
   const handleAddURL = (url: string) => {
     const urlToAdd = url.trim();
@@ -71,36 +77,43 @@ const App: React.FC = () => {
     fetchNowPlaying();
   };
 
-  const watchForEvents = () => {
+  const handleVolumeSettingChange = async (volume: number) => {
-    const ws = API.subscribeToEvents((event) => {
+    setVolume(volume);
-      switch (event.event) {
+    await API.setVolume(volume);
-        case 'user_modify':
-        case 'end-file':
-        case 'playback-restart':
-          fetchPlaylist();
-          fetchNowPlaying();
-          break;
-      }
-    });
-
-    return ws;
   };
 
+  const handleWebSocketEvent = useCallback((event: any) => {
+    switch (event.event) {
+      case 'user_modify':
+      case 'end-file':
+      case 'playback-restart':
+        fetchPlaylist();
+        fetchNowPlaying();
+        break;
+    }
+  }, [fetchPlaylist, fetchNowPlaying]);
+
+  // Initial data fetch
   useEffect(() => {
     fetchPlaylist();
     fetchNowPlaying();
-    setWs(watchForEvents());
+  }, [fetchPlaylist, fetchNowPlaying]);
+
+  // WebSocket connection
+  useEffect(() => {
+    const ws = API.subscribeToEvents(handleWebSocketEvent);
+    setWs(ws);
 
     return () => {
       if (ws) {
         ws.close();
       }
     };
-  }, []);
+  }, [handleWebSocketEvent]);
 
   return (
-    <div className="flex items-center justify-center h-screen w-screen bg-black py-10">
+    <div className="flex items-center justify-center h-screen w-screen bg-black md:py-10">
-      <div className="bg-violet-900 w-full md:max-w-xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
+      <div className="bg-violet-900 w-full md:max-w-2xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
         <NowPlaying 
           className="flex flex-row md:rounded-t-2xl" 
           songName={nowPlayingSong || "(Not Playing)"} 
@@ -109,6 +122,10 @@ const App: React.FC = () => {
           onPlayPause={togglePlayPause} 
           onSkip={handleSkip} 
           onPrevious={handlePrevious} 
+          volume={volume}
+          onVolumeSettingChange={handleVolumeSettingChange}
+          onVolumeWillChange={() => setVolumeSettingIsLocked(true)}
+          onVolumeDidChange={() => setVolumeSettingIsLocked(false)}
         />
 
         {songs.length > 0 ? (

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>