feat: add API availability checks and fallback for cover art in various components

This commit is contained in:
2025-06-22 21:10:15 -05:00
parent 6fcf58e7ba
commit b07685fe79
12 changed files with 78 additions and 38 deletions

View File

@@ -51,9 +51,8 @@ const PlaylistsPage: React.FC = () => {
<Separator className="my-4" />
<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) => {
const playlistCoverUrl = playlist.coverArt
<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
? api.getCoverArtUrl(playlist.coverArt, 200)
: '/default-user.jpg';

View File

@@ -101,8 +101,12 @@ export default function SongsPage() {
setFilteredSongs(filtered);
}, [songs, searchQuery, sortBy, sortDirection]);
const handlePlaySong = (song: Song) => {
if (!api) {
console.error('Navidrome API not available');
return;
}
const track = {
id: song.id,
name: song.title,
@@ -117,8 +121,12 @@ export default function SongsPage() {
playTrack(track);
};
const handleAddToQueue = (song: Song) => {
if (!api) {
console.error('Navidrome API not available');
return;
}
const track = {
id: song.id,
name: song.title,
@@ -229,9 +237,8 @@ export default function SongsPage() {
</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'}
<div className="w-12 h-12 mr-4 flex-shrink-0"> <Image
src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 100) : '/default-user.jpg'}
alt={song.album}
width={48}
height={48}