Abort backup if it is getting too large #89, support for ebook only book folders #75

client/components/app/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="value" class="w-screen h-screen fixed top-0 left-0 z-50 bg-white text-black">
+  <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-50 bg-white text-black">
     <div class="absolute top-4 right-4 z-10">
       <span class="material-icons cursor-pointer text-4xl" @click="show = false">close</span>
     </div>
@@ -35,10 +35,6 @@
 import ePub from 'epubjs'
 
 export default {
-  props: {
-    value: Boolean,
-    url: String
-  },
   data() {
     return {
       book: null,
@@ -63,12 +59,34 @@ export default {
   computed: {
     show: {
       get() {
-        return this.value
+        return this.$store.state.showEReader
       },
       set(val) {
-        this.$emit('input', val)
+        this.$store.commit('setShowEReader', val)
       }
     },
+    selectedAudiobook() {
+      return this.$store.state.selectedAudiobook
+    },
+    libraryId() {
+      return this.selectedAudiobook.libraryId
+    },
+    folderId() {
+      return this.selectedAudiobook.folderId
+    },
+    ebooks() {
+      return this.selectedAudiobook.ebooks || []
+    },
+    epubEbook() {
+      return this.ebooks.find((eb) => eb.ext === '.epub')
+    },
+    epubPath() {
+      return this.epubEbook ? this.epubEbook.path : null
+    },
+    url() {
+      if (!this.epubPath) return null
+      return `/ebook/${this.libraryId}/${this.folderId}/${this.epubPath}`
+    },
     userToken() {
       return this.$store.getters['user/getToken']
     }
@@ -116,7 +134,7 @@ export default {
     init() {
       this.registerListeners()
 
-      console.log('epub', this.url)
+      console.log('epub', this.url, this.epubEbook, this.ebooks)
       // var book = ePub(this.url, {
       //   requestHeaders: {
       //     Authorization: `Bearer ${this.userToken}`

client/components/cards/BookCard.vue

@@ -14,11 +14,16 @@
           <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
 
           <div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
-            <div v-show="!isSelectionMode && !isMissing" class="h-full flex items-center justify-center">
+            <div v-show="showPlayButton" class="h-full flex items-center justify-center">
               <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="play">
                 <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
               </div>
             </div>
+            <div v-show="showReadButton" class="h-full flex items-center justify-center">
+              <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="clickReadEBook">
+                <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
+              </div>
+            </div>
 
             <div v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-50" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
               <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
@@ -34,9 +39,14 @@
           </div>
 
           <!-- EBook Icon -->
-          <div v-if="showExperimentalFeatures && hasEbook" class="absolute rounded-full bg-blue-500 w-6 h-6 flex items-center justify-center bg-opacity-90" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+          <div
+            v-if="showSmallEBookIcon"
+            class="absolute rounded-full bg-blue-500 flex items-center justify-center bg-opacity-90 hover:scale-125 transform duration-200"
+            :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem`, width: 1.5 * sizeMultiplier + 'rem', height: 1.5 * sizeMultiplier + 'rem' }"
+            @click.stop.prevent="clickReadEBook"
+          >
             <!-- <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">EBook</p> -->
-            <span class="material-icons text-white text-base">auto_stories</span>
+            <span class="material-icons text-white" :style="{ fontSize: sizeMultiplier * 1 + 'rem' }">auto_stories</span>
           </div>
 
           <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
@@ -90,8 +100,10 @@ export default {
     hasEbook() {
       return this.audiobook.numEbooks
     },
+    hasTracks() {
+      return this.audiobook.numTracks
+    },
     isSelectionMode() {
-      // return this.$store.getters['getNumAudiobooksSelected']
       return !!this.selectedAudiobooks.length
     },
     selectedAudiobooks() {
@@ -150,11 +162,23 @@ export default {
       return this.userProgress ? !!this.userProgress.isRead : false
     },
     showError() {
-      return this.hasMissingParts || this.hasInvalidParts || this.isMissing
+      return this.hasMissingParts || this.hasInvalidParts || this.isMissing || this.isIncomplete
+    },
+    showReadButton() {
+      return !this.isSelectionMode && this.showExperimentalFeatures && !this.showPlayButton && this.hasEbook
+    },
+    showPlayButton() {
+      return !this.isSelectionMode && !this.isMissing && !this.isIncomplete && this.hasTracks
+    },
+    showSmallEBookIcon() {
+      return !this.isSelectionMode && this.showExperimentalFeatures && this.hasEbook
     },
     isMissing() {
       return this.audiobook.isMissing
     },
+    isIncomplete() {
+      return this.audiobook.isIncomplete
+    },
     hasMissingParts() {
       return this.audiobook.hasMissingParts
     },
@@ -163,6 +187,7 @@ export default {
     },
     errorText() {
       if (this.isMissing) return 'Audiobook directory is missing!'
+      else if (this.isIncomplete) return 'Audiobook has no audio tracks & ebook'
       var txt = ''
       if (this.hasMissingParts) {
         txt = `${this.hasMissingParts} missing parts.`
@@ -211,6 +236,9 @@ export default {
         e.preventDefault()
         this.selectBtnClick()
       }
+    },
+    clickReadEBook() {
+      this.$store.commit('showEReader', this.audiobook)
     }
   }
 }

client/components/modals/edit-tabs/Download.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
     <p class="text-center text-lg mb-4 py-8">Preparing downloads can take several minutes and will be stored in <span class="bg-primary bg-opacity-75 font-mono p-1 text-base">/metadata/downloads</span>. After the download is ready, it will remain available for 60 minutes, then be deleted.<br />Download will timeout after 15 minutes.</p>
-    <div class="w-full border border-black-200 p-4 my-4">
+    <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-4">
       <div class="flex items-center">
         <div>
           <p class="text-lg">M4B Audiobook File <span class="text-error">*</span></p>
@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <div class="w-full flex items-center justify-center absolute bottom-4 left-0 right-0 text-center">
+    <div v-if="showM4bDownload" class="w-full flex items-center justify-center absolute bottom-4 left-0 right-0 text-center">
       <p class="text-error text-lg">* <strong>Experimental:</strong> Merging multiple .m4b files may have issues. <a href="https://github.com/advplyr/audiobookshelf/issues" class="underline text-blue-600" target="_blank">Report issues here.</a></p>
     </div>
 
@@ -89,6 +89,9 @@ export default {
     audiobookId() {
       return this.audiobook ? this.audiobook.id : null
     },
+    _audiobook() {
+      return this.audiobook || {}
+    },
     downloads() {
       return this.$store.getters['downloads/getDownloads'](this.audiobookId)
     },
@@ -120,6 +123,9 @@ export default {
     },
     totalFiles() {
       return this.audioFiles.length + this.otherFiles.length
+    },
+    showM4bDownload() {
+      return !this._audiobook.isMissing && !this._audiobook.isIncomplete && this._audiobook.tracks.length
     }
   },
   methods: {

client/components/modals/edit-tabs/Tracks.vue

@@ -1,41 +1,44 @@
 <template>
   <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
-    <div class="w-full bg-primary px-4 py-2 flex items-center">
-      <div class="h-7 w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
-        <span class="text-sm font-mono">{{ tracks.length }}</span>
+    <template v-if="hasTracks">
+      <div class="w-full bg-primary px-4 py-2 flex items-center">
+        <div class="h-7 w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+          <span class="text-sm font-mono">{{ tracks.length }}</span>
+        </div>
+        <div class="flex-grow" />
+        <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2" @click.stop="showFullPath = !showFullPath">Full Path</ui-btn>
+        <nuxt-link v-if="userCanUpdate" :to="`/audiobook/${audiobook.id}/edit`" class="mr-4">
+          <ui-btn small color="primary">Manage Tracks</ui-btn>
+        </nuxt-link>
       </div>
-      <div class="flex-grow" />
-      <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2" @click.stop="showFullPath = !showFullPath">Full Path</ui-btn>
-      <nuxt-link v-if="userCanUpdate" :to="`/audiobook/${audiobook.id}/edit`" class="mr-4">
-        <ui-btn small color="primary">Manage Tracks</ui-btn>
-      </nuxt-link>
-    </div>
-    <table class="text-sm tracksTable">
-      <tr class="font-book">
-        <th>#</th>
-        <th class="text-left">Filename</th>
-        <th class="text-left">Size</th>
-        <th class="text-left">Duration</th>
-        <th v-if="showDownload" class="text-center">Download</th>
-      </tr>
-      <template v-for="track in tracksCleaned">
-        <tr :key="track.index">
-          <td class="text-center">
-            <p>{{ track.index }}</p>
-          </td>
-          <td class="font-sans">{{ showFullPath ? track.fullPath : track.filename }}</td>
-          <td class="font-mono">
-            {{ $bytesPretty(track.size) }}
-          </td>
-          <td class="font-mono">
-            {{ $secondsToTimestamp(track.duration) }}
-          </td>
-          <td v-if="showDownload" class="font-mono text-center">
-            <a :href="`/s/book/${audiobook.id}/${track.relativePath}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
-          </td>
+      <table class="text-sm tracksTable">
+        <tr class="font-book">
+          <th>#</th>
+          <th class="text-left">Filename</th>
+          <th class="text-left">Size</th>
+          <th class="text-left">Duration</th>
+          <th v-if="showDownload" class="text-center">Download</th>
         </tr>
-      </template>
-    </table>
+        <template v-for="track in tracksCleaned">
+          <tr :key="track.index">
+            <td class="text-center">
+              <p>{{ track.index }}</p>
+            </td>
+            <td class="font-sans">{{ showFullPath ? track.fullPath : track.filename }}</td>
+            <td class="font-mono">
+              {{ $bytesPretty(track.size) }}
+            </td>
+            <td class="font-mono">
+              {{ $secondsToTimestamp(track.duration) }}
+            </td>
+            <td v-if="showDownload" class="font-mono text-center">
+              <a :href="`/s/book/${audiobook.id}/${track.relativePath}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
+            </td>
+          </tr>
+        </template>
+      </table>
+    </template>
+    <div v-else class="flex my-4 text-center justify-center text-xl">No Audio Tracks</div>
   </div>
 </template>
 
@@ -94,6 +97,9 @@ export default {
     },
     showDownload() {
       return this.userCanDownload && !this.isMissing
+    },
+    hasTracks() {
+      return this.audiobook.tracks.length
     }
   },
   methods: {

client/components/modals/libraries/LibraryItem.vue

@@ -11,7 +11,12 @@
     <div class="flex-grow" />
     <ui-btn v-show="mouseover && !libraryScan && canScan" small color="bg" @click.stop="scan">Scan</ui-btn>
     <span v-show="mouseover && !libraryScan && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4" @click.stop="editClick">edit</span>
-    <span v-show="!libraryScan && mouseover && showEdit && canDelete" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50'" @click.stop="deleteClick">delete</span>
+    <span v-show="!libraryScan && mouseover && showEdit && canDelete && !isDeleting" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50'" @click.stop="deleteClick">delete</span>
+    <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50'" @click.stop="deleteClick">
+      <svg viewBox="0 0 24 24" class="w-6 h-6">
+        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+      </svg>
+    </div>
   </div>
 </template>
 
@@ -27,7 +32,8 @@ export default {
   },
   data() {
     return {
-      mouseover: false
+      mouseover: false,
+      isDeleting: false
     }
   },
   computed: {
@@ -54,12 +60,29 @@ export default {
     editClick() {
       this.$emit('edit', this.library)
     },
-    deleteClick() {
-      if (this.isMain) return
-      this.$emit('delete', this.library)
-    },
     scan() {
       this.$root.socket.emit('scan', this.library.id)
+    },
+    deleteClick() {
+      if (this.isMain) return
+      if (confirm(`Are you sure you want to permanently delete library "${this.library.name}"?`)) {
+        this.isDeleting = true
+        this.$axios
+          .$delete(`/api/library/${this.library.id}`)
+          .then((data) => {
+            this.isDeleting = false
+            if (data.error) {
+              this.$toast.error(data.error)
+            } else {
+              this.$toast.success('Library deleted')
+            }
+          })
+          .catch((error) => {
+            console.error('Failed to delete library', error)
+            this.$toast.error('Failed to delete library')
+            this.isDeleting = false
+          })
+      }
     }
   },
   mounted() {}

client/components/tables/LibrariesTable.vue

@@ -8,7 +8,7 @@
     </div>
 
     <template v-for="library in libraries">
-      <modals-libraries-library-item :key="library.id" :library="library" :selected="currentLibraryId === library.id" :show-edit="true" @edit="editLibrary" @delete="deleteLibrary" @click="clickLibrary" />
+      <modals-libraries-library-item :key="library.id" :library="library" :selected="currentLibraryId === library.id" :show-edit="true" @edit="editLibrary" @click="clickLibrary" />
     </template>
     <modals-edit-library-modal v-model="showLibraryModal" :library="selectedLibrary" />
   </div>
@@ -38,27 +38,6 @@ export default {
       await this.$store.dispatch('libraries/fetch', library.id)
       this.$router.push(`/library/${library.id}`)
     },
-    deleteLibrary(library) {
-      if (library.id === 'main') return
-      // if (confirm(`Are you sure you want to permanently delete user "${user.username}"?`)) {
-      //   this.isDeletingUser = true
-      //   this.$axios
-      //     .$delete(`/api/user/${user.id}`)
-      //     .then((data) => {
-      //       this.isDeletingUser = false
-      //       if (data.error) {
-      //         this.$toast.error(data.error)
-      //       } else {
-      //         this.$toast.success('User deleted')
-      //       }
-      //     })
-      //     .catch((error) => {
-      //       console.error('Failed to delete user', error)
-      //       this.$toast.error('Failed to delete user')
-      //       this.isDeletingUser = false
-      //     })
-      // }
-    },
     clickAddLibrary() {
       this.selectedLibrary = null
       this.showLibraryModal = true