Update:Add play button to collections and playlist table #666

This commit is contained in:
advplyr 2023-05-20 14:22:53 -05:00
parent 0448d20583
commit 928f33005a
3 changed files with 61 additions and 24 deletions

View file

@ -214,6 +214,8 @@ export default {
if (startTime !== undefined && startTime !== null) {
// seek to start time
AbsAudioPlayer.seek({ value: Math.floor(startTime) })
} else if (this.$refs.audioPlayer) {
this.$refs.audioPlayer.play()
}
return
}

View file

@ -1,16 +1,21 @@
<template>
<div class="w-full px-2 py-2 overflow-hidden relative">
<nuxt-link v-if="book" :to="`/item/${book.id}`" class="flex w-full">
<nuxt-link v-if="book" :to="`/item/${book.id}`" class="flex items-center w-full">
<div class="h-full relative" :style="{ width: bookWidth + 'px' }">
<covers-book-cover :library-item="book" :width="bookWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
<div class="flex-grow book-table-content h-full px-2 flex items-center">
<div class="book-table-content h-full px-2 flex items-center">
<div class="max-w-full">
<p class="truncate block text-sm">{{ bookTitle }}</p>
<p class="truncate block text-gray-400 text-xs">{{ bookAuthor }}</p>
<p class="text-xxs text-gray-500">{{ bookDuration }}</p>
</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>
</div>
</nuxt-link>
</div>
</template>
@ -31,6 +36,9 @@ export default {
}
},
computed: {
libraryItemId() {
return this.book.id
},
media() {
return this.book.media || {}
},
@ -59,22 +67,29 @@ export default {
isMissing() {
return this.book.isMissing
},
isIncomplete() {
return this.book.isIncomplete
},
numTracks() {
return this.book.numTracks
},
isStreaming() {
return this.$store.getters['getIsItemStreaming'](this.book.id)
isInvalid() {
return this.book.isInvalid
},
showPlayBtn() {
return !this.isMissing && !this.isIncomplete && !this.isStreaming && this.numTracks
return !this.isMissing && !this.isInvalid && this.tracks.length
},
isStreaming() {
return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId)
},
streamIsPlaying() {
return this.$store.state.playerIsPlaying && this.isStreaming
}
},
methods: {
clickEdit() {
this.$emit('edit', this.book)
async playClick() {
await this.$hapticsImpact()
if (this.streamIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.$eventBus.$emit('play-item', {
libraryItemId: this.libraryItemId
})
}
}
},
mounted() {}
@ -83,7 +98,7 @@ export default {
<style>
.book-table-content {
width: calc(100% - 50px);
max-width: calc(100% - 50px);
width: calc(100% - 82px);
max-width: calc(100% - 82px);
}
</style>

View file

@ -1,16 +1,21 @@
<template>
<div class="w-full px-2 py-2 overflow-hidden relative">
<nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex w-full">
<nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex items-center w-full">
<div class="h-full relative" :style="{ width: '50px' }">
<covers-book-cover :library-item="libraryItem" :width="50" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
<div class="flex-grow item-table-content h-full px-2 flex items-center">
<div class="item-table-content h-full px-2 flex items-center">
<div class="max-w-full">
<p class="truncate block text-sm">{{ itemTitle }}</p>
<p class="truncate block text-gray-400 text-xs">{{ bookAuthorName }}</p>
<p class="text-xxs text-gray-500">{{ itemDuration }}</p>
</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>
</div>
</nuxt-link>
</div>
</template>
@ -83,21 +88,36 @@ export default {
isInvalid() {
return this.libraryItem.isInvalid
},
isStreaming() {
return this.$store.getters['getIsItemStreaming'](this.item.id)
},
showPlayBtn() {
return !this.isMissing && !this.isInvalid && !this.isStreaming && (this.tracks.length || this.episode)
return !this.isMissing && !this.isInvalid && (this.tracks.length || this.episode)
},
isStreaming() {
return this.$store.getters['getIsEpisodeStreaming'](this.libraryItem.id, this.episodeId)
},
streamIsPlaying() {
return this.$store.state.playerIsPlaying && this.isStreaming
}
},
methods: {
async playClick() {
await this.$hapticsImpact()
if (this.streamIsPlaying) {
this.$eventBus.$emit('pause-item')
} else {
this.$eventBus.$emit('play-item', {
libraryItemId: this.libraryItem.id,
episodeId: this.episodeId
})
}
}
},
methods: {},
mounted() {}
}
</script>
<style>
.item-table-content {
width: calc(100% - 50px);
max-width: calc(100% - 50px);
width: calc(100% - 82px);
max-width: calc(100% - 82px);
}
</style>