Ebook and comic reader #14

components/app/BookshelfListRow.vue

@@ -11,14 +11,17 @@
           <!-- <button class="mx-1" @click="editAudiobook(ab)">
                 <span class="material-icons text-icon pb-px">edit</span>
               </button> -->
-          <button v-if="!isPlaying" class="mx-1 rounded-full w-6 h-6" @click="playAudiobook">
+          <button v-if="showRead" class="mx-1 rounded-full w-6 h-6" @click="readBook">
+            <span class="material-icons">auto_stories</span>
+          </button>
+          <button v-if="showPlay" class="mx-1 rounded-full w-6 h-6" @click="playAudiobook">
             <span class="material-icons">play_arrow</span>
           </button>
         </div>
       </div>
       <p v-if="audiobook.book.subtitle" class="text-gray-200 leading-6 truncate" style="font-size: 0.9rem">{{ audiobook.book.subtitle }}</p>
       <p class="text-sm text-gray-200">by {{ audiobook.book.author }}</p>
-      <div class="flex items-center py-1">
+      <div v-if="numTracks" class="flex items-center py-1">
         <p class="text-xs text-gray-300">{{ $elapsedPretty(audiobook.duration) }}</p>
         <span class="px-3 text-xs text-gray-300">•</span>
         <p class="text-xs text-gray-300 font-mono">{{ $bytesPretty(audiobook.size, 0) }}</p>
@@ -38,6 +41,9 @@
         <div v-if="isPlaying" class="w-min my-1 mx-1">
           <div class="bg-info bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">{{ isStreaming ? 'Streaming' : 'Playing' }}</div>
         </div>
+        <div v-if="hasEbook" class="w-min my-1 mx-1">
+          <div class="bg-bg bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">{{ ebookFormat }}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -96,12 +102,34 @@ export default {
     isPlaying() {
       return this.$store.getters['isAudiobookPlaying'](this.audiobookId)
     },
+    isMissing() {
+      return this.audiobook.isMissing
+    },
+    isIncomplete() {
+      return this.audiobook.isIncomplete
+    },
     numTracks() {
       if (this.audiobook.tracks) return this.audiobook.tracks.length
       return this.audiobook.numTracks || 0
+    },
+    showPlay() {
+      return !this.isPlaying && !this.isMissing && !this.isIncomplete && this.numTracks
+    },
+    showRead() {
+      return this.hasEbook && this.ebookFormat !== '.pdf'
+    },
+    hasEbook() {
+      return this.audiobook.numEbooks
+    },
+    ebookFormat() {
+      if (!this.audiobook || !this.audiobook.ebooks || !this.audiobook.ebooks.length) return null
+      return this.audiobook.ebooks[0].ext.substr(1)
     }
   },
   methods: {
+    readBook() {
+      this.$store.commit('openReader', this.audiobook)
+    },
     playAudiobook() {
       if (this.isPlaying) {
         return

components/readers/ComicReader.vue

@@ -0,0 +1,226 @@
+<template>
+  <div id="comic-reader" class="w-full h-full">
+    <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute right-20 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-52" style="top: 72px">
+      <div v-for="(file, index) in pages" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index)">
+        <p class="text-sm truncate">{{ file }}</p>
+      </div>
+    </div>
+    <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-20 right-0 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-full" style="top: 72px">
+      <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
+        <p class="text-xs">
+          <strong>{{ key }}</strong
+          >: {{ comicMetadata[key] }}
+        </p>
+      </div>
+    </div>
+
+    <div v-if="comicMetadata" class="absolute top-8 right-36 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="showInfoMenu = !showInfoMenu">
+      <span class="material-icons text-lg">more</span>
+    </div>
+    <div class="absolute top-8 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" style="right: 92px" @mousedown.prevent @click.stop.prevent="showPageMenu = !showPageMenu">
+      <span class="material-icons text-lg">menu</span>
+    </div>
+    <div class="absolute top-8 right-4 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
+      <p class="font-mono">{{ page + 1 }} / {{ numPages }}</p>
+    </div>
+
+    <div class="overflow-hidden m-auto comicwrapper relative">
+      <div class="h-full flex justify-center">
+        <img v-if="mainImg" :src="mainImg" class="object-contain comicimg" />
+      </div>
+
+      <div v-show="loading" class="w-full h-full absolute top-0 left-0 flex items-center justify-center z-10">
+        <ui-loading-indicator />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Path from 'path'
+import { Archive } from 'libarchive.js/main.js'
+
+Archive.init({
+  workerUrl: '/libarchive/worker-bundle.js'
+})
+
+export default {
+  props: {
+    url: String
+  },
+  data() {
+    return {
+      loading: false,
+      pages: null,
+      filesObject: null,
+      mainImg: null,
+      page: 0,
+      numPages: 0,
+      showPageMenu: false,
+      showInfoMenu: false,
+      loadTimeout: null,
+      loadedFirstPage: false,
+      comicMetadata: null
+    }
+  },
+  watch: {
+    url: {
+      immediate: true,
+      handler() {
+        this.extract()
+      }
+    }
+  },
+  computed: {
+    comicMetadataKeys() {
+      return this.comicMetadata ? Object.keys(this.comicMetadata) : []
+    },
+    canGoNext() {
+      return this.page < this.numPages - 1
+    },
+    canGoPrev() {
+      return this.page > 0
+    }
+  },
+  methods: {
+    clickOutside() {
+      if (this.showPageMenu) this.showPageMenu = false
+      if (this.showInfoMenu) this.showInfoMenu = false
+    },
+    next() {
+      if (!this.canGoNext) return
+      this.setPage(this.page + 1)
+    },
+    prev() {
+      if (!this.canGoPrev) return
+      this.setPage(this.page - 1)
+    },
+    setPage(index) {
+      if (index < 0 || index > this.numPages - 1) {
+        return
+      }
+      var filename = this.pages[index]
+      this.page = index
+      return this.extractFile(filename)
+    },
+    setLoadTimeout() {
+      this.loadTimeout = setTimeout(() => {
+        this.loading = true
+      }, 150)
+    },
+    extractFile(filename) {
+      return new Promise(async (resolve) => {
+        this.setLoadTimeout()
+        var file = await this.filesObject[filename].extract()
+        var reader = new FileReader()
+        reader.onload = (e) => {
+          this.mainImg = e.target.result
+          this.loading = false
+          resolve()
+        }
+        reader.onerror = (e) => {
+          console.error(e)
+          this.$toast.error('Read page file failed')
+          this.loading = false
+          resolve()
+        }
+        reader.readAsDataURL(file)
+        clearTimeout(this.loadTimeout)
+      })
+    },
+    async extract() {
+      this.loading = true
+      console.log('Extracting', this.url)
+
+      var buff = await this.$axios.$get(this.url, {
+        responseType: 'blob'
+      })
+      const archive = await Archive.open(buff)
+      this.filesObject = await archive.getFilesObject()
+      var filenames = Object.keys(this.filesObject)
+      this.parseFilenames(filenames)
+
+      var xmlFile = filenames.find((f) => (Path.extname(f) || '').toLowerCase() === '.xml')
+      if (xmlFile) await this.extractXmlFile(xmlFile)
+
+      this.numPages = this.pages.length
+
+      if (this.pages.length) {
+        this.loading = false
+        await this.setPage(0)
+        this.loadedFirstPage = true
+      } else {
+        this.$toast.error('Unable to extract pages')
+        this.loading = false
+      }
+    },
+    async extractXmlFile(filename) {
+      console.log('extracting xml filename', filename)
+      try {
+        var file = await this.filesObject[filename].extract()
+        var reader = new FileReader()
+        reader.onload = (e) => {
+          this.comicMetadata = this.$xmlToJson(e.target.result)
+          console.log('Metadata', this.comicMetadata)
+        }
+        reader.onerror = (e) => {
+          console.error(e)
+        }
+        reader.readAsText(file)
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    parseImageFilename(filename) {
+      var basename = Path.basename(filename, Path.extname(filename))
+      var numbersinpath = basename.match(/\d{1,4}/g)
+      if (!numbersinpath || !numbersinpath.length) {
+        return {
+          index: -1,
+          filename
+        }
+      } else {
+        return {
+          index: Number(numbersinpath[numbersinpath.length - 1]),
+          filename
+        }
+      }
+    },
+    parseFilenames(filenames) {
+      const acceptableImages = ['.jpeg', '.jpg', '.png']
+      var imageFiles = filenames.filter((f) => {
+        return acceptableImages.includes((Path.extname(f) || '').toLowerCase())
+      })
+      var imageFileObjs = imageFiles.map((img) => {
+        return this.parseImageFilename(img)
+      })
+
+      var imagesWithNum = imageFileObjs.filter((i) => i.index >= 0)
+      var orderedImages = imagesWithNum.sort((a, b) => a.index - b.index).map((i) => i.filename)
+      var noNumImages = imageFileObjs.filter((i) => i.index < 0)
+      orderedImages = orderedImages.concat(noNumImages.map((i) => i.filename))
+
+      this.pages = orderedImages
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>
+
+<style scoped>
+#comic-reader {
+  height: calc(100vh - 32px);
+}
+.pagemenu {
+  max-height: calc(100vh - 80px);
+}
+.comicimg {
+  height: 100%;
+  margin: auto;
+}
+.comicwrapper {
+  width: 100vw;
+  height: 100%;
+}
+</style>

components/readers/EpubReader.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="epub-frame" class="w-full">
+    <div id="viewer" class="border border-gray-100 bg-white shadow-md h-full w-full"></div>
+    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center">
+      <p class="text-xs">epub</p>
+      <div class="flex-grow" />
+
+      <p class="text-sm">{{ progress }}%</p>
+    </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: {
+    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)
+      this.book = book
+
+      this.rendition = book.renderTo('viewer', {
+        width: window.innerWidth,
+        height: window.innerHeight - 64,
+        snap: true,
+        manager: 'continuous',
+        flow: 'paginated'
+      })
+      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
+      })
+
+      // const spine_get = book.spine.get.bind(book.spine)
+      // book.spine.get = function (target) {
+      //   var t = spine_get(target)
+      //   console.log(t, target)
+      //   // while (t == null && target.includes('#')) {
+      //   //   target = target.split('#')[0]
+      //   //   t = spine_get(target)
+      //   // }
+      //   return t
+      // }
+
+      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>
+
+<style>
+#epub-frame {
+  height: calc(100% - 32px);
+  max-height: calc(100% - 32px);
+  overflow: hidden;
+}
+</style>

components/readers/MobiReader.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="ebook-viewer w-full h-full">
+    <div class="absolute overflow-y-scroll left-0 right-0 w-full max-w-screen m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
+      <iframe title="html-viewer" class="w-screen"> Loading </iframe>
+    </div>
+    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center z-20">
+      <p class="text-xs">mobi</p>
+      <div class="flex-grow" />
+    </div>
+  </div>
+</template>
+
+<script>
+import MobiParser from '@/assets/ebooks/mobi.js'
+import HtmlParser from '@/assets/ebooks/htmlParser.js'
+import defaultCss from '@/assets/ebooks/basic.js'
+
+export default {
+  props: {
+    url: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {
+    addHtmlCss() {
+      let iframe = document.getElementsByTagName('iframe')[0]
+      if (!iframe) return
+      let doc = iframe.contentDocument
+      if (!doc) return
+      let style = doc.createElement('style')
+      style.id = 'default-style'
+      style.textContent = defaultCss
+      doc.head.appendChild(style)
+    },
+    handleIFrameHeight(iFrame) {
+      const isElement = (obj) => !!(obj && obj.nodeType === 1)
+
+      var body = iFrame.contentWindow.document.body,
+        html = iFrame.contentWindow.document.documentElement
+      iFrame.height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) * 2
+
+      setTimeout(() => {
+        let lastchild = body.lastElementChild
+        let lastEle = body.lastChild
+
+        let itemAs = body.querySelectorAll('a')
+        let itemPs = body.querySelectorAll('p')
+        let lastItemA = itemAs[itemAs.length - 1]
+        let lastItemP = itemPs[itemPs.length - 1]
+        let lastItem
+        if (isElement(lastItemA) && isElement(lastItemP)) {
+          if (lastItemA.clientHeight + lastItemA.offsetTop > lastItemP.clientHeight + lastItemP.offsetTop) {
+            lastItem = lastItemA
+          } else {
+            lastItem = lastItemP
+          }
+        }
+
+        if (!lastchild && !lastItem && !lastEle) return
+        if (lastEle.nodeType === 3 && !lastchild && !lastItem) return
+
+        let nodeHeight = 0
+        if (lastEle.nodeType === 3 && document.createRange) {
+          let range = document.createRange()
+          range.selectNodeContents(lastEle)
+          if (range.getBoundingClientRect) {
+            let rect = range.getBoundingClientRect()
+            if (rect) {
+              nodeHeight = rect.bottom - rect.top
+            }
+          }
+        }
+        var lastChildHeight = isElement(lastchild) ? lastchild.clientHeight + lastchild.offsetTop : 0
+        var lastEleHeight = isElement(lastEle) ? lastEle.clientHeight + lastEle.offsetTop : 0
+        var lastItemHeight = isElement(lastItem) ? lastItem.clientHeight + lastItem.offsetTop : 0
+        iFrame.height = Math.max(lastChildHeight, lastEleHeight, lastItemHeight) + 100 + nodeHeight
+      }, 500)
+    },
+    async initMobi() {
+      // Fetch mobi file as blob
+      var buff = await this.$axios.$get(this.url, {
+        responseType: 'blob'
+      })
+      var reader = new FileReader()
+      reader.onload = async (event) => {
+        var file_content = event.target.result
+
+        let mobiFile = new MobiParser(file_content)
+
+        let content = await mobiFile.render()
+        let htmlParser = new HtmlParser(new DOMParser().parseFromString(content.outerHTML, 'text/html'))
+        var anchoredDoc = htmlParser.getAnchoredDoc()
+
+        let iFrame = document.getElementsByTagName('iframe')[0]
+        iFrame.contentDocument.body.innerHTML = anchoredDoc.documentElement.outerHTML
+
+        // Add css
+        let style = iFrame.contentDocument.createElement('style')
+        style.id = 'default-style'
+        style.textContent = defaultCss
+        iFrame.contentDocument.head.appendChild(style)
+
+        this.handleIFrameHeight(iFrame)
+      }
+      reader.readAsArrayBuffer(buff)
+    }
+  },
+  mounted() {
+    this.initMobi()
+  }
+}
+</script>
+
+<style>
+.ebook-viewer {
+  height: calc(100% - 32px);
+}
+</style>

components/readers/Reader.vue

@@ -0,0 +1,130 @@
+<template>
+  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-bg z-40 pt-8">
+    <div class="h-8 w-full bg-primary flex items-center px-2 fixed top-0 left-0 z-30 box-shadow-sm">
+      <p class="w-5/6 truncate">{{ title }}</p>
+      <div class="flex-grow" />
+      <span class="material-icons text-xl text-white" @click.stop="show = false">close</span>
+    </div>
+    <component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ebookType: null,
+      ebookUrl: null,
+      touchstartX: 0,
+      touchendX: 0
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+          this.registerListeners()
+        } else {
+          this.unregisterListeners()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.showReader
+      },
+      set(val) {
+        this.$store.commit('setShowReader', val)
+      }
+    },
+    title() {
+      return this.selectedBook ? this.selectedBook.book.title : null
+    },
+    selectedBook() {
+      return this.$store.state.selectedBook
+    },
+    readerComponentName() {
+      if (this.ebookType === 'epub') return 'readers-epub-reader'
+      else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
+      else if (this.ebookType === 'comic') return 'readers-comic-reader'
+      return null
+    },
+    ebook() {
+      if (!this.selectedBook || !this.selectedBook.ebooks || !this.selectedBook.ebooks.length) return null
+      return this.selectedBook.ebooks[0]
+    },
+    ebookPath() {
+      return this.ebook ? this.ebook.path : null
+    },
+    folderId() {
+      return this.selectedBook ? this.selectedBook.folderId : null
+    },
+    libraryId() {
+      return this.selectedBook ? this.selectedBook.libraryId : null
+    },
+    ebookRelPath() {
+      return `/ebook/${this.libraryId}/${this.folderId}/${this.ebookPath}`
+    }
+  },
+  methods: {
+    init() {
+      if (!this.ebook) {
+        console.error('No ebook for book', this.selectedBook)
+        return
+      }
+      if (this.ebook.ext === '.epub') {
+        this.ebookType = 'epub'
+      } else if (this.ebook.ext === '.mobi' || this.ebook.ext === '.azw3') {
+        this.ebookType = 'mobi'
+      } else if (this.ebook.ext === '.cbr' || this.ebook.ext === '.cbz') {
+        this.ebookType = 'comic'
+      }
+
+      var serverUrl = this.$store.state.serverUrl
+      this.ebookUrl = `${serverUrl}${this.ebookRelPath}`
+    },
+    next() {
+      if (this.$refs.readerComponent && this.$refs.readerComponent.next) {
+        this.$refs.readerComponent.next()
+      }
+    },
+    prev() {
+      if (this.$refs.readerComponent && this.$refs.readerComponent.prev) {
+        this.$refs.readerComponent.prev()
+      }
+    },
+    handleGesture() {
+      if (this.touchendX < this.touchstartX) {
+        console.log('swiped left')
+
+        this.next()
+      }
+      if (this.touchendX > this.touchstartX) {
+        console.log('swiped right')
+        this.prev()
+      }
+    },
+    touchstart(e) {
+      this.touchstartX = e.changedTouches[0].screenX
+    },
+    touchend(e) {
+      this.touchendX = e.changedTouches[0].screenX
+      this.handleGesture()
+    },
+    registerListeners() {
+      document.body.addEventListener('touchstart', this.touchstart)
+      document.body.addEventListener('touchend', this.touchend)
+    },
+    unregisterListeners() {
+      document.body.removeEventListener('touchstart', this.touchstart)
+      document.body.removeEventListener('touchend', this.touchend)
+    }
+  },
+  beforeDestroy() {
+    this.unregisterListeners()
+  }
+}
+</script>

components/ui/LoadingIndicator.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="w-40">
+    <div class="bg-bg border border-gray-500 py-2 px-5 rounded-lg flex items-center flex-col box-shadow-md">
+      <div class="loader-dots block relative w-20 h-5 mt-2">
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+      </div>
+      <div class="text-gray-200 text-xs font-light mt-2 text-center">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: 'Please Wait...'
+    }
+  }
+}
+</script>
+
+<style>
+.loader-dots div {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.loader-dots div:nth-child(1) {
+  left: 8px;
+  animation: loader-dots1 0.6s infinite;
+}
+.loader-dots div:nth-child(2) {
+  left: 8px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(3) {
+  left: 32px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(4) {
+  left: 56px;
+  animation: loader-dots3 0.6s infinite;
+}
+@keyframes loader-dots1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes loader-dots3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes loader-dots2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+</style>