updated fullscreen drawer animation

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"]) {
+                            getBase64FromUrl(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).then(img =>{
                                 document.querySelectorAll('.bg-artwork').forEach(artwork => {
-                                artwork.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
+                                    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) {
             }

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;
+    .bg-artwork-container .bg-artwork {
-      top: -10%;
+      filter: brightness(100%) blur(180px) saturate(280%) contrast(1);
-      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;
     }
   }
 }

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">