134 lines
3.6 KiB
Vue
134 lines
3.6 KiB
Vue
<template>
|
|
<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', '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 class="orange" :tracks="allTracks">Play all albums</play-button>
|
|
|
|
<a :href="wikipediaUrl" target="_blank" class="ui button">
|
|
<i class="wikipedia icon"></i>
|
|
Search on wikipedia
|
|
</a>
|
|
<a :href="musicbrainzUrl" target="_blank" class="ui button">
|
|
<i class="external icon"></i>
|
|
View on MusicBrainz
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui vertical stripe segment">
|
|
<h2>Albums by this artist</h2>
|
|
<div class="ui stackable three column grid">
|
|
<div class="column" :key="album.id" v-for="album in albums">
|
|
<album-card :mode="'rich'" class="fluid" :album="album"></album-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import logger from '@/logging'
|
|
import backend from '@/audio/backend'
|
|
import AlbumCard from '@/components/audio/album/Card'
|
|
import RadioButton from '@/components/radios/Button'
|
|
import PlayButton from '@/components/audio/PlayButton'
|
|
import config from '@/config'
|
|
|
|
const FETCH_URL = config.API_URL + 'artists/'
|
|
|
|
export default {
|
|
props: ['id'],
|
|
components: {
|
|
AlbumCard,
|
|
RadioButton,
|
|
PlayButton
|
|
},
|
|
data () {
|
|
return {
|
|
isLoading: true,
|
|
artist: null,
|
|
albums: null
|
|
}
|
|
},
|
|
created () {
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
fetchData () {
|
|
var self = this
|
|
this.isLoading = true
|
|
let url = FETCH_URL + this.id + '/'
|
|
logger.default.debug('Fetching artist "' + this.id + '"')
|
|
this.$http.get(url).then((response) => {
|
|
self.artist = response.data
|
|
self.albums = JSON.parse(JSON.stringify(self.artist.albums)).map((album) => {
|
|
return backend.Album.clean(album)
|
|
})
|
|
self.isLoading = false
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
totalTracks () {
|
|
return this.albums.map((album) => {
|
|
return album.tracks.length
|
|
}).reduce((a, b) => {
|
|
return a + b
|
|
})
|
|
},
|
|
wikipediaUrl () {
|
|
return 'https://en.wikipedia.org/w/index.php?search=' + this.artist.name
|
|
},
|
|
musicbrainzUrl () {
|
|
return 'https://musicbrainz.org/artist/' + this.artist.mbid
|
|
},
|
|
allTracks () {
|
|
let tracks = []
|
|
this.albums.forEach(album => {
|
|
album.tracks.forEach(track => {
|
|
tracks.push(track)
|
|
})
|
|
})
|
|
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) + ')'
|
|
}
|
|
},
|
|
watch: {
|
|
id () {
|
|
this.fetchData()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
</style>
|