Add: "Play Next" button for podcast episode table

This commit is contained in:
Maaz Hassan 2023-12-29 11:12:21 +00:00
parent 46ac48ffbd
commit 3fc0b99cb6
19 changed files with 38 additions and 2 deletions

View file

@ -25,6 +25,10 @@
<ui-icon-btn :icon="isQueued ? 'playlist_add_check' : 'playlist_play'" borderless @click="queueBtnClick" />
</ui-tooltip>
<ui-tooltip v-if="!isQueued && libraryItemIdStreaming && !isStreamingFromDifferentLibrary" :text="$strings.MessagePlayNext" direction="top">
<ui-icon-btn class="scale-90" icon="queue_play_next" borderless @click="queuePlayNext" />
</ui-tooltip>
<ui-tooltip :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
</ui-tooltip>
@ -201,7 +205,9 @@ export default {
// Add to queue
this.$emit('addToQueue', this.episode)
}
}
},
queuePlayNext() {
this.$emit('queuePlayNext', this.episode)}
}
}
</script>

View file

@ -32,7 +32,7 @@
</form>
</div>
<template v-for="episode in episodesList">
<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" @addToQueue="addEpisodeToQueue" @addToPlaylist="addToPlaylist" />
<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" @addToQueue="addEpisodeToQueue" @queuePlayNext="addEpisodeToTopOfQueue" @addToPlaylist="addToPlaylist" />
</template>
<modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
@ -274,6 +274,19 @@ export default {
}
this.$store.commit('addItemToQueue', queueItem)
},
addEpisodeToTopOfQueue(episode) {
const queueItem = {
libraryItemId: this.libraryItem.id,
libraryId: this.libraryItem.libraryId,
episodeId: episode.id,
title: episode.title,
subtitle: this.mediaMetadata.title,
caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
duration: episode.audioFile.duration || null,
coverPath: this.media.coverPath || null
}
this.$store.commit('addItemToTopOfQueue', queueItem)
},
toggleBatchFinished() {
this.batchUpdateEpisodesFinished(this.selectedEpisodes, !this.selectedIsFinished)
},