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

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
pages/collection/_id.vue
+16 -2
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 })
}
}
pages/item/_id/_episode/index.vue
+14 -1
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)
pages/item/_id/index.vue
+22 -3
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 })
}
},
pages/localMedia/folders/_id.vue
-3
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
pages/localMedia/item/_id.vue
+6
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) {
pages/media/_id/history.vue
+9 -10
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 })
pages/playlist/_id.vue
+14 -2
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 {