feat(lyrics): add static lyrics background (#614)

* feat(lyrics): add static lyrics background

close #607

* add high GPU usage message

src/views/lyrics.vue

@@ -2,8 +2,11 @@
   <transition name="slide-up">
     <div class="lyrics-page" :class="{ 'no-lyric': noLyric }">
       <div
-        v-if="settings.showLyricsDynamicBackground"
-        class="dynamic-background"
+        v-if="settings.lyricsBackground !== false"
+        :class="[
+          'lyrics-background',
+          { 'dynamic-background': settings.lyricsBackground === 'dynamic' },
+        ]"
       >
         <div
           v-show="showLyrics"
@@ -379,19 +382,19 @@ export default {
   display: flex;
 }
 
-.dynamic-background {
-  --contrast-dynamic-background: 75%;
-  --brightness-dynamic-background: 150%;
+.lyrics-background {
+  --contrast-lyrics-background: 75%;
+  --brightness-lyrics-background: 150%;
 }
 
-[data-theme='dark'] .dynamic-background {
-  --contrast-dynamic-background: 125%;
-  --brightness-dynamic-background: 50%;
+[data-theme='dark'] .lyrics-background {
+  --contrast-lyrics-background: 125%;
+  --brightness-lyrics-background: 50%;
 }
 
-.dynamic-background {
-  filter: blur(50px) contrast(var(--contrast-dynamic-background))
-    brightness(var(--brightness-dynamic-background));
+.lyrics-background {
+  filter: blur(50px) contrast(var(--contrast-lyrics-background))
+    brightness(var(--brightness-lyrics-background));
   position: absolute;
   height: 100vh;
   width: 100vw;
@@ -403,7 +406,6 @@ export default {
     opacity: 0.6;
     position: absolute;
     background-size: cover;
-    animation: rotate 150s linear infinite;
   }
 
   .top-right {
@@ -420,6 +422,10 @@ export default {
   }
 }
 
+.dynamic-background > div {
+  animation: rotate 150s linear infinite;
+}
+
 @keyframes rotate {
   0% {
     transform: rotate(0deg);

src/views/settings.vue

@@ -167,20 +167,20 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title">{{
-            $t('settings.showLyricsDynamicBackground')
-          }}</div>
+          <div class="title">{{ $t('settings.lyricsBackground.text') }}</div>
         </div>
         <div class="right">
-          <div class="toggle">
-            <input
-              id="show-lyrics-dynamic-background"
-              v-model="showLyricsDynamicBackground"
-              type="checkbox"
-              name="show-lyrics-dynamic-background"
-            />
-            <label for="show-lyrics-dynamic-background"></label>
-          </div>
+          <select v-model="lyricsBackground">
+            <option :value="false">
+              {{ $t('settings.lyricsBackground.off') }}
+            </option>
+            <option :value="true">
+              {{ $t('settings.lyricsBackground.on') }}
+            </option>
+            <option value="dynamic">
+              {{ $t('settings.lyricsBackground.dynamic') }}
+            </option>
+          </select>
         </div>
       </div>
       <div class="item">
@@ -564,13 +564,13 @@ export default {
         });
       },
     },
-    showLyricsDynamicBackground: {
+    lyricsBackground: {
       get() {
-        return this.settings.showLyricsDynamicBackground;
+        return this.settings.lyricsBackground || false;
       },
       set(value) {
         this.$store.commit('updateSettings', {
-          key: 'showLyricsDynamicBackground',
+          key: 'lyricsBackground',
           value,
         });
       },