Add:Lazy bookshelf

pages/bookshelf.vue

@@ -2,31 +2,12 @@
   <div class="w-full h-full">
     <home-bookshelf-nav-bar />
     <home-bookshelf-toolbar v-show="!isHome" />
-    <div class="main-content overflow-y-auto overflow-x-hidden relative" :class="isHome ? 'home-page' : ''">
+    <div id="bookshelf-wrapper" class="main-content overflow-y-auto overflow-x-hidden relative" :class="isHome ? 'home-page' : ''">
       <nuxt-child />
 
-      <div v-if="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+      <!-- <div v-if="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
         <ui-loading-indicator />
-      </div>
-      <div v-else-if="!audiobooks.length" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
-        <div>
-          <p class="mb-4 text-center text-xl">
-            Bookshelf empty<span v-show="isSocketConnected">
-              for library <strong>{{ currentLibraryName }}</strong></span
-            >
-          </p>
-          <div class="w-full" v-if="!isSocketConnected">
-            <div class="flex justify-center items-center mb-3">
-              <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>
-          </div>
-          <div class="flex justify-center">
-            <ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32"> Connect </ui-btn>
-          </div>
-        </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -40,12 +21,6 @@ export default {
     isHome() {
       return this.$route.name === 'bookshelf'
     },
-    isLoading() {
-      return this.$store.state.audiobooks.isLoading
-    },
-    audiobooks() {
-      return this.$store.state.audiobooks.audiobooks
-    },
     currentLibrary() {
       return this.$store.getters['libraries/getCurrentLibrary']
     },
@@ -57,35 +32,23 @@ export default {
     }
   },
   methods: {
-    async loadAudiobooks() {
-      var currentLibrary = await this.$localStore.getCurrentLibrary()
-      if (currentLibrary) {
-        this.$store.commit('libraries/setCurrentLibrary', currentLibrary.id)
-      }
-      this.$store.dispatch('audiobooks/load')
-    },
     async loadCollections() {
       this.$store.dispatch('user/loadUserCollections')
     },
     socketConnected(isConnected) {
-      if (isConnected) {
-        console.log('Connected - Load from server')
-        this.loadAudiobooks()
-        if (this.$route.name === 'bookshelf-collections') this.loadCollections()
-      } else {
-        console.log('Disconnected - Reset to local storage')
-        this.$store.commit('audiobooks/reset')
-        this.$store.dispatch('audiobooks/useDownloaded')
-      }
+      // if (isConnected) {
+      //   console.log('Connected - Load from server')
+      // this.loadAudiobooks()
+      //   if (this.$route.name === 'bookshelf-collections') this.loadCollections()
+      // } else {
+      //   console.log('Disconnected - Reset to local storage')
+      //   this.$store.commit('audiobooks/reset')
+      //   this.$store.dispatch('audiobooks/useDownloaded')
+      // }
     }
   },
   mounted() {
     this.$server.on('connected', this.socketConnected)
-    if (this.$server.connected) {
-      this.loadAudiobooks()
-    } else {
-      console.log('Bookshelf - Server not connected using downloaded')
-    }
   },
   beforeDestroy() {
     this.$server.off('connected', this.socketConnected)
@@ -97,6 +60,7 @@ export default {
 .main-content {
   max-height: calc(100% - 72px);
   min-height: calc(100% - 72px);
+  max-width: 100vw;
 }
 .main-content.home-page {
   max-height: calc(100% - 36px);

pages/bookshelf/collections.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="w-full h-full">
+  <bookshelf-lazy-bookshelf page="collections" />
+  <!-- <div class="w-full h-full">
     <template v-for="(shelf, index) in shelves">
       <bookshelf-group-shelf :key="shelf.id" group-type="collection" :groups="shelf.groups" :style="{ zIndex: shelves.length - index }" />
     </template>
-  </div>
+  </div> -->
 </template>
 
 <script>

pages/bookshelf/index.vue

@@ -1,8 +1,28 @@
 <template>
   <div class="w-full h-full">
     <template v-for="(shelf, index) in shelves">
-      <bookshelf-shelf :key="shelf.id" :label="shelf.label" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
+      <bookshelf-shelf :key="shelf.id" :label="shelf.label" :entities="shelf.entities" :type="shelf.type" :style="{ zIndex: shelves.length - index }" />
     </template>
+
+    <div v-if="!shelves.length" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+      <div>
+        <p class="mb-4 text-center text-xl">
+          Bookshelf empty<span v-show="isSocketConnected">
+            for library <strong>{{ currentLibraryName }}</strong></span
+          >
+        </p>
+        <div class="w-full" v-if="!isSocketConnected">
+          <div class="flex justify-center items-center mb-3">
+            <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>
+        </div>
+        <div class="flex justify-center">
+          <ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32"> Connect </ui-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,13 +30,19 @@
 export default {
   data() {
     return {
-      settings: {}
+      shelves: [],
+      loading: true
     }
   },
   computed: {
     books() {
-      // return this.$store.getters['audiobooks/getFilteredAndSorted']()
-      return this.$store.state.audiobooks.audiobooks
+      return this.$store.getters['downloads/getAudiobooks']
+    },
+    isSocketConnected() {
+      return this.$store.state.socketConnected
+    },
+    currentLibraryName() {
+      return this.$store.getters['libraries/getCurrentLibraryName']
     },
     booksWithUserAbData() {
       var books = this.books.map((b) => {
@@ -50,14 +76,15 @@ export default {
         })
       return books.slice(0, 10)
     },
-    shelves() {
+    downloadOnlyShelves() {
       var shelves = []
 
       if (this.booksCurrentlyReading.length) {
         shelves.push({
           id: 'recent',
           label: 'Continue Reading',
-          books: this.booksCurrentlyReading
+          type: 'books',
+          entities: this.booksCurrentlyReading
         })
       }
 
@@ -65,7 +92,8 @@ export default {
         shelves.push({
           id: 'added',
           label: 'Recently Added',
-          books: this.booksRecentlyAdded
+          type: 'books',
+          entities: this.booksRecentlyAdded
         })
       }
 
@@ -73,22 +101,58 @@ export default {
         shelves.push({
           id: 'read',
           label: 'Read Again',
-          books: this.booksRead
+          type: 'books',
+          entities: this.booksRead
         })
       }
       return shelves
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
     }
   },
   methods: {
-    async init() {
-      this.settings = { ...this.$store.state.user.settings }
-
-      // var bookshelfView = await this.$localStore.getBookshelfView()
-      // this.isListView = bookshelfView === 'list'
-      // this.bookshelfReady = true
-      // console.log('Bookshelf view', bookshelfView)
+    async fetchCategories() {
+      var categories = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/categories`)
+        .then((data) => {
+          return data
+        })
+        .catch((error) => {
+          console.error('Failed to fetch categories', error)
+          return []
+        })
+      this.shelves = categories
+    },
+    async socketInit(isConnected) {
+      if (isConnected) {
+        console.log('Connected - Load from server')
+        await this.fetchCategories()
+      } else {
+        console.log('Disconnected - Reset to local storage')
+        this.shelves = this.downloadOnlyShelves
+      }
+      this.loading = false
+    },
+    async libraryChanged(libid) {
+      console.log('Library changed', libid)
+      if (this.isSocketConnected) {
+        await this.fetchCategories()
+      } else {
+        this.shelves = this.downloadOnlyShelves
+      }
     }
   },
-  mounted() {}
+  mounted() {
+    this.$server.on('initialized', this.socketInit)
+    this.$eventBus.$on('library-changed', this.libraryChanged)
+    if (this.$server.initialized) {
+      this.fetchCategories()
+    }
+  },
+  beforeDestroy() {
+    this.$server.off('initialized', this.socketInit)
+    this.$eventBus.$off('library-changed', this.libraryChanged)
+  }
 }
 </script>

pages/bookshelf/library.vue

@@ -1,78 +1,14 @@
 <template>
-  <div class="w-full h-full">
-    <div class="w-full h-full" v-show="!isListView">
-      <template v-for="(shelf, index) in shelves">
-        <bookshelf-library-shelf :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
-      </template>
-    </div>
-    <div class="w-full h-full px-4 py-2" v-show="isListView">
-      <template v-for="book in books">
-        <app-bookshelf-list-row :key="book.id" :audiobook="book" :page-width="pageWidth" class="my-2" />
-      </template>
-    </div>
-    <div v-show="!books.length && hasFilters" class="w-full py-16 text-center text-xl">
-      <div class="py-4">No Books</div>
-      <ui-btn @click="clearFilter">Clear Filter</ui-btn>
-    </div>
-  </div>
+  <bookshelf-lazy-bookshelf page="books" />
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      booksPerRow: 3,
-      pageWidth: 0
+  asyncData({ store, params, query }) {
+    // Set filter by
+    if (query.filter) {
+      store.dispatch('user/updateUserSettings', { mobileFilterBy: query.filter })
     }
-  },
-  computed: {
-    bookshelfView() {
-      return this.$store.state.bookshelfView
-    },
-    hasFilters() {
-      return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
-    },
-    isListView() {
-      return this.bookshelfView === 'list'
-    },
-    books() {
-      return this.$store.getters['audiobooks/getFilteredAndSorted']()
-    },
-    shelves() {
-      var shelves = []
-      var shelf = {
-        id: 0,
-        books: []
-      }
-      for (let i = 0; i < this.books.length; i++) {
-        var shelfNum = Math.floor((i + 1) / this.booksPerRow)
-        shelf.id = shelfNum
-        shelf.books.push(this.books[i])
-
-        if ((i + 1) % this.booksPerRow === 0) {
-          shelves.push(shelf)
-          shelf = {
-            id: 0,
-            books: []
-          }
-        }
-      }
-      if (shelf.books.length) {
-        shelf.id++
-        shelves.push(shelf)
-      }
-      return shelves
-    }
-  },
-  methods: {
-    clearFilter() {
-      this.$store.dispatch('user/updateUserSettings', {
-        mobileFilterBy: 'all'
-      })
-    }
-  },
-  mounted() {
-    this.pageWidth = window.innerWidth
   }
 }
 </script>

pages/bookshelf/series/_id.vue

@@ -0,0 +1,19 @@
+<template>
+  <bookshelf-lazy-bookshelf page="series-books" :series-id="seriesId" />
+</template>
+
+<script>
+export default {
+  asyncData({ params }) {
+    return {
+      seriesId: params.id
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

pages/bookshelf/series/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="w-full h-full">
+  <bookshelf-lazy-bookshelf page="series" />
+  <!-- <div class="w-full h-full">
     <template v-for="(shelf, index) in shelves">
       <bookshelf-group-shelf v-if="!selectedSeriesName" :key="shelf.id" group-type="series" :groups="shelf.groups" :style="{ zIndex: shelves.length - index }" />
       <bookshelf-library-shelf v-else :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
     </template>
-  </div>
+  </div> -->
 </template>
 
 <script>

pages/downloads.vue

@@ -105,6 +105,9 @@ export default {
     }
   },
   computed: {
+    isSocketConnected() {
+      return this.$store.state.socketConnected
+    },
     hasStoragePermission() {
       return this.$store.state.hasStoragePermission
     },
@@ -158,9 +161,10 @@ export default {
 
         await this.searchFolder()
 
-        var audiobooks = this.$store.state.audiobooks.audiobooks || []
-        if (audiobooks.length) {
-          this.$store.dispatch('downloads/linkOrphanDownloads', audiobooks)
+        // var audiobooks = this.$store.state.audiobooks.audiobooks || []
+        // if (audiobooks.length) {
+        if (this.isSocketConnected) {
+          this.$store.dispatch('downloads/linkOrphanDownloads')
         }
       }
     },

pages/index.vue

@@ -1,28 +1,5 @@
 <template>
-  <div class="w-full h-full">
-    <div class="w-full h-12 relative z-20">
-      <div id="toolbar" class="asolute top-0 left-0 w-full h-full bg-bg flex items-center px-2">
-        <span class="material-icons px-2" @click="showSearchModal = true">search</span>
-        <p class="font-book">{{ numAudiobooks }} Audiobooks</p>
-
-        <div class="flex-grow" />
-        <span class="material-icons px-2" @click="changeView">{{ viewIcon }}</span>
-        <div class="relative flex items-center px-2">
-          <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
-          <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
-        </div>
-        <span class="material-icons px-2" @click="showSortModal = true">sort</span>
-      </div>
-    </div>
-    <template v-if="bookshelfReady">
-      <app-bookshelf v-if="!isListView" />
-      <app-bookshelf-list v-else />
-    </template>
-
-    <modals-order-modal v-model="showSortModal" :order-by.sync="settings.mobileOrderBy" :descending.sync="settings.mobileOrderDesc" @change="updateOrder" />
-    <modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.mobileFilterBy" @change="updateFilter" />
-    <modals-search-modal v-model="showSearchModal" />
-  </div>
+  <div class="w-full h-full"></div>
 </template>
 
 <script>
@@ -31,69 +8,9 @@ export default {
     return redirect('/bookshelf')
   },
   data() {
-    return {
-      showSortModal: false,
-      showFilterModal: false,
-      showSearchModal: false,
-      settings: {},
-      isListView: false,
-      bookshelfReady: false
-    }
+    return {}
   },
-  computed: {
-    hasFilters() {
-      return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
-    },
-    numAudiobooks() {
-      return this.$store.getters['audiobooks/getFiltered']().length
-    },
-    viewIcon() {
-      return this.isListView ? 'grid_view' : 'view_stream'
-    }
-  },
-  methods: {
-    changeView() {
-      this.isListView = !this.isListView
-
-      var bookshelfView = this.isListView ? 'list' : 'grid'
-      this.$localStore.setBookshelfView(bookshelfView)
-    },
-    updateOrder() {
-      this.saveSettings()
-    },
-    updateFilter() {
-      this.saveSettings()
-    },
-    saveSettings() {
-      this.$store.commit('user/setSettings', this.settings) // Immediate update
-      this.$store.dispatch('user/updateUserSettings', this.settings)
-    },
-    async init() {
-      this.settings = { ...this.$store.state.user.settings }
-
-      var bookshelfView = await this.$localStore.getBookshelfView()
-      this.isListView = bookshelfView === 'list'
-      this.bookshelfReady = true
-      console.log('Bookshelf view', bookshelfView)
-    },
-    settingsUpdated(settings) {
-      for (const key in settings) {
-        this.settings[key] = settings[key]
-      }
-    }
-  },
-  mounted() {
-    this.init()
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
-  },
-  beforeDestroy() {
-    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
-  }
+  computed: {},
+  methods: {}
 }
 </script>
-
-<style>
-#toolbar {
-  box-shadow: 0px 5px 5px #11111155;
-}
-</style>

pages/search.vue

@@ -7,18 +7,33 @@
       <div v-show="isFetching" class="w-full py-8 flex justify-center">
         <p class="text-lg text-gray-400">Fetching...</p>
       </div>
-      <div v-if="!isFetching && lastSearch && !items.length" class="w-full py-8 flex justify-center">
+      <div v-if="!isFetching && lastSearch && !totalResults" class="w-full py-8 flex justify-center">
         <p class="text-lg text-gray-400">Nothing found</p>
       </div>
-      <template v-for="item in items">
-        <div class="py-2 border-b border-bg flex" :key="item.id" @click="clickItem(item)">
-          <cards-book-cover :audiobook="item.data" :width="50" />
-          <div class="flex-grow px-4 h-full">
-            <div class="w-full h-full">
-              <p class="text-base truncate">{{ item.data.book.title }}</p>
-              <p class="text-sm text-gray-400 truncate">{{ item.data.book.author }}</p>
-            </div>
-          </div>
+      <p v-if="bookResults.length" class="font-semibold text-sm mb-1">Books</p>
+      <template v-for="bookResult in bookResults">
+        <div :key="bookResult.audiobook.id" class="w-full h-16 py-1">
+          <nuxt-link :to="`/audiobook/${bookResult.audiobook.id}`">
+            <cards-book-search-card :audiobook="bookResult.audiobook" :search="lastSearch" :match-key="bookResult.matchKey" :match-text="bookResult.matchText" />
+          </nuxt-link>
+        </div>
+      </template>
+
+      <p v-if="seriesResults.length" class="font-semibold text-sm mb-1 mt-2">Series</p>
+      <template v-for="seriesResult in seriesResults">
+        <div :key="seriesResult.series" class="w-full h-16 py-1">
+          <nuxt-link :to="`/bookshelf/series/${$encode(seriesResult.series)}`">
+            <cards-series-search-card :series="seriesResult.series" :book-items="seriesResult.audiobooks" />
+          </nuxt-link>
+        </div>
+      </template>
+
+      <p v-if="authorResults.length" class="font-semibold text-sm mb-1 mt-2">Authors</p>
+      <template v-for="authorResult in authorResults">
+        <div :key="authorResult.author" class="w-full h-14 py-1">
+          <nuxt-link :to="`/bookshelf/library?filter=authors.${$encode(authorResult.author)}`">
+            <cards-author-search-card :key="authorResult.author" :author="authorResult.author" />
+          </nuxt-link>
         </div>
       </template>
     </div>
@@ -33,34 +48,43 @@ export default {
       searchTimeout: null,
       lastSearch: null,
       isFetching: false,
-      items: []
+      bookResults: [],
+      seriesResults: [],
+      authorResults: []
     }
   },
-  computed: {},
-  methods: {
-    clickItem(item) {
-      this.show = false
-      this.$router.push(`/audiobook/${item.id}`)
+  computed: {
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
     },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
+    totalResults() {
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length
+    }
+  },
+  methods: {
     async runSearch(value) {
       this.lastSearch = value
       if (!this.lastSearch) {
-        this.items = []
+        this.bookResults = []
+        this.seriesResults = []
+        this.authorResults = []
         return
       }
       this.isFetching = true
-      var results = await this.$axios.$get(`/api/books?q=${value}`).catch((error) => {
+      var results = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${value}&limit=5`).catch((error) => {
         console.error('Search error', error)
         return []
       })
+      console.log('RESULTS', results)
+
       this.isFetching = false
-      this.items = results.map((res) => {
-        return {
-          id: res.id,
-          data: res,
-          type: 'audiobook'
-        }
-      })
+
+      this.bookResults = results ? results.audiobooks || [] : []
+      this.seriesResults = results ? results.series || [] : []
+      this.authorResults = results ? results.authors || [] : []
     },
     updateSearch(val) {
       clearTimeout(this.searchTimeout)