Use proper method for fetching artist cover
This commit is contained in:
parent
c1694a808c
commit
7b74e55e7f
|
@ -34,6 +34,12 @@
|
||||||
:src="currentTrack.cover"
|
:src="currentTrack.cover"
|
||||||
alt="Cover"
|
alt="Cover"
|
||||||
>
|
>
|
||||||
|
<img
|
||||||
|
v-else-if="artistCover"
|
||||||
|
height="120"
|
||||||
|
:src="artistCover"
|
||||||
|
alt="Cover"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
v-else
|
v-else
|
||||||
height="120"
|
height="120"
|
||||||
|
@ -258,9 +264,6 @@ function getURLParams () {
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: { Logo },
|
components: { Logo },
|
||||||
props: {
|
|
||||||
artistCover: { type: Object, required: false, default: () => { return null } }
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
time,
|
time,
|
||||||
|
@ -275,6 +278,7 @@ export default {
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
theme: 'dark',
|
theme: 'dark',
|
||||||
currentIndex: -1,
|
currentIndex: -1,
|
||||||
|
artistCover: null,
|
||||||
themes: {
|
themes: {
|
||||||
dark: {
|
dark: {
|
||||||
textColor: 'white'
|
textColor: 'white'
|
||||||
|
@ -385,6 +389,7 @@ export default {
|
||||||
}
|
}
|
||||||
if (type === 'artist') {
|
if (type === 'artist') {
|
||||||
this.fetchTracks({ artist: id, playable: true, include_channels: 'true', ordering: '-album__release_date,disc_number,position' })
|
this.fetchTracks({ artist: id, playable: true, include_channels: 'true', ordering: '-album__release_date,disc_number,position' })
|
||||||
|
this.fetchArtistCover(id)
|
||||||
}
|
}
|
||||||
if (type === 'playlist') {
|
if (type === 'playlist') {
|
||||||
this.fetchTracks({}, `/api/v1/playlists/${id}/tracks/`)
|
this.fetchTracks({}, `/api/v1/playlists/${id}/tracks/`)
|
||||||
|
@ -463,6 +468,15 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
fetchArtistCover (id) {
|
||||||
|
const self = this
|
||||||
|
self.isLoading = true
|
||||||
|
const url = `${this.baseUrl}/api/v1/artists/${id}/`
|
||||||
|
axios.get(url).then(response => {
|
||||||
|
self.isLoading = false
|
||||||
|
self.artistCover = response.data.cover.urls.medium_square_crop
|
||||||
|
})
|
||||||
|
},
|
||||||
bindEvents () {
|
bindEvents () {
|
||||||
const self = this
|
const self = this
|
||||||
this.$refs.player.player.on('ended', () => {
|
this.$refs.player.player.on('ended', () => {
|
||||||
|
|
|
@ -98,7 +98,6 @@
|
||||||
scrolling="no"
|
scrolling="no"
|
||||||
frameborder="no"
|
frameborder="no"
|
||||||
:src="iframeSrc"
|
:src="iframeSrc"
|
||||||
:artist-cover="cover"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -112,8 +111,7 @@ import _ from '@/lodash'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
type: { type: String, required: true },
|
type: { type: String, required: true },
|
||||||
id: { type: Number, required: true },
|
id: { type: Number, required: true }
|
||||||
cover: { type: Object, required: false, default: () => { return null } }
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
const d = {
|
const d = {
|
||||||
|
|
|
@ -320,7 +320,6 @@
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<embed-wizard
|
<embed-wizard
|
||||||
:id="object.artist.id"
|
:id="object.artist.id"
|
||||||
:cover="object.artist.cover"
|
|
||||||
type="artist"
|
type="artist"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue