From e087129b01f5935a7e6f5e2fdb33b403210b4cc7 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:51:15 -0800
Subject: [PATCH] added toggle for animated artwork background, animated
 background will stop when window is out of focus

---
 index.js                              |  1 +
 src/renderer/index.js                 |  3 ++
 src/renderer/style.less               | 70 ++++++++++++++++++++-------
 src/renderer/views/main.ejs           |  3 +-
 src/renderer/views/pages/settings.ejs |  8 +++
 5 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/index.js b/index.js
index 4badd4c0..959e94f0 100644
--- a/index.js
+++ b/index.js
@@ -50,6 +50,7 @@ const configDefaults = {
         "refresh_rate": 0,
         "animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
         "animated_artwork_qualityLevel": 1,
+        "bg_artwork_rotation": false,
         "hw_acceleration": "default", // default, webgpu, disabled
         "window_transparency": "default"
     },
diff --git a/src/renderer/index.js b/src/renderer/index.js
index ea33213c..e193b728 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -223,6 +223,7 @@ const app = new Vue({
         mxmtoken: "",
         mkIsReady: false,
         playerReady: false,
+        animateBackground: false,
         lyricon: false,
         currentTrackID: '',
         currentTrackIDBG: '',
@@ -2583,10 +2584,12 @@ const app = new Vue({
                 document.querySelectorAll(".animated-artwork-video").forEach(el => {
                     el.play()
                 })
+                this.animateBackground = true
             } else {
                 document.querySelectorAll(".animated-artwork-video").forEach(el => {
                     el.pause()
                 })
+                this.animateBackground = false
             }
         },
         async nowPlayingContextMenu(event) {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 8c590a64..f70c9f50 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -99,28 +99,32 @@ body[platform='linux'] {
   position: relative;
   overflow: hidden;
   background-size: 400% 400%;
+
+  &::before {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 250%;
+    background-image: var(--bgColor);
+    content: "";
+    z-index: -1;
+    transform: rotateZ(0deg);
+    transform-origin: center;
+    animation: bgRotate 10s linear infinite;
+    filter: brightness(100%) saturate(200%) contrast(1.5);
+  }
+
+  &.noanimation::before {
+    animation: none;
+  }
 }
 
-.bgGradientMaterial {
+.bgGradientMaterial-base {
   position:relative;
 }
 
-.bgGradientMaterial::before {
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 250%;
-  background-image: var(--bgColor);
-  content: "";
-  z-index: -1;
-  transform: rotateZ(0deg);
-  transform-origin: center;
-  animation: bgRotate 10s linear infinite;
-  filter: brightness(100%) saturate(200%) contrast(1.5);
-}
-
-#app::before {
+.bgGradientMaterial-base::before {
   position: absolute;
   top: -50%;
   left: -50%;
@@ -305,6 +309,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 94%;
   backdrop-filter: blur(40px) saturate(180%);
   box-shadow: var(--ciderShadow-Generic);
+  overflow: hidden;
+
+  .bgArtworkMaterial {
+    display: none;
+    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;
+    }
+  }
 }
 
 .search-input-container {
@@ -3327,9 +3352,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     box-shadow: unset;
     background: black;
 
+    .bgArtworkMaterial {
+      display: block;
+      top: -50%;
+      left: -20%;
+      width: 200VH;
+      height: 200VH;
+    }
+
     .lyric-body {
       justify-content: center;
       align-items: center;
+      padding: 0px;
+      margin: 0px;
+      overflow: hidden;
 
       .lyric-line {
         pointer-events: none;
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 276415b9..0cd98afc 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -30,7 +30,7 @@
 </head>
 
 <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
-<div id="app">
+<div id="app" :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
     <transition name="fsModeSwitch">
         <div id="app-main" v-show="appMode == 'player'">
             <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
@@ -447,6 +447,7 @@
                 </div>
                 <transition name="drawertransition">
                     <div class="app-drawer" v-if="drawer.open">
+                        <div class="bgArtworkMaterial"></div>
                         <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
                                      :richlyrics="richlyrics"></lyrics-view>
                         <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 66f6d3af..9372feb9 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -82,6 +82,14 @@
                     </select>
                 </div>
             </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Animated Window Background
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
+                </div>
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     Window Transparency