koel/resources/assets/js/components/shared/album-item.vue

90 lines
2.7 KiB
Vue
Raw Normal View History

2015-12-13 04:42:28 +00:00
<template>
<article class="item" v-if="album.songs.length" draggable="true" @dragstart="dragStart">
2015-12-13 04:42:28 +00:00
<span class="cover" :style="{ backgroundImage: 'url(' + album.cover + ')' }">
<a class="control" @click.prevent="play">
<i class="fa fa-play"></i>
</a>
</span>
<footer>
2016-01-15 07:27:25 +00:00
<a class="name" @click.prevent="viewDetails">{{ album.name }}</a>
<span class="sep">by</span>
2016-01-15 07:27:25 +00:00
<a class="artist" @click.prevent="viewArtistDetails">{{ album.artist.name }}</a>
2015-12-13 04:42:28 +00:00
<p class="meta">
2016-01-15 10:05:54 +00:00
{{ album.songs.length }} {{ album.songs.length | pluralize 'song' }}
2016-01-15 07:27:25 +00:00
2015-12-13 04:42:28 +00:00
{{ album.fmtLength }}
{{ album.playCount }} {{ album.playCount | pluralize 'play' }}
2015-12-13 04:42:28 +00:00
</p>
</footer>
</article>
</template>
<script>
import _ from 'lodash';
import $ from 'jquery';
2015-12-13 04:42:28 +00:00
import playback from '../../services/playback';
import queueStore from '../../stores/queue';
2015-12-13 04:42:28 +00:00
export default {
props: ['album'],
methods: {
/**
* Play all songs in the current album, or queue them up if Ctrl/Cmd key is pressed.
2015-12-13 04:42:28 +00:00
*/
play(e) {
if (e.metaKey || e.ctrlKey) {
queueStore.queue(this.album.songs);
} else {
playback.playAllInAlbum(this.album);
}
2015-12-13 04:42:28 +00:00
},
2016-01-15 07:27:25 +00:00
/**
* Load the album details screen.
*/
viewDetails() {
this.$root.loadAlbum(this.album);
},
/**
* Load the artist details screen.
*/
viewArtistDetails() {
this.$root.loadArtist(this.album.artist);
},
/**
* Allow dragging the album (actually, its songs).
*/
dragStart(e) {
2016-03-28 13:38:14 +00:00
const songIds = _.pluck(this.album.songs, 'id');
e.dataTransfer.setData('text/plain', songIds);
e.dataTransfer.effectAllowed = 'move';
// Set a fancy drop image using our ghost element.
2016-03-28 13:38:14 +00:00
const $ghost = $('#dragGhost').text(`All ${songIds.length} song${songIds.length === 1 ? '' : 's'} in ${this.album.name}`);
e.dataTransfer.setDragImage($ghost[0], 0, 0);
},
2015-12-13 04:42:28 +00:00
},
};
</script>
<style lang="sass">
2016-03-13 17:00:32 +00:00
@import "../../../sass/partials/_vars.scss";
@import "../../../sass/partials/_mixins.scss";
2016-01-15 07:27:25 +00:00
@include artist-album-card();
.sep {
display: none;
color: $color2ndText;
.as-list & {
display: inline;
}
}
2015-12-13 04:42:28 +00:00
</style>