62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<template>
|
|
<div class="playlist">
|
|
<slot name="header"></slot>
|
|
<ul :class="listClass">
|
|
<li v-for="(item,index) in items" :class="itemClass" @click="!hasAction('play') && select(index)"
|
|
:key="index">
|
|
<a :class="player.isPlaying(item) ? 'is-active' : ''">
|
|
<ASoundItem
|
|
:data="item" :index="index" :set="set" :player="player_"
|
|
@togglePlay="togglePlay(index)"
|
|
:actions="actions">
|
|
<template v-slot:extra-right="{}">
|
|
<button class="button" v-if="editable" @click.stop="remove(index,true)">
|
|
<span class="icon is-small"><span class="fa fa-close"></span></span>
|
|
</button>
|
|
</template>
|
|
</ASoundItem>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import AList from './AList';
|
|
import ASoundItem from './ASoundItem';
|
|
|
|
export default {
|
|
extends: AList,
|
|
emits: [...AList.emits, 'remove'],
|
|
components: { ASoundItem },
|
|
|
|
props: {
|
|
actions: Array,
|
|
name: String,
|
|
player: Object,
|
|
editable: Boolean,
|
|
},
|
|
|
|
computed: {
|
|
self() { return this; },
|
|
player_() { return this.player || window.aircox.player },
|
|
},
|
|
|
|
methods: {
|
|
hasAction(action) { return this.actions && this.actions.indexOf(action) != -1; },
|
|
|
|
selectNext() {
|
|
let index = this.selectedIndex + 1;
|
|
return this.select(index >= this.items.length ? -1 : index);
|
|
},
|
|
|
|
togglePlay(index) {
|
|
if(this.player_.isPlaying(this.set.get(index)))
|
|
this.player_.pause();
|
|
else
|
|
this.select(index)
|
|
},
|
|
},
|
|
}
|
|
</script>
|