[bugfix/feat]: always fetch artist image for Navidrome (#317)

* [bugfix/feat]: always fetch artist image for Navidrome * Add error fallback to library header image --------- Co-authored-by: jeffvli <[email protected]>
jeffvli · Oct 22, 2023 · 452ef78 · 452ef78 · vercel · Oct 22, 2023
1 parent 74cab01
commit 452ef78
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/renderer/api/navidrome/navidrome-normalize.ts b/src/renderer/api/navidrome/navidrome-normalize.ts
@@ -20,10 +20,6 @@ const getImageUrl = (args: { url: string | null }) => {
         return null;
     }
 
-    if (url?.match('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9')) {
-        return null;
-    }
-
     return url;
 };
 
@@ -186,7 +182,16 @@ const normalizeAlbumArtist = (
     },
     server: ServerListItem | null,
 ): AlbumArtist => {
-    const imageUrl = getImageUrl({ url: item?.largeImageUrl || null });
+    let imageUrl = getImageUrl({ url: item?.largeImageUrl || null });
+
+    if (!imageUrl) {
+        imageUrl = getCoverArtUrl({
+            baseUrl: server?.url,
+            coverArtId: `ar-${item.id}`,
+            credential: server?.credential,
+            size: 100,
+        });
+    }
 
     return {
         albumCount: item.albumCount,

diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
@@ -1,5 +1,5 @@
 import { Group } from '@mantine/core';
-import { forwardRef, ReactNode, Ref } from 'react';
+import { forwardRef, ReactNode, Ref, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styles from './library-header.module.scss';
 import { LibraryItem } from '/@/renderer/api/types';
@@ -20,6 +20,12 @@ export const LibraryHeader = forwardRef(
         { imageUrl, imagePlaceholderUrl, background, title, item, children }: LibraryHeaderProps,
         ref: Ref<HTMLDivElement>,
     ) => {
+        const [isImageError, setIsImageError] = useState<boolean | null>(false);
+
+        const onImageError = () => {
+            setIsImageError(true);
+        };
+
         return (
             <div
                 ref={ref}
@@ -31,13 +37,14 @@ export const LibraryHeader = forwardRef(
                 />
                 <div className={styles.backgroundOverlay} />
                 <div className={styles.imageSection}>
-                    {imageUrl ? (
+                    {imageUrl && !isImageError ? (
                         <img
                             alt="cover"
                             className={styles.image}
                             placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
                             src={imageUrl}
                             style={{ height: '' }}
+                            onError={onImageError}
                         />
                     ) : (
                         <ItemImagePlaceholder itemType={item.type} />