Start of new epub reader

client/components/readers/EpubReader2.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="h-full w-full">
+    <div id="viewer" class="border border-gray-100 bg-white text-black shadow-md h-screen overflow-y-auto p-4" v-html="pageHtml"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    url: String,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      bookInfo: {},
+      page: 0,
+      numPages: 0,
+      pageHtml: '',
+      progress: 0
+    }
+  },
+  computed: {
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    hasPrev() {
+      return this.page > 0
+    },
+    hasNext() {
+      return this.page < this.numPages - 1
+    }
+  },
+  methods: {
+    prev() {
+      if (!this.hasPrev) return
+      this.page--
+      this.loadPage()
+    },
+    next() {
+      if (!this.hasNext) return
+      this.page++
+      this.loadPage()
+    },
+    keyUp() {
+      if ((e.keyCode || e.which) == 37) {
+        this.prev()
+      } else if ((e.keyCode || e.which) == 39) {
+        this.next()
+      }
+    },
+    loadPage() {
+      this.$axios
+        .$get(`/api/ebooks/${this.libraryItemId}/page/${this.page}?dev=${this.$isDev ? 1 : 0}`)
+        .then((html) => {
+          this.pageHtml = html
+        })
+        .catch((error) => {
+          console.error('Failed to load page', error)
+          this.$toast.error('Failed to load page')
+        })
+    },
+    loadInfo() {
+      this.$axios
+        .$get(`/api/ebooks/${this.libraryItemId}/info?dev=${this.$isDev ? 1 : 0}`)
+        .then((bookInfo) => {
+          this.bookInfo = bookInfo
+          this.numPages = bookInfo.pages
+          this.page = 0
+          this.loadPage()
+        })
+        .catch((error) => {
+          console.error('Failed to load page', error)
+          this.$toast.error('Failed to load info')
+        })
+    },
+    initEpub() {
+      if (!this.libraryItemId) return
+      this.loadInfo()
+    }
+  },
+  mounted() {
+    this.initEpub()
+  }
+}
+</script>

client/components/readers/Reader.vue

@@ -9,7 +9,7 @@
       <p v-if="abAuthor">by {{ abAuthor }}</p>
     </div>
 
-    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" />
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />
 
     <div class="absolute bottom-2 left-2">{{ ebookType }}</div>
   </div>
@@ -37,7 +37,8 @@ export default {
       }
     },
     componentName() {
-      if (this.ebookType === 'epub') return 'readers-epub-reader'
+      if (this.ebookType === 'epub' && this.$isDev) return 'readers-epub-reader2'
+      else if (this.ebookType === 'epub') return 'readers-epub-reader'
       else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
       else if (this.ebookType === 'pdf') return 'readers-pdf-reader'
       else if (this.ebookType === 'comic') return 'readers-comic-reader'