Update Podcasts

package.json

@@ -9,13 +9,15 @@
   },
   "dependencies": {
     "@iconify-icons/bi": "^1.2.2",
+    "@types/sanitize-html": "^2.9.0",
     "@vueuse/core": "^10.2.1",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
     "icecast-metadata-stats": "^0.1.1",
     "lodash-es": "^4.17.21",
     "md5-es": "^1.8.2",
     "pinia": "^2.0.28",
+    "sanitize-html": "^2.11.0",
     "vue": "^2.7.0",
     "vue-infinite-loading": "^2.4.5",
     "vue-router": "^3.5.2",

src/library/podcast/PodcastDetails.vue

@@ -15,45 +15,59 @@
           <Icon icon="shuffle" /> Shuffle
         </b-button>
         <OverflowMenu class="px-1">
-          <ContextMenuItem icon="x" variant="danger" @click="deletePodcast">
+          <ContextMenuItem icon="trash" variant="danger" @click="deletePodcast">
             Delete
           </ContextMenuItem>
         </OverflowMenu>
       </div>
     </Hero>
 
-    <BaseTable v-if="podcast.tracks.length > 0">
+    <BaseTable v-if="podcast?.tracks.length > 0" ref="el">
       <BaseTableHead>
         <th class="text-right d-none d-md-table-cell">
           Duration
         </th>
       </BaseTableHead>
       <tbody>
-        <tr v-for="(item, index) in podcast.tracks" :key="index"
-            :class="{'active': item.id === playingTrackId, 'disabled': item.isUnavailable}"
-            @click="playTrack(item)">
-          <CellTrackNumber :active="item.id === playingTrackId && isPlaying" :value="item.track" />
+        <tr v-for="item in podcast?.tracks.slice(0, tracksEnd)" :key="`${item.id}-${item.episodeStatus}`" :class="{'active': item.id === playingTrackId, 'disabled': item.isUnavailable}" @click="playTrack(item)">
+          <td v-if="item.episodeStatus === 'downloading'" class="">
+            <Icon icon="repeat" spin class="text-warning h4" />
+          </td>
+          <CellTrackNumber v-else :active="item.id === playingTrackId && isPlaying" :value="item.track" />
           <CellTitle :track="item">
             {{ item.title }} <Icon v-if="item.playCount > 0" icon="check" />
           </CellTitle>
           <CellDuration :track="item" />
-          <CellActions :track="item" />
+          <CellActions :track="item">
+            <ContextMenuItem v-if="item.isUnavailable" icon="download" variant="warning" @click="downloadEpisode(item, item.episodeStatus === 'downloading')">
+              {{ item.episodeStatus === 'downloading' ? 'ReDownload' : 'Download' }} Episode
+            </ContextMenuItem>
+            <template v-else>
+              <b-dropdown-divider />
+              <ContextMenuItem icon="trash" variant="danger" @click="deleteEpisode(item)">
+                Delete Episode
+              </ContextMenuItem>
+            </template>
+          </CellActions>
         </tr>
       </tbody>
     </BaseTable>
     <EmptyIndicator v-else />
+    <InfiniteLoader :loading="loading" :has-more="hasMore" @load-more="loadMore" />
   </ContentLoader>
 </template>
+
 <script lang="ts">
   import { defineComponent } from 'vue'
+  import { usePodcastStore } from '@/library/podcast/store'
   import CellTrackNumber from '@/library/track/CellTrackNumber.vue'
   import CellActions from '@/library/track/CellActions.vue'
   import CellDuration from '@/library/track/CellDuration.vue'
   import CellTitle from '@/library/track/CellTitle.vue'
   import BaseTable from '@/library/track/BaseTable.vue'
   import BaseTableHead from '@/library/track/BaseTableHead.vue'
-  import { Track } from '@/shared/api'
   import OverflowFade from '@/shared/components/OverflowFade.vue'
+  import { Podcast, Track, UnsupportedOperationError } from '@/shared/api'
 
   export default defineComponent({
     components: {
@@ -68,26 +82,53 @@
     props: {
       id: { type: String, required: true },
     },
+    setup() {
+      return { podcastStore: usePodcastStore() }
+    },
     data() {
       return {
-        podcast: null as null | any,
+        loading: false,
+        hasMore: true,
+        tracksEnd: 25,
+        traksStep: 25,
+        showAddModal: false,
+        unsupported: false,
       }
     },
     computed: {
+      podcast(): null | Podcast {
+        return this.podcastStore.getPodcast(this.id) || null
+      },
       isPlaying(): boolean {
         return this.$store.getters['player/isPlaying']
       },
       playingTrackId(): any {
         return this.$store.getters['player/trackId']
       },
       playableTracks(): Track[] {
-        return this.podcast.tracks.filter((x: any) => !x.isUnavailable)
+        return this.podcast?.tracks?.filter((x: any) => !x.isUnavailable) || []
       }
     },
     async created() {
-      this.podcast = await this.$api.getPodcast(this.id)
+      try {
+        await this.podcastStore.load()
+      } catch (err) {
+        if (err instanceof UnsupportedOperationError) {
+          this.unsupported = true
+          return
+        }
+        throw err
+      }
     },
     methods: {
+      async loadMore() {
+        this.loading = true
+        const tracks = this.podcast?.tracks || []
+        const tracksLen = tracks?.length || 0
+        this.tracksEnd = this.tracksEnd + this.traksStep < tracksLen ? this.tracksEnd + this.traksStep : tracksLen
+        this.hasMore = tracksLen > this.tracksEnd
+        setTimeout(() => { this.loading = false }, 500)
+      },
       async playNow() {
         return this.$store.dispatch('player/playNow', {
           tracks: this.playableTracks,
@@ -112,10 +153,19 @@
         })
       },
       async deletePodcast() {
-        this.podcast = null
-        await this.$api.deletePodcast(this.id)
+        await this.podcastStore.delete(this.id)
         return this.$router.replace({ name: 'podcasts' })
-      }
+      },
+      async downloadEpisode(item: any, reDownload: boolean) {
+        if (reDownload) {
+          await this.podcastStore.redownloadEpisode(this.id, item.id)
+          return
+        }
+        await this.podcastStore.downloadEpisode(this.id, item.id)
+      },
+      async deleteEpisode(item: any) {
+        await this.podcastStore.deleteEpisode(this.id, item.id)
+      },
     }
   })
 </script>

src/library/podcast/PodcastLibrary.vue

@@ -22,8 +22,8 @@
         </b-button>
       </div>
     </div>
-    <ContentLoader v-slot :loading="items === null">
-      <Tiles v-if="items.length > 0" square>
+    <ContentLoader v-slot :loading="podcasts === null">
+      <Tiles v-if="podcasts.length > 0" square>
         <Tile v-for="item in sortedItems" :key="item.id"
               :image="item.image"
               :to="{name: 'podcast', params: { id: item.id } }"
@@ -42,6 +42,8 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue'
+  import { storeToRefs } from 'pinia'
+  import { usePodcastStore } from '@/library/podcast/store'
   import { orderBy } from 'lodash-es'
   import AddPodcastModal from '@/library/podcast/AddPodcastModal.vue'
   import { UnsupportedOperationError } from '@/shared/api'
@@ -53,26 +55,29 @@
     props: {
       sort: { type: String, default: null },
     },
+    setup() {
+      const podcastStore = usePodcastStore()
+      const { podcasts } = storeToRefs(podcastStore)
+      return { podcasts, podcastStore }
+    },
     data() {
       return {
-        items: null as null | any[],
         showAddModal: false,
         unsupported: false,
       }
     },
     computed: {
       sortedItems(): any[] {
         return this.sort === 'a-z'
-          ? orderBy(this.items, 'name')
-          : orderBy(this.items, 'updatedAt', 'desc')
+          ? orderBy(this.podcasts, 'name')
+          : orderBy(this.podcasts, 'updatedAt', 'desc')
       },
     },
     async created() {
       try {
-        this.items = await this.$api.getPodcasts()
+        this.podcastStore.load()
       } catch (err) {
         if (err instanceof UnsupportedOperationError) {
-          this.items = []
           this.unsupported = true
           return
         }
@@ -81,15 +86,18 @@
     },
     methods: {
       async refresh() {
-        await this.$api.refreshPodcasts()
-        this.items = await this.$api.getPodcasts()
+        try {
+          await this.podcastStore.refresh()
+        } catch (err) {
+          console.log(err)
+        }
       },
       async add(url: string) {
-        await this.$api.addPodcast(url)
-        this.items = await this.$api.getPodcasts()
-        // Backend doesn't always download metadata immediately. Wait and refresh again.
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        this.items = await this.$api.getPodcasts()
+        try {
+          await this.podcastStore.add(url)
+        } catch (err) {
+          console.log(err)
+        }
       },
     }
   })

src/library/podcast/store.ts

@@ -0,0 +1,124 @@
+import { defineStore } from 'pinia'
+import { Podcast } from '@/shared/api'
+import { orderBy } from 'lodash-es'
+
+export const usePodcastStore = defineStore('podcast', {
+  state: () => ({
+    podcasts: null as null | Podcast[],
+
+    _downloadingQueue: [] as string[],
+    _timer: null as null | number,
+  }),
+  actions: {
+    async load(force = false) {
+      if (this.podcasts !== null && !force) return
+
+      const podcasts = await this.api.getPodcasts()
+      this.podcasts = orderBy(podcasts, 'createdAt')
+      if (podcasts) {
+        podcasts.forEach(p => {
+          p?.tracks.forEach(t => {
+            if (t.episodeStatus === 'downloading') {
+              if (this._downloadingQueue.includes(p.id)) return
+              this._downloadingQueue.push(p.id)
+            }
+          })
+        })
+        if (this._downloadingQueue.length > 0) await this.downloadingQueueHandler()
+      }
+    },
+    async loadPodcast(id: string) {
+      if (!this.podcasts) return
+
+      const i = this.podcasts.findIndex(p => p.id === id)
+      if (i < 0) return
+
+      const podcast = await this.api.getPodcast(id)
+      if (!podcast) return
+
+      this.podcasts = [...this.podcasts.slice(0, i), podcast, ...this.podcasts.slice(i, this.podcasts.length - 1)]
+    },
+    async refresh() {
+      try {
+        await this.api.refreshPodcasts()
+        await this.load(true)
+      } catch (e) {
+
+      }
+    },
+    async add(url: string) {
+      try {
+        await this.api.addPodcast(url)
+        await this.load(true)
+      } catch (e) {
+
+      }
+    },
+    async delete(id: string) {
+      try {
+        await this.api.deletePodcast(id)
+        this.podcasts = this.podcasts?.filter(p => p.id !== id) || []
+      } catch (e) {
+
+      }
+    },
+    async downloadEpisode(podcastId: string, episodeId: string) {
+      try {
+        await this.api.downloadPodcastEpisode(episodeId)
+        if (!this._downloadingQueue.includes(podcastId)) this._downloadingQueue.push(podcastId)
+        await this.downloadingQueueHandler()
+        setTimeout(async() => {
+          await this.loadPodcast(podcastId)
+        }, 1000)
+      } catch (e) {
+
+      }
+    },
+    async deleteEpisode(podcastId: string, episodeId: string) {
+      try {
+        await this.api.deletePodcastEpisode(episodeId)
+        setTimeout(async() => {
+          await this.loadPodcast(podcastId)
+        }, 1000)
+      } catch (e) {
+
+      }
+    },
+    async redownloadEpisode(podcastId: string, episodeId: string) {
+      try {
+        await this.api.deletePodcastEpisode(episodeId)
+        this.downloadEpisode(podcastId, episodeId)
+      } catch (e) {
+
+      }
+    },
+
+    getPodcast(id: string) {
+      return this.podcasts ? this.podcasts?.find(p => p.id === id) || null : null
+    },
+    async downloadingQueueHandler() {
+      if (this._timer !== null) return
+      this._timer = setInterval(async() => {
+        if (!this.podcasts || this._downloadingQueue.length === 0) {
+          if (this._timer) {
+            clearInterval(this._timer)
+            this._timer = null
+          }
+          return
+        }
+
+        for (let i = 0; i < this._downloadingQueue.length; i++) {
+          await this.loadPodcast(this._downloadingQueue[i])
+
+          const p = this.podcasts.find(p => p.id === this._downloadingQueue[i])
+          if (!p) continue
+
+          const dtracks = p.tracks ? p.tracks.filter((p: any) => p.episodeStatus === 'downloading') : null
+          if (dtracks && dtracks.length === 0) {
+            this._downloadingQueue = this._downloadingQueue.filter(item => item !== p.id)
+          }
+        }
+      }, 30000)
+    },
+  },
+})