mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-21 19:25:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Update play button on list book to check if player is starting
Some checks failed
Build APK / main (push) Has been cancelled
Details
Publish Test App / build (push) Has been cancelled
Details
Verify all i18n files are alphabetized / update_translations (push) Has been cancelled
Details
Publish Test App / deploy (push) Has been cancelled
Details

Browse source
This commit is contained in:
advplyr 2025-07-05 18:06:24 -05:00
parent 80b565c23f
commit 2f3a9a5d96
2 changed files with 19 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/cards/LazyListBookCard.vue
View file

@ -30,8 +30,13 @@
</p>
</div>
<div v-if="showPlayButton" class="absolute top-0 bottom-0 right-0 h-full flex items-center justify-center z-20 pr-1">
<button type="button" class="p-2 rounded-full bg-fg-muted/50" @click.stop.prevent="play">
<span class="material-symbols text-2xl fill text-white">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<button type="button" class="relative rounded-full bg-fg-muted/50" :class="{ 'p-2': !playerIsStartingForThisMedia }" @click.stop.prevent="play">
<span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill text-white">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<div v-else class="p-2 text-fg w-10 h-10 flex items-center justify-center bg-fg-muted/80 rounded-full overflow-hidden">
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</div>
</button>
</div>
@ -234,6 +239,14 @@ export default {
playerIsPlaying() {
return this.store.state.playerIsPlaying && (this.isStreaming || this.isPlaying)
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
return this.store.state.playerIsStartingPlayback
},
playerIsStartingForThisMedia() {
const mediaId = this.store.state.playerStartingPlaybackMediaId
return mediaId === this.libraryItemId
},
isCasting() {
return this.store.state.isCasting
},
@ -312,6 +325,8 @@ export default {
this.$emit('select', this.libraryItem)
},
async play() {
if (this.playerIsStartingPlayback) return
const hapticsImpact = this.$hapticsImpact || this.$nuxt.$hapticsImpact
if (hapticsImpact) {
await hapticsImpact()
@ -332,7 +347,7 @@ export default {
libraryItemId = this.localLibraryItem.id
}
this.store.commit('setPlayerIsStartingPlayback', libraryItemId)
this.store.commit('setPlayerIsStartingPlayback', this.libraryItemId)
eventBus.$emit('play-item', { libraryItemId, serverLibraryItemId: this.libraryItemId })
}
},