CHONKY BOY
This commit is contained in:
Core
parent
31ed921a1a
commit
c15f55d0ee
213 changed files with 64188 additions and 55736 deletions
|
|
@ -3,158 +3,167 @@
|
|||
<vue-horizontal style="height: 300px;">
|
||||
<div class="replay-period" v-for="year in years" @click="getReplayYear(year.attributes.year)">
|
||||
<div class="artwork-container">
|
||||
<mediaitem-artwork :size="200" :url="year.relationships.playlist.data[0].attributes.artwork.url"></mediaitem-artwork>
|
||||
<mediaitem-artwork :size="200"
|
||||
:url="year.relationships.playlist.data[0].attributes.artwork.url"></mediaitem-artwork>
|
||||
</div>
|
||||
{{ year.attributes.year }}
|
||||
</div>
|
||||
</vue-horizontal>
|
||||
<hr>
|
||||
<transition name="replaycard">
|
||||
<div class="replay-viewport" v-if="loaded.id != -1">
|
||||
<!-- Stats -->
|
||||
<div class="replay-video" v-if="false">
|
||||
<mediaitem-artwork
|
||||
:url="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.previewFrame.url"
|
||||
:video="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.video"
|
||||
:video-priority="true"></mediaitem-artwork>
|
||||
</div>
|
||||
<h1 class="replay-header">{{ loaded.attributes.year }} {{$root.getLz('term.replay')}}</h1>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h4>{{ convertToHours(loaded.attributes.listenTimeInMinutes) }} {{$root.getLz('term.time.hours')}}</h4>
|
||||
<h4>{{ loaded.attributes.uniqueAlbumCount }} {{$root.getLz('term.uniqueAlbums')}}</h4>
|
||||
<h4>{{ loaded.attributes.uniqueArtistCount }} {{$root.getLz('term.uniqueArtists')}}</h4>
|
||||
<h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
|
||||
<div class="replay-viewport" v-if="loaded.id != -1">
|
||||
<!-- Stats -->
|
||||
<div class="replay-video" v-if="false">
|
||||
<mediaitem-artwork
|
||||
:url="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.previewFrame.url"
|
||||
:video="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.video"
|
||||
:video-priority="true"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="col-auto replay-playlist-container">
|
||||
<mediaitem-square kind="card" :no-scale="true" :force-video="true" :item="loaded.playlist"></mediaitem-square>
|
||||
<h1 class="replay-header">{{ loaded.attributes.year }} {{$root.getLz('term.replay')}}</h1>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h4>{{ convertToHours(loaded.attributes.listenTimeInMinutes) }}
|
||||
{{$root.getLz('term.time.hours')}}</h4>
|
||||
<h4>{{ loaded.attributes.uniqueAlbumCount }} {{$root.getLz('term.uniqueAlbums')}}</h4>
|
||||
<h4>{{ loaded.attributes.uniqueArtistCount }} {{$root.getLz('term.uniqueArtists')}}</h4>
|
||||
<h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
|
||||
</div>
|
||||
<div class="col-auto replay-playlist-container">
|
||||
<mediaitem-square kind="card" :no-scale="true" :force-video="true"
|
||||
:item="loaded.playlist"></mediaitem-square>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Top Artists-->
|
||||
<h3>{{$root.getLz('term.topArtists')}}</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>
|
||||
<!-- Top Artists-->
|
||||
<h3>{{$root.getLz('term.topArtists')}}</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">
|
||||
{{ convertToHours(artistData.attributes.listenTimeInMinutes) }}
|
||||
{{$root.getLz('term.time.hours', {'count':
|
||||
convertToHours(artistData.attributes.listenTimeInMinutes) })}}<br>
|
||||
{{$root.getLz('term.listenedTo')}} {{ artistData.attributes.playCount }}
|
||||
{{$root.getLz('term.times')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
{{ convertToHours(artistData.attributes.listenTimeInMinutes) }} {{$root.getLz('term.time.hours', {'count': convertToHours(artistData.attributes.listenTimeInMinutes) })}}<br>
|
||||
{{$root.getLz('term.listenedTo')}} {{ artistData.attributes.playCount }} {{$root.getLz('term.times')}}
|
||||
</mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
<!-- Top Albums-->
|
||||
<h3>{{$root.getLz('term.topAlbums')}}</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">
|
||||
{{ convertToHours(albumData.attributes.listenTimeInMinutes) }}
|
||||
{{$root.getLz('term.time.hours', {'count':
|
||||
convertToHours(albumData.attributes.listenTimeInMinutes)})}}<br>
|
||||
{{ albumData.attributes.playCount }} {{$root.getLz('term.plays')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
<!-- Top Albums-->
|
||||
<h3>{{$root.getLz('term.topAlbums')}}</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>
|
||||
</mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
<!-- Top Songs-->
|
||||
<h3>{{$root.getLz('term.topSongs')}}</h3>
|
||||
<div class="well">
|
||||
<listitem-horizontal :show-library-status="false"
|
||||
:items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
|
||||
</div>
|
||||
<h3>{{$root.getLz('term.topGenres')}}</h3>
|
||||
<div class="top-genres-container">
|
||||
<div v-for="genre in loaded.topGenres" class="replay-genre-display">
|
||||
<div class="genre-name">
|
||||
{{ genre.genre }}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
{{ convertToHours(albumData.attributes.listenTimeInMinutes) }} {{$root.getLz('term.time.hours', {'count': convertToHours(albumData.attributes.listenTimeInMinutes)})}}<br>
|
||||
{{ albumData.attributes.playCount }} {{$root.getLz('term.plays')}}
|
||||
</div>
|
||||
</div>
|
||||
</mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
<!-- Top Songs-->
|
||||
<h3>{{$root.getLz('term.topSongs')}}</h3>
|
||||
<div class="well">
|
||||
<listitem-horizontal :show-library-status="false" :items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
|
||||
</div>
|
||||
<h3>{{$root.getLz('term.topGenres')}}</h3>
|
||||
<div class="top-genres-container">
|
||||
<div v-for="genre in loaded.topGenres" class="replay-genre-display">
|
||||
<div class="genre-name">
|
||||
{{ genre.genre }}
|
||||
</div>
|
||||
<div class="genre-count">
|
||||
<div class="genre-count-bar" :style="{'width': genre.count + '%'}">
|
||||
{{ genre.count }}%
|
||||
<div class="genre-count">
|
||||
<div class="genre-count-bar" :style="{'width': genre.count + '%'}">
|
||||
{{ genre.count }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('replay-page', {
|
||||
template: '#replay-page',
|
||||
data: function () {
|
||||
return {
|
||||
years: [],
|
||||
loaded: {
|
||||
id: -1
|
||||
},
|
||||
musicTypeGenre: ""
|
||||
}
|
||||
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
|
||||
this.years.reverse()
|
||||
localStorage.setItem("seenReplay", true)
|
||||
this.getReplayYear();
|
||||
const musicGenre = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/genres/34`)
|
||||
this.musicTypeGenre = musicGenre.data.data[0].attributes.name
|
||||
},
|
||||
methods: {
|
||||
songsToArray(songsData) {
|
||||
let self = this
|
||||
let songs = []
|
||||
let topGenres = {}
|
||||
let genrePlayCount = 0;
|
||||
songsData.forEach(function (songData) {
|
||||
let song = songData.relationships.song.data[0]
|
||||
song.attributes.playCount = songData.attributes.playCount
|
||||
songs.push(song)
|
||||
genrePlayCount += song.attributes.playCount
|
||||
song.attributes.genreNames.forEach(function (genre) {
|
||||
if (genre != self.musicTypeGenre) {
|
||||
if (topGenres[genre] == undefined) {
|
||||
topGenres[genre] = song.attributes.playCount
|
||||
} else {
|
||||
topGenres[genre] += song.attributes.playCount
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
let topGenresArray = []
|
||||
for (let genre in topGenres) {
|
||||
topGenresArray.push({
|
||||
genre: genre,
|
||||
count: topGenres[genre]
|
||||
})
|
||||
}
|
||||
topGenresArray.sort(function (a, b) {
|
||||
return b.count - a.count
|
||||
})
|
||||
topGenresArray.forEach(function (genre) {
|
||||
genre.count = Math.round(genre.count / genrePlayCount * 100)
|
||||
})
|
||||
this.loaded.topGenres = topGenresArray
|
||||
|
||||
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`)
|
||||
let replayData = response.data.data[0]
|
||||
// extended playlist
|
||||
let playlist = await app.mk.api.v3.music(replayData.relationships.playlist.data[0].href, {extend: "editorialArtwork,editorialVideo"})
|
||||
replayData.playlist = playlist.data.data[0]
|
||||
this.loaded = replayData
|
||||
},
|
||||
convertToHours(minutes) {
|
||||
return Math.floor(minutes / 60)
|
||||
musicTypeGenre: ""
|
||||
}
|
||||
},
|
||||
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
|
||||
this.years.reverse()
|
||||
localStorage.setItem("seenReplay", true)
|
||||
this.getReplayYear();
|
||||
const musicGenre = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/genres/34`)
|
||||
this.musicTypeGenre = musicGenre.data.data[0].attributes.name
|
||||
},
|
||||
methods: {
|
||||
songsToArray(songsData) {
|
||||
let self = this
|
||||
let songs = []
|
||||
let topGenres = {}
|
||||
let genrePlayCount = 0;
|
||||
songsData.forEach(function(songData) {
|
||||
let song = songData.relationships.song.data[0]
|
||||
song.attributes.playCount = songData.attributes.playCount
|
||||
songs.push(song)
|
||||
genrePlayCount += song.attributes.playCount
|
||||
song.attributes.genreNames.forEach(function(genre) {
|
||||
if (genre != self.musicTypeGenre) {
|
||||
if (topGenres[genre] == undefined) {
|
||||
topGenres[genre] = song.attributes.playCount
|
||||
} else {
|
||||
topGenres[genre] += song.attributes.playCount
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
let topGenresArray = []
|
||||
for (let genre in topGenres) {
|
||||
topGenresArray.push({
|
||||
genre: genre,
|
||||
count: topGenres[genre]
|
||||
})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
topGenresArray.sort(function(a, b) {
|
||||
return b.count - a.count
|
||||
})
|
||||
topGenresArray.forEach(function(genre) {
|
||||
genre.count = Math.round(genre.count / genrePlayCount * 100)
|
||||
})
|
||||
this.loaded.topGenres = topGenresArray
|
||||
|
||||
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`)
|
||||
let replayData = response.data.data[0]
|
||||
// extended playlist
|
||||
let playlist = await app.mk.api.v3.music(replayData.relationships.playlist.data[0].href, { extend: "editorialArtwork,editorialVideo" })
|
||||
replayData.playlist = playlist.data.data[0]
|
||||
this.loaded = replayData
|
||||
},
|
||||
convertToHours(minutes) {
|
||||
return Math.floor(minutes / 60)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue