groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-12-14 07:49:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move raw cover preview to a separate global component, fix item page cover overlay show on hover

Browse source
This commit is contained in:
advplyr 2023-10-27 16:51:44 -05:00
parent 32616aa441
commit 6278bb8665
6 changed files with 51 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/components/covers/BookCover.vue
View file

@ -7,12 +7,6 @@
<img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" draggable="false" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" @click="clickCover" />
<modals-modal v-if="libraryItem && expandOnClick" v-model="showImageModal" name="cover" :width="'90%'" :height="'90%'" :contentMarginTop="0">
<div class="w-full h-full" @click="showImageModal = false">
<img loading="lazy" :src="rawCoverUrl" class="w-full h-full z-10 object-scale-down" />
</div>
</modals-modal>
<div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
<p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
<div class="absolute top-2 right-2">
@ -55,7 +49,6 @@ export default {
},
data() {
return {
showImageModal: false,
loading: true,
imageFailed: false,
showCoverBg: false,
@ -111,11 +104,6 @@ export default {
var store = this.$store || this.$nuxt.$store
return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
},
rawCoverUrl() {
if (!this.libraryItem) return null
var store = this.$store || this.$nuxt.$store
return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, null, true)
},
cover() {
return this.media.coverPath || this.placeholderUrl
},
@ -147,7 +135,9 @@ export default {
},
methods: {
clickCover() {
this.showImageModal = true
if (this.expandOnClick && this.libraryItem) {
this.$store.commit('globals/setRawCoverPreviewModal', this.libraryItem.id)
}
},
setCoverBg() {
if (this.$refs.coverBg) {