Add published at to podcast episode row #428, Fix podcast select episodes, fix save order of podcast episode, fix remove podcast episode

client/components/modals/item/tabs/Chapters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
     <div class="w-full mb-4">
-      <div class="w-full p-4 bg-primary">
+      <div v-if="chapters.length" class="w-full p-4 bg-primary">
         <p>Audiobook Chapters</p>
       </div>
       <div v-if="!chapters.length" class="flex my-4 text-center justify-center text-xl">No Chapters</div>

client/components/modals/podcast/EpisodeFeed.vue

@@ -31,7 +31,7 @@
       <div class="flex justify-end pt-4">
         <div class="relative">
           <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <ui-checkbox small checkbox-bg="primary" border-color="gray-600" v-on:input="selectedEpisodes = episodes.map(episode => episode.enclosure && itemEpisodeMap[episode.enclosure.url] ? false : !allSelected)" v-bind:value="allSelected" v-bind:disabled="allDownloaded" />
+            <ui-checkbox v-model="selectAll" small checkbox-bg="primary" border-color="gray-600" :disabled="allDownloaded" />
           </div>
           <div class="px-8 py-2">
             <p :class="!allDownloaded ? 'font-semibold text-gray-200' : 'text-gray-400'">Select all episodes</p>
@@ -62,6 +62,14 @@ export default {
       selectedEpisodes: {}
     }
   },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
   computed: {
     show: {
       get() {
@@ -71,23 +79,22 @@ 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() {
       if (!this.libraryItem) return ''
       return this.libraryItem.media.metadata.title || 'Unknown'
     },
-    allSelected() {
-      try {
-        const values = Object.values(this.selectedEpisodes).filter((_, index) => !(this.episodes[index].enclosure && this.itemEpisodeMap[this.episodes[index].enclosure.url]))
-
-        if(!values.length) return false
-        return values.filter(episode => !episode).length === 0
-      } catch(error) {
-        console.error("Error while filtering selected episodes", error);
-        return false
-      }
-    },
     allDownloaded() {
-      return Object.values(this.episodes).filter(episode => !(episode.enclosure && this.itemEpisodeMap[episode.enclosure.url])).length === 0
+      return Object.values(this.episodes).filter((episode) => !(episode.enclosure && this.itemEpisodeMap[episode.enclosure.url])).length === 0
     },
     episodesSelected() {
       return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
@@ -134,6 +141,14 @@ export default {
           this.processing = false
           this.$toast.error(errorMsg)
         })
+    },
+    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
+          this.$set(this.selectedEpisodes, String(i), false)
+        }
+      }
     }
   },
   mounted() {}

client/components/modals/podcast/NewModal.vue

@@ -41,7 +41,7 @@
           <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 small checkbox-bg="primary" border-color="gray-600" v-on:input="selectedEpisodes = episodes.map(_ => !allSelected)" v-bind:value="allSelected" />
+                <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>
@@ -128,6 +128,16 @@ 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
     },
@@ -157,9 +167,6 @@ export default {
       if (!this.podcastFeedData) return []
       return this.podcastFeedData.episodes || []
     },
-    allSelected() {
-      return Object.values(this.selectedEpisodes).filter(episode => !episode).length === 0
-    },
     episodesSelected() {
       return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
     },

client/components/tables/podcast/EpisodeTableRow.vue

@@ -22,6 +22,8 @@
           <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
             <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
           </ui-tooltip>
+
+          <p v-if="publishedAt" class="px-4 text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
         </div>
       </div>
       <div class="w-24 min-w-24" />
@@ -103,6 +105,9 @@ export default {
       if (this.userIsFinished) return 'Finished'
       var remaining = Math.floor(this.itemProgress.duration - this.itemProgress.currentTime)
       return `${this.$elapsedPretty(remaining)} left`
+    },
+    publishedAt() {
+      return this.episode.publishedAt
     }
   },
   methods: {
@@ -144,6 +149,7 @@ export default {
         })
     },
     removeClick() {
+      if (confirm(`Are you sure you want to remove episode ${this.title}?\nNote: Does not delete from file system`)) {
         this.processingRemove = true
 
         this.$axios
@@ -159,6 +165,7 @@ export default {
             this.processingRemove = false
           })
       }
+    }
   },
   mounted() {}
 }

server/controllers/LibraryItemController.js

@@ -210,7 +210,7 @@ class LibraryItemController {
   }
 
   // PATCH: api/items/:id/episodes
-  async updateEpisodes(req, res) {
+  async updateEpisodes(req, res) { // For updating podcast episode order
     var libraryItem = req.libraryItem
     var orderedFileData = req.body.episodes
     if (!libraryItem.media.setEpisodeOrder) {
@@ -227,7 +227,7 @@ class LibraryItemController {
   async removeEpisode(req, res) {
     var episodeId = req.params.episodeId
     var libraryItem = req.libraryItem
-    if (!libraryItem.mediaType !== 'podcast') {
+    if (libraryItem.mediaType !== 'podcast') {
       Logger.error(`[LibraryItemController] removeEpisode invalid media type ${libraryItem.id}`)
       return res.sendStatus(500)
     }

server/objects/mediaTypes/Podcast.js

@@ -198,6 +198,7 @@ class Podcast {
   }
 
   setEpisodeOrder(episodeIds) {
+    episodeIds.reverse() // episode Ids will already be in descending order
     this.episodes = this.episodes.map(ep => {
       var indexOf = episodeIds.findIndex(id => id === ep.id)
       ep.index = indexOf + 1