From 707960b088641a1bdeb1ebfc63547d29b9de71ac Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Wed, 2 Jul 2025 00:37:01 +0000
Subject: [PATCH] feat: update commit SHA, enhance audio player and full screen
 player with favorite functionality, and update various components to support
 starred tracks

---
 .env.local                            |  2 +-
 app/components/AudioPlayer.tsx        | 29 +++++++++-
 app/components/AudioPlayerContext.tsx | 80 ++++++++++++++++++++++++++-
 app/components/FullScreenPlayer.tsx   | 36 ++++++++----
 app/components/PopularSongs.tsx       |  3 +-
 app/components/album-artwork.tsx      |  1 +
 app/favorites/page.tsx                |  2 +
 app/library/songs/page.tsx            |  6 +-
 app/playlist/[id]/page.tsx            |  9 ++-
 app/search/page.tsx                   |  6 +-
 app/settings/page.tsx                 |  4 +-
 11 files changed, 150 insertions(+), 28 deletions(-)

diff --git a/.env.local b/.env.local
index 0b91c98..b2174de 100644
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=0cb4f23
+NEXT_PUBLIC_COMMIT_SHA=d6ac247
diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 0498e94..2bed2d4 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -5,13 +5,14 @@ import { useRouter } from 'next/navigation';
 import { useAudioPlayer, Track } from '@/app/components/AudioPlayerContext';
 import { FullScreenPlayer } from '@/app/components/FullScreenPlayer';
 import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaCompress, FaVolumeXmark, FaExpand, FaShuffle } from "react-icons/fa6";
+import { Heart } from 'lucide-react';
 import { Progress } from '@/components/ui/progress';
 import { useToast } from '@/hooks/use-toast';
 import { useLastFmScrobbler } from '@/hooks/use-lastfm-scrobbler';
 import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
 
 export const AudioPlayer: React.FC = () => {
-  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue, toggleShuffle, shuffle } = useAudioPlayer();
+  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue, toggleShuffle, shuffle, toggleCurrentTrackStar } = useAudioPlayer();
   const router = useRouter();
   const audioRef = useRef<HTMLAudioElement>(null);
   const preloadAudioRef = useRef<HTMLAudioElement>(null);
@@ -377,6 +378,19 @@ export const AudioPlayer: React.FC = () => {
               </div>
               <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
             </div>
+            {/* Heart icon for favoriting */}
+            <button 
+              className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors mr-2" 
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCurrentTrackStar();
+              }}
+              title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
+            >
+              <Heart 
+                className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : 'text-gray-400'}`} 
+              />
+            </button>
             <div className="flex items-center justify-center space-x-2">
           <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
             <FaBackward className="w-3 h-3" />
@@ -413,7 +427,6 @@ export const AudioPlayer: React.FC = () => {
               <p className="font-semibold truncate text-sm">{currentTrack.name}</p>
               <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
             </div>
-            {/* faviorte icon or smthing here */}
           </div>
           {/* Control buttons */}
           <button
@@ -430,6 +443,18 @@ export const AudioPlayer: React.FC = () => {
           <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
             <FaForward className="w-3 h-3" />
           </button>
+              <button 
+                className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors flex items-center justify-center" 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleCurrentTrackStar();
+                }}
+                title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
+              >
+                <Heart 
+                  className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`} 
+                />
+              </button>
         </div>
           <div className="flex items-center space-x-1 ml-2">
             <button 
diff --git a/app/components/AudioPlayerContext.tsx b/app/components/AudioPlayerContext.tsx
index bd60a40..ebeea08 100644
--- a/app/components/AudioPlayerContext.tsx
+++ b/app/components/AudioPlayerContext.tsx
@@ -16,6 +16,7 @@ export interface Track {
   albumId: string;
   artistId: string;
   autoPlay?: boolean; // Flag to control auto-play
+  starred?: boolean; // Flag for starred/favorited tracks
 }
 
 interface AudioPlayerContextProps {
@@ -39,6 +40,8 @@ interface AudioPlayerContextProps {
   playArtist: (artistId: string) => Promise<void>;
   playedTracks: Track[];
   clearHistory: () => void;
+  toggleCurrentTrackStar: () => Promise<void>;
+  updateTrackStarred: (trackId: string, starred: boolean) => void;
 }
 
 const AudioPlayerContext = createContext<AudioPlayerContextProps | undefined>(undefined);
@@ -104,7 +107,8 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
   }, [api]);
 
@@ -577,7 +581,75 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     shuffleAllAlbums,
     playArtist,
     playedTracks,
-    clearHistory
+    clearHistory,
+    toggleCurrentTrackStar: async () => {
+      if (!currentTrack || !api) {
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: "No track currently playing or API not configured",
+        });
+        return;
+      }
+      
+      const newStarredStatus = !currentTrack.starred;
+      
+      try {
+        if (newStarredStatus) {
+          await api.star(currentTrack.id, 'song');
+        } else {
+          await api.unstar(currentTrack.id, 'song');
+        }
+        
+        // Update the current track state
+        setCurrentTrack((prev) => prev ? { ...prev, starred: newStarredStatus } : null);
+        
+       
+      } catch (error) {
+        console.error('Failed to update track starred status:', error);
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: "Failed to update track favorite status",
+        });
+      }
+    },
+    updateTrackStarred: async (trackId: string, starred: boolean) => {
+      if (!api) {
+        toast({
+          variant: "destructive",
+          title: "Configuration Required",
+          description: "Please configure Navidrome connection in settings",
+        });
+        return;
+      }
+  
+      try {
+        if (starred) {
+          await api.star(trackId, 'song');
+        } else {
+          await api.unstar(trackId, 'song');
+        }
+        
+        // Update the current track state if it matches the updated track
+        if (currentTrack?.id === trackId) {
+          setCurrentTrack((prev) => prev ? { ...prev, starred } : null);
+        }
+        
+        // Also update queue if the track is in there
+        setQueue((prev) => prev.map(track => 
+          track.id === trackId ? { ...track, starred } : track
+        ));
+        
+      } catch (error) {
+        console.error('Failed to update track starred status:', error);
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: "Failed to update track favorite status",
+        });
+      }
+    }
   }), [
     currentTrack, 
     queue, 
@@ -598,7 +670,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     shuffleAllAlbums,
     playArtist,
     playedTracks,
-    clearHistory
+    clearHistory,
+    api,
+    toast
   ]);
 
   return (
diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index cb7fca3..a39648d 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -19,6 +19,7 @@ import {
   FaQuoteLeft,
   FaListUl
 } from "react-icons/fa6";
+import { Heart } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
@@ -34,7 +35,7 @@ interface FullScreenPlayerProps {
 }
 
 export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onClose, onOpenQueue }) => {
-  const { currentTrack, playPreviousTrack, playNextTrack, shuffle, toggleShuffle } = useAudioPlayer();
+  const { currentTrack, playPreviousTrack, playNextTrack, shuffle, toggleShuffle, toggleCurrentTrackStar } = useAudioPlayer();
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [volume, setVolume] = useState(1);
@@ -384,17 +385,17 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                 <FaForward className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
 
-              {lyrics.length > 0 && (
-                <button
-                  onClick={() => setShowLyrics(!showLyrics)}
-                  className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
-                    showLyrics ? 'text-primary bg-primary/20' : 'text-gray-500'
-                  }`}
-                  title={showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
-                >
-                  <FaQuoteLeft className="w-4 h-4 sm:w-5 sm:h-5" />
-                </button>
-              )}
+              <button
+                onClick={toggleCurrentTrackStar}
+                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
+                title={currentTrack?.starred ? 'Remove from favorites' : 'Add to favorites'}
+              >
+                <Heart 
+                  className={`w-4 h-4 sm:w-5 sm:h-5 ${currentTrack?.starred ? 'text-primary fill-primary' : 'text-gray-400'}`} 
+                />
+              </button>
+
+              
               
             </div>
 
@@ -410,6 +411,17 @@ 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 bg-primary/20' : 'text-gray-500'
+                  }`}
+                  title={showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
+                >
+                  <FaQuoteLeft className="w-4 h-4 sm:w-5 sm:h-5" />
+                </button>
+              )}
               
               {showVolumeSlider && (
                 <div 
diff --git a/app/components/PopularSongs.tsx b/app/components/PopularSongs.tsx
index 60e7ee7..b4b2eef 100644
--- a/app/components/PopularSongs.tsx
+++ b/app/components/PopularSongs.tsx
@@ -38,7 +38,8 @@ export function PopularSongs({ songs, artistName }: PopularSongsProps) {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
   };
 
diff --git a/app/components/album-artwork.tsx b/app/components/album-artwork.tsx
index 4cf4247..3f7611d 100644
--- a/app/components/album-artwork.tsx
+++ b/app/components/album-artwork.tsx
@@ -79,6 +79,7 @@ export function AlbumArtwork({
             url: api.getStreamUrl(song.id),
             duration: song.duration,
             coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt) : undefined,
+            starred: !!song.starred
           }));
           
           playTrack(tracks[0]);
diff --git a/app/favorites/page.tsx b/app/favorites/page.tsx
index 976fa02..ce27707 100644
--- a/app/favorites/page.tsx
+++ b/app/favorites/page.tsx
@@ -60,6 +60,7 @@ const FavoritesPage = () => {
       url: api?.getStreamUrl(song.id) || '',
       duration: song.duration,
       coverArt: song.coverArt ? api?.getCoverArtUrl(song.coverArt) : undefined,
+      starred: !!song.starred
     });
   };
 
@@ -79,6 +80,7 @@ const FavoritesPage = () => {
           url: api.getStreamUrl(song.id),
           duration: song.duration,
           coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt) : undefined,
+          starred: !!song.starred
         }));
         
         playTrack(tracks[0]);
diff --git a/app/library/songs/page.tsx b/app/library/songs/page.tsx
index a1d8581..3e76b59 100644
--- a/app/library/songs/page.tsx
+++ b/app/library/songs/page.tsx
@@ -116,7 +116,8 @@ export default function SongsPage() {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
 
     playTrack(track);
@@ -136,7 +137,8 @@ export default function SongsPage() {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
 
     addToQueue(track);
diff --git a/app/playlist/[id]/page.tsx b/app/playlist/[id]/page.tsx
index b1b957d..749abbd 100644
--- a/app/playlist/[id]/page.tsx
+++ b/app/playlist/[id]/page.tsx
@@ -59,7 +59,8 @@ export default function PlaylistPage() {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
     playTrack(track);
   };
@@ -78,7 +79,8 @@ export default function PlaylistPage() {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
     addToQueue(track);
   };
@@ -98,7 +100,8 @@ export default function PlaylistPage() {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     }));
 
     // Play the first track and add the rest to queue
diff --git a/app/search/page.tsx b/app/search/page.tsx
index 76f6809..b626008 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -66,7 +66,8 @@ export default function SearchPage() {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
 
     playTrack(track);
@@ -86,7 +87,8 @@ export default function SearchPage() {
       duration: song.duration,
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
-      artistId: song.artistId
+      artistId: song.artistId,
+      starred: !!song.starred
     };
 
     addToQueue(track);
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 081e0fe..6f172bd 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -443,7 +443,7 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card>
 
-                <Card>
+                {/* <Card>
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <FaCog className="w-5 h-5" />
@@ -472,7 +472,7 @@ const SettingsPage = () => {
                             </p>
                         </div>
                     </CardContent>
-                </Card>
+                </Card> */}
 
                 <Card>
                     <CardHeader>