perf(lyrics): optimize GPU usage for dynamic lyric backgrounds (#602)

optimize GPU usage for dynamic lyric backgrounds

#484

src/views/lyrics.vue

@@ -5,17 +5,17 @@
         v-if="settings.showLyricsDynamicBackground"
         class="dynamic-background"
       >
-        <div v-show="showLyrics">
         <div
+          v-show="this.$store.state.showLyrics"
           class="top-right"
-            :style="{ backgroundImage: `url(${imageUrl})` }"
+          :style="{ backgroundImage: `url(${bgImageUrl})` }"
         />
         <div
+          v-show="this.$store.state.showLyrics"
           class="bottom-left"
-            :style="{ backgroundImage: `url(${imageUrl})` }"
+          :style="{ backgroundImage: `url(${bgImageUrl})` }"
         />
       </div>
-      </div>
       <div class="left-side">
         <div>
           <div class="cover">
@@ -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;
+    width: 14vw;
-    height: 140vw;
+    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);
   }
 }