From 9a6ba3d0de28f81a72286b02b9d564599ff6c0be Mon Sep 17 00:00:00 2001 From: advplyr Date: Thu, 2 Dec 2021 15:49:03 -0600 Subject: [PATCH] Add:Server option to use square cover images #210 --- .../components/app/BookShelfCategorized.vue | 15 ++++- client/components/app/BookShelfRow.vue | 13 ++-- client/components/app/LazyBookshelf.vue | 30 +++++++-- client/components/app/SideRail.vue | 2 +- client/components/cards/BookCard.vue | 19 +++--- client/components/cards/GroupCard.vue | 20 ++++-- client/components/cards/LazyBookCard.vue | 62 ++++--------------- .../components/cards/LazyCollectionCard.vue | 16 ++--- client/components/cards/LazySeriesCard.vue | 31 +++++++--- client/components/covers/BookCover.vue | 16 +++-- client/components/covers/CollectionCover.vue | 10 +-- client/components/covers/GroupCover.vue | 39 ++++++++---- client/mixins/bookshelfCardsHelpers.js | 14 +++-- client/pages/config/index.vue | 18 ++++++ client/plugins/constants.js | 8 ++- client/store/index.js | 4 ++ server/objects/ServerSettings.js | 8 ++- server/utils/constants.js | 5 ++ 18 files changed, 208 insertions(+), 122 deletions(-) diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue index ccb7a1c2..70a1a220 100644 --- a/client/components/app/BookShelfCategorized.vue +++ b/client/components/app/BookShelfCategorized.vue @@ -16,7 +16,7 @@
@@ -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 diff --git a/client/components/app/BookShelfRow.vue b/client/components/app/BookShelfRow.vue index b9762b14..6d653789 100644 --- a/client/components/app/BookShelfRow.vue +++ b/client/components/app/BookShelfRow.vue @@ -4,30 +4,30 @@
@@ -60,7 +60,8 @@ export default { default: () => {} }, sizeMultiplier: Number, - bookCoverWidth: Number + bookCoverWidth: Number, + bookCoverAspectRatio: Number }, data() { return { diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue index 7e26a68d..e7eefb60 100644 --- a/client/components/app/LazyBookshelf.vue +++ b/client/components/app/LazyBookshelf.vue @@ -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 diff --git a/client/components/app/SideRail.vue b/client/components/app/SideRail.vue index 46e2c453..865d9f73 100644 --- a/client/components/app/SideRail.vue +++ b/client/components/app/SideRail.vue @@ -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' diff --git a/client/components/cards/BookCard.vue b/client/components/cards/BookCard.vue index bbf5f93c..c41f01a2 100644 --- a/client/components/cards/BookCard.vue +++ b/client/components/cards/BookCard.vue @@ -19,7 +19,7 @@
- +
-
+

#{{ volumeNumber }}

@@ -65,7 +65,7 @@
- +
priority_high
@@ -100,7 +100,8 @@ export default { default: 16 }, isBookshelfBook: Boolean, - showVolumeNumber: Boolean + showVolumeNumber: Boolean, + bookCoverAspectRatio: Number }, data() { return { @@ -146,11 +147,15 @@ export default { book() { return this.audiobook.book || {} }, + squareAspectRatio() { + return this.bookCoverAspectRatio === 1 + }, height() { - return this.width * 1.6 + return this.width * this.bookCoverAspectRatio }, sizeMultiplier() { - return this.width / 120 + var baseSize = this.squareAspectRatio ? 192 : 120 + return this.width / baseSize }, paddingX() { return 16 * this.sizeMultiplier diff --git a/client/components/cards/GroupCard.vue b/client/components/cards/GroupCard.vue index 4a229dcb..dd719f7e 100644 --- a/client/components/cards/GroupCard.vue +++ b/client/components/cards/GroupCard.vue @@ -3,9 +3,9 @@
- + -
+

{{ groupName }}

@@ -42,7 +42,8 @@ export default { type: Number, default: 24 }, - isCategorized: Boolean + isCategorized: Boolean, + bookCoverAspectRatio: Number }, data() { return { @@ -59,6 +60,9 @@ export default { } }, computed: { + seriesId() { + return this.groupEncode + }, labelFontSize() { if (this.coverWidth < 160) return 0.75 return 0.875 @@ -81,14 +85,18 @@ export default { return `/library/${this.currentLibraryId}/bookshelf?filter=tags.${this.groupEncode}` } }, + squareAspectRatio() { + return this.bookCoverAspectRatio === 1 + }, coverWidth() { - return this.coverHeight + return this.width * 2 }, coverHeight() { - return this.width * 1.6 + return this.width * this.bookCoverAspectRatio }, sizeMultiplier() { - return this.width / 120 + var baseSize = this.squareAspectRatio ? 192 : 120 + return this.width / baseSize }, paddingX() { return 16 * this.sizeMultiplier diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue index a773c275..bf935c14 100644 --- a/client/components/cards/LazyBookCard.vue +++ b/client/components/cards/LazyBookCard.vue @@ -1,6 +1,8 @@ @@ -113,6 +71,11 @@ export default { type: Number, default: 120 }, + height: { + type: Number, + default: 192 + }, + bookCoverAspectRatio: Number, showVolumeNumber: Boolean }, data() { @@ -159,11 +122,12 @@ export default { hasCover() { return !!this.book.cover }, - bookHeight() { - return this.width * 1.6 + squareAspectRatio() { + return this.bookCoverAspectRatio === 1 }, sizeMultiplier() { - return this.width / 120 + var baseSize = this.squareAspectRatio ? 192 : 120 + return this.width / baseSize }, title() { return this.book.title || '' @@ -492,7 +456,7 @@ export default { if (this.$refs.cover && this.bookCoverSrc !== this.placeholderUrl) { var { naturalWidth, naturalHeight } = this.$refs.cover var aspectRatio = naturalHeight / naturalWidth - var arDiff = Math.abs(aspectRatio - 1.6) + var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio) // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit if (arDiff > 0.15) { diff --git a/client/components/cards/LazyCollectionCard.vue b/client/components/cards/LazyCollectionCard.vue index 3cd3d8e0..34603782 100644 --- a/client/components/cards/LazyCollectionCard.vue +++ b/client/components/cards/LazyCollectionCard.vue @@ -1,7 +1,7 @@