Newer
Older
Eliot Berriot
committed
<template>
<div>
<div v-if="isLoading" class="ui vertical segment" v-title="'Artist'">
Eliot Berriot
committed
<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" v-title="artist.name">
Eliot Berriot
committed
<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" v-if="albums">
{{ $t('{% track_count %} tracks in {% album_count %} albums', {track_count: totalTracks, album_count: albums.length})}}
Eliot Berriot
committed
</div>
</h2>
<div class="ui hidden divider"></div>
<radio-button type="artist" :object-id="artist.id"></radio-button>
</button>
<play-button class="orange" :artist="artist.id"><i18next path="Play all albums"/></play-button>
Eliot Berriot
committed
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
Eliot Berriot
committed
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui button">
<i class="external icon"></i>
Eliot Berriot
committed
</a>
</div>
</div>
<div v-if="isLoadingAlbums" class="ui vertical stripe segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<div v-else-if="albums" class="ui vertical stripe segment">
<div class="ui stackable doubling three column grid">
<div class="column" :key="album.id" v-for="album in albums">
Eliot Berriot
committed
<album-card :mode="'rich'" class="fluid" :album="album"></album-card>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
Eliot Berriot
committed
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'
Eliot Berriot
committed
export default {
props: ['id'],
components: {
AlbumCard,
RadioButton,
PlayButton
},
data () {
return {
isLoading: true,
Eliot Berriot
committed
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 + '"')
Eliot Berriot
committed
self.artist = response.data
self.isLoading = false
self.isLoadingAlbums = true
axios.get('albums/', {params: {artist: this.id, ordering: '-release_date'}}).then((response) => {
self.albums = JSON.parse(JSON.stringify(response.data.results)).map((album) => {
return backend.Album.clean(album)
})
self.isLoadingAlbums = false
})
Eliot Berriot
committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
})
}
},
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(' + this.$store.getters['instance/absoluteUrl'](this.cover) + ')'
Eliot Berriot
committed
}
},
watch: {
id () {
this.fetchData()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>