EPUB progress persistence

client/components/readers/EpubReader.vue

@@ -2,128 +2,123 @@
   <div class="h-full w-full">
     <div class="h-full flex items-center">
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center overflow-x-hidden justify-center">
-        <span v-show="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
+        <span id="prev"
+          class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl"
+          @mousedown.prevent @click="prev">chevron_left</span>
       </div>
-      <div id="frame" class="w-full" style="height: 650px">
+      <div id="frame" class="w-full" style="height: 90%">
         <div id="viewer" class="border border-gray-100 bg-white shadow-md"></div>
-
-        <div class="py-4 flex justify-center" style="height: 50px">
-          <p>{{ progress }}%</p>
-        </div>
       </div>
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
-        <span v-show="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
+        <span id="next" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl"
+          @mousedown.prevent @click="next">chevron_right</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ePub from 'epubjs'
+import ePub from "epubjs";
 
+/** 
+ * @typedef {EpubReader}
+ * @property {ePub.Book} book
+ * @property {ePub.Rendition} rendition
+ */
 export default {
   props: {
-    url: String
+    url: String,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {
+      /** @type {ePub.Book} */
       book: null,
+      /** @type {ePub.Rendition} */
       rendition: null,
-      chapters: [],
+    };
-      title: '',
+  },
-      author: '',
+  computed: {
-      progress: 0,
+    libraryItemId() { return this.libraryItem ? this.libraryItem.id : null },
-      hasNext: true,
+    hasPrev() { return !this.rendition?.location.atStart },
-      hasPrev: false
+    hasNext() { return !this.rendition?.location.atEnd },
-    }
+    chapters() { return this.book ? this.book.navigation.toc : [] },
+    title() { return this.book ? this.book.metadata.title : "" },
+    author() { return this.book ? this.book.metadata.creator : "" },
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
   },
-  computed: {},
   methods: {
-    changedChapter() {
+    changedChapter() { this.rendition?.display(this.selectedChapter) },
-      if (this.rendition) {
+    prev() { this.rendition?.prev() },
-        this.rendition.display(this.selectedChapter)
+    next() { this.rendition?.next() },
-      }
+    keyUp(e) {
-    },
-    prev() {
-      if (this.rendition) {
-        this.rendition.prev()
-      }
-    },
-    next() {
-      if (this.rendition) {
-        this.rendition.next()
-      }
-    },
-    keyUp() {
       if ((e.keyCode || e.which) == 37) {
-        this.prev()
+        this.prev();
       } else if ((e.keyCode || e.which) == 39) {
-        this.next()
+        this.next();
       }
     },
-    initEpub() {
+    relocated(location) {
-      // var book = ePub(this.url, {
+      var cfi = location.start.cfi;
-      //   requestHeaders: {
+      var cfiFragment = "#" + cfi;
-      //     Authorization: `Bearer ${this.userToken}`
-      //   }
-      // })
-      var book = ePub(this.url)
-      this.book = book
 
-      this.rendition = book.renderTo('viewer', {
+      if(window.location.hash != cfiFragment) {
+        const url = new URL(window.location);
+        url.hash = cfiFragment;
+        history.pushState({}, '', url);
+      
+        var updatePayload = {
+          currentTime: cfi,
+        }
+
+        var percentage = this.book.locations.percentageFromCfi(cfi);
+        if (percentage) {
+          updatePayload.progress = percentage
+        }
+
+        this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload).catch((error) => {
+          console.error('Failed', error)
+        })
+      }
+    },
+    initEpub(cfi) {
+      var reader = this;
+
+      /** @type {ePub.Book} */
+      reader.book = new ePub(reader.url, {
+        storage: false,
+        worker: false,
+        manager: "continuous",
+        flow: "scrolled",
+        spreads: false,
         width: window.innerWidth - 200,
-        height: 600,
+        height: window.innerHeight - 50,
-        ignoreClass: 'annotator-hl',
+      });
-        manager: 'continuous',
-        spread: 'always'
-      })
-      var displayed = this.rendition.display()
 
-      book.ready
+      /** @type {ePub.Rendition} */
-        .then(() => {
+      reader.rendition = reader.book.renderTo("viewer", {
-          console.log('Book ready')
+        width: window.innerWidth - 200,
-          return book.locations.generate(1600)
+        height: window.innerHeight * 0.9
-        })
+      });
-        .then((locations) => {
-          // console.log('Loaded locations', locations)
-          // Wait for book to be rendered to get current page
-          displayed.then(() => {
-            // Get the current CFI
-            var currentLocation = this.rendition.currentLocation()
-            if (!currentLocation.start) {
-              console.error('No Start', currentLocation)
-            } else {
-              var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi)
-              // console.log('current page', currentPage)
-            }
-          })
-        })
 
-      book.loaded.navigation.then((toc) => {
+      reader.rendition.display(cfi);
-        var _chapters = []
+      reader.book.ready.then(() => {
-        toc.forEach((chapter) => {
+        reader.rendition.on('relocated', reader.relocated);
-          _chapters.push(chapter)
+        reader.rendition.on('keydown', reader.keyUp)
-        })
+        document.addEventListener('keydown', reader.keyUp, false);
-        this.chapters = _chapters
-      })
-      book.loaded.metadata.then((metadata) => {
-        this.author = metadata.creator
-        this.title = metadata.title
-      })
 
-      this.rendition.on('keyup', this.keyUp)
+        reader.book.locations.generate();
-
+      });
-      this.rendition.on('relocated', (location) => {
+    },
-        var percent = book.locations.percentageFromCfi(location.start.cfi)
-        this.progress = Math.floor(percent * 100)
-
-        this.hasNext = !location.atEnd
-        this.hasPrev = !location.atStart
-      })
-    }
   },
   mounted() {
-    this.initEpub()
+    this.initEpub(this.userMediaProgress?.currentTime);
-  }
+  },
-}
+};
 </script>

client/components/readers/EpubReader2.vue

@@ -1,88 +0,0 @@
-<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

@@ -37,8 +37,7 @@ export default {
       }
     },
     componentName() {
-      if (this.ebookType === 'epub' && this.$isDev) return 'readers-epub-reader2'
+      if (this.ebookType === 'epub') return 'readers-epub-reader'
-      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'