feat(webui): show soft deleted books/series as unavailable

komga-webui/src/locales/en.json

@@ -202,6 +202,7 @@
     "roles": "Roles",
     "series": "Series",
     "tags": "Tags",
+    "unavailable": "Unavailable",
     "use_filter_panel_to_change_filter": "Use the filter panel to change the active filter",
     "year": "year"
   },

komga-webui/src/types/items.ts

@@ -66,13 +66,13 @@ export class BookItem extends Item<BookDto> {
   }
 
   body (): string {
+    if(this.item.deleted) return `<div class="text-truncate error--text">${i18n.t('common.unavailable')}</div>`
     switch (this.item.media.status) {
       case MediaStatus.ERROR: return `<div class="text-truncate error--text">${i18n.t('book_card.error')}</div>`
       case MediaStatus.UNSUPPORTED: return `<div class="text-truncate warning--text">${i18n.t('book_card.unsupported')}</div>`
       case MediaStatus.UNKNOWN: return `<div class="text-truncate">${i18n.t('book_card.unknown')}</div>`
       default: return `<div class="text-truncate">${i18n.tc('common.pages_n', this.item.media.pagesCount)}</div>`
     }
-
   }
 
   to (): RawLocation {
@@ -106,6 +106,7 @@ export class SeriesItem extends Item<SeriesDto> {
   }
 
   body (): string {
+    if(this.item.deleted) return `<div class="text-truncate error--text">${i18n.t('common.unavailable')}</div>`
     return `<span>${i18n.tc('common.books_n', this.item.booksCount)}</span>`
   }
 

komga-webui/src/types/komga-books.ts

@@ -13,7 +13,8 @@ export interface BookDto {
   size: string,
   media: MediaDto,
   metadata: BookMetadataDto,
-  readProgress?: ReadProgressDto
+  readProgress?: ReadProgressDto,
+  deleted: boolean,
 
   // custom fields
   context: Context

komga-webui/src/types/komga-series.ts

@@ -12,6 +12,7 @@ export interface SeriesDto {
   booksInProgressCount: number,
   metadata: SeriesMetadataDto,
   booksMetadata: SeriesBooksMetadataDto,
+  deleted: boolean,
 }
 
 export interface SeriesMetadataDto {

komga-webui/src/views/BrowseBook.vue

@@ -112,7 +112,7 @@
               </v-col>
             </v-row>
 
-            <v-row class="text-caption">
+            <v-row class="text-caption" align="center">
               <v-col cols="auto">
                 {{ book.metadata.number }} · {{ $tc('common.pages_n', book.media.pagesCount) }}
               </v-col>
@@ -121,6 +121,11 @@
                   new Intl.DateTimeFormat($i18n.locale, {dateStyle: 'long'}).format(new Date(book.metadata.releaseDate))
                 }}
               </v-col>
+              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="book.deleted">
+                <v-chip label small color="error">
+                  {{ $t('common.unavailable') }}
+                </v-chip>
+              </v-col>
             </v-row>
 
 
@@ -131,7 +136,7 @@
                          small
                          :title="$t('browse_book.read_book')"
                          :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id}}"
-                         :disabled="book.media.status !== 'READY' || !canReadPages"
+                         :disabled="!canRead"
                   >
                     <v-icon left small>mdi-book-open-page-variant</v-icon>
                     {{ $t('common.read') }}
@@ -142,7 +147,7 @@
                   <v-btn small
                          :title="$t('browse_book.read_incognito')"
                          :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id, incognito: true}}"
-                         :disabled="book.media.status !== 'READY' || !canReadPages"
+                         :disabled="!canRead"
                   >
                     <v-icon left small>mdi-incognito</v-icon>
                     {{ $t('common.read') }}
@@ -177,7 +182,7 @@
                    small
                    :title="$t('browse_book.read_book')"
                    :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id}}"
-                   :disabled="book.media.status !== 'READY' || !canReadPages"
+                   :disabled="!canRead"
             >
               <v-icon left small>mdi-book-open-page-variant</v-icon>
               {{ $t('common.read') }}
@@ -188,7 +193,7 @@
             <v-btn small
                    :title="$t('browse_book.read_incognito')"
                    :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id, incognito: true}}"
-                   :disabled="book.media.status !== 'READY' || !canReadPages"
+                   :disabled="!canRead"
             >
               <v-icon left small>mdi-incognito</v-icon>
               {{ $t('common.read') }}
@@ -397,11 +402,11 @@ export default Vue.extend({
     isAdmin(): boolean {
       return this.$store.getters.meAdmin
     },
-    canReadPages(): boolean {
-      return this.$store.getters.mePageStreaming
+    canRead(): boolean {
+      return this.book.media.status === 'READY' && this.$store.getters.mePageStreaming && !this.book.deleted
     },
     canDownload(): boolean {
-      return this.$store.getters.meFileDownload
+      return this.$store.getters.meFileDownload && !this.book.deleted
     },
     thumbnailUrl(): string {
       return bookThumbnailUrl(this.bookId)

komga-webui/src/views/BrowseSeries.vue

@@ -119,26 +119,30 @@
                   {{ $t(`enums.series_status.${series.metadata.status}`) }}
                 </v-chip>
               </v-col>
-              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto">
-                <v-chip label small link v-if="series.metadata.ageRating"
+              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="series.metadata.ageRating">
+                <v-chip label small link
                         :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {ageRating: [series.metadata.ageRating]}}"
                 >
                   {{ series.metadata.ageRating }}+
                 </v-chip>
               </v-col>
-              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto">
+              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="series.metadata.language">
                 <v-chip label small link
                         :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {language: [series.metadata.language]}}"
-                        v-if="series.metadata.language"
                 >
                   {{ languageDisplay }}
                 </v-chip>
               </v-col>
-              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto">
-                <v-chip label small v-if="series.metadata.readingDirection">
+              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="series.metadata.readingDirection">
+                <v-chip label small>
                   {{ $t(`enums.reading_direction.${series.metadata.readingDirection}`) }}
                 </v-chip>
               </v-col>
+              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="series.deleted">
+                <v-chip label small color="error">
+                  {{ $t('common.unavailable') }}
+                </v-chip>
+              </v-col>
             </v-row>
 
             <template v-if="$vuetify.breakpoint.smAndUp">
@@ -500,7 +504,7 @@ export default Vue.extend({
       return this.$store.getters.meAdmin
     },
     canDownload(): boolean {
-      return this.$store.getters.meFileDownload
+      return this.$store.getters.meFileDownload && !this.series.deleted
     },
     fileUrl(): string {
       return seriesFileUrl(this.series.id)