Fix:User accessible libraries #84

components/bookshelf/LazyBookshelf.vue

@@ -319,7 +319,6 @@ export default {
       if (this.isFirstInit) return
       this.isFirstInit = true
       this.initSizeData()
-
       await this.loadPage(0)
       var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
       this.mountEntites(0, lastBookIndex)

layouts/default.vue

@@ -56,7 +56,8 @@ export default {
         this.initSocketListeners()
 
         // Load libraries
-        this.$store.dispatch('libraries/load')
+        await this.$store.dispatch('libraries/load')
+        this.$eventBus.$emit('library-changed')
         this.$store.dispatch('libraries/fetch', this.currentLibraryId)
       } else {
         this.removeSocketListeners()

pages/bookshelf/index.vue

@@ -18,10 +18,7 @@
             <span class="material-icons text-error text-lg">cloud_off</span>
             <p class="pl-2 text-error text-sm">Audiobookshelf server not connected.</p>
           </div>
-          <p class="px-4 text-center text-error absolute bottom-12 left-0 right-0 mx-auto">
-            <strong>Important!</strong> This app requires that you are running
-            <u>your own server</u> and does not provide any content.
-          </p>
+          <p class="px-4 text-center text-error absolute bottom-12 left-0 right-0 mx-auto"><strong>Important!</strong> This app requires that you are running <u>your own server</u> and does not provide any content.</p>
         </div>
         <div class="flex justify-center">
           <ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32">Connect</ui-btn>
@@ -136,7 +133,7 @@ export default {
       this.shelves = categories
     },
     async socketInit(isConnected) {
-      if (isConnected) {
+      if (isConnected && this.currentLibraryId) {
         console.log('Connected - Load from server')
         await this.fetchCategories()
       } else {
@@ -146,8 +143,7 @@ export default {
       this.loading = false
     },
     async libraryChanged(libid) {
-      console.log('Library changed', libid)
-      if (this.isSocketConnected) {
+      if (this.isSocketConnected && this.currentLibraryId) {
         await this.fetchCategories()
       } else {
         this.shelves = this.downloadOnlyShelves
@@ -246,7 +242,7 @@ export default {
   },
   mounted() {
     this.initListeners()
-    if (this.$server.initialized) {
+    if (this.$server.initialized && this.currentLibraryId) {
       this.fetchCategories()
     } else {
       this.shelves = this.downloadOnlyShelves

pages/downloads.vue

@@ -31,8 +31,7 @@
           <p>No Downloads</p>
         </div>
         <ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-          <template v-for="download in downloadsDownloading">
-            <li :key="download.id" class="text-gray-400 select-none relative px-4 py-5 border-b border-white border-opacity-10 bg-black bg-opacity-10">
+          <li v-for="download in downloadsDownloading" :key="download.id" class="text-gray-400 select-none relative px-4 py-5 border-b border-white border-opacity-10 bg-black bg-opacity-10">
             <div class="flex items-center justify-center">
               <div class="w-3/4">
                 <span class="text-xs">({{ downloadingProgress[download.id] || 0 }}%) {{ download.isPreparing ? 'Preparing' : 'Downloading' }}...</span>
@@ -45,12 +44,9 @@
               </div>
             </div>
           </li>
-          </template>
-          <template v-for="download in downloadsReady">
-            <li :key="download.id" class="text-gray-50 select-none relative pr-4 pl-2 py-5 border-b border-white border-opacity-10" @click="jumpToAudiobook(download)">
+          <li v-for="download in downloadsReady" :key="download.id" class="text-gray-50 select-none relative pr-4 pl-2 py-5 border-b border-white border-opacity-10" @click="jumpToAudiobook(download)">
             <modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" />
           </li>
-          </template>
         </ul>
       </template>
       <template v-else>
@@ -62,9 +58,8 @@
           </div>
           <p v-if="isScanning" class="text-center my-8">Scanning Folder..</p>
           <p v-else-if="!mediaScanResults" class="text-center my-8">No Files Found</p>
-          <template v-else>
-            <template v-for="mediaFolder in mediaScanResults.folders">
-              <div :key="mediaFolder.uri" class="w-full px-2 py-2">
+          <div v-else>
+            <div v-for="mediaFolder in mediaScanResults.folders" :key="mediaFolder.uri" class="w-full px-2 py-2">
               <div class="flex items-center">
                 <span class="material-icons text-base text-white text-opacity-50">folder</span>
                 <p class="ml-1 py-0.5">{{ mediaFolder.name }}</p>
@@ -74,18 +69,16 @@
                 <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
               </div>
             </div>
-            </template>
-            <template v-for="mediaFile in mediaScanResults.files">
-              <div :key="mediaFile.uri" class="w-full px-2 py-2">
+            <div v-for="mediaFile in mediaScanResults.files" :key="mediaFile.uri" class="w-full px-2 py-2">
               <div class="flex items-center">
                 <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
                 <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
               </div>
             </div>
-            </template>
-          </template>
           </div>
         </div>
+      </template>
+    </div>
   </div>
 </template>
 

plugins/sqlStore.js

@@ -23,7 +23,6 @@ class StoreService {
   init() {
     this.platform = Capacitor.getPlatform()
     this.store = CapacitorDataStorageSqlite
-    console.log('in init ', this.platform)
   }
 
   /**

store/audiobooks.js

@@ -18,7 +18,7 @@ export const getters = {
       console.error('No book item id', bookItem)
     }
     if (process.env.NODE_ENV !== 'production') { // Testing
-      return `http://localhost:3333/api/books/${bookItem.id}/cover?token=${userToken}&ts=${bookLastUpdate}`
+      // return `http://localhost:3333/api/books/${bookItem.id}/cover?token=${userToken}&ts=${bookLastUpdate}`
     }
 
     var url = new URL(`/api/books/${bookItem.id}/cover`, rootState.serverUrl)

store/libraries.js

@@ -2,7 +2,7 @@ export const state = () => ({
   libraries: [],
   lastLoad: 0,
   listeners: [],
-  currentLibraryId: 'main',
+  currentLibraryId: '',
   showModal: false,
   folders: [],
   folderLastUpdate: 0,
@@ -65,17 +65,23 @@ export const actions = {
       return false
     }
 
-    this.$axios
+    return this.$axios
       .$get(`/api/libraries`)
       .then((data) => {
+        // Set current library
+        if (data.length) {
+          commit('setCurrentLibrary', data[0].id)
+        }
+
         commit('set', data)
         commit('setLastLoad')
+        return true
       })
       .catch((error) => {
         console.error('Failed', error)
         commit('set', [])
+        return false
       })
-    return true
   },
 
 }