replay banner

src/renderer/style.less

@@ -1650,6 +1650,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   top: 0;
   padding-top: var(--navbarHeight);
 
+  .md-btn-replay {
+    background: linear-gradient(143deg, #6e006b, #6e6600);
+    border: 0px;
+    box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+  .md-btn-replay--hero {
+    font-size: 1em;
+    padding: 16px;
+    background: linear-gradient(45deg, #6e006b, #6e6600);
+    border: 0px;
+    box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
+    margin-top: 1em;
+    font-size: 0.9em;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
   .artist-feed-card {
     position: absolute;
     bottom: 0;

src/renderer/views/pages/home.ejs

@@ -49,6 +49,11 @@
             <!--                    </div>-->
             <!--                </div>-->
             <!--            </div>-->
+            <div class="row" v-if="!seenReplay">
+                <div class="col">
+                    <button class="md-btn md-btn-block md-btn-replay--hero" @click="$root.appRoute('replay')">Replay {{ year }}</button>
+                </div>
+            </div>
             <div class="row">
                 <div class="col">
                     <div class="row">
@@ -56,7 +61,7 @@
                             <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>
+                            <button class="md-btn md-btn-replay" v-if="seenReplay" @click="$root.appRoute('replay')">Replay {{ year }}</button>
                         </div>
                     </div>
                     <div class="well">
@@ -105,7 +110,9 @@
                 artistFeed: [],
                 showingArtistFeed: false,
                 page: "main",
-                sectionsReady: []
+                sectionsReady: [],
+                year: new Date().getFullYear(),
+                seenReplay: localStorage.getItem('seenReplay')
             }
         },
         async mounted() {
@@ -113,6 +120,10 @@
             this.getListenNowData()
             await this.getArtistFeed()
             await this.getFavorites()
+            if (new Date().getMonth() == 11) {
+                this.seenReplay = false
+                localStorage.setItem('seenReplay', false)
+            }
         },
         methods: {
             async seeAllHistory() {

src/renderer/views/pages/replay.ejs

@@ -74,6 +74,7 @@
             // 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) {