Add MediaProgress fields

Add Table of Contents

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
  */
@@ -42,61 +43,59 @@ export default {
     };
   },
   computed: {
-    libraryItemId() { return this.libraryItem ? this.libraryItem.id : null },
+    /** @returns {string} */
-    hasPrev() { return !this.rendition?.location.atStart },
+    libraryItemId() { return this.libraryItem?.id },
-    hasNext() { return !this.rendition?.location.atEnd },
+    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() { return this.rendition?.prev() },
-    prev() { this.rendition?.prev() },
+    next() { return this.rendition?.next() },
-    next() { 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();
       }
     },
-    relocated(location) {
+    /**
-      var cfi = location.start.cfi;
+     * @param {object} payload
-      var cfiFragment = "#" + cfi;
+     * @param {string} payload.ebookLocation - CFI of the current location
-
+     * @param {string} payload.ebookLocations - list of CFI tags
-      if(window.location.hash != cfiFragment) {
+     * @param {number} payload.progress - Progress Percentage
-        const url = new URL(window.location);
+     */
-        url.hash = cfiFragment;
+    updateProgress(payload) {
-        history.pushState({}, '', url);
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
-      
+        console.error('EpubReader.updateProgress failed:', error)
-        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)
       })
+    },
+    /** @param {string} location - CFI of the new location */
+    relocated(location) {
+      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,22 +106,26 @@ 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) {
+        // load ebook cfi locations
-          reader.book.locations.load(reader.userMediaProgress.duration)
+        if (this.userMediaProgress?.ebookLocations) {
+          reader.book.locations.load(this.userMediaProgress?.ebookLocations)
         } else {
           reader.book.locations.generate().then(() => {
-          var updatePayload = {
+            this.updateProgress({
-            duration: reader.book.locations.save(),
+              ebookLocations: reader.book.locations.save(),
-          }
+            });
-          this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload).catch((error) => {
-            console.error('Failed', error)
-          })
           });
         }
       });

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">
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl"
-      <h1 class="text-2xl mb-1">{{ abTitle }}</h1>
+      :library-item="selectedLibraryItem" />
-      <p v-if="abAuthor">by {{ abAuthor }}</p>
+
+    <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

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) {