Fix latest page to show download indicator, update download button to be responsive right away

components/tables/podcast/LatestEpisodeRow.vue

@@ -41,7 +41,7 @@
 
         <div v-if="userCanDownload">
           <span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
-          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
+          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}</span>
           <span v-else class="material-icons px-2 text-success text-xl">download_done</span>
         </div>
 
@@ -77,6 +77,7 @@ export default {
   data() {
     return {
       isProcessingReadUpdate: false,
+      pendingDownload: false,
       processing: false
     }
   },
@@ -174,14 +175,16 @@ export default {
       return folderObj
     },
     async downloadClick() {
-      if (this.downloadItem) return
+      if (this.downloadItem || this.pendingDownload) return
+      this.pendingDownload = true
       await this.$hapticsImpact()
       if (this.isIos) {
         // no local folders on iOS
-        this.startDownload()
+        await this.startDownload()
       } else {
-        this.download()
+        await this.download()
       }
+      this.pendingDownload = false
     },
     async download(selectedLocalFolder = null) {
       let localFolder = selectedLocalFolder
@@ -215,7 +218,7 @@ export default {
 
       console.log('Local folder', JSON.stringify(localFolder))
 
-      this.startDownload(localFolder)
+      return this.startDownload(localFolder)
     },
     async startDownload(localFolder) {
       var payload = {

pages/bookshelf/latest.vue

@@ -16,7 +16,7 @@ export default {
       recentEpisodes: [],
       totalEpisodes: 0,
       currentPage: 0,
-      localEpisodeMap: {},
+      localLibraryItems: [],
       isLocal: false,
       loadedLibraryId: null
     }
@@ -25,6 +25,24 @@ export default {
   computed: {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    localEpisodes() {
+      const episodes = []
+      this.localLibraryItems.forEach((li) => {
+        if (li.media.episodes?.length) {
+          episodes.push(...li.media.episodes)
+        }
+      })
+      return episodes
+    },
+    localEpisodeMap() {
+      var epmap = {}
+      this.localEpisodes.forEach((localEp) => {
+        if (localEp.serverEpisodeId) {
+          epmap[localEp.serverEpisodeId] = localEp
+        }
+      })
+      return epmap
     }
   },
   methods: {
@@ -61,14 +79,31 @@ export default {
           this.$router.replace('/bookshelf')
         }
       }
+    },
+    async loadLocalPodcastLibraryItems() {
+      this.localLibraryItems = await this.$db.getLocalLibraryItems('podcast')
+    },
+    newLocalLibraryItem(item) {
+      if (item.mediaType !== 'podcast') {
+        return
+      }
+      const matchingLocalLibraryItem = this.localLibraryItems.find((lli) => lli.id === item.id)
+      if (matchingLocalLibraryItem) {
+        matchingLocalLibraryItem.media.episodes = item.media.episodes
+      } else {
+        this.localLibraryItems.push(item)
+      }
     }
   },
   mounted() {
     this.loadRecentEpisodes()
+    this.loadLocalPodcastLibraryItems()
     this.$eventBus.$on('library-changed', this.libraryChanged)
+    this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
   },
   beforeDestroy() {
     this.$eventBus.$off('library-changed', this.libraryChanged)
+    this.$eventBus.$off('new-local-library-item', this.newLocalLibraryItem)
   }
 }
 </script>