Clean and parse author name from directory, sort by author last name, scan for covers

client/components/cards/BookCard.vue

@@ -2,7 +2,7 @@
   <nuxt-link :to="`/audiobook/${audiobookId}`" :style="{ height: height + 32 + 'px', width: width + 32 + 'px' }" class="cursor-pointer p-4">
     <div class="rounded-sm h-full overflow-hidden relative bookCard" @mouseover="isHovering = true" @mouseleave="isHovering = false">
       <div class="w-full relative" :style="{ height: width * 1.6 + 'px' }">
-        <cards-book-cover :audiobook="audiobook" />
+        <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" />
 
         <div v-show="isHovering" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-40">
           <div class="h-full flex items-center justify-center">
@@ -14,7 +14,6 @@
             <span class="material-icons" style="font-size: 16px">edit</span>
           </div>
         </div>
-
         <div class="absolute bottom-0 left-0 h-1 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
       </div>
       <ui-tooltip v-if="showError" :text="errorText" class="absolute top-4 left-0">
@@ -62,6 +61,25 @@ export default {
     author() {
       return this.book.author
     },
+    authorFL() {
+      return this.book.authorFL || this.author
+    },
+    authorLF() {
+      return this.book.authorLF || this.author
+    },
+    authorFormat() {
+      if (!this.orderBy || !this.orderBy.startsWith('book.author')) return null
+      return this.orderBy === 'book.authorLF' ? this.authorLF : this.authorFL
+    },
+    volumeNumber() {
+      return this.book.volumeNumber || null
+    },
+    orderBy() {
+      return this.$store.getters['user/getUserSetting']('orderBy')
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
     userProgressPercent() {
       return this.userProgress ? this.userProgress.progress || 0 : 0
     },

client/components/cards/BookCover.vue

@@ -8,6 +8,7 @@
         <p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
       </div>
     </div>
+
     <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div>
         <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
@@ -26,6 +27,7 @@ export default {
       type: Object,
       default: () => {}
     },
+    authorOverride: String,
     width: {
       type: Number,
       default: 120
@@ -36,6 +38,11 @@ export default {
       imageFailed: false
     }
   },
+  watch: {
+    cover() {
+      this.imageFailed = false
+    }
+  },
   computed: {
     book() {
       return this.audiobook.book || {}
@@ -50,6 +57,7 @@ export default {
       return this.title
     },
     author() {
+      if (this.authorOverride) return this.authorOverride
       return this.book.author || 'Unknown'
     },
     authorCleaned() {