groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-12-20 18:59: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

15
client/components/app/BookShelfCategorized.vue
View file

@ -16,7 +16,7 @@
</div>
<div v-else class="w-full flex flex-col items-center">
<template v-for="(shelf, index) in shelves">
<app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
<app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</template>
</div>
</div>
@ -51,7 +51,18 @@ export default {
return this.$store.state.libraries.currentLibraryId
},
bookCoverWidth() {
return this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
if (this.isCoverSquareAspectRatio) return coverSize * 1.6
return coverSize
},
coverAspectRatio() {
return this.$store.getters['getServerSetting']('coverAspectRatio')
},
isCoverSquareAspectRatio() {
return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
},
bookCoverAspectRatio() {
return this.isCoverSquareAspectRatio ? 1 : 1.6
},
sizeMultiplier() {
return this.bookCoverWidth / 120

13
client/components/app/BookShelfRow.vue
View file

@ -4,30 +4,30 @@
<div class="w-full h-full" :style="{ marginTop: sizeMultiplier + 'rem' }">
<div v-if="shelf.type === 'books'" class="flex items-center -mb-2">
<template v-for="entity in shelf.entities">
<cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" :padding-y="24" @edit="editBook" />
<cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" :padding-y="24" :book-cover-aspect-ratio="bookCoverAspectRatio" @edit="editBook" />
</template>
</div>
<div v-if="shelf.type === 'series'" class="flex items-center -mb-2">
<template v-for="entity in shelf.entities">
<cards-group-card :key="entity.name" is-categorized :width="bookCoverWidth" :group="entity" @click="$emit('clickSeries', entity)" />
<cards-group-card :key="entity.name" is-categorized :width="bookCoverWidth" :group="entity" :book-cover-aspect-ratio="bookCoverAspectRatio" @hook:updated="updatedBookCard" @click="$emit('clickSeries', entity)" />
</template>
</div>
<div v-if="shelf.type === 'tags'" class="flex items-center -mb-2">
<template v-for="entity in shelf.entities">
<nuxt-link :key="entity.name" :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(entity.name)}`">
<cards-group-card is-categorized :width="bookCoverWidth" :group="entity" />
<cards-group-card is-categorized :width="bookCoverWidth" :group="entity" :book-cover-aspect-ratio="bookCoverAspectRatio" @hook:updated="updatedBookCard" />
</nuxt-link>
</template>
</div>
<div v-else-if="shelf.series" class="flex items-center -mb-2">
<template v-for="entity in shelf.series">
<cards-group-card is-categorized :key="entity.name" :width="bookCoverWidth" :group="entity" @click="$emit('clickSeries', entity)" />
<cards-group-card is-categorized :key="entity.name" :width="bookCoverWidth" :group="entity" :book-cover-aspect-ratio="bookCoverAspectRatio" @hook:updated="updatedBookCard" @click="$emit('clickSeries', entity)" />
</template>
</div>
<div v-else-if="shelf.tags" class="flex items-center -mb-2">
<template v-for="entity in shelf.tags">
<nuxt-link :key="entity.name" :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(entity.name)}`">
<cards-group-card is-categorized :width="bookCoverWidth" :group="entity" />
<cards-group-card is-categorized :width="bookCoverWidth" :group="entity" :book-cover-aspect-ratio="bookCoverAspectRatio" @hook:updated="updatedBookCard" />
</nuxt-link>
</template>
</div>
@ -60,7 +60,8 @@ export default {
default: () => {}
},
sizeMultiplier: Number,
bookCoverWidth: Number
bookCoverWidth: Number,
bookCoverAspectRatio: Number
},
data() {
return {

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

@ -99,28 +99,48 @@ export default {
filterBy() {
return this.$store.getters['user/getUserSetting']('filterBy')
},
coverAspectRatio() {
return this.$store.getters['getServerSetting']('coverAspectRatio')
},
isCoverSquareAspectRatio() {
return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
},
bookCoverAspectRatio() {
return this.isCoverSquareAspectRatio ? 1 : 1.6
},
hasFilter() {
return this.filterBy && this.filterBy !== 'all'
},
currentLibraryId() {
return this.$store.state.libraries.currentLibraryId
},
isEntityBook() {
return this.entityName === 'series-books' || this.entityName === 'books'
},
bookWidth() {
return this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
if (this.isCoverSquareAspectRatio) return coverSize * 1.6
return coverSize
},
bookHeight() {
if (this.isCoverSquareAspectRatio) return this.bookWidth
return this.bookWidth * 1.6
},
entityWidth() {
if (this.entityName === 'series') return this.bookWidth * 1.6
if (this.entityName === 'series') return this.bookWidth * 2
if (this.entityName === 'collections') return this.bookWidth * 2
return this.bookWidth
},
bookHeight() {
return this.bookWidth * 1.6
entityHeight() {
if (this.entityName === 'series') return this.bookHeight
if (this.entityName === 'collections') return this.bookHeight
return this.bookHeight
},
shelfDividerHeightIndex() {
return 6
},
shelfHeight() {
return this.bookHeight + 40
return this.entityHeight + 40
},
totalEntityCardWidth() {
// Includes margin

2
client/components/app/SideRail.vue
View file

@ -104,7 +104,7 @@ export default {
return this.$route.name === 'library-library'
},
isSeriesPage() {
return this.$route.name === 'library-library-series-id'
return this.$route.name === 'library-library-series-id' || this.paramId === 'series'
},
libraryBookshelfPage() {
return this.$route.name === 'library-library-bookshelf-id'