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

Add:Server option to use square cover images #210

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

31
client/components/cards/LazySeriesCard.vue
View file

@ -1,13 +1,16 @@
<template>
<div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: cardHeight + 'px' }" class="absolute top-0 left-0 rounded-sm z-10 cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
<div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-10 cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
<div class="w-full h-full bg-primary relative rounded overflow-hidden">
<covers-group-cover ref="cover" :name="title" :book-items="books" :width="width" :height="width" :group-to="seriesBooksRoute" />
<covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="title" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" :group-to="seriesBooksRoute" />
</div>
<div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
<p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ title }}</p>
</div>
<!-- <div v-if="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-40">
</div> -->
<div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${1 * sizeMultiplier}rem` }">
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
<p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
</div>
</div>
@ -18,7 +21,9 @@
export default {
props: {
index: Number,
width: Number
width: Number,
height: Number,
bookCoverAspectRatio: Number
},
data() {
return {
@ -34,11 +39,9 @@ export default {
if (this.width < 160) return 0.75
return 0.875
},
cardHeight() {
return this.width
},
sizeMultiplier() {
return this.width / 120
if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
return this.width / 240
},
title() {
return this.series ? this.series.name : ''
@ -54,6 +57,13 @@ export default {
},
seriesBooksRoute() {
return `/library/${this.currentLibraryId}/series/${this.$encode(this.title)}`
},
seriesId() {
return this.series ? this.$encode(this.series.id) : null
},
hasValidCovers() {
var validCovers = this.books.map((bookItem) => bookItem.book.cover)
return !!validCovers.length
}
},
methods: {
@ -72,7 +82,7 @@ export default {
clickCard() {
if (!this.series) return
var router = this.$router || this.$nuxt.$router
router.push(`/library/${this.currentLibraryId}/bookshelf/series?series=${this.$encode(this.series.id)}`)
router.push(`/library/${this.currentLibraryId}/bookshelf/series?series=${this.seriesId}`)
},
imageLoaded() {
this.imageReady = true
@ -89,6 +99,7 @@ export default {
}
}
},
mounted() {}
mounted() {},
beforeDestroy() {}
}
</script>