mirror of
https://github.com/koel/koel
synced 2024-12-22 10:33:16 +00:00
3ca0009f73
A home/dashboard view has been added, which contains most recently-played songs (in the current session), top songs, albums, and artists. Song playback has also been revised with proper Vue's reactivity, resulting in a much better and cleaner code base.
48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<template>
|
|
<article class="item" v-if="artist.songCount">
|
|
<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 playback from '../../services/playback';
|
|
import artistStore from '../../stores/artist';
|
|
|
|
export default {
|
|
props: ['artist'],
|
|
|
|
methods: {
|
|
/**
|
|
* Play all songs by the current artist.
|
|
*/
|
|
play() {
|
|
playback.playAllByArtist(this.artist);
|
|
},
|
|
|
|
viewDetails() {
|
|
this.$root.loadArtist(this.artist);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
@import "resources/assets/sass/partials/_vars.scss";
|
|
@import "resources/assets/sass/partials/_mixins.scss";
|
|
|
|
@include artist-album-card();
|
|
</style>
|