Update:Handle navigating to library item pages when server connection goes down

- Added loading indicator to library item page on initial request to server
- Redirect to downloaded item page if server item request fails

components/cards/LazyBookCard.vue

@@ -493,7 +493,12 @@ export default {
         if (router) {
           if (this.recentEpisode) router.push(`/item/${this.libraryItemId}/${this.recentEpisode.id}`)
           else if (this.collapsedSeries) router.push(`/bookshelf/series/${this.collapsedSeries.id}`)
-          else router.push(`/item/${this.libraryItemId}`)
+          else if (this.localLibraryItem) {
+            // Pass local library item id to server page to allow falling back to offline page
+            router.push(`/item/${this.libraryItemId}?localLibraryItemId=${this.localLibraryItemId}`)
+          } else {
+            router.push(`/item/${this.libraryItemId}`)
+          }
         }
       }
     },

layouts/default.vue

@@ -139,7 +139,7 @@ export default {
 
       console.log(`[default] Got server config, attempt authorize ${serverConfig.address}`)
 
-      const authRes = await this.postRequest(`${serverConfig.address}/api/authorize`, null, { Authorization: `Bearer ${serverConfig.token}` }, 10000).catch((error) => {
+      const authRes = await this.postRequest(`${serverConfig.address}/api/authorize`, null, { Authorization: `Bearer ${serverConfig.token}` }, 6000).catch((error) => {
         console.error('[default] Server auth failed', error)
         return false
       })

pages/bookshelf/index.vue

@@ -331,6 +331,10 @@ export default {
     this.initListeners()
     console.log(`[categories] mounted so fetching categories`)
     this.fetchCategories()
+
+    if (this.$route.query.error) {
+      this.$toast.error(this.$route.query.error)
+    }
   },
   beforeDestroy() {
     this.removeListeners()

pages/item/_id/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div id="item-page" class="w-full h-full overflow-y-auto overflow-x-hidden relative bg-bg">
+  <div v-if="!libraryItem" class="w-full h-full relative flex items-center justify-center bg-bg">
+    <ui-loading-indicator />
+  </div>
+  <div v-else id="item-page" class="w-full h-full overflow-y-auto overflow-x-hidden relative bg-bg">
     <!-- cover -->
     <div class="w-full flex justify-center relative">
       <div style="width: 0; transform: translateX(-50vw); overflow: visible">
@@ -167,43 +170,38 @@ import { AbsFileSystem, AbsDownloader } from '@/plugins/capacitor'
 import { FastAverageColor } from 'fast-average-color'
 
 export default {
-  async asyncData({ store, params, redirect, app }) {
+  async asyncData({ store, params, redirect, app, query }) {
     const libraryItemId = params.id
     let libraryItem = null
+
     if (libraryItemId.startsWith('local')) {
       libraryItem = await app.$db.getLocalLibraryItem(libraryItemId)
-      console.log('Got lli', libraryItemId)
+      if (!libraryItem) {
+        return redirect('/?error=Failed to get downloaded library item')
+      }
+
       // If library item is linked to the currently connected server then redirect to the page using the server library item id
       if (libraryItem?.libraryItemId?.startsWith('li_')) {
         // Detect old library item id
         console.error('Local library item has old server library item id', libraryItem.libraryItemId)
-      } else if (libraryItem?.libraryItemId && libraryItem?.serverAddress === store.getters['user/getServerAddress'] && store.state.networkConnected) {
-        let query = ''
-        if (libraryItem.mediaType === 'podcast') query = '?episodefilter=downloaded' // Filter by downloaded when redirecting from the local copy
-        return redirect(`/item/${libraryItem.libraryItemId}${query}`)
-      }
-    } else if (store.state.user.serverConnectionConfig) {
-      libraryItem = await app.$nativeHttp.get(`/api/items/${libraryItemId}?expanded=1&include=rssfeed`).catch((error) => {
-        console.error('Failed', error)
-        return false
-      })
-
-      if (libraryItem) {
-        const localLibraryItem = await app.$db.getLocalLibraryItemByLId(libraryItemId)
-        if (localLibraryItem) {
-          console.log('Library item has local library item also', localLibraryItem.id)
-          libraryItem.localLibraryItem = localLibraryItem
+      } else if (query.noredirect !== '1' && libraryItem?.libraryItemId && libraryItem?.serverAddress === store.getters['user/getServerAddress'] && store.state.networkConnected) {
+        const queryParams = new URLSearchParams()
+        queryParams.set('localLibraryItemId', libraryItemId)
+        if (libraryItem.mediaType === 'podcast') {
+          // Filter by downloaded when redirecting from the local copy
+          queryParams.set('episodefilter', 'downloaded')
         }
+        console.log('Redirecting to server library item page with queryparams', queryParams.toString())
+        return redirect(`/item/${libraryItem.libraryItemId}?${queryParams.toString()}`)
       }
+    } else if (!store.state.user.serverConnectionConfig) {
+      // Not connected to server
+      return redirect('/?error=No server connection to get library item')
     }
 
-    if (!libraryItem) {
-      console.error('No item...', params.id)
-      return redirect('/')
-    }
     return {
       libraryItem,
-      rssFeed: libraryItem.rssFeed || null
+      libraryItemId
     }
   },
   data() {
@@ -296,8 +294,8 @@ export default {
     bookCoverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
-    libraryItemId() {
-      return this.libraryItem.id
+    rssFeed() {
+      return this.libraryItem?.rssFeed
     },
     mediaType() {
       return this.libraryItem.mediaType
@@ -722,9 +720,8 @@ export default {
       if (!this.libraryItem.libraryId) return
       await this.$store.dispatch('libraries/fetch', this.libraryItem.libraryId)
       this.$localStore.setLastLibraryId(this.libraryItem.libraryId)
-    }
     },
-  mounted() {
+    init() {
       // If library of this item is different from current library then switch libraries
       if (this.$store.state.libraries.currentLibraryId !== this.libraryItem.libraryId) {
         this.setLibrary()
@@ -748,6 +745,35 @@ export default {
         window['item-page'].scrollTop = this.$store.state.lastItemScrollData.scrollTop || 0
       }
     },
+    async loadServerLibraryItem() {
+      console.log(`Fetching library item "${this.libraryItemId}" from server`)
+      const libraryItem = await this.$nativeHttp.get(`/api/items/${this.libraryItemId}?expanded=1&include=rssfeed`, { connectTimeout: 5000 }).catch((error) => {
+        console.error('Failed', error)
+        return null
+      })
+
+      if (libraryItem) {
+        const localLibraryItem = await this.$db.getLocalLibraryItemByLId(this.libraryItemId)
+        if (localLibraryItem) {
+          console.log('Library item has local library item also', localLibraryItem.id)
+          libraryItem.localLibraryItem = localLibraryItem
+        }
+        this.libraryItem = libraryItem
+      } else if (this.$route.query.localLibraryItemId) {
+        // Failed to get server library item but is local library item so redirect
+        return this.$router.replace(`/item/${this.$route.query.localLibraryItemId}?noredirect=1`)
+      } else {
+        this.$toast.error('Failed to get library item from server')
+        return this.$router.replace('/bookshelf')
+      }
+    }
+  },
+  async mounted() {
+    if (!this.libraryItem) {
+      await this.loadServerLibraryItem()
+    }
+    this.init()
+  },
   beforeDestroy() {
     window.removeEventListener('resize', this.windowResized)
     this.$eventBus.$off('library-changed', this.libraryChanged)