From 718433183bea533b94e1744ffa45c3c8246beab7 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 27 Mar 2025 17:37:25 -0500
Subject: [PATCH] Fix Cover modal showing error image for items with no cover,
 update placeholder cover url to all come from global store

---
 client/components/cards/LazyBookCard.vue         |  3 +--
 client/components/covers/BookCover.vue           |  4 ++--
 client/components/covers/PreviewCover.vue        |  7 ++++---
 client/components/modals/item/tabs/Cover.vue     |  8 +++++++-
 client/components/modals/player/QueueItemRow.vue |  2 +-
 client/pages/share/_slug.vue                     |  2 +-
 client/store/globals.js                          | 11 ++++++-----
 7 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index e9ad8c8d..35c959fa 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -223,8 +223,7 @@ export default {
       return this.mediaMetadata.explicit || false
     },
     placeholderUrl() {
-      const config = this.$config || this.$nuxt.$config
-      return `${config.routerBasePath}/book_placeholder.jpg`
+      return this.store.getters['globals/getPlaceholderCoverSrc']
     },
     bookCoverSrc() {
       return this.store.getters['globals/getLibraryItemCoverSrc'](this._libraryItem, this.placeholderUrl)
diff --git a/client/components/covers/BookCover.vue b/client/components/covers/BookCover.vue
index 0a9248d2..e55d38c1 100644
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@@ -96,8 +96,8 @@ export default {
       return this.author
     },
     placeholderUrl() {
-      const config = this.$config || this.$nuxt.$config
-      return `${config.routerBasePath}/book_placeholder.jpg`
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getPlaceholderCoverSrc']
     },
     fullCoverUrl() {
       if (!this.libraryItem) return null
diff --git a/client/components/covers/PreviewCover.vue b/client/components/covers/PreviewCover.vue
index 0b73b009..0ce7e55e 100644
--- a/client/components/covers/PreviewCover.vue
+++ b/client/components/covers/PreviewCover.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <p v-if="!imageFailed && showResolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
+    <p v-if="!imageFailed && showResolution && resolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
   </div>
 </template>
 
@@ -65,11 +65,12 @@ export default {
       return 0.8 * this.sizeMultiplier
     },
     resolution() {
+      if (!this.naturalWidth || !this.naturalHeight) return null
       return `${this.naturalWidth}×${this.naturalHeight}px`
     },
     placeholderUrl() {
-      const config = this.$config || this.$nuxt.$config
-      return `${config.routerBasePath}/book_placeholder.jpg`
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getPlaceholderCoverSrc']
     }
   },
   methods: {
diff --git a/client/components/modals/item/tabs/Cover.vue b/client/components/modals/item/tabs/Cover.vue
index fd258760..17979f70 100644
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@@ -2,7 +2,7 @@
   <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
     <div class="flex flex-col sm:flex-row mb-4">
       <div class="relative self-center md:self-start">
-        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <covers-preview-cover :src="coverUrl" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
         <!-- book cover overlay -->
         <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
@@ -157,6 +157,12 @@ export default {
     coverPath() {
       return this.media.coverPath
     },
+    coverUrl() {
+      if (!this.coverPath) {
+        return this.$store.getters['globals/getPlaceholderCoverSrc']
+      }
+      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId, this.libraryItemUpdatedAt, true)
+    },
     mediaMetadata() {
       return this.media.metadata || {}
     },
diff --git a/client/components/modals/player/QueueItemRow.vue b/client/components/modals/player/QueueItemRow.vue
index 2eb1bc3b..9ac01a16 100644
--- a/client/components/modals/player/QueueItemRow.vue
+++ b/client/components/modals/player/QueueItemRow.vue
@@ -55,7 +55,7 @@ export default {
       return this.item.coverPath
     },
     coverUrl() {
-      if (!this.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
+      if (!this.coverPath) return this.$store.getters['globals/getPlaceholderCoverSrc']
       return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId)
     },
     bookCoverAspectRatio() {
diff --git a/client/pages/share/_slug.vue b/client/pages/share/_slug.vue
index e7d00f00..bcc779d9 100644
--- a/client/pages/share/_slug.vue
+++ b/client/pages/share/_slug.vue
@@ -64,7 +64,7 @@ export default {
       return this.mediaItemShare.playbackSession
     },
     coverUrl() {
-      if (!this.playbackSession.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
+      if (!this.playbackSession.coverPath) return this.$store.getters['globals/getPlaceholderCoverSrc']
       return `${this.$config.routerBasePath}/public/share/${this.mediaItemShare.slug}/cover`
     },
     downloadUrl() {
diff --git a/client/store/globals.js b/client/store/globals.js
index 65878fb4..7b416196 100644
--- a/client/store/globals.js
+++ b/client/store/globals.js
@@ -87,7 +87,7 @@ export const getters = {
   getLibraryItemCoverSrc:
     (state, getters, rootState, rootGetters) =>
     (libraryItem, placeholder = null, raw = false) => {
-      if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
+      if (!placeholder) placeholder = getters.getPlaceholderCoverSrc
       if (!libraryItem) return placeholder
       const media = libraryItem.media
       if (!media?.coverPath || media.coverPath === placeholder) return placeholder
@@ -95,7 +95,6 @@ export const getters = {
       // Absolute URL covers (should no longer be used)
       if (media.coverPath.startsWith('http:') || media.coverPath.startsWith('https:')) return media.coverPath
 
-      const userToken = rootGetters['user/getToken']
       const lastUpdate = libraryItem.updatedAt || Date.now()
       const libraryItemId = libraryItem.libraryItemId || libraryItem.id // Workaround for /users/:id page showing media progress covers
       return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?ts=${lastUpdate}${raw ? '&raw=1' : ''}`
@@ -103,11 +102,13 @@ export const getters = {
   getLibraryItemCoverSrcById:
     (state, getters, rootState, rootGetters) =>
     (libraryItemId, timestamp = null, raw = false) => {
-      const placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
-      if (!libraryItemId) return placeholder
-      const userToken = rootGetters['user/getToken']
+      if (!libraryItemId) return getters.getPlaceholderCoverSrc
+
       return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
     },
+  getPlaceholderCoverSrc: (state, getters, rootState, rootGetters) => {
+    return `${rootState.routerBasePath}/book_placeholder.jpg`
+  },
   getIsBatchSelectingMediaItems: (state) => {
     return state.selectedMediaItems.length
   }