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

fix: update cover art URL size for improved image quality in audio player and playlist

Browse Source
This commit is contained in:
angel
2025-07-23 04:47:47 +00:00
committed by GitHub
parent 463be90779
commit bbdee30f92
11 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -121,7 +121,7 @@ export default function AlbumPage() {
}; };
// Get cover art URL with proper fallback // Get cover art URL with proper fallback
const coverArtUrl = album.coverArt && api const coverArtUrl = album.coverArt && api
? api.getCoverArtUrl(album.coverArt, 300) ? api.getCoverArtUrl(album.coverArt, 1200)
: '/default-user.jpg'; : '/default-user.jpg';
return ( return (

2
app/artist/[artist]/page.tsx
View File

@@ -103,7 +103,7 @@ export default function ArtistPage() {
} }
// Get artist image URL with proper fallback // Get artist image URL with proper fallback
const artistImageUrl = artist.coverArt && api const artistImageUrl = artist.coverArt && api
? api.getCoverArtUrl(artist.coverArt, 300) ? api.getCoverArtUrl(artist.coverArt, 1200)
: '/default-user.jpg'; : '/default-user.jpg';
return ( return (

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, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
albumId: song.albumId, albumId: song.albumId,
artistId: song.artistId, artistId: song.artistId,
starred: !!song.starred starred: !!song.starred

4
app/components/PopularSongs.tsx
View File

@@ -36,7 +36,7 @@ export function PopularSongs({ songs, artistName }: PopularSongsProps) {
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, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
albumId: song.albumId, albumId: song.albumId,
artistId: song.artistId, artistId: song.artistId,
starred: !!song.starred starred: !!song.starred
@@ -95,7 +95,7 @@ export function PopularSongs({ songs, artistName }: PopularSongsProps) {
<div className="relative w-12 h-12 bg-muted rounded-md overflow-hidden shrink-0"> <div className="relative w-12 h-12 bg-muted rounded-md overflow-hidden shrink-0">
{song.coverArt && api && ( {song.coverArt && api && (
<Image <Image
src={api.getCoverArtUrl(song.coverArt, 96)} src={api.getCoverArtUrl(song.coverArt, 300)}
alt={song.album} alt={song.album}
width={48} width={48}
height={48} height={48}

4
app/components/SongRecommendations.tsx
View File

@@ -90,7 +90,7 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
album: song.album || 'Unknown Album', album: song.album || 'Unknown Album',
albumId: song.albumId || '', albumId: song.albumId || '',
duration: song.duration || 0, duration: song.duration || 0,
coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
starred: !!song.starred starred: !!song.starred
}; };
await playTrack(track, true); await playTrack(track, true);
@@ -167,7 +167,7 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
{song.coverArt && api ? ( {song.coverArt && api ? (
<> <>
<Image <Image
src={api.getCoverArtUrl(song.coverArt, 100)} src={api.getCoverArtUrl(song.coverArt, 300)}
alt={song.title} alt={song.title}
fill fill
className="object-cover" className="object-cover"

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

@@ -50,7 +50,7 @@ export function AlbumArtwork({
// Memoize cover art URL to prevent recalculation on every render // Memoize cover art URL to prevent recalculation on every render
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); return api.getCoverArtUrl(album.coverArt, 1200);
}, [api, album.coverArt]); }, [api, album.coverArt]);
// Use callback to prevent function recreation on every render // Use callback to prevent function recreation on every render
@@ -93,7 +93,7 @@ export function AlbumArtwork({
artistId: song.artistId, artistId: song.artistId,
url: api.getStreamUrl(song.id), url: api.getStreamUrl(song.id),
duration: song.duration, duration: song.duration,
coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
starred: !!song.starred starred: !!song.starred
})); }));

4
app/components/sidebar.tsx
View File

@@ -109,7 +109,7 @@ export function Sidebar({ className, playlists, visible = true, favoriteAlbums =
> >
{album.coverArt && api ? ( {album.coverArt && api ? (
<Image <Image
src={api.getCoverArtUrl(album.coverArt, 32)} src={api.getCoverArtUrl(album.coverArt, 150)}
alt={album.name} alt={album.name}
width={16} width={16}
height={16} height={16}
@@ -165,7 +165,7 @@ export function Sidebar({ className, playlists, visible = true, favoriteAlbums =
> >
{album.coverArt && api ? ( {album.coverArt && api ? (
<Image <Image
src={api.getCoverArtUrl(album.coverArt, 32)} src={api.getCoverArtUrl(album.coverArt, 150)}
alt={album.name} alt={album.name}
width={16} width={16}
height={16} height={16}

6
app/favorites/page.tsx
View File

@@ -58,7 +58,7 @@ const FavoritesPage = () => {
artistId: song.artistId, artistId: song.artistId,
url: api?.getStreamUrl(song.id) || '', url: api?.getStreamUrl(song.id) || '',
duration: song.duration, duration: song.duration,
coverArt: song.coverArt ? api?.getCoverArtUrl(song.coverArt) : undefined, coverArt: song.coverArt ? api?.getCoverArtUrl(song.coverArt, 1200) : undefined,
starred: !!song.starred starred: !!song.starred
}); });
}; };
@@ -78,7 +78,7 @@ const FavoritesPage = () => {
artistId: song.artistId, artistId: song.artistId,
url: api.getStreamUrl(song.id), url: api.getStreamUrl(song.id),
duration: song.duration, duration: song.duration,
coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
starred: !!song.starred starred: !!song.starred
})); }));
@@ -201,7 +201,7 @@ const FavoritesPage = () => {
<div className="w-12 h-12 relative shrink-0"> <div className="w-12 h-12 relative shrink-0">
{song.coverArt && api ? ( {song.coverArt && api ? (
<Image <Image
src={api.getCoverArtUrl(song.coverArt)} src={api.getCoverArtUrl(song.coverArt, 1200)}
alt={song.album} alt={song.album}
fill fill
className="rounded object-cover" className="rounded object-cover"

2
app/library/playlists/page.tsx
View File

@@ -53,7 +53,7 @@ const PlaylistsPage: React.FC = () => {
<ScrollArea> <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) => { <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) => {
const playlistCoverUrl = playlist.coverArt && api const playlistCoverUrl = playlist.coverArt && api
? api.getCoverArtUrl(playlist.coverArt, 200) ? api.getCoverArtUrl(playlist.coverArt, 600)
: '/default-user.jpg'; : '/default-user.jpg';
return ( return (

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

@@ -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, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : 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, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
albumId: song.albumId, albumId: song.albumId,
artistId: song.artistId, artistId: song.artistId,
starred: !!song.starred starred: !!song.starred
@@ -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, 100) : '/default-user.jpg'} src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/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, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : 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, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : 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, 300) : undefined, coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : 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, 300) ? api.getCoverArtUrl(playlist.coverArt, 1200)
: '/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, 100) : '/default-user.jpg'} src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
alt={song.album} alt={song.album}
width={48} width={48}
height={48} height={48}