From 6f975a3394b41eee0c52f18f30a9b3b0247acf86 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 17 Feb 2022 01:56:13 -0800
Subject: [PATCH] replay wip

---
 src/main/base/browserwindow.ts         |  1 +
 src/renderer/less/pages.less           | 24 +++++++
 src/renderer/style.less                | 11 +++
 src/renderer/views/app/app-content.ejs |  7 ++
 src/renderer/views/pages/home.ejs      |  9 ++-
 src/renderer/views/pages/replay.ejs    | 95 ++++++++++++++++++++++++++
 6 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/views/pages/replay.ejs

diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index ec199479..8e079151 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -47,6 +47,7 @@ export class BrowserWindow {
                 "pages/library-videos",
                 "pages/remote-pair",
                 "pages/themes-github",
+                "pages/replay",
                 "components/mediaitem-artwork",
                 "components/artwork-material",
                 "components/menu-panel",
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index f95f07e4..10c67d24 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -819,3 +819,27 @@
     margin: 16px;
   }
 }
+
+// Replay
+.replay-page {
+  --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
+  --replayTextShadow: 0px 3px 2px #6f3f52;
+
+  .replay-viewport {
+    background: var(--replayGradient);
+    padding: 16px 40px;
+    border-radius: 10px;
+    box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
+    color: rgb(238 238 238 / 86%);
+
+    .replay-header {
+      text-align: center;
+      font-size: 3em;
+      text-shadow: var(--replayTextShadow);
+    }
+  }
+  .replay-card {
+    background: transparent;
+    border:0px;
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/style.less b/src/renderer/style.less
index ccce4639..31fa21bf 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2757,6 +2757,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Transitions */
 
+.replaycard-enter-active,
+.replaycard-leave-active {
+  transition: opacity .5s var(--appleEase), transform .5s var(--appleEase);
+}
+
+.replaycard-enter,
+.replaycard-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
 .modal-enter-active,
 .modal-leave-active {
   transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
index 1ebbd22e..b64e3f7d 100644
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@@ -172,4 +172,11 @@
         </template>
     </transition>
 
+    <!-- Replay -->
+    <transition name="wpfade">
+        <template v-if="page == 'replay'">
+            <replay-page></replay-page>
+        </template>
+    </transition>
+
 </div>
\ No newline at end of file
diff --git a/src/renderer/views/pages/home.ejs b/src/renderer/views/pages/home.ejs
index 226dc360..e278248c 100644
--- a/src/renderer/views/pages/home.ejs
+++ b/src/renderer/views/pages/home.ejs
@@ -51,7 +51,14 @@
             <!--            </div>-->
             <div class="row">
                 <div class="col">
-                    <h3>{{app.getLz('home.madeForYou')}}</h3>
+                    <div class="row">
+                        <div class="col nopadding">
+                            <h3>{{app.getLz('home.madeForYou')}}</h3>
+                        </div>
+                        <div class="col-auto nopadding flex-center">
+                            <button class="cd-btn-seeall" @click="$root.appRoute('replay')">Replay</button>
+                        </div>
+                    </div>
                     <div class="well">
                         <mediaitem-scroller-horizontal :items="madeForYou" v-if="isSectionReady('madeForYou')">
                         </mediaitem-scroller-horizontal>
diff --git a/src/renderer/views/pages/replay.ejs b/src/renderer/views/pages/replay.ejs
new file mode 100644
index 00000000..b41eb62d
--- /dev/null
+++ b/src/renderer/views/pages/replay.ejs
@@ -0,0 +1,95 @@
+<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)">{{ year.attributes.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 }}<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 :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
+        },
+        methods: {
+            songsToArray(songsData) {
+                let songs = []
+                songsData.forEach(function (songData) {
+                    songs.push(songData.relationships.song.data[0])
+                })
+                return songs
+            },
+            async getReplayYear(year) {
+                this.loaded.id = -1
+                console.log(year)
+                let response = await app.mk.api.v3.music(`${year.href}?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>
\ No newline at end of file