mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-07-09 21:44:41 +02:00
45 lines
No EOL
1.3 KiB
Vue
45 lines
No EOL
1.3 KiB
Vue
<template>
|
|
<div :key="playlist.id" :id="`playlist-row-${playlist.id}`" class="flex items-center px-3 py-2 justify-start relative border-y border-white/5" :class="inPlaylist ? 'bg-primary/20' : ''">
|
|
<div v-if="inPlaylist" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
|
|
<div class="w-14 min-w-[56px] text-center" @click.stop="clickCover">
|
|
<covers-playlist-cover :items="items" :width="52" :height="52" />
|
|
</div>
|
|
<div class="flex-grow overflow-hidden">
|
|
<p class="px-2 truncate text-sm">{{ playlist.name }}</p>
|
|
</div>
|
|
<div class="w-24 min-w-[96px] px-1">
|
|
<ui-btn v-if="inPlaylist" small class="w-full" @click.stop="click">{{ $strings.ButtonRemove }}</ui-btn>
|
|
<ui-btn v-else small class="w-full" @click.stop="click">{{ $strings.ButtonAdd }}</ui-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
playlist: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
inPlaylist: Boolean
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {
|
|
items() {
|
|
return this.playlist.items || []
|
|
}
|
|
},
|
|
methods: {
|
|
click() {
|
|
this.$emit('click', this.playlist)
|
|
},
|
|
clickCover() {
|
|
this.$emit('close')
|
|
this.$router.push(`/playlist/${this.playlist.id}`)
|
|
}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script> |