97 lines
No EOL
4.5 KiB
Text
97 lines
No EOL
4.5 KiB
Text
<script type="text/x-template" id="replay-page">
|
|
<div class="content-inner replay-page">
|
|
<h1 class="header-text">Replay</h1>
|
|
<button v-for="year in years" class="md-btn md-btn-primary" @click="getReplayYear(year.attributes.year)">{{ year.attributes.year }}</button>
|
|
<button class="md-btn md-btn-primary" @click="getReplayYear()">This Year</button>
|
|
<hr>
|
|
<transition name="replaycard">
|
|
<div class="replay-viewport" v-if="loaded.id != -1">
|
|
<!-- Stats -->
|
|
<h1 class="replay-header">{{ loaded.attributes.year }} Replay</h1>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h4>{{ loaded.attributes.listenTimeInMinutes }} minutes</h4>
|
|
<h4>{{ loaded.attributes.uniqueAlbumCount }} Unique Albums</h4>
|
|
<h4>{{ loaded.attributes.uniqueArtistCount }} Unique Artists</h4>
|
|
<h4>{{ loaded.attributes.uniqueSongCount }} Unique Songs</h4>
|
|
</div>
|
|
<div class="col-auto">
|
|
<mediaitem-square kind="card" :item="loaded.relationships.playlist.data[0]"></mediaitem-square>
|
|
</div>
|
|
</div>
|
|
<!-- Top Artists-->
|
|
<h3>Top Artists</h3>
|
|
<div class="well">
|
|
<mediaitem-scroller-horizontal>
|
|
<div class="card replay-card" v-for="artistData in loaded.views['top-artists'].data">
|
|
<div class="card-body">
|
|
<mediaitem-square :item="artistData.relationships.artist.data[0]"></mediaitem-square>
|
|
</div>
|
|
<div class="card-footer">
|
|
{{ artistData.attributes.listenTimeInMinutes }} minutes<br>
|
|
Listened to: {{ artistData.attributes.playCount }} times
|
|
</div>
|
|
</div>
|
|
</mediaitem-scroller-horizontal>
|
|
</div>
|
|
<!-- Top Albums-->
|
|
<h3>Top Albums</h3>
|
|
<div class="well">
|
|
<mediaitem-scroller-horizontal>
|
|
<div class="card replay-card" v-for="albumData in loaded.views['top-albums'].data">
|
|
<div class="card-body">
|
|
<mediaitem-square :item="albumData.relationships.album.data[0]"></mediaitem-square>
|
|
</div>
|
|
<div class="card-footer">
|
|
{{ albumData.attributes.listenTimeInMinutes }} minutes<br>
|
|
{{ albumData.attributes.playCount }} plays
|
|
</div>
|
|
</div>
|
|
</mediaitem-scroller-horizontal>
|
|
</div>
|
|
<!-- Top Songs-->
|
|
<h3>Top Songs</h3>
|
|
<div class="well">
|
|
<listitem-horizontal :show-library-status="false" :items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</script>
|
|
<script>
|
|
Vue.component('replay-page', {
|
|
template: '#replay-page',
|
|
data: function () {
|
|
return {
|
|
years: [],
|
|
loaded: {
|
|
id: -1
|
|
}
|
|
}
|
|
},
|
|
async mounted() {
|
|
// Get available years
|
|
let year = await app.mk.api.v3.music("/v1/me/music-summaries/search?extend=inLibrary&period=year&fields[music-summaries]=period%2Cyear&include[music-summaries]=playlist")
|
|
this.years = year.data.data
|
|
localStorage.setItem("seenReplay", true)
|
|
},
|
|
methods: {
|
|
songsToArray(songsData) {
|
|
let songs = []
|
|
songsData.forEach(function (songData) {
|
|
let song = songData.relationships.song.data[0]
|
|
song.attributes.playCount = songData.attributes.playCount
|
|
songs.push(song)
|
|
})
|
|
return songs
|
|
},
|
|
async getReplayYear(year = new Date().getFullYear()) {
|
|
this.loaded.id = -1
|
|
let response = await app.mk.api.v3.music(`/v1/me/music-summaries/year-${year}?extend=inLibrary&views=top-artists%2Ctop-albums%2Ctop-songs&include[music-summaries]=playlist&include[playlists]=tracks&includeOnly=playlist%2Ctracks%2Csong%2Cartist%2Calbum`)
|
|
console.warn(response.data.data[0])
|
|
this.loaded = response.data.data[0]
|
|
}
|
|
}
|
|
});
|
|
</script> |