mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-29 07:04:31 +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

5
components/app/AudioPlayerContainer.vue
View file

@ -204,6 +204,7 @@ export default {
message: `Cannot cast downloaded media items. Confirm to close cast and play on your device.`
})
if (!value) {
this.$store.commit('setPlayerDoneStartingPlayback')
return
}
}
@ -217,6 +218,7 @@ export default {
} else if (this.$refs.audioPlayer) {
this.$refs.audioPlayer.play()
}
this.$store.commit('setPlayerDoneStartingPlayback')
return
}
@ -254,6 +256,9 @@ export default {
console.error('Failed', error)
this.$toast.error('Failed to play')
})
.finally(() => {
this.$store.commit('setPlayerDoneStartingPlayback')
})
},
pauseItem() {
if (this.$refs.audioPlayer && this.$refs.audioPlayer.isPlaying) {

20
components/cards/LazyBookCard.vue
View file

@ -46,8 +46,13 @@
</div>
<!-- Play/pause button for podcast episode -->
<div v-if="recentEpisode" class="absolute z-10 top-0 left-0 bottom-0 right-0 m-auto flex items-center justify-center w-12 h-12 rounded-full bg-white bg-opacity-70" @click.stop="playEpisode">
<span class="material-icons text-6xl text-black text-opacity-80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
<div v-if="recentEpisode" class="absolute z-10 top-0 left-0 bottom-0 right-0 m-auto flex items-center justify-center w-12 h-12 rounded-full" :class="{ 'bg-white/70': !playerIsStartingForThisMedia }" @click.stop="playEpisode">
<span v-if="!playerIsStartingForThisMedia" class="material-icons text-6xl text-black/80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
<div v-else class="text-fg absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black/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>
</div>
<!-- No progress shown for collapsed series in library -->
@ -322,6 +327,14 @@ export default {
streamIsPlaying() {
return this.store.state.playerIsPlaying && this.isStreaming
},
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.recentEpisode?.id
},
isMissing() {
return this._libraryItem.isMissing
},
@ -447,6 +460,8 @@ export default {
},
async play() {},
async playEpisode() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
const eventBus = this.$eventBus || this.$nuxt.$eventBus
if (this.streamIsPlaying) {
@ -454,6 +469,7 @@ export default {
return
}
this.store.commit('setPlayerIsStartingPlayback', this.recentEpisode.id)
if (this.localEpisode) {
// Play episode locally
eventBus.$emit('play-item', {

6
components/cards/LazyListBookCard.vue
View file

@ -176,7 +176,7 @@ export default {
return this.mediaMetadata.series
},
seriesSequence() {
return this.series ? this.series.sequence : null
return this.series?.sequence || null
},
collapsedSeries() {
// Only added to item object when collapseSeries is enabled
@ -209,10 +209,10 @@ export default {
return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
},
userProgressPercent() {
return this.userProgress ? this.userProgress.progress || 0 : 0
return this.userProgress?.progress || 0
},
itemIsFinished() {
return this.userProgress ? !!this.userProgress.isFinished : false
return !!this.userProgress?.isFinished
},
showError() {
return this.numMissingParts || this.isMissing || this.isInvalid

21
components/tables/playlist/ItemTableRow.vue
View file

@ -13,8 +13,11 @@
</div>
</div>
<div class="w-8 min-w-8 flex justify-center">
<button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
<span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center" @click.stop.prevent="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else class="animate-spin" style="width: 18px; height: 18px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</button>
</div>
<div class="w-8 min-w-8 flex justify-center">
@ -117,6 +120,15 @@ export default {
streamIsPlaying() {
return this.$store.state.playerIsPlaying && this.isStreaming
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
return this.$store.state.playerIsStartingPlayback
},
playerIsStartingForThisMedia() {
const mediaId = this.$store.state.playerStartingPlaybackMediaId
let thisMediaId = this.episodeId || this.libraryItem.id
return mediaId === thisMediaId
},
userItemProgress() {
return this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, this.episodeId)
},
@ -142,10 +154,14 @@ export default {
this.$emit('showMore', playlistItem)
},
async playClick() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
let mediaId = this.episodeId || this.libraryItem.id
if (this.streamIsPlaying) {
this.$eventBus.$emit('pause-item')
} else if (this.localLibraryItem) {
this.$store.commit('setPlayerIsStartingPlayback', mediaId)
this.$eventBus.$emit('play-item', {
libraryItemId: this.localLibraryItem.id,
episodeId: this.localEpisode?.id,
@ -153,6 +169,7 @@ export default {
serverEpisodeId: this.episodeId
})
} else {
this.$store.commit('setPlayerIsStartingPlayback', mediaId)
this.$eventBus.$emit('play-item', {
libraryItemId: this.libraryItem.id,
episodeId: this.episodeId

17
components/tables/podcast/EpisodeRow.vue
View file

@ -29,7 +29,10 @@
<div class="flex items-center pt-2">
<div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
<span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else 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>
<p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
</div>
@ -118,6 +121,14 @@ export default {
streamIsPlaying() {
return this.$store.state.playerIsPlaying && this.isStreaming
},
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.episode?.id
},
itemProgress() {
if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, this.episode.id)
return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
@ -227,10 +238,14 @@ export default {
}
},
async playClick() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
if (this.streamIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.$store.commit('setPlayerIsStartingPlayback', this.episode.id)
if (this.localEpisode && this.localLibraryItemId) {
console.log('Play local episode', this.localEpisode.id, this.localLibraryItemId)

24
components/tables/podcast/LatestEpisodeRow.vue
View file

@ -29,7 +29,10 @@
<div class="flex items-center pt-2">
<div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
<span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else 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>
<p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
</div>
@ -122,6 +125,15 @@ export default {
streamIsPlaying() {
return this.$store.state.playerIsPlaying && this.isStreaming
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
return this.$store.state.playerIsStartingPlayback
},
playerIsStartingForThisMedia() {
if (!this.episode?.id) return false
const mediaId = this.$store.state.playerStartingPlaybackMediaId
return mediaId === this.episode.id
},
itemProgress() {
if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, this.episode.id)
return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
@ -135,10 +147,10 @@ export default {
}
},
itemProgressPercent() {
return this.itemProgress ? this.itemProgress.progress : 0
return this.itemProgress?.progress || 0
},
userIsFinished() {
return this.itemProgress ? !!this.itemProgress.isFinished : false
return !!this.itemProgress?.isFinished
},
timeRemaining() {
if (this.streamIsPlaying) return 'Playing'
@ -154,7 +166,7 @@ export default {
return this.$store.getters['globals/getDownloadItem'](this.libraryItemId, this.episode.id)
},
localEpisodeId() {
return this.localEpisode ? this.localEpisode.id : null
return this.localEpisode?.id || null
},
podcast() {
return this.episode.podcast || {}
@ -238,10 +250,14 @@ export default {
}
},
async playClick() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
if (this.streamIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.$store.commit('setPlayerIsStartingPlayback', this.episode.id)
if (this.localEpisode && this.localLibraryItemId) {
console.log('Play local episode', this.localEpisode.id, this.localLibraryItemId)

18
pages/collection/_id.vue
View file

@ -12,7 +12,7 @@
{{ collectionName }}
</h1>
<div class="flex-grow" />
<ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center justify-center h-9 mr-2 w-24" @click="clickPlay">
<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>
@ -53,6 +53,7 @@ export default {
},
data() {
return {
mediaIdStartingPlayback: null,
processingRemove: false
}
},
@ -77,17 +78,30 @@ export default {
streaming() {
return !!this.playableBooks.find((b) => this.$store.getters['getIsMediaStreaming'](b.id))
},
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
},
showPlayButton() {
return this.playableBooks.length
}
},
methods: {
clickPlay() {
if (this.playerIsStartingPlayback) return
var nextBookNotRead = this.playableBooks.find((pb) => {
var prog = this.$store.getters['user/getUserMediaProgress'](pb.id)
return !prog || !prog.isFinished
return !prog?.isFinished
})
if (nextBookNotRead) {
this.mediaIdStartingPlayback = nextBookNotRead.id
this.$store.commit('setPlayerIsStartingPlayback', nextBookNotRead.id)
this.$eventBus.$emit('play-item', { libraryItemId: nextBookNotRead.id })
}
}

15
pages/item/_id/_episode/index.vue
View file

@ -29,7 +29,7 @@
<!-- action buttons -->
<div class="flex mt-4 -mx-1">
<ui-btn color="success" class="flex items-center justify-center flex-grow mx-1" :padding-x="4" @click="playClick">
<ui-btn color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
<span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : localEpisodeId ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
</ui-btn>
@ -210,6 +210,15 @@ export default {
playerIsPlaying() {
return this.$store.state.playerIsPlaying && this.isPlaying
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
return this.$store.state.playerIsStartingPlayback
},
playerIsStartingForThisMedia() {
if (!this.serverEpisodeId) return false
const mediaId = this.$store.state.playerStartingPlaybackMediaId
return mediaId === this.serverEpisodeId
},
userItemProgress() {
if (this.isLocal) return this.localItemProgress
return this.serverItemProgress
@ -332,10 +341,14 @@ export default {
}
},
async playClick() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
if (this.playerIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.$store.commit('setPlayerIsStartingPlayback', this.serverEpisodeId)
if (this.localEpisodeId && this.localLibraryItemId && !this.isLocal) {
console.log('Play local episode', this.localEpisodeId, this.localLibraryItemId)

25
pages/item/_id/index.vue
View file

@ -45,7 +45,7 @@
<!-- action buttons -->
<div class="col-span-full">
<div v-if="showPlay || showRead" class="flex mt-4 -mx-1">
<ui-btn v-if="showPlay" color="success" class="flex items-center justify-center flex-grow mx-1" :padding-x="4" @click="playClick">
<ui-btn v-if="showPlay" color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
<span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : isPodcast ? $strings.ButtonNextEpisode : hasLocal ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
</ui-btn>
@ -205,7 +205,8 @@ export default {
coverBgIsLight: false,
windowWidth: 0,
descriptionClamped: false,
showFullDescription: false
showFullDescription: false,
episodeStartingPlayback: null
}
},
computed: {
@ -393,6 +394,19 @@ 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
if (this.isPodcast) {
if (!this.episodeStartingPlayback) return false
return mediaId === this.episodeStartingPlayback
} else {
return mediaId === this.serverLibraryItemId
}
},
tracks() {
return this.media.tracks || []
},
@ -488,6 +502,8 @@ export default {
}
},
async play(startTime = null) {
if (this.playerIsStartingPlayback) return
if (this.isPodcast) {
this.episodes.sort((a, b) => {
return String(b.publishedAt).localeCompare(String(a.publishedAt), undefined, { numeric: true, sensitivity: 'base' })
@ -500,7 +516,7 @@ export default {
} else {
podcastProgress = this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, ep.id)
}
return !podcastProgress || !podcastProgress.isFinished
return !podcastProgress?.isFinished
})
if (!episode) episode = this.episodes[0]
@ -515,6 +531,8 @@ export default {
}
const serverEpisodeId = !this.isLocal ? episodeId : localEpisode?.serverEpisodeId || null
this.episodeStartingPlayback = serverEpisodeId
this.$store.commit('setPlayerIsStartingPlayback', serverEpisodeId)
if (serverEpisodeId && this.serverLibraryItemId && this.isCasting) {
// If casting and connected to server for local library item then send server library item id
this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId, episodeId: serverEpisodeId })
@ -543,6 +561,7 @@ export default {
if (!value) return
}
this.$store.commit('setPlayerIsStartingPlayback', this.serverLibraryItemId)
this.$eventBus.$emit('play-item', { libraryItemId, serverLibraryItemId: this.serverLibraryItemId, startTime })
}
},

3
pages/localMedia/folders/_id.vue
View file

@ -110,9 +110,6 @@ export default {
this.$router.replace('/localMedia/folders')
}
},
play(mediaItem) {
this.$eventBus.$emit('play-item', { libraryItemId: mediaItem.id })
},
async init() {
var folder = await this.$db.getLocalFolder(this.folderId)
this.folder = folder

6
pages/localMedia/item/_id.vue
View file

@ -232,6 +232,10 @@ export default {
}
]
}
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
return this.$store.state.playerIsStartingPlayback
}
},
methods: {
@ -279,7 +283,9 @@ export default {
this.showDialog = true
},
async play() {
if (this.playerIsStartingPlayback) return
await this.$hapticsImpact()
this.$store.commit('setPlayerIsStartingPlayback', this.localLibraryItemId)
this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItemId })
},
getCapImageSrc(contentUrl) {

19
pages/media/_id/history.vue
View file

@ -39,8 +39,7 @@ export default {
},
data() {
return {
onMediaItemHistoryUpdatedListener: null,
startingPlayback: false
onMediaItemHistoryUpdatedListener: null
}
},
computed: {
@ -123,21 +122,21 @@ export default {
})
return groups
},
playerIsStartingPlayback() {
// Play has been pressed and waiting for native play response
return this.$store.state.playerIsStartingPlayback
}
},
methods: {
async clickPlaybackTime(time) {
if (this.startingPlayback) return
this.startingPlayback = true
await this.$hapticsImpact()
console.log('Click playback time', time)
this.playAtTime(time)
if (this.playerIsStartingPlayback) return
setTimeout(() => {
this.startingPlayback = false
}, 1000)
await this.$hapticsImpact()
this.playAtTime(time)
},
playAtTime(startTime) {
this.$store.commit('setPlayerIsStartingPlayback', this.mediaItemEpisodeId || this.mediaItemLibraryItemId)
if (this.mediaItemIsLocal) {
// Local only
this.$eventBus.$emit('play-item', { libraryItemId: this.mediaItemLibraryItemId, episodeId: this.mediaItemEpisodeId, startTime })

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 {

10
store/index.js
View file

@ -7,6 +7,8 @@ export const state = () => ({
currentPlaybackSession: null,
playerIsPlaying: false,
playerIsFullscreen: false,
playerIsStartingPlayback: false, // When pressing play before native play response
playerStartingPlaybackMediaId: null,
isCasting: false,
isCastAvailable: false,
attemptingConnection: false,
@ -131,6 +133,14 @@ export const mutations = {
setPlayerFullscreen(state, val) {
state.playerIsFullscreen = val
},
setPlayerIsStartingPlayback(state, mediaId) {
state.playerStartingPlaybackMediaId = mediaId
state.playerIsStartingPlayback = true
},
setPlayerDoneStartingPlayback(state) {
state.playerStartingPlaybackMediaId = null
state.playerIsStartingPlayback = false
},
setHasStoragePermission(state, val) {
state.hasStoragePermission = val
},