From fa9acc9c894b9b08f1472743caa8b09e29e3e542 Mon Sep 17 00:00:00 2001
From: Map1en_ <maplenagisa@gmail.com>
Date: Tue, 27 Apr 2021 17:09:10 +0800
Subject: [PATCH] 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         |  7 ++++++-
 src/locale/lang/tr.js         |  7 ++++++-
 src/locale/lang/zh-CN.js      |  7 ++++++-
 src/store/initLocalStorage.js |  2 +-
 src/views/lyrics.vue          | 30 ++++++++++++++++++------------
 src/views/settings.vue        | 30 +++++++++++++++---------------
 6 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 9065dcc..53d476b 100644
--- a/src/locale/lang/en.js
+++ b/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',
diff --git a/src/locale/lang/tr.js b/src/locale/lang/tr.js
index 69789b4..71fd59e 100644
--- a/src/locale/lang/tr.js
+++ b/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',
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 8b20a7b..135d11f 100644
--- a/src/locale/lang/zh-CN.js
+++ b/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: '播放',
diff --git a/src/store/initLocalStorage.js b/src/store/initLocalStorage.js
index 17a9ed1..01aa96f 100644
--- a/src/store/initLocalStorage.js
+++ b/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,
diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index de62390..54b4e76 100644
--- a/src/views/lyrics.vue
+++ b/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);
diff --git a/src/views/settings.vue b/src/views/settings.vue
index d273962..ba6d96e 100644
--- a/src/views/settings.vue
+++ b/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,
         });
       },