mirror of
https://github.com/koel/koel
synced 2024-12-22 18:43:21 +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.
58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<template>
|
|
<article class="item" v-if="album.songs.length">
|
|
<span class="cover" :style="{ backgroundImage: 'url(' + album.cover + ')' }">
|
|
<a class="control" @click.prevent="play">
|
|
<i class="fa fa-play"></i>
|
|
</a>
|
|
</span>
|
|
<footer>
|
|
<a class="name" @click.prevent="viewDetails">{{ album.name }}</a>
|
|
<a class="artist" @click.prevent="viewArtistDetails">{{ album.artist.name }}</a>
|
|
<p class="meta">
|
|
{{ album.songs.length }} {{ album.songs.length | pluralize 'song' }}
|
|
•
|
|
{{ album.fmtLength }}
|
|
•
|
|
{{ album.playCount }} {{ album.playCount | pluralize 'play' }}
|
|
</p>
|
|
</footer>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import playback from '../../services/playback';
|
|
|
|
export default {
|
|
props: ['album'],
|
|
|
|
methods: {
|
|
/**
|
|
* Play all songs in the current album.
|
|
*/
|
|
play() {
|
|
playback.playAllInAlbum(this.album);
|
|
},
|
|
|
|
/**
|
|
* Load the album details screen.
|
|
*/
|
|
viewDetails() {
|
|
this.$root.loadAlbum(this.album);
|
|
},
|
|
|
|
/**
|
|
* Load the artist details screen.
|
|
*/
|
|
viewArtistDetails() {
|
|
this.$root.loadArtist(this.album.artist);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
@import "resources/assets/sass/partials/_vars.scss";
|
|
@import "resources/assets/sass/partials/_mixins.scss";
|
|
|
|
@include artist-album-card();
|
|
</style>
|