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 1/6] 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'

From 17b8cf19b7e02305894876921c8aedc3bc309ba9 Mon Sep 17 00:00:00 2001
From: Vincent Schmandt <vincentscode@gmail.com>
Date: Tue, 21 Mar 2023 13:34:21 +0100
Subject: [PATCH 2/6] Add Location Storage

---
 client/components/readers/EpubReader.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index 47678c17..6fd652f8 100644
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -107,18 +107,29 @@ export default {
         height: window.innerHeight * 0.9
       });
 
-      reader.rendition.display(cfi);
+      reader.rendition.display(this.userMediaProgress?.currentTime);
       reader.book.ready.then(() => {
         reader.rendition.on('relocated', reader.relocated);
         reader.rendition.on('keydown', reader.keyUp)
         document.addEventListener('keydown', reader.keyUp, false);
 
-        reader.book.locations.generate();
+        if (reader.userMediaProgress?.duration) {
+          reader.book.locations.load(reader.userMediaProgress.duration)
+        } else {
+          reader.book.locations.generate().then(() => {
+          var updatePayload = {
+            duration: reader.book.locations.save(),
+          }
+          this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload).catch((error) => {
+            console.error('Failed', error)
+          })
+        });
+        }
       });
     },
   },
   mounted() {
-    this.initEpub(this.userMediaProgress?.currentTime);
+    this.initEpub();
   },
 };
 </script>

From 6c618d77604ccf2e7f744d9eb17128912cb97b55 Mon Sep 17 00:00:00 2001
From: Vincent Schmandt <vincentscode@gmail.com>
Date: Tue, 21 Mar 2023 13:36:06 +0100
Subject: [PATCH 3/6] Adjust height to fit metadata

---
 client/components/readers/EpubReader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index 6fd652f8..d60e41f4 100644
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -6,7 +6,7 @@
           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: 90%">
+      <div id="frame" class="w-full" style="height: 80%">
         <div id="viewer" class="border border-gray-100 bg-white shadow-md"></div>
       </div>
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
@@ -104,7 +104,7 @@ export default {
       /** @type {ePub.Rendition} */
       reader.rendition = reader.book.renderTo("viewer", {
         width: window.innerWidth - 200,
-        height: window.innerHeight * 0.9
+        height: window.innerHeight * 0.8
       });
 
       reader.rendition.display(this.userMediaProgress?.currentTime);

From 5078818295547dba0cb3662eef12131e73312667 Mon Sep 17 00:00:00 2001
From: Vincent Schmandt <vincentscode@gmail.com>
Date: Wed, 22 Mar 2023 11:16:01 +0100
Subject: [PATCH 4/6] Add MediaProgress fields Add Table of Contents

---
 client/components/readers/EpubReader.vue | 105 ++++++++++++-----------
 client/components/readers/Reader.vue     |  58 +++++++++++--
 server/objects/user/MediaProgress.js     |  11 ++-
 3 files changed, 114 insertions(+), 60 deletions(-)

diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index d60e41f4..72205dcd 100644
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -2,15 +2,16 @@
   <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 id="prev"
+        <span v-if="hasPrev"
           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: 80%">
-        <div id="viewer" class="border border-gray-100 bg-white shadow-md"></div>
+        <div id="viewer" class="shadow-md"></div>
       </div>
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
-        <span id="next" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl"
+        <span v-if="hasNext"
+          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>
@@ -21,7 +22,7 @@
 import ePub from "epubjs";
 
 /** 
- * @typedef {EpubReader}
+ * @typedef {object} EpubReader
  * @property {ePub.Book} book
  * @property {ePub.Rendition} rendition
  */
@@ -30,7 +31,7 @@ export default {
     url: String,
     libraryItem: {
       type: Object,
-      default: () => {}
+      default: () => { }
     }
   },
   data() {
@@ -42,61 +43,59 @@ export default {
     };
   },
   computed: {
-    libraryItemId() { return this.libraryItem ? this.libraryItem.id : null },
-    hasPrev() { return !this.rendition?.location.atStart },
-    hasNext() { return !this.rendition?.location.atEnd },
+    /** @returns {string} */
+    libraryItemId() { return this.libraryItem?.id },
+    hasPrev() { return !this.rendition?.location?.atStart },
+    hasNext() { return !this.rendition?.location?.atEnd },
+    /** @returns {Array<ePub.NavItem>} */
     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)
     },
   },
   methods: {
-    changedChapter() { this.rendition?.display(this.selectedChapter) },
-    prev() { this.rendition?.prev() },
-    next() { this.rendition?.next() },
+    prev() { return this.rendition?.prev() },
+    next() { return this.rendition?.next() },
+    goToChapter(href) { return this.rendition?.display(href) },
     keyUp(e) {
+      const rtl = this.book.package.metadata.direction === 'rtl'
       if ((e.keyCode || e.which) == 37) {
-        this.prev();
+        return rtl ? this.next() : this.prev();
       } else if ((e.keyCode || e.which) == 39) {
-        this.next();
+        return rtl ? this.prev() : this.next();
       }
     },
+    /**
+     * @param {object} payload
+     * @param {string} payload.ebookLocation - CFI of the current location
+     * @param {string} payload.ebookLocations - list of CFI tags
+     * @param {number} payload.progress - Progress Percentage
+     */
+    updateProgress(payload) {
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
+        console.error('EpubReader.updateProgress failed:', error)
+      })
+    },
+    /** @param {string} location - CFI of the new location */
     relocated(location) {
-      var cfi = location.start.cfi;
-      var cfiFragment = "#" + cfi;
-
-      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)
-        })
+      if (location.end.percentage) {
+        this.updateProgress({
+          ebookLocation: location.start.cfi,
+          progress: location.end.percentage,
+        });
+      } else {
+        this.updateProgress({
+          ebookLocation: location.start.cfi,
+        });
       }
     },
-    initEpub(cfi) {
+    initEpub() {
+      /** @type {EpubReader} */
       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: window.innerHeight - 50,
       });
@@ -107,23 +106,27 @@ export default {
         height: window.innerHeight * 0.8
       });
 
-      reader.rendition.display(this.userMediaProgress?.currentTime);
+      // load saved progress
+      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start);
+
+      // load style
+      reader.rendition.themes.default({ "*": { "color": "#fff!important" } });
+
       reader.book.ready.then(() => {
+        // set up event listeners
         reader.rendition.on('relocated', reader.relocated);
         reader.rendition.on('keydown', reader.keyUp)
         document.addEventListener('keydown', reader.keyUp, false);
 
-        if (reader.userMediaProgress?.duration) {
-          reader.book.locations.load(reader.userMediaProgress.duration)
+        // load ebook cfi locations
+        if (this.userMediaProgress?.ebookLocations) {
+          reader.book.locations.load(this.userMediaProgress?.ebookLocations)
         } else {
           reader.book.locations.generate().then(() => {
-          var updatePayload = {
-            duration: reader.book.locations.save(),
-          }
-          this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload).catch((error) => {
-            console.error('Failed', error)
-          })
-        });
+            this.updateProgress({
+              ebookLocations: reader.book.locations.save(),
+            });
+          });
         }
       });
     },
diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue
index c8d5c26b..1d7ef6d6 100644
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -1,24 +1,52 @@
 <template>
   <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-60 bg-primary text-white">
+
+    <div class="absolute top-4 left-4 z-20">
+      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl"
+        @click="toggleToC">menu</span>
+    </div>
+
+    <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
+      <h1 class="text-2xl mb-1" style="line-height: 1.15; font-weight: 100;">
+        <span style="font-weight: 600">{{ abTitle }}</span>
+        <span v-if="abAuthor" style="display: inline"> – </span>
+        <span v-if="abAuthor">{{ abAuthor }}</span>
+      </h1>
+    </div>
+
     <div class="absolute top-4 right-4 z-20">
-      <span class="material-icons cursor-pointer text-4xl" @click="close">close</span>
+      <span v-if="hasSettings" class="material-icons cursor-pointer text-2xl" @click="openSettings">settings</span>
+      <span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
     </div>
 
-    <div class="absolute top-4 left-4">
-      <h1 class="text-2xl mb-1">{{ abTitle }}</h1>
-      <p v-if="abAuthor">by {{ abAuthor }}</p>
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl"
+      :library-item="selectedLibraryItem" />
+
+    <div ref="tocContainer" class="w-full h-full fixed inset-0 invisible ">
+      <div @click="toggleToC" ref="tocOverlay"
+        class="w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 opacity-0"></div>
+      <div @click="toggleToC" class="w-96 h-full absolute left-0" style="background: #232323">
+        <div style="padding: 10px;">
+          <ul>
+            <li v-for="chapter in chapters" :key="chapter.id">
+              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label
+              }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
 
-    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />
-
-    <div class="absolute bottom-2 left-2">{{ ebookType }}</div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      chapters: [],
+      tocOpen: false
+    }
   },
   watch: {
     show(newVal) {
@@ -43,6 +71,12 @@ export default {
       else if (this.ebookType === 'comic') return 'readers-comic-reader'
       return null
     },
+    hasToC() {
+      return this.isEpub
+    },
+    hasSettings() {
+      return false
+    },
     abTitle() {
       return this.mediaMetadata.title
     },
@@ -110,6 +144,14 @@ export default {
     }
   },
   methods: {
+    toggleToC() {
+      this.tocOpen = !this.tocOpen;
+      this.chapters = this.$refs.readerComponent.chapters;
+      this.$refs.tocContainer.classList.toggle('invisible')
+      this.$refs.tocOverlay.classList.toggle('opacity-0')
+      this.$refs.tocOverlay.classList.toggle('opacity-50')
+    },
+    openSettings() { },
     hotkey(action) {
       console.log('Reader hotkey', action)
       if (!this.$refs.readerComponent) return
diff --git a/server/objects/user/MediaProgress.js b/server/objects/user/MediaProgress.js
index 0abe7e22..e92ffca6 100644
--- a/server/objects/user/MediaProgress.js
+++ b/server/objects/user/MediaProgress.js
@@ -10,6 +10,9 @@ class MediaProgress {
     this.isFinished = false
     this.hideFromContinueListening = false
 
+    this.ebookLocation = null // current cfi tag
+    this.ebookLocations = null // list of cfi tags
+
     this.lastUpdate = null
     this.startedAt = null
     this.finishedAt = null
@@ -29,6 +32,8 @@ class MediaProgress {
       currentTime: this.currentTime,
       isFinished: this.isFinished,
       hideFromContinueListening: this.hideFromContinueListening,
+      ebookLocation: this.ebookLocation,
+      ebookLocations: this.ebookLocations,
       lastUpdate: this.lastUpdate,
       startedAt: this.startedAt,
       finishedAt: this.finishedAt
@@ -44,13 +49,15 @@ class MediaProgress {
     this.currentTime = progress.currentTime
     this.isFinished = !!progress.isFinished
     this.hideFromContinueListening = !!progress.hideFromContinueListening
+    this.ebookLocation = progress.ebookLocation || null
+    this.ebookLocations = progress.ebookLocations || null
     this.lastUpdate = progress.lastUpdate
     this.startedAt = progress.startedAt
     this.finishedAt = progress.finishedAt || null
   }
 
   get inProgress() {
-    return !this.isFinished && this.progress > 0
+    return !this.isFinished && (this.progress > 0 || this.ebookLocation != null)
   }
 
   setData(libraryItemId, progress, episodeId = null) {
@@ -62,6 +69,8 @@ class MediaProgress {
     this.currentTime = progress.currentTime || 0
     this.isFinished = !!progress.isFinished || this.progress == 1
     this.hideFromContinueListening = !!progress.hideFromContinueListening
+    this.ebookLocation = progress.ebookLocation
+    this.ebookLocations = progress.ebookLocations
     this.lastUpdate = Date.now()
     this.finishedAt = null
     if (this.isFinished) {

From 4d29ebd647f559862db1225d7b7cb65157d9629d Mon Sep 17 00:00:00 2001
From: Vincent Schmandt <vincentscode@gmail.com>
Date: Thu, 23 Mar 2023 08:45:00 +0100
Subject: [PATCH 5/6] Save Locations locally, add separate progress tracker

---
 client/components/cards/LazyBookCard.vue |  2 +-
 client/components/readers/EpubReader.vue | 24 ++++++++++++++++--------
 client/pages/item/_id/index.vue          |  2 +-
 server/controllers/MeController.js       |  2 +-
 server/objects/user/MediaProgress.js     |  8 ++++----
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index d54ab791..649b25a8 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -326,7 +326,7 @@ export default {
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
     userProgressPercent() {
-      return this.userProgress ? this.userProgress.progress || 0 : 0
+      return this.userProgress ? Math.max(this.userProgress.progress || 0, this.userProgress.ebookProgress || 0) : 0
     },
     itemIsFinished() {
       return this.userProgress ? !!this.userProgress.isFinished : false
diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index 72205dcd..e8fb0cff 100644
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -53,6 +53,7 @@ export default {
       if (!this.libraryItemId) return
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
+    localStorageLocationsKey() { return `ebookLocations-${this.libraryItemId}` },
   },
   methods: {
     prev() { return this.rendition?.prev() },
@@ -69,20 +70,29 @@ export default {
     /**
      * @param {object} payload
      * @param {string} payload.ebookLocation - CFI of the current location
-     * @param {string} payload.ebookLocations - list of CFI tags
-     * @param {number} payload.progress - Progress Percentage
+     * @param {string} payload.ebookProgress - eBook Progress Percentage
      */
     updateProgress(payload) {
       this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
         console.error('EpubReader.updateProgress failed:', error)
       })
     },
+    /** @param {string} locationString */
+    saveLocations(locationString) {
+      localStorage.setItem(this.localStorageLocationsKey, locationString);
+    },
+    hasSavedLocations() {
+      return localStorage.getItem(this.localStorageLocationsKey) !== null;
+    },
+    loadLocations() {
+      return localStorage.getItem(this.localStorageLocationsKey);
+    },
     /** @param {string} location - CFI of the new location */
     relocated(location) {
       if (location.end.percentage) {
         this.updateProgress({
           ebookLocation: location.start.cfi,
-          progress: location.end.percentage,
+          ebookProgress: location.end.percentage,
         });
       } else {
         this.updateProgress({
@@ -119,13 +129,11 @@ export default {
         document.addEventListener('keydown', reader.keyUp, false);
 
         // load ebook cfi locations
-        if (this.userMediaProgress?.ebookLocations) {
-          reader.book.locations.load(this.userMediaProgress?.ebookLocations)
+        if (this.hasSavedLocations()) {
+          reader.book.locations.load(this.loadLocations());
         } else {
           reader.book.locations.generate().then(() => {
-            this.updateProgress({
-              ebookLocations: reader.book.locations.save(),
-            });
+            this.saveLocations(reader.book.locations.save());
           });
         }
       });
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index 86c1ea0e..988b89cc 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -472,7 +472,7 @@ export default {
       return duration - this.userMediaProgress.currentTime
     },
     progressPercent() {
-      return this.userMediaProgress ? Math.max(Math.min(1, this.userMediaProgress.progress), 0) : 0
+      return this.userMediaProgress ? Math.max(Math.min(1, Math.max(this.userMediaProgress.progress || 0, this.userMediaProgress.ebookProgress || 0)), 0) : 0
     },
     userProgressStartedAt() {
       return this.userMediaProgress ? this.userMediaProgress.startedAt : 0
diff --git a/server/controllers/MeController.js b/server/controllers/MeController.js
index 1286cc12..9ca2c7a9 100644
--- a/server/controllers/MeController.js
+++ b/server/controllers/MeController.js
@@ -261,7 +261,7 @@ class MeController {
 
     var itemsInProgress = []
     for (const mediaProgress of req.user.mediaProgress) {
-      if (!mediaProgress.isFinished && mediaProgress.progress > 0) {
+      if (!mediaProgress.isFinished && (mediaProgress.progress > 0 || libraryItem.ebookProgress > 0)) {
         const libraryItem = await this.db.getLibraryItem(mediaProgress.libraryItemId)
         if (libraryItem) {
           if (mediaProgress.episodeId && libraryItem.mediaType === 'podcast') {
diff --git a/server/objects/user/MediaProgress.js b/server/objects/user/MediaProgress.js
index e92ffca6..6e06c0fe 100644
--- a/server/objects/user/MediaProgress.js
+++ b/server/objects/user/MediaProgress.js
@@ -11,7 +11,7 @@ class MediaProgress {
     this.hideFromContinueListening = false
 
     this.ebookLocation = null // current cfi tag
-    this.ebookLocations = null // list of cfi tags
+    this.ebookProgress = null // 0 to 1
 
     this.lastUpdate = null
     this.startedAt = null
@@ -33,7 +33,7 @@ class MediaProgress {
       isFinished: this.isFinished,
       hideFromContinueListening: this.hideFromContinueListening,
       ebookLocation: this.ebookLocation,
-      ebookLocations: this.ebookLocations,
+      ebookProgress: this.ebookProgress,
       lastUpdate: this.lastUpdate,
       startedAt: this.startedAt,
       finishedAt: this.finishedAt
@@ -50,7 +50,7 @@ class MediaProgress {
     this.isFinished = !!progress.isFinished
     this.hideFromContinueListening = !!progress.hideFromContinueListening
     this.ebookLocation = progress.ebookLocation || null
-    this.ebookLocations = progress.ebookLocations || null
+    this.ebookProgress = progress.ebookProgress
     this.lastUpdate = progress.lastUpdate
     this.startedAt = progress.startedAt
     this.finishedAt = progress.finishedAt || null
@@ -70,7 +70,7 @@ class MediaProgress {
     this.isFinished = !!progress.isFinished || this.progress == 1
     this.hideFromContinueListening = !!progress.hideFromContinueListening
     this.ebookLocation = progress.ebookLocation
-    this.ebookLocations = progress.ebookLocations
+    this.ebookProgress = Math.min(1, (progress.ebookProgress || 0))
     this.lastUpdate = Date.now()
     this.finishedAt = null
     if (this.isFinished) {

From 3138865d6935dfb785a5766ddf0a5d2ae4c05bca Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 24 Mar 2023 17:57:41 -0500
Subject: [PATCH 6/6] Update toc menu and media progress display

---
 client/components/cards/LazyBookCard.vue |   7 +-
 client/components/readers/EpubReader.vue | 104 +++++++++++++----------
 client/components/readers/Reader.vue     |  39 ++++-----
 client/pages/item/_id/index.vue          |   9 +-
 4 files changed, 89 insertions(+), 70 deletions(-)

diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index 649b25a8..c4d3e967 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -325,8 +325,13 @@ export default {
       if (this.episodeProgress) return this.episodeProgress
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
+    useEBookProgress() {
+      if (!this.userProgress || this.userProgress.progress) return false
+      return this.userProgress.ebookProgress > 0
+    },
     userProgressPercent() {
-      return this.userProgress ? Math.max(this.userProgress.progress || 0, this.userProgress.ebookProgress || 0) : 0
+      if (this.useEBookProgress) return Math.max(Math.min(1, this.userProgress.ebookProgress), 0)
+      return this.userProgress ? Math.max(Math.min(1, this.userProgress.progress), 0) || 0 : 0
     },
     itemIsFinished() {
       return this.userProgress ? !!this.userProgress.isFinished : false
diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index e8fb0cff..8e7d016c 100644
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -2,26 +2,22 @@
   <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-if="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 v-if="hasPrev" 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: 80%">
-        <div id="viewer" class="shadow-md"></div>
+        <div id="viewer"></div>
       </div>
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
-        <span v-if="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 v-if="hasNext" 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 {object} EpubReader
  * @property {ePub.Book} book
  * @property {ePub.Rendition} rendition
@@ -31,7 +27,7 @@ export default {
     url: String,
     libraryItem: {
       type: Object,
-      default: () => { }
+      default: () => {}
     }
   },
   data() {
@@ -39,32 +35,48 @@ export default {
       /** @type {ePub.Book} */
       book: null,
       /** @type {ePub.Rendition} */
-      rendition: null,
-    };
+      rendition: null
+    }
   },
   computed: {
     /** @returns {string} */
-    libraryItemId() { return this.libraryItem?.id },
-    hasPrev() { return !this.rendition?.location?.atStart },
-    hasNext() { return !this.rendition?.location?.atEnd },
+    libraryItemId() {
+      return this.libraryItem?.id
+    },
+    hasPrev() {
+      return !this.rendition?.location?.atStart
+    },
+    hasNext() {
+      return !this.rendition?.location?.atEnd
+    },
     /** @returns {Array<ePub.NavItem>} */
-    chapters() { return this.book ? this.book.navigation.toc : [] },
+    chapters() {
+      return this.book ? this.book.navigation.toc : []
+    },
     userMediaProgress() {
       if (!this.libraryItemId) return
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
-    localStorageLocationsKey() { return `ebookLocations-${this.libraryItemId}` },
+    localStorageLocationsKey() {
+      return `ebookLocations-${this.libraryItemId}`
+    }
   },
   methods: {
-    prev() { return this.rendition?.prev() },
-    next() { return this.rendition?.next() },
-    goToChapter(href) { return this.rendition?.display(href) },
+    prev() {
+      return this.rendition?.prev()
+    },
+    next() {
+      return this.rendition?.next()
+    },
+    goToChapter(href) {
+      return this.rendition?.display(href)
+    },
     keyUp(e) {
       const rtl = this.book.package.metadata.direction === 'rtl'
       if ((e.keyCode || e.which) == 37) {
-        return rtl ? this.next() : this.prev();
+        return rtl ? this.next() : this.prev()
       } else if ((e.keyCode || e.which) == 39) {
-        return rtl ? this.prev() : this.next();
+        return rtl ? this.prev() : this.next()
       }
     },
     /**
@@ -79,68 +91,68 @@ export default {
     },
     /** @param {string} locationString */
     saveLocations(locationString) {
-      localStorage.setItem(this.localStorageLocationsKey, locationString);
+      localStorage.setItem(this.localStorageLocationsKey, locationString)
     },
     hasSavedLocations() {
-      return localStorage.getItem(this.localStorageLocationsKey) !== null;
+      return localStorage.getItem(this.localStorageLocationsKey) !== null
     },
     loadLocations() {
-      return localStorage.getItem(this.localStorageLocationsKey);
+      return localStorage.getItem(this.localStorageLocationsKey)
     },
     /** @param {string} location - CFI of the new location */
     relocated(location) {
       if (location.end.percentage) {
         this.updateProgress({
           ebookLocation: location.start.cfi,
-          ebookProgress: location.end.percentage,
-        });
+          ebookProgress: location.end.percentage
+        })
       } else {
         this.updateProgress({
-          ebookLocation: location.start.cfi,
-        });
+          ebookLocation: location.start.cfi
+        })
       }
     },
     initEpub() {
       /** @type {EpubReader} */
-      var reader = this;
+      var reader = this
 
       /** @type {ePub.Book} */
       reader.book = new ePub(reader.url, {
         width: window.innerWidth - 200,
-        height: window.innerHeight - 50,
-      });
+        height: window.innerHeight - 50
+      })
 
       /** @type {ePub.Rendition} */
-      reader.rendition = reader.book.renderTo("viewer", {
+      reader.rendition = reader.book.renderTo('viewer', {
         width: window.innerWidth - 200,
         height: window.innerHeight * 0.8
-      });
+      })
 
       // load saved progress
-      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start);
+      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
 
       // load style
-      reader.rendition.themes.default({ "*": { "color": "#fff!important" } });
+      reader.rendition.themes.default({ '*': { color: '#fff!important' } })
 
       reader.book.ready.then(() => {
         // set up event listeners
-        reader.rendition.on('relocated', reader.relocated);
+        reader.rendition.on('relocated', reader.relocated)
         reader.rendition.on('keydown', reader.keyUp)
-        document.addEventListener('keydown', reader.keyUp, false);
+        document.addEventListener('keydown', reader.keyUp, false)
 
         // load ebook cfi locations
         if (this.hasSavedLocations()) {
-          reader.book.locations.load(this.loadLocations());
+          reader.book.locations.load(this.loadLocations())
         } else {
           reader.book.locations.generate().then(() => {
-            this.saveLocations(reader.book.locations.save());
-          });
+            this.saveLocations(reader.book.locations.save())
+          })
         }
-      });
-    },
+      })
+    }
   },
   mounted() {
-    this.initEpub();
-  },
-};
+    this.initEpub()
+  }
+}
 </script>
diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue
index 1d7ef6d6..a7383fb7 100644
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -1,13 +1,11 @@
 <template>
   <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-60 bg-primary text-white">
-
     <div class="absolute top-4 left-4 z-20">
-      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl"
-        @click="toggleToC">menu</span>
+      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl" @click="toggleToC">menu</span>
     </div>
 
     <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
-      <h1 class="text-2xl mb-1" style="line-height: 1.15; font-weight: 100;">
+      <h1 class="text-2xl mb-1" style="line-height: 1.15; font-weight: 100">
         <span style="font-weight: 600">{{ abTitle }}</span>
         <span v-if="abAuthor" style="display: inline"> – </span>
         <span v-if="abAuthor">{{ abAuthor }}</span>
@@ -19,24 +17,22 @@
       <span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
     </div>
 
-    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl"
-      :library-item="selectedLibraryItem" />
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />
 
-    <div ref="tocContainer" class="w-full h-full fixed inset-0 invisible ">
-      <div @click="toggleToC" ref="tocOverlay"
-        class="w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 opacity-0"></div>
-      <div @click="toggleToC" class="w-96 h-full absolute left-0" style="background: #232323">
-        <div style="padding: 10px;">
+    <!-- TOC side nav -->
+    <div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
+    <div v-if="hasToC" class="w-72 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-72'" @click.stop.prevent="toggleToC">
+      <div class="p-4 h-full overflow-hidden">
+        <p class="text-lg font-semibold mb-2">Table of Contents</p>
+        <div class="tocContent">
           <ul>
-            <li v-for="chapter in chapters" :key="chapter.id">
-              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label
-              }}</a>
+            <li v-for="chapter in chapters" :key="chapter.id" class="py-1">
+              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
             </li>
           </ul>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -145,13 +141,10 @@ export default {
   },
   methods: {
     toggleToC() {
-      this.tocOpen = !this.tocOpen;
-      this.chapters = this.$refs.readerComponent.chapters;
-      this.$refs.tocContainer.classList.toggle('invisible')
-      this.$refs.tocOverlay.classList.toggle('opacity-0')
-      this.$refs.tocOverlay.classList.toggle('opacity-50')
+      this.tocOpen = !this.tocOpen
+      this.chapters = this.$refs.readerComponent.chapters
     },
-    openSettings() { },
+    openSettings() {},
     hotkey(action) {
       console.log('Reader hotkey', action)
       if (!this.$refs.readerComponent) return
@@ -192,4 +185,8 @@ export default {
 .ebook-viewer {
   height: calc(100% - 96px);
 }
+.tocContent {
+  height: calc(100% - 36px);
+  overflow-y: auto;
+}
 </style>
\ No newline at end of file
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index 988b89cc..dfcdf38b 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -156,7 +156,7 @@
           <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
             <p v-if="progressPercent < 1" class="leading-6">{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
             <p v-else class="text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
-            <p v-if="progressPercent < 1" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
+            <p v-if="progressPercent < 1 && !useEBookProgress" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
             <p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
 
             <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
@@ -471,8 +471,13 @@ export default {
       const duration = this.userMediaProgress.duration || this.duration
       return duration - this.userMediaProgress.currentTime
     },
+    useEBookProgress() {
+      if (!this.userMediaProgress || this.userMediaProgress.progress) return false
+      return this.userMediaProgress.ebookProgress > 0
+    },
     progressPercent() {
-      return this.userMediaProgress ? Math.max(Math.min(1, Math.max(this.userMediaProgress.progress || 0, this.userMediaProgress.ebookProgress || 0)), 0) : 0
+      if (this.useEBookProgress) return Math.max(Math.min(1, this.userMediaProgress.ebookProgress), 0)
+      return this.userMediaProgress ? Math.max(Math.min(1, this.userMediaProgress.progress), 0) : 0
     },
     userProgressStartedAt() {
       return this.userMediaProgress ? this.userMediaProgress.startedAt : 0