From 52bcc81068712dc22d505608e622766fe8465f5f Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 20:34:15 +0000
Subject: [PATCH 1/9] feat: add full screen audio player and radio station
 management

- Implemented FullScreenPlayer component for enhanced audio playback experience.
- Added functionality to toggle full screen mode in AudioPlayer.
- Introduced NavidromeConfigContext for managing Navidrome server configurations.
- Created RadioStationsPage for managing internet radio stations, including adding, deleting, and playing stations.
- Enhanced SettingsPage to configure Navidrome server connection with validation and feedback.
- Updated NavidromeAPI to support fetching and managing radio stations.
- Integrated lyrics fetching and display in FullScreenPlayer using LrcLibClient.
---
 app/artist/[artist]/page.tsx              |  55 +++-
 app/components/AudioPlayer.tsx            |  17 +-
 app/components/FullScreenPlayer.tsx       | 372 ++++++++++++++++++++++
 app/components/NavidromeConfigContext.tsx | 101 ++++++
 app/components/sidebar.tsx                |  22 ++
 app/layout.tsx                            |  21 +-
 app/radio/page.tsx                        | 256 +++++++++++++++
 app/settings/page.tsx                     | 187 ++++++++++-
 lib/lrclib.ts                             | 108 +++++++
 lib/navidrome.ts                          |  92 +++++-
 10 files changed, 1204 insertions(+), 27 deletions(-)
 create mode 100644 app/components/FullScreenPlayer.tsx
 create mode 100644 app/components/NavidromeConfigContext.tsx
 create mode 100644 app/radio/page.tsx
 create mode 100644 lib/lrclib.ts

diff --git a/app/artist/[artist]/page.tsx b/app/artist/[artist]/page.tsx
index ff1556c..1bca727 100644
--- a/app/artist/[artist]/page.tsx
+++ b/app/artist/[artist]/page.tsx
@@ -3,13 +3,15 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { Album, Artist } from '@/lib/navidrome';
 import { useNavidrome } from '@/app/components/NavidromeContext';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
 import { AlbumArtwork } from '@/app/components/album-artwork';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
-import { Heart } from 'lucide-react';
+import { Heart, Play } from 'lucide-react';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import Loading from '@/app/components/loading';
 import { getNavidromeAPI } from '@/lib/navidrome';
+import { useToast } from '@/hooks/use-toast';
 
 export default function ArtistPage() {
   const { artist: artistId } = useParams();
@@ -17,7 +19,10 @@ export default function ArtistPage() {
   const [artistAlbums, setArtistAlbums] = useState<Album[]>([]);
   const [loading, setLoading] = useState(true);
   const [artist, setArtist] = useState<Artist | null>(null);
+  const [isPlayingArtist, setIsPlayingArtist] = useState(false);
   const { getArtist, starItem, unstarItem } = useNavidrome();
+  const { addArtistToQueue, playAlbum, clearQueue } = useAudioPlayer();
+  const { toast } = useToast();
   const api = getNavidromeAPI();
 
   useEffect(() => {
@@ -55,6 +60,36 @@ export default function ArtistPage() {
     }
   };
 
+  const handlePlayArtist = async () => {
+    if (!artist) return;
+    
+    setIsPlayingArtist(true);
+    try {
+      // Clear current queue and add all artist albums
+      clearQueue();
+      await addArtistToQueue(artist.id);
+      
+      // Start playing the first album if we have any
+      if (artistAlbums.length > 0) {
+        await playAlbum(artistAlbums[0].id);
+      }
+      
+      toast({
+        title: "Playing Artist",
+        description: `Now playing all albums by ${artist.name}`,
+      });
+    } catch (error) {
+      console.error('Failed to play artist:', error);
+      toast({
+        title: "Error",
+        description: "Failed to play artist albums.",
+        variant: "destructive"
+      });
+    } finally {
+      setIsPlayingArtist(false);
+    }
+  };
+
   if (loading) {
     return <Loading />;
   }
@@ -90,10 +125,20 @@ export default function ArtistPage() {
             <div className="flex-1">
               <h1 className="text-4xl font-bold text-white mb-2">{artist.name}</h1>
               <p className="text-white/80 mb-4">{artist.albumCount} albums</p>
-              <Button onClick={handleStar} variant="secondary" className="mr-4">
-                <Heart className={isStarred ? 'text-red-500' : 'text-gray-500'} fill={isStarred ? 'red' : 'none'}/>
-                {isStarred ? 'Starred' : 'Star Artist'}
-              </Button>
+              <div className="flex gap-3">
+                <Button 
+                  onClick={handlePlayArtist} 
+                  disabled={isPlayingArtist}
+                  className="bg-green-600 hover:bg-green-700"
+                >
+                  <Play className="w-4 h-4 mr-2" />
+                  {isPlayingArtist ? 'Adding to Queue...' : 'Play Artist'}
+                </Button>
+                <Button onClick={handleStar} variant="secondary">
+                  <Heart className={isStarred ? 'text-red-500' : 'text-gray-500'} fill={isStarred ? 'red' : 'none'}/>
+                  {isStarred ? 'Starred' : 'Star Artist'}
+                </Button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 14e2e55..72b762e 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -2,7 +2,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
-import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaCompress, FaVolumeXmark } from "react-icons/fa6";
+import { FullScreenPlayer } from '@/app/components/FullScreenPlayer';
+import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaCompress, FaVolumeXmark, FaExpand } from "react-icons/fa6";
 import ColorThief from '@neutrixs/colorthief';
 import { Progress } from '@/components/ui/progress';
 import { useToast } from '@/hooks/use-toast';
@@ -16,6 +17,7 @@ export const AudioPlayer: React.FC = () => {
   const [volume, setVolume] = useState(1);
   const [isClient, setIsClient] = useState(false);
   const [isMinimized, setIsMinimized] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
   const audioCurrent = audioRef.current;
   const { toast } = useToast();
   
@@ -229,6 +231,13 @@ export const AudioPlayer: React.FC = () => {
           </button>
         </div>
           <div className="flex items-center space-x-1 ml-2">
+            <button 
+              className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" 
+              onClick={() => setIsFullScreen(true)}
+              title="Full Screen"
+            >
+              <FaExpand className="w-3 h-3" />
+            </button>
             <button 
               className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" 
               onClick={() => setIsMinimized(true)}
@@ -240,6 +249,12 @@ export const AudioPlayer: React.FC = () => {
         </div>
       </div>
       <audio ref={audioRef} hidden />
+      
+      {/* Full Screen Player */}
+      <FullScreenPlayer 
+        isOpen={isFullScreen} 
+        onClose={() => setIsFullScreen(false)} 
+      />
     </div>
   );
 };
diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
new file mode 100644
index 0000000..6fea490
--- /dev/null
+++ b/app/components/FullScreenPlayer.tsx
@@ -0,0 +1,372 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { Progress } from '@/components/ui/progress';
+import { lrcLibClient } from '@/lib/lrclib';
+import { 
+  FaPlay, 
+  FaPause, 
+  FaVolumeHigh, 
+  FaForward, 
+  FaBackward, 
+  FaVolumeXmark,
+  FaShuffle,
+  FaRepeat,
+  FaXmark
+} from "react-icons/fa6";
+import { Card, CardContent } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface LyricLine {
+  time: number;
+  text: string;
+}
+
+interface FullScreenPlayerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onClose }) => {
+  const { currentTrack, playPreviousTrack, playNextTrack } = useAudioPlayer();
+  const [progress, setProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [dominantColor, setDominantColor] = useState('#1a1a1a');
+  const [lyrics, setLyrics] = useState<LyricLine[]>([]);
+  const [currentLyricIndex, setCurrentLyricIndex] = useState(-1);
+  const [showLyrics, setShowLyrics] = useState(true);
+  const lyricsRef = useRef<HTMLDivElement>(null);
+
+  // Load lyrics when track changes
+  useEffect(() => {
+    const loadLyrics = async () => {
+      if (!currentTrack) {
+        setLyrics([]);
+        return;
+      }
+
+      try {
+        const lyricsData = await lrcLibClient.searchTrack(
+          currentTrack.artist,
+          currentTrack.name,
+          currentTrack.album,
+          currentTrack.duration
+        );
+
+        if (lyricsData && lyricsData.syncedLyrics) {
+          const parsedLyrics = lrcLibClient.parseSyncedLyrics(lyricsData.syncedLyrics);
+          setLyrics(parsedLyrics);
+        } else {
+          setLyrics([]);
+        }
+      } catch (error) {
+        console.error('Failed to load lyrics:', error);
+        setLyrics([]);
+      }
+    };
+
+    loadLyrics();
+  }, [currentTrack]);
+
+  // Update current lyric index based on time
+  useEffect(() => {
+    const newIndex = lrcLibClient.getCurrentLyricIndex(lyrics, currentTime);
+    setCurrentLyricIndex(newIndex);
+  }, [lyrics, currentTime]);
+
+  // Auto-scroll lyrics to center current line
+  useEffect(() => {
+    if (currentLyricIndex >= 0 && lyrics.length > 0) {
+      const lyricsContainer = document.querySelector('.lyrics-container');
+      if (lyricsContainer) {
+        const currentLyricElement = lyricsContainer.children[currentLyricIndex] as HTMLElement;
+        if (currentLyricElement) {
+          currentLyricElement.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center',
+            inline: 'nearest'
+          });
+        }
+      }
+    }
+  }, [currentLyricIndex, lyrics.length]);
+
+  // Sync with main audio player
+  useEffect(() => {
+    const syncWithMainPlayer = () => {
+      const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+      if (mainAudio && currentTrack) {
+        setCurrentTime(mainAudio.currentTime);
+        setDuration(mainAudio.duration || 0);
+        setProgress(mainAudio.duration ? (mainAudio.currentTime / mainAudio.duration) * 100 : 0);
+        setIsPlaying(!mainAudio.paused);
+        setVolume(mainAudio.volume);
+      }
+    };
+
+    if (isOpen) {
+      // Initial sync
+      syncWithMainPlayer();
+      
+      // Set up interval to keep syncing
+      const interval = setInterval(syncWithMainPlayer, 100);
+      return () => clearInterval(interval);
+    }
+  }, [isOpen, currentTrack]);
+
+  // Extract dominant color from cover art
+  useEffect(() => {
+    if (!currentTrack?.coverArt) return;
+
+    const img = document.createElement('img');
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+          
+          // Simple dominant color extraction
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const data = imageData.data;
+          let r = 0, g = 0, b = 0;
+          
+          for (let i = 0; i < data.length; i += 4) {
+            r += data[i];
+            g += data[i + 1];
+            b += data[i + 2];
+          }
+          
+          const pixelCount = data.length / 4;
+          r = Math.floor(r / pixelCount);
+          g = Math.floor(g / pixelCount);
+          b = Math.floor(b / pixelCount);
+          
+          setDominantColor(`rgb(${r}, ${g}, ${b})`);
+        }
+      } catch (error) {
+        console.error('Failed to extract color:', error);
+      }
+    };
+    img.src = currentTrack.coverArt;
+  }, [currentTrack]);
+
+  const togglePlayPause = () => {
+    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+    if (!mainAudio) return;
+
+    if (isPlaying) {
+      mainAudio.pause();
+    } else {
+      mainAudio.play();
+    }
+  };
+
+  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+    if (!mainAudio || !duration) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = (x / rect.width) * 100;
+    const newTime = (percentage / 100) * duration;
+    
+    mainAudio.currentTime = newTime;
+    setCurrentTime(newTime);
+  };
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+    if (!mainAudio) return;
+
+    const newVolume = parseInt(e.target.value) / 100;
+    mainAudio.volume = newVolume;
+    setVolume(newVolume);
+  };
+
+  const formatTime = (seconds: number) => {
+    if (!seconds || isNaN(seconds)) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  if (!isOpen || !currentTrack) return null;
+
+  const backgroundStyle = {
+    background: `linear-gradient(135deg, ${dominantColor}40 0%, ${dominantColor}20 50%, transparent 100%)`
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black bg-opacity-95 backdrop-blur-sm overflow-hidden">
+      <div className="h-full w-full flex flex-col" style={backgroundStyle}>
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 lg:p-6 flex-shrink-0">
+          <h2 className="text-lg lg:text-xl font-semibold text-white">Now Playing</h2>
+          <button 
+            onClick={onClose}
+            className="text-white hover:bg-white/20"
+          >
+            <FaXmark className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1 flex flex-col lg:flex-row gap-4 lg:gap-8 p-4 lg:p-6 pt-0 overflow-hidden min-h-0">
+          {/* Left Side - Album Art and Controls */}
+          <div className="flex-1 flex flex-col items-center justify-center max-w-2xl mx-auto lg:mx-0 min-h-0">
+            {/* Album Art */}
+            <div className="relative mb-4 lg:mb-8 flex-shrink-0">
+              <Image
+                src={currentTrack.coverArt || '/default-album.png'}
+                alt={currentTrack.album}
+                width={320}
+                height={320}
+                className="w-64 h-64 lg:w-80 lg:h-80 rounded-lg shadow-2xl object-cover"
+                priority
+              />
+            </div>
+
+            {/* Track Info */}
+            <div className="text-center mb-4 lg:mb-8 px-4 flex-shrink-0">
+              <h1 className="text-xl lg:text-3xl font-bold text-foreground mb-2 line-clamp-2">
+                {currentTrack.name}
+              </h1>
+              <p className="text-lg lg:text-xl text-foreground/80 mb-1 line-clamp-1">{currentTrack.artist}</p>
+            </div>
+
+            {/* Progress */}
+            <div className="w-full max-w-md mb-4 lg:mb-6 px-4 flex-shrink-0">
+              <div 
+                className="h-2 bg-white/20 rounded-full cursor-pointer relative overflow-hidden"
+                onClick={handleSeek}
+              >
+                <div 
+                  className="h-full bg-foreground transition-all duration-150"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+              <div className="flex justify-between text-sm text-foreground/60 mt-2">
+                <span>{formatTime(currentTime)}</span>
+                <span>{formatTime(duration)}</span>
+              </div>
+            </div>
+
+            {/* Controls */}
+            <div className="flex items-center gap-4 lg:gap-6 mb-4 lg:mb-6 flex-shrink-0">
+              <button
+                onClick={playPreviousTrack}
+                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                <FaBackward className="w-5 h-5" />
+              </button>
+
+              <button
+                onClick={togglePlayPause}
+                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                {isPlaying ? (
+                  <FaPause className="w-10 h-10" />
+                ) : (
+                  <FaPlay className="w-10 h-10" />
+                )}
+              </button>
+
+              <button
+                onClick={playNextTrack}
+                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                <FaForward className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Volume */}
+            <div className="flex items-center gap-3 flex-shrink-0">
+              <button
+                onMouseEnter={() => setShowVolumeSlider(true)}
+                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                {volume === 0 ? (
+                  <FaVolumeXmark className="w-5 h-5" />
+                ) : (
+                  <FaVolumeHigh className="w-5 h-5" />
+                )}
+              </button>
+              
+              {showVolumeSlider && (
+                <div 
+                  className="w-20 lg:w-24"
+                  onMouseLeave={() => setShowVolumeSlider(false)}
+                >
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={volume * 100}
+                    onChange={handleVolumeChange}
+                    className="w-full accent-foreground"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Right Side - Lyrics */}
+          {showLyrics && lyrics.length > 0 && (
+            <div className="flex-1 lg:max-w-md min-h-0">
+              <Card className="bg-black/30 backdrop-blur-sm border-white/20 h-full">
+                <CardContent className="p-4 lg:p-6 h-full flex flex-col">
+                  <div className="flex items-center justify-between mb-4 flex-shrink-0">
+                    <h3 className="text-lg font-semibold text-foreground">Lyrics</h3>
+                    <button
+                      onClick={() => setShowLyrics(false)}
+                      className="text-foreground/60 hover:bg-foreground/20"
+                    >
+                      Hide
+                    </button>
+                  </div>
+                  
+                  <ScrollArea className="flex-1 min-h-0">
+                    <div className="space-y-3 pr-4">
+                      {lyrics.map((line, index) => (
+                        <div
+                          key={index}
+                          className={`text-sm leading-relaxed transition-all duration-300 ${
+                            index === currentLyricIndex
+                              ? 'text-foreground font-semibold text-base scale-105'
+                              : index < currentLyricIndex
+                              ? 'text-foreground/60'
+                              : 'text-foreground/40'
+                          }`}
+                        >
+                          {line.text || '♪'}
+                        </div>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Show Lyrics button when hidden */}
+          {!showLyrics && lyrics.length > 0 && (
+            <div className="lg:flex-1 lg:max-w-md flex items-start justify-center lg:justify-start pt-4 lg:pt-8 flex-shrink-0">
+              <button
+                onClick={() => setShowLyrics(true)}
+                className="bg-foreground/20 hover:bg-foreground/30 text-foreground backdrop-blur-sm"
+              >
+                Show Lyrics
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/NavidromeConfigContext.tsx b/app/components/NavidromeConfigContext.tsx
new file mode 100644
index 0000000..47c1f8f
--- /dev/null
+++ b/app/components/NavidromeConfigContext.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { NavidromeConfig } from '@/lib/navidrome';
+
+interface NavidromeConfigContextType {
+  config: NavidromeConfig;
+  updateConfig: (newConfig: NavidromeConfig) => void;
+  isConnected: boolean;
+  testConnection: (config: NavidromeConfig) => Promise<boolean>;
+  clearConfig: () => void;
+}
+
+const NavidromeConfigContext = createContext<NavidromeConfigContextType | undefined>(undefined);
+
+interface NavidromeConfigProviderProps {
+  children: ReactNode;
+}
+
+export const NavidromeConfigProvider: React.FC<NavidromeConfigProviderProps> = ({ children }) => {
+  const [config, setConfig] = useState<NavidromeConfig>({
+    serverUrl: '',
+    username: '',
+    password: ''
+  });
+  const [isConnected, setIsConnected] = useState(false);
+
+  // Load config from localStorage on mount
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const savedConfig = localStorage.getItem('navidrome-config');
+      if (savedConfig) {
+        try {
+          const parsedConfig = JSON.parse(savedConfig);
+          setConfig(parsedConfig);
+        } catch (error) {
+          console.error('Failed to parse saved Navidrome config:', error);
+        }
+      }
+    }
+  }, []);
+
+  // Save config to localStorage when it changes
+  useEffect(() => {
+    if (typeof window !== 'undefined' && config.serverUrl) {
+      localStorage.setItem('navidrome-config', JSON.stringify(config));
+    }
+  }, [config]);
+
+  const updateConfig = (newConfig: NavidromeConfig) => {
+    setConfig(newConfig);
+    setIsConnected(false);
+  };
+
+  const testConnection = async (testConfig: NavidromeConfig): Promise<boolean> => {
+    try {
+      // Import here to avoid server-side issues
+      const { default: NavidromeAPI } = await import('@/lib/navidrome');
+      const api = new NavidromeAPI(testConfig);
+      const result = await api.ping();
+      setIsConnected(result);
+      return result;
+    } catch (error) {
+      console.error('Connection test failed:', error);
+      setIsConnected(false);
+      return false;
+    }
+  };
+
+  const clearConfig = () => {
+    setConfig({
+      serverUrl: '',
+      username: '',
+      password: ''
+    });
+    setIsConnected(false);
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('navidrome-config');
+    }
+  };
+
+  return (
+    <NavidromeConfigContext.Provider value={{
+      config,
+      updateConfig,
+      isConnected,
+      testConnection,
+      clearConfig
+    }}>
+      {children}
+    </NavidromeConfigContext.Provider>
+  );
+};
+
+export const useNavidromeConfig = (): NavidromeConfigContextType => {
+  const context = useContext(NavidromeConfigContext);
+  if (context === undefined) {
+    throw new Error('useNavidromeConfig must be used within a NavidromeConfigProvider');
+  }
+  return context;
+};
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index b31d47e..8b56f05 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -18,6 +18,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
   const isAlbums = usePathname() === "/library/albums";
   const isArtists = usePathname() === "/library/artists";
   const isQueue = usePathname() === "/queue";
+  const isRadio = usePathname() === "/radio";
   const isHistory = usePathname() === "/history";
   const isSongs = usePathname() === "/library/songs";  const isPlaylists = usePathname() === "/library/playlists";
 
@@ -84,6 +85,27 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                 Queue
               </Button>
             </Link>
+            <Link href="/radio">
+              <Button variant={isRadio ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="mr-2 h-4 w-4"
+                >
+                  <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/>
+                  <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/>
+                  <circle cx="12" cy="12" r="2"/>
+                  <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/>
+                  <path d="M19.1 4.9C23 8.8 23 15.2 19.1 19.1"/>
+                </svg>
+                Radio
+              </Button>
+            </Link>
           </div>
         </div>
           <div>
diff --git a/app/layout.tsx b/app/layout.tsx
index c9c9a46..07e831b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import { AudioPlayerProvider } from "./components/AudioPlayerContext";
 import { NavidromeProvider } from "./components/NavidromeContext";
+import { NavidromeConfigProvider } from "./components/NavidromeConfigContext";
 import { ThemeProvider } from "./components/ThemeProvider";
 import { Metadata } from "next";
 import type { Viewport } from 'next';
@@ -77,15 +78,17 @@ export default function Layout({ children }: LayoutProps) {
       </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background`}>
         <ThemeProvider>
-          <NavidromeProvider>
-            <AudioPlayerProvider>
-              <SpeedInsights />
-              <Analytics />
-              <Ihateserverside>
-                {children}
-              </Ihateserverside>
-            </AudioPlayerProvider>
-          </NavidromeProvider>
+          <NavidromeConfigProvider>
+            <NavidromeProvider>
+              <AudioPlayerProvider>
+                <SpeedInsights />
+                <Analytics />
+                <Ihateserverside>
+                  {children}
+                </Ihateserverside>
+              </AudioPlayerProvider>
+            </NavidromeProvider>
+          </NavidromeConfigProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/app/radio/page.tsx b/app/radio/page.tsx
new file mode 100644
index 0000000..b1a7385
--- /dev/null
+++ b/app/radio/page.tsx
@@ -0,0 +1,256 @@
+    'use client';
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { useToast } from '@/hooks/use-toast';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { getNavidromeAPI, RadioStation } from '@/lib/navidrome';
+import { FaWifi, FaPlay, FaPlus, FaTrash } from 'react-icons/fa6';
+
+const RadioStationsPage = () => {
+  const [stations, setStations] = useState<RadioStation[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const [newStation, setNewStation] = useState({
+    name: '',
+    streamUrl: '',
+    homePageUrl: ''
+  });
+  const { toast } = useToast();
+  const { playTrack } = useAudioPlayer();
+
+  const loadRadioStations = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const api = getNavidromeAPI();
+      const stationList = await api.getInternetRadioStations();
+      setStations(stationList);
+    } catch (error) {
+      console.error('Failed to load radio stations:', error);
+      toast({
+        title: "Error",
+        description: "Failed to load radio stations. Please check your Navidrome connection.",
+        variant: "destructive"
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    loadRadioStations();
+  }, [loadRadioStations]);
+
+  const addRadioStation = async () => {
+    if (!newStation.name || !newStation.streamUrl) {
+      toast({
+        title: "Missing Information",
+        description: "Please provide both name and stream URL.",
+        variant: "destructive"
+      });
+      return;
+    }
+
+    try {
+      const api = getNavidromeAPI();
+      await api.createInternetRadioStation(
+        newStation.name,
+        newStation.streamUrl,
+        newStation.homePageUrl || undefined
+      );
+      
+      toast({
+        title: "Success",
+        description: "Radio station added successfully.",
+      });
+      
+      setNewStation({ name: '', streamUrl: '', homePageUrl: '' });
+      setIsAddDialogOpen(false);
+      await loadRadioStations();
+    } catch (error) {
+      console.error('Failed to add radio station:', error);
+      toast({
+        title: "Error",
+        description: "Failed to add radio station.",
+        variant: "destructive"
+      });
+    }
+  };
+
+  const deleteRadioStation = async (stationId: string) => {
+    try {
+      const api = getNavidromeAPI();
+      await api.deleteInternetRadioStation(stationId);
+      
+      toast({
+        title: "Success",
+        description: "Radio station deleted successfully.",
+      });
+      
+      await loadRadioStations();
+    } catch (error) {
+      console.error('Failed to delete radio station:', error);
+      toast({
+        title: "Error",
+        description: "Failed to delete radio station.",
+        variant: "destructive"
+      });
+    }
+  };
+
+  const playRadioStation = (station: RadioStation) => {
+    const radioTrack = {
+      id: `radio-${station.id}`,
+      name: station.name,
+      url: station.streamUrl,
+      artist: 'Internet Radio',
+      album: 'Live Stream',
+      duration: 0, // Radio streams don't have duration
+      albumId: '',
+      artistId: ''
+    };
+
+    playTrack(radioTrack);
+    toast({
+      title: "Playing Radio",
+      description: `Now playing: ${station.name}`,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto p-6 max-w-4xl">
+        <div className="text-center">Loading radio stations...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6 max-w-4xl">
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-semibold tracking-tight flex items-center gap-2">
+              <FaWifi className="w-8 h-8" />
+              Radio Stations
+            </h1>
+            <p className="text-muted-foreground">Listen to internet radio streams</p>
+          </div>
+          
+          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
+            <DialogTrigger asChild>
+              <Button>
+                <FaPlus className="w-4 h-4 mr-2" />
+                Add Station
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Add Radio Station</DialogTitle>
+                <DialogDescription>
+                  Add a new internet radio station to your collection.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="station-name">Station Name</Label>
+                  <Input
+                    id="station-name"
+                    placeholder="e.g., Jazz FM"
+                    value={newStation.name}
+                    onChange={(e) => setNewStation(prev => ({ ...prev, name: e.target.value }))}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="stream-url">Stream URL</Label>
+                  <Input
+                    id="stream-url"
+                    placeholder="https://stream.example.com/jazz"
+                    value={newStation.streamUrl}
+                    onChange={(e) => setNewStation(prev => ({ ...prev, streamUrl: e.target.value }))}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="homepage-url">Homepage URL (optional)</Label>
+                  <Input
+                    id="homepage-url"
+                    placeholder="https://www.jazzfm.com"
+                    value={newStation.homePageUrl}
+                    onChange={(e) => setNewStation(prev => ({ ...prev, homePageUrl: e.target.value }))}
+                  />
+                </div>
+                <div className="flex gap-2 pt-4">
+                  <Button onClick={addRadioStation}>Add Station</Button>
+                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        {stations.length === 0 ? (
+          <Card>
+            <CardContent className="flex flex-col items-center justify-center py-12">
+              <FaWifi className="w-16 h-16 text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">No Radio Stations</h3>
+              <p className="text-muted-foreground text-center mb-4">
+                You haven&apos;t added any radio stations yet. Click the &quot;Add Station&quot; button to get started.
+              </p>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {stations.map((station) => (
+              <Card key={station.id} className="hover:shadow-md transition-shadow">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-lg">
+                    <FaWifi className="w-5 h-5" />
+                    {station.name}
+                  </CardTitle>
+                  {station.homePageUrl && (
+                    <CardDescription>
+                      <a 
+                        href={station.homePageUrl} 
+                        target="_blank" 
+                        rel="noopener noreferrer"
+                        className="text-blue-600 hover:underline"
+                      >
+                        Visit Website
+                      </a>
+                    </CardDescription>
+                  )}
+                </CardHeader>
+                <CardContent>
+                  <div className="flex gap-2">
+                    <Button 
+                      onClick={() => playRadioStation(station)}
+                      className="flex-1"
+                    >
+                      <FaPlay className="w-4 h-4 mr-2" />
+                      Play
+                    </Button>
+                    <Button 
+                      variant="destructive" 
+                      size="icon"
+                      onClick={() => deleteRadioStation(station.id)}
+                    >
+                      <FaTrash className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RadioStationsPage;
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index de1cb37..7d6c3a1 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,13 +1,111 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
 import { useTheme } from '@/app/components/ThemeProvider';
+import { useNavidromeConfig } from '@/app/components/NavidromeConfigContext';
+import { useToast } from '@/hooks/use-toast';
+import { FaServer, FaUser, FaLock, FaCheck, FaTimes } from 'react-icons/fa';
 
 const SettingsPage = () => {
     const { theme, setTheme } = useTheme();
+    const { config, updateConfig, isConnected, testConnection, clearConfig } = useNavidromeConfig();
+    const { toast } = useToast();
+    
+    const [formData, setFormData] = useState({
+        serverUrl: config.serverUrl,
+        username: config.username,
+        password: config.password
+    });
+    const [isTesting, setIsTesting] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+    const handleInputChange = (field: string, value: string) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        setHasUnsavedChanges(true);
+    };
+
+    const handleTestConnection = async () => {
+        if (!formData.serverUrl || !formData.username || !formData.password) {
+            toast({
+                title: "Missing Information",
+                description: "Please fill in all fields before testing the connection.",
+                variant: "destructive"
+            });
+            return;
+        }
+
+        setIsTesting(true);
+        try {
+            const success = await testConnection({
+                serverUrl: formData.serverUrl,
+                username: formData.username,
+                password: formData.password
+            });
+
+            if (success) {
+                toast({
+                    title: "Connection Successful",
+                    description: "Successfully connected to Navidrome server.",
+                });
+            } else {
+                toast({
+                    title: "Connection Failed",
+                    description: "Could not connect to the server. Please check your settings.",
+                    variant: "destructive"
+                });
+            }
+        } catch (error) {
+            toast({
+                title: "Connection Error",
+                description: "An error occurred while testing the connection.",
+                variant: "destructive"
+            });
+        } finally {
+            setIsTesting(false);
+        }
+    };
+
+    const handleSaveConfig = async () => {
+        if (!formData.serverUrl || !formData.username || !formData.password) {
+            toast({
+                title: "Missing Information",
+                description: "Please fill in all fields.",
+                variant: "destructive"
+            });
+            return;
+        }
+
+        updateConfig({
+            serverUrl: formData.serverUrl,
+            username: formData.username,
+            password: formData.password
+        });
+        
+        setHasUnsavedChanges(false);
+        toast({
+            title: "Settings Saved",
+            description: "Navidrome configuration has been saved.",
+        });
+    };
+
+    const handleClearConfig = () => {
+        clearConfig();
+        setFormData({
+            serverUrl: '',
+            username: '',
+            password: ''
+        });
+        setHasUnsavedChanges(false);
+        toast({
+            title: "Configuration Cleared",
+            description: "Navidrome configuration has been cleared.",
+        });
+    };
 
     return (
         <div className="container mx-auto p-6 max-w-2xl">
@@ -17,6 +115,93 @@ const SettingsPage = () => {
                     <p className="text-muted-foreground">Customize your music experience</p>
                 </div>
 
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <FaServer className="w-5 h-5" />
+                            Navidrome Server
+                        </CardTitle>
+                        <CardDescription>
+                            Configure connection to your Navidrome music server
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-6">
+                        <div className="space-y-2">
+                            <Label htmlFor="server-url">Server URL</Label>
+                            <Input
+                                id="server-url"
+                                type="url"
+                                placeholder="https://your-navidrome-server.com"
+                                value={formData.serverUrl}
+                                onChange={(e) => handleInputChange('serverUrl', e.target.value)}
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="username">Username</Label>
+                            <Input
+                                id="username"
+                                type="text"
+                                placeholder="Your username"
+                                value={formData.username}
+                                onChange={(e) => handleInputChange('username', e.target.value)}
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="password">Password</Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                placeholder="Your password"
+                                value={formData.password}
+                                onChange={(e) => handleInputChange('password', e.target.value)}
+                            />
+                        </div>
+
+                        <div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
+                            {isConnected ? (
+                                <>
+                                    <FaCheck className="w-4 h-4 text-green-600" />
+                                    <span className="text-sm text-green-600">Connected to server</span>
+                                </>
+                            ) : (
+                                <>
+                                    <FaTimes className="w-4 h-4 text-red-600" />
+                                    <span className="text-sm text-red-600">Not connected</span>
+                                </>
+                            )}
+                        </div>
+
+                        <div className="flex gap-2">
+                            <Button 
+                                onClick={handleTestConnection} 
+                                disabled={isTesting}
+                                variant="outline"
+                            >
+                                {isTesting ? 'Testing...' : 'Test Connection'}
+                            </Button>
+                            <Button 
+                                onClick={handleSaveConfig}
+                                disabled={!hasUnsavedChanges}
+                            >
+                                Save Configuration
+                            </Button>
+                            <Button 
+                                onClick={handleClearConfig}
+                                variant="destructive"
+                            >
+                                Clear
+                            </Button>
+                        </div>
+
+                        <div className="text-sm text-muted-foreground">
+                            <p><strong>Note:</strong> Your credentials are stored locally in your browser</p>
+                            <p><strong>Security:</strong> Always use HTTPS for your Navidrome server</p>
+                        </div>
+                    </CardContent>
+                </Card>
+
                 <Card>
                     <CardHeader>
                         <CardTitle>Appearance</CardTitle>
diff --git a/lib/lrclib.ts b/lib/lrclib.ts
new file mode 100644
index 0000000..723a1e1
--- /dev/null
+++ b/lib/lrclib.ts
@@ -0,0 +1,108 @@
+interface LrcLibTrack {
+  id: number;
+  name: string;
+  trackName: string;
+  artistName: string;
+  albumName: string;
+  duration: number;
+  instrumental: boolean;
+  plainLyrics: string | null;
+  syncedLyrics: string | null;
+}
+
+interface LyricLine {
+  time: number;
+  text: string;
+}
+
+export class LrcLibClient {
+  private baseUrl = 'https://lrclib.net/api';
+
+  async searchTrack(artist: string, track: string, album?: string, duration?: number): Promise<LrcLibTrack | null> {
+    try {
+      const params = new URLSearchParams({
+        artist_name: artist,
+        track_name: track,
+      });
+
+      if (album) {
+        params.append('album_name', album);
+      }
+
+      if (duration) {
+        params.append('duration', Math.round(duration).toString());
+      }
+
+      const response = await fetch(`${this.baseUrl}/search?${params.toString()}`);
+      
+      if (!response.ok) {
+        if (response.status === 404) {
+          return null;
+        }
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const results: LrcLibTrack[] = await response.json();
+      
+      // Return the best match (first result is usually the best)
+      return results.length > 0 ? results[0] : null;
+    } catch (error) {
+      console.error('Failed to search lyrics:', error);
+      return null;
+    }
+  }
+
+  async getTrackById(id: number): Promise<LrcLibTrack | null> {
+    try {
+      const response = await fetch(`${this.baseUrl}/get/${id}`);
+      
+      if (!response.ok) {
+        if (response.status === 404) {
+          return null;
+        }
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('Failed to get track by ID:', error);
+      return null;
+    }
+  }
+
+  parseSyncedLyrics(syncedLyrics: string): LyricLine[] {
+    if (!syncedLyrics) return [];
+
+    const lines = syncedLyrics.split('\n');
+    const lyricLines: LyricLine[] = [];
+
+    for (const line of lines) {
+      const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\](.*)/);
+      if (match) {
+        const minutes = parseInt(match[1], 10);
+        const seconds = parseInt(match[2], 10);
+        const centiseconds = parseInt(match[3], 10);
+        const text = match[4].trim();
+
+        const time = minutes * 60 + seconds + centiseconds / 100;
+        lyricLines.push({ time, text });
+      }
+    }
+
+    return lyricLines.sort((a, b) => a.time - b.time);
+  }
+
+  getCurrentLyricIndex(lyricLines: LyricLine[], currentTime: number): number {
+    if (lyricLines.length === 0) return -1;
+
+    for (let i = lyricLines.length - 1; i >= 0; i--) {
+      if (currentTime >= lyricLines[i].time) {
+        return i;
+      }
+    }
+
+    return -1;
+  }
+}
+
+export const lrcLibClient = new LrcLibClient();
diff --git a/lib/navidrome.ts b/lib/navidrome.ts
index 867d3bc..ac4e842 100644
--- a/lib/navidrome.ts
+++ b/lib/navidrome.ts
@@ -82,6 +82,13 @@ export interface Playlist {
   coverArt?: string;
 }
 
+export interface RadioStation {
+  id: string;
+  streamUrl: string;
+  name: string;
+  homePageUrl?: string;
+}
+
 class NavidromeAPI {
   private config: NavidromeConfig;
   private clientName = 'stillnavidrome';
@@ -326,27 +333,90 @@ class NavidromeAPI {
     const searchData = response.searchResult3 as { song?: Song[] };
     return searchData?.song || [];
   }
+
+  async getRadioStations(): Promise<RadioStation[]> {
+    const response = await this.makeRequest('getRadioStations');
+    const radioStationsData = response.radioStations as { radioStation?: RadioStation[] };
+    return radioStationsData?.radioStation || [];
+  }
+
+  async getRadioStation(stationId: string): Promise<RadioStation> {
+    const response = await this.makeRequest('getRadioStation', { id: stationId });
+    return response.radioStation as RadioStation;
+  }
+
+  async getInternetRadioStations(): Promise<RadioStation[]> {
+    try {
+      const response = await this.makeRequest('getInternetRadioStations');
+      const radioData = response.internetRadioStations as { internetRadioStation?: RadioStation[] };
+      return radioData?.internetRadioStation || [];
+    } catch (error) {
+      console.error('Failed to get internet radio stations:', error);
+      return [];
+    }
+  }
+
+  async createInternetRadioStation(name: string, streamUrl: string, homePageUrl?: string): Promise<void> {
+    const params: Record<string, string> = { name, streamUrl };
+    if (homePageUrl) params.homePageUrl = homePageUrl;
+    await this.makeRequest('createInternetRadioStation', params);
+  }
+
+  async deleteInternetRadioStation(id: string): Promise<void> {
+    await this.makeRequest('deleteInternetRadioStation', { id });
+  }
 }
 
 // Singleton instance management
 let navidromeInstance: NavidromeAPI | null = null;
 
-export function getNavidromeAPI(): NavidromeAPI {
-  if (!navidromeInstance) {
-    const config: NavidromeConfig = {
-      serverUrl: process.env.NEXT_PUBLIC_NAVIDROME_URL || '',
-      username: process.env.NEXT_PUBLIC_NAVIDROME_USERNAME || '',
-      password: process.env.NEXT_PUBLIC_NAVIDROME_PASSWORD || ''
-    };
-    
-    if (!config.serverUrl || !config.username || !config.password) {
-      throw new Error('Navidrome configuration is incomplete. Please check environment variables.');
+export function getNavidromeAPI(customConfig?: NavidromeConfig): NavidromeAPI {
+  let config: NavidromeConfig;
+  
+  if (customConfig) {
+    config = customConfig;
+  } else {
+    // Try to get config from localStorage first (client-side)
+    if (typeof window !== 'undefined') {
+      const savedConfig = localStorage.getItem('navidrome-config');
+      if (savedConfig) {
+        try {
+          config = JSON.parse(savedConfig);
+        } catch (error) {
+          console.error('Failed to parse saved Navidrome config:', error);
+          config = getEnvConfig();
+        }
+      } else {
+        config = getEnvConfig();
+      }
+    } else {
+      // Server-side: use environment variables
+      config = getEnvConfig();
     }
-    
+  }
+  
+  if (!config.serverUrl || !config.username || !config.password) {
+    throw new Error('Navidrome configuration is incomplete. Please configure in settings or check environment variables.');
+  }
+  
+  // Always create a new instance if config is provided or if no instance exists
+  if (customConfig || !navidromeInstance) {
     navidromeInstance = new NavidromeAPI(config);
   }
   
   return navidromeInstance;
 }
 
+function getEnvConfig(): NavidromeConfig {
+  return {
+    serverUrl: process.env.NEXT_PUBLIC_NAVIDROME_URL || '',
+    username: process.env.NEXT_PUBLIC_NAVIDROME_USERNAME || '',
+    password: process.env.NEXT_PUBLIC_NAVIDROME_PASSWORD || ''
+  };
+}
+
+export function resetNavidromeAPI(): void {
+  navidromeInstance = null;
+}
+
 export default NavidromeAPI;

From 0560114d981796c7996a77a3025292078acf694f Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 20:47:01 +0000
Subject: [PATCH 2/9] feat: enhance FullScreenPlayer with improved lyrics
 scrolling and toggle functionality

---
 app/components/FullScreenPlayer.tsx | 165 +++++++++++++++++-----------
 1 file changed, 102 insertions(+), 63 deletions(-)

diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index 6fea490..4a97a96 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -14,7 +14,8 @@ import {
   FaVolumeXmark,
   FaShuffle,
   FaRepeat,
-  FaXmark
+  FaXmark,
+  FaQuoteLeft
 } from "react-icons/fa6";
 import { Card, CardContent } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -80,32 +81,73 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     setCurrentLyricIndex(newIndex);
   }, [lyrics, currentTime]);
 
-  // Auto-scroll lyrics to center current line
+  // Auto-scroll lyrics to center current line without cutting off text
   useEffect(() => {
-    if (currentLyricIndex >= 0 && lyrics.length > 0) {
-      const lyricsContainer = document.querySelector('.lyrics-container');
-      if (lyricsContainer) {
-        const currentLyricElement = lyricsContainer.children[currentLyricIndex] as HTMLElement;
-        if (currentLyricElement) {
-          currentLyricElement.scrollIntoView({ 
-            behavior: 'smooth', 
-            block: 'center',
-            inline: 'nearest'
-          });
+    if (currentLyricIndex >= 0 && lyrics.length > 0 && showLyrics) {
+      // Use a small delay to ensure the DOM is updated
+      const scrollTimeout = setTimeout(() => {
+        const lyricsScrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
+        if (lyricsScrollArea) {
+          const currentLyricElement = lyricsScrollArea.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
+          if (currentLyricElement) {
+            const containerHeight = lyricsScrollArea.clientHeight;
+            const elementHeight = currentLyricElement.offsetHeight;
+            const elementOffsetTop = currentLyricElement.offsetTop;
+            
+            // Calculate scroll position to center the current lyric
+            const targetScrollTop = elementOffsetTop - (containerHeight / 2) + (elementHeight / 2);
+            
+            lyricsScrollArea.scrollTo({
+              top: Math.max(0, targetScrollTop),
+              behavior: 'smooth'
+            });
+          }
         }
-      }
+      }, 50);
+      
+      return () => clearTimeout(scrollTimeout);
     }
-  }, [currentLyricIndex, lyrics.length]);
+  }, [currentLyricIndex, lyrics.length, showLyrics]);
+
+  // Reset lyrics to top when song ends or changes
+  useEffect(() => {
+    if (currentTrack && showLyrics) {
+      const lyricsScrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
+      if (lyricsScrollArea) {
+        lyricsScrollArea.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      }
+      setCurrentLyricIndex(-1);
+    }
+  }, [currentTrack, showLyrics]);
 
   // Sync with main audio player
   useEffect(() => {
     const syncWithMainPlayer = () => {
       const mainAudio = document.querySelector('audio') as HTMLAudioElement;
       if (mainAudio && currentTrack) {
-        setCurrentTime(mainAudio.currentTime);
-        setDuration(mainAudio.duration || 0);
-        setProgress(mainAudio.duration ? (mainAudio.currentTime / mainAudio.duration) * 100 : 0);
-        setIsPlaying(!mainAudio.paused);
+        const newCurrentTime = mainAudio.currentTime;
+        const newDuration = mainAudio.duration || 0;
+        const newIsPlaying = !mainAudio.paused;
+        
+        // Check if song ended (reset lyrics to top)
+        if (newCurrentTime === 0 && !newIsPlaying && currentTime > 0) {
+          const lyricsScrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
+          if (lyricsScrollArea) {
+            lyricsScrollArea.scrollTo({
+              top: 0,
+              behavior: 'smooth'
+            });
+          }
+          setCurrentLyricIndex(-1);
+        }
+        
+        setCurrentTime(newCurrentTime);
+        setDuration(newDuration);
+        setProgress(newDuration ? (newCurrentTime / newDuration) * 100 : 0);
+        setIsPlaying(newIsPlaying);
         setVolume(mainAudio.volume);
       }
     };
@@ -118,7 +160,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       const interval = setInterval(syncWithMainPlayer, 100);
       return () => clearInterval(interval);
     }
-  }, [isOpen, currentTrack]);
+  }, [isOpen, currentTrack, currentTime]);
 
   // Extract dominant color from cover art
   useEffect(() => {
@@ -286,7 +328,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
               </button>
             </div>
 
-            {/* Volume */}
+            {/* Volume and Lyrics Toggle */}
             <div className="flex items-center gap-3 flex-shrink-0">
               <button
                 onMouseEnter={() => setShowVolumeSlider(true)}
@@ -298,6 +340,18 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                 )}
               </button>
               
+              {lyrics.length > 0 && (
+                <button
+                  onClick={() => setShowLyrics(!showLyrics)}
+                  className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
+                    showLyrics ? 'text-primary' : 'text-gray-500'
+                  }`}
+                  title={showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
+                >
+                  <FaQuoteLeft className="w-5 h-5" />
+                </button>
+              )}
+              
               {showVolumeSlider && (
                 <div 
                   className="w-20 lg:w-24"
@@ -319,50 +373,35 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
           {/* Right Side - Lyrics */}
           {showLyrics && lyrics.length > 0 && (
             <div className="flex-1 lg:max-w-md min-h-0">
-              <Card className="bg-black/30 backdrop-blur-sm border-white/20 h-full">
-                <CardContent className="p-4 lg:p-6 h-full flex flex-col">
-                  <div className="flex items-center justify-between mb-4 flex-shrink-0">
-                    <h3 className="text-lg font-semibold text-foreground">Lyrics</h3>
-                    <button
-                      onClick={() => setShowLyrics(false)}
-                      className="text-foreground/60 hover:bg-foreground/20"
-                    >
-                      Hide
-                    </button>
+              <div className="h-full flex flex-col">
+                <ScrollArea className="flex-1 min-h-0">
+                  <div className="space-y-4 pr-4 px-2">
+                    {lyrics.map((line, index) => (
+                      <div
+                        key={index}
+                        data-lyric-index={index}
+                        className={`text-sm lg:text-base leading-relaxed transition-all duration-300 break-words ${
+                          index === currentLyricIndex
+                            ? 'text-primary font-semibold text-lg lg:text-xl scale-105'
+                            : index < currentLyricIndex
+                            ? 'text-primary/60'
+                            : 'text-primary/40'
+                        }`}
+                        style={{ 
+                          wordWrap: 'break-word',
+                          overflowWrap: 'break-word',
+                          hyphens: 'auto',
+                          paddingBottom: '8px'
+                        }}
+                      >
+                        {line.text || '♪'}
+                      </div>
+                    ))}
+                    {/* Add extra padding at the bottom to allow last lyric to center */}
+                    <div style={{ height: '200px' }} />
                   </div>
-                  
-                  <ScrollArea className="flex-1 min-h-0">
-                    <div className="space-y-3 pr-4">
-                      {lyrics.map((line, index) => (
-                        <div
-                          key={index}
-                          className={`text-sm leading-relaxed transition-all duration-300 ${
-                            index === currentLyricIndex
-                              ? 'text-foreground font-semibold text-base scale-105'
-                              : index < currentLyricIndex
-                              ? 'text-foreground/60'
-                              : 'text-foreground/40'
-                          }`}
-                        >
-                          {line.text || '♪'}
-                        </div>
-                      ))}
-                    </div>
-                  </ScrollArea>
-                </CardContent>
-              </Card>
-            </div>
-          )}
-
-          {/* Show Lyrics button when hidden */}
-          {!showLyrics && lyrics.length > 0 && (
-            <div className="lg:flex-1 lg:max-w-md flex items-start justify-center lg:justify-start pt-4 lg:pt-8 flex-shrink-0">
-              <button
-                onClick={() => setShowLyrics(true)}
-                className="bg-foreground/20 hover:bg-foreground/30 text-foreground backdrop-blur-sm"
-              >
-                Show Lyrics
-              </button>
+                </ScrollArea>
+              </div>
             </div>
           )}
         </div>

From 6ccb14f362b0bbde8c011d9c7b43619d53afe016 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 20:48:19 +0000
Subject: [PATCH 3/9] refactor: update lyric display styles for improved visual
 consistency

---
 app/components/FullScreenPlayer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index 4a97a96..33c8e8e 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -344,7 +344,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                 <button
                   onClick={() => setShowLyrics(!showLyrics)}
                   className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
-                    showLyrics ? 'text-primary' : 'text-gray-500'
+                    showLyrics ? 'text-foreground' : 'text-gray-500'
                   }`}
                   title={showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
                 >
@@ -382,10 +382,10 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                         data-lyric-index={index}
                         className={`text-sm lg:text-base leading-relaxed transition-all duration-300 break-words ${
                           index === currentLyricIndex
-                            ? 'text-primary font-semibold text-lg lg:text-xl scale-105'
+                            ? 'text-foreground font-semibold text-lg lg:text-xl scale-105'
                             : index < currentLyricIndex
-                            ? 'text-primary/60'
-                            : 'text-primary/40'
+                            ? 'text-foreground/60'
+                            : 'text-foreground/40'
                         }`}
                         style={{ 
                           wordWrap: 'break-word',

From 8404f5e49911f91318bfbdab6bac13816cec9f9c Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 21:02:26 +0000
Subject: [PATCH 4/9] feat: optimize lyric index updates and improve
 auto-scrolling functionality in FullScreenPlayer

---
 app/components/FullScreenPlayer.tsx | 129 ++++++++++++++++------------
 1 file changed, 75 insertions(+), 54 deletions(-)

diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index 33c8e8e..499c78c 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -75,80 +75,101 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     loadLyrics();
   }, [currentTrack]);
 
-  // Update current lyric index based on time
+  // Update current lyric index based on time (with optimization to prevent unnecessary updates)
   useEffect(() => {
     const newIndex = lrcLibClient.getCurrentLyricIndex(lyrics, currentTime);
-    setCurrentLyricIndex(newIndex);
-  }, [lyrics, currentTime]);
+    if (newIndex !== currentLyricIndex) {
+      setCurrentLyricIndex(newIndex);
+    }
+  }, [lyrics, currentTime, currentLyricIndex]);
 
-  // Auto-scroll lyrics to center current line without cutting off text
+  // Auto-scroll lyrics using lyricsRef
   useEffect(() => {
-    if (currentLyricIndex >= 0 && lyrics.length > 0 && showLyrics) {
-      // Use a small delay to ensure the DOM is updated
+    if (currentLyricIndex >= 0 && lyrics.length > 0 && showLyrics && lyricsRef.current) {
       const scrollTimeout = setTimeout(() => {
-        const lyricsScrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
-        if (lyricsScrollArea) {
-          const currentLyricElement = lyricsScrollArea.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
-          if (currentLyricElement) {
-            const containerHeight = lyricsScrollArea.clientHeight;
-            const elementHeight = currentLyricElement.offsetHeight;
-            const elementOffsetTop = currentLyricElement.offsetTop;
-            
-            // Calculate scroll position to center the current lyric
-            const targetScrollTop = elementOffsetTop - (containerHeight / 2) + (elementHeight / 2);
-            
-            lyricsScrollArea.scrollTo({
-              top: Math.max(0, targetScrollTop),
-              behavior: 'smooth'
-            });
-          }
+        // Find the ScrollArea viewport
+        const scrollViewport = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+        const currentLyricElement = lyricsRef.current?.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
+        
+        if (scrollViewport && currentLyricElement) {
+          const containerHeight = scrollViewport.clientHeight;
+          const elementTop = currentLyricElement.offsetTop;
+          const elementHeight = currentLyricElement.offsetHeight;
+          
+          // Calculate scroll position to center the current lyric
+          const targetScrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
+          
+          scrollViewport.scrollTo({
+            top: Math.max(0, targetScrollTop),
+            behavior: 'smooth'
+          });
         }
-      }, 50);
+      }, 100);
       
       return () => clearTimeout(scrollTimeout);
     }
-  }, [currentLyricIndex, lyrics.length, showLyrics]);
+  }, [currentLyricIndex, showLyrics]);
 
-  // Reset lyrics to top when song ends or changes
+  // Reset lyrics to top when song changes
   useEffect(() => {
-    if (currentTrack && showLyrics) {
-      const lyricsScrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
-      if (lyricsScrollArea) {
-        lyricsScrollArea.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      }
-      setCurrentLyricIndex(-1);
+    if (currentTrack && showLyrics && lyricsRef.current) {
+      // Reset scroll position using lyricsRef
+      const resetScroll = () => {
+        const scrollViewport = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+        
+        if (scrollViewport) {
+          scrollViewport.scrollTo({
+            top: 0,
+            behavior: 'instant' // Use instant for track changes
+          });
+        }
+      };
+      
+      // Small delay to ensure DOM is ready
+      const resetTimeout = setTimeout(() => {
+        resetScroll();
+        setCurrentLyricIndex(-1);
+      }, 50);
+      
+      return () => clearTimeout(resetTimeout);
     }
-  }, [currentTrack, showLyrics]);
+  }, [currentTrack?.id, showLyrics]); // Only reset when track ID changes
 
-  // Sync with main audio player
+  // Sync with main audio player (throttled to prevent infinite loops)
   useEffect(() => {
+    let lastUpdate = 0;
+    const throttleMs = 200; // Update at most every 200ms
+    
     const syncWithMainPlayer = () => {
+      const now = Date.now();
+      if (now - lastUpdate < throttleMs) return;
+      lastUpdate = now;
+      
       const mainAudio = document.querySelector('audio') as HTMLAudioElement;
       if (mainAudio && currentTrack) {
         const newCurrentTime = mainAudio.currentTime;
         const newDuration = mainAudio.duration || 0;
         const newIsPlaying = !mainAudio.paused;
         
-        // Check if song ended (reset lyrics to top)
-        if (newCurrentTime === 0 && !newIsPlaying && currentTime > 0) {
-          const lyricsScrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
-          if (lyricsScrollArea) {
-            lyricsScrollArea.scrollTo({
-              top: 0,
-              behavior: 'smooth'
-            });
-          }
-          setCurrentLyricIndex(-1);
+        // Only update state if values have changed significantly
+        if (Math.abs(newCurrentTime - currentTime) > 0.5) {
+          setCurrentTime(newCurrentTime);
+        }
+        if (Math.abs(newDuration - duration) > 0.1) {
+          setDuration(newDuration);
+        }
+        if (newDuration > 0) {
+          const newProgress = (newCurrentTime / newDuration) * 100;
+          if (Math.abs(newProgress - progress) > 0.1) {
+            setProgress(newProgress);
+          }
+        }
+        if (newIsPlaying !== isPlaying) {
+          setIsPlaying(newIsPlaying);
+        }
+        if (Math.abs(mainAudio.volume - volume) > 0.01) {
+          setVolume(mainAudio.volume);
         }
-        
-        setCurrentTime(newCurrentTime);
-        setDuration(newDuration);
-        setProgress(newDuration ? (newCurrentTime / newDuration) * 100 : 0);
-        setIsPlaying(newIsPlaying);
-        setVolume(mainAudio.volume);
       }
     };
 
@@ -160,7 +181,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       const interval = setInterval(syncWithMainPlayer, 100);
       return () => clearInterval(interval);
     }
-  }, [isOpen, currentTrack, currentTime]);
+  }, [isOpen, currentTrack]); // Removed currentTime from dependencies to prevent loop
 
   // Extract dominant color from cover art
   useEffect(() => {
@@ -372,7 +393,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
 
           {/* Right Side - Lyrics */}
           {showLyrics && lyrics.length > 0 && (
-            <div className="flex-1 lg:max-w-md min-h-0">
+            <div className="flex-1 lg:max-w-md min-h-0" ref={lyricsRef}>
               <div className="h-full flex flex-col">
                 <ScrollArea className="flex-1 min-h-0">
                   <div className="space-y-4 pr-4 px-2">

From b0b587835e77ef9ed1583f739adea4b1617739a0 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 21:10:18 +0000
Subject: [PATCH 5/9] fix: adjust ScrollArea width and add padding for improved
 lyric display

---
 app/components/FullScreenPlayer.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index 499c78c..6d44ebf 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -395,7 +395,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
           {showLyrics && lyrics.length > 0 && (
             <div className="flex-1 lg:max-w-md min-h-0" ref={lyricsRef}>
               <div className="h-full flex flex-col">
-                <ScrollArea className="flex-1 min-h-0">
+                <ScrollArea className="flex-1 min-h-0 w-90">
                   <div className="space-y-4 pr-4 px-2">
                     {lyrics.map((line, index) => (
                       <div
@@ -412,7 +412,8 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                           wordWrap: 'break-word',
                           overflowWrap: 'break-word',
                           hyphens: 'auto',
-                          paddingBottom: '8px'
+                          paddingBottom: '8px',
+                          paddingLeft: '9px'
                         }}
                       >
                         {line.text || '♪'}

From 6f33c35c47f88fb9b9ba5af6420f9b143605307e Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 21:42:37 +0000
Subject: [PATCH 6/9] feat: add queue navigation to FullScreenPlayer and
 improve UI elements

---
 app/components/AudioPlayer.tsx      | 68 +++++++++++++++++++++++++
 app/components/FullScreenPlayer.tsx | 77 ++++++++++++++++++++---------
 2 files changed, 121 insertions(+), 24 deletions(-)

diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 72b762e..80d7143 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React, { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
 import { FullScreenPlayer } from '@/app/components/FullScreenPlayer';
 import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaCompress, FaVolumeXmark, FaExpand } from "react-icons/fa6";
@@ -10,6 +11,7 @@ import { useToast } from '@/hooks/use-toast';
 
 export const AudioPlayer: React.FC = () => {
   const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue } = useAudioPlayer();
+  const router = useRouter();
   const audioRef = useRef<HTMLAudioElement>(null);
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -21,6 +23,11 @@ export const AudioPlayer: React.FC = () => {
   const audioCurrent = audioRef.current;
   const { toast } = useToast();
   
+  const handleOpenQueue = () => {
+    setIsFullScreen(false);
+    router.push('/queue');
+  };
+  
   useEffect(() => {
     setIsClient(true);
   }, []);
@@ -114,6 +121,66 @@ export const AudioPlayer: React.FC = () => {
       }
     };
   }, [playNextTrack, currentTrack]);
+
+  // Media Session API integration
+  useEffect(() => {
+    if (!isClient || !currentTrack || !('mediaSession' in navigator)) return;
+
+    // Set metadata
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: currentTrack.name,
+      artist: currentTrack.artist,
+      album: currentTrack.album,
+      artwork: currentTrack.coverArt ? [
+        { src: currentTrack.coverArt, sizes: '512x512', type: 'image/jpeg' }
+      ] : undefined,
+    });
+
+    // Set playback state
+    navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
+
+    // Set action handlers
+    navigator.mediaSession.setActionHandler('play', () => {
+      const audioCurrent = audioRef.current;
+      if (audioCurrent) {
+        audioCurrent.play();
+        setIsPlaying(true);
+      }
+    });
+
+    navigator.mediaSession.setActionHandler('pause', () => {
+      const audioCurrent = audioRef.current;
+      if (audioCurrent) {
+        audioCurrent.pause();
+        setIsPlaying(false);
+      }
+    });
+
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+      playPreviousTrack();
+    });
+
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+      playNextTrack();
+    });
+
+    navigator.mediaSession.setActionHandler('seekto', (details) => {
+      const audioCurrent = audioRef.current;
+      if (audioCurrent && details.seekTime !== undefined) {
+        audioCurrent.currentTime = details.seekTime;
+      }
+    });
+
+    return () => {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.setActionHandler('play', null);
+        navigator.mediaSession.setActionHandler('pause', null);
+        navigator.mediaSession.setActionHandler('previoustrack', null);
+        navigator.mediaSession.setActionHandler('nexttrack', null);
+        navigator.mediaSession.setActionHandler('seekto', null);
+      }
+    };
+  }, [currentTrack, isPlaying, isClient, playPreviousTrack, playNextTrack]);
   
   const handleProgressClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (audioCurrent && currentTrack) {
@@ -254,6 +321,7 @@ export const AudioPlayer: React.FC = () => {
       <FullScreenPlayer 
         isOpen={isFullScreen} 
         onClose={() => setIsFullScreen(false)} 
+        onOpenQueue={handleOpenQueue}
       />
     </div>
   );
diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index 6d44ebf..8785b3a 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -15,7 +15,8 @@ import {
   FaShuffle,
   FaRepeat,
   FaXmark,
-  FaQuoteLeft
+  FaQuoteLeft,
+  FaListUl
 } from "react-icons/fa6";
 import { Card, CardContent } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -28,9 +29,10 @@ interface LyricLine {
 interface FullScreenPlayerProps {
   isOpen: boolean;
   onClose: () => void;
+  onOpenQueue?: () => void;
 }
 
-export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onClose }) => {
+export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onClose, onOpenQueue }) => {
   const { currentTrack, playPreviousTrack, playNextTrack } = useAudioPlayer();
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -135,10 +137,10 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     }
   }, [currentTrack?.id, showLyrics]); // Only reset when track ID changes
 
-  // Sync with main audio player (throttled to prevent infinite loops)
+  // Sync with main audio player (improved responsiveness)
   useEffect(() => {
     let lastUpdate = 0;
-    const throttleMs = 200; // Update at most every 200ms
+    const throttleMs = 100; // Update at most every 100ms for better responsiveness
     
     const syncWithMainPlayer = () => {
       const now = Date.now();
@@ -151,8 +153,13 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
         const newDuration = mainAudio.duration || 0;
         const newIsPlaying = !mainAudio.paused;
         
+        // Always update playing state for better responsiveness
+        if (newIsPlaying !== isPlaying) {
+          setIsPlaying(newIsPlaying);
+        }
+        
         // Only update state if values have changed significantly
-        if (Math.abs(newCurrentTime - currentTime) > 0.5) {
+        if (Math.abs(newCurrentTime - currentTime) > 0.3) {
           setCurrentTime(newCurrentTime);
         }
         if (Math.abs(newDuration - duration) > 0.1) {
@@ -164,9 +171,6 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             setProgress(newProgress);
           }
         }
-        if (newIsPlaying !== isPlaying) {
-          setIsPlaying(newIsPlaying);
-        }
         if (Math.abs(mainAudio.volume - volume) > 0.01) {
           setVolume(mainAudio.volume);
         }
@@ -177,11 +181,11 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       // Initial sync
       syncWithMainPlayer();
       
-      // Set up interval to keep syncing
-      const interval = setInterval(syncWithMainPlayer, 100);
+      // Set up interval to keep syncing - more frequent for better responsiveness
+      const interval = setInterval(syncWithMainPlayer, 50);
       return () => clearInterval(interval);
     }
-  }, [isOpen, currentTrack]); // Removed currentTime from dependencies to prevent loop
+  }, [isOpen, currentTrack]); // Removed other dependencies to prevent loop
 
   // Extract dominant color from cover art
   useEffect(() => {
@@ -265,22 +269,47 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
 
   if (!isOpen || !currentTrack) return null;
 
-  const backgroundStyle = {
-    background: `linear-gradient(135deg, ${dominantColor}40 0%, ${dominantColor}20 50%, transparent 100%)`
-  };
-
   return (
-    <div className="fixed inset-0 z-50 bg-black bg-opacity-95 backdrop-blur-sm overflow-hidden">
-      <div className="h-full w-full flex flex-col" style={backgroundStyle}>
+    <div className="fixed inset-0 z-50 bg-black overflow-hidden">
+      {/* Blurred background image */}
+      {currentTrack.coverArt && (
+        <div 
+          className="absolute inset-0 w-full h-full"
+          style={{
+            backgroundImage: `url(${currentTrack.coverArt})`,
+            backgroundSize: '120%',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+            filter: 'blur(20px) brightness(0.3)',
+            transform: 'scale(1.1)',
+          }}
+        />
+      )}
+      
+      {/* Overlay for better contrast */}
+      <div className="absolute inset-0 bg-black/50" />
+      
+      <div className="relative h-full w-full flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-4 lg:p-6 flex-shrink-0">
           <h2 className="text-lg lg:text-xl font-semibold text-white">Now Playing</h2>
-          <button 
-            onClick={onClose}
-            className="text-white hover:bg-white/20"
-          >
-            <FaXmark className="w-5 h-5" />
-          </button>
+          <div className="flex items-center gap-3">
+            {onOpenQueue && (
+              <button 
+                onClick={onOpenQueue}
+                className="text-white hover:bg-white/20 p-2 rounded-full transition-colors"
+                title="Open Queue"
+              >
+                <FaListUl className="w-5 h-5" />
+              </button>
+            )}
+            <button 
+              onClick={onClose}
+              className="text-white hover:bg-white/20 p-2 rounded-full transition-colors"
+            >
+              <FaXmark className="w-5 h-5" />
+            </button>
+          </div>
         </div>
 
         {/* Main Content */}
@@ -349,7 +378,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
               </button>
             </div>
 
-            {/* Volume and Lyrics Toggle */}
+            {/* Volume and Queue */}
             <div className="flex items-center gap-3 flex-shrink-0">
               <button
                 onMouseEnter={() => setShowVolumeSlider(true)}

From 77614fed97feba246444f3706c0cc623f54898d9 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 21:53:58 +0000
Subject: [PATCH 7/9] fix: streamline localStorage handling for track time in
 AudioPlayer

---
 app/components/AudioPlayer.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 80d7143..6bd235e 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -30,6 +30,16 @@ export const AudioPlayer: React.FC = () => {
   
   useEffect(() => {
     setIsClient(true);
+    
+    // Clean up old localStorage entries with track IDs
+    const keysToRemove: string[] = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith('navidrome-track-time-')) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach(key => localStorage.removeItem(key));
   }, []);
 
   // Save position when component unmounts or track changes
@@ -37,7 +47,7 @@ export const AudioPlayer: React.FC = () => {
     const audioCurrent = audioRef.current;
     return () => {
       if (audioCurrent && currentTrack && audioCurrent.currentTime > 10) {
-        localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, audioCurrent.currentTime.toString());
+        localStorage.setItem('navidrome-current-track-time', audioCurrent.currentTime.toString());
       }
     };
   }, [currentTrack]);
@@ -49,7 +59,7 @@ export const AudioPlayer: React.FC = () => {
       audioCurrent.src = currentTrack.url;
       
       // Check for saved timestamp (only restore if more than 10 seconds in)
-      const savedTime = localStorage.getItem(`navidrome-track-time-${currentTrack.id}`);
+      const savedTime = localStorage.getItem('navidrome-current-track-time');
       if (savedTime) {
         const time = parseFloat(savedTime);
         // Only restore if we were at least 10 seconds in and not near the end
@@ -66,7 +76,13 @@ export const AudioPlayer: React.FC = () => {
           } else {
             audioCurrent.addEventListener('loadeddata', restorePosition);
           }
+        } else {
+          // Clear saved time if we're not restoring it
+          localStorage.removeItem('navidrome-current-track-time');
         }
+      } else {
+        // Clear saved time if no saved time exists
+        localStorage.removeItem('navidrome-current-track-time');
       }
       
       audioCurrent.play();
@@ -82,10 +98,10 @@ export const AudioPlayer: React.FC = () => {
       if (audioCurrent && currentTrack) {
         setProgress((audioCurrent.currentTime / audioCurrent.duration) * 100);
         
-        // Save current time every 10 seconds, but only if we've moved forward significantly
+        // Save current time every 30 seconds, but only if we've moved forward significantly
         const currentTime = audioCurrent.currentTime;
-        if (Math.abs(currentTime - lastSavedTime) >= 10 && currentTime > 10) {
-          localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, currentTime.toString());
+        if (Math.abs(currentTime - lastSavedTime) >= 30 && currentTime > 10) {
+          localStorage.setItem('navidrome-current-track-time', currentTime.toString());
           lastSavedTime = currentTime;
         }
       }
@@ -94,7 +110,7 @@ export const AudioPlayer: React.FC = () => {
     const handleTrackEnd = () => {
       if (currentTrack) {
         // Clear saved time when track ends
-        localStorage.removeItem(`navidrome-track-time-${currentTrack.id}`);
+        localStorage.removeItem('navidrome-current-track-time');
       }
       playNextTrack();
     };
@@ -102,7 +118,7 @@ export const AudioPlayer: React.FC = () => {
     const handleSeeked = () => {
       if (audioCurrent && currentTrack) {
         // Save immediately when user seeks
-        localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, audioCurrent.currentTime.toString());
+        localStorage.setItem('navidrome-current-track-time', audioCurrent.currentTime.toString());
         lastSavedTime = audioCurrent.currentTime;
       }
     };
@@ -190,7 +206,7 @@ export const AudioPlayer: React.FC = () => {
       audioCurrent.currentTime = newTime;
       
       // Save the new position immediately
-      localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, newTime.toString());
+      localStorage.setItem('navidrome-current-track-time', newTime.toString());
     }
   };
 

From fa5acd5a10712a5b30621c8c5d3d51d9a8cc1b18 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 22:04:53 +0000
Subject: [PATCH 8/9] fix: strip trailing slashes from server URL for
 consistency in config updates

---
 app/components/NavidromeConfigContext.tsx |  7 ++++++-
 app/settings/page.tsx                     | 12 ++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/NavidromeConfigContext.tsx b/app/components/NavidromeConfigContext.tsx
index 47c1f8f..6868c70 100644
--- a/app/components/NavidromeConfigContext.tsx
+++ b/app/components/NavidromeConfigContext.tsx
@@ -48,7 +48,12 @@ export const NavidromeConfigProvider: React.FC<NavidromeConfigProviderProps> = (
   }, [config]);
 
   const updateConfig = (newConfig: NavidromeConfig) => {
-    setConfig(newConfig);
+    // Strip trailing slashes from server URL for consistency
+    const cleanConfig = {
+      ...newConfig,
+      serverUrl: newConfig.serverUrl.replace(/\/+$/, '')
+    };
+    setConfig(cleanConfig);
     setIsConnected(false);
   };
 
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 7d6c3a1..e5422b8 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -41,8 +41,11 @@ const SettingsPage = () => {
 
         setIsTesting(true);
         try {
+            // Strip trailing slash from server URL before testing
+            const cleanServerUrl = formData.serverUrl.replace(/\/+$/, '');
+            
             const success = await testConnection({
-                serverUrl: formData.serverUrl,
+                serverUrl: cleanServerUrl,
                 username: formData.username,
                 password: formData.password
             });
@@ -80,12 +83,17 @@ const SettingsPage = () => {
             return;
         }
 
+        // Strip trailing slash from server URL to ensure consistency
+        const cleanServerUrl = formData.serverUrl.replace(/\/+$/, '');
+
         updateConfig({
-            serverUrl: formData.serverUrl,
+            serverUrl: cleanServerUrl,
             username: formData.username,
             password: formData.password
         });
         
+        // Update form data to reflect the cleaned URL
+        setFormData(prev => ({ ...prev, serverUrl: cleanServerUrl }));
         setHasUnsavedChanges(false);
         toast({
             title: "Settings Saved",

From 3cc1e4d441f3250410a6bf7cf763f6cfb6e30f0d Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 22:11:07 +0000
Subject: [PATCH 9/9] fix: clear saved track time when changing tracks in
 AudioPlayer and AudioPlayerContext

---
 app/components/AudioPlayer.tsx        | 9 ++++-----
 app/components/AudioPlayerContext.tsx | 9 +++++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 6bd235e..353c595 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -56,6 +56,9 @@ export const AudioPlayer: React.FC = () => {
     const audioCurrent = audioRef.current;
     
     if (currentTrack && audioCurrent && audioCurrent.src !== currentTrack.url) {
+      // Always clear current track time when changing tracks
+      localStorage.removeItem('navidrome-current-track-time');
+      
       audioCurrent.src = currentTrack.url;
       
       // Check for saved timestamp (only restore if more than 10 seconds in)
@@ -76,12 +79,8 @@ export const AudioPlayer: React.FC = () => {
           } else {
             audioCurrent.addEventListener('loadeddata', restorePosition);
           }
-        } else {
-          // Clear saved time if we're not restoring it
-          localStorage.removeItem('navidrome-current-track-time');
         }
-      } else {
-        // Clear saved time if no saved time exists
+        // Always clear after attempting to restore
         localStorage.removeItem('navidrome-current-track-time');
       }
       
diff --git a/app/components/AudioPlayerContext.tsx b/app/components/AudioPlayerContext.tsx
index 934763a..dee80e1 100644
--- a/app/components/AudioPlayerContext.tsx
+++ b/app/components/AudioPlayerContext.tsx
@@ -93,6 +93,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
   }, [api]);
 
   const playTrack = useCallback((track: Track) => {
+    // Clear saved timestamp when manually playing a track
+    localStorage.removeItem('navidrome-current-track-time');
+    
     if (currentTrack) {
       setPlayedTracks((prev) => [...prev, currentTrack]);
     }
@@ -117,6 +120,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
   }, []);
 
   const playNextTrack = useCallback(() => {
+    // Clear saved timestamp when changing tracks
+    localStorage.removeItem('navidrome-current-track-time');
+    
     if (queue.length > 0) {
       const nextTrack = queue[0];
       setQueue((prevQueue) => prevQueue.slice(1));
@@ -125,6 +131,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
   }, [queue, playTrack]);
 
   const playPreviousTrack = useCallback(() => {
+    // Clear saved timestamp when changing tracks  
+    localStorage.removeItem('navidrome-current-track-time');
+    
     if (playedTracks.length > 0) {
       const previousTrack = playedTracks[playedTracks.length - 1];
       setPlayedTracks((prevPlayedTracks) => prevPlayedTracks.slice(0, -1));