mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-04 18:15:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update:Show loading indicator on play buttons when starting playback

Browse source
This commit is contained in:
advplyr 2023-12-15 17:35:37 -06:00
parent efc6d68403
commit e1c02ce74c
14 changed files with 172 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

16
pages/playlist/_id.vue
View file

@ -10,7 +10,7 @@
{{ playlistName }}
</h1>
<div class="flex-grow" />
<ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center justify-center text-center h-9 mr-2 w-24" @click="clickPlay">
<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>
@ -76,7 +76,8 @@ export default {
showMoreMenu: false,
processing: false,
selectedLibraryItem: null,
selectedEpisode: null
selectedEpisode: null,
mediaIdStartingPlayback: null
}
},
computed: {
@ -108,6 +109,15 @@ export default {
},
showPlayButton() {
return this.playableItems.length
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
return this.$store.state.playerIsStartingPlayback
},
playerIsStartingForThisMedia() {
if (!this.mediaIdStartingPlayback) return false
const mediaId = this.$store.state.playerStartingPlaybackMediaId
return mediaId === this.mediaIdStartingPlayback
}
},
methods: {
@ -122,6 +132,8 @@ export default {
return !prog?.isFinished
})
if (nextItem) {
this.mediaIdStartingPlayback = nextItem.episodeId || nextItem.libraryItemId
this.$store.commit('setPlayerIsStartingPlayback', this.mediaIdStartingPlayback)
if (nextItem.localLibraryItem) {
this.$eventBus.$emit('play-item', { libraryItemId: nextItem.localLibraryItem.id, episodeId: nextItem.localEpisode?.id, serverLibraryItemId: nextItem.libraryItemId, serverEpisodeId: nextItem.episodeId })
} else {