Merge branch 'master' of https://github.com/advplyr/audiobookshelf

client/components/app/Appbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-40">
+    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
       <div class="flex h-full items-center">
         <img v-if="!showBack" src="/Logo48.png" class="w-10 h-10 md:w-12 md:h-12 mr-4" />
         <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">

client/components/app/BookShelfToolbar.vue

@@ -11,7 +11,7 @@
         <p>Series</p>
       </nuxt-link>
     </div>
-    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-20 flex items-center px-2 md:px-8">
+    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center px-2 md:px-8">
       <template v-if="page !== 'search' && !isHome">
         <p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
         <div v-else class="items-center hidden md:flex">

client/components/app/SideRail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-20 bg-bg h-full relative box-shadow-side z-30" style="min-width: 80px">
+  <div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px">
     <div class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
     <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">

client/components/controls/OrderSelect.vue

@@ -7,7 +7,7 @@
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
       <template v-for="item in items">
         <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
           <div class="flex items-center">

client/components/modals/libraries/LibraryItem.vue

@@ -10,6 +10,7 @@
     <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
     <div class="flex-grow" />
     <ui-btn v-show="isHovering && !libraryScan && canScan" small color="bg" @click.stop="scan">Scan</ui-btn>
+    <ui-btn v-show="isHovering && !libraryScan && canScan" small color="bg" class="ml-2" @click.stop="forceScan">Force Re-Scan</ui-btn>
     <span v-show="isHovering && !libraryScan && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
     <span v-show="!libraryScan && isHovering && showEdit && canDelete && !isDeleting" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50 cursor-pointer'" @click.stop="deleteClick">delete</span>
     <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
@@ -58,15 +59,15 @@ export default {
     }
   },
   methods: {
-    itemClicked() {
-      // this.$emit('click', this.library)
-    },
     editClick() {
       this.$emit('edit', this.library)
     },
     scan() {
       this.$root.socket.emit('scan', this.library.id)
     },
+    forceScan() {
+      this.$root.socket.emit('scan', this.library.id, { forceRescan: true })
+    },
     deleteClick() {
       if (this.isMain) return
       if (confirm(`Are you sure you want to permanently delete library "${this.library.name}"?`)) {

client/components/tables/LibrariesTable.vue

@@ -6,14 +6,16 @@
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
     </div>
-    <draggable v-model="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
-      <!-- <transition-group type="transition" :name="!drag ? 'flip-list' : null"> -->
+    <draggable :list="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
       <template v-for="library in libraryCopies">
-        <modals-libraries-library-item :key="library.id" :library="library" :selected="currentLibraryId === library.id" :show-edit="true" :dragging="drag" @edit="editLibrary" @click="setLibrary" class="item" />
+        <div :key="library.id" class="item">
+          <modals-libraries-library-item :library="library" :selected="currentLibraryId === library.id" :show-edit="true" :dragging="drag" @edit="editLibrary" @sort="draggableSort" @click="setLibrary" />
+        </div>
       </template>
-      <!-- </transition-group> -->
     </draggable>
     <modals-edit-library-modal v-model="showLibraryModal" :library="selectedLibrary" />
+
+    <p class="text-xs mt-4 text-gray-200">*<strong>Force Re-Scan</strong> will scan all files again like a fresh scan. Audio file ID3 tags, OPF files, and text files will be probed/parsed and used for book details.</p>
   </div>
 </template>
 
@@ -48,6 +50,9 @@ export default {
     },
     libraries() {
       return this.$store.getters['libraries/getSortedLibraries']()
+    },
+    libraryScans() {
+      return this.$store.state.scanners.libraryScans
     }
   },
   methods: {
@@ -55,10 +60,9 @@ export default {
       this.drag = true
       clearTimeout(this.orderTimeout)
     },
-    endDrag() {
+    endDrag(e) {
       this.drag = false
       this.checkOrder()
-      console.log('DRAG END')
     },
     checkOrder() {
       clearTimeout(this.orderTimeout)
@@ -78,7 +82,7 @@ export default {
       })
       var newOrder = libraryOrderData.map((lib) => lib.id).join(',')
       if (currOrder !== newOrder) {
-        this.$axios.$patch('/api/libraries/order', libraryOrderData).then((libraries) => {
+        this.$axios.$post('/api/libraries/order', libraryOrderData).then((libraries) => {
           if (libraries && libraries.length) {
             this.$toast.success('Library order saved', { timeout: 1500 })
             this.$store.commit('libraries/set', libraries)

client/store/libraries.js

@@ -210,7 +210,7 @@ export const mutations = {
     }
     if (audiobook.book.genres && audiobook.book.genres.length) {
       audiobook.book.genres.forEach((genre) => {
-        if (tag && !state.filterData.genres.includes(genre)) state.filterData.genres.push(genre)
+        if (genre && !state.filterData.genres.includes(genre)) state.filterData.genres.push(genre)
       })
     }
   }