Missing audiobooks flagged not deleted, fix close progress loop on stream errors, clickable download toast, consolidate duplicate track error log, improved scanner to ignore non-audio files

client/components/cards/BookCard.vue

@@ -14,7 +14,7 @@
           <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" class="h-full flex items-center justify-center">
+            <div v-show="!isSelectionMode && !isMissing" 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>
@@ -132,7 +132,10 @@ export default {
       return this.userProgress ? !!this.userProgress.isRead : false
     },
     showError() {
-      return this.hasMissingParts || this.hasInvalidParts
+      return this.hasMissingParts || this.hasInvalidParts || this.isMissing
+    },
+    isMissing() {
+      return this.audiobook.isMissing
     },
     hasMissingParts() {
       return this.audiobook.hasMissingParts
@@ -141,6 +144,7 @@ export default {
       return this.audiobook.hasInvalidParts
     },
     errorText() {
+      if (this.isMissing) return 'Audiobook directory is missing!'
       var txt = ''
       if (this.hasMissingParts) {
         txt = `${this.hasMissingParts} missing parts.`

client/components/modals/EditModal.vue

@@ -109,6 +109,7 @@ export default {
     availableTabs() {
       if (!this.userCanUpdate && !this.userCanDownload) return []
       return this.tabs.filter((tab) => {
+        if (tab.id === 'download' && this.isMissing) return false
         if ((tab.id === 'download' || tab.id === 'tracks') && this.userCanDownload) return true
         if (tab.id !== 'download' && tab.id !== 'tracks' && this.userCanUpdate) return true
         return false
@@ -122,6 +123,9 @@ export default {
       var _tab = this.tabs.find((t) => t.id === this.selectedTab)
       return _tab ? _tab.component : ''
     },
+    isMissing() {
+      return this.selectedAudiobook.isMissing
+    },
     selectedAudiobook() {
       return this.$store.state.selectedAudiobook || {}
     },

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

@@ -11,7 +11,7 @@
         <th class="text-left">Filename</th>
         <th class="text-left">Size</th>
         <th class="text-left">Duration</th>
-        <th v-if="userCanDownload" class="text-center">Download</th>
+        <th v-if="showDownload" class="text-center">Download</th>
       </tr>
       <template v-for="track in tracks">
         <tr :key="track.index">
@@ -27,7 +27,7 @@
           <td class="font-mono">
             {{ $secondsToTimestamp(track.duration) }}
           </td>
-          <td v-if="userCanDownload" class="font-mono text-center">
+          <td v-if="showDownload" class="font-mono text-center">
             <a :href="`/local/${track.path}`" download><span class="material-icons icon-text">download</span></a>
           </td>
         </tr>
@@ -64,6 +64,12 @@ export default {
     },
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
+    },
+    isMissing() {
+      return this.audiobook.isMissing
+    },
+    showDownload() {
+      return this.userCanDownload && !this.isMissing
     }
   },
   methods: {

client/components/ui/IconBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="icon-btn rounded-md border border-gray-600 flex items-center justify-center h-9 w-9 relative" :class="className" @click="clickBtn">
+  <button class="icon-btn rounded-md border border-gray-600 flex items-center justify-center h-9 w-9 relative" :disabled="disabled" :class="className" @click="clickBtn">
     <span class="material-icons icon-text">{{ icon }}</span>
   </button>
 </template>
@@ -39,6 +39,9 @@ export default {
 </script>
 
 <style>
+button.icon-btn:disabled {
+  cursor: not-allowed;
+}
 button.icon-btn::before {
   content: '';
   position: absolute;

client/components/ui/Tooltip.vue

@@ -14,7 +14,8 @@ export default {
     direction: {
       type: String,
       default: 'right'
-    }
+    },
+    disabled: Boolean
   },
   data() {
     return {
@@ -25,6 +26,11 @@ export default {
   watch: {
     text() {
       this.updateText()
+    },
+    disabled(newVal) {
+      if (newVal && this.isShowing) {
+        this.hideTooltip()
+      }
     }
   },
   methods: {
@@ -81,6 +87,7 @@ export default {
       tooltip.style.left = left + 'px'
     },
     showTooltip() {
+      if (this.disabled) return
       if (!this.tooltip) {
         this.createTooltip()
       }