From d495547ee7ae821c47ce27056e50e0838032200a Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Sat, 3 Oct 2026 23:12:34 +0200
Subject: [PATCH] fix: MusicPlayer audio source and add volume control

---
 src/components/MusicPlayer.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/MusicPlayer.tsx b/src/components/MusicPlayer.tsx
index 0900e91..c4c8d70 100644
--- a/src/components/MusicPlayer.tsx
+++ b/src/components/MusicPlayer.tsx
@@ -18,6 +18,7 @@ export default function MusicPlayer() {
   const [showLyrics, setShowLyrics] = useState(false);
   const [lyrics, setLyrics] = useState<string | null>(null);
   const [isLoadingLyrics, setIsLoadingLyrics] = useState(false);
+  const [volume, setVolume] = useState(1);
   
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
@@ -54,6 +55,12 @@ export default function MusicPlayer() {
     }
   }, [isPlaying, currentIndex]);
 
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = volume;
+    }
+  }, [volume]);
+
   const loadLyrics = async (song: Song) => {
     setIsLoadingLyrics(true);
     try {
@@ -95,7 +102,7 @@ export default function MusicPlayer() {
     <div className="music-player-container">
       <audio 
         ref={audioRef}
-        src={`/media/${currentSong.relativePath}`}
+        src={`/api/media/${currentSong.relativePath}`}
         onEnded={nextSong}
       />
 
@@ -175,6 +182,22 @@ export default function MusicPlayer() {
             )}
           </div>
 
+          <div className="music-player-volume" style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '12px', opacity: 0.8 }}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+              <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+            </svg>
+            <input 
+              type="range" 
+              min="0" 
+              max="1" 
+              step="0.05" 
+              value={volume} 
+              onChange={(e) => setVolume(parseFloat(e.target.value))}
+              style={{ flex: 1, accentColor: 'var(--color-primary)' }}
+            />
+          </div>
+
           {showLyrics && (
             <div className="music-player-lyrics">
               {isLoadingLyrics ? (