From 7ab7058dba16e7b64190e144affeef28f01cb552 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 27 Jun 2025 16:28:38 +0800
Subject: [PATCH] refactor: fix fallback cover image for fitted mode (#1483)

---
 apps/readest-app/src/components/BookCover.tsx | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/apps/readest-app/src/components/BookCover.tsx b/apps/readest-app/src/components/BookCover.tsx
index 69222c8e..4d199d4a 100644
--- a/apps/readest-app/src/components/BookCover.tsx
+++ b/apps/readest-app/src/components/BookCover.tsx
@@ -21,38 +21,52 @@ const BookCover: React.FC<BookCoverProps> = ({
   imageClassName,
   isPreview,
 }) => {
+  const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.target as HTMLImageElement;
+    img.style.display = 'none';
+
+    const mainContainer = img.closest('.book-cover-container');
+    const fallbackDiv = mainContainer?.querySelector('.fallback-cover');
+
+    if (fallbackDiv) {
+      fallbackDiv.classList.remove('invisible');
+    }
+  };
+
   return (
-    <div className={clsx('relative flex h-full w-full shadow-md', className)}>
+    <div className={clsx('book-cover-container relative flex h-full w-full', className)}>
       {coverFit === 'crop' ? (
         <Image
           src={book.coverImageUrl!}
           alt={book.title}
           fill={true}
-          className={clsx('crop-cover-img object-cover', imageClassName)}
-          onError={(e) => {
-            (e.target as HTMLImageElement).style.display = 'none';
-            (e.target as HTMLImageElement).nextElementSibling?.classList.remove('invisible');
-          }}
+          className={clsx('crop-cover-img object-cover shadow-md', imageClassName)}
+          onError={handleImageError}
         />
       ) : (
-        <div className='flex h-full w-full items-end justify-center'>
+        <div
+          className={clsx(
+            'flex h-full w-full justify-center',
+            mode === 'grid' ? 'items-end' : 'items-center',
+          )}
+        >
           <Image
             src={book.coverImageUrl!}
             alt={book.title}
             width={0}
             height={0}
             sizes='100vw'
-            className={clsx('fit-cover-img h-auto max-h-full w-auto max-w-full', imageClassName)}
-            onError={(e) => {
-              (e.target as HTMLImageElement).style.display = 'none';
-              (e.target as HTMLImageElement).nextElementSibling?.classList.remove('invisible');
-            }}
+            className={clsx(
+              'fit-cover-img h-auto max-h-full w-auto max-w-full shadow-md',
+              imageClassName,
+            )}
+            onError={handleImageError}
           />
         </div>
       )}
       <div
         className={clsx(
-          'invisible absolute inset-0 rounded-none p-2',
+          'fallback-cover invisible absolute inset-0 rounded-none p-2',
           'text-neutral-content text-center font-serif font-medium',
           isPreview ? 'bg-base-200/50' : 'bg-base-100',
         )}