From 23cc6bb2107a48d49b6a3ca4c471a28220e4e56d Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 10 Apr 2022 11:01:50 -0500
Subject: [PATCH] Add published at to podcast episode row #428, Fix podcast
 select episodes, fix save order of podcast episode, fix remove podcast
 episode

---
 .../components/modals/item/tabs/Chapters.vue  |  2 +-
 .../components/modals/podcast/EpisodeFeed.vue | 41 +++++++++++++------
 client/components/modals/podcast/NewModal.vue | 15 +++++--
 .../tables/podcast/EpisodeTableRow.vue        | 33 +++++++++------
 server/controllers/LibraryItemController.js   |  4 +-
 server/objects/mediaTypes/Podcast.js          |  1 +
 6 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/client/components/modals/item/tabs/Chapters.vue b/client/components/modals/item/tabs/Chapters.vue
index fd1fd371..a367d86e 100644
--- a/client/components/modals/item/tabs/Chapters.vue
+++ b/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>
diff --git a/client/components/modals/podcast/EpisodeFeed.vue b/client/components/modals/podcast/EpisodeFeed.vue
index 8ca563c7..508409cd 100644
--- a/client/components/modals/podcast/EpisodeFeed.vue
+++ b/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() {}
diff --git a/client/components/modals/podcast/NewModal.vue b/client/components/modals/podcast/NewModal.vue
index 1ced6c74..9d985809 100644
--- a/client/components/modals/podcast/NewModal.vue
+++ b/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])
     },
diff --git a/client/components/tables/podcast/EpisodeTableRow.vue b/client/components/tables/podcast/EpisodeTableRow.vue
index 8ba6eb3c..3d0a346d 100644
--- a/client/components/tables/podcast/EpisodeTableRow.vue
+++ b/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,20 +149,22 @@ export default {
         })
     },
     removeClick() {
-      this.processingRemove = true
+      if (confirm(`Are you sure you want to remove episode ${this.title}?\nNote: Does not delete from file system`)) {
+        this.processingRemove = true
 
-      this.$axios
-        .$delete(`/api/items/${this.libraryItemId}/episode/${this.episode.id}`)
-        .then((updatedPodcast) => {
-          console.log(`Episode removed from podcast`, updatedPodcast)
-          this.$toast.success('Episode removed from podcast')
-          this.processingRemove = false
-        })
-        .catch((error) => {
-          console.error('Failed to remove episode from podcast', error)
-          this.$toast.error('Failed to remove episode from podcast')
-          this.processingRemove = false
-        })
+        this.$axios
+          .$delete(`/api/items/${this.libraryItemId}/episode/${this.episode.id}`)
+          .then((updatedPodcast) => {
+            console.log(`Episode removed from podcast`, updatedPodcast)
+            this.$toast.success('Episode removed from podcast')
+            this.processingRemove = false
+          })
+          .catch((error) => {
+            console.error('Failed to remove episode from podcast', error)
+            this.$toast.error('Failed to remove episode from podcast')
+            this.processingRemove = false
+          })
+      }
     }
   },
   mounted() {}
diff --git a/server/controllers/LibraryItemController.js b/server/controllers/LibraryItemController.js
index 8b11f711..fb939433 100644
--- a/server/controllers/LibraryItemController.js
+++ b/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)
     }
diff --git a/server/objects/mediaTypes/Podcast.js b/server/objects/mediaTypes/Podcast.js
index 708569ea..2d820605 100644
--- a/server/objects/mediaTypes/Podcast.js
+++ b/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