mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-05 11:34:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Add more menu on playlist item row to show library item more menu #914

Browse source
This commit is contained in:
advplyr 2023-11-03 15:53:38 -05:00
parent 74b488ad0f
commit e9251db647
5 changed files with 535 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<div class="w-full px-1.5 pb-1.5">
<div class="w-full h-full p-2 rounded-lg relative bg-bg overflow-hidden">
<nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex items-center w-full">
<nuxt-link v-if="libraryItem" :to="itemUrl" 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>
@ -17,8 +17,13 @@
<span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
</button>
</div>
<div class="w-8 min-w-8 flex justify-center">
<button class="w-8 h-8 rounded-full flex items-center justify-center" @click.stop.prevent="showMore">
<span class="material-icons">more_vert</span>
</button>
</div>
</nuxt-link>
<div v-if="!isPodcast" class="absolute bottom-0 left-0 h-0.5 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: progressPercent * 100 + '%' }"></div>
<div class="absolute bottom-0 left-0 h-0.5 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: progressPercent * 100 + '%' }"></div>
</div>
</div>
</template>
@ -36,6 +41,10 @@ export default {
return {}
},
computed: {
itemUrl() {
if (this.episodeId) return `/item/${this.libraryItem.id}/${this.episodeId}`
return `/item/${this.libraryItem.id}`
},
libraryItem() {
return this.item.libraryItem || {}
},
@ -57,6 +66,12 @@ export default {
mediaMetadata() {
return this.media.metadata || {}
},
mediaType() {
return this.libraryItem.mediaType
},
isPodcast() {
return this.mediaType === 'podcast'
},
tracks() {
if (this.episode) return []
return this.media.tracks || []
@ -109,10 +124,23 @@ export default {
return !!this.userItemProgress?.isFinished
},
progressPercent() {
return this.userItemProgress ? Math.max(Math.min(1, this.userItemProgress.progress), 0) : 0
return Math.max(Math.min(1, this.userItemProgress?.progress || 0), 0)
}
},
methods: {
showMore() {
const playlistItem = {
libraryItem: this.libraryItem,
episode: this.episode
}
if (this.localLibraryItem) {
playlistItem.libraryItem.localLibraryItem = this.localLibraryItem
}
if (this.localEpisode && playlistItem.episode) {
playlistItem.episode.localEpisode = this.localEpisode
}
this.$emit('showMore', playlistItem)
},
async playClick() {
await this.$hapticsImpact()
if (this.streamIsPlaying) {
@ -138,7 +166,7 @@ export default {
<style>
.item-table-content {
width: calc(100% - 82px);
max-width: calc(100% - 82px);
width: calc(100% - 114px);
max-width: calc(100% - 114px);
}
</style>