Add:Library specific setting for use square covers and remove from server settings #387

2025-01-03 00:06:46 +01:00 · 2022-08-13 13:56:37 -05:00 · 2022-08-13 13:56:37 -05:00 · d06c61b329
commit d06c61b329
parent be4f11a60e
25 changed files with 69 additions and 74 deletions
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@ -33,7 +33,7 @@
    <!-- Regular bookshelf view -->
    <div v-else class="w-full">
      <template v-for="(shelf, index) in shelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
      </template>
    </div>
  </div>
@ -82,13 +82,10 @@ export default {
      return coverSize
    },
    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    isCoverSquareAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
-    },
-    bookCoverAspectRatio() {
-      return this.isCoverSquareAspectRatio ? 1 : 1.6
+      return this.coverAspectRatio == 1
    },
    sizeMultiplier() {
      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@ -110,7 +110,7 @@ export default {
      return this.$store.getters['user/getUserSetting']('collapseSeries')
    },
    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    bookshelfView() {
      return this.$store.getters['getServerSetting']('bookshelfView')
@ -119,15 +119,12 @@ export default {
      return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
    },
    isCoverSquareAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
+      return this.coverAspectRatio == 1
    },
    isAlternativeBookshelfView() {
      // if (!this.isEntityBook) return false // Only used for bookshelf showing books
      return this.bookshelfView === this.$constants.BookshelfView.TITLES
    },
-    bookCoverAspectRatio() {
-      return this.isCoverSquareAspectRatio ? 1 : 1.6
-    },
    hasFilter() {
      return this.filterBy && this.filterBy !== 'all'
    },
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@ -2,7 +2,7 @@
  <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 sm:h-44 md:h-40 z-40 bg-primary px-4 pb-1 md:pb-4 pt-2">
    <div id="videoDock" />
    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-1 sm:left-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
-      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
    </nuxt-link>
    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : 'pl-20 sm:pl-24'">
      <div>
@ -77,16 +77,13 @@ export default {
  },
  computed: {
    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
-    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    bookCoverWidth() {
      return 88
    },
    bookCoverPosTop() {
-      if (this.bookCoverAspectRatio === 1) return -10
+      if (this.coverAspectRatio == 1) return -10
      return -64
    },
    cover() {
--- a/client/components/cards/ItemSearchCard.vue
+++ b/client/components/cards/ItemSearchCard.vue
@ -31,7 +31,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    coverWidth() {
      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
--- a/client/components/cards/SeriesSearchCard.vue
+++ b/client/components/cards/SeriesSearchCard.vue
@ -24,7 +24,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    name() {
      return this.series.name
--- a/client/components/modals/EditCollectionModal.vue
+++ b/client/components/modals/EditCollectionModal.vue
@ -75,7 +75,7 @@ export default {
      }
    },
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    collection() {
      return this.$store.state.globals.selectedCollection || {}
--- a/client/components/modals/UserCollectionsModal.vue
+++ b/client/components/modals/UserCollectionsModal.vue
@ -70,7 +70,7 @@ export default {
      return this.selectedLibraryItem ? this.selectedLibraryItem.media.metadata.title : ''
    },
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    selectedLibraryItem() {
      return this.$store.state.selectedLibraryItem
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@ -129,11 +129,8 @@ export default {
      else if (this.provider == 'itunes') return 'Search Term'
      return 'Search Title'
    },
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    libraryItemId() {
      return this.libraryItem ? this.libraryItem.id : null
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@ -246,7 +246,7 @@ export default {
      }
    },
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    providers() {
      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
--- a/client/components/modals/libraries/LibrarySettings.vue
+++ b/client/components/modals/libraries/LibrarySettings.vue
@ -1,5 +1,14 @@
 <template>
  <div class="w-full h-full px-4 py-1 mb-4">
+    <div class="flex items-center py-2">
+      <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
+      <ui-tooltip :text="tooltips.coverAspectRatio">
+        <p class="pl-4 text-base">
+          Use square book covers
+          <span class="material-icons icon-text text-sm">info_outlined</span>
+        </p>
+      </ui-tooltip>
+    </div>
    <div class="py-3">
      <div class="flex items-center">
        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" @input="formUpdated" />
@ -35,9 +44,13 @@ export default {
  data() {
    return {
      provider: null,
+      useSquareBookCovers: false,
      disableWatcher: false,
      skipMatchingMediaWithAsin: false,
-      skipMatchingMediaWithIsbn: false
+      skipMatchingMediaWithIsbn: false,
+      tooltips: {
+        coverAspectRatio: 'Prefer to use square covers over standard 1.6:1 book covers'
+      }
    }
  },
  computed: {
@ -59,6 +72,7 @@ export default {
    getLibraryData() {
      return {
        settings: {
+          coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
          disableWatcher: !!this.disableWatcher,
          skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn
@ -69,6 +83,7 @@ export default {
      this.$emit('update', this.getLibraryData())
    },
    init() {
+      this.useSquareBookCovers = this.librarySettings.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
      this.disableWatcher = !!this.librarySettings.disableWatcher
      this.skipMatchingMediaWithAsin = !!this.librarySettings.skipMatchingMediaWithAsin
      this.skipMatchingMediaWithIsbn = !!this.librarySettings.skipMatchingMediaWithIsbn
--- a/client/components/modals/podcast/ViewEpisode.vue
+++ b/client/components/modals/podcast/ViewEpisode.vue
@ -66,7 +66,7 @@ export default {
      return this.mediaMetadata.author
    },
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    }
  },
  methods: {},
--- a/client/components/tables/CollectionBooksTable.vue
+++ b/client/components/tables/CollectionBooksTable.vue
@ -52,11 +52,8 @@ export default {
    }
  },
  computed: {
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    totalDuration() {
      var _total = 0
--- a/client/components/widgets/AuthorsSlider.vue
+++ b/client/components/widgets/AuthorsSlider.vue
@ -46,7 +46,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    cardScaleMulitiplier() {
      return this.height / 192
--- a/client/components/widgets/EpisodeSlider.vue
+++ b/client/components/widgets/EpisodeSlider.vue
@ -46,7 +46,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    cardScaleMulitiplier() {
      return this.height / 192
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@ -46,7 +46,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    cardScaleMulitiplier() {
      return this.height / 192
--- a/client/components/widgets/SeriesSlider.vue
+++ b/client/components/widgets/SeriesSlider.vue
@ -46,7 +46,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    cardScaleMulitiplier() {
      return this.height / 192
--- a/client/mixins/bookshelfCardsHelpers.js
+++ b/client/mixins/bookshelfCardsHelpers.js
@ -51,7 +51,7 @@ export default {
        index,
        width: this.entityWidth,
        height: this.entityHeight,
-        bookCoverAspectRatio: this.bookCoverAspectRatio,
+        bookCoverAspectRatio: this.coverAspectRatio,
        bookshelfView: this.bookshelfView,
        sortingIgnorePrefix: !!this.sortingIgnorePrefix
      }
--- a/client/pages/batch/index.vue
+++ b/client/pages/batch/index.vue
@ -144,12 +144,6 @@ export default {
    isPodcastLibrary() {
      return this.mediaType === 'podcast'
    },
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
-    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
-    },
    streamLibraryItem() {
      return this.$store.state.streamLibraryItem
    },
--- a/client/pages/collection/_id.vue
+++ b/client/pages/collection/_id.vue
@ -65,7 +65,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    streamLibraryItem() {
      return this.$store.state.streamLibraryItem
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@ -52,7 +52,7 @@
            <h2 class="font-semibold">Display</h2>
          </div>

-          <div class="flex items-center py-2">
+          <!-- <div class="flex items-center py-2">
            <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
            <ui-tooltip :text="tooltips.coverAspectRatio">
              <p class="pl-4">
@ -60,7 +60,7 @@
                <span class="material-icons icon-text text-sm">info_outlined</span>
              </p>
            </ui-tooltip>
-          </div>
+          </div> -->

          <div class="flex items-center py-2">
            <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
--- a/client/pages/config/users/_id/index.vue
+++ b/client/pages/config/users/_id/index.vue
@ -105,11 +105,8 @@ export default {
    userToken() {
      return this.user.token
    },
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    username() {
      return this.user.username
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@ -246,11 +246,8 @@ export default {
    isFile() {
      return this.libraryItem.isFile
    },
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    bookCoverWidth() {
      return 208
--- a/client/store/libraries.js
+++ b/client/store/libraries.js
@ -42,6 +42,14 @@ export const getters = {
    })
    if (!librariesSorted.length) return null
    return librariesSorted[0]
+  },
+  getCurrentLibrarySettings: (state, getters) => {
+    if (!getters.getCurrentLibrary) return null
+    return getters.getCurrentLibrary.settings
+  },
+  getBookCoverAspectRatio: (state, getters) => {
+    if (!getters.getCurrentLibrarySettings || isNaN(getters.getCurrentLibrarySettings.coverAspectRatio)) return 1
+    return getters.getCurrentLibrarySettings.coverAspectRatio === 0 ? 1.6 : 1
  }
 }

--- a/server/Db.js
+++ b/server/Db.js
@ -121,7 +121,7 @@ class Db {
  async init() {
    await this.load()

-    if (!this.serverSettings) {
+    if (!this.serverSettings) { // Create first load server settings
      this.serverSettings = new ServerSettings()
      await this.insertEntity('settings', this.serverSettings)
    }
@ -142,7 +142,7 @@ class Db {
      this.libraries.sort((a, b) => a.displayOrder - b.displayOrder)
      Logger.info(`[DB] ${this.libraries.length} Libraries Loaded`)
    })
-    var p4 = this.settingsDb.select(() => true).then((results) => {
+    var p4 = this.settingsDb.select(() => true).then(async (results) => {
      if (results.data && results.data.length) {
        this.settings = results.data
        var serverSettings = this.settings.find(s => s.id === 'server-settings')
@ -152,6 +152,18 @@ class Db {
          // Check if server was upgraded
          if (!this.serverSettings.version || this.serverSettings.version !== version) {
            this.previousVersion = this.serverSettings.version || '1.0.0'
+
+            // Library settings and server settings updated in 2.1.3 - run migration
+            if (this.previousVersion.localeCompare('2.1.3') < 0) {
+              Logger.info(`[Db] Running servers & library settings migration`)
+              for (const library of this.libraries) {
+                if (library.settings.coverAspectRatio !== serverSettings.coverAspectRatio) {
+                  library.settings.coverAspectRatio = serverSettings.coverAspectRatio
+                  await this.updateEntity('library', library)
+                  Logger.debug(`[Db] Library ${library.name} migrated`)
+                }
+              }
+            }
          }
        }
      }
@ -357,22 +369,7 @@ class Db {
    }

    return entityDb.update((record) => record.id === entity.id, () => jsonEntity).then((results) => {
-      if (process.env.NODE_ENV !== 'production') {
-        Logger.debug(`[DB] Updated ${entityName}: ${results.updated} | Selected: ${results.selected}`)
-
-        if (!results.selected) {
-          entityDb.select(match => match.id == jsonEntity.id).then((results) => {
-            if (results.data.length) {
-              console.log('Said selected 0 but found it right here...', results.data[0].id)
-            } else {
-              console.log('Said selected 0 and no results for json entity id', jsonEntity.id)
-            }
-          })
-        }
-      } else {
      Logger.debug(`[DB] Updated ${entityName}: ${results.updated}`)
-      }
-
      var arrayKey = this.getEntityArrayKey(entityName)
      if (this[arrayKey]) {
        this[arrayKey] = this[arrayKey].map(e => {
--- a/server/objects/settings/LibrarySettings.js
+++ b/server/objects/settings/LibrarySettings.js
@ -1,8 +1,8 @@
 const { BookCoverAspectRatio } = require('../../utils/constants')
-const Logger = require('../../Logger')

 class LibrarySettings {
  constructor(settings) {
+    this.coverAspectRatio = BookCoverAspectRatio.SQUARE
    this.disableWatcher = false
    this.skipMatchingMediaWithAsin = false
    this.skipMatchingMediaWithIsbn = false
@ -13,6 +13,7 @@ class LibrarySettings {
  }

  construct(settings) {
+    this.coverAspectRatio = !isNaN(settings.coverAspectRatio) ? settings.coverAspectRatio : BookCoverAspectRatio.SQUARE
    this.disableWatcher = !!settings.disableWatcher
    this.skipMatchingMediaWithAsin = !!settings.skipMatchingMediaWithAsin
    this.skipMatchingMediaWithIsbn = !!settings.skipMatchingMediaWithIsbn
@ -20,6 +21,7 @@ class LibrarySettings {

  toJSON() {
    return {
+      coverAspectRatio: this.coverAspectRatio,
      disableWatcher: this.disableWatcher,
      skipMatchingMediaWithAsin: this.skipMatchingMediaWithAsin,
      skipMatchingMediaWithIsbn: this.skipMatchingMediaWithIsbn