68 lines
1.8 KiB
Plaintext
68 lines
1.8 KiB
Plaintext
<release-details>
|
|
<div class="details">
|
|
<h2>{state.release.title}</h2>
|
|
<p if="{state.release.type !== 'artist'}">-{state.release.year}</p>
|
|
|
|
<div class="release-content">
|
|
<img src="{state.release.thumb}" alt="{state.release.title}" />
|
|
<div if="{state.release.type !== 'artist'}">
|
|
<b>Track list</b>
|
|
<ul>
|
|
<li each="{track in state.release.tracklist}">
|
|
{track.position} - {track.title} - {track.duration}
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="genres">
|
|
<span each="{genre in state.release.genres}">{genre}</span>
|
|
</div>
|
|
</div>
|
|
<div if="{state.release.type === 'artist'}">
|
|
{state.release.profile}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["releaseid"],
|
|
|
|
state: {
|
|
release: [],
|
|
},
|
|
|
|
async onMounted() {
|
|
const id = this.props.releaseid
|
|
this.state.release = await window.getReleaseDetails(id)
|
|
console.log("resultat", this.state.release)
|
|
|
|
this.update()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.release-content {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.genres span {
|
|
display: inline-block;
|
|
background: #333;
|
|
color: #fff;
|
|
padding: 3px 7px;
|
|
border-radius: 3px;
|
|
margin-right: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
</style>
|
|
</release-details> |