From add235af052781b9d884664749ba53db4030a72f Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 3 Jan 2022 21:26:01 -0800
Subject: [PATCH] change to artwork bg

---
 src/renderer/index.js       | 34 +++++++++++++------------
 src/renderer/style.less     | 51 +++++++++++++++++++++++++++++--------
 src/renderer/views/main.ejs |  8 ++++--
 3 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index e193b728..0306b38d 100644
--- a/src/renderer/index.js
+++ b/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);
-                            Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
-                                let angle = "140deg"
-                                let gradient = ""
-                                let colors = Object.values(palette).filter(color=>color!=null)
-                                if(colors.length > 0){
-                                    let stops = []
-                                    colors.forEach(color=>{
-                                        stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
-                                    })
-                                    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.querySelectorAll('.bg-artwork').forEach(artwork => {
+                                artwork.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
+                            })
+                            // Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
+                            //     let angle = "140deg"
+                            //     let gradient = ""
+                            //     let colors = Object.values(palette).filter(color=>color!=null)
+                            //     if(colors.length > 0){
+                            //         let stops = []
+                            //         colors.forEach(color=>{
+                            //             stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
+                            //         })
+                            //         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)
 
                             try {
                                 clearInterval(bginterval);
diff --git a/src/renderer/style.less b/src/renderer/style.less
index fc0bd31b..1b285ebf 100644
--- a/src/renderer/style.less
+++ b/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%;
-    height: 250%;
+    width: var(--bgWidth);
+    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;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  width: 200%;
   background: var(--artwork);
   z-index: -1;
-  object-fit: cover;
-  object-position: center;
+  //object-fit: cover;
+  //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;
+  }
 }
 
 
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 0cd98afc..5db62bc1 100644
--- a/src/renderer/views/main.ejs
+++ b/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>