Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-03-24 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup playlist cover component

Browse Source
This commit is contained in:
advplyr 2022-11-27 14:13:31 -06:00
parent b743b34fab
commit b11b1be432
1 changed files with 4 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/components/covers/PlaylistCover.vue
View File

@ -1,22 +1,11 @@
<template> <template>
<div class="relative rounded-sm overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }"> <div class="relative rounded-sm overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
<div v-if="hasOwnCover" class="w-full h-full relative rounded-sm"> <div v-if="items.length" class="flex flex-wrap justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
<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" />
</div>
<img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
</div>
<div v-else-if="items.length" class="flex flex-wrap 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" /> <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
<covers-book-cover v-for="li in libraryItemCovers" :key="li.id" :library-item="li" :width="width / 2" :book-cover-aspect-ratio="1" /> <covers-book-cover v-for="li in libraryItemCovers" :key="li.id" :library-item="li" :width="width / 2" :book-cover-aspect-ratio="1" />
<!-- <covers-book-cover :library-item="items[0].libraryItem" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
<covers-book-cover v-if="items.length > 1" :library-item="items[1].libraryItem" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" /> -->
</div> </div>
<div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm"> <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" /> <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
<p class="font-book text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Playlist</p>
</div> </div>
</div> </div>
</template> </template>
@ -33,21 +22,11 @@ export default {
bookCoverAspectRatio: Number bookCoverAspectRatio: Number
}, },
data() { data() {
return { return {}
imageFailed: false,
showCoverBg: false
}
}, },
computed: { computed: {
sizeMultiplier() { sizeMultiplier() {
if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2) return this.width / (120 * 1.6 * 2)
return this.width / 240
},
hasOwnCover() {
return false
},
fullCoverUrl() {
return null
}, },
libraryItemCovers() { libraryItemCovers() {
if (!this.items.length) return [] if (!this.items.length) return []
@ -63,10 +42,7 @@ export default {
return covers return covers
} }
}, },
methods: { methods: {},
imageError() {},
imageLoaded() {}
},
mounted() {} mounted() {}
} }
</script> </script>