@@ -117,8 +117,12 @@ export default {
methods: {
async goPrevEpisode() {
if (this.currentEpisodeIndex - 1 < 0) return
+ // Remove focus from active input
+ document.activeElement?.blur?.()
+
const prevEpisodeId = this.episodeTableEpisodeIds[this.currentEpisodeIndex - 1]
this.processing = true
+
const prevEpisode = await this.$axios.$get(`/api/podcasts/${this.libraryItem.id}/episode/${prevEpisodeId}`).catch((error) => {
const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch episode'
this.$toast.error(errorMsg)
@@ -134,8 +138,12 @@ export default {
},
async goNextEpisode() {
if (this.currentEpisodeIndex >= this.episodeTableEpisodeIds.length - 1) return
+ // Remove focus from active input
+ document.activeElement?.blur?.()
+
this.processing = true
const nextEpisodeId = this.episodeTableEpisodeIds[this.currentEpisodeIndex + 1]
+
const nextEpisode = await this.$axios.$get(`/api/podcasts/${this.libraryItem.id}/episode/${nextEpisodeId}`).catch((error) => {
const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch book'
this.$toast.error(errorMsg)
@@ -170,6 +178,12 @@ export default {
this.show = false
}
},
+ libraryItemUpdated(libraryItem) {
+ const episode = libraryItem.media.episodes.find((e) => e.id === this.selectedEpisodeId)
+ if (episode) {
+ this.episodeItem = episode
+ }
+ },
hotkey(action) {
if (action === this.$hotkeys.Modal.NEXT_PAGE) {
this.goNextEpisode()
@@ -178,9 +192,15 @@ export default {
}
},
registerListeners() {
+ if (this.libraryItem) {
+ this.$eventBus.$on(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
+ }
this.$eventBus.$on('modal-hotkey', this.hotkey)
},
unregisterListeners() {
+ if (this.libraryItem) {
+ this.$eventBus.$on(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
+ }
this.$eventBus.$off('modal-hotkey', this.hotkey)
}
},
diff --git a/client/components/modals/podcast/EpisodeFeed.vue b/client/components/modals/podcast/EpisodeFeed.vue
index c7395901f..6b99cee7a 100644
--- a/client/components/modals/podcast/EpisodeFeed.vue
+++ b/client/components/modals/podcast/EpisodeFeed.vue
@@ -7,20 +7,21 @@
-
+
+ {{ $strings.LabelSortPubDate }}
+
+ {{ sortDescending ? 'expand_more' : 'expand_less' }}
+
+
{{ buttonText }}
-
All episodes are downloaded
+
{{ $strings.LabelAllEpisodesDownloaded }}
@@ -58,6 +66,14 @@ export default {
episodes: {
type: Array,
default: () => []
+ },
+ downloadQueue: {
+ type: Array,
+ default: () => []
+ },
+ episodesDownloading: {
+ type: Array,
+ default: () => []
}
},
data() {
@@ -70,7 +86,8 @@ export default {
searchTimeout: null,
searchText: null,
downloadedEpisodeGuidMap: {},
- downloadedEpisodeUrlMap: {}
+ downloadedEpisodeUrlMap: {},
+ sortDescending: true
}
},
watch: {
@@ -79,6 +96,21 @@ export default {
handler(newVal) {
if (newVal) this.init()
}
+ },
+ episodes: {
+ handler(newVal) {
+ if (newVal) this.updateEpisodeDownloadStatuses()
+ }
+ },
+ episodesDownloading: {
+ handler(newVal) {
+ if (newVal) this.updateEpisodeDownloadStatuses()
+ }
+ },
+ downloadQueue: {
+ handler(newVal) {
+ if (newVal) this.updateEpisodeDownloadStatuses()
+ }
}
},
computed: {
@@ -123,6 +155,17 @@ export default {
}
},
methods: {
+ toggleSort() {
+ this.sortDescending = !this.sortDescending
+ this.episodesCleaned = this.episodesCleaned.toSorted((a, b) => {
+ if (this.sortDescending) {
+ return a.publishedAt < b.publishedAt ? 1 : -1
+ }
+ return a.publishedAt > b.publishedAt ? 1 : -1
+ })
+ this.selectedEpisodes = {}
+ this.selectAll = false
+ },
getIsEpisodeDownloaded(episode) {
if (episode.guid && !!this.downloadedEpisodeGuidMap[episode.guid]) {
return true
@@ -132,6 +175,13 @@ export default {
}
return false
},
+ getIsEpisodeDownloadingOrQueued(episode) {
+ const episodesToCheck = [...this.episodesDownloading, ...this.downloadQueue]
+ if (episode.guid) {
+ return episodesToCheck.some((download) => download.guid === episode.guid)
+ }
+ return episodesToCheck.some((download) => this.getCleanEpisodeUrl(download.url) === episode.cleanUrl)
+ },
/**
* UPDATE: As of v2.4.5 guid is used for matching existing downloaded episodes if it is found on the RSS feed.
* Fallback to checking the clean url
@@ -173,13 +223,13 @@ export default {
},
toggleSelectAll(val) {
for (const episode of this.episodesList) {
- if (this.getIsEpisodeDownloaded(episode)) this.selectedEpisodes[episode.cleanUrl] = false
+ if (episode.isDownloaded || episode.isDownloading) this.selectedEpisodes[episode.cleanUrl] = false
else this.$set(this.selectedEpisodes, episode.cleanUrl, val)
}
},
checkSetIsSelectedAll() {
for (const episode of this.episodesList) {
- if (!this.getIsEpisodeDownloaded(episode) && !this.selectedEpisodes[episode.cleanUrl]) {
+ if (!episode.isDownloaded && !episode.isDownloading && !this.selectedEpisodes[episode.cleanUrl]) {
this.selectAll = false
return
}
@@ -187,7 +237,7 @@ export default {
this.selectAll = true
},
toggleSelectEpisode(episode) {
- if (this.getIsEpisodeDownloaded(episode)) return
+ if (episode.isDownloaded || episode.isDownloading) return
this.$set(this.selectedEpisodes, episode.cleanUrl, !this.selectedEpisodes[episode.cleanUrl])
this.checkSetIsSelectedAll()
},
@@ -201,8 +251,8 @@ export default {
const sizeInMb = payloadSize / 1024 / 1024
const sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
console.log('Request size', sizeInMb)
- if (sizeInMb > 4.99) {
- return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
+ if (sizeInMb > 9.99) {
+ return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 10Mb`)
}
this.processing = true
@@ -223,6 +273,23 @@ export default {
})
},
init() {
+ this.updateDownloadedEpisodeMaps()
+
+ this.episodesCleaned = this.episodes
+ .filter((ep) => ep.enclosure?.url)
+ .map((_ep) => {
+ return {
+ ..._ep,
+ cleanUrl: this.getCleanEpisodeUrl(_ep.enclosure.url),
+ isDownloading: this.getIsEpisodeDownloadingOrQueued(_ep),
+ isDownloaded: this.getIsEpisodeDownloaded(_ep)
+ }
+ })
+ this.episodesCleaned.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
+ this.selectAll = false
+ this.selectedEpisodes = {}
+ },
+ updateDownloadedEpisodeMaps() {
this.downloadedEpisodeGuidMap = {}
this.downloadedEpisodeUrlMap = {}
@@ -230,18 +297,16 @@ export default {
if (episode.guid) this.downloadedEpisodeGuidMap[episode.guid] = episode.id
if (episode.enclosure?.url) this.downloadedEpisodeUrlMap[this.getCleanEpisodeUrl(episode.enclosure.url)] = episode.id
})
-
- this.episodesCleaned = this.episodes
- .filter((ep) => ep.enclosure?.url)
- .map((_ep) => {
- return {
- ..._ep,
- cleanUrl: this.getCleanEpisodeUrl(_ep.enclosure.url)
- }
- })
- this.episodesCleaned.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
- this.selectAll = false
- this.selectedEpisodes = {}
+ },
+ updateEpisodeDownloadStatuses() {
+ this.updateDownloadedEpisodeMaps()
+ this.episodesCleaned = this.episodesCleaned.map((ep) => {
+ return {
+ ...ep,
+ isDownloading: this.getIsEpisodeDownloadingOrQueued(ep),
+ isDownloaded: this.getIsEpisodeDownloaded(ep)
+ }
+ })
}
},
mounted() {}
diff --git a/client/components/modals/podcast/NewModal.vue b/client/components/modals/podcast/NewModal.vue
index c52ac776d..33e6dbc4b 100644
--- a/client/components/modals/podcast/NewModal.vue
+++ b/client/components/modals/podcast/NewModal.vue
@@ -52,11 +52,11 @@