mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-28 05:53:59 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update:Play buttons on item pages show Play/Pause instead of disabled and showing Playing/Streaming #697

Browse source
This commit is contained in:
advplyr 2023-05-20 14:49:55 -05:00
parent 928f33005a
commit fafaad8b5f
2 changed files with 22 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,9 +33,9 @@
<!-- action buttons --> <!-- action buttons -->
<div class="flex mt-4 -mx-1"> <div class="flex mt-4 -mx-1">
<ui-btn color="success" :disabled="isPlaying" 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" :padding-x="4" @click="playClick">
<span v-show="!isPlaying" class="material-icons">play_arrow</span> <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ isPlaying ? (playerIsLocal ? 'Playing' : 'Streaming') : localEpisodeId ? 'Play' : 'Stream' }}</span> <span class="px-1 text-sm">{{ playerIsPlaying ? 'Pause' : localEpisodeId ? 'Play' : 'Stream' }}</span>
</ui-btn> </ui-btn>
<ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick"> <ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
<span class="material-icons" :class="downloadItem ? 'animate-pulse' : ''">{{ downloadItem ? 'downloading' : 'download' }}</span> <span class="material-icons" :class="downloadItem ? 'animate-pulse' : ''">{{ downloadItem ? 'downloading' : 'download' }}</span>

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

@ -33,28 +33,15 @@
<!-- action buttons --> <!-- action buttons -->
<div class="col-span-full"> <div class="col-span-full">
<div v-if="isLocal" class="flex mt-4 -mx-1"> <div v-if="showPlay || showRead" class="flex mt-4 -mx-1">
<ui-btn v-if="showPlay" color="success" :disabled="isPlaying" 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" :padding-x="4" @click="playClick">
<span v-show="!isPlaying" class="material-icons">play_arrow</span> <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ isPlaying ? 'Playing' : 'Play' }}</span> <span class="px-1 text-sm">{{ playerIsPlaying ? 'Pause' : isPodcast ? 'Next Episode' : hasLocal ? 'Play' : 'Stream' }}</span>
</ui-btn> </ui-btn>
<ui-btn v-if="showRead" color="info" class="flex items-center justify-center mx-1" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook"> <ui-btn v-if="showRead" color="info" class="flex items-center justify-center mx-1" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
<span class="material-icons">auto_stories</span> <span class="material-icons">auto_stories</span>
<span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span> <span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
</ui-btn> </ui-btn>
<ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="moreButtonPress">
<span class="material-icons">more_vert</span>
</ui-btn>
</div>
<div v-else-if="(user && (showPlay || showRead)) || hasLocal" class="flex mt-4 -mx-1">
<ui-btn v-if="showPlay" color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mx-1" :padding-x="4" @click="playClick">
<span v-show="!isPlaying" class="material-icons">play_arrow</span>
<span class="px-1 text-sm">{{ isPlaying ? (isStreaming ? 'Streaming' : 'Playing') : isPodcast ? 'Next Episode' : hasLocal ? 'Play' : 'Stream' }}</span>
</ui-btn>
<ui-btn v-if="showRead && user" color="info" class="flex items-center justify-center mx-1" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
<span class="material-icons">auto_stories</span>
<span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
</ui-btn>
<ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick"> <ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
<span class="material-icons" :class="downloadItem ? 'animate-pulse' : ''">{{ downloadItem ? 'downloading' : 'download' }}</span> <span class="material-icons" :class="downloadItem ? 'animate-pulse' : ''">{{ downloadItem ? 'downloading' : 'download' }}</span>
</ui-btn> </ui-btn>
@ -335,6 +322,9 @@ export default {
if (this.localLibraryItemId && this.$store.getters['getIsItemStreaming'](this.localLibraryItemId)) return true if (this.localLibraryItemId && this.$store.getters['getIsItemStreaming'](this.localLibraryItemId)) return true
return this.$store.getters['getIsItemStreaming'](this.libraryItemId) return this.$store.getters['getIsItemStreaming'](this.libraryItemId)
}, },
playerIsPlaying() {
return this.$store.state.playerIsPlaying && (this.isStreaming || this.isPlaying)
},
tracks() { tracks() {
return this.media.tracks || [] return this.media.tracks || []
}, },
@ -348,18 +338,18 @@ export default {
isMissing() { isMissing() {
return this.libraryItem.isMissing return this.libraryItem.isMissing
}, },
isIncomplete() { isInvalid() {
return this.libraryItem.isIncomplete return this.libraryItem.isInvalid
}, },
showPlay() { showPlay() {
return !this.isMissing && !this.isIncomplete && (this.numTracks || this.episodes.length) return !this.isMissing && !this.isInvalid && (this.numTracks || this.episodes.length)
}, },
showRead() { showRead() {
return this.ebookFile return this.ebookFile
}, },
showDownload() { showDownload() {
if (this.isPodcast) return false if (this.isPodcast || this.hasLocal) return false
return this.user && this.userCanDownload && this.showPlay && !this.hasLocal return this.user && this.userCanDownload && this.showPlay
}, },
ebookFile() { ebookFile() {
return this.media.ebookFile return this.media.ebookFile
@ -488,12 +478,15 @@ export default {
playAtTimestamp(seconds) { playAtTimestamp(seconds) {
this.play(seconds) this.play(seconds)
}, },
playClick() { async playClick() {
this.play() await this.$hapticsImpact()
if (this.playerIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.play()
}
}, },
async play(startTime = null) { async play(startTime = null) {
await this.$hapticsImpact()
if (this.isPodcast) { if (this.isPodcast) {
this.episodes.sort((a, b) => { this.episodes.sort((a, b) => {
return String(b.publishedAt).localeCompare(String(a.publishedAt), undefined, { numeric: true, sensitivity: 'base' }) return String(b.publishedAt).localeCompare(String(a.publishedAt), undefined, { numeric: true, sensitivity: 'base' })