Update:Podcast episode table is lazy loaded #1549

client/components/tables/LibraryFilesTable.vue

@@ -12,7 +12,7 @@
       </div>
     </div>
     <transition name="slide">
-      <div class="w-full" v-show="showFiles">
+      <div class="w-full" v-if="showFiles">
         <table class="text-sm tracksTable">
           <tr>
             <th class="text-left px-4">{{ $strings.LabelPath }}</th>
@@ -70,7 +70,7 @@ export default {
     },
     audioFiles() {
       if (this.libraryItem.mediaType === 'podcast') {
-        return this.libraryItem.media?.episodes.map((ep) => ep.audioFile) || []
+        return this.libraryItem.media?.episodes.map((ep) => ep.audioFile).filter((af) => af) || []
       }
       return this.libraryItem.media?.audioFiles || []
     },

client/components/tables/podcast/EpisodeTableRow.vue → client/components/tables/podcast/LazyEpisodeRow.vue

@@ -1,18 +1,22 @@
 <template>
-  <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
-      <div class="flex-grow px-2">
+  <div :id="`lazy-episode-${index}`" class="w-full h-full cursor-pointer" @mouseover="mouseover" @mouseleave="mouseleave">
+    <div class="flex" @click="clickedEpisode">
+      <div class="flex-grow">
         <div class="flex items-center">
-          <span class="text-sm font-semibold">{{ title }}</span>
-          <widgets-podcast-type-indicator :type="episode.episodeType" />
+          <span class="text-sm font-semibold">{{ episodeTitle }}</span>
+          <widgets-podcast-type-indicator :type="episodeType" />
         </div>
 
-        <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5" v-html="subtitle"></p>
-        <div class="flex justify-between pt-2 max-w-xl">
-          <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
-          <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-          <p v-if="episode.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
-          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
+        <div class="h-10 flex items-center mt-1.5 mb-0.5">
+          <p class="text-sm text-gray-200 episode-subtitle" v-html="episodeSubtitle"></p>
+        </div>
+        <div class="h-8 flex items-center">
+          <div class="w-full inline-flex justify-between max-w-xl">
+            <p v-if="episode?.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
+            <p v-if="episode?.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
+            <p v-if="episode?.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
+            <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
+          </div>
         </div>
 
         <div class="flex items-center pt-2">
@@ -37,10 +41,11 @@
           <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
         </div>
       </div>
-      <div v-if="isHovering || isSelected || selectionMode" class="hidden md:block w-12 min-w-12" />
+      <div v-if="isHovering || isSelected || isSelectionMode" class="hidden md:block w-12 min-w-12" />
     </div>
-    <div v-if="isSelected || selectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
-    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !selectionMode ? 'translate-x-24' : 'translate-x-0'">
+
+    <div v-if="isSelected || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
+    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !isSelectionMode ? 'translate-x-24' : 'translate-x-0'">
       <div class="flex h-full items-center">
         <div class="mx-1">
           <ui-checkbox v-model="isSelected" @input="selectedUpdated" checkbox-bg="bg" />
@@ -55,84 +60,89 @@
 <script>
 export default {
   props: {
+    index: Number,
     libraryItemId: String,
     episode: {
       type: Object,
-      default: () => {}
-    },
-    selectionMode: Boolean
+      default: () => null
+    }
   },
   data() {
     return {
       isProcessingReadUpdate: false,
       processingRemove: false,
       isHovering: false,
-      isSelected: false
+      isSelected: false,
+      isSelectionMode: false
     }
   },
   computed: {
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    axios() {
+      return this.$axios || this.$nuxt.$axios
+    },
     userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
+      return this.store.getters['user/getUserCanUpdate']
     },
     userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
+      return this.store.getters['user/getUserCanDelete']
+    },
+    episodeId() {
+      return this.episode?.id || ''
     },
-    audioFile() {
-      return this.episode.audioFile
+    episodeTitle() {
+      return this.episode?.title || ''
     },
-    title() {
-      return this.episode.title || ''
+    episodeSubtitle() {
+      return this.episode?.subtitle || ''
     },
-    subtitle() {
-      return this.episode.subtitle || this.description
+    episodeType() {
+      return this.episode?.episodeType || ''
+    },
+    publishedAt() {
+      return this.episode?.publishedAt
+    },
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
+    },
+    itemProgress() {
+      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episodeId)
     },
-    description() {
-      return this.episode.description || ''
+    itemProgressPercent() {
+      return this.itemProgress?.progress || 0
     },
-    duration() {
-      return this.$secondsToTimestamp(this.episode.duration)
+    userIsFinished() {
+      return !!this.itemProgress?.isFinished
     },
     libraryItemIdStreaming() {
-      return this.$store.getters['getLibraryItemIdStreaming']
+      return this.store.getters['getLibraryItemIdStreaming']
     },
     isStreamingFromDifferentLibrary() {
-      return this.$store.getters['getIsStreamingFromDifferentLibrary']
+      return this.store.getters['getIsStreamingFromDifferentLibrary']
     },
     isStreaming() {
-      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
+      return this.store.getters['getIsMediaStreaming'](this.libraryItemId, this.episodeId)
     },
     isQueued() {
-      return this.$store.getters['getIsMediaQueued'](this.libraryItemId, this.episode.id)
+      return this.store.getters['getIsMediaQueued'](this.libraryItemId, this.episodeId)
     },
     streamIsPlaying() {
-      return this.$store.state.streamIsPlaying && this.isStreaming
-    },
-    itemProgress() {
-      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
-    },
-    itemProgressPercent() {
-      return this.itemProgress ? this.itemProgress.progress : 0
-    },
-    userIsFinished() {
-      return this.itemProgress ? !!this.itemProgress.isFinished : false
+      return this.store.state.streamIsPlaying && this.isStreaming
     },
     timeRemaining() {
       if (this.streamIsPlaying) return 'Playing'
-      if (!this.itemProgress) return this.$elapsedPretty(this.episode.duration)
+      if (!this.itemProgress) return this.$elapsedPretty(this.episode?.duration || 0)
       if (this.userIsFinished) return 'Finished'
-      var remaining = Math.floor(this.itemProgress.duration - this.itemProgress.currentTime)
+      const remaining = Math.floor(this.itemProgress.duration - this.itemProgress.currentTime)
       return `${this.$elapsedPretty(remaining)} left`
-    },
-    publishedAt() {
-      return this.episode.publishedAt
-    },
-    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
     }
   },
   methods: {
-    clickAddToPlaylist() {
-      this.$emit('addToPlaylist', this.episode)
+    setSelectionMode(isSelectionMode) {
+      this.isSelectionMode = isSelectionMode
+      if (!this.isSelectionMode) this.isSelected = false
     },
     clickedEpisode() {
       this.$emit('view', this.episode)
@@ -150,16 +160,23 @@ export default {
     mouseleave() {
       this.isHovering = false
     },
-    clickEdit() {
-      this.$emit('edit', this.episode)
-    },
     playClick() {
       if (this.streamIsPlaying) {
-        this.$eventBus.$emit('pause-item')
+        const eventBus = this.$eventBus || this.$nuxt.$eventBus
+        eventBus.$emit('pause-item')
       } else {
         this.$emit('play', this.episode)
       }
     },
+    queueBtnClick() {
+      if (this.isQueued) {
+        // Remove from queue
+        this.store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episodeId })
+      } else {
+        // Add to queue
+        this.$emit('addToQueue', this.episode)
+      }
+    },
     toggleFinished(confirmed = false) {
       if (!this.userIsFinished && this.itemProgressPercent > 0 && !confirmed) {
         const payload = {
@@ -171,37 +188,47 @@ export default {
           },
           type: 'yesNo'
         }
-        this.$store.commit('globals/setConfirmPrompt', payload)
+        this.store.commit('globals/setConfirmPrompt', payload)
         return
       }
 
-      var updatePayload = {
+      const updatePayload = {
         isFinished: !this.userIsFinished
       }
       this.isProcessingReadUpdate = true
-      this.$axios
-        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
+      this.axios
+        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episodeId}`, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
         })
         .catch((error) => {
           console.error('Failed', error)
           this.isProcessingReadUpdate = false
-          this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
+          const toast = this.$toast || this.$nuxt.$toast
+          toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
         })
     },
+    clickAddToPlaylist() {
+      this.$emit('addToPlaylist', this.episode)
+    },
+    clickEdit() {
+      this.$emit('edit', this.episode)
+    },
     removeClick() {
       this.$emit('remove', this.episode)
     },
-    queueBtnClick() {
-      if (this.isQueued) {
-        // Remove from queue
-        this.$store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episode.id })
-      } else {
-        // Add to queue
-        this.$emit('addToQueue', this.episode)
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
       }
     }
-  }
+  },
+  mounted() {}
 }
-</script>
+</script>