logLevel as server setting, logger config page, re-scan audiobook option, fix embedded cover extraction, flac and mobi support, fix series bookshelf not wrapping

client/components/AudioPlayer.vue

@@ -440,7 +440,7 @@ export default {
         })
 
         this.hlsInstance.on(Hls.Events.ERROR, (e, data) => {
-          console.error('[HLS] Error', data.type, data.details)
+          console.error('[HLS] Error', data.type, data.details, data)
           if (data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
             console.error('[HLS] BUFFER STALLED ERROR')
           }

client/components/app/BookShelf.vue

@@ -102,7 +102,8 @@ export default {
       return 16 * this.sizeMultiplier
     },
     bookWidth() {
-      return this.bookCoverWidth + this.paddingX * 2
+      var _width = this.bookCoverWidth + this.paddingX * 2
+      return this.showGroups ? _width * 1.6 : _width
     },
     isSelectionMode() {
       return this.$store.getters['getNumAudiobooksSelected']
@@ -161,6 +162,7 @@ export default {
     setBookshelfEntities() {
       this.wrapperClientWidth = this.$refs.wrapper.clientWidth
       var width = Math.max(0, this.wrapperClientWidth - this.rowPaddingX * 2)
+
       var booksPerRow = Math.floor(width / this.bookWidth)
 
       var entities = this.entities

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

@@ -56,10 +56,14 @@
         <div class="flex px-4">
           <ui-btn v-if="userCanDelete" color="error" type="button" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
 
-          <ui-tooltip text="(Root User Only) Save a NFO metadata file in your audiobooks directory" class="mx-4">
+          <ui-tooltip text="(Root User Only) Save a NFO metadata file in your audiobooks directory" direction="bottom" class="ml-4">
             <ui-btn v-if="isRootUser" :loading="savingMetadata" color="bg" type="button" class="h-full" small @click.stop.prevent="saveMetadata">Save Metadata</ui-btn>
           </ui-tooltip>
 
+          <ui-tooltip text="(Root User Only) Rescan audiobook including metadata" direction="bottom" class="ml-4">
+            <ui-btn v-if="isRootUser" :loading="rescanning" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
+          </ui-tooltip>
+
           <div class="flex-grow" />
           <ui-btn type="submit">Submit</ui-btn>
         </div>
@@ -93,7 +97,8 @@ export default {
       newTags: [],
       resettingProgress: false,
       isScrollable: false,
-      savingMetadata: false
+      savingMetadata: false,
+      rescanning: false
     }
   },
   watch: {
@@ -136,6 +141,23 @@ export default {
     }
   },
   methods: {
+    audiobookScanComplete(result) {
+      this.rescanning = false
+      if (!result) {
+        this.$toast.error(`Re-Scan Failed for "${this.title}"`)
+      } else if (result === 'UPDATED') {
+        this.$toast.success(`Re-Scan complete audiobook was updated`)
+      } else if (result === 'UPTODATE') {
+        this.$toast.success(`Re-Scan complete audiobook was up to date`)
+      } else if (result === 'REMOVED') {
+        this.$toast.error(`Re-Scan complete audiobook was removed`)
+      }
+    },
+    rescan() {
+      this.rescanning = true
+      this.$root.socket.once('audiobook_scan_complete', this.audiobookScanComplete)
+      this.$root.socket.emit('scan_audiobook', this.audiobookId)
+    },
     saveMetadataComplete(result) {
       this.savingMetadata = false
       if (result.error) {

client/components/ui/Dropdown.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="relative w-44" v-click-outside="clickOutside">
+    <p class="text-sm text-opacity-75 mb-1">{{ label }}</p>
+    <button type="button" class="relative w-full bg-fg border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="showMenu = !showMenu">
+      <span class="flex items-center">
+        <span class="block truncate">{{ selectedText }}</span>
+      </span>
+      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <span class="material-icons text-gray-100">chevron_down</span>
+      </span>
+    </button>
+
+    <transition name="menu">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3">
+        <template v-for="item in items">
+          <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal ml-3 block truncate font-sans">{{ item.text }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    label: {
+      type: String,
+      default: ''
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showMenu: false
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedItem() {
+      return this.items.find((i) => i.value === this.selected)
+    },
+    selectedText() {
+      return this.selectedItem ? this.selectedItem.text : ''
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(itemValue) {
+      this.selected = itemValue
+      this.showMenu = false
+    }
+  },
+  mounted() {}
+}
+</script>