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

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
+      return this.coverAspectRatio == 1
-    },
-    bookCoverAspectRatio() {
-      return this.isCoverSquareAspectRatio ? 1 : 1.6
     },
     sizeMultiplier() {
       var baseSize = this.isCoverSquareAspectRatio ? 192 : 120

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'
     },

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')
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
     },
     bookCoverWidth() {
       return 88
     },
     bookCoverPosTop() {
-      if (this.bookCoverAspectRatio === 1) return -10
+      if (this.coverAspectRatio == 1) return -10
       return -64
     },
     cover() {
@@ -367,7 +364,7 @@ export default {
         if (payload.startTime !== null && !isNaN(payload.startTime)) {
           this.seek(payload.startTime)
         } else {
-           this.playerHandler.play()
+          this.playerHandler.play()
         }
         return
       }

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

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

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 || {}

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

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

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

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

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: {},

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

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

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

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

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

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
       }

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
     },

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

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" />

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

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

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
   }
 }
 

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}`)
-        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 => {

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