extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-11-07 16:44:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
advplyr 2024-05-02 17:48:50 -05:00
parent 410801347c
commit bf3db1dae0
3 changed files with 46 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/covers/BookCover.vue
View File

@ -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() {

7
client/components/modals/RawCoverPreviewModal.vue
View File

@ -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>

69
client/store/globals.js
View File

@ -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)
}