From f55036e12d6432f8a504c8b3d83655333ffd7602 Mon Sep 17 00:00:00 2001
From: Artem Chulkov <acc@arch.pm>
Date: Mon, 7 Aug 2023 01:21:48 +0500
Subject: [PATCH 1/5] add podcast download and delete episode; show downloading
 status

---
 src/library/podcast/PodcastDetails.vue    | 26 +++++++++++++++++++++--
 src/library/track/CellActions.vue         |  6 +++---
 src/shared/api.ts                         | 10 +++++++++
 src/shared/components/ContextMenuItem.vue |  3 ++-
 src/shared/components/Icon.vue            | 12 +++++++++--
 5 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/library/podcast/PodcastDetails.vue b/src/library/podcast/PodcastDetails.vue
index 15c2757..4bbd476 100644
--- a/src/library/podcast/PodcastDetails.vue
+++ b/src/library/podcast/PodcastDetails.vue
@@ -37,13 +37,29 @@
             {{ item.title }} <Icon v-if="item.playCount > 0" icon="check" />
           </CellTitle>
           <CellDuration :track="item" />
-          <CellActions :track="item" />
+          <CellActions :track="item">
+            <template v-if="item.isUnavailable">
+              <ContextMenuItem v-if="item.podcastStatus === 'downloading'" icon="repeat" variant="warning" spin>
+                Downloading Episode
+              </ContextMenuItem>
+              <ContextMenuItem v-else icon="download" variant="warning" @click="downloadEpisode(item)">
+                Download Episode
+              </ContextMenuItem>
+            </template>
+            <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 />
   </ContentLoader>
 </template>
+
 <script lang="ts">
   import { defineComponent } from 'vue'
   import CellTrackNumber from '@/library/track/CellTrackNumber.vue'
@@ -115,7 +131,13 @@
         this.podcast = null
         await this.$api.deletePodcast(this.id)
         return this.$router.replace({ name: 'podcasts' })
-      }
+      },
+      async downloadEpisode(item: any) {
+        await this.$api.downloadPodcastEpisode(item.id)
+      },
+      async deleteEpisode(item: any) {
+        await this.$api.deletePodcastEpisode(item.id)
+      },
     }
   })
 </script>
diff --git a/src/library/track/CellActions.vue b/src/library/track/CellActions.vue
index 35fcc15..6a75868 100644
--- a/src/library/track/CellActions.vue
+++ b/src/library/track/CellActions.vue
@@ -7,13 +7,13 @@
       <ContextMenuItem v-if="!track.isUnavailable" icon="plus" @click="addToQueue()">
         Add to queue
       </ContextMenuItem>
-      <ContextMenuItem v-if="!track.isStream" icon="plus" @click="showPlaylistSelect = true">
+      <ContextMenuItem v-if="!track.isUnavailable && !track.isStream" icon="plus" @click="showPlaylistSelect = true">
         Add to playlist
       </ContextMenuItem>
-      <ContextMenuItem v-if="!track.isStream" :icon="isFavourite ? 'heart-fill' : 'heart'" @click="toggleFavourite()">
+      <ContextMenuItem v-if="!track.isUnavailable && !track.isStream" :icon="isFavourite ? 'heart-fill' : 'heart'" @click="toggleFavourite()">
         Favourite
       </ContextMenuItem>
-      <ContextMenuItem v-if="!track.isStream" icon="download" @click="download()">
+      <ContextMenuItem v-if="!track.isUnavailable && !track.isStream" icon="download" @click="download()">
         Download
       </ContextMenuItem>
       <slot :item="track" />
diff --git a/src/shared/api.ts b/src/shared/api.ts
index df7597c..3710965 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -25,6 +25,7 @@ export interface Track {
   isPodcast?: boolean
   isUnavailable?: boolean
   playCount? : number
+  podcastStatus? : string
 }
 
 export interface Album {
@@ -363,6 +364,14 @@ export class API {
     return this.fetch('rest/refreshPodcasts')
   }
 
+  async downloadPodcastEpisode(id: string): Promise<any> {
+    return this.fetch('rest/downloadPodcastEpisode', { id })
+  }
+
+  async deletePodcastEpisode(id: string): Promise<any> {
+    return this.fetch('rest/deletePodcastEpisode', { id })
+  }
+
   async deletePodcast(id: string): Promise<any> {
     return this.fetch('rest/deletePodcastChannel', { id })
   }
@@ -479,6 +488,7 @@ export class API {
         artistId: undefined,
         image,
         isPodcast: true,
+        podcastStatus: item.status,
         isUnavailable: item.status !== 'completed' || !item.streamId,
         url: item.status === 'completed' && item.streamId
           ? this.getStreamUrl(item.streamId)
diff --git a/src/shared/components/ContextMenuItem.vue b/src/shared/components/ContextMenuItem.vue
index cdd55a1..59704c6 100644
--- a/src/shared/components/ContextMenuItem.vue
+++ b/src/shared/components/ContextMenuItem.vue
@@ -9,7 +9,7 @@
     <slot>
       {{ text }}
     </slot>
-    <Icon v-if="icon" :icon="icon" class="ml-4" />
+    <Icon v-if="icon" :icon="icon" class="ml-4" :spin="spin"/>
   </BDropdownItemButton>
 </template>
 <script lang="ts">
@@ -20,6 +20,7 @@
       text: { type: String, default: '' },
       icon: { type: String, default: null },
       variant: { type: String, default: '' },
+      spin: { type: Boolean, default: false },
     }
   })
 </script>
diff --git a/src/shared/components/Icon.vue b/src/shared/components/Icon.vue
index e2a1296..4f1ee59 100644
--- a/src/shared/components/Icon.vue
+++ b/src/shared/components/Icon.vue
@@ -10,7 +10,7 @@
     fill="currentColor"
     preserveAspectRatio="xMidYMid meet"
     viewBox="0 0 16 16"
-    class="bi icon"
+    :class="{'bi icon': true, 'spin': spin}"
     v-bind="$attrs"
     v-html="path"
   />
@@ -46,6 +46,7 @@
   import iconThreeDotsVertical from '@iconify-icons/bi/three-dots-vertical'
   import iconVolume from '@iconify-icons/bi/volume-up-fill'
   import iconX from '@iconify-icons/bi/x'
+  import iconTrash from '@iconify-icons/bi/trash'
 
   const icons = {
     'arrow-up-down': iconArrowUpDown.body,
@@ -77,11 +78,13 @@
     'three-dots-vertical': iconThreeDotsVertical.body,
     volume: iconVolume.body,
     x: iconX.body,
+    trash: iconTrash.body,
   } as {[key: string]: string}
 
   export default defineComponent({
     props: {
-      icon: { type: String, required: true }
+      icon: { type: String, required: true },
+      spin: { type: Boolean, default: false }
     },
     computed: {
       path(): string {
@@ -109,4 +112,9 @@
     font-size: 125%;
     vertical-align: text-bottom;
   }
+
+  .spin {
+    transform-origin: center;
+    animation: b-icon-animation-spin 2s linear infinite normal;
+  }
 </style>

From fb8fbeb7d86276242d01d8e04f88d5d6339edefe Mon Sep 17 00:00:00 2001
From: Artem Chulkov <acc@arch.pm>
Date: Mon, 7 Aug 2023 03:24:38 +0500
Subject: [PATCH 2/5] add description cleaner, fix width of track number column

---
 package.json                           |  2 +
 src/library/podcast/PodcastDetails.vue |  2 +-
 src/library/track/CellActions.vue      | 32 ++++++-----
 src/shared/api.ts                      |  5 +-
 src/style/table.scss                   |  2 +-
 yarn.lock                              | 80 +++++++++++++++++++++++++-
 6 files changed, 103 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 69384d7..6c0fb7f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "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",
@@ -16,6 +17,7 @@
     "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",
diff --git a/src/library/podcast/PodcastDetails.vue b/src/library/podcast/PodcastDetails.vue
index 4bbd476..a268c28 100644
--- a/src/library/podcast/PodcastDetails.vue
+++ b/src/library/podcast/PodcastDetails.vue
@@ -39,7 +39,7 @@
           <CellDuration :track="item" />
           <CellActions :track="item">
             <template v-if="item.isUnavailable">
-              <ContextMenuItem v-if="item.podcastStatus === 'downloading'" icon="repeat" variant="warning" spin>
+              <ContextMenuItem v-if="item.podcastStatus === 'downloading'" icon="repeat" variant="warning" spin @click="()=>{}">
                 Downloading Episode
               </ContextMenuItem>
               <ContextMenuItem v-else icon="download" variant="warning" @click="downloadEpisode(item)">
diff --git a/src/library/track/CellActions.vue b/src/library/track/CellActions.vue
index 6a75868..33bb5b9 100644
--- a/src/library/track/CellActions.vue
+++ b/src/library/track/CellActions.vue
@@ -1,21 +1,23 @@
 <template>
   <td class="text-right" @click.stop="">
     <OverflowMenu>
-      <ContextMenuItem v-if="!track.isUnavailable" icon="plus" @click="setNextInQueue()">
-        Play next
-      </ContextMenuItem>
-      <ContextMenuItem v-if="!track.isUnavailable" icon="plus" @click="addToQueue()">
-        Add to queue
-      </ContextMenuItem>
-      <ContextMenuItem v-if="!track.isUnavailable && !track.isStream" icon="plus" @click="showPlaylistSelect = true">
-        Add to playlist
-      </ContextMenuItem>
-      <ContextMenuItem v-if="!track.isUnavailable && !track.isStream" :icon="isFavourite ? 'heart-fill' : 'heart'" @click="toggleFavourite()">
-        Favourite
-      </ContextMenuItem>
-      <ContextMenuItem v-if="!track.isUnavailable && !track.isStream" icon="download" @click="download()">
-        Download
-      </ContextMenuItem>
+      <template v-if="!track.isUnavailable">
+        <ContextMenuItem icon="plus" @click="setNextInQueue()">
+          Play next
+        </ContextMenuItem>
+        <ContextMenuItem icon="plus" @click="addToQueue()">
+          Add to queue
+        </ContextMenuItem>
+        <ContextMenuItem v-if="!track.isStream" icon="plus" @click="showPlaylistSelect = true">
+          Add to playlist
+        </ContextMenuItem>
+        <ContextMenuItem v-if="!track.isStream" :icon="isFavourite ? 'heart-fill' : 'heart'" @click="toggleFavourite()">
+          Favourite
+        </ContextMenuItem>
+        <ContextMenuItem v-if="!track.isStream" icon="download" @click="download()">
+          Download
+        </ContextMenuItem>
+      </template>
       <slot :item="track" />
     </OverflowMenu>
 
diff --git a/src/shared/api.ts b/src/shared/api.ts
index 3710965..df05b41 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -1,6 +1,7 @@
 import { AuthService } from '@/auth/service'
 import { map, max, orderBy, uniq } from 'lodash-es'
 import { toQueryString } from '@/shared/utils'
+import sanitizeHtml from 'sanitize-html'
 
 export type AlbumSort =
   'a-z' |
@@ -471,7 +472,7 @@ export class API {
     return {
       id: podcast.id,
       name: podcast.title || podcast.url,
-      description: podcast.description,
+      description: sanitizeHtml(podcast.description),
       image,
       url: podcast.url,
       trackCount: episodes.length,
@@ -493,7 +494,7 @@ export class API {
         url: item.status === 'completed' && item.streamId
           ? this.getStreamUrl(item.streamId)
           : undefined,
-        description: item.description,
+        description: sanitizeHtml(item.description, { allowedTags: [], allowedAttributes: {}, allowedStyles: {} }),
         playCount: item.playCount || 0,
       })),
     }
diff --git a/src/style/table.scss b/src/style/table.scss
index d449096..978b195 100644
--- a/src/style/table.scss
+++ b/src/style/table.scss
@@ -31,7 +31,7 @@ table.table-numbered {
     padding-left: 0;
     padding-right: 0;
     width: 26px;
-    max-width: 26px;
+    max-width: 40px;
     text-align: center;
     color: var(--text-muted);
   }
diff --git a/yarn.lock b/yarn.lock
index 0f7b7a4..38bb830 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1379,6 +1379,13 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/sanitize-html@^2.9.0":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.9.0.tgz#5b609f7592de22ef80a0930c39670329753dca1b"
+  integrity sha512-4fP/kEcKNj2u39IzrxWYuf/FnCCwwQCpif6wwY6ROUS1EPRIfWJjGkY3HIowY1EX/VbX5e86yq8AAE7UPMgATg==
+  dependencies:
+    htmlparser2 "^8.0.0"
+
 "@types/semver@^7.3.12":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
@@ -3020,7 +3027,16 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -3032,6 +3048,13 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -3041,6 +3064,15 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -3114,6 +3146,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^4.2.0, entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -4039,6 +4076,16 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+htmlparser2@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -4321,6 +4368,11 @@ is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -5144,6 +5196,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
+
 parse5-htmlparser2-tree-adapter@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
@@ -5522,6 +5579,15 @@ postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.3.11:
+  version "8.4.27"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057"
+  integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5828,6 +5894,18 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sanitize-html@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.11.0.tgz#9a6434ee8fcaeddc740d8ae7cd5dd71d3981f8f6"
+  integrity sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^8.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 sass-loader@^13.0.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6"

From 045b9ea14670296863d9d91649e24d45d9cb30d9 Mon Sep 17 00:00:00 2001
From: Artem Chulkov <acc@arch.pm>
Date: Fri, 11 Aug 2023 02:05:21 +0500
Subject: [PATCH 3/5] add store; infinite scroll; load episode; delete episode;
 reload episode if something wrong while download;

---
 src/library/podcast/PodcastDetails.vue |  74 ++++++++++-----
 src/library/podcast/PodcastLibrary.vue |  36 ++++---
 src/library/podcast/store.ts           | 124 +++++++++++++++++++++++++
 src/shared/api.ts                      |  21 ++++-
 src/shared/components/Icon.vue         |   2 +-
 5 files changed, 214 insertions(+), 43 deletions(-)
 create mode 100644 src/library/podcast/store.ts

diff --git a/src/library/podcast/PodcastDetails.vue b/src/library/podcast/PodcastDetails.vue
index a268c28..0d32157 100644
--- a/src/library/podcast/PodcastDetails.vue
+++ b/src/library/podcast/PodcastDetails.vue
@@ -15,37 +15,33 @@
           <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">
-            <template v-if="item.isUnavailable">
-              <ContextMenuItem v-if="item.podcastStatus === 'downloading'" icon="repeat" variant="warning" spin @click="()=>{}">
-                Downloading Episode
-              </ContextMenuItem>
-              <ContextMenuItem v-else icon="download" variant="warning" @click="downloadEpisode(item)">
-                Download Episode
-              </ContextMenuItem>
-            </template>
+            <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)">
@@ -57,19 +53,21 @@
       </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: {
@@ -84,12 +82,23 @@
     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']
       },
@@ -97,13 +106,29 @@
         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,
@@ -128,15 +153,18 @@
         })
       },
       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) {
-        await this.$api.downloadPodcastEpisode(item.id)
+      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.$api.deletePodcastEpisode(item.id)
+        await this.podcastStore.deleteEpisode(this.id, item.id)
       },
     }
   })
diff --git a/src/library/podcast/PodcastLibrary.vue b/src/library/podcast/PodcastLibrary.vue
index 5f0840b..d5ed4bd 100644
--- a/src/library/podcast/PodcastLibrary.vue
+++ b/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,9 +55,13 @@
     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,
       }
@@ -63,16 +69,15 @@
     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)
+        }
       },
     }
   })
diff --git a/src/library/podcast/store.ts b/src/library/podcast/store.ts
new file mode 100644
index 0000000..0c5f92e
--- /dev/null
+++ b/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)
+    },
+  },
+})
diff --git a/src/shared/api.ts b/src/shared/api.ts
index df05b41..0e8714c 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -26,7 +26,6 @@ export interface Track {
   isPodcast?: boolean
   isUnavailable?: boolean
   playCount? : number
-  podcastStatus? : string
 }
 
 export interface Album {
@@ -74,6 +73,18 @@ export interface PodcastEpisode {
   id: string
   title: string
   description: string
+  episodeStatus? : string
+}
+
+export interface Podcast {
+  id: string
+  name: string
+  description: string
+  image: string
+  url: string
+  trackCount: number,
+  updatedAt: string,
+  tracks: (Track & PodcastEpisode)[]
 }
 
 export interface Playlist {
@@ -347,12 +358,12 @@ export class API {
     return this.fetch('rest/deleteInternetRadioStation', { id })
   }
 
-  async getPodcasts(): Promise<any[]> {
+  async getPodcasts(): Promise<Podcast[]> {
     const response = await this.fetch('rest/getPodcasts')
     return (response?.podcasts?.channel || []).map(this.normalizePodcast, this)
   }
 
-  async getPodcast(id: string): Promise<any> {
+  async getPodcast(id: string): Promise<Podcast> {
     const response = await this.fetch('rest/getPodcasts', { id })
     return this.normalizePodcast(response?.podcasts?.channel[0])
   }
@@ -466,7 +477,7 @@ export class API {
     }
   }
 
-  private normalizePodcast(podcast: any): any {
+  private normalizePodcast(podcast: any): Podcast {
     const image = podcast.originalImageUrl
     const episodes = podcast.episode || []
     return {
@@ -489,7 +500,7 @@ export class API {
         artistId: undefined,
         image,
         isPodcast: true,
-        podcastStatus: item.status,
+        episodeStatus: item.status,
         isUnavailable: item.status !== 'completed' || !item.streamId,
         url: item.status === 'completed' && item.streamId
           ? this.getStreamUrl(item.streamId)
diff --git a/src/shared/components/Icon.vue b/src/shared/components/Icon.vue
index 4f1ee59..80dc41b 100644
--- a/src/shared/components/Icon.vue
+++ b/src/shared/components/Icon.vue
@@ -84,7 +84,7 @@
   export default defineComponent({
     props: {
       icon: { type: String, required: true },
-      spin: { type: Boolean, default: false }
+      spin: { type: Boolean, default: false },
     },
     computed: {
       path(): string {

From 695f4fe8eb72afbdfc28c6f6960bd7db6b16915e Mon Sep 17 00:00:00 2001
From: Artem Chulkov <acc@arch.pm>
Date: Mon, 14 Aug 2023 22:04:22 +0500
Subject: [PATCH 4/5] add Podcast html description support

---
 src/library/track/CellTitle.vue           |  4 +++-
 src/shared/api.ts                         | 11 +++++++++--
 src/shared/components/ContextMenuItem.vue |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/library/track/CellTitle.vue b/src/library/track/CellTitle.vue
index 5d3068f..dbd5cba 100644
--- a/src/library/track/CellTitle.vue
+++ b/src/library/track/CellTitle.vue
@@ -2,7 +2,9 @@
   <td>
     <slot>{{ props.track.title }}</slot>
     <div v-if="props.track.description" class="text-muted">
-      <small>{{ props.track.description }}</small>
+      <small>
+        <div v-html="props.track.description" />
+      </small>
     </div>
     <div v-else-if="props.track.artist" class="d-lg-none text-muted">
       <small>{{ props.track.artist }}</small>
diff --git a/src/shared/api.ts b/src/shared/api.ts
index 0e8714c..8a6cd58 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -104,6 +104,13 @@ export class UnsupportedOperationError extends Error { }
 export class API {
   private readonly fetch: (path: string, params?: any) => Promise<any>
   private readonly clientName = window.origin || 'web'
+  private readonly sanitiser = {
+    allowedTags: ['address', 'h5', 'h6', 'dd', 'dl', 'dt', 'div', 'hr', 'li', 'ol', 'ul', 'p', 'a', 'abbr', 'b', 'br', 'em', 'i', 'small', 'span', 'strong', 'sub', 'u'],
+    allowedAttributes: sanitizeHtml.defaults.allowedAttributes,
+    transformTags: {
+      a: (tagName: any, attribs: any) => ({ tagName, attribs: { ...attribs, target: '_blank' } })
+    }
+  }
 
   constructor(private auth: AuthService) {
     this.fetch = (path: string, params: any) => {
@@ -483,7 +490,7 @@ export class API {
     return {
       id: podcast.id,
       name: podcast.title || podcast.url,
-      description: sanitizeHtml(podcast.description),
+      description: sanitizeHtml(podcast.description, this.sanitiser),
       image,
       url: podcast.url,
       trackCount: episodes.length,
@@ -505,7 +512,7 @@ export class API {
         url: item.status === 'completed' && item.streamId
           ? this.getStreamUrl(item.streamId)
           : undefined,
-        description: sanitizeHtml(item.description, { allowedTags: [], allowedAttributes: {}, allowedStyles: {} }),
+        description: sanitizeHtml(item.description, this.sanitiser),
         playCount: item.playCount || 0,
       })),
     }
diff --git a/src/shared/components/ContextMenuItem.vue b/src/shared/components/ContextMenuItem.vue
index 59704c6..dabdf8b 100644
--- a/src/shared/components/ContextMenuItem.vue
+++ b/src/shared/components/ContextMenuItem.vue
@@ -9,7 +9,7 @@
     <slot>
       {{ text }}
     </slot>
-    <Icon v-if="icon" :icon="icon" class="ml-4" :spin="spin"/>
+    <Icon v-if="icon" :icon="icon" class="ml-4" :spin="spin" />
   </BDropdownItemButton>
 </template>
 <script lang="ts">

From 4f7dc5451f2ffdf1247a31ce43e493a76a106d6e Mon Sep 17 00:00:00 2001
From: Artem Chulkov <acc@arch.pm>
Date: Mon, 21 Aug 2023 00:56:11 +0500
Subject: [PATCH 5/5] fix target blank issue

---
 src/shared/api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/api.ts b/src/shared/api.ts
index 8a6cd58..e4b88a1 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -105,10 +105,10 @@ export class API {
   private readonly fetch: (path: string, params?: any) => Promise<any>
   private readonly clientName = window.origin || 'web'
   private readonly sanitiser = {
-    allowedTags: ['address', 'h5', 'h6', 'dd', 'dl', 'dt', 'div', 'hr', 'li', 'ol', 'ul', 'p', 'a', 'abbr', 'b', 'br', 'em', 'i', 'small', 'span', 'strong', 'sub', 'u'],
+    allowedTags: ['address', 'dd', 'dl', 'dt', 'div', 'hr', 'li', 'ol', 'ul', 'p', 'a', 'abbr', 'b', 'br', 'em', 'i', 'small', 'span', 'strong', 'sub', 'u'],
     allowedAttributes: sanitizeHtml.defaults.allowedAttributes,
     transformTags: {
-      a: (tagName: any, attribs: any) => ({ tagName, attribs: { ...attribs, target: '_blank' } })
+      a: (tagName: any, attribs: any) => ({ tagName, attribs: { ...attribs, target: '_blank', rel: 'noopener noreferrer' } })
     }
   }