108 lines
No EOL
4.7 KiB
Text
108 lines
No EOL
4.7 KiB
Text
<script type="text/x-template" id="cider-artist-feed">
|
|
<div class="content-inner">
|
|
<div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row nopadding">
|
|
<div class="col nopadding">
|
|
<h3>{{app.getLz('home.followedArtists')}}</h3>
|
|
</div>
|
|
</div>
|
|
<vue-horizontal>
|
|
<div v-for="artist in artists" style="margin: 6px;">
|
|
<mediaitem-square :item="artist" kind="small"></mediaitem-square>
|
|
<button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
|
|
<div class="sidebar-icon">
|
|
<div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
|
|
</div> {{app.getLz('action.unfollow')}}
|
|
</button>
|
|
</div>
|
|
</vue-horizontal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row nopadding">
|
|
<div class="col nopadding">
|
|
<h3>{{app.getLz('home.artistsFeed')}}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="well" style="margin-top:0;">
|
|
<template v-if="artistFeed.length > 0">
|
|
<mediaitem-list-item v-for="item in artistFeed" :item="item"></mediaitem-list-item>
|
|
</template>
|
|
<template v-else>
|
|
<div class="spinner"></div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('cider-artist-feed', {
|
|
template: '#cider-artist-feed',
|
|
data: function () {
|
|
return {
|
|
app: this.$root,
|
|
followedArtists: this.$root.cfg.home.followedArtists,
|
|
artistFeed: [],
|
|
artists: []
|
|
}
|
|
},
|
|
async mounted() {
|
|
let self = this
|
|
await this.getArtistFeed()
|
|
},
|
|
methods: {
|
|
unfollow(id) {
|
|
let index = this.followedArtists.indexOf(id)
|
|
if (index > -1) {
|
|
this.followedArtists.splice(index, 1)
|
|
}
|
|
let artist = this.artists.find(a => a.id == id)
|
|
let index2 = this.artists.indexOf(artist)
|
|
if (index2 > -1) {
|
|
this.artists.splice(index2, 1)
|
|
}
|
|
this.getArtistFeed()
|
|
},
|
|
async getArtistFeed() {
|
|
let artists = this.followedArtists
|
|
let self = this
|
|
this.artists = []
|
|
this.artistFeed = []
|
|
|
|
// Apple limits the number of IDs we can provide in a single API call to 50.
|
|
// Divide it into groups of 50 and send parallel requests
|
|
let chunks = []
|
|
for (let artistIdx = 0; artistIdx < artists.length; artistIdx += 50) {
|
|
chunks.push(artists.slice(artistIdx, artistIdx + 50))
|
|
}
|
|
try {
|
|
const chunkArtistData = await Promise.all(chunks.map(chunk =>
|
|
this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists?ids=${chunk.toString()}&views=latest-release&include[songs]=albums&fields[albums]=artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount&limit[artists:top-songs]=2&art[url]=f`)))
|
|
chunkArtistData.forEach(chunkResult =>
|
|
chunkResult.data.data.forEach(item => {
|
|
self.artists.push(item)
|
|
if (item.views["latest-release"].data.length != 0) {
|
|
self.artistFeed.push(item.views["latest-release"].data[0])
|
|
}
|
|
}))
|
|
// sort artistFeed by attributes.releaseDate descending, date is formatted as "YYYY-MM-DD"
|
|
this.artistFeed.sort((a, b) => {
|
|
let dateA = new Date(a.attributes.releaseDate)
|
|
let dateB = new Date(b.attributes.releaseDate)
|
|
return dateB - dateA
|
|
})
|
|
} catch (err) { }
|
|
}
|
|
}
|
|
});
|
|
</script> |