From 5d02b60df00408284fab8f8423f2587db603aea9 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 3 Jan 2022 22:53:48 -0800
Subject: [PATCH] updated fullscreen drawer animation

---
 src/renderer/index.js       | 22 ++++++++++++++++++----
 src/renderer/style.less     | 15 +++------------
 src/renderer/views/main.ejs |  7 ++++++-
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index cb5c6fb8..01fa1e50 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -105,10 +105,15 @@ const store = new Vuex.Store({
             albums: [],
             recentlyAdded: [],
             playlists: []
+        },
+        artwork: {
+            playerLCD: ""
         }
     },
     mutations: {
-
+        setLCDArtwork(state, artwork) {
+            state.artwork.playerLCD = artwork
+        }
     }
 })
 
@@ -2430,9 +2435,13 @@ const app = new Vue({
                         this.currentTrackID = this.mk.nowPlayingItem["id"];
                         document.querySelector('.bg-artwork').src = "";
                         if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                            document.querySelectorAll('.bg-artwork').forEach(artwork => {
-                                artwork.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
+                            getBase64FromUrl(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).then(img =>{
+                                document.querySelectorAll('.bg-artwork').forEach(artwork => {
+                                    artwork.src = img;
+                                })
+                                self.$store.commit("setLCDArtwork", img)
                             })
+
                             // Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
                             //     let angle = "140deg"
                             //     let gradient = ""
@@ -2534,7 +2543,12 @@ const app = new Vue({
                 const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
 
                 if (data != null && data !== "") {
-                    document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString();
+                    getBase64FromUrl((data["attributes"]["artwork"]["url"]).toString()).then(img =>{
+                        document.querySelector('.bg-artwork').forEach(artwork => {
+                            artwork.src = img;
+                        })
+                        self.$store.commit("setLCDArtwork", img)
+                    })
                 }
             } catch (e) {
             }
diff --git a/src/renderer/style.less b/src/renderer/style.less
index bde486d9..990511a9 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -346,18 +346,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     position: absolute;
     width: 100%;
     height: 100%;
-    &::before {
-      position: absolute;
-      top: -10%;
-      left: -100%;
-      width: 100vh;
-      height: 100vh;
-      background-image: var(--bgColor);
-      content: "";
-      z-index: -1;
-      transform: rotateZ(0deg);
-      transform-origin: center;
-      animation: bgRotate 10s linear infinite;
+
+    .bg-artwork-container .bg-artwork {
+      filter: brightness(100%) blur(180px) saturate(280%) contrast(1);
     }
   }
 }
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 3fb66b37..8a699671 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -447,7 +447,12 @@
                 </div>
                 <transition name="drawertransition">
                     <div class="app-drawer" v-if="drawer.open">
-                            <div class="bgArtworkMaterial"></div>
+                        <div class="bgArtworkMaterial">
+                            <div class="bg-artwork-container">
+                                <img class="bg-artwork a" :src="$store.state.artwork.playerLCD">
+                                <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
+                            </div>
+                        </div>
                             <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
                                         :richlyrics="richlyrics"></lyrics-view>
                             <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">