mirror of
https://github.com/owntone/owntone-server.git
synced 2025-01-07 13:03:23 -05:00
45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<template>
|
|
<div class="media" v-if="is_next || !show_only_next_items">
|
|
<div class="media-left" v-if="edit_mode">
|
|
<span class="icon has-text-grey fd-is-movable handle"><i class="mdi mdi-drag-horizontal mdi-18px"></i></span>
|
|
</div>
|
|
|
|
<div class="media-content fd-has-action is-clipped" v-on:click="play">
|
|
<h1 class="title is-6" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next }">{{ item.title }}</h1>
|
|
<h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }"><b>{{ item.artist }}</b></h2>
|
|
<h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }">{{ item.album }}</h2>
|
|
</div>
|
|
<div class="media-right">
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import webapi from '@/webapi'
|
|
|
|
export default {
|
|
name: 'ListItemQueueItem',
|
|
props: ['item', 'position', 'current_position', 'show_only_next_items', 'edit_mode'],
|
|
|
|
computed: {
|
|
state () {
|
|
return this.$store.state.player
|
|
},
|
|
|
|
is_next () {
|
|
return this.current_position < 0 || this.position >= this.current_position
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
play: function () {
|
|
webapi.player_play({ item_id: this.item.id })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|