Update:Local books/podcasts shelves on home page

components/bookshelf/LazyBookshelf.vue

@@ -134,7 +134,7 @@ export default {
       return this.$store.getters['getAltViewEnabled']
     },
     sizeMultiplier() {
-      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
       return this.entityWidth / baseSize
     }
   },
@@ -145,7 +145,7 @@ export default {
       })
     },
     async fetchEntities(page) {
-      var startIndex = page * this.booksPerFetch
+      const startIndex = page * this.booksPerFetch
 
       this.isFetchingEntities = true
 
@@ -153,11 +153,11 @@ export default {
         this.currentSFQueryString = this.buildSearchParams()
       }
 
-      var entityPath = this.entityName === 'books' || this.entityName === 'series-books' ? `items` : this.entityName
+      const entityPath = this.entityName === 'books' || this.entityName === 'series-books' ? `items` : this.entityName
-      var sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
+      const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      var fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1`
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1`
 
-      var payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
+      const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
         console.error('failed to fetch books', error)
         return null
       })
@@ -179,13 +179,13 @@ export default {
         }
 
         for (let i = 0; i < payload.results.length; i++) {
-          var index = i + startIndex
+          const index = i + startIndex
           this.entities[index] = payload.results[i]
           if (this.entityComponentRefs[index]) {
             this.entityComponentRefs[index].setEntity(this.entities[index])
 
             if (this.isBookEntity) {
-              var localLibraryItem = this.localLibraryItems.find((lli) => lli.libraryItemId == this.entities[index].id)
+              const localLibraryItem = this.localLibraryItems.find((lli) => lli.libraryItemId == this.entities[index].id)
               if (localLibraryItem) {
                 this.entityComponentRefs[index].setLocalLibraryItem(localLibraryItem)
               }

pages/bookshelf/index.vue

@@ -41,12 +41,19 @@ export default {
       localLibraryItems: []
     }
   },
+  watch: {
+    networkConnected(newVal) {
+      // Update shelves when network connect status changes
+      console.log(`Network changed to ${newVal} - fetch categories`)
+      this.fetchCategories()
+    }
+  },
   computed: {
     user() {
       return this.$store.state.user.user
     },
-    isSocketConnected() {
+    networkConnected() {
-      return this.$store.state.socketConnected
+      return this.$store.state.networkConnected
     },
     currentLibraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
@@ -54,6 +61,9 @@ export default {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
     altViewEnabled() {
       return this.$store.getters['getAltViewEnabled']
     },
@@ -111,21 +121,19 @@ export default {
       this.shelves = []
 
       this.localLibraryItems = await this.$db.getLocalLibraryItems()
-
+      const localCategories = await this.getLocalMediaItemCategories()
-      var localCategories = await this.getLocalMediaItemCategories()
-      this.shelves = this.shelves.concat(localCategories)
 
       if (this.user && this.currentLibraryId) {
-        var categories = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/personalized?minified=1`).catch((error) => {
+        const categories = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/personalized?minified=1`).catch((error) => {
           console.error('Failed to fetch categories', error)
           return []
         })
-        categories = categories.map((cat) => {
+        this.shelves = categories.map((cat) => {
           console.log('[breadcrumb] Personalized category from server', cat.type)
           if (cat.type == 'book' || cat.type == 'podcast' || cat.type == 'episode') {
             // Map localLibraryItem to entities
             cat.entities = cat.entities.map((entity) => {
-              var localLibraryItem = this.localLibraryItems.find((lli) => {
+              const localLibraryItem = this.localLibraryItems.find((lli) => {
                 return lli.libraryItemId == entity.id
               })
               if (localLibraryItem) {
@@ -136,14 +144,15 @@ export default {
           }
           return cat
         })
-        // Put continue listening shelf first
+
-        var continueListeningShelf = categories.find((c) => c.id == 'continue-listening')
+        // Only add the local shelf with the same media type
-        if (continueListeningShelf) {
+        const localShelves = localCategories.filter((cat) => cat.type === this.currentLibraryMediaType)
-          this.shelves = [continueListeningShelf, ...this.shelves]
+        this.shelves.push(...localShelves)
-          console.log(this.shelves)
+      } else {
-        }
+        // Offline only local
-        this.shelves = this.shelves.concat(categories.filter((c) => c.id != 'continue-listening'))
+        this.shelves = localCategories
       }
+
       this.loading = false
     },
     async libraryChanged() {
@@ -195,21 +204,14 @@ export default {
     },
     initListeners() {
       this.$eventBus.$on('library-changed', this.libraryChanged)
-      // this.$eventBus.$on('downloads-loaded', this.downloadsLoaded)
     },
     removeListeners() {
       this.$eventBus.$off('library-changed', this.libraryChanged)
-      // this.$eventBus.$off('downloads-loaded', this.downloadsLoaded)
     }
   },
   mounted() {
     this.initListeners()
     this.fetchCategories()
-    // if (this.$server.initialized && this.currentLibraryId) {
-    //   this.fetchCategories()
-    // } else {
-    //   this.shelves = this.downloadOnlyShelves
-    // }
   },
   beforeDestroy() {
     this.removeListeners()