From 2defd12500132d6ab2b843a47a1e73f368357f03 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Fri, 20 Jun 2025 16:35:10 +0000
Subject: [PATCH] feat: enhance playlist and track display with cover art and
 improved layout

---
 app/library/playlists/page.tsx |  66 +++++-----
 app/playlist/[id]/page.tsx     | 212 +++++++++++++++++++++++++--------
 2 files changed, 200 insertions(+), 78 deletions(-)

diff --git a/app/library/playlists/page.tsx b/app/library/playlists/page.tsx
index f54b6e0..6d3e0cf 100644
--- a/app/library/playlists/page.tsx
+++ b/app/library/playlists/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
@@ -8,9 +9,11 @@ import Loading from '@/app/components/loading';
 import { Button } from '@/components/ui/button';
 import { PlusCircledIcon } from "@radix-ui/react-icons";
 import Link from 'next/link';
+import { getNavidromeAPI } from '@/lib/navidrome';
 
 const PlaylistsPage: React.FC = () => {
   const { playlists, isLoading, createPlaylist } = useNavidrome();
+  const api = getNavidromeAPI();
 
   const handleCreatePlaylist = async () => {
     const name = prompt('Enter playlist name:');
@@ -49,39 +52,42 @@ const PlaylistsPage: React.FC = () => {
           <div className="relative">
             <ScrollArea>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-4">
-                {playlists.map((playlist) => (
-                  <Link key={playlist.id} href={`/playlist/${playlist.id}`}>
-                    <div className="p-4 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer">
-                      <div className="flex items-center space-x-4">
-                        <div className="w-12 h-12 bg-muted rounded-md flex items-center justify-center">
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            className="h-6 w-6"
-                            viewBox="0 0 24 24"
-                          >
-                            <path d="M21 15V6M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12 12H3M16 6H3M12 18H3" />
-                          </svg>
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <p className="font-medium leading-none truncate">{playlist.name}</p>
-                          <p className="text-sm text-muted-foreground mt-1">
-                            {playlist.songCount} songs
-                          </p>
-                          {playlist.comment && (
-                            <p className="text-xs text-muted-foreground mt-1 truncate">
-                              {playlist.comment}
+                {playlists.map((playlist) => {
+                  const playlistCoverUrl = playlist.coverArt
+                    ? api.getCoverArtUrl(playlist.coverArt, 200)
+                    : '/default-user.jpg';
+                  
+                  return (
+                    <Link key={playlist.id} href={`/playlist/${playlist.id}`}>
+                      <div className="p-4 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer h-32">
+                        <div className="flex items-center space-x-4 h-full">
+                          <div className="w-12 h-12 bg-muted rounded-md overflow-hidden flex-shrink-0">
+                            <Image
+                              src={playlistCoverUrl}
+                              alt={playlist.name}
+                              width={48}
+                              height={48}
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <div className="flex-1 min-w-0 flex flex-col justify-center">
+                            <p className="font-medium leading-none truncate">{playlist.name}</p>
+                            <p className="text-sm text-muted-foreground mt-1">
+                              {playlist.songCount} songs
                             </p>
-                          )}
+                            <div className="h-4 mt-1">
+                              {playlist.comment && (
+                                <p className="text-xs text-muted-foreground truncate">
+                                  {playlist.comment}
+                                </p>
+                              )}
+                            </div>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </Link>
-                ))}
+                    </Link>
+                  );
+                })}
               </div>
               <ScrollBar orientation="horizontal" />
             </ScrollArea>
diff --git a/app/playlist/[id]/page.tsx b/app/playlist/[id]/page.tsx
index a41ecc9..1990c4f 100644
--- a/app/playlist/[id]/page.tsx
+++ b/app/playlist/[id]/page.tsx
@@ -3,13 +3,16 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import Image from 'next/image';
+import Link from 'next/link';
 import { Playlist, Song } from '@/lib/navidrome';
 import { useNavidrome } from '@/app/components/NavidromeContext';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
-import { Play, Heart, Plus } from 'lucide-react';
+import { getNavidromeAPI } from '@/lib/navidrome';
+import { Play, Heart, Plus, Clock, User, Disc } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import Loading from "@/app/components/loading";
 import { Separator } from '@/components/ui/separator';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 export default function PlaylistPage() {
   const { id } = useParams();
@@ -17,7 +20,8 @@ export default function PlaylistPage() {
   const [tracklist, setTracklist] = useState<Song[]>([]);
   const [loading, setLoading] = useState(true);
   const { getPlaylist } = useNavidrome();
-  const { playTrack, addToQueue } = useAudioPlayer();
+  const { playTrack, addToQueue, currentTrack } = useAudioPlayer();
+  const api = getNavidromeAPI();
 
   useEffect(() => {
     const fetchPlaylist = async () => {
@@ -45,11 +49,11 @@ export default function PlaylistPage() {
     const track = {
       id: song.id,
       name: song.title,
-      url: '', // Will be set by the context
+      url: api.getStreamUrl(song.id),
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId
     };
@@ -60,21 +64,51 @@ export default function PlaylistPage() {
     const track = {
       id: song.id,
       name: song.title,
-      url: '', // Will be set by the context
+      url: api.getStreamUrl(song.id),
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId
     };
     addToQueue(track);
   };
 
-  const formatDuration = (seconds: number) => {
-    const minutes = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
-    return `${minutes}:${secs}`;
+  const handlePlayPlaylist = () => {
+    if (tracklist.length === 0) return;
+    
+    // Convert all songs to tracks
+    const tracks = tracklist.map(song => ({
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId
+    }));
+
+    // Play the first track and add the rest to queue
+    if (tracks.length > 0) {
+      playTrack(tracks[0], true); // Enable autoplay
+      if (tracks.length > 1) {
+        // Add remaining tracks to queue
+        tracks.slice(1).forEach(track => addToQueue(track));
+      }
+    }
+  };
+
+  const isCurrentlyPlaying = (song: Song): boolean => {
+    return currentTrack?.id === song.id;
+  };
+
+  const formatDuration = (duration: number): string => {
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
   };
 
   if (loading) {
@@ -92,64 +126,146 @@ export default function PlaylistPage() {
     );
   }
 
+  // Get playlist cover art URL with fallback
+  const playlistCoverUrl = playlist.coverArt
+    ? api.getCoverArtUrl(playlist.coverArt, 300)
+    : '/default-user.jpg';
+
   return (
     <div className="h-full px-4 py-6 lg:px-8">
       <div className="space-y-4">
         <div className="flex items-start gap-6">
-          <div className="w-[300px] h-[300px] bg-muted rounded-md flex items-center justify-center">
-            <Play className="h-16 w-16 text-muted-foreground" />
+          <div className="w-[300px] h-[300px] bg-muted rounded-md overflow-hidden">
+            <Image
+              src={playlistCoverUrl}
+              alt={playlist.name}
+              width={300}
+              height={300}
+              className="w-full h-full object-cover"
+              priority
+            />
           </div>
           <div className="space-y-2">
             <div className="flex items-center space-x-4">
               <p className="text-3xl font-semibold tracking-tight">{playlist.name}</p>
             </div>
             {playlist.comment && (
-              <p className="text-lg text-muted-foreground">{playlist.comment}</p>
+              <p className="text-xl text-muted-foreground mt-0 mb-4">{playlist.comment}</p>
             )}
+            <Button className="px-5" onClick={() => handlePlayPlaylist()}>
+              <Play />
+              Play Playlist
+            </Button>
             <div className="text-sm text-muted-foreground">
-              <p>{playlist.songCount} songs • {formatDuration(playlist.duration || 0)}</p>
+              <p>{playlist.songCount} songs • Duration: {formatDuration(playlist.duration || 0)}</p>
               {playlist.public !== undefined && (
                 <p>{playlist.public ? 'Public' : 'Private'} playlist</p>
               )}
             </div>
           </div>
         </div>
-        <div className="space-y-2">
+        <div className="space-y-4">
           <Separator />
-          {tracklist.length > 0 ? (
-            tracklist.map((song, index) => (
-              <div key={song.id} className="py-2 flex justify-between items-center hover:bg-hover rounded-lg cursor-pointer" onClick={() => handlePlayClick(song)}>
-                <div className="flex items-center">
-                  <div className="mr-2 w-6 text-right">{index + 1}</div>
-                  <div>
-                    <p className="font-semibold text-lg flex items-center">
-                      {song.title}
-                    </p>
-                    <p className="text-sm font-normal flex items-center">
-                      <span className="text-gray-400">{song.artist}</span>
-                    </p>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <p className="text-sm mr-4">{formatDuration(song.duration)}</p>
-                  <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleAddToQueue(song);
-                    }}
-                  >
-                    <Plus className="h-4 w-4" />
-                  </Button>
-                </div>
+          <ScrollArea className="h-[calc(100vh-500px)]">
+            {tracklist.length === 0 ? (
+              <div className="text-center py-12">
+                <p className="text-muted-foreground">This playlist is empty.</p>
               </div>
-            ))
-          ) : (
-            <div className="text-center py-8">
-              <p className="text-muted-foreground">This playlist is empty</p>
-            </div>
-          )}
+            ) : (
+              <div className="space-y-1">
+                {tracklist.map((song, index) => (
+                  <div
+                    key={song.id}
+                    className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors ${
+                      isCurrentlyPlaying(song) ? 'bg-accent/50 border-l-4 border-primary' : ''
+                    }`}
+                    onClick={() => handlePlayClick(song)}
+                  >
+                    {/* Track Number / Play Indicator */}
+                    <div className="w-8 text-center text-sm text-muted-foreground mr-3">
+                      {isCurrentlyPlaying(song) ? (
+                        <div className="w-4 h-4 mx-auto">
+                          <div className="w-full h-full bg-primary rounded-full animate-pulse" />
+                        </div>
+                      ) : (
+                        <>
+                          <span className="group-hover:hidden">{index + 1}</span>
+                          <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
+                        </>
+                      )}
+                    </div>
+
+                    {/* Album Art */}
+                    <div className="w-12 h-12 mr-4 flex-shrink-0">
+                      <Image
+                        src={song.coverArt ? api.getCoverArtUrl(song.coverArt, 100) : '/default-user.jpg'}
+                        alt={song.album}
+                        width={48}
+                        height={48}
+                        className="w-full h-full object-cover rounded-md"
+                      />
+                    </div>
+
+                    {/* Song Info */}
+                    <div className="flex-1 min-w-0 mr-4">
+                      <div className="flex items-center gap-2 mb-1">
+                        <p className={`font-semibold truncate ${
+                          isCurrentlyPlaying(song) ? 'text-primary' : ''
+                        }`}>
+                          {song.title}
+                        </p>
+                      </div>
+                      <div className="flex items-center text-sm text-muted-foreground space-x-4">
+                        <div className="flex items-center gap-1">
+                          <User className="w-3 h-3" />
+                          <Link 
+                            href={`/artist/${song.artistId}`} 
+                            className="truncate hover:text-primary hover:underline"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            {song.artist}
+                          </Link>
+                        </div>
+                        {song.album && (
+                          <div className="flex items-center gap-1">
+                            <Disc className="w-3 h-3" />
+                            <Link 
+                              href={`/album/${song.albumId}`} 
+                              className="truncate hover:text-primary hover:underline"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              {song.album}
+                            </Link>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Duration */}
+                    <div className="flex items-center text-sm text-muted-foreground mr-4">
+                      <Clock className="w-3 h-3 mr-1" />
+                      {formatDuration(song.duration)}
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleAddToQueue(song);
+                        }}
+                        className="h-8 w-8 p-0"
+                      >
+                        <Plus className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </ScrollArea>
         </div>
       </div>
     </div>