Update:EReaders to use new ebook API routes

components/readers/ComicReader.vue

@@ -47,7 +47,11 @@ Archive.init({
 
 export default {
   props: {
-    url: String
+    url: String,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {
@@ -78,6 +82,9 @@ export default {
     }
   },
   computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     comicMetadataKeys() {
       return this.comicMetadata ? Object.keys(this.comicMetadata) : []
     },
@@ -150,7 +157,10 @@ export default {
       console.log('Extracting', this.url)
 
       var buff = await this.$axios.$get(this.url, {
-        responseType: 'blob'
+        responseType: 'blob',
+        headers: {
+          Authorization: `Bearer ${this.userToken}`
+        }
       })
       const archive = await Archive.open(buff)
       const originalFilesObject = await archive.getFilesObject()

components/readers/EpubReader.vue

@@ -38,6 +38,9 @@ export default {
     }
   },
   computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     /** @returns {string} */
     libraryItemId() {
       return this.libraryItem?.id
@@ -235,7 +238,11 @@ export default {
       /** @type {ePub.Book} */
       reader.book = new ePub(reader.url, {
         width: window.innerWidth,
-        height: window.innerHeight - this.readerHeightOffset
+        height: window.innerHeight - this.readerHeightOffset,
+        openAs: 'epub',
+        requestHeaders: {
+          Authorization: `Bearer ${this.userToken}`
+        }
       })
 
       /** @type {ePub.Rendition} */

components/readers/MobiReader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mobi-ebook-viewer w-full relative">
-    <div class="absolute overflow-hidden left-0 right-0 w-full max-w-full m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
+    <div class="absolute overflow-hidden left-0 top-0 w-screen max-w-screen m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
       <iframe title="html-viewer" class="w-full overflow-hidden"> Loading </iframe>
     </div>
     <div class="fixed bottom-0 left-0 h-8 w-full bg-primary px-2 flex items-center z-20" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
@@ -17,7 +17,11 @@ import defaultCss from '@/assets/ebooks/basic.js'
 
 export default {
   props: {
-    url: String
+    url: String,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {}
@@ -25,6 +29,9 @@ export default {
   computed: {
     playerLibraryItemId() {
       return this.$store.state.playerLibraryItemId
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
     }
   },
   methods: {
@@ -85,7 +92,10 @@ export default {
     async initMobi() {
       // Fetch mobi file as blob
       var buff = await this.$axios.$get(this.url, {
-        responseType: 'blob'
+        responseType: 'blob',
+        headers: {
+          Authorization: `Bearer ${this.userToken}`
+        }
       })
       var reader = new FileReader()
       reader.onload = async (event) => {

components/readers/PdfReader.vue

@@ -19,7 +19,7 @@
       <div class="flex items-center justify-center">
         <div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="w-full h-full overflow-auto">
           <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
-          <pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md bg-white" :src="url" :page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
+          <pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md bg-white" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
         </div>
       </div>
     </div>
@@ -50,8 +50,8 @@ export default {
     }
   },
   computed: {
-    libraryItemId() {
-      return this.libraryItem?.id
+    userToken() {
+      return this.$store.getters['user/getToken']
     },
     localLibraryItem() {
       if (this.isLocal) return this.libraryItem
@@ -93,6 +93,14 @@ export default {
     },
     savedPage() {
       return Number(this.userItemProgress?.ebookLocation || 0)
+    },
+    pdfDocInitParams() {
+      return {
+        url: this.url,
+        httpHeaders: {
+          Authorization: `Bearer ${this.userToken}`
+        }
+      }
     }
   },
   methods: {

components/readers/Reader.vue

@@ -49,10 +49,10 @@ export default {
       return this.$store.state.selectedLibraryItem
     },
     media() {
-      return this.selectedLibraryItem ? this.selectedLibraryItem.media : null
+      return this.selectedLibraryItem?.media || null
     },
     mediaMetadata() {
-      return this.media ? this.media.metadata || {} : {}
+      return this.media?.metadata || {}
     },
     readerComponentName() {
       if (this.ebookType === 'epub') return 'readers-epub-reader'
@@ -61,12 +61,6 @@ export default {
       else if (this.ebookType === 'pdf') return 'readers-pdf-reader'
       return null
     },
-    folderId() {
-      return this.selectedLibraryItem ? this.selectedLibraryItem.folderId : null
-    },
-    libraryId() {
-      return this.selectedLibraryItem ? this.selectedLibraryItem.libraryId : null
-    },
     ebookFile() {
       return this.media?.ebookFile || null
     },
@@ -103,19 +97,8 @@ export default {
       if (this.localContentUrl) {
         return Capacitor.convertFileSrc(this.localContentUrl)
       }
-      let filepath = ''
-      if (this.selectedLibraryItem.isFile) {
-        filepath = this.$encodeUriPath(this.ebookFile.metadata.filename)
-      } else {
-        const itemRelPath = this.selectedLibraryItem.relPath
-        if (itemRelPath.startsWith('/')) itemRelPath = itemRelPath.slice(1)
-        const relPath = this.ebookFile.metadata.relPath
-        if (relPath.startsWith('/')) relPath = relPath.slice(1)
-
-        filepath = this.$encodeUriPath(`${itemRelPath}/${relPath}`)
-      }
       const serverAddress = this.$store.getters['user/getServerAddress']
-      return `${serverAddress}/ebook/${this.libraryId}/${this.folderId}/${filepath}`
+      return `${serverAddress}/api/items/${this.selectedLibraryItem.id}/ebook`
     },
     playerLibraryItemId() {
       return this.$store.state.playerLibraryItemId