2022-03-26 23:41:26 +01:00
|
|
|
<template>
|
|
|
|
<div class="w-full py-6">
|
2022-04-13 01:07:13 +02:00
|
|
|
<div class="flex items-center mb-4">
|
|
|
|
<p class="text-lg mb-0 font-semibold">Episodes</p>
|
|
|
|
<div class="flex-grow" />
|
2022-08-14 19:34:21 +02:00
|
|
|
<template v-if="isSelectionMode">
|
2022-08-28 21:47:31 +02:00
|
|
|
<ui-tooltip :text="`Mark as ${selectedIsFinished ? 'Not Finished' : 'Finished'}`" direction="bottom">
|
|
|
|
<ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
|
|
|
|
</ui-tooltip>
|
|
|
|
<ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">Remove {{ selectedEpisodes.length }} episode{{ selectedEpisodes.length > 1 ? 's' : '' }}</ui-btn>
|
|
|
|
<ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">Cancel</ui-btn>
|
2022-08-14 19:34:21 +02:00
|
|
|
</template>
|
|
|
|
<controls-episode-sort-select v-else v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
|
2022-04-13 01:07:13 +02:00
|
|
|
</div>
|
2022-03-27 22:37:04 +02:00
|
|
|
<p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
|
2022-05-25 01:38:25 +02:00
|
|
|
<template v-for="episode in episodesSorted">
|
2022-08-28 20:12:38 +02:00
|
|
|
<tables-podcast-episode-table-row ref="episodeRow" :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" :selection-mode="isSelectionMode" class="item" @play="playEpisode" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" @selected="episodeSelected" />
|
2022-05-24 02:28:00 +02:00
|
|
|
</template>
|
2022-05-25 01:38:25 +02:00
|
|
|
|
2022-08-14 19:34:21 +02:00
|
|
|
<modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
|
2022-03-26 23:41:26 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
libraryItem: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
2022-05-25 01:38:25 +02:00
|
|
|
episodesCopy: [],
|
2022-05-24 02:28:00 +02:00
|
|
|
sortKey: 'publishedAt',
|
2022-05-25 01:38:25 +02:00
|
|
|
sortDesc: true,
|
|
|
|
selectedEpisode: null,
|
2022-08-14 19:34:21 +02:00
|
|
|
showPodcastRemoveModal: false,
|
|
|
|
selectedEpisodes: [],
|
2022-08-28 21:47:31 +02:00
|
|
|
episodesToRemove: [],
|
|
|
|
processing: false
|
2022-05-25 01:38:25 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
libraryItem() {
|
|
|
|
this.init()
|
2022-03-26 23:41:26 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2022-08-14 19:34:21 +02:00
|
|
|
isSelectionMode() {
|
|
|
|
return this.selectedEpisodes.length > 0
|
|
|
|
},
|
2022-04-13 01:07:13 +02:00
|
|
|
userCanUpdate() {
|
|
|
|
return this.$store.getters['user/getUserCanUpdate']
|
|
|
|
},
|
2022-03-26 23:41:26 +01:00
|
|
|
media() {
|
|
|
|
return this.libraryItem.media || {}
|
|
|
|
},
|
|
|
|
mediaMetadata() {
|
|
|
|
return this.media.metadata || {}
|
|
|
|
},
|
|
|
|
episodes() {
|
|
|
|
return this.media.episodes || []
|
2022-05-25 01:38:25 +02:00
|
|
|
},
|
|
|
|
episodesSorted() {
|
|
|
|
return this.episodesCopy.sort((a, b) => {
|
|
|
|
if (this.sortDesc) {
|
|
|
|
return String(b[this.sortKey]).localeCompare(String(a[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
|
|
|
|
}
|
|
|
|
return String(a[this.sortKey]).localeCompare(String(b[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
|
|
|
|
})
|
2022-08-28 21:47:31 +02:00
|
|
|
},
|
|
|
|
selectedIsFinished() {
|
|
|
|
// Find an item that is not finished, if none then all items finished
|
|
|
|
return !this.selectedEpisodes.find((episode) => {
|
|
|
|
var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
|
|
|
|
return !itemProgress || !itemProgress.isFinished
|
|
|
|
})
|
2022-03-26 23:41:26 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2022-08-28 21:47:31 +02:00
|
|
|
toggleBatchFinished() {
|
|
|
|
this.processing = true
|
|
|
|
var newIsFinished = !this.selectedIsFinished
|
|
|
|
var updateProgressPayloads = this.selectedEpisodes.map((episode) => {
|
|
|
|
return {
|
|
|
|
libraryItemId: this.libraryItem.id,
|
|
|
|
episodeId: episode.id,
|
|
|
|
isFinished: newIsFinished
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
this.$axios
|
|
|
|
.patch(`/api/me/progress/batch/update`, updateProgressPayloads)
|
|
|
|
.then(() => {
|
|
|
|
this.$toast.success('Batch update success!')
|
|
|
|
this.processing = false
|
|
|
|
this.clearSelected()
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
this.$toast.error('Batch update failed')
|
|
|
|
console.error('Failed to batch update read/not read', error)
|
|
|
|
this.processing = false
|
|
|
|
})
|
|
|
|
},
|
2022-08-14 19:34:21 +02:00
|
|
|
removeEpisodeModalToggled(val) {
|
|
|
|
if (!val) this.episodesToRemove = []
|
|
|
|
},
|
|
|
|
clearSelected() {
|
|
|
|
const episodeRows = this.$refs.episodeRow
|
|
|
|
if (episodeRows && episodeRows.length) {
|
|
|
|
for (const epRow of episodeRows) {
|
|
|
|
if (epRow) epRow.isSelected = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.selectedEpisodes = []
|
|
|
|
},
|
|
|
|
removeSelectedEpisodes() {
|
|
|
|
this.episodesToRemove = this.selectedEpisodes
|
|
|
|
this.showPodcastRemoveModal = true
|
|
|
|
},
|
|
|
|
episodeSelected({ isSelected, episode }) {
|
|
|
|
if (isSelected) {
|
|
|
|
this.selectedEpisodes.push(episode)
|
|
|
|
} else {
|
|
|
|
this.selectedEpisodes = this.selectedEpisodes.filter((ep) => ep.id !== episode.id)
|
|
|
|
}
|
|
|
|
},
|
2022-08-28 20:12:38 +02:00
|
|
|
playEpisode(episode) {
|
|
|
|
const queueItems = []
|
|
|
|
const episodeIndex = this.episodes.findIndex((e) => e.id === episode.id)
|
|
|
|
for (let i = episodeIndex; i < this.episodes.length; i++) {
|
|
|
|
const episode = this.episodes[i]
|
|
|
|
const audioFile = episode.audioFile
|
|
|
|
queueItems.push({
|
|
|
|
libraryItemId: this.libraryItem.id,
|
|
|
|
episodeId: episode.id,
|
|
|
|
title: episode.title,
|
|
|
|
subtitle: this.mediaMetadata.title,
|
|
|
|
duration: audioFile.duration || null,
|
|
|
|
coverPath: this.media.coverPath || null
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$eventBus.$emit('play-item', {
|
|
|
|
libraryItemId: this.libraryItem.id,
|
|
|
|
episodeId: episode.id,
|
|
|
|
queueItems
|
|
|
|
})
|
|
|
|
},
|
2022-05-25 01:38:25 +02:00
|
|
|
removeEpisode(episode) {
|
2022-08-14 19:34:21 +02:00
|
|
|
this.episodesToRemove = [episode]
|
2022-05-25 01:38:25 +02:00
|
|
|
this.showPodcastRemoveModal = true
|
|
|
|
},
|
2022-03-27 22:37:04 +02:00
|
|
|
editEpisode(episode) {
|
2022-04-23 02:31:11 +02:00
|
|
|
this.$store.commit('setSelectedLibraryItem', this.libraryItem)
|
|
|
|
this.$store.commit('globals/setSelectedEpisode', episode)
|
|
|
|
this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
|
2022-05-25 01:38:25 +02:00
|
|
|
},
|
2022-05-28 18:38:51 +02:00
|
|
|
viewEpisode(episode) {
|
|
|
|
this.$store.commit('setSelectedLibraryItem', this.libraryItem)
|
|
|
|
this.$store.commit('globals/setSelectedEpisode', episode)
|
|
|
|
this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
|
|
|
|
},
|
2022-05-25 01:38:25 +02:00
|
|
|
init() {
|
|
|
|
this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
|
2022-03-26 23:41:26 +01:00
|
|
|
}
|
|
|
|
},
|
2022-05-25 01:38:25 +02:00
|
|
|
mounted() {
|
|
|
|
this.init()
|
|
|
|
}
|
2022-03-26 23:41:26 +01:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.episode-item {
|
|
|
|
transition: all 0.4s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.episode-enter-from,
|
|
|
|
.episode-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateX(30px);
|
|
|
|
}
|
|
|
|
|
|
|
|
.episode-leave-active {
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
</style>
|