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

* feat(lyrics): add static lyrics background

close #607

* add high GPU usage message

src/locale/lang/en.js

@@ -147,12 +147,17 @@ export default {
     clearSongsCache: 'Clear Songs Cache',
     cacheCount: 'Cached {song} songs ({size})',
     showLyricsTranslation: 'Show lyrics translation',
-    showLyricsDynamicBackground: 'Show lyrics dynamic background',
     minimizeToTray: 'Minimize to tray',
     showPlaylistsByAppleMusic: 'Show playlists by Apple Music',
     enableDiscordRichPresence: 'Enable Discord Rich Presence',
     enableGlobalShortcut: 'Enable Global Shortcut',
     showLibraryDefault: 'Show library default',
+    lyricsBackground: {
+      text: 'Show Lyrics Background',
+      off: 'Off',
+      on: 'On',
+      dynamic: 'Dynamic(High GPU usage)',
+    },
   },
   contextMenu: {
     play: 'Play',

src/locale/lang/tr.js

@@ -147,11 +147,16 @@ export default {
     clearSongsCache: 'Müzik çerezlerini temizle',
     cacheCount: 'Çerezlenen {song} Müzikler ({size})',
     showLyricsTranslation: 'Müzik sözlerinin çevirilerini göster',
-    showLyricsDynamicBackground: 'Dinamik arkaplanda müzik sözlerini gsöter',
     minimizeToTray: 'Küçült',
     showPlaylistsByAppleMusic: "Apple Music'in Çalma Listelerini Göster",
     enableDiscordRichPresence: 'Discord gösterimini aktifleştir',
     showLibraryDefault: 'Kitaplık Varsayılanını göster',
+    lyricsBackground: {
+      text: 'Şarkı Sözleri Arka Planını Göster',
+      off: 'kapalı',
+      on: 'açık',
+      dynamic: 'dinamik(Yüksek GPU kullanımı)',
+    },
   },
   contextMenu: {
     play: 'Oynat',

src/locale/lang/zh-CN.js

@@ -148,12 +148,17 @@ export default {
     clearSongsCache: '清除歌曲缓存',
     cacheCount: '已缓存 {song} 首 ({size})',
     showLyricsTranslation: '显示歌词翻译',
-    showLyricsDynamicBackground: '显示歌词动态背景',
     minimizeToTray: '最小化到托盘',
     showPlaylistsByAppleMusic: '首页显示来自 Apple Music 的歌单',
     enableDiscordRichPresence: '启用 Discord Rich Presence',
     enableGlobalShortcut: '启用全局快捷键',
     showLibraryDefault: '启动后显示音乐库',
+    lyricsBackground: {
+      text: '显示歌词背景',
+      off: '关闭',
+      on: '打开',
+      dynamic: '动态（GPU占用较高）',
+    },
   },
   contextMenu: {
     play: '播放',

src/store/initLocalStorage.js

@@ -19,7 +19,7 @@ let localStorage = {
     cacheLimit: false,
     nyancatStyle: false,
     showLyricsTranslation: true,
-    showLyricsDynamicBackground: false,
+    lyricsBackground: false,
     minimizeToTray: false,
     enableDiscordRichPresence: false,
     enableGlobalShortcut: true,

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"
+        v-if="settings.lyricsBackground !== false"
-        class="dynamic-background"
+        :class="[
+          'lyrics-background',
+          { 'dynamic-background': settings.lyricsBackground === 'dynamic' },
+        ]"
       >
         <div
           v-show="showLyrics"
@@ -379,19 +382,19 @@ export default {
   display: flex;
 }
 
-.dynamic-background {
+.lyrics-background {
-  --contrast-dynamic-background: 75%;
+  --contrast-lyrics-background: 75%;
-  --brightness-dynamic-background: 150%;
+  --brightness-lyrics-background: 150%;
 }
 
-[data-theme='dark'] .dynamic-background {
+[data-theme='dark'] .lyrics-background {
-  --contrast-dynamic-background: 125%;
+  --contrast-lyrics-background: 125%;
-  --brightness-dynamic-background: 50%;
+  --brightness-lyrics-background: 50%;
 }
 
-.dynamic-background {
+.lyrics-background {
-  filter: blur(50px) contrast(var(--contrast-dynamic-background))
+  filter: blur(50px) contrast(var(--contrast-lyrics-background))
-    brightness(var(--brightness-dynamic-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">{{
+          <div class="title">{{ $t('settings.lyricsBackground.text') }}</div>
-            $t('settings.showLyricsDynamicBackground')
-          }}</div>
         </div>
         <div class="right">
-          <div class="toggle">
+          <select v-model="lyricsBackground">
-            <input
+            <option :value="false">
-              id="show-lyrics-dynamic-background"
+              {{ $t('settings.lyricsBackground.off') }}
-              v-model="showLyricsDynamicBackground"
+            </option>
-              type="checkbox"
+            <option :value="true">
-              name="show-lyrics-dynamic-background"
+              {{ $t('settings.lyricsBackground.on') }}
-            />
+            </option>
-            <label for="show-lyrics-dynamic-background"></label>
+            <option value="dynamic">
-          </div>
+              {{ $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,
         });
       },