angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
angel
2025-07-23 15:56:27 +00:00
committed by GitHub
parent 8906b2d81e
commit abfe2bb3ef
7 changed files with 95 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/album/[id]/page.tsx
View File

@@ -10,7 +10,6 @@ import Link from 'next/link';
import { useAudioPlayer } from '@/app/components/AudioPlayerContext' import { useAudioPlayer } from '@/app/components/AudioPlayerContext'
import Loading from "@/app/components/loading"; import Loading from "@/app/components/loading";
import { Separator } from '@/components/ui/separator'; import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { getNavidromeAPI } from '@/lib/navidrome'; import { getNavidromeAPI } from '@/lib/navidrome';
import { useFavoriteAlbums } from '@/hooks/use-favorite-albums'; import { useFavoriteAlbums } from '@/hooks/use-favorite-albums';
import { useIsMobile } from '@/hooks/use-mobile'; import { useIsMobile } from '@/hooks/use-mobile';
@@ -121,10 +120,19 @@ export default function AlbumPage() {
const seconds = duration % 60; const seconds = duration % 60;
return `${minutes}:${seconds.toString().padStart(2, '0')}`; return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}; };
// Get cover art URL with proper fallback
const coverArtUrl = album.coverArt && api // Dynamic cover art URLs based on image size
? api.getCoverArtUrl(album.coverArt, 1200) const getMobileCoverArtUrl = () => {
return album.coverArt && api
? api.getCoverArtUrl(album.coverArt, 280)
: '/default-user.jpg'; : '/default-user.jpg';
};
const getDesktopCoverArtUrl = () => {
return album.coverArt && api
? api.getCoverArtUrl(album.coverArt, 300)
: '/default-user.jpg';
};
return ( return (
<> <>
@@ -136,7 +144,7 @@ export default function AlbumPage() {
{/* Album Cover - Centered */} {/* Album Cover - Centered */}
<div className="flex justify-center"> <div className="flex justify-center">
<Image <Image
src={coverArtUrl} src={getMobileCoverArtUrl()}
alt={album.name} alt={album.name}
width={280} width={280}
height={280} height={280}
@@ -180,7 +188,7 @@ export default function AlbumPage() {
/* Desktop Layout */ /* Desktop Layout */
<div className="flex items-start gap-6"> <div className="flex items-start gap-6">
<Image <Image
src={coverArtUrl} src={getDesktopCoverArtUrl()}
alt={album.name} alt={album.name}
width={300} width={300}
height={300} height={300}
@@ -209,13 +217,12 @@ export default function AlbumPage() {
<div className="space-y-4"> <div className="space-y-4">
<Separator /> <Separator />
<ScrollArea className="h-[calc(100vh-500px)]">
{tracklist.length === 0 ? ( {tracklist.length === 0 ? (
<div className="text-center py-12"> <div className="text-center py-12">
<p className="text-muted-foreground">No tracks available.</p> <p className="text-muted-foreground">No tracks available.</p>
</div> </div>
) : ( ) : (
<div className="space-y-1"> <div className="space-y-1 pb-32">
{tracklist.map((song, index) => ( {tracklist.map((song, index) => (
<div <div
key={song.id} key={song.id}
@@ -272,7 +279,6 @@ export default function AlbumPage() {
))} ))}
</div> </div>
)} )}
</ScrollArea>
</div> </div>
</div> </div>
</div> </div>

2
app/components/AudioPlayerContext.tsx
View File

@@ -105,7 +105,7 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
artist: song.artist, artist: song.artist,
album: song.album, album: song.album,
duration: song.duration, duration: song.duration,
coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
albumId: song.albumId, albumId: song.albumId,
artistId: song.artistId, artistId: song.artistId,
starred: !!song.starred starred: !!song.starred

4
app/components/FullScreenPlayer.tsx
View File

@@ -394,13 +394,13 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
{/* Track Info - Left Aligned and Heart on Same Line */} {/* Track Info - Left Aligned and Heart on Same Line */}
<div className="w-full mb-6 shrink-0"> <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"> <h1 className="text-2xl font-bold text-foreground line-clamp-1 flex-1 text-left">
{currentTrack.name} {currentTrack.name}
</h1> </h1>
<button <button
onClick={toggleCurrentTrackStar} 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'} title={currentTrack?.starred ? 'Remove from favorites' : 'Add to favorites'}
> >
<Heart <Heart

9
app/components/album-artwork.tsx
View File

@@ -47,11 +47,14 @@ export function AlbumArtwork({
const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer(); const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer();
const { playlists, starItem, unstarItem } = useNavidrome(); 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(() => { const coverArtUrl = useMemo(() => {
if (!api || !album.coverArt) return '/default-user.jpg'; 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 // Use callback to prevent function recreation on every render
const handleImageLoad = useCallback(() => { const handleImageLoad = useCallback(() => {

6
app/components/menu.tsx
View File

@@ -158,9 +158,9 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
{/* Mobile Top Bar - Simplified since navigation is now at bottom */} {/* Mobile Top Bar - Simplified since navigation is now at bottom */}
{isMobile ? ( {isMobile ? (
<div className="flex items-center justify-center w-full p-2"> // hey bear!
<h1 className="font-bold text-lg">mice</h1> // nothing
</div> null
) : ( ) : (
/* Desktop Navigation */ /* Desktop Navigation */
<Menubar <Menubar

10
app/library/songs/page.tsx
View File

@@ -101,7 +101,7 @@ export default function SongsPage() {
setFilteredSongs(filtered); setFilteredSongs(filtered);
}, [songs, searchQuery, sortBy, sortDirection]); }, [songs, searchQuery, sortBy, sortDirection]);
const handlePlaySong = (song: Song) => { const handlePlayClick = (song: Song) => {
if (!api) { if (!api) {
console.error('Navidrome API not available'); console.error('Navidrome API not available');
return; return;
@@ -114,7 +114,7 @@ export default function SongsPage() {
artist: song.artist, artist: song.artist,
album: song.album, album: song.album,
duration: song.duration, duration: song.duration,
coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
albumId: song.albumId, albumId: song.albumId,
artistId: song.artistId, artistId: song.artistId,
starred: !!song.starred starred: !!song.starred
@@ -135,7 +135,7 @@ export default function SongsPage() {
artist: song.artist, artist: song.artist,
album: song.album, album: song.album,
duration: song.duration, duration: song.duration,
coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
albumId: song.albumId, albumId: song.albumId,
artistId: song.artistId, artistId: song.artistId,
starred: !!song.starred 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 ${ 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' : '' isCurrentlyPlaying(song) ? 'bg-accent/50 border-l-4 border-primary' : ''
}`} }`}
onClick={() => handlePlaySong(song)} onClick={() => handlePlayClick(song)}
> >
{/* Track Number / Play Indicator */} {/* Track Number / Play Indicator */}
<div className="w-8 text-center text-sm text-muted-foreground mr-3"> <div className="w-8 text-center text-sm text-muted-foreground mr-3">
@@ -240,7 +240,7 @@ export default function SongsPage() {
{/* Album Art */} {/* Album Art */}
<div className="w-12 h-12 mr-4 shrink-0"> <Image <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} alt={song.album}
width={48} width={48}
height={48} height={48}

10
app/playlist/[id]/page.tsx
View File

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