Support multi library 1.4.0

client/components/app/BookShelfToolbar.vue

@@ -81,14 +81,17 @@ export default {
       set(val) {
         this.$store.commit('audiobooks/setKeywordFilter', val)
       }
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
     }
   },
   methods: {
     searchBackArrow() {
-      this.$router.replace('/library')
+      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf`)
     },
     seriesBackArrow() {
-      this.$router.replace('/library/series')
+      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf/series`)
       this.$emit('update:selectedSeries', null)
     },
     updateOrder() {

client/components/app/StreamContainer.vue

@@ -63,12 +63,15 @@ export default {
     },
     playlistUrl() {
       return this.stream ? this.stream.clientPlaylistUri : null
+    },
+    libraryId() {
+      return this.streamAudiobook ? this.streamAudiobook.libraryId : null
     }
   },
   methods: {
     filterByAuthor() {
       if (this.$route.name !== 'index') {
-        this.$router.push('/library')
+        this.$router.push(`/library/${this.libraryId || this.$store.state.libraries.currentLibraryId}/bookshelf`)
       }
       var settingsUpdate = {
         filterBy: `authors.${this.$encode(this.author)}`

client/components/controls/GlobalSearch.vue

@@ -50,12 +50,15 @@ export default {
   computed: {
     audiobooks() {
       return this.$store.state.audiobooks.audiobooks
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
     }
   },
   methods: {
     submitSearch() {
       if (!this.search) return
-      this.$router.push(`/library/search?query=${this.search}`)
+      this.$router.push(`/library/${this.currentLibraryId}/bookshelf/search?query=${this.search}`)
 
       this.search = null
       this.items = []

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

@@ -33,7 +33,7 @@
             <template v-for="cover in localCovers">
               <div :key="cover.path" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.localPath === imageUrl ? 'border-yellow-300' : ''" @click="setCover(cover.localPath)">
                 <div class="h-24 bg-primary" style="width: 60px">
-                  <img :src="cover.localPath" class="h-full w-full object-contain" />
+                  <img :src="`${cover.localPath}?token=${userToken}`" class="h-full w-full object-contain" />
                 </div>
               </div>
             </template>
@@ -124,21 +124,31 @@ export default {
         this.$emit('update:processing', val)
       }
     },
+    audiobookId() {
+      return this.audiobook ? this.audiobook.id : null
+    },
     book() {
       return this.audiobook ? this.audiobook.book || {} : {}
     },
+    audiobookPath() {
+      return this.audiobook ? this.audiobook.path : null
+    },
     otherFiles() {
       return this.audiobook ? this.audiobook.otherFiles || [] : []
     },
     userCanUpload() {
       return this.$store.getters['user/getUserCanUpload']
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     localCovers() {
       return this.otherFiles
         .filter((f) => f.filetype === 'image')
         .map((file) => {
           var _file = { ...file }
-          _file.localPath = Path.join('local', _file.path)
+          var imgRelPath = _file.path.replace(this.audiobookPath, '')
+          _file.localPath = `/s/book/${this.audiobookId}${imgRelPath}`
           return _file
         })
     }

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

@@ -60,8 +60,8 @@
             <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 :disabled="libraryScan" text="(Root User Only) Rescan audiobook including metadata" direction="bottom" class="ml-4">
+            <ui-btn v-if="isRootUser" :loading="rescanning" :disabled="libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
           </ui-tooltip>
 
           <div class="flex-grow" />
@@ -138,6 +138,13 @@ export default {
     },
     series() {
       return this.$store.state.audiobooks.series
+    },
+    libraryId() {
+      return this.audiobook ? this.audiobook.libraryId : null
+    },
+    libraryScan() {
+      if (!this.libraryId) return null
+      return this.$store.getters['scanners/getLibraryScan'](this.libraryId)
     }
   },
   methods: {
@@ -207,6 +214,8 @@ export default {
       this.details.volumeNumber = this.book.volumeNumber
       this.details.publishYear = this.book.publishYear
 
+      console.log('INIT', this.details)
+
       this.newTags = this.audiobook.tags || []
     },
     resetProgress() {

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

@@ -13,7 +13,7 @@
         <th class="text-left">Duration</th>
         <th v-if="showDownload" class="text-center">Download</th>
       </tr>
-      <template v-for="track in tracks">
+      <template v-for="track in tracksCleaned">
         <tr :key="track.index">
           <td class="text-center">
             <p>{{ track.index }}</p>
@@ -28,7 +28,7 @@
             {{ $secondsToTimestamp(track.duration) }}
           </td>
           <td v-if="showDownload" class="font-mono text-center">
-            <a :href="`/local/${track.path}`" download><span class="material-icons icon-text">download</span></a>
+            <a :href="`/s/book/${audiobook.id}/${track.relativePath}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
           </td>
         </tr>
       </template>
@@ -59,6 +59,23 @@ export default {
     }
   },
   computed: {
+    audiobookPath() {
+      return this.audiobook.path
+    },
+    tracksCleaned() {
+      return this.tracks.map((track) => {
+        var trackPath = track.path.replace(/\\/g, '/')
+        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
+
+        return {
+          ...track,
+          relativePath: trackPath.replace(audiobookPath)
+        }
+      })
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },

client/components/modals/libraries/LibraryItem.vue

@@ -10,8 +10,8 @@
     <p class="text-xl font-book pl-4" :class="mouseover ? 'underline' : ''">{{ library.name }}</p>
     <div class="flex-grow" />
     <ui-btn v-show="mouseover && !libraryScan && canScan" small color="bg" @click.stop="scan">Scan</ui-btn>
-    <span v-show="mouseover && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4" @click.stop="editClick">edit</span>
-    <span v-show="mouseover && showEdit && canDelete" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50'" @click.stop="deleteClick">delete</span>
+    <span v-show="mouseover && !libraryScan && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4" @click.stop="editClick">edit</span>
+    <span v-show="!libraryScan && mouseover && showEdit && canDelete" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50'" @click.stop="deleteClick">delete</span>
   </div>
 </template>
 

client/components/tables/TracksTable.vue

@@ -21,7 +21,7 @@
             <th class="text-left">Duration</th>
             <th v-if="userCanDownload" class="text-center">Download</th>
           </tr>
-          <template v-for="track in tracks">
+          <template v-for="track in tracksCleaned">
             <tr :key="track.index">
               <td class="text-center">
                 <p>{{ track.index }}</p>
@@ -36,7 +36,7 @@
                 {{ $secondsToTimestamp(track.duration) }}
               </td>
               <td v-if="userCanDownload" class="text-center">
-                <a :href="`/local/${track.path}`" download><span class="material-icons icon-text">download</span></a>
+                <a :href="`/s/book/${audiobook.id}/${track.relativePath}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
               </td>
             </tr>
           </template>
@@ -53,7 +53,10 @@ export default {
       type: Array,
       default: () => []
     },
-    audiobookId: String
+    audiobook: {
+      type: Object,
+      default: () => null
+    }
   },
   data() {
     return {
@@ -61,6 +64,26 @@ export default {
     }
   },
   computed: {
+    audiobookId() {
+      return this.audiobook.id
+    },
+    audiobookPath() {
+      return this.audiobook.path
+    },
+    tracksCleaned() {
+      return this.tracks.map((track) => {
+        var trackPath = track.path.replace(/\\/g, '/')
+        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
+
+        return {
+          ...track,
+          relativePath: trackPath.replace(audiobookPath)
+        }
+      })
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },

client/components/ui/Dropdown.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="relative w-44" v-click-outside="clickOutside">
+  <div class="relative w-full" 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">
+    <button type="button" :disabled="disabled" class="relative h-10 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="clickShowMenu">
       <span class="flex items-center">
         <span class="block truncate">{{ selectedText }}</span>
       </span>
@@ -11,11 +11,11 @@
     </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">
+      <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 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>
+              <span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
             </div>
           </li>
         </template>
@@ -35,7 +35,8 @@ export default {
     items: {
       type: Array,
       default: () => []
-    }
+    },
+    disabled: Boolean
   },
   data() {
     return {
@@ -59,6 +60,10 @@ export default {
     }
   },
   methods: {
+    clickShowMenu() {
+      if (this.disabled) return
+      this.showMenu = !this.showMenu
+    },
     clickOutside() {
       this.showMenu = false
     },

client/components/ui/Tooltip.vue

@@ -20,6 +20,7 @@ export default {
   data() {
     return {
       tooltip: null,
+      tooltipId: null,
       isShowing: false
     }
   },
@@ -45,13 +46,14 @@ export default {
         'font-size': '0.75rem'
       }
       var size = this.$calculateTextSize(this.text, styles)
-      console.log('Text Size', size.width, size.height)
       return size.width
     },
     createTooltip() {
       if (!this.$refs.box) return
       var tooltip = document.createElement('div')
-      tooltip.className = 'absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs'
+      this.tooltipId = String(Math.floor(Math.random() * 10000))
+      tooltip.id = this.tooltipId
+      tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs'
       tooltip.style.zIndex = 100
       tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
       tooltip.innerHTML = this.text
@@ -91,8 +93,14 @@ export default {
       if (this.disabled) return
       if (!this.tooltip) {
         this.createTooltip()
+        if (!this.tooltip) return
+      }
+      if (!this.$refs.box) return // Ensure element is not destroyed
+      try {
+        document.body.appendChild(this.tooltip)
+      } catch (error) {
+        console.error(error)
       }
-      document.body.appendChild(this.tooltip)
       this.isShowing = true
     },
     hideTooltip() {