koel/resources/assets/js/components/shared/artist-item.vue
An Phan cf27ed713d First integration with Last.fm
Koel can now integrate and use the rich information from Last.fm. Now
whenever a song is played, its album and artist information will be
queried from Last.fm and cached for later use. What's better, if an
album has no cover, Koel will try to update its cover if one is found on
Last.fm.

In order to use this feature, users only need to provide valid Last.fm
API credentials (namely LASTFM_API_KEY and LASTFM_API_SECRET) in .env. A
npm and gulp rebuild is also required - just like with every update.
2015-12-20 00:36:44 +08:00

39 lines
1.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<article class="item" v-if="artist.songCount">
<span class="cover" :style="{ backgroundImage: 'url('+artist.cover+')' }">
<a class="control" @click.prevent="play">
<i class="fa fa-play"></i>
</a>
</span>
<footer>
<p class="name">{{ artist.name }}</p>
<p class="meta">
{{ artist.albums.length }} album{{ artist.albums.length == 1 ? '' : 's' }}
{{ artist.songCount }} song{{ artist.songCount == 1 ? '' : 's' }}
</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);
},
},
};
</script>
<style lang="sass">
@import "resources/assets/sass/partials/_vars.scss";
@import "resources/assets/sass/partials/_mixins.scss";
</style>