feat(metadata): add an option to remove cover image, closes #2020 (#2028)

apps/readest-app/public/locales/ar/translation.json

@@ -543,5 +543,6 @@
   "Resize Sidebar": "تغيير حجم الشريط الجانبي",
   "Menu": "القائمة",
   "Dismiss": "رفض",
-  "Get Help from the Readest Community": "الحصول على المساعدة من مجتمع ريديست"
+  "Get Help from the Readest Community": "الحصول على المساعدة من مجتمع ريديست",
+  "Remove cover image": "إزالة صورة الغلاف"
 }

apps/readest-app/public/locales/bn/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "সাইডবারের আকার পরিবর্তন",
   "Menu": "মেনু",
   "Dismiss": "বাতিল",
-  "Get Help from the Readest Community": "রিডেস্ট কমিউনিটি থেকে সাহায্য নিন"
+  "Get Help from the Readest Community": "রিডেস্ট কমিউনিটি থেকে সাহায্য নিন",
+  "Remove cover image": "মলাট ছবি সরান"
 }

apps/readest-app/public/locales/bo/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "གཡས་སྒོ་གཅོད་སྒྲིག",
   "Menu": "སྒེའུ་ཁུང་།",
   "Dismiss": "བརྟེན་སྒྲིག",
-  "Get Help from the Readest Community": "Readest མཛའ་བརྩེའི་རོགས་རམ་ལོངས་སུ་རོགས་རམ་ཐོབ།"
+  "Get Help from the Readest Community": "Readest མཛའ་བརྩེའི་རོགས་རམ་ལོངས་སུ་རོགས་རམ་ཐོབ།",
+  "Remove cover image": "སྟོང་ངོས་ཀྱི་པར་རིས་ཕྱིར་འཐེན།"
 }

apps/readest-app/public/locales/de/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "Seitenleisten-Größe ändern",
   "Menu": "Menü",
   "Dismiss": "Schließen",
-  "Get Help from the Readest Community": "Hilfe von der Readest-Community erhalten"
+  "Get Help from the Readest Community": "Hilfe von der Readest-Community erhalten",
+  "Remove cover image": "Coverbild entfernen"
 }

apps/readest-app/public/locales/el/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "Αλλαγή μεγέθους πλαϊνής γραμμής",
   "Menu": "Μενού",
   "Dismiss": "Απόρριψη",
-  "Get Help from the Readest Community": "Λάβετε βοήθεια από την κοινότητα Readest"
+  "Get Help from the Readest Community": "Λάβετε βοήθεια από την κοινότητα Readest",
+  "Remove cover image": "Αφαίρεση εικόνας εξωφύλλου"
 }

apps/readest-app/public/locales/es/translation.json

@@ -531,5 +531,6 @@
   "Resize Sidebar": "Redimensionar barra lateral",
   "Menu": "Menú",
   "Dismiss": "Descartar",
-  "Get Help from the Readest Community": "Obtén ayuda de la comunidad de Readest"
+  "Get Help from the Readest Community": "Obtén ayuda de la comunidad de Readest",
+  "Remove cover image": "Eliminar imagen de portada"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -531,5 +531,6 @@
   "Resize Sidebar": "Redimensionner la Barre Latérale",
   "Menu": "Menu",
   "Dismiss": "Fermer",
-  "Get Help from the Readest Community": "Obtenir de l'aide de la communauté Readest"
+  "Get Help from the Readest Community": "Obtenir de l'aide de la communauté Readest",
+  "Remove cover image": "Supprimer l'image de couverture"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "साइडबार का आकार बदलें",
   "Menu": "मेनू",
   "Dismiss": "खारिज करें",
-  "Get Help from the Readest Community": "Readest समुदाय से मदद लें"
+  "Get Help from the Readest Community": "Readest समुदाय से मदद लें",
+  "Remove cover image": "कवर इमेज हटाएं"
 }

apps/readest-app/public/locales/id/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "Ubah Ukuran Bilah Samping",
   "Menu": "Menu",
   "Dismiss": "Tutup",
-  "Get Help from the Readest Community": "Dapatkan Bantuan dari Komunitas Readest"
+  "Get Help from the Readest Community": "Dapatkan Bantuan dari Komunitas Readest",
+  "Remove cover image": "Hapus gambar sampul"
 }

apps/readest-app/public/locales/it/translation.json

@@ -531,5 +531,6 @@
   "Resize Sidebar": "Ridimensiona barra laterale",
   "Menu": "Menu",
   "Dismiss": "Chiudi",
-  "Get Help from the Readest Community": "Ottieni aiuto dalla community di Readest"
+  "Get Help from the Readest Community": "Ottieni aiuto dalla community di Readest",
+  "Remove cover image": "Rimuovi immagine di copertina"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "サイドバーのサイズ変更",
   "Menu": "メニュー",
   "Dismiss": "閉じる",
-  "Get Help from the Readest Community": "Readestコミュニティからヘルプを得る"
+  "Get Help from the Readest Community": "Readestコミュニティからヘルプを得る",
+  "Remove cover image": "表紙画像を削除"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "사이드바 크기 조정",
   "Menu": "메뉴",
   "Dismiss": "닫기",
-  "Get Help from the Readest Community": "Readest 커뮤니티에서 도움 받기"
+  "Get Help from the Readest Community": "Readest 커뮤니티에서 도움 받기",
+  "Remove cover image": "표지 이미지 제거"
 }

apps/readest-app/public/locales/nl/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "Formaat Zijbalk Aanpassen",
   "Menu": "Menu",
   "Dismiss": "Sluiten",
-  "Get Help from the Readest Community": "Hulp krijgen van de Readest Community"
+  "Get Help from the Readest Community": "Hulp krijgen van de Readest Community",
+  "Remove cover image": "Omslagafbeelding verwijderen"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -535,5 +535,6 @@
   "Resize Sidebar": "Zmień rozmiar paska bocznego",
   "Menu": "Menu",
   "Dismiss": "Odrzuć",
-  "Get Help from the Readest Community": "Uzyskaj pomoc od społeczności Readest"
+  "Get Help from the Readest Community": "Uzyskaj pomoc od społeczności Readest",
+  "Remove cover image": "Usuń obraz okładki"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -531,5 +531,6 @@
   "Resize Sidebar": "Redimensionar Barra Lateral",
   "Menu": "Menu",
   "Dismiss": "Dispensar",
-  "Get Help from the Readest Community": "Obter ajuda da comunidade Readest"
+  "Get Help from the Readest Community": "Obter ajuda da comunidade Readest",
+  "Remove cover image": "Remover imagem da capa"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -535,5 +535,6 @@
   "Resize Sidebar": "Изменить размер боковой панели",
   "Menu": "Меню",
   "Dismiss": "Закрыть",
-  "Get Help from the Readest Community": "Получить помощь от сообщества Readest"
+  "Get Help from the Readest Community": "Получить помощь от сообщества Readest",
+  "Remove cover image": "Удалить изображение обложки"
 }

apps/readest-app/public/locales/si/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "පැති තීරුවේ ප්‍රමාණය වෙනස් කරන්න",
   "Menu": "මෙනුව",
   "Dismiss": "අත්හැරීම",
-  "Get Help from the Readest Community": "Readest ප්‍රජාවෙන් උදව් ලබා ගන්න"
+  "Get Help from the Readest Community": "Readest ප්‍රජාවෙන් උදව් ලබා ගන්න",
+  "Remove cover image": "ආවරණ රූපය ඉවත් කරන්න"
 }

apps/readest-app/public/locales/ta/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "பக்கப்பட்டியை மீட்டமைக்கவும்",
   "Menu": "மெனு",
   "Dismiss": "நிராகரிக்கவும்",
-  "Get Help from the Readest Community": "Readest சமூகத்திலிருந்து உதவி பெறவும்"
+  "Get Help from the Readest Community": "Readest சமூகத்திலிருந்து உதவி பெறவும்",
+  "Remove cover image": "அட்டை படத்தை நீக்கவும்"
 }

apps/readest-app/public/locales/th/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "ปรับขนาดแถบข้าง",
   "Menu": "เมนู",
   "Dismiss": "ปิด",
-  "Get Help from the Readest Community": "รับความช่วยเหลือจากชุมชน Readest"
+  "Get Help from the Readest Community": "รับความช่วยเหลือจากชุมชน Readest",
+  "Remove cover image": "ลบรูปปก"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -527,5 +527,6 @@
   "Resize Sidebar": "Kenar Çubuğunu Yeniden Boyutlandır",
   "Menu": "Menü",
   "Dismiss": "Kapat",
-  "Get Help from the Readest Community": "Readest Topluluğundan Yardım Alın"
+  "Get Help from the Readest Community": "Readest Topluluğundan Yardım Alın",
+  "Remove cover image": "Kapak resmini kaldır"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -535,5 +535,6 @@
   "Resize Sidebar": "Змінити розмір бічної панелі",
   "Menu": "Меню",
   "Dismiss": "Відхилити",
-  "Get Help from the Readest Community": "Отримати допомогу від спільноти Readest"
+  "Get Help from the Readest Community": "Отримати допомогу від спільноти Readest",
+  "Remove cover image": "Видалити зображення обкладинки"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "Thay Đổi Kích Thước Thanh Bên",
   "Menu": "Menu",
   "Dismiss": "Đóng",
-  "Get Help from the Readest Community": "Nhận Trợ Giúp từ Cộng Đồng Readest"
+  "Get Help from the Readest Community": "Nhận Trợ Giúp từ Cộng Đồng Readest",
+  "Remove cover image": "Xóa ảnh bìa"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "调整侧边栏大小",
   "Menu": "菜单",
   "Dismiss": "关闭",
-  "Get Help from the Readest Community": "从 Readest 社区获取帮助"
+  "Get Help from the Readest Community": "从 Readest 社区获取帮助",
+  "Remove cover image": "移除封面图片"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -523,5 +523,6 @@
   "Resize Sidebar": "調整側邊欄大小",
   "Menu": "選單",
   "Dismiss": "關閉",
-  "Get Help from the Readest Community": "從 Readest 社群獲取幫助"
+  "Get Help from the Readest Community": "從 Readest 社群獲取幫助",
+  "Remove cover image": "移除封面圖片"
 }

apps/readest-app/src/components/metadata/BookDetailEdit.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
-import { MdEdit, MdLock, MdLockOpen, MdOutlineSearch } from 'react-icons/md';
+import { MdEdit, MdDelete, MdLock, MdLockOpen, MdOutlineSearch } from 'react-icons/md';
 
 import { Book } from '@/types/book';
 import { BookMetadata } from '@/libs/document';
@@ -28,6 +28,8 @@ interface BookDetailEditProps {
   onSave: () => void;
 }
 
+const emptyCoverImageUrl = '_blank';
+
 const BookDetailEdit: React.FC<BookDetailEditProps> = ({
   book,
   metadata,
@@ -169,8 +171,8 @@ const BookDetailEdit: React.FC<BookDetailEditProps> = ({
 
   return (
     <div className='bg-base-100 relative w-full rounded-lg'>
-      <div className='mb-6 flex items-start gap-4'>
-        <div className='flex w-[30%] max-w-32 flex-col gap-2'>
+      <div className='mb-6 flex items-stretch gap-4'>
+        <div className='cover-field flex w-[30%] max-w-32 flex-col gap-2'>
           <button
             className='aspect-[28/41] h-full shadow-md'
             onClick={!isCoverLocked ? handleSelectLocalImage : undefined}
@@ -187,44 +189,64 @@ const BookDetailEdit: React.FC<BookDetailEditProps> = ({
               }}
             />
           </button>
-          <div className='flex w-full gap-1'>
+          <div className='flex w-full justify-between gap-1'>
             <button
               onClick={handleSelectLocalImage}
               disabled={isCoverLocked}
               className={clsx(
-                'flex flex-1 items-center justify-center gap-1 rounded px-2 py-1',
-                'border border-gray-300 bg-white hover:bg-gray-50',
-                'disabled:cursor-not-allowed disabled:opacity-50',
-                'text-sm sm:text-xs',
-                isCoverLocked ? '!text-base-content !bg-base-200' : '!text-gray-500',
+                'flex w-1/2 min-w-0 items-center justify-center gap-1 rounded p-1 sm:w-3/5',
+                'text-sm hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-xs',
+                isCoverLocked ? '!text-base-content bg-base-200' : 'bg-gray-100 !text-gray-500',
               )}
               title={_('Change cover image')}
             >
               <MdEdit
                 className={clsx(
-                  'h-5 w-5 sm:h-4 sm:w-4',
+                  'h-5 w-5 flex-shrink-0 sm:h-4 sm:w-4',
                   isCoverLocked ? 'fill-base-content' : 'fill-gray-600',
                 )}
               />
-              <span className='hidden sm:inline'>{_('Replace')}</span>
+              <span className='hidden truncate sm:inline'>{_('Replace')}</span>
+            </button>
+
+            <button
+              onClick={() => {
+                setNewCoverImageUrl(emptyCoverImageUrl);
+                metadata.coverImageUrl = emptyCoverImageUrl;
+                metadata.coverImageFile = undefined;
+                metadata.coverImageBlobUrl = undefined;
+              }}
+              disabled={isCoverLocked}
+              className={clsx(
+                'flex w-1/4 items-center justify-center rounded p-1 sm:w-1/5',
+                'disabled:cursor-not-allowed disabled:opacity-50',
+                'text-red-500 hover:bg-red-50 hover:text-red-600',
+                isCoverLocked ? '!text-base-content bg-base-200' : 'bg-gray-100',
+              )}
+              title={_('Remove cover image')}
+            >
+              <MdDelete className='h-5 w-5 sm:h-4 sm:w-4' />
             </button>
 
             <button
               onClick={() => onToggleFieldLock('coverImageUrl')}
               className={clsx(
-                'flex items-center justify-center rounded px-2 py-1 text-xs',
-                'border border-gray-300 hover:bg-gray-50',
+                'flex w-1/4 items-center justify-center rounded p-1 hover:bg-gray-50 sm:w-1/5',
                 isCoverLocked
                   ? 'bg-green-100 text-green-500 hover:bg-green-200'
-                  : 'bg-white text-gray-500',
+                  : 'bg-gray-100 text-gray-500',
               )}
               title={isCoverLocked ? _('Unlock cover') : _('Lock cover')}
             >
-              {isCoverLocked ? <MdLock className='h-3 w-3' /> : <MdLockOpen className='h-3 w-3' />}
+              {isCoverLocked ? (
+                <MdLock className='h-5 w-5 sm:h-4 sm:w-4' />
+              ) : (
+                <MdLockOpen className='h-5 w-5 sm:h-4 sm:w-4' />
+              )}
             </button>
           </div>
         </div>
-        <div className='flex-1 space-y-4'>
+        <div className='title-fields flex flex-1 flex-col justify-between'>
           {titleAuthorFields.map(({ field, label, required, value, placeholder }) => (
             <FormField
               key={field}
@@ -295,7 +317,7 @@ const BookDetailEdit: React.FC<BookDetailEditProps> = ({
             {searchLoading ? (
               <span className='loading loading-spinner h-4 w-4'></span>
             ) : (
-              <MdOutlineSearch className='h-4 w-4' />
+              <MdOutlineSearch className='mt-[1px] h-4 w-4' />
             )}
             <span className='sm:hidden'>{_('Auto')}</span>
             <span className='hidden sm:inline'>{_('Auto-Retrieve')}</span>

apps/readest-app/src/services/appService.ts

@@ -658,7 +658,11 @@ export abstract class BaseAppService implements AppService {
   }
 
   async updateCoverImage(book: Book, imageUrl?: string, imageFile?: string): Promise<void> {
-    const arrayBuffer = await this.imageToArrayBuffer(imageUrl, imageFile);
-    await this.fs.writeFile(getCoverFilename(book), 'Books', arrayBuffer);
+    if (imageUrl === '_blank') {
+      await this.fs.removeFile(getCoverFilename(book), 'Books');
+    } else if (imageUrl || imageFile) {
+      const arrayBuffer = await this.imageToArrayBuffer(imageUrl, imageFile);
+      await this.fs.writeFile(getCoverFilename(book), 'Books', arrayBuffer);
+    }
   }
 }