Ebook and comic reader #14

2026-08-27 13:54:01 +02:00 · 2021-10-17 20:20:00 -05:00
parent 3234e7ef06
commit 5a025b3a03
21 changed files with 2139 additions and 14 deletions
@@ -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>