Add:Experimental authors page layout #187,Add:Square covers #210

client/pages/audiobook/_id/index.vue

@@ -4,7 +4,7 @@
       <div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
         <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 208px">
           <div class="relative" style="height: fit-content">
-            <covers-book-cover :audiobook="audiobook" :width="bookCoverWidth" />
+            <covers-book-cover :audiobook="audiobook" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
             <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 208 * progressPercent + 'px' }"></div>
           </div>
         </div>
@@ -190,6 +190,12 @@ export default {
     }
   },
   computed: {
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    bookCoverAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+    },
     bookCoverWidth() {
       return this.windowWidth < 800 ? 176 : 208
     },

client/pages/batch/index.vue

@@ -4,7 +4,7 @@
       <template v-for="audiobook in audiobookCopies">
         <div :key="audiobook.id" class="w-full max-w-3xl border border-black-300 p-6 -ml-px -mt-px flex">
           <div class="w-32">
-            <covers-book-cover :audiobook="audiobook.originalAudiobook" :width="120" />
+            <covers-book-cover :audiobook="audiobook.originalAudiobook" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
           </div>
           <div class="flex-grow pl-4">
             <ui-text-input-with-label v-model="audiobook.book.title" label="Title" />
@@ -86,6 +86,12 @@ export default {
     }
   },
   computed: {
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    bookCoverAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+    },
     streamAudiobook() {
       return this.$store.state.streamAudiobook
     },

client/pages/collection/_id.vue

@@ -4,7 +4,7 @@
       <div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
         <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 240px">
           <div class="relative" style="height: fit-content">
-            <covers-collection-cover :book-items="bookItems" :width="240" :height="120 * 1.6" />
+            <covers-collection-cover :book-items="bookItems" :width="240" :height="120 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
           </div>
         </div>
         <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
@@ -66,6 +66,9 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
     streamAudiobook() {
       return this.$store.state.streamAudiobook
     },

client/pages/config/index.vue

@@ -65,13 +65,6 @@
       </a>
     </div>
 
-    <div v-if="showExperimentalFeatures" class="h-0.5 bg-primary bg-opacity-30 w-full" />
-
-    <div v-if="showExperimentalFeatures" class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 my-8">
-      <p>Experimental Bookshelf Texture</p>
-      <div class="flex"></div>
-    </div>
-
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
 
     <div class="py-12 mb-4 opacity-60 hover:opacity-100">

client/pages/config/users/_id.vue

@@ -43,7 +43,7 @@
           </tr>
           <tr v-for="ab in userAudiobooks" :key="ab.audiobookId" :class="!ab.isRead ? '' : 'isRead'">
             <td>
-              <covers-book-cover :width="50" :audiobook="ab" />
+              <covers-book-cover :width="50" :audiobook="ab" :book-cover-aspect-ratio="bookCoverAspectRatio" />
             </td>
             <td class="font-book">
               <p>{{ ab.book ? ab.book.title : ab.audiobookTitle || 'Unknown' }}</p>
@@ -87,6 +87,12 @@ export default {
     }
   },
   computed: {
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    bookCoverAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+    },
     showExperimentalFeatures() {
       return this.$store.state.showExperimentalFeatures
     },

client/pages/library/_library/authors/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="page" :class="streamAudiobook ? 'streaming' : ''">
+    <div class="flex h-full">
+      <app-side-rail class="hidden md:block" />
+      <div class="flex-grow">
+        <app-book-shelf-toolbar is-home />
+        <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
+          <div class="flex flex-wrap justify-center">
+            <template v-for="author in authors">
+              <nuxt-link :key="author.name" :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.name)}`">
+                <cards-author-card :author="author" :width="160" :height="160" class="p-3" />
+              </nuxt-link>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, params, redirect, query, app }) {
+    var libraryId = params.library
+    var library = await store.dispatch('libraries/fetch', libraryId)
+    if (!library) {
+      return redirect('/oops?message=Library not found')
+    }
+
+    return {
+      libraryId
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      authors: []
+    }
+  },
+  computed: {
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    async init() {
+      this.authors = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/authors`).catch((error) => {
+        console.error('Failed to load authors', error)
+        return []
+      })
+      this.loading = false
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/pages/library/_library/bookshelf/_id.vue

@@ -23,11 +23,6 @@ export default {
     if (query.filter) {
       store.dispatch('user/updateUserSettings', { filterBy: query.filter })
     }
-
-    // if (libraryPage === 'collections') {
-    //   store.dispatch('user/loadUserCollections')
-    // }
-
     return {
       id: params.id || '',
       libraryId