okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Generating top genres, made buttons nicer on replay

Browse source
This commit is contained in:
booploops 2022-02-17 17:26:39 -08:00
parent c4edd97d2a
commit c611b032cc
2 changed files with 92 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/renderer/views/pages/replay.ejs
View file

@ -1,8 +1,13 @@
<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>
<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>
</div>
{{ year.attributes.year }}
</div>
</vue-horizontal>
<hr>
<transition name="replaycard">
<div class="replay-viewport" v-if="loaded.id != -1">
@ -55,6 +60,19 @@
<div class="well">
<listitem-horizontal :show-library-status="false" :items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
</div>
<h3>Top Genres</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>
</div>
</div>
</div>
</div>
</transition>
</div>
@ -74,17 +92,45 @@
// 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();
},
methods: {
songsToArray(songsData) {
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 != "Music") {
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()) {