From 034d858f1804c8a5456693a646b5bed0915c365c Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Apr 2022 19:41:06 -0500
Subject: [PATCH] Change new podcast modal to remove episode download list
 #494, Fix error when importing many episodes (set max size to 5MB) #493, show
 podcast episodes downloading and in queue on podcast landing page

---
 client/components/app/LazyBookshelf.vue       |   7 +-
 client/components/cards/LazyBookCard.vue      |  23 ++--
 client/components/controls/FilterSelect.vue   |  21 +--
 .../components/modals/podcast/EpisodeFeed.vue |  11 +-
 client/components/modals/podcast/NewModal.vue | 122 +++++-------------
 client/pages/item/_id/index.vue               |  64 ++++++++-
 server/Server.js                              |   4 +-
 server/controllers/LibraryItemController.js   |   3 +
 server/controllers/PodcastController.js       |  28 +++-
 server/managers/CoverManager.js               |   5 +-
 server/managers/PodcastManager.js             |  26 ++++
 server/objects/PodcastEpisodeDownload.js      |  30 ++++-
 server/routers/ApiRouter.js                   |   2 +
 server/utils/libraryHelpers.js                |   2 +-
 14 files changed, 222 insertions(+), 126 deletions(-)

diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 797d08e6..7f78d560 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -89,9 +89,12 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
     },
     emptyMessage() {
-      if (this.page === 'series') return `You have no series`
+      if (this.page === 'series') return 'You have no series'
       if (this.page === 'collections') return "You haven't made any collections yet"
-      if (this.hasFilter) return `No Results for filter "${this.filterName}: ${this.filterValue}"`
+      if (this.hasFilter) {
+        if (this.filterName === 'Issues') return 'No Issues'
+        return `No Results for filter "${this.filterName}: ${this.filterValue}"`
+      }
       return 'No results'
     },
     entityName() {
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index a51d720e..9d93301f 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -272,7 +272,7 @@ export default {
       return this.userProgress ? !!this.userProgress.isFinished : false
     },
     showError() {
-      return this.hasMissingParts || this.hasInvalidParts || this.isMissing || this.isInvalid
+      return this.numMissingParts || this.isMissing || this.isInvalid
     },
     isStreaming() {
       return this.store.getters['getlibraryItemIdStreaming'] === this.libraryItemId
@@ -292,22 +292,19 @@ export default {
     isInvalid() {
       return this._libraryItem.isInvalid
     },
-    hasMissingParts() {
-      return this._libraryItem.hasMissingParts
-    },
-    hasInvalidParts() {
-      return this._libraryItem.hasInvalidParts
+    numMissingParts() {
+      if (this.isPodcast) return 0
+      return this.media.numMissingParts
     },
     errorText() {
       if (this.isMissing) return 'Item directory is missing!'
-      else if (this.isInvalid) return 'Item has no audio tracks & ebook'
-      var txt = ''
-      if (this.hasMissingParts) {
-        txt = `${this.hasMissingParts} missing parts.`
+      else if (this.isInvalid) {
+        if (this.isPodcast) return 'Podcast has no episodes'
+        return 'Item has no audio tracks & ebook'
       }
-      if (this.hasInvalidParts) {
-        if (this.hasMissingParts) txt += ' '
-        txt += `${this.hasInvalidParts} invalid parts.`
+      var txt = ''
+      if (this.numMissingParts) {
+        txt = `${this.numMissingParts} missing parts.`
       }
       return txt || 'Unknown Error'
     },
diff --git a/client/components/controls/FilterSelect.vue b/client/components/controls/FilterSelect.vue
index 58b0d700..dc5ed98c 100644
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@@ -132,6 +132,11 @@ export default {
           text: 'Tag',
           value: 'tags',
           sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
         }
       ]
     }
@@ -166,26 +171,26 @@ export default {
     selectedText() {
       if (!this.selected) return ''
       var parts = this.selected.split('.')
-      var filterName = this.selectItems.find((i) => i.value === parts[0]);
-      var filterValue = null;
+      var filterName = this.selectItems.find((i) => i.value === parts[0])
+      var filterValue = null
       if (parts.length > 1) {
         var decoded = this.$decode(parts[1])
         if (decoded.startsWith('aut_')) {
           var author = this.authors.find((au) => au.id == decoded)
-          if (author) filterValue = author.name;
+          if (author) filterValue = author.name
         } else if (decoded.startsWith('ser_')) {
           var series = this.series.find((se) => se.id == decoded)
           if (series) filterValue = series.name
         } else {
-          filterValue = decoded;
+          filterValue = decoded
         }
       }
       if (filterName && filterValue) {
-        return `${filterName.text}: ${filterValue}`;
+        return `${filterName.text}: ${filterValue}`
       } else if (filterName) {
-        return filterName.text;
+        return filterName.text
       } else if (filterValue) {
-        return filterValue;
+        return filterValue
       } else {
         return ''
       }
@@ -212,7 +217,7 @@ export default {
       return ['Finished', 'In Progress', 'Not Started']
     },
     missing() {
-      return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Volume Number', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language', ]
+      return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Volume Number', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language']
     },
     sublistItems() {
       return (this[this.sublist] || []).map((item) => {
diff --git a/client/components/modals/podcast/EpisodeFeed.vue b/client/components/modals/podcast/EpisodeFeed.vue
index eb1c0fe3..b5f94a61 100644
--- a/client/components/modals/podcast/EpisodeFeed.vue
+++ b/client/components/modals/podcast/EpisodeFeed.vue
@@ -124,7 +124,13 @@ export default {
         episodesToDownload = this.episodesSelected.map((episodeIndex) => this.episodes[Number(episodeIndex)])
       }
 
-      console.log('Podcast payload', episodesToDownload)
+      var payloadSize = JSON.stringify(episodesToDownload).length
+      var sizeInMb = payloadSize / 1024 / 1024
+      var sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
+      console.log('Request size', sizeInMb)
+      if (sizeInMb > 4.99) {
+        return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
+      }
 
       this.processing = true
       this.$axios
@@ -144,7 +150,8 @@ export default {
     init() {
       for (let i = 0; i < this.episodes.length; i++) {
         var episode = this.episodes[i]
-        if (episode.enclosure && !this.itemEpisodeMap[episode.enclosure.url]) { // Do not include episodes already downloaded
+        if (episode.enclosure && !this.itemEpisodeMap[episode.enclosure.url]) {
+          // Do not include episodes already downloaded
           this.$set(this.selectedEpisodes, String(i), false)
         }
       }
diff --git a/client/components/modals/podcast/NewModal.vue b/client/components/modals/podcast/NewModal.vue
index 35e247a5..5d55783a 100644
--- a/client/components/modals/podcast/NewModal.vue
+++ b/client/components/modals/podcast/NewModal.vue
@@ -1,63 +1,42 @@
 <template>
-  <modals-modal v-model="show" name="new-podcast-modal" :width="1200" :height="'unset'" :processing="processing">
+  <modals-modal v-model="show" name="new-podcast-modal" :width="1000" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
         <p class="font-book text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div ref="wrapper" id="podcast-wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
-      <div class="flex flex-wrap">
-        <div class="w-full md:w-1/2 p-4">
-          <p class="text-lg font-semibold mb-2">Details</p>
-          <div class="flex flex-wrap">
-            <div v-if="podcast.imageUrl" class="p-1 w-full">
-              <img :src="podcast.imageUrl" class="h-16 w-16 object-contain" />
-            </div>
-            <div class="p-1 w-full">
-              <ui-text-input-with-label v-model="podcast.title" label="Title" @input="titleUpdated" />
-            </div>
-            <div class="p-1 w-full">
-              <ui-text-input-with-label v-model="podcast.author" label="Author" />
-            </div>
-            <div class="p-1 w-full">
-              <ui-text-input-with-label v-model="podcast.feedUrl" label="Feed URL" readonly />
-            </div>
-            <div class="p-1 w-full">
-              <ui-multi-select v-model="podcast.genres" :items="podcast.genres" label="Genres" />
-            </div>
-            <div class="p-1 w-full">
-              <ui-textarea-with-label v-model="podcast.description" label="Description" />
-            </div>
-            <div class="p-1 w-full">
-              <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" @input="folderUpdated" />
-            </div>
-            <div class="p-1 w-full">
-              <ui-text-input-with-label v-model="fullPath" label="Podcast Path" readonly />
-            </div>
+      <div class="w-full p-4">
+        <p class="text-lg font-semibold mb-2">Details</p>
+
+        <div v-if="podcast.imageUrl" class="p-1 w-full">
+          <img :src="podcast.imageUrl" class="h-16 w-16 object-contain" />
+        </div>
+        <div class="flex">
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="podcast.title" label="Title" @input="titleUpdated" />
+          </div>
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="podcast.author" label="Author" />
           </div>
         </div>
-        <div class="w-full md:w-1/2 p-4">
-          <p class="text-lg font-semibold mb-2">Episodes</p>
-          <div ref="episodeContainer" id="episodes-scroll" class="w-full overflow-x-hidden overflow-y-auto">
-            <div class="relative">
-              <div class="absolute top-0 left-0 h-full flex items-center p-2">
-                <ui-checkbox v-model="selectAll" small checkbox-bg="primary" border-color="gray-600" />
-              </div>
-              <div class="px-8 py-2">
-                <p class="font-semibold text-gray-200">Select all episodes</p>
-              </div>
-            </div>
-            <div v-for="(episode, index) in episodes" :key="index" class="relative cursor-pointer" :class="selectedEpisodes[String(index)] ? 'bg-success bg-opacity-10' : index % 2 == 0 ? 'bg-primary bg-opacity-25 hover:bg-opacity-40' : 'bg-primary bg-opacity-5 hover:bg-opacity-25'" @click="toggleSelectEpisode(index)">
-              <div class="absolute top-0 left-0 h-full flex items-center p-2">
-                <ui-checkbox v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
-              </div>
-              <div class="px-8 py-2">
-                <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
-                <p class="break-words mb-1">{{ episode.title }}</p>
-                <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
-                <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
-              </div>
-            </div>
+        <div class="flex">
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="podcast.feedUrl" label="Feed URL" readonly />
+          </div>
+          <div class="w-full md:w-1/2 p-2">
+            <ui-multi-select v-model="podcast.genres" :items="podcast.genres" label="Genres" />
+          </div>
+        </div>
+        <div class="p-2 w-full">
+          <ui-textarea-with-label v-model="podcast.description" label="Description" :rows="3" />
+        </div>
+        <div class="flex">
+          <div class="w-full md:w-1/2 p-2">
+            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" @input="folderUpdated" />
+          </div>
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="fullPath" label="Podcast Path" readonly />
           </div>
         </div>
       </div>
@@ -66,7 +45,7 @@
         <div class="px-4">
           <ui-checkbox v-model="podcast.autoDownloadEpisodes" label="Auto Download Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
         </div>
-        <ui-btn color="success" :disabled="disableSubmit" @click="submit">{{ buttonText }}</ui-btn>
+        <ui-btn color="success" @click="submit">Add Podcast</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -104,8 +83,7 @@ export default {
         itunesId: '',
         itunesArtistId: '',
         autoDownloadEpisodes: false
-      },
-      selectedEpisodes: {}
+      }
     }
   },
   watch: {
@@ -127,16 +105,6 @@ export default {
         this.$emit('input', val)
       }
     },
-    selectAll: {
-      get() {
-        return this.episodesSelected.length == this.episodes.length
-      },
-      set(val) {
-        for (const key in this.selectedEpisodes) {
-          this.selectedEpisodes[key] = val
-        }
-      }
-    },
     title() {
       return this._podcastData.title
     },
@@ -166,17 +134,6 @@ export default {
       if (!this.podcastFeedData) return []
       return this.podcastFeedData.episodes || []
     },
-    episodesSelected() {
-      return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
-    },
-    disableSubmit() {
-      return !this.episodesSelected.length && !this.podcast.autoDownloadEpisodes
-    },
-    buttonText() {
-      if (!this.episodesSelected.length) return 'Add Podcast'
-      if (this.episodesSelected.length == 1) return 'Add Podcast & Download 1 Episode'
-      return `Add Podcast & Download ${this.episodesSelected.length} Episodes`
-    },
     selectedFolder() {
       return this.folders.find((f) => f.id === this.selectedFolderId)
     },
@@ -196,15 +153,7 @@ export default {
       }
       this.fullPath = Path.join(this.selectedFolderPath, this.podcast.title)
     },
-    toggleSelectEpisode(index) {
-      this.selectedEpisodes[String(index)] = !this.selectedEpisodes[String(index)]
-    },
     submit() {
-      var episodesToDownload = []
-      if (this.episodesSelected.length) {
-        episodesToDownload = this.episodesSelected.map((episodeIndex) => this.episodes[Number(episodeIndex)])
-      }
-
       const podcastPayload = {
         path: this.fullPath,
         folderId: this.selectedFolderId,
@@ -224,8 +173,7 @@ export default {
             language: this.podcast.language
           },
           autoDownloadEpisodes: this.podcast.autoDownloadEpisodes
-        },
-        episodesToDownload
+        }
       }
       console.log('Podcast payload', podcastPayload)
 
@@ -260,10 +208,6 @@ export default {
       this.podcast.language = this._podcastData.language || ''
       this.podcast.autoDownloadEpisodes = false
 
-      for (let i = 0; i < this.episodes.length; i++) {
-        this.$set(this.selectedEpisodes, String(i), false)
-      }
-
       if (this.folderItems[0]) {
         this.selectedFolderId = this.folderItems[0].value
         this.folderUpdated()
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index f400c95c..1798e057 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -95,6 +95,21 @@
             <p class="ml-4">Book has no audio tracks but has valid ebook files. The e-reader is experimental and can be turned on in config.</p>
           </div>
 
+          <div v-if="episodeDownloadsQueued.length" class="px-4 py-2 mt-4 bg-info bg-opacity-40 text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0">
+            <div class="flex items-center">
+              <p class="text-sm py-1">{{ episodeDownloadsQueued.length }} Episode{{ episodeDownloadsQueued.length === 1 ? '' : 's' }} queued for download</p>
+
+              <span class="material-icons hover:text-error text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
+            </div>
+          </div>
+
+          <div v-if="episodesDownloading.length" class="px-4 py-2 mt-4 bg-success bg-opacity-20 text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0">
+            <div v-for="episode in episodesDownloading" :key="episode.id" class="flex items-center">
+              <widgets-loading-spinner />
+              <p class="text-sm py-1 pl-4">Downloading episode "{{ episode.episodeDisplayTitle }}"</p>
+            </div>
+          </div>
+
           <!-- Progress -->
           <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
             <p v-if="progressPercent < 1" class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
@@ -163,7 +178,9 @@ export default {
     if (!store.state.user.user) {
       return redirect(`/login?redirect=${route.path}`)
     }
-    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=authors`).catch((error) => {
+
+    // Include episode downloads for podcasts
+    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=authors,downloads`).catch((error) => {
       console.error('Failed', error)
       return false
     })
@@ -181,7 +198,9 @@ export default {
       isProcessingReadUpdate: false,
       fetchingRSSFeed: false,
       showPodcastEpisodeFeed: false,
-      podcastFeedEpisodes: []
+      podcastFeedEpisodes: [],
+      episodesDownloading: [],
+      episodeDownloadsQueued: []
     }
   },
   computed: {
@@ -333,6 +352,20 @@ export default {
     }
   },
   methods: {
+    clearDownloadQueue() {
+      if (confirm('Are you sure you want to clear episode download queue?')) {
+        this.$axios
+          .$get(`/api/podcasts/${this.libraryItemId}/clear-queue`)
+          .then(() => {
+            this.$toast.success('Episode download queue cleared')
+            this.episodeDownloadQueued = []
+          })
+          .catch((error) => {
+            console.error('Failed to clear queue', error)
+            this.$toast.error('Failed to clear queue')
+          })
+      }
+    },
     async findEpisodesClick() {
       if (!this.mediaMetadata.feedUrl) {
         return this.$toast.error('Podcast does not have an RSS Feed')
@@ -425,17 +458,44 @@ export default {
     collectionsClick() {
       this.$store.commit('setSelectedLibraryItem', this.libraryItem)
       this.$store.commit('globals/setShowUserCollectionsModal', true)
+    },
+    episodeDownloadQueued(episodeDownload) {
+      if (episodeDownload.libraryItemId === this.libraryItemId) {
+        this.episodeDownloadsQueued.push(episodeDownload)
+      }
+    },
+    episodeDownloadStarted(episodeDownload) {
+      if (episodeDownload.libraryItemId === this.libraryItemId) {
+        this.episodeDownloadsQueued = this.episodeDownloadsQueued.filter((d) => d.id !== episodeDownload.id)
+        this.episodesDownloading.push(episodeDownload)
+      }
+    },
+    episodeDownloadFinished(episodeDownload) {
+      if (episodeDownload.libraryItemId === this.libraryItemId) {
+        this.episodeDownloadsQueued = this.episodeDownloadsQueued.filter((d) => d.id !== episodeDownload.id)
+        this.episodesDownloading = this.episodesDownloading.filter((d) => d.id !== episodeDownload.id)
+      }
     }
   },
   mounted() {
+    if (this.libraryItem.episodesDownloading) {
+      this.episodeDownloadsQueued = this.libraryItem.episodesDownloading || []
+    }
+
     // use this items library id as the current
     if (this.libraryId) {
       this.$store.commit('libraries/setCurrentLibrary', this.libraryId)
     }
     this.$root.socket.on('item_updated', this.libraryItemUpdated)
+    this.$root.socket.on('episode_download_queued', this.episodeDownloadQueued)
+    this.$root.socket.on('episode_download_started', this.episodeDownloadStarted)
+    this.$root.socket.on('episode_download_finished', this.episodeDownloadFinished)
   },
   beforeDestroy() {
     this.$root.socket.off('item_updated', this.libraryItemUpdated)
+    this.$root.socket.off('episode_download_queued', this.episodeDownloadQueued)
+    this.$root.socket.off('episode_download_started', this.episodeDownloadStarted)
+    this.$root.socket.off('episode_download_finished', this.episodeDownloadFinished)
   }
 }
 </script>
diff --git a/server/Server.js b/server/Server.js
index b195360b..7e14296d 100644
--- a/server/Server.js
+++ b/server/Server.js
@@ -153,8 +153,8 @@ class Server {
 
     app.use(this.auth.cors)
     app.use(fileUpload())
-    app.use(express.urlencoded({ extended: true, limit: "3mb" }));
-    app.use(express.json({ limit: "3mb" }))
+    app.use(express.urlencoded({ extended: true, limit: "5mb" }));
+    app.use(express.json({ limit: "5mb" }))
 
     // Static path to generated nuxt
     const distPath = Path.join(global.appRoot, '/client/dist')
diff --git a/server/controllers/LibraryItemController.js b/server/controllers/LibraryItemController.js
index 18d0b642..56f1cb67 100644
--- a/server/controllers/LibraryItemController.js
+++ b/server/controllers/LibraryItemController.js
@@ -21,6 +21,9 @@ class LibraryItemController {
             }
           }).filter(au => au)
         }
+      } else if (includeEntities.includes('downloads')) {
+        var downloadsInQueue = this.podcastManager.getEpisodeDownloadsInQueue(req.libraryItem.id)
+        item.episodesDownloading = downloadsInQueue.map(d => d.toJSONForClient())
       }
 
       return res.json(item)
diff --git a/server/controllers/PodcastController.js b/server/controllers/PodcastController.js
index b7774a23..a5df7abe 100644
--- a/server/controllers/PodcastController.js
+++ b/server/controllers/PodcastController.js
@@ -29,8 +29,8 @@ class PodcastController {
 
     var podcastPath = payload.path.replace(/\\/g, '/')
     if (await fs.pathExists(podcastPath)) {
-      Logger.error(`[PodcastController] Attempt to create podcast when folder path already exists "${podcastPath}"`)
-      return res.status(400).send('Path already exists')
+      Logger.error(`[PodcastController] Podcast folder already exists "${podcastPath}"`)
+      return res.status(400).send('Podcast already exists')
     }
 
     var success = await fs.ensureDir(podcastPath).then(() => true).catch((error) => {
@@ -63,7 +63,8 @@ class PodcastController {
     // Download and save cover image
     if (payload.media.metadata.imageUrl) {
       // TODO: Scan cover image to library files
-      var coverResponse = await this.coverManager.downloadCoverFromUrl(libraryItem, payload.media.metadata.imageUrl)
+      // Podcast cover will always go into library item folder
+      var coverResponse = await this.coverManager.downloadCoverFromUrl(libraryItem, payload.media.metadata.imageUrl, true)
       if (coverResponse) {
         if (coverResponse.error) {
           Logger.error(`[PodcastController] Download cover error from "${payload.media.metadata.imageUrl}": ${coverResponse.error}`)
@@ -101,6 +102,7 @@ class PodcastController {
         Logger.error('Invalid podcast feed request response')
         return res.status(500).send('Bad response from feed request')
       }
+      Logger.debug(`[PdocastController] Podcast feed size ${(data.data.length / 1024 / 1024).toFixed(2)}MB`)
       var payload = await parsePodcastRssFeedXml(data.data, includeRaw)
       if (!payload) {
         return res.status(500).send('Invalid podcast RSS feed')
@@ -128,6 +130,26 @@ class PodcastController {
     })
   }
 
+  clearEpisodeDownloadQueue(req, res) {
+    if (!req.user.canUpdate) {
+      Logger.error(`[PodcastController] User attempting to clear download queue without permission "${req.user.username}"`)
+      return res.sendStatus(500)
+    }
+    this.podcastManager.clearDownloadQueue(req.params.id)
+    res.sendStatus(200)
+  }
+
+  getEpisodeDownloads(req, res) {
+    var libraryItem = this.db.getLibraryItem(req.params.id)
+    if (!libraryItem || libraryItem.mediaType !== 'podcast') {
+      return res.sendStatus(404)
+    }
+    var downloadsInQueue = this.podcastManager.getEpisodeDownloadsInQueue(libraryItem.id)
+    res.json({
+      downloads: downloadsInQueue.map(d => d.toJSONForClient())
+    })
+  }
+
   async downloadEpisodes(req, res) {
     var libraryItem = this.db.getLibraryItem(req.params.id)
     if (!libraryItem || libraryItem.mediaType !== 'podcast') {
diff --git a/server/managers/CoverManager.js b/server/managers/CoverManager.js
index 10ba1091..b0bcab58 100644
--- a/server/managers/CoverManager.js
+++ b/server/managers/CoverManager.js
@@ -119,9 +119,10 @@ class CoverManager {
     }
   }
 
-  async downloadCoverFromUrl(libraryItem, url) {
+  async downloadCoverFromUrl(libraryItem, url, forceLibraryItemFolder = false) {
     try {
-      var coverDirPath = this.getCoverDirectory(libraryItem)
+      // Force save cover with library item is used for adding new podcasts
+      var coverDirPath = forceLibraryItemFolder ? libraryItem.path : this.getCoverDirectory(libraryItem)
       await fs.ensureDir(coverDirPath)
 
       var temppath = Path.posix.join(coverDirPath, 'cover')
diff --git a/server/managers/PodcastManager.js b/server/managers/PodcastManager.js
index 313459af..73e6d366 100644
--- a/server/managers/PodcastManager.js
+++ b/server/managers/PodcastManager.js
@@ -35,6 +35,23 @@ class PodcastManager {
     }
   }
 
+  getEpisodeDownloadsInQueue(libraryItemId) {
+    return this.downloadQueue.filter(d => d.libraryItemId === libraryItemId)
+  }
+
+  clearDownloadQueue(libraryItemId = null) {
+    if (!this.downloadQueue.length) return
+
+    if (!libraryItemId) {
+      Logger.info(`[PodcastManager] Clearing all downloads in queue (${this.downloadQueue.length})`)
+      this.downloadQueue = []
+    } else {
+      var itemDownloads = this.getEpisodeDownloadsInQueue(libraryItemId)
+      Logger.info(`[PodcastManager] Clearing downloads in queue for item "${libraryItemId}" (${itemDownloads.length})`)
+      this.downloadQueue = this.downloadQueue.filter(d => d.libraryItemId !== libraryItemId)
+    }
+  }
+
   async downloadPodcastEpisodes(libraryItem, episodesToDownload) {
     var index = libraryItem.media.episodes.length + 1
     episodesToDownload.forEach((ep) => {
@@ -50,8 +67,11 @@ class PodcastManager {
   async startPodcastEpisodeDownload(podcastEpisodeDownload) {
     if (this.currentDownload) {
       this.downloadQueue.push(podcastEpisodeDownload)
+      this.emitter('episode_download_queued', podcastEpisodeDownload.toJSONForClient())
       return
     }
+
+    this.emitter('episode_download_started', podcastEpisodeDownload.toJSONForClient())
     this.currentDownload = podcastEpisodeDownload
 
     // Ignores all added files to this dir
@@ -65,11 +85,17 @@ class PodcastManager {
       success = await this.scanAddPodcastEpisodeAudioFile()
       if (!success) {
         await fs.remove(this.currentDownload.targetPath)
+        this.currentDownload.setFinished(false)
       } else {
         Logger.info(`[PodcastManager] Successfully downloaded podcast episode "${this.currentDownload.podcastEpisode.title}"`)
+        this.currentDownload.setFinished(true)
       }
+    } else {
+      this.currentDownload.setFinished(false)
     }
 
+    this.emitter('episode_download_finished', this.currentDownload.toJSONForClient())
+
     this.watcher.removeIgnoreDir(this.currentDownload.libraryItem.path)
     this.currentDownload = null
     if (this.downloadQueue.length) {
diff --git a/server/objects/PodcastEpisodeDownload.js b/server/objects/PodcastEpisodeDownload.js
index 44c407d6..fd083abf 100644
--- a/server/objects/PodcastEpisodeDownload.js
+++ b/server/objects/PodcastEpisodeDownload.js
@@ -10,22 +10,42 @@ class PodcastEpisodeDownload {
     this.libraryItem = null
 
     this.isDownloading = false
+    this.isFinished = false
+    this.failed = false
+
     this.startedAt = null
     this.createdAt = null
     this.finishedAt = null
   }
 
+  toJSONForClient() {
+    return {
+      id: this.id,
+      // podcastEpisode: this.podcastEpisode ? this.podcastEpisode.toJSON() : null,
+      episodeDisplayTitle: this.podcastEpisode ? this.podcastEpisode.bestFilename : null,
+      url: this.url,
+      libraryItemId: this.libraryItem ? this.libraryItem.id : null,
+      isDownloading: this.isDownloading,
+      isFinished: this.isFinished,
+      failed: this.failed,
+      startedAt: this.startedAt,
+      createdAt: this.createdAt,
+      finishedAt: this.finishedAt
+    }
+  }
+
   get targetFilename() {
     return sanitizeFilename(`${this.podcastEpisode.bestFilename}.mp3`)
   }
-
   get targetPath() {
     return Path.join(this.libraryItem.path, this.targetFilename)
   }
-
   get targetRelPath() {
     return this.targetFilename
   }
+  get libraryItemId() {
+    return this.libraryItem ? this.libraryItem.id : null
+  }
 
   setData(podcastEpisode, libraryItem) {
     this.id = getId('epdl')
@@ -34,5 +54,11 @@ class PodcastEpisodeDownload {
     this.libraryItem = libraryItem
     this.createdAt = Date.now()
   }
+
+  setFinished(success) {
+    this.finishedAt = Date.now()
+    this.isFinished = true
+    this.failed = !success
+  }
 }
 module.exports = PodcastEpisodeDownload
\ No newline at end of file
diff --git a/server/routers/ApiRouter.js b/server/routers/ApiRouter.js
index 65062336..8ea23398 100644
--- a/server/routers/ApiRouter.js
+++ b/server/routers/ApiRouter.js
@@ -178,6 +178,8 @@ class ApiRouter {
     this.router.post('/podcasts', PodcastController.create.bind(this))
     this.router.post('/podcasts/feed', PodcastController.getPodcastFeed.bind(this))
     this.router.get('/podcasts/:id/checknew', PodcastController.checkNewEpisodes.bind(this))
+    this.router.get('/podcasts/:id/downloads', PodcastController.getEpisodeDownloads.bind(this))
+    this.router.get('/podcasts/:id/clear-queue', PodcastController.clearEpisodeDownloadQueue.bind(this))
     this.router.post('/podcasts/:id/download-episodes', PodcastController.downloadEpisodes.bind(this))
     this.router.patch('/podcasts/:id/episode/:episodeId', PodcastController.updateEpisode.bind(this))
 
diff --git a/server/utils/libraryHelpers.js b/server/utils/libraryHelpers.js
index 060afbc5..ffe49223 100644
--- a/server/utils/libraryHelpers.js
+++ b/server/utils/libraryHelpers.js
@@ -57,7 +57,7 @@ module.exports = {
     } else if (filterBy === 'issues') {
       filtered = filtered.filter(ab => {
         // TODO: Update filter for issues
-        return ab.isMissing
+        return ab.isMissing || ab.isInvalid
         // return ab.numMissingParts || ab.numInvalidParts || ab.isMissing || ab.isInvalid
       })
     }