change to artwork bg

src/renderer/index.js

@@ -2428,22 +2428,24 @@ const app = new Vue({
                         this.currentTrackID = this.mk.nowPlayingItem["id"];
                         document.querySelector('.bg-artwork').src = "";
                         if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                            document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
+                            document.querySelectorAll('.bg-artwork').forEach(artwork => {
-                            Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
+                                artwork.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
-                                let angle = "140deg"
+                            })
-                                let gradient = ""
+                            // Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
-                                let colors = Object.values(palette).filter(color=>color!=null)
+                            //     let angle = "140deg"
-                                if(colors.length > 0){
+                            //     let gradient = ""
-                                    let stops = []
+                            //     let colors = Object.values(palette).filter(color=>color!=null)
-                                    colors.forEach(color=>{
+                            //     if(colors.length > 0){
-                                        stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
+                            //         let stops = []
-                                    })
+                            //         colors.forEach(color=>{
-                                    stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
+                            //             stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
-                                    gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
+                            //         })
-                                }
+                            //         stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
-
+                            //         gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
-                                document.querySelector("#app").style.setProperty("--bgColor", gradient)
+                            //     }
-                            }).setQuantizer(Vibrant.Quantizer.WebWorker)
+                            //
+                            //     document.querySelector("#app").style.setProperty("--bgColor", gradient)
+                            // }).setQuantizer(Vibrant.Quantizer.WebWorker)
 
                             try {
                                 clearInterval(bginterval);

src/renderer/style.less

@@ -89,6 +89,8 @@ body[platform='linux'] {
   --color1: rgba(30, 30, 30, 30%);
   --color2: rgba(15, 15, 15, 30%);
   --bgColor: transparent;
+  --bgWidth: 0px;
+  --bgHeight: 0px;
   --chromeHeight: 55px;
   width: 100%;
   height: 100%;
@@ -104,8 +106,8 @@ body[platform='linux'] {
     position: absolute;
     top: -50%;
     left: -50%;
-    width: 200%;
+    width: var(--bgWidth);
-    height: 250%;
+    height: var(--bgHeight);
     background-image: var(--bgColor);
     content: "";
     z-index: -1;
@@ -179,22 +181,51 @@ input[type="text"], input[type="number"] {
 
 .bg-artwork {
   position: absolute;
-  top: 0;
+  width: 200%;
-  left: 0;
-  width: 100%;
-  height: 100%;
   background: var(--artwork);
   z-index: -1;
-  object-fit: cover;
+  //object-fit: cover;
-  object-position: center;
+  //object-position: center;
   /* filter: blur(60px) saturate(180%);
   opacity: 0.70; */
   filter: blur(180px) saturate(280%);
-  opacity: 0.60;
+  opacity: 1;
   transition: opacity .25s var(--appleEase);
   pointer-events: none;
   transform: translateZ(0px);
-  display: none;
+  animation: rotateBg 35s linear infinite;
+  //display: none;
+}
+
+@keyframes rotateBg {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+.bg-artwork-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+
+  .bg-artwork.a {
+    top:0;
+    left:0;
+    mix-blend-mode: luminosity;
+  }
+  .bg-artwork.b {
+    bottom:0;
+    right:0;
+    animation-direction: reverse;
+    animation-delay: 10s;
+  }
 }
 
 

src/renderer/views/main.ejs

@@ -462,8 +462,12 @@
         </div>
     </transition>
     <transition name="wpfade">
-        <img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
+        <div class="bg-artwork-container">
-        >
+            <img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork a "
+            >
+            <img v-show="chrome.artworkReady" class="bg-artwork b"
+            >
+        </div>
     </transition>
     <transition name="wpfade">
         <div class="bg-artwork--placeholder"></div>