Add:Server option to use square cover images #210

This commit is contained in:
advplyr 2021-12-02 15:49:03 -06:00
parent 0d6f83e9d9
commit 9a6ba3d0de
18 changed files with 208 additions and 122 deletions

View file

@ -1,5 +1,5 @@
<template>
<div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
<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">
<div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
<div class="w-full h-full z-0" ref="coverBg" />
@ -51,7 +51,8 @@ export default {
width: {
type: Number,
default: 120
}
},
bookCoverAspectRatio: Number
},
data() {
return {
@ -67,6 +68,12 @@ export default {
}
},
computed: {
squareAspectRatio() {
return this.bookCoverAspectRatio === 1
},
height() {
return this.width * this.bookCoverAspectRatio
},
book() {
if (!this.audiobook) return {}
return this.audiobook.book || {}
@ -105,7 +112,8 @@ export default {
return !!this.book.cover
},
sizeMultiplier() {
return this.width / 120
var baseSize = this.squareAspectRatio ? 192 : 120
return this.width / baseSize
},
titleFontSize() {
return 0.75 * this.sizeMultiplier
@ -142,7 +150,7 @@ export default {
if (this.$refs.cover && this.cover !== this.placeholderUrl) {
var { naturalWidth, naturalHeight } = this.$refs.cover
var aspectRatio = naturalHeight / naturalWidth
var arDiff = Math.abs(aspectRatio - 1.6)
var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
// If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
if (arDiff > 0.15) {

View file

@ -13,8 +13,8 @@
<div v-else-if="books.length" class="flex justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
<div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
<covers-book-cover :audiobook="books[0]" :width="width / 2" />
<covers-book-cover v-if="books.length > 1" :audiobook="books[1]" :width="width / 2" />
<covers-book-cover :audiobook="books[0]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
<covers-book-cover v-if="books.length > 1" :audiobook="books[1]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
<div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
<div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
@ -32,7 +32,8 @@ export default {
default: () => []
},
width: Number,
height: Number
height: Number,
bookCoverAspectRatio: Number
},
data() {
return {
@ -42,7 +43,8 @@ export default {
},
computed: {
sizeMultiplier() {
return this.width / 120
if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
return this.width / 240
},
hasOwnCover() {
return false

View file

@ -9,6 +9,7 @@
<script>
export default {
props: {
id: String,
name: String,
bookItems: {
type: Array,
@ -17,7 +18,8 @@ export default {
width: Number,
height: Number,
groupTo: String,
isCategorized: Boolean
isCategorized: Boolean,
bookCoverAspectRatio: Number
},
data() {
return {
@ -31,7 +33,8 @@ export default {
isFannedOut: false,
isDetached: false,
isAttaching: false,
windowWidth: 0
windowWidth: 0,
isInit: false
}
},
watch: {
@ -47,13 +50,15 @@ export default {
},
computed: {
sizeMultiplier() {
return this.width / 192
if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
return this.width / 240
},
showExperimentalFeatures() {
return this.store.state.showExperimentalFeatures
},
showCoverFan() {
return this.showExperimentalFeatures && this.windowWidth > 1024 && !this.isCategorized
// return this.showExperimentalFeatures && this.windowWidth > 1024 && !this.isCategorized
return false
},
store() {
return this.$store || this.$nuxt.$store
@ -112,11 +117,11 @@ export default {
this.fanOutCovers()
} else if (!val && this.isHovering) {
this.isAttaching = true
this.reverseFan()
setTimeout(() => {
this.attachCoverWrapper()
this.isAttaching = false
}, 100)
// this.reverseFan()
// setTimeout(() => {
// this.attachCoverWrapper()
// this.isAttaching = false
// }, 100)
}
this.isHovering = val
},
@ -211,7 +216,7 @@ export default {
image.onload = () => {
var { naturalWidth, naturalHeight } = image
var aspectRatio = naturalHeight / naturalWidth
var arDiff = Math.abs(aspectRatio - 1.6)
var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
// If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
if (arDiff > 0.15) {
@ -265,7 +270,7 @@ export default {
createSeriesNameCover(offsetLeft) {
var imgdiv = document.createElement('div')
imgdiv.style.height = this.height + 'px'
imgdiv.style.width = this.height / 1.6 + 'px'
imgdiv.style.width = this.height / this.bookCoverAspectRatio + 'px'
imgdiv.style.left = offsetLeft + 'px'
imgdiv.className = 'absolute top-0 box-shadow-book transition-transform flex items-center justify-center'
imgdiv.style.boxShadow = '4px 0px 4px #11111166'
@ -279,6 +284,9 @@ export default {
return imgdiv
},
async init() {
if (this.isInit) return
this.isInit = true
if (this.coverDiv) {
this.coverDiv.remove()
this.coverDiv = null
@ -301,15 +309,16 @@ export default {
var coverWidth = this.width
var widthPer = this.width
if (validCovers.length > 1) {
coverWidth = this.height / 1.6
coverWidth = this.height / this.bookCoverAspectRatio
widthPer = (this.width - coverWidth) / (validCovers.length - 1)
}
this.coverWidth = coverWidth
this.offsetIncrement = widthPer
var outerdiv = document.createElement('div')
outerdiv.id = `group-cover-${this.id}`
this.coverWrapperEl = outerdiv
outerdiv.className = 'w-full h-full relative'
outerdiv.className = 'w-full h-full relative box-shadow-book'
var coverImageEls = []
var offsetLeft = 0
@ -340,6 +349,10 @@ export default {
},
beforeDestroy() {
if (this.coverWrapperEl) this.coverWrapperEl.remove()
if (this.coverImageEls && this.coverImageEls.length) {
this.coverImageEls.forEach((el) => el.remove())
}
if (this.coverDiv) this.coverDiv.remove()
}
}
</script>