From e018f8341e3df69f20c06d1841296bd5c650d230 Mon Sep 17 00:00:00 2001
From: Vincent Schmandt <vincentscode@gmail.com>
Date: Tue, 21 Mar 2023 13:27:21 +0100
Subject: [PATCH] EPUB progress persistence

---
 client/components/readers/EpubReader.vue  | 181 +++++++++++-----------
 client/components/readers/EpubReader2.vue |  88 -----------
 client/components/readers/Reader.vue      |   3 +-
 3 files changed, 89 insertions(+), 183 deletions(-)
 delete mode 100644 client/components/readers/EpubReader2.vue

diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index 9c19c3ec..47678c17 100644
--- a/client/components/readers/EpubReader.vue
+++ b/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: '',
-      progress: 0,
-      hasNext: true,
-      hasPrev: false
-    }
+    };
+  },
+  computed: {
+    libraryItemId() { return this.libraryItem ? this.libraryItem.id : null },
+    hasPrev() { return !this.rendition?.location.atStart },
+    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() {
-      if (this.rendition) {
-        this.rendition.display(this.selectedChapter)
-      }
-    },
-    prev() {
-      if (this.rendition) {
-        this.rendition.prev()
-      }
-    },
-    next() {
-      if (this.rendition) {
-        this.rendition.next()
-      }
-    },
-    keyUp() {
+    changedChapter() { this.rendition?.display(this.selectedChapter) },
+    prev() { this.rendition?.prev() },
+    next() { this.rendition?.next() },
+    keyUp(e) {
       if ((e.keyCode || e.which) == 37) {
-        this.prev()
+        this.prev();
       } else if ((e.keyCode || e.which) == 39) {
-        this.next()
+        this.next();
       }
     },
-    initEpub() {
-      // var book = ePub(this.url, {
-      //   requestHeaders: {
-      //     Authorization: `Bearer ${this.userToken}`
-      //   }
-      // })
-      var book = ePub(this.url)
-      this.book = book
+    relocated(location) {
+      var cfi = location.start.cfi;
+      var cfiFragment = "#" + cfi;
 
-      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,
-        ignoreClass: 'annotator-hl',
-        manager: 'continuous',
-        spread: 'always'
-      })
-      var displayed = this.rendition.display()
+        height: window.innerHeight - 50,
+      });
 
-      book.ready
-        .then(() => {
-          console.log('Book ready')
-          return book.locations.generate(1600)
-        })
-        .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)
-            }
-          })
-        })
+      /** @type {ePub.Rendition} */
+      reader.rendition = reader.book.renderTo("viewer", {
+        width: window.innerWidth - 200,
+        height: window.innerHeight * 0.9
+      });
 
-      book.loaded.navigation.then((toc) => {
-        var _chapters = []
-        toc.forEach((chapter) => {
-          _chapters.push(chapter)
-        })
-        this.chapters = _chapters
-      })
-      book.loaded.metadata.then((metadata) => {
-        this.author = metadata.creator
-        this.title = metadata.title
-      })
+      reader.rendition.display(cfi);
+      reader.book.ready.then(() => {
+        reader.rendition.on('relocated', reader.relocated);
+        reader.rendition.on('keydown', reader.keyUp)
+        document.addEventListener('keydown', reader.keyUp, false);
 
-      this.rendition.on('keyup', this.keyUp)
-
-      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
-      })
-    }
+        reader.book.locations.generate();
+      });
+    },
   },
   mounted() {
-    this.initEpub()
-  }
-}
+    this.initEpub(this.userMediaProgress?.currentTime);
+  },
+};
 </script>
diff --git a/client/components/readers/EpubReader2.vue b/client/components/readers/EpubReader2.vue
deleted file mode 100644
index 69839d78..00000000
--- a/client/components/readers/EpubReader2.vue
+++ /dev/null
@@ -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>
diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue
index 5481f250..c8d5c26b 100644
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -37,8 +37,7 @@ export default {
       }
     },
     componentName() {
-      if (this.ebookType === 'epub' && this.$isDev) return 'readers-epub-reader2'
-      else if (this.ebookType === 'epub') return 'readers-epub-reader'
+      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'