audiobookshelf/client/components/covers/BookCover.vue

165 lines
5.3 KiB
Vue
Raw Normal View History

2021-08-18 00:01:11 +02:00
<template>
<div class="relative rounded-sm overflow-hidden" :style="{ height: height + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
<div class="w-full h-full relative bg-bg">
2021-12-04 00:05:13 +01:00
<div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
<div class="absolute cover-bg" ref="coverBg" />
</div>
2021-12-04 00:05:13 +01:00
<img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" @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'" />
<div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
<p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
<div class="absolute top-2 right-2">
<widgets-loading-spinner />
</div>
</div>
2021-08-26 15:04:52 +02:00
</div>
2021-08-18 00:01:11 +02:00
<div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
<div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
<img src="/Logo.png" loading="lazy" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
<p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
</div>
</div>
2021-12-02 02:07:03 +01:00
<div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem' }">
2021-08-18 00:01:11 +02:00
<div>
<p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
</div>
</div>
2021-12-02 02:07:03 +01:00
<div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
<p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
2021-08-18 00:01:11 +02:00
</div>
</div>
</template>
<script>
export default {
props: {
libraryItem: {
2021-08-18 00:01:11 +02:00
type: Object,
default: () => {}
},
width: {
type: Number,
default: 120
},
bookCoverAspectRatio: Number
2021-08-18 00:01:11 +02:00
},
data() {
return {
loading: true,
2021-08-26 15:04:52 +02:00
imageFailed: false,
showCoverBg: false,
imageReady: false
}
2021-08-18 00:01:11 +02:00
},
watch: {
cover() {
this.imageFailed = false
}
},
2021-08-18 00:01:11 +02:00
computed: {
squareAspectRatio() {
return this.bookCoverAspectRatio === 1
},
height() {
return this.width * this.bookCoverAspectRatio
},
media() {
if (!this.libraryItem) return {}
return this.libraryItem.media || {}
},
mediaMetadata() {
return this.media.metadata || {}
2021-08-18 00:01:11 +02:00
},
title() {
return this.mediaMetadata.title || 'No Title'
2021-08-18 00:01:11 +02:00
},
titleCleaned() {
if (this.title.length > 60) {
return this.title.slice(0, 57) + '...'
2021-08-18 00:01:11 +02:00
}
return this.title
},
authors() {
return this.mediaMetadata.authors || []
},
2021-08-18 00:01:11 +02:00
author() {
return this.authors.map((au) => au.name).join(', ')
2021-08-18 00:01:11 +02:00
},
authorCleaned() {
if (this.author.length > 30) {
return this.author.slice(0, 27) + '...'
}
return this.author
},
2021-08-26 15:04:52 +02:00
placeholderUrl() {
return '/book_placeholder.jpg'
},
fullCoverUrl() {
if (!this.libraryItem) return null
2021-11-29 02:36:44 +01:00
var store = this.$store || this.$nuxt.$store
return store.getters['audiobooks/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
2021-08-26 15:04:52 +02:00
},
2021-08-18 00:01:11 +02:00
cover() {
return this.media.coverPath || this.placeholderUrl
2021-08-18 00:01:11 +02:00
},
hasCover() {
return !!this.media.coverPath
2021-08-18 00:01:11 +02:00
},
sizeMultiplier() {
var baseSize = this.squareAspectRatio ? 192 : 120
return this.width / baseSize
2021-08-18 00:01:11 +02:00
},
titleFontSize() {
return 0.75 * this.sizeMultiplier
2021-08-18 00:01:11 +02:00
},
authorFontSize() {
return 0.6 * this.sizeMultiplier
2021-08-18 00:01:11 +02:00
},
placeholderCoverPadding() {
return 0.8 * this.sizeMultiplier
2021-08-18 00:01:11 +02:00
},
authorBottom() {
return 0.75 * this.sizeMultiplier
},
userToken() {
return this.$store.getters['user/getToken']
}
},
methods: {
2021-08-26 15:04:52 +02:00
setCoverBg() {
if (this.$refs.coverBg) {
this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
}
},
imageLoaded() {
this.loading = false
this.$nextTick(() => {
this.imageReady = true
})
2021-08-26 15:04:52 +02:00
if (this.$refs.cover && this.cover !== this.placeholderUrl) {
var { naturalWidth, naturalHeight } = this.$refs.cover
var aspectRatio = naturalHeight / naturalWidth
var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
2021-08-26 15:04:52 +02:00
// If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
if (arDiff > 0.15) {
this.showCoverBg = true
this.$nextTick(this.setCoverBg)
} else {
this.showCoverBg = false
}
}
},
imageError(err) {
this.loading = false
console.error('ImgError', err)
this.imageFailed = true
2021-08-18 00:01:11 +02:00
}
},
mounted() {}
}
</script>