extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-11-08 00:54:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add:Buttons to add/remove podcast episodes from player queue

Browse Source
This commit is contained in:
advplyr 2022-11-12 15:41:41 -06:00
parent 92e3e0ef6e
commit 3357ccfaf3
10 changed files with 158 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/app/StreamContainer.vue
View File

@ -159,8 +159,8 @@ export default {
return i.libraryItemId === libraryItemId
})
if (currentQueueIndex < 0) {
console.error('Media finished not found in queue', this.playerQueueItems)
return
console.error('Media finished not found in queue - using first in queue', this.playerQueueItems)
currentQueueIndex = -1
}
if (currentQueueIndex === this.playerQueueItems.length - 1) {
console.log('Finished last item in queue')

45
client/components/cards/LazyBookCard.vue
View File

@ -324,8 +324,18 @@ export default {
if (this.recentEpisode) return false // Dont show podcast error on episode card
return this.numInvalidAudioFiles || this.numMissingParts || this.isMissing || this.isInvalid
},
libraryItemIdStreaming() {
return this.store.getters['getLibraryItemIdStreaming']
},
isStreaming() {
return this.store.getters['getlibraryItemIdStreaming'] === this.libraryItemId
return this.libraryItemIdStreaming === this.libraryItemId
},
isQueued() {
const episodeId = this.recentEpisode ? this.recentEpisode.id : null
return this.store.getters['getIsMediaQueued'](this.libraryItemId, episodeId)
},
isStreamingFromDifferentLibrary() {
return this.store.getters['getIsStreamingFromDifferentLibrary']
},
showReadButton() {
return !this.isSelectionMode && !this.showPlayButton && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
@ -408,6 +418,19 @@ export default {
text: this.$strings.ButtonRemoveFromContinueListening
})
}
if (this.libraryItemIdStreaming && !this.isStreamingFromDifferentLibrary) {
if (!this.isQueued) {
items.push({
func: 'addToQueue',
text: this.$strings.ButtonQueueAddItem
})
} else if (!this.isStreaming) {
items.push({
func: 'removeFromQueue',
text: this.$strings.ButtonQueueRemoveItem
})
}
}
return items
}
@ -666,6 +689,25 @@ export default {
this.processing = false
})
},
addToQueue() {
if (this.recentEpisode) {
const queueItem = {
libraryItemId: this.libraryItemId,
libraryId: this.libraryId,
episodeId: this.recentEpisode.id,
title: this.recentEpisode.title,
subtitle: this.mediaMetadata.title,
caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
duration: this.recentEpisode.audioFile.duration || null,
coverPath: this.media.coverPath || null
}
this.store.commit('addItemToQueue', queueItem)
}
},
removeFromQueue() {
const episodeId = this.recentEpisode ? this.recentEpisode.id : null
this.store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId })
},
openCollections() {
this.store.commit('setSelectedLibraryItem', this.libraryItem)
this.store.commit('globals/setShowCollectionsModal', true)
@ -761,6 +803,7 @@ export default {
if (!podcastProgress || !podcastProgress.isFinished) {
queueItems.push({
libraryItemId: this.libraryItemId,
libraryId: this.libraryId,
episodeId: episode.id,
title: episode.title,
subtitle: this.mediaMetadata.title,

6
client/components/modals/player/QueueItemsModal.vue
View File

@ -59,11 +59,7 @@ export default {
this.show = false
},
removeItem(item) {
const updatedQueue = this.playerQueueItems.filter((i) => {
if (!i.episodeId) return i.libraryItemId !== item.libraryItemId
return i.libraryItemId !== item.libraryItemId || i.episodeId !== item.episodeId
})
this.$store.commit('setPlayerQueueItems', updatedQueue)
this.$store.commit('removeItemFromQueue', item)
}
}
}

2
client/components/player/PlayerUi.vue
View File

@ -29,7 +29,7 @@
</ui-tooltip>
<button v-if="playerQueueItems.length" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
<span class="material-icons text-2xl sm:text-3xl">playlist_play</span>
<span class="material-icons text-2xl sm:text-3xl">queue_music</span>
</button>
</div>

22
client/components/tables/podcast/EpisodeTableRow.vue
View File

@ -20,6 +20,10 @@
<p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
</button>
<button v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" class="h-8 w-8 flex justify-center items-center mx-2" :class="isQueued ? 'text-success' : ''" @click.stop="queueBtnClick">
<span class="material-icons-outlined">{{ isQueued ? 'playlist_add_check' : 'playlist_add' }}</span>
</button>
<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>
@ -83,9 +87,18 @@ export default {
duration() {
return this.$secondsToTimestamp(this.episode.duration)
},
libraryItemIdStreaming() {
return this.$store.getters['getLibraryItemIdStreaming']
},
isStreamingFromDifferentLibrary() {
return this.$store.getters['getIsStreamingFromDifferentLibrary']
},
isStreaming() {
return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
},
isQueued() {
return this.$store.getters['getIsMediaQueued'](this.libraryItemId, this.episode.id)
},
streamIsPlaying() {
return this.$store.state.streamIsPlaying && this.isStreaming
},
@ -169,6 +182,15 @@ export default {
},
removeClick() {
this.$emit('remove', this.episode)
},
queueBtnClick() {
if (this.isQueued) {
// Remove from queue
this.$store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episode.id })
} else {
// Add to queue
this.$emit('addToQueue', this.episode)
}
}
}
}

16
client/components/tables/podcast/EpisodesTable.vue
View File

@ -17,7 +17,7 @@
</div>
<p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p>
<template v-for="episode in episodesSorted">
<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" />
<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" />
</template>
<modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
@ -131,6 +131,19 @@ export default {
}
},
methods: {
addEpisodeToQueue(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, 'MMM do, yyyy')}` : 'Unknown publish date',
duration: episode.audioFile.duration || null,
coverPath: this.media.coverPath || null
}
this.$store.commit('addItemToQueue', queueItem)
},
toggleBatchFinished() {
this.processing = true
var newIsFinished = !this.selectedIsFinished
@ -189,6 +202,7 @@ export default {
if (!podcastProgress || !podcastProgress.isFinished) {
queueItems.push({
libraryItemId: this.libraryItem.id,
libraryId: this.libraryItem.libraryId,
episodeId: episode.id,
title: episode.title,
subtitle: this.mediaMetadata.title,

44
client/pages/library/_library/podcast/latest.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
<div class="page" :class="libraryItemIdStreaming ? 'streaming' : ''">
<app-book-shelf-toolbar page="recent-episodes" />
<div id="bookshelf" class="w-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
@ -18,11 +18,17 @@
<p class="text-sm text-gray-200 mb-4">{{ episode.subtitle }}</p>
<div class="flex items-center">
<button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="episode.progress && episode.progress.isFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick(episode)">
<span v-if="episodeIdStreaming === episode.id" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span v-else class="material-icons text-success">play_arrow</span>
<p class="pl-2 pr-1 text-sm font-semibold">{{ getButtonText(episode) }}</p>
</button>
<button v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" class="h-8 w-8 flex justify-center items-center mx-2" :class="playerQueueEpisodeIdMap[episode.id] ? 'text-success' : ''" @click.stop="queueBtnClick(episode)">
<span class="material-icons-outlined">{{ playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_add' }}</span>
</button>
</div>
</div>
<div v-if="episode.progress" class="absolute bottom-0 left-0 h-0.5 pointer-events-none bg-warning" :style="{ width: episode.progress.progress * 100 + '%' }" />
@ -63,9 +69,6 @@ export default {
}
},
computed: {
streamLibraryItem() {
return this.$store.state.streamLibraryItem
},
bookCoverAspectRatio() {
return this.$store.getters['libraries/getBookCoverAspectRatio']
},
@ -78,6 +81,9 @@ export default {
streamIsPlaying() {
return this.$store.state.streamIsPlaying
},
isStreamingFromDifferentLibrary() {
return this.$store.getters['getIsStreamingFromDifferentLibrary']
},
episodesMapped() {
return this.recentEpisodes.map((ep) => {
return {
@ -85,6 +91,16 @@ export default {
progress: this.$store.getters['user/getUserMediaProgress'](ep.libraryItemId, ep.id)
}
})
},
playerQueueItems() {
return this.$store.state.playerQueueItems || []
},
playerQueueEpisodeIdMap() {
const episodeIds = {}
this.playerQueueItems.forEach((i) => {
if (i.episodeId) episodeIds[i.episodeId] = true
})
return episodeIds
}
},
methods: {
@ -124,6 +140,7 @@ export default {
if (!episode.progress || !episode.isFinished) {
queueItems.push({
libraryItemId: episode.libraryItemId,
libraryId: episode.libraryId,
episodeId: episode.id,
title: episode.title,
subtitle: episode.podcast.metadata.title,
@ -152,6 +169,25 @@ export default {
this.recentEpisodes = episodePayload.episodes || []
this.totalEpisodes = episodePayload.total
this.currentPage = page
},
queueBtnClick(episode) {
if (this.playerQueueEpisodeIdMap[episode.id]) {
// Remove from queue
this.$store.commit('removeItemFromQueue', { libraryItemId: episode.libraryItemId, episodeId: episode.id })
} else {
// Add to queue
const queueItem = {
libraryItemId: episode.libraryItemId,
libraryId: episode.libraryId,
episodeId: episode.id,
title: episode.title,
subtitle: episode.podcast.metadata.title,
caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
duration: episode.duration || null,
coverPath: episode.podcast.coverPath || null
}
this.$store.commit('addItemToQueue', queueItem)
}
}
},
mounted() {

25
client/store/index.js
View File

@ -41,11 +41,21 @@ export const getters = {
getLibraryItemIdStreaming: state => {
return state.streamLibraryItem ? state.streamLibraryItem.id : null
},
getIsStreamingFromDifferentLibrary: (state, getters, rootState) => {
if (!state.streamLibraryItem) return false
return state.streamLibraryItem.libraryId !== rootState.libraries.currentLibraryId
},
getIsMediaStreaming: state => (libraryItemId, episodeId) => {
if (!state.streamLibraryItem) return null
if (!episodeId) return state.streamLibraryItem.id == libraryItemId
return state.streamLibraryItem.id == libraryItemId && state.streamEpisodeId == episodeId
},
getIsMediaQueued: state => (libraryItemId, episodeId) => {
return state.playerQueueItems.some(i => {
if (!episodeId) return i.libraryItemId === libraryItemId
return i.libraryItemId === libraryItemId && i.episodeId === episodeId
})
},
getBookshelfView: state => {
if (!state.serverSettings || isNaN(state.serverSettings.bookshelfView)) return Constants.BookshelfView.STANDARD
return state.serverSettings.bookshelfView
@ -159,6 +169,21 @@ export const mutations = {
setPlayerQueueItems(state, items) {
state.playerQueueItems = items || []
},
removeItemFromQueue(state, item) {
state.playerQueueItems = state.playerQueueItems.filter((i) => {
if (!i.episodeId) return i.libraryItemId !== item.libraryItemId
return i.libraryItemId !== item.libraryItemId || i.episodeId !== item.episodeId
})
},
addItemToQueue(state, item) {
const exists = state.playerQueueItems.some(i => {
if (!i.episodeId) return i.libraryItemId === item.libraryItemId
return i.libraryItemId === item.libraryItemId && i.episodeId === item.episodeId
})
if (!exists) {
state.playerQueueItems.push(item)
}
},
setPlayerQueueAutoPlay(state, autoPlay) {
state.playerQueueAutoPlay = !!autoPlay
localStorage.setItem('playerQueueAutoPlay', !!autoPlay ? '1' : '0')

2
client/strings/en-us.json
View File

@ -42,6 +42,8 @@
"ButtonPurgeAllCache": "Purge All Cache",
"ButtonPurgeItemsCache": "Purge Items Cache",
"ButtonPurgeMediaProgress": "Purge Media Progress",
"ButtonQueueAddItem": "Add to queue",
"ButtonQueueRemoveItem": "Remove from queue",
"ButtonQuickMatch": "Quick Match",
"ButtonRead": "Read",
"ButtonRemove": "Remove",

1
server/controllers/LibraryController.js
View File

@ -602,6 +602,7 @@ class LibraryController {
const ep = _ep.toJSONExpanded()
ep.podcast = libraryItem.media.toJSONMinified()
ep.libraryItemId = libraryItem.id
ep.libraryId = libraryItem.libraryId
return ep
})
allUnfinishedEpisodes.push(...unfinishedEpisodes)