Newer
Older
Eliot Berriot
committed
<template>
<div v-title="labels.title">
<div v-if="isLoading" class="ui vertical segment">
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">
<translate
tag="div"
translate-plural="%{ count } tracks in %{ albumsCount } albums"
:translate-n="totalTracks"
:translate-params="{count: totalTracks, albumsCount: totalAlbums}">
Eliot Berriot
committed
</div>
</h2>
<div class="ui hidden divider"></div>
<radio-button type="artist" :object-id="artist.id"></radio-button>
<play-button :is-playable="isPlayable" class="orange" :artist="artist.id">
<translate>Play all albums</translate>
Eliot Berriot
committed
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
<translate>Search on Wikipedia</translate>
Eliot Berriot
committed
</a>
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
Eliot Berriot
committed
<i class="external icon"></i>
<translate>View on MusicBrainz</translate>
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 && albums.length > 0" class="ui vertical stripe segment">
<translate>Albums by this artist</translate>
<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>
<div v-if="tracks.length > 0" class="ui vertical stripe segment">
<h2>
<translate>Tracks by this artist</translate>
</h2>
<track-table :display-position="true" :tracks="tracks"></track-table>
</div>
Eliot Berriot
committed
<div class="ui vertical stripe segment">
<h2>
<translate>User libraries</translate>
</h2>
<library-widget :url="'artists/' + id + '/libraries/'">
<translate slot="subtitle">This artist is present in the following libraries:</translate>
</library-widget>
</div>
Eliot Berriot
committed
</template>
</div>
</template>
<script>
import _ from 'lodash'
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'
import TrackTable from '@/components/audio/track/Table'
Eliot Berriot
committed
import LibraryWidget from '@/components/federation/LibraryWidget'
Eliot Berriot
committed
export default {
props: ['id'],
components: {
AlbumCard,
RadioButton,
PlayButton,
Eliot Berriot
committed
TrackTable,
LibraryWidget
Eliot Berriot
committed
},
data () {
return {
isLoading: true,
Eliot Berriot
committed
artist: null,
albums: null,
tracks: []
Eliot Berriot
committed
}
},
created () {
this.fetchData()
},
methods: {
fetchData () {
var self = this
this.isLoading = true
logger.default.debug('Fetching artist "' + this.id + '"')
axios.get('tracks/', {params: {artist: this.id}}).then((response) => {
self.tracks = response.data.results
})
axios.get('artists/' + this.id + '/').then((response) => {
Eliot Berriot
committed
self.artist = response.data
self.isLoading = false
self.isLoadingAlbums = true
axios.get('albums/', {params: {artist: self.id, ordering: '-release_date'}}).then((response) => {
let parsed = JSON.parse(JSON.stringify(response.data.results))
self.albums = parsed.map((album) => {
return backend.Album.clean(album)
})
self.isLoadingAlbums = false
})
Eliot Berriot
committed
})
}
},
computed: {
labels () {
return {
title: this.$gettext('Artist')
}
},
totalAlbums () {
let trackAlbums = _.uniqBy(this.tracks, (t) => {
return t.album.id
})
return this.albums.length + trackAlbums.length
},
Eliot Berriot
committed
totalTracks () {
if (this.albums.length === 0) {
return 0 + this.tracks.length
}
Eliot Berriot
committed
return this.albums.map((album) => {
return album.tracks.length
}).reduce((a, b) => {
return a + b
}) + this.tracks.length
Eliot Berriot
committed
},
isPlayable () {
return this.artist.albums.filter((a) => {
return a.is_playable
}).length > 0
},
Eliot Berriot
committed
wikipediaUrl () {
return 'https://en.wikipedia.org/w/index.php?search=' + encodeURI(this.artist.name)
Eliot Berriot
committed
},
musicbrainzUrl () {
if (this.artist.mbid) {
return 'https://musicbrainz.org/artist/' + this.artist.mbid
}
Eliot Berriot
committed
},
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 || !this.cover.original) {
Eliot Berriot
committed
return ''
}
return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.cover.original) + ')'
Eliot Berriot
committed
}
},
watch: {
id () {
this.fetchData()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>