audiobookshelf/client/components/readers/EpubReader.vue

<template>
  <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>
      </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>
      <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>
      </div>
    </div>
  </div>
</template>

<script>
import ePub from 'epubjs'

export default {
  props: {
    url: String
  },
  data() {
    return {
      book: null,
      rendition: null,
      chapters: [],
      title: '',
      author: '',
      progress: 0,
      hasNext: true,
      hasPrev: false
    }
  },
  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() {
      if ((e.keyCode || e.which) == 37) {
        this.prev()
      } else if ((e.keyCode || e.which) == 39) {
        this.next()
      }
    },
    initEpub() {
      // var book = ePub(this.url, {
      //   requestHeaders: {
      //     Authorization: `Bearer ${this.userToken}`
      //   }
      // })
      var book = ePub(this.url)
      this.book = book

      this.rendition = book.renderTo('viewer', {
        width: window.innerWidth - 200,
        height: 600,
        ignoreClass: 'annotator-hl',
        manager: 'continuous',
        spread: 'always'
      })
      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)
            }
          })
        })

      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
      })
    }
  },
  mounted() {
    this.initEpub()
  }
}
</script>