64 lines
2.5 KiB
Vue
64 lines
2.5 KiB
Vue
<template>
|
|
<div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']">
|
|
<slot name="title" :player="player" :item="item" :loaded="loaded">
|
|
<span :class="['label is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
|
|
{{ name || item.name }}
|
|
</span>
|
|
</slot>
|
|
<slot name="after-title" :player="player" :item="item" :loaded="loaded">
|
|
</slot>
|
|
<div class="button-group actions">
|
|
<a class="button action" v-if="hasAction('page')"
|
|
:href="item.data.page_url">
|
|
<span class="icon is-small">
|
|
<i class="fa fa-external-link"></i>
|
|
</span>
|
|
</a>
|
|
<a class="button action"
|
|
v-if="hasAction('download') && item.data.is_downloadable"
|
|
:href="item.data.url" target="_blank">
|
|
<span class="icon is-small">
|
|
<span class="fa fa-download"></span>
|
|
</span>
|
|
</a>
|
|
<button :class="['button action', pinned ? 'selected' : 'not-selected']"
|
|
v-if="hasAction('pin') && player && player.sets.pin != $parent.set" @click.stop="player.togglePlaylist('pin', item)">
|
|
<span class="icon is-small">
|
|
<span class="fa fa-star"></span>
|
|
</span>
|
|
</button>
|
|
<slot name="actions" :player="player" :item="item" :loaded="loaded"></slot>
|
|
</div>
|
|
<slot name="extra-right" :player="player" :item="item" :loaded="loaded"></slot>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Model from '../model';
|
|
import Sound from '../sound';
|
|
|
|
export default {
|
|
props: {
|
|
data: {type: Object, default: () => {}},
|
|
name: String,
|
|
player: Object,
|
|
page_url: String,
|
|
actions: {type:Array, default: () => []},
|
|
index: {type:Number, default: null},
|
|
},
|
|
|
|
computed: {
|
|
item() { return this.data instanceof Model ? this.data : new Sound(this.data || {}); },
|
|
loaded() { return this.player && this.player.isLoaded(this.item) },
|
|
playing() { return this.player && this.player.isPlaying(this.item) },
|
|
paused() { return this.player && this.player.paused && this.loaded },
|
|
pinned() { return this.player && this.player.sets.pin.find(this.item) },
|
|
},
|
|
|
|
methods: {
|
|
hasAction(action) {
|
|
return this.actions && this.actions.indexOf(action) != -1;
|
|
},
|
|
}
|
|
}
|
|
</script>
|