From c07b527a1dae0b6808bd0f670c3dc179ee9a8381 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 16 Jan 2022 14:14:02 -0600
Subject: [PATCH] Fix:User accessible libraries #84

---
 components/bookshelf/LazyBookshelf.vue |  1 -
 layouts/default.vue                    |  3 +-
 pages/bookshelf/index.vue              | 12 ++---
 pages/downloads.vue                    | 71 ++++++++++++--------------
 plugins/sqlStore.js                    |  1 -
 store/audiobooks.js                    |  2 +-
 store/libraries.js                     | 12 +++--
 7 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/components/bookshelf/LazyBookshelf.vue b/components/bookshelf/LazyBookshelf.vue
index 2cdaf3eb..803a22d3 100644
--- a/components/bookshelf/LazyBookshelf.vue
+++ b/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)
diff --git a/layouts/default.vue b/layouts/default.vue
index 7a7667db..65cae499 100644
--- a/layouts/default.vue
+++ b/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()
diff --git a/pages/bookshelf/index.vue b/pages/bookshelf/index.vue
index 1fd132a7..3cf91544 100644
--- a/pages/bookshelf/index.vue
+++ b/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
diff --git a/pages/downloads.vue b/pages/downloads.vue
index b86a6ffe..dbd1d48a 100644
--- a/pages/downloads.vue
+++ b/pages/downloads.vue
@@ -31,26 +31,22 @@
           <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">
-              <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>
-                  <p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
-                </div>
-                <div class="flex-grow" />
-
-                <div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
-                  <span class="material-icons">refresh</span>
-                </div>
+          <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>
+                <p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
               </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)">
-              <modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" />
-            </li>
-          </template>
+              <div class="flex-grow" />
+
+              <div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
+                <span class="material-icons">refresh</span>
+              </div>
+            </div>
+          </li>
+          <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>
         </ul>
       </template>
       <template v-else>
@@ -62,29 +58,26 @@
           </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 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>
-                </div>
-                <div v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 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 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>
               </div>
-            </template>
-            <template v-for="mediaFile in mediaScanResults.files">
-              <div :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 v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 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>
-            </template>
-          </template>
+            </div>
+            <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>
+          </div>
         </div>
+      </template>
     </div>
   </div>
 </template>
diff --git a/plugins/sqlStore.js b/plugins/sqlStore.js
index a0e2e13b..7f8d5e5f 100644
--- a/plugins/sqlStore.js
+++ b/plugins/sqlStore.js
@@ -23,7 +23,6 @@ class StoreService {
   init() {
     this.platform = Capacitor.getPlatform()
     this.store = CapacitorDataStorageSqlite
-    console.log('in init ', this.platform)
   }
 
   /**
diff --git a/store/audiobooks.js b/store/audiobooks.js
index 7ea0078d..6c17bdc9 100644
--- a/store/audiobooks.js
+++ b/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)
diff --git a/store/libraries.js b/store/libraries.js
index 88338b3d..fcb50ee2 100644
--- a/store/libraries.js
+++ b/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
   },
 
 }