From 6922c716e266e111353acce1c884c9a1a79c27dc Mon Sep 17 00:00:00 2001
From: Map1en_ <maplenagisa@gmail.com>
Date: Mon, 26 Apr 2021 15:39:10 +0800
Subject: [PATCH] perf(lyrics): optimize GPU usage for dynamic lyric
 backgrounds (#602)

optimize GPU usage for dynamic lyric backgrounds

#484
---
 src/views/lyrics.vue | 46 +++++++++++++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index e975113..a5e30cb 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -5,16 +5,16 @@
         v-if="settings.showLyricsDynamicBackground"
         class="dynamic-background"
       >
-        <div v-show="showLyrics">
-          <div
-            class="top-right"
-            :style="{ backgroundImage: `url(${imageUrl})` }"
-          />
-          <div
-            class="bottom-left"
-            :style="{ backgroundImage: `url(${imageUrl})` }"
-          />
-        </div>
+        <div
+          v-show="this.$store.state.showLyrics"
+          class="top-right"
+          :style="{ backgroundImage: `url(${bgImageUrl})` }"
+        />
+        <div
+          v-show="this.$store.state.showLyrics"
+          class="bottom-left"
+          :style="{ backgroundImage: `url(${bgImageUrl})` }"
+        />
       </div>
       <div class="left-side">
         <div>
@@ -214,6 +214,20 @@ export default {
     imageUrl() {
       return this.player.currentTrack?.al?.picUrl + '?param=1024y1024';
     },
+    bgImageUrl() {
+      return this.player.currentTrack?.al?.picUrl + "?param=500y500";
+    },
+    progress: {
+      get() {
+        return this.playerRef.progress;
+      },
+      set(value) {
+        this.playerRef.setProgress(value);
+      },
+    },
+    progressMax() {
+      return this.playerRef.progressMax;
+    },
     lyricWithTranslation() {
       let ret = [];
       // 空内容的去除
@@ -373,14 +387,14 @@ export default {
 }
 
 .dynamic-background {
+  filter: blur(50px) opacity(0.6) contrast(var(--contrast-dynamic-background))
+    brightness(var(--brightness-dynamic-background));
   .top-right,
   .bottom-left {
     z-index: 0;
-    width: 140vw;
-    height: 140vw;
+    width: 14vw;
+    height: 14vw;
     position: absolute;
-    filter: blur(50px) opacity(0.6) contrast(var(--contrast-dynamic-background))
-      brightness(var(--brightness-dynamic-background));
     background-size: cover;
     animation: rotate 150s linear infinite;
   }
@@ -401,10 +415,10 @@ export default {
 
 @keyframes rotate {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(0deg) scale(10);
   }
   100% {
-    transform: rotate(360deg);
+    transform: rotate(360deg) scale(10);
   }
 }