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

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() {}