change color of book read icon #105, basic .pdf reader #107, fix: cover path updating properly #102, step forward/backward from book edit modal #100, add all files tab to edit modal #99, select input auto submit on blur #98

client/components/app/BookShelf.vue

@@ -23,7 +23,7 @@
             <template v-for="entity in shelf">
               <cards-group-card v-if="showGroups" :key="entity.id" :width="bookCoverWidth" :group="entity" @click="clickGroup" />
               <!-- <cards-book-3d :key="entity.id" v-else :width="100" :src="$store.getters['audiobooks/getBookCoverSrc'](entity.book)" /> -->
-              <cards-book-card v-else :key="entity.id" :show-volume-number="!!selectedSeries" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" />
+              <cards-book-card v-else :key="entity.id" :show-volume-number="!!selectedSeries" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @edit="editBook" />
             </template>
           </div>
           <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
@@ -138,6 +138,11 @@ export default {
     }
   },
   methods: {
+    editBook(audiobook) {
+      var bookIds = this.entities.map((e) => e.id)
+      this.$store.commit('setBookshelfBookIds', bookIds)
+      this.$store.commit('showEditModal', audiobook)
+    },
     clickGroup(group) {
       this.$emit('update:selectedSeries', group.name)
     },

client/components/app/BookShelfRow.vue

@@ -4,7 +4,7 @@
       <div class="w-full h-full" :style="{ marginTop: sizeMultiplier + 'rem' }">
         <div class="flex items-center -mb-2">
           <template v-for="entity in shelf.books">
-            <cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" />
+            <cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" @edit="editBook" />
           </template>
         </div>
       </div>
@@ -53,6 +53,11 @@ export default {
     }
   },
   methods: {
+    editBook(audiobook) {
+      var bookIds = this.shelf.books.map((e) => e.id)
+      this.$store.commit('setBookshelfBookIds', bookIds)
+      this.$store.commit('showEditModal', audiobook)
+    },
     scrolled() {
       clearTimeout(this.scrollTimer)
       this.scrollTimer = setTimeout(() => {

client/components/app/PdfReader.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="w-full pt-20">
+    <div :style="{ height: pdfHeight + 'px' }" class="overflow-hidden m-auto">
+      <div class="flex items-center justify-center">
+        <div class="px-12">
+          <span class="material-icons text-5xl text-black" :class="!canGoPrev ? 'text-opacity-10' : 'cursor-pointer text-opacity-30 hover:text-opacity-90'" @click.stop.prevent="goPrevPage" @mousedown.prevent>arrow_back_ios</span>
+        </div>
+        <div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="w-full h-full overflow-auto">
+          <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
+          <pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md" :src="src" :page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event"></pdf>
+        </div>
+
+        <div class="px-12">
+          <span class="material-icons text-5xl text-black" :class="!canGoNext ? 'text-opacity-10' : 'cursor-pointer text-opacity-30 hover:text-opacity-90'" @click.stop.prevent="goNextPage" @mousedown.prevent>arrow_forward_ios</span>
+        </div>
+      </div>
+    </div>
+    <div class="text-center py-2 text-lg">
+      <p>{{ page }} / {{ numPages }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import pdf from 'vue-pdf'
+
+export default {
+  components: {
+    pdf
+  },
+  props: {
+    src: String
+  },
+  data() {
+    return {
+      rotate: 0,
+      loadedRatio: 0,
+      page: 1,
+      numPages: 0
+    }
+  },
+  computed: {
+    pdfWidth() {
+      return this.pdfHeight * 0.6667
+    },
+    pdfHeight() {
+      return window.innerHeight - 120
+    },
+    canGoNext() {
+      return this.page < this.numPages
+    },
+    canGoPrev() {
+      return this.page > 1
+    }
+  },
+  methods: {
+    numPagesLoaded(e) {
+      this.numPages = e
+    },
+    goPrevPage() {
+      if (this.page <= 1) return
+      this.page--
+    },
+    goNextPage() {
+      if (this.page >= this.numPages) return
+      this.page++
+    },
+    error(err) {
+      console.error(err)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/app/Reader.vue

@@ -14,7 +14,7 @@
     </div>
 
     <!-- EPUB -->
-    <div v-if="epubEbook" class="h-full flex items-center">
+    <div v-if="ebookType === 'epub'" class="h-full flex items-center">
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center overflow-x-hidden">
         <span v-show="hasPrev" class="material-icons text-black text-opacity-30 hover:text-opacity-80 cursor-pointer text-8xl" @mousedown.prevent @click="pageLeft">chevron_left</span>
       </div>
@@ -30,11 +30,17 @@
       </div>
     </div>
     <!-- MOBI/AZW3 -->
-    <div v-else class="h-full max-h-full w-full">
+    <div v-else-if="ebookType === 'mobi'" class="h-full max-h-full w-full">
       <div class="ebook-viewer absolute overflow-y-scroll left-0 right-0 top-12 w-full max-w-4xl m-auto z-10 border border-black border-opacity-20">
         <iframe title="html-viewer" width="100%"> Loading </iframe>
       </div>
     </div>
+    <!-- PDF -->
+    <div v-else-if="ebookType === 'pdf'" class="h-full flex items-center">
+      <app-pdf-reader :src="ebookUrl" />
+    </div>
+
+    <div class="absolute bottom-2 left-2">{{ ebookType }}</div>
   </div>
 </template>
 
@@ -55,7 +61,9 @@ export default {
       author: '',
       progress: 0,
       hasNext: true,
-      hasPrev: false
+      hasPrev: false,
+      ebookType: '',
+      ebookUrl: ''
     }
   },
   watch: {
@@ -97,28 +105,23 @@ export default {
     epubEbook() {
       return this.ebooks.find((eb) => eb.ext === '.epub')
     },
-    epubPath() {
-      return this.epubEbook ? this.epubEbook.path : null
-    },
     mobiEbook() {
       return this.ebooks.find((eb) => eb.ext === '.mobi' || eb.ext === '.azw3')
     },
-    mobiPath() {
-      return this.mobiEbook ? this.mobiEbook.path : null
-    },
-    mobiUrl() {
-      if (!this.mobiPath) return null
-      return `/ebook/${this.libraryId}/${this.folderId}/${this.mobiPath}`
-    },
-    url() {
-      if (!this.epubPath) return null
-      return `/ebook/${this.libraryId}/${this.folderId}/${this.epubPath}`
+    pdfEbook() {
+      return this.ebooks.find((eb) => eb.ext === '.pdf')
     },
     userToken() {
       return this.$store.getters['user/getToken']
+    },
+    selectedAudiobookFile() {
+      return this.$store.state.selectedAudiobookFile
     }
   },
   methods: {
+    getEbookUrl(path) {
+      return `/ebook/${this.libraryId}/${this.folderId}/${path}`
+    },
     changedChapter() {
       if (this.rendition) {
         this.rendition.display(this.selectedChapter)
@@ -156,11 +159,28 @@ export default {
     },
     init() {
       this.registerListeners()
-
-      if (this.epubEbook) {
+      if (this.selectedAudiobookFile) {
+        this.ebookUrl = this.getEbookUrl(this.selectedAudiobookFile.path)
+        if (this.selectedAudiobookFile.ext === '.pdf') {
+          this.ebookType = 'pdf'
+        } else if (this.selectedAudiobookFile.ext === '.mobi' || this.selectedAudiobookFile.ext === '.azw3') {
+          this.ebookType = 'mobi'
+          this.initMobi()
+        } else if (this.selectedAudiobookFile.ext === '.epub') {
+          this.ebookType = 'epub'
+          this.initEpub()
+        }
+      } else if (this.epubEbook) {
+        this.ebookType = 'epub'
+        this.ebookUrl = this.getEbookUrl(this.epubEbook.path)
         this.initEpub()
       } else if (this.mobiEbook) {
+        this.ebookType = 'mobi'
+        this.ebookUrl = this.getEbookUrl(this.mobiEbook.path)
         this.initMobi()
+      } else if (this.pdfEbook) {
+        this.ebookType = 'pdf'
+        this.ebookUrl = this.getEbookUrl(this.pdfEbook.path)
       }
     },
     addHtmlCss() {
@@ -219,7 +239,7 @@ export default {
     },
     async initMobi() {
       // Fetch mobi file as blob
-      var buff = await this.$axios.$get(this.mobiUrl, {
+      var buff = await this.$axios.$get(this.ebookUrl, {
         responseType: 'blob'
       })
       var reader = new FileReader()
@@ -251,7 +271,7 @@ export default {
       //     Authorization: `Bearer ${this.userToken}`
       //   }
       // })
-      var book = ePub(this.url)
+      var book = ePub(this.ebookUrl)
       this.book = book
 
       this.rendition = book.renderTo('viewer', {