Merge pull request #1627 from vincentscode/epub-reader

Save Progress for EPUBs
2024-12-28 09:38:56 +01:00 · 2023-03-24 18:01:13 -05:00 · 2023-03-24 18:01:13 -05:00 · c89d77dd06
commit c89d77dd06
parent fd58df4729 3138865d69
7 changed files with 183 additions and 185 deletions
--- 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 ? this.userProgress.progress || 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
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@ -2,17 +2,13 @@
  <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 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: 650px">
-        <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 id="frame" class="w-full" style="height: 80%">
+        <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-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 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>
@ -21,104 +17,137 @@
 <script>
 import ePub from 'epubjs'

+/**
+ * @typedef {object} 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,
-      rendition: null,
-      chapters: [],
-      title: '',
-      author: '',
-      progress: 0,
-      hasNext: true,
-      hasPrev: false
+      /** @type {ePub.Rendition} */
+      rendition: null
    }
  },
-  computed: {},
-  methods: {
-    changedChapter() {
-      if (this.rendition) {
-        this.rendition.display(this.selectedChapter)
-      }
+  computed: {
+    /** @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 : []
+    },
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
+    localStorageLocationsKey() {
+      return `ebookLocations-${this.libraryItemId}`
+    }
+  },
+  methods: {
    prev() {
-      if (this.rendition) {
-        this.rendition.prev()
-      }
+      return this.rendition?.prev()
    },
    next() {
-      if (this.rendition) {
-        this.rendition.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()
+      } else if ((e.keyCode || e.which) == 39) {
+        return rtl ? this.prev() : this.next()
      }
    },
-    keyUp() {
-      if ((e.keyCode || e.which) == 37) {
-        this.prev()
-      } else if ((e.keyCode || e.which) == 39) {
-        this.next()
+    /**
+     * @param {object} payload
+     * @param {string} payload.ebookLocation - CFI of the current location
+     * @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,
+          ebookProgress: location.end.percentage
+        })
+      } else {
+        this.updateProgress({
+          ebookLocation: location.start.cfi
+        })
      }
    },
    initEpub() {
-      // var book = ePub(this.url, {
-      //   requestHeaders: {
-      //     Authorization: `Bearer ${this.userToken}`
-      //   }
-      // })
-      var book = ePub(this.url)
-      this.book = book
+      /** @type {EpubReader} */
+      var reader = this

-      this.rendition = book.renderTo('viewer', {
+      /** @type {ePub.Book} */
+      reader.book = new ePub(reader.url, {
        width: window.innerWidth - 200,
-        height: 600,
-        ignoreClass: 'annotator-hl',
-        manager: 'continuous',
-        spread: 'always'
+        height: window.innerHeight - 50
      })
-      var displayed = this.rendition.display()

-      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.8
+      })
+
+      // 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)
+
+        // load ebook cfi locations
+        if (this.hasSavedLocations()) {
+          reader.book.locations.load(this.loadLocations())
+        } else {
+          reader.book.locations.generate().then(() => {
+            this.saveLocations(reader.book.locations.save())
          })
-        })
-
-      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
-      })
-
-      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
+        }
      })
    }
  },
--- a/client/components/readers/EpubReader2.vue
+++ b/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>
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@ -1,24 +1,48 @@
 <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 right-4 z-20">
-      <span class="material-icons cursor-pointer text-4xl" @click="close">close</span>
+    <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-4">
-      <h1 class="text-2xl mb-1">{{ abTitle }}</h1>
-      <p v-if="abAuthor">by {{ abAuthor }}</p>
+    <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 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>

    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />

-    <div class="absolute bottom-2 left-2">{{ ebookType }}</div>
+    <!-- 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" class="py-1">
+              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
  </div>
 </template>

 <script>
 export default {
  data() {
-    return {}
+    return {
+      chapters: [],
+      tocOpen: false
+    }
  },
  watch: {
    show(newVal) {
@ -37,13 +61,18 @@ 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'
      return null
    },
+    hasToC() {
+      return this.isEpub
+    },
+    hasSettings() {
+      return false
+    },
    abTitle() {
      return this.mediaMetadata.title
    },
@ -111,6 +140,11 @@ export default {
    }
  },
  methods: {
+    toggleToC() {
+      this.tocOpen = !this.tocOpen
+      this.chapters = this.$refs.readerComponent.chapters
+    },
+    openSettings() {},
    hotkey(action) {
      console.log('Reader hotkey', action)
      if (!this.$refs.readerComponent) return
@ -151,4 +185,8 @@ export default {
 .ebook-viewer {
  height: calc(100% - 96px);
 }
+.tocContent {
+  height: calc(100% - 36px);
+  overflow-y: auto;
+}
 </style>
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@ -164,7 +164,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">
@ -482,7 +482,12 @@ 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() {
+      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() {
--- 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') {
--- 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.ebookProgress = null // 0 to 1
+
    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,
+      ebookProgress: this.ebookProgress,
      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.ebookProgress = progress.ebookProgress
    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.ebookProgress = Math.min(1, (progress.ebookProgress || 0))
    this.lastUpdate = Date.now()
    this.finishedAt = null
    if (this.isFinished) {