groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-03-03 22:49:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement server-side cover dimension detection and update badge thresholds

Browse source
This commit is contained in:
Tiberiu Ichim 2026-02-17 19:30:48 +02:00
parent 5bf60d5ae3
commit d0c09d04f1
16 changed files with 353 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,11 @@
</div>
</div>
<!-- Cover Size Badge -->
<div v-if="coverBadge" class="absolute bottom-1 right-1 px-1 rounded-sm text-white font-bold pointer-events-none z-20" :class="coverBadge.color" :style="{ fontSize: (0.6 * sizeMultiplier) + 'rem', lineHeight: (0.8 * sizeMultiplier) + 'rem' }">
{{ coverBadge.text }}
</div>
<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' }">
<div>
<p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
@ -52,7 +57,9 @@ export default {
loading: true,
imageFailed: false,
showCoverBg: false,
imageReady: false
imageReady: false,
naturalWidth: 0,
naturalHeight: 0
}
},
watch: {
@ -133,6 +140,18 @@ export default {
},
resolution() {
return `${this.naturalWidth}x${this.naturalHeight}px`
},
coverBadge() {
const width = this.media?.coverWidth || this.naturalWidth
const height = this.media?.coverHeight || this.naturalHeight
if (!width || !height) return null
if (width >= 1200 || height >= 1200) {
return { text: 'BIG', color: 'bg-success' }
}
if (width >= 450 || height >= 450) {
return { text: 'MED', color: 'bg-info' }
}
return { text: 'SML', color: 'bg-warning' }
}
},
methods: {
@ -154,6 +173,8 @@ export default {
if (this.$refs.cover && this.cover !== this.placeholderUrl) {
var { naturalWidth, naturalHeight } = this.$refs.cover
this.naturalWidth = naturalWidth
this.naturalHeight = naturalHeight
var aspectRatio = naturalHeight / naturalWidth
var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)