feat: optimize cover art URLs for songs and playlists with dynamic sizing

2025-07-23 15:56:27 +00:00
parent 8906b2d81e
commit abfe2bb3ef
7 changed files with 95 additions and 86 deletions
--- a/app/album/[id]/page.tsx
+++ b/app/album/[id]/page.tsx
@@ -10,7 +10,6 @@ import Link from 'next/link';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext'
 import Loading from "@/app/components/loading";
 import { Separator } from '@/components/ui/separator';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { getNavidromeAPI } from '@/lib/navidrome';
 import { useFavoriteAlbums } from '@/hooks/use-favorite-albums';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -121,10 +120,19 @@ export default function AlbumPage() {
    const seconds = duration % 60;
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };
-  // Get cover art URL with proper fallback
-  const coverArtUrl = album.coverArt && api
-    ? api.getCoverArtUrl(album.coverArt, 1200)
-    : '/default-user.jpg';
+
+  // Dynamic cover art URLs based on image size
+  const getMobileCoverArtUrl = () => {
+    return album.coverArt && api
+      ? api.getCoverArtUrl(album.coverArt, 280)
+      : '/default-user.jpg';
+  };
+
+  const getDesktopCoverArtUrl = () => {
+    return album.coverArt && api
+      ? api.getCoverArtUrl(album.coverArt, 300)
+      : '/default-user.jpg';
+  };

  return (
    <>
@@ -136,7 +144,7 @@ export default function AlbumPage() {
            {/* Album Cover - Centered */}
            <div className="flex justify-center">
              <Image 
-                src={coverArtUrl} 
+                src={getMobileCoverArtUrl()} 
                alt={album.name} 
                width={280} 
                height={280}
@@ -180,7 +188,7 @@ export default function AlbumPage() {
          /* Desktop Layout */
          <div className="flex items-start gap-6">
            <Image 
-              src={coverArtUrl} 
+              src={getDesktopCoverArtUrl()} 
              alt={album.name} 
              width={300} 
              height={300}
@@ -209,70 +217,68 @@ export default function AlbumPage() {
        <div className="space-y-4">
          <Separator />
          
-          <ScrollArea className="h-[calc(100vh-500px)]">
-            {tracklist.length === 0 ? (
-              <div className="text-center py-12">
-                <p className="text-muted-foreground">No tracks available.</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`}
-                    onClick={() => handlePlayClick(song)}
-                  >
-                    {/* Track Number / Play Indicator */}
-                    <div className="w-8 text-center text-sm text-muted-foreground mr-3">
-                        <>
-                          <span className="group-hover:hidden">{song.track || index + 1}</span>
-                          <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
-                        </>
-                    </div>
+          {tracklist.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">No tracks available.</p>
+            </div>
+          ) : (
+            <div className="space-y-1 pb-32">
+              {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`}
+                  onClick={() => handlePlayClick(song)}
+                >
+                  {/* Track Number / Play Indicator */}
+                  <div className="w-8 text-center text-sm text-muted-foreground mr-3">
+                      <>
+                        <span className="group-hover:hidden">{song.track || index + 1}</span>
+                        <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
+                      </>
+                  </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>
+                  {/* 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">
+                      <div className="flex items-center gap-1">
+                        <span className="truncate">{song.artist}</span>
                      </div>
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        <div className="flex items-center gap-1">
-                          <span className="truncate">{song.artist}</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Duration */}
-                    <div className="flex items-center text-sm text-muted-foreground mr-4">
-                      {formatDuration(song.duration)}
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center space-x-2 group-hover:opacity-100 transition-opacity">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleSongStar(song);
-                        }}
-                        className="h-8 w-8 p-0"
-                      >
-                        <Heart 
-                          className={`w-4 h-4 ${starredSongs.has(song.id) ? 'text-primary' : 'text-gray-500'}`}
-                          fill={starredSongs.has(song.id) ? 'var(--primary)' : 'none'}
-                        />
-                      </Button>
                    </div>
                  </div>
-                ))}
-              </div>
-            )}
-          </ScrollArea>
+
+                  {/* Duration */}
+                  <div className="flex items-center text-sm text-muted-foreground mr-4">
+                    {formatDuration(song.duration)}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex items-center space-x-2 group-hover:opacity-100 transition-opacity">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSongStar(song);
+                      }}
+                      className="h-8 w-8 p-0"
+                    >
+                      <Heart 
+                        className={`w-4 h-4 ${starredSongs.has(song.id) ? 'text-primary' : 'text-gray-500'}`}
+                        fill={starredSongs.has(song.id) ? 'var(--primary)' : 'none'}
+                      />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
        </div>
      </div>
    </div>
--- a/app/components/AudioPlayerContext.tsx
+++ b/app/components/AudioPlayerContext.tsx
@@ -105,7 +105,7 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
      artist: song.artist,
      album: song.album,
      duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -394,13 +394,13 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl

                    {/* Track Info - Left Aligned and Heart on Same Line */}
                    <div className="w-full mb-6 shrink-0">
-                      <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center justify-between mb-0">
                        <h1 className="text-2xl font-bold text-foreground line-clamp-1 flex-1 text-left">
                          {currentTrack.name}
                        </h1>
                        <button
                          onClick={toggleCurrentTrackStar}
-                          className="p-2 hover:bg-gray-700/50 rounded-full transition-colors ml-3"
+                          className="p-2 hover:bg-gray-700/50 rounded-full transition-colors ml-3 pb-0"
                          title={currentTrack?.starred ? 'Remove from favorites' : 'Add to favorites'}
                        >
                          <Heart 
--- a/app/components/album-artwork.tsx
+++ b/app/components/album-artwork.tsx
@@ -47,11 +47,14 @@ export function AlbumArtwork({
  const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer();
  const { playlists, starItem, unstarItem } = useNavidrome();
  
-  // Memoize cover art URL to prevent recalculation on every render
+  // Memoize cover art URL with dynamic sizing
  const coverArtUrl = useMemo(() => {
    if (!api || !album.coverArt) return '/default-user.jpg';
-    return api.getCoverArtUrl(album.coverArt, 1200);
-  }, [api, album.coverArt]);
+    
+    // Use width prop or default size for optimization
+    const imageSize = width || height || 300;
+    return api.getCoverArtUrl(album.coverArt, imageSize);
+  }, [api, album.coverArt, width, height]);

  // Use callback to prevent function recreation on every render
  const handleImageLoad = useCallback(() => {
--- a/app/components/menu.tsx
+++ b/app/components/menu.tsx
@@ -158,9 +158,9 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
      <div className="flex items-center justify-between w-full">
        {/* Mobile Top Bar - Simplified since navigation is now at bottom */}
        {isMobile ? (
-          <div className="flex items-center justify-center w-full p-2">
-            <h1 className="font-bold text-lg">mice</h1>
-          </div>
+// hey bear!
+// nothing
+            null
        ) : (
          /* Desktop Navigation */
          <Menubar
--- a/app/library/songs/page.tsx
+++ b/app/library/songs/page.tsx
@@ -101,7 +101,7 @@ export default function SongsPage() {

    setFilteredSongs(filtered);
  }, [songs, searchQuery, sortBy, sortDirection]);
-  const handlePlaySong = (song: Song) => {
+    const handlePlayClick = (song: Song) => {
    if (!api) {
      console.error('Navidrome API not available');
      return;
@@ -114,7 +114,7 @@ export default function SongsPage() {
      artist: song.artist,
      album: song.album,
      duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
@@ -135,7 +135,7 @@ export default function SongsPage() {
      artist: song.artist,
      album: song.album,
      duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
@@ -222,7 +222,7 @@ export default function SongsPage() {
                  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={() => handlePlaySong(song)}
+                  onClick={() => handlePlayClick(song)}
                >
                  {/* Track Number / Play Indicator */}
                  <div className="w-8 text-center text-sm text-muted-foreground mr-3">
@@ -240,7 +240,7 @@ export default function SongsPage() {

                  {/* Album Art */}
                  <div className="w-12 h-12 mr-4 shrink-0">                    <Image
-                      src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
+                      src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 48) : '/default-user.jpg'}
                      alt={song.album}
                      width={48}
                      height={48}
--- a/app/playlist/[id]/page.tsx
+++ b/app/playlist/[id]/page.tsx
@@ -57,7 +57,7 @@ export default function PlaylistPage() {
      artist: song.artist,
      album: song.album,
      duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
@@ -77,7 +77,7 @@ export default function PlaylistPage() {
      artist: song.artist,
      album: song.album,
      duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
@@ -98,7 +98,7 @@ export default function PlaylistPage() {
      artist: song.artist,
      album: song.album,
      duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
@@ -140,7 +140,7 @@ export default function PlaylistPage() {
  }
  // Get playlist cover art URL with fallback
  const playlistCoverUrl = playlist.coverArt && api
-    ? api.getCoverArtUrl(playlist.coverArt, 1200)
+    ? api.getCoverArtUrl(playlist.coverArt, 300)
    : '/default-user.jpg';

  return (
@@ -209,7 +209,7 @@ export default function PlaylistPage() {

                    {/* Album Art */}
                    <div className="w-12 h-12 mr-4 shrink-0">                      <Image
-                        src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
+                        src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 48) : '/default-user.jpg'}
                        alt={song.album}
                        width={48}
                        height={48}