feat: add API availability checks and fallback for cover art in various components
This commit is contained in:
@@ -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';
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user