Parse and update author name on each update

client/components/modals/edit-tabs/Details.vue

@@ -115,6 +115,9 @@ export default {
   },
   methods: {
     async submitForm() {
+      if (this.isProcessing) {
+        return
+      }
       this.isProcessing = true
       const updatePayload = {
         book: this.details,

client/components/ui/Tooltip.vue

@@ -10,6 +10,10 @@ export default {
     text: {
       type: String,
       required: true
+    },
+    direction: {
+      type: String,
+      default: 'right'
     }
   },
   data() {
@@ -21,11 +25,17 @@ export default {
   methods: {
     createTooltip() {
       var boxChow = this.$refs.box.getBoundingClientRect()
-      var top = boxChow.top
-      var left = boxChow.left + boxChow.width + 4
-
+      var top = 0
+      var left = 0
+      if (this.direction === 'right') {
+        top = boxChow.top
+        left = boxChow.left + boxChow.width + 4
+      } else if (this.direction === 'bottom') {
+        top = boxChow.top + boxChow.height + 4
+        left = boxChow.left
+      }
       var tooltip = document.createElement('div')
-      tooltip.className = 'absolute px-2 bg-black bg-opacity-60 py-1 text-white pointer-events-none text-xs'
+      tooltip.className = 'absolute px-2 bg-black bg-opacity-90 py-1 text-white pointer-events-none text-xs rounded shadow-lg'
       tooltip.style.top = top + 'px'
       tooltip.style.left = left + 'px'
       tooltip.style.zIndex = 100

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "0.9.74-beta",
+  "version": "0.9.75-beta",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {

client/pages/audiobook/_id/index.vue

@@ -13,7 +13,9 @@
             <div class="mb-2">
               <h1 class="text-2xl font-book leading-7">{{ title }}</h1>
               <h3 v-if="series" class="font-book text-gray-300 text-lg leading-7">{{ seriesText }}</h3>
-              <p class="text-sm text-gray-100 leading-7">by {{ author }}</p>
+              <ui-tooltip :text="authorTooltipText" direction="bottom">
+                <p class="text-sm text-gray-100 leading-7">by {{ author }}</p>
+              </ui-tooltip>
             </div>
             <div class="flex-grow" />
           </div>
@@ -137,6 +139,16 @@ export default {
     author() {
       return this.book.author || 'Unknown'
     },
+    authorFL() {
+      return this.book.authorFL
+    },
+    authorLF() {
+      return this.book.authorLF
+    },
+    authorTooltipText() {
+      var txt = ['FL: ' + this.authorFL || 'Not Set', 'LF: ' + this.authorLF || 'Not Set']
+      return txt.join('\n')
+    },
     series() {
       return this.book.series || null
     },