diff --git a/client/pages/library/_library/podcast/latest.vue b/client/pages/library/_library/podcast/latest.vue index 4f12043e1..673a2d950 100644 --- a/client/pages/library/_library/podcast/latest.vue +++ b/client/pages/library/_library/podcast/latest.vue @@ -72,6 +72,11 @@
+
+ +
@@ -100,8 +105,8 @@ export default { return { recentEpisodes: [], episodesProcessingMap: {}, - totalEpisodes: 0, currentPage: 0, + hasMore: true, processing: false, openingItem: false } @@ -248,16 +253,34 @@ export default { }) }, async loadRecentEpisodes(page = 0) { + if (this.processing) return this.processing = true - const episodePayload = await this.$axios.$get(`/api/libraries/${this.libraryId}/recent-episodes?limit=50&page=${page}`).catch((error) => { + const limit = 50 + const episodePayload = await this.$axios.$get(`/api/libraries/${this.libraryId}/recent-episodes?limit=${limit}&page=${page}`).catch((error) => { console.error('Failed to get recent episodes', error) this.$toast.error(this.$strings.ToastFailedToLoadData) return null }) this.processing = false - this.recentEpisodes = episodePayload.episodes || [] - this.totalEpisodes = episodePayload.total + if (!episodePayload) return + const newEpisodes = episodePayload.episodes || [] + // Page 0 is the initial load/refresh (replace); subsequent pages append + this.recentEpisodes = page > 0 ? this.recentEpisodes.concat(newEpisodes) : newEpisodes this.currentPage = page + // The endpoint returns no total; a short page means we've reached the end + this.hasMore = newEpisodes.length >= limit + }, + loadMoreEpisodes() { + if (this.processing || !this.hasMore) return + this.loadRecentEpisodes(this.currentPage + 1) + }, + handleScroll(e) { + const el = e.target + if (!el || this.processing || !this.hasMore) return + // Within ~600px of the bottom, pull the next page + if (el.scrollHeight - el.scrollTop - el.clientHeight < 600) { + this.loadMoreEpisodes() + } }, queueBtnClick(episode) { if (this.playerQueueEpisodeIdMap[episode.id]) { @@ -281,6 +304,13 @@ export default { }, mounted() { this.loadRecentEpisodes() + this.$nextTick(() => { + this.scrollContainer = document.getElementById('bookshelf') + if (this.scrollContainer) this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true }) + }) + }, + beforeDestroy() { + if (this.scrollContainer) this.scrollContainer.removeEventListener('scroll', this.handleScroll) } }