From 452ef783f24adc63233e0b1a32677fdb47ded04a Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Sun, 22 Oct 2023 22:46:48 +0000
Subject: [PATCH] [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 <jeffvictorli@gmail.com>
---
 src/renderer/api/navidrome/navidrome-normalize.ts | 15 ++++++++++-----
 .../features/shared/components/library-header.tsx | 11 +++++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/renderer/api/navidrome/navidrome-normalize.ts b/src/renderer/api/navidrome/navidrome-normalize.ts
index 90aa9bc83..ec285e03f 100644
--- 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
index ecf6c9b14..f1d960913 100644
--- 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} />