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

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,9 +131,6 @@ export default {
     authorBottom() {
       return 0.75 * this.sizeMultiplier
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     resolution() {
       return `${this.naturalWidth}x${this.naturalHeight}px`
     }
@@ -136,7 +138,7 @@ export default {
   methods: {
     clickCover() {
       if (this.expandOnClick && this.libraryItem) {
-        this.$store.commit('globals/setRawCoverPreviewModal', this.libraryItem.id)
+        this.$store.commit('globals/setRawCoverPreviewModal', this.rawCoverUrl)
       }
     },
     setCoverBg() {

client/components/modals/RawCoverPreviewModal.vue

@@ -20,11 +20,8 @@ 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: {},

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,7 +82,9 @@ export const state = () => ({
 })
 
 export const getters = {
-  getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = null, raw = false) => {
+  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
@@ -95,17 +97,21 @@ export const getters = {
       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
+      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) => {
+  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
+      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}` : ''}`
@@ -161,8 +167,8 @@ export const mutations = {
   setShowRawCoverPreviewModal(state, val) {
     state.showRawCoverPreviewModal = val
   },
-  setRawCoverPreviewModal(state, libraryItemId) {
+  setRawCoverPreviewModal(state, rawCoverUrl) {
-    state.selectedLibraryItemId = libraryItemId
+    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)) {
+    if (state.selectedMediaItems.some((i) => i.id === item.id)) {
-      state.selectedMediaItems = state.selectedMediaItems.filter(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)
     }