Generating top genres, made buttons nicer on replay

src/renderer/less/pages.less

@@ -904,6 +904,49 @@
 .replay-page {
   --replayTextShadow: 0px 3px 2px #6f3f52;
 
+  .replay-period {
+    height: 200px;
+    width: 200px;
+    margin: 6px;
+    border-radius: var(--mediaItemRadius);
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform .2s var(--appleEase);
+    transition-delay: .1s;
+    align-self: center;
+    &:hover {
+      transform: translateY(-6px);
+      transition-delay: 0s;
+    }
+    .artwork-container {
+      height:200px;
+      width:200px;
+    }
+  }
+
+  .top-genres-container {
+
+    .genre-name {
+      font-size: 1.2em;
+    }
+    .genre-count {
+      width: 100%;
+      height: 32px;
+      background: #ffffff14;
+      border-radius: 10px;
+      overflow: hidden;
+
+      .genre-count-bar {
+        height: 100%;
+        width: 0%;
+        background: var(--keyColor);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 32px;
+      }
+    }
+  }
 
   .cd-mediaitem-square {
     .mediaitem-artwork {

src/renderer/views/pages/replay.ejs

@@ -1,8 +1,13 @@
 <script type="text/x-template" id="replay-page">
     <div class="content-inner replay-page">
-        <h1 class="header-text">Replay</h1>
+        <vue-horizontal style="height: 300px;">
-        <button v-for="year in years" class="md-btn md-btn-primary" @click="getReplayYear(year.attributes.year)">{{ year.attributes.year }}</button>
+            <div class="replay-period" v-for="year in years" @click="getReplayYear(year.attributes.year)">
-        <button class="md-btn md-btn-primary" @click="getReplayYear()">This Year</button>
+                <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()) {