koel/resources/assets/js/components/shared/artist-item.vue
2016-03-28 21:38:14 +08:00

69 lines
2.3 KiB
Vue

<template>
<article class="item" v-if="artist.songCount" draggable="true" @dragstart="dragStart">
<span class="cover" :style="{ backgroundImage: 'url(' + artist.image + ')' }">
<a class="control" @click.prevent="play">
<i class="fa fa-play"></i>
</a>
</span>
<footer>
<a class="name" @click.prevent="viewDetails">{{ artist.name }}</a>
<p class="meta">
{{ artist.albums.length }} {{ artist.albums.length | pluralize 'album' }}
{{ artist.songCount }} {{ artist.songCount | pluralize 'song' }}
{{ artist.playCount }} {{ artist.playCount | pluralize 'play' }}
</p>
</footer>
</article>
</template>
<script>
import _ from 'lodash';
import $ from 'jquery';
import playback from '../../services/playback';
import artistStore from '../../stores/artist';
import queueStore from '../../stores/queue';
export default {
props: ['artist'],
methods: {
/**
* Play all songs by the current artist, or queue them up if Ctrl/Cmd key is pressed.
*/
play(e) {
if (e.metaKey || e.ctrlKey) {
queueStore.queue(artistStore.getSongsByArtist(this.artist));
} else {
playback.playAllByArtist(this.artist);
}
},
viewDetails() {
this.$root.loadArtist(this.artist);
},
/**
* Allow dragging the artist (actually, their songs).
*/
dragStart(e) {
const songIds = _.pluck(artistStore.getSongsByArtist(this.artist), 'id');
e.dataTransfer.setData('text/plain', songIds);
e.dataTransfer.effectAllowed = 'move';
// Set a fancy drop image using our ghost element.
const $ghost = $('#dragGhost').text(`All ${songIds.length} song${songIds.length === 1 ? '' : 's'} by ${this.artist.name}`);
e.dataTransfer.setDragImage($ghost[0], 0, 0);
},
},
};
</script>
<style lang="sass">
@import "../../../sass/partials/_vars.scss";
@import "../../../sass/partials/_mixins.scss";
@include artist-album-card();
</style>