Merge pull request advplyr#3822 from mikiher/episode-table-refresh-fix

Episode table refresh fixes

Author: advplyr

client/components/tables/podcast/LazyEpisodesTable.vue

@@ -80,7 +80,8 @@ export default {
       episodeComponentRefs: {},
       windowHeight: 0,
       episodesTableOffsetTop: 0,
-      episodeRowHeight: 176
+      episodeRowHeight: 176,
+      currScrollTop: 0
     }
   },
   watch: {
@@ -484,9 +485,8 @@ export default {
         }
       }
     },
-    scroll(evt) {
-      if (!evt?.target?.scrollTop) return
-      const scrollTop = Math.max(evt.target.scrollTop - this.episodesTableOffsetTop, 0)
+    handleScroll() {
+      const scrollTop = this.currScrollTop
       let firstEpisodeIndex = Math.floor(scrollTop / this.episodeRowHeight)
       let lastEpisodeIndex = Math.ceil((scrollTop + this.windowHeight) / this.episodeRowHeight)
       lastEpisodeIndex = Math.min(this.totalEpisodes - 1, lastEpisodeIndex)
@@ -501,6 +501,12 @@ export default {
       })
       this.mountEpisodes(firstEpisodeIndex, lastEpisodeIndex + 1)
     },
+    scroll(evt) {
+      if (!evt?.target?.scrollTop) return
+      const scrollTop = Math.max(evt.target.scrollTop - this.episodesTableOffsetTop, 0)
+      this.currScrollTop = scrollTop
+      this.handleScroll()
+    },
     initListeners() {
       const itemPageWrapper = document.getElementById('item-page-wrapper')
       if (itemPageWrapper) {
@@ -535,7 +541,12 @@ export default {
       this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
 
       this.$nextTick(() => {
-        this.mountEpisodes(0, Math.min(this.episodesPerPage, this.totalEpisodes))
+        // Maybe update currScrollTop if items were removed
+        const itemPageWrapper = document.getElementById('item-page-wrapper')
+        const { scrollHeight, clientHeight } = itemPageWrapper
+        const maxScrollTop = scrollHeight - clientHeight
+        this.currScrollTop = Math.min(this.currScrollTop, maxScrollTop)
+        this.handleScroll()
       })
     }
   },

server/controllers/PodcastController.js

@@ -461,6 +461,9 @@ class PodcastController {
       return res.sendStatus(404)
     }
 
+    // Remove it from the podcastEpisodes array
+    req.libraryItem.media.podcastEpisodes = req.libraryItem.media.podcastEpisodes.filter((ep) => ep.id !== episodeId)
+
     if (hardDelete) {
       const audioFile = episode.audioFile
       // TODO: this will trigger the watcher. should maybe handle this gracefully