Commit 2965964c authored by Agate's avatar Agate 💬

Added cover handling on artist and album view

parent 9be0f341
<template>
<div>
<div :class="['ui', 'centered', {'active': isLoading}, 'inline', 'loader']"></div>
<div v-if="isLoading" class="ui vertical segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<template v-if="album">
<div class="ui vertical center aligned stripe segment">
<h2 class="ui center aligned icon header">
<i class="circular inverted sound yellow icon"></i>
{{ album.title }}
</h2>
<p>
Album containing {{ album.tracks.length }} tracks,
by <router-link :to="{name: 'browse.artist', params: {id: album.artist.id }}">
{{ album.artist.name }}
</router-link>
<div :class="['ui', 'head', {'with-background': album.cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<div class="segment-content">
<h2 class="ui center aligned icon header">
<i class="circular inverted sound yellow icon"></i>
<div class="content">
{{ album.title }}
<div class="sub header">
Album containing {{ album.tracks.length }} tracks,
by <router-link :to="{name: 'browse.artist', params: {id: album.artist.id }}">
{{ album.artist.name }}
</router-link>
</p>
<div class="ui hidden divider"></div>
</button>
<play-button :tracks="album.tracks">Play all</play-button>
</div>
</div>
</h2>
<div class="ui hidden divider"></div>
</button>
<play-button :tracks="album.tracks">Play all</play-button>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<i class="external icon"></i>
View on MusicBrainz
</a>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<i class="external icon"></i>
View on MusicBrainz
</a>
</div>
</div>
<div class="ui vertical stripe segment">
<h2>Tracks</h2>
......@@ -78,11 +84,18 @@ export default {
},
musicbrainzUrl () {
return 'https://musicbrainz.org/release/' + this.album.mbid
},
headerStyle () {
if (!this.album.cover) {
return ''
}
return 'background-image: url(' + backend.absoluteUrl(this.album.cover) + ')'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
<style scoped lang="scss">
</style>
<template>
<div>
<div :class="['ui', 'centered', {'active': isLoading}, 'inline', 'loader']"></div>
<div v-if="isLoading" class="ui vertical segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<template v-if="artist">
<div class="ui vertical center aligned stripe segment">
<h2 class="ui center aligned icon header">
<i class="circular inverted users violet icon"></i>
{{ artist.name }}
</h2>
<p><i class="ui sound icon"></i> {{ totalTracks }} tracks in {{ albums.length }} albums</p>
<div class="ui hidden divider"></div>
<radio-button type="artist" :object-id="artist.id"></radio-button>
</button>
<play-button :tracks="allTracks">Play all albums</play-button>
<div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<div class="segment-content">
<h2 class="ui center aligned icon header">
<i class="circular inverted users violet icon"></i>
<div class="content">
{{ artist.name }}
<div class="sub header">{{ totalTracks }} tracks in {{ albums.length }} albums</div>
</div>
</h2>
<div class="ui hidden divider"></div>
<radio-button type="artist" :object-id="artist.id"></radio-button>
</button>
<play-button :tracks="allTracks">Play all albums</play-button>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<i class="external icon"></i>
View on MusicBrainz
</a>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<i class="external icon"></i>
View on MusicBrainz
</a>
</div>
</div>
<div class="ui vertical stripe segment">
<h2>Albums by this artist</h2>
......@@ -99,6 +105,19 @@ export default {
})
})
return tracks
},
cover () {
return this.artist.albums.filter(album => {
return album.cover
}).map(album => {
return album.cover
})[0]
},
headerStyle () {
if (!this.cover) {
return ''
}
return 'background-image: url(' + backend.absoluteUrl(this.cover) + ')'
}
}
}
......
<template>
<div class="main pusher">
<div class="main browse pusher">
<div class="ui secondary pointing menu">
<router-link class="ui item" to="/browse">Browse</router-link>
</div>
<router-view>
Y'a quelqu'un ?
</router-view>
<router-view></router-view>
</div>
</template>
......@@ -17,8 +15,34 @@ export default {
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pusher > .ui.secondary.menu {
<style lang="scss">
.browse.pusher > .ui.secondary.menu {
margin: 0 2.5rem;
}
.browse {
.ui.segment.head {
background-size: cover;
background-position: center;
padding: 0;
.segment-content {
margin: 0 auto;
padding: 4em;
}
&.with-background {
.header {
&, .sub, a {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
color: white !important;
}
}
.segment-content {
background-color: rgba(0, 0, 0, 0.5)
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment