From 706b2d7d7262890931b15a1bd88754803a641f68 Mon Sep 17 00:00:00 2001 From: Nicholas Wallace Date: Sat, 22 Feb 2025 21:50:09 -0700 Subject: [PATCH 1/4] Add: store for filtered podcast episodes --- client/components/tables/podcast/LazyEpisodesTable.vue | 7 +++++++ client/store/index.js | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue index 8821ccef..0e62e9e4 100644 --- a/client/components/tables/podcast/LazyEpisodesTable.vue +++ b/client/components/tables/podcast/LazyEpisodesTable.vue @@ -89,6 +89,13 @@ export default { handler() { this.refresh() } + }, + episodesList: { + handler(newList) { + const episodeIds = newList.map((ep) => ep.id) + this.$store.commit('setSortedEpisodeIds', episodeIds) + }, + immediate: true } }, computed: { diff --git a/client/store/index.js b/client/store/index.js index 2f2201b6..accf931d 100644 --- a/client/store/index.js +++ b/client/store/index.js @@ -25,6 +25,7 @@ export const state = () => ({ previousPath: '/', bookshelfBookIds: [], episodeTableEpisodeIds: [], + sortedEpisodeIds: [], openModal: null, innerModalOpen: false, lastBookshelfScrollData: {}, @@ -61,6 +62,9 @@ export const getters = { getHomeBookshelfView: (state) => { if (!state.serverSettings || isNaN(state.serverSettings.homeBookshelfView)) return Constants.BookshelfView.STANDARD return state.serverSettings.homeBookshelfView + }, + getSortedEpisodeIds: (state) => { + return state.sortedEpisodeIds || [] } } @@ -146,6 +150,9 @@ export const mutations = { setEpisodeTableEpisodeIds(state, val) { state.episodeTableEpisodeIds = val || [] }, + setSortedEpisodeIds(state, episodeIds) { + state.sortedEpisodeIds = episodeIds || [] + }, setPreviousPath(state, val) { state.previousPath = val }, From 5f105dc6cca0fbf352cb62123c884583436cc52f Mon Sep 17 00:00:00 2001 From: Nicholas Wallace Date: Sat, 22 Feb 2025 21:50:37 -0700 Subject: [PATCH 2/4] Change: Play button for podcast picks first episode in table --- client/pages/item/_id/index.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue index 1ba5aa54..0c1ee22e 100644 --- a/client/pages/item/_id/index.vue +++ b/client/pages/item/_id/index.vue @@ -267,6 +267,9 @@ export default { podcastEpisodes() { return this.media.episodes || [] }, + sortedEpisodeIds() { + return this.$store.getters.getSortedEpisodeIds + }, title() { return this.mediaMetadata.title || 'No Title' }, @@ -534,7 +537,8 @@ export default { let episodeId = null const queueItems = [] if (this.isPodcast) { - const episodesInListeningOrder = this.podcastEpisodes.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' })) + const episodesInListeningOrder = [...this.sortedEpisodeIds].reverse().map((id) => this.podcastEpisodes.find((ep) => ep.id === id)) + console.log('Episodes in listening order', episodesInListeningOrder) // Find most recent episode unplayed let episodeIndex = episodesInListeningOrder.findLastIndex((ep) => { From 72169990ac622cdb35d6ec7f6b017ff1a4a742cf Mon Sep 17 00:00:00 2001 From: Nicholas Wallace Date: Sat, 22 Feb 2025 22:06:51 -0700 Subject: [PATCH 3/4] Fix: double reverse of array --- client/pages/item/_id/index.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue index 0c1ee22e..81dfe35c 100644 --- a/client/pages/item/_id/index.vue +++ b/client/pages/item/_id/index.vue @@ -537,14 +537,15 @@ export default { let episodeId = null const queueItems = [] if (this.isPodcast) { - const episodesInListeningOrder = [...this.sortedEpisodeIds].reverse().map((id) => this.podcastEpisodes.find((ep) => ep.id === id)) - console.log('Episodes in listening order', episodesInListeningOrder) + // Sort the episodes based on the sorting and filtering from the episode table component + const episodesInListeningOrder = this.sortedEpisodeIds.map((id) => this.podcastEpisodes.find((ep) => ep.id === id)) - // Find most recent episode unplayed - let episodeIndex = episodesInListeningOrder.findLastIndex((ep) => { + // Find the first unplayed episode from the table + let episodeIndex = episodesInListeningOrder.findIndex((ep) => { const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, ep.id) return !podcastProgress || !podcastProgress.isFinished }) + // If all episodes are played, use the first episode if (episodeIndex < 0) episodeIndex = 0 episodeId = episodesInListeningOrder[episodeIndex].id From fd1c8ee51332e990ab5633f78fe5179962ca4f85 Mon Sep 17 00:00:00 2001 From: advplyr Date: Tue, 25 Feb 2025 17:25:56 -0600 Subject: [PATCH 4/4] Update episode list to come from component ref, populate queue from table order when playing episode --- .../tables/podcast/LazyEpisodesTable.vue | 23 +++++++------------ client/pages/item/_id/index.vue | 9 +++----- client/store/index.js | 7 ------ 3 files changed, 11 insertions(+), 28 deletions(-) diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue index 0e62e9e4..af0f5584 100644 --- a/client/components/tables/podcast/LazyEpisodesTable.vue +++ b/client/components/tables/podcast/LazyEpisodesTable.vue @@ -89,13 +89,6 @@ export default { handler() { this.refresh() } - }, - episodesList: { - handler(newList) { - const episodeIds = newList.map((ep) => ep.id) - this.$store.commit('setSortedEpisodeIds', episodeIds) - }, - immediate: true } }, computed: { @@ -368,20 +361,20 @@ export default { playEpisode(episode) { const queueItems = [] - const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' })) + const episodesInListeningOrder = this.episodesList const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id) for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) { - const episode = episodesInListeningOrder[i] - const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id) - if (!podcastProgress || !podcastProgress.isFinished) { + const _episode = episodesInListeningOrder[i] + const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, _episode.id) + if (!podcastProgress?.isFinished || episode.id === _episode.id) { queueItems.push({ libraryItemId: this.libraryItem.id, libraryId: this.libraryItem.libraryId, - episodeId: episode.id, - title: episode.title, + episodeId: _episode.id, + title: _episode.title, subtitle: this.mediaMetadata.title, - caption: episode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(episode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate, - duration: episode.audioFile.duration || null, + caption: _episode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(_episode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate, + duration: _episode.audioFile.duration || null, coverPath: this.media.coverPath || null }) } diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue index 81dfe35c..bec80ca6 100644 --- a/client/pages/item/_id/index.vue +++ b/client/pages/item/_id/index.vue @@ -132,7 +132,7 @@ - + @@ -267,9 +267,6 @@ export default { podcastEpisodes() { return this.media.episodes || [] }, - sortedEpisodeIds() { - return this.$store.getters.getSortedEpisodeIds - }, title() { return this.mediaMetadata.title || 'No Title' }, @@ -537,8 +534,8 @@ export default { let episodeId = null const queueItems = [] if (this.isPodcast) { - // Sort the episodes based on the sorting and filtering from the episode table component - const episodesInListeningOrder = this.sortedEpisodeIds.map((id) => this.podcastEpisodes.find((ep) => ep.id === id)) + // Uses the sorting and filtering from the episode table component + const episodesInListeningOrder = this.$refs.episodesTable?.episodesList || [] // Find the first unplayed episode from the table let episodeIndex = episodesInListeningOrder.findIndex((ep) => { diff --git a/client/store/index.js b/client/store/index.js index accf931d..2f2201b6 100644 --- a/client/store/index.js +++ b/client/store/index.js @@ -25,7 +25,6 @@ export const state = () => ({ previousPath: '/', bookshelfBookIds: [], episodeTableEpisodeIds: [], - sortedEpisodeIds: [], openModal: null, innerModalOpen: false, lastBookshelfScrollData: {}, @@ -62,9 +61,6 @@ export const getters = { getHomeBookshelfView: (state) => { if (!state.serverSettings || isNaN(state.serverSettings.homeBookshelfView)) return Constants.BookshelfView.STANDARD return state.serverSettings.homeBookshelfView - }, - getSortedEpisodeIds: (state) => { - return state.sortedEpisodeIds || [] } } @@ -150,9 +146,6 @@ export const mutations = { setEpisodeTableEpisodeIds(state, val) { state.episodeTableEpisodeIds = val || [] }, - setSortedEpisodeIds(state, episodeIds) { - state.sortedEpisodeIds = episodeIds || [] - }, setPreviousPath(state, val) { state.previousPath = val },