mirror of
https://github.com/koel/koel
synced 2025-01-06 17:58:46 +00:00
79 lines
2 KiB
Vue
79 lines
2 KiB
Vue
<template>
|
|
<article id="albumInfo" :class="mode">
|
|
<h1 class="name">
|
|
<span>{{ album.name }}</span>
|
|
|
|
<a class="shuffle" @click.prevent="shuffleAll"><i class="fa fa-random"></i></a>
|
|
</h1>
|
|
|
|
<div v-if="album.info">
|
|
<img v-if="album.info.image" :src="album.info.image"
|
|
title=""
|
|
class="cover">
|
|
|
|
<div class="wiki" v-if="album.info.wiki && album.info.wiki.summary">
|
|
<div class="summary" v-show="mode !== 'full' && !showingFullWiki" v-html="album.info.wiki.summary"></div>
|
|
<div class="full" v-show="mode === 'full' || showingFullWiki" v-html="album.info.wiki.full"></div>
|
|
|
|
<button class="more" v-show="mode !== 'full' && !showingFullWiki"
|
|
@click.prevent="showingFullWiki = !showingFullWiki">
|
|
Full Wiki
|
|
</button>
|
|
</div>
|
|
|
|
<section class="track-listing" v-if="album.info.tracks.length">
|
|
<h1>Track Listing</h1>
|
|
<ul class="tracks">
|
|
<li v-for="(track, idx) in album.info.tracks">
|
|
<span class="no">{{ idx + 1 }}</span>
|
|
<span class="title">{{ track.title }}</span>
|
|
<span class="length">{{ track.fmtLength }}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<footer>Data © <a target="_blank" :href="album.info.url">Last.fm</a></footer>
|
|
</div>
|
|
|
|
<p class="none" v-else>No album information found.</p>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import { playback } from '../../../services';
|
|
|
|
export default {
|
|
props: ['album', 'mode'],
|
|
|
|
data() {
|
|
return {
|
|
showingFullWiki: false,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Reset the component's current state.
|
|
*/
|
|
resetState() {
|
|
this.showingFullWiki = false;
|
|
},
|
|
|
|
/**
|
|
* Shuffle all songs in the current album.
|
|
*/
|
|
shuffleAll() {
|
|
playback.playAllInAlbum(this.album);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
@import "../../../../sass/partials/_vars.scss";
|
|
@import "../../../../sass/partials/_mixins.scss";
|
|
|
|
#albumInfo {
|
|
@include artist-album-info();
|
|
}
|
|
</style>
|