Fix:Fullscreen cover image modal not updating when changing covers #2900

advplyr · May 2, 2024 · bf3db1d · bf3db1d
1 parent 4108013
commit bf3db1d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 42 deletions.
diff --git a/client/components/covers/BookCover.vue b/client/components/covers/BookCover.vue
@@ -101,9 +101,14 @@ export default {
     },
     fullCoverUrl() {
       if (!this.libraryItem) return null
-      var store = this.$store || this.$nuxt.$store
+      const store = this.$store || this.$nuxt.$store
       return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
     },
+    rawCoverUrl() {
+      if (!this.libraryItem) return null
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl, true)
+    },
     cover() {
       return this.media.coverPath || this.placeholderUrl
     },
@@ -126,17 +131,14 @@ export default {
     authorBottom() {
       return 0.75 * this.sizeMultiplier
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     resolution() {
       return `${this.naturalWidth}x${this.naturalHeight}px`
     }
   },
   methods: {
     clickCover() {
       if (this.expandOnClick && this.libraryItem) {
-        this.$store.commit('globals/setRawCoverPreviewModal', this.libraryItem.id)
+        this.$store.commit('globals/setRawCoverPreviewModal', this.rawCoverUrl)
       }
     },
     setCoverBg() {

diff --git a/client/components/modals/RawCoverPreviewModal.vue b/client/components/modals/RawCoverPreviewModal.vue
@@ -20,14 +20,11 @@ export default {
         this.$store.commit('globals/setShowRawCoverPreviewModal', val)
       }
     },
-    selectedLibraryItemId() {
-      return this.$store.state.globals.selectedLibraryItemId
-    },
     rawCoverUrl() {
-      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.selectedLibraryItemId, null, true)
+      return this.$store.state.globals.selectedRawCoverUrl
     }
   },
   methods: {},
   mounted() {}
 }
-</script>
+</script>
diff --git a/client/store/globals.js b/client/store/globals.js
@@ -21,7 +21,7 @@ export const state = () => ({
   selectedCollection: null,
   selectedAuthor: null,
   selectedMediaItems: [],
-  selectedLibraryItemId: null,
+  selectedRawCoverUrl: null,
   isCasting: false, // Actively casting
   isChromecastInitialized: false, // Script loadeds
   showBatchQuickMatchModal: false,
@@ -82,34 +82,40 @@ export const state = () => ({
 })
 
 export const getters = {
-  getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = null, raw = false) => {
-    if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
-    if (!libraryItem) return placeholder
-    const media = libraryItem.media
-    if (!media?.coverPath || media.coverPath === placeholder) return placeholder
+  getLibraryItemCoverSrc:
+    (state, getters, rootState, rootGetters) =>
+    (libraryItem, placeholder = null, raw = false) => {
+      if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
+      if (!libraryItem) return placeholder
+      const media = libraryItem.media
+      if (!media?.coverPath || media.coverPath === placeholder) return placeholder
 
-    // Absolute URL covers (should no longer be used)
-    if (media.coverPath.startsWith('http:') || media.coverPath.startsWith('https:')) return media.coverPath
+      // 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
+      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
 
-    if (process.env.NODE_ENV !== 'production') { // Testing
-      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
-    }
+      if (process.env.NODE_ENV !== 'production') {
+        // Testing
+        return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
+      }
 
-    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
-  },
-  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 (process.env.NODE_ENV !== 'production') { // Testing
-      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
-    }
-    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
-  },
+      return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
+    },
+  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 (process.env.NODE_ENV !== 'production') {
+        // Testing
+        return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
+      }
+      return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
+    },
   getIsBatchSelectingMediaItems: (state) => {
     return state.selectedMediaItems.length
   }
@@ -161,8 +167,8 @@ export const mutations = {
   setShowRawCoverPreviewModal(state, val) {
     state.showRawCoverPreviewModal = val
   },
-  setRawCoverPreviewModal(state, libraryItemId) {
-    state.selectedLibraryItemId = libraryItemId
+  setRawCoverPreviewModal(state, rawCoverUrl) {
+    state.selectedRawCoverUrl = rawCoverUrl
     state.showRawCoverPreviewModal = true
   },
   setEditCollection(state, collection) {
@@ -202,17 +208,16 @@ export const mutations = {
     state.selectedMediaItems = []
   },
   toggleMediaItemSelected(state, item) {
-    if (state.selectedMediaItems.some(i => i.id === item.id)) {
-      state.selectedMediaItems = state.selectedMediaItems.filter(i => i.id !== item.id)
+    if (state.selectedMediaItems.some((i) => i.id === item.id)) {
+      state.selectedMediaItems = state.selectedMediaItems.filter((i) => i.id !== item.id)
     } else {
       state.selectedMediaItems.push(item)
     }
   },
   setMediaItemSelected(state, { item, selected }) {
-    const isAlreadySelected = state.selectedMediaItems.some(i => i.id === item.id)
+    const isAlreadySelected = state.selectedMediaItems.some((i) => i.id === item.id)
     if (isAlreadySelected && !selected) {
-      state.selectedMediaItems = state.selectedMediaItems.filter(i => i.id !== item.id)
-
+      state.selectedMediaItems = state.selectedMediaItems.filter((i) => i.id !== item.id)
     } else if (selected && !isAlreadySelected) {
       state.selectedMediaItems.push(item)
     }