starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-29 22:57:16 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

Update collection/playlist play button to show pause when playing #1394, update collections to play local item if available

Browse Source
This commit is contained in:
advplyr
2025-01-26 15:11:49 -06:00
parent c79ecbb92e
commit 0520cbd538
33 changed files with 84 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/collection/_id.vue
+42 -11
View File
@@ -12,9 +12,9 @@
{{ collectionName }}
</h1>
<div class="flex-grow" />
<ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small :loading="playerIsStartingForThisMedia" class="flex items-center justify-center h-9 mr-2 w-24" @click="clickPlay">
<span v-show="!streaming" class="material-icons -ml-2 pr-1 text-white">play_arrow</span>
{{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
<ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
<span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
</ui-btn>
</div>
@@ -47,6 +47,18 @@ export default {
return redirect('/bookshelf')
}
// Lookup matching local items and attach to collection items
if (collection.books.length) {
const localLibraryItems = (await app.$db.getLocalLibraryItems('book')) || []
if (localLibraryItems.length) {
collection.books.forEach((collectionItem) => {
const matchingLocalLibraryItem = localLibraryItems.find((lli) => lli.libraryItemId === collectionItem.id)
if (!matchingLocalLibraryItem) return
collectionItem.localLibraryItem = matchingLocalLibraryItem
})
}
}
return {
collection
}
@@ -70,13 +82,19 @@ export default {
description() {
return this.collection.description || ''
},
playableBooks() {
playableItems() {
return this.bookItems.filter((book) => {
return !book.isMissing && !book.isInvalid && book.media.tracks.length
})
},
streaming() {
return !!this.playableBooks.find((b) => this.$store.getters['getIsMediaStreaming'](b.id))
playerIsPlaying() {
return this.$store.state.playerIsPlaying && this.isOpenInPlayer
},
isOpenInPlayer() {
return !!this.playableItems.find((i) => {
if (i.localLibraryItem && this.$store.getters['getIsMediaStreaming'](i.localLibraryItem.id)) return true
return this.$store.getters['getIsMediaStreaming'](i.id)
})
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
@@ -88,21 +106,34 @@ export default {
return mediaId === this.mediaIdStartingPlayback
},
showPlayButton() {
return this.playableBooks.length
return this.playableItems.length
}
},
methods: {
clickPlay() {
async playClick() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
var nextBookNotRead = this.playableBooks.find((pb) => {
var prog = this.$store.getters['user/getUserMediaProgress'](pb.id)
if (this.playerIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.playNextItem()
}
},
playNextItem() {
const nextBookNotRead = this.playableItems.find((pb) => {
const prog = this.$store.getters['user/getUserMediaProgress'](pb.id)
return !prog?.isFinished
})
if (nextBookNotRead) {
this.mediaIdStartingPlayback = nextBookNotRead.id
this.$store.commit('setPlayerIsStartingPlayback', nextBookNotRead.id)
this.$eventBus.$emit('play-item', { libraryItemId: nextBookNotRead.id })
if (nextBookNotRead.localLibraryItem) {
this.$eventBus.$emit('play-item', { libraryItemId: nextBookNotRead.localLibraryItem.id, serverLibraryItemId: nextBookNotRead.id })
} else {
this.$eventBus.$emit('play-item', { libraryItemId: nextBookNotRead.id })
}
}
}
},
pages/playlist/_id.vue
+18 -5
View File
@@ -10,9 +10,9 @@
{{ playlistName }}
</h1>
<div class="flex-grow" />
<ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center text-center h-9 mr-2 w-24" @click="clickPlay">
<span v-show="!streaming" class="material-icons -ml-2 pr-1 text-white">play_arrow</span>
{{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
<ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
<span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
</ui-btn>
</div>
@@ -101,7 +101,10 @@ export default {
return libraryItem.media.tracks.length
})
},
streaming() {
playerIsPlaying() {
return this.$store.state.playerIsPlaying && this.isOpenInPlayer
},
isOpenInPlayer() {
return !!this.playableItems.find((i) => {
if (i.localLibraryItem && this.$store.getters['getIsMediaStreaming'](i.localLibraryItem.id, i.localEpisode?.id)) return true
return this.$store.getters['getIsMediaStreaming'](i.libraryItemId, i.episodeId)
@@ -126,7 +129,17 @@ export default {
this.selectedEpisode = playlistItem.episode
this.showMoreMenu = true
},
clickPlay() {
async playClick() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
if (this.playerIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.playNextItem()
}
},
playNextItem() {
const nextItem = this.playableItems.find((i) => {
const prog = this.$store.getters['user/getUserMediaProgress'](i.libraryItemId, i.episodeId)
return !prog?.isFinished