mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-24 12:54:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Update playlist cover to square of 4 items

Browse source
This commit is contained in:
advplyr 2022-11-27 14:11:17 -06:00
parent 950d10091d
commit b743b34fab
3 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/components/app/LazyBookshelf.vue
View file

@ -167,7 +167,7 @@ export default {
return coverSize
},
bookHeight() {
if (this.isCoverSquareAspectRatio) return this.bookWidth
if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return this.bookWidth
return this.bookWidth * 1.6
},
shelfPadding() {
@ -178,7 +178,7 @@ export default {
return this.shelfPadding * 2
},
entityWidth() {
if (this.entityName === 'series' || this.entityName === 'collections' || this.entityName === 'playlists') {
if (this.entityName === 'series' || this.entityName === 'collections') {
if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
return this.bookWidth * 2
}

20
client/components/covers/PlaylistCover.vue
View file

@ -6,11 +6,12 @@
</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 justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
<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" />
<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" />
<!-- <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 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" />
@ -47,6 +48,19 @@ export default {
},
fullCoverUrl() {
return null
},
libraryItemCovers() {
if (!this.items.length) return []
if (this.items.length === 1) return [this.items[0].libraryItem]
const covers = []
for (let i = 0; i < 4; i++) {
let index = i % this.items.length
if (this.items.length === 2 && i >= 2) index = (i + 1) % 2 // for playlists with 2 items show covers in checker pattern
covers.push(this.items[index].libraryItem)
}
return covers
}
},
methods: {