feat: Lyric font size adjustment | 歌词字体大小可调节 (#398)

* feat: Lyric font size adjustment | 歌词字体大小可调节

src/locale/lang/en.js

@@ -123,6 +123,13 @@ export default {
       high: "High",
       lossless: "Lossless",
     },
+    lyricFontSize: {
+      text: "Lyric Font Size",
+      small: "Small",
+      medium: "Medium",
+      large: "Large(Default)",
+      xlarge: "X-Large",
+    },
     deviceSelector: "Audio Output Device",
     permissionRequired: "Microphone Permission Required",
     appearance: {

src/locale/lang/zh-CN.js

@@ -124,6 +124,13 @@ export default {
       high: "极高",
       lossless: "无损",
     },
+    lyricFontSize: {
+      text: "歌词字体大小",
+      small: "小",
+      medium: "中",
+      large: "大(默认)",
+      xlarge: "超大",
+    },
     deviceSelector: "音频输出设备",
     permissionRequired: "需要麦克风权限",
     appearance: {

src/store/initLocalStorage.js

@@ -7,6 +7,7 @@ let localStorage = {
     lang: null,
     appearance: "auto",
     musicQuality: 320000,
+    lyricFontSize: 28,
     outputDevice: "default",
     showGithubIcon: true,
     showPlaylistsByAppleMusic: true,

src/store/mutations.js

@@ -9,6 +9,9 @@ export default {
   changeMusicQuality(state, value) {
     state.settings.musicQuality = value;
   },
+  changeLyricFontSize(state, value) {
+    state.settings.lyricFontSize = value;
+  },
   changeOutputDevice(state, deviceId) {
     state.settings.outputDevice = deviceId;
   },

src/views/lyrics.vue

@@ -128,14 +128,18 @@
       </div>
       <div class="right-side">
         <transition name="slide-fade">
-          <div class="lyrics-container" ref="lyricsContainer" v-show="!noLyric">
+          <div
+            class="lyrics-container"
+            :style="lyricFontSize"
+            ref="lyricsContainer"
+            v-show="!noLyric"
+          >
             <div class="line" id="line-1"></div>
             <div
               class="line"
               :class="{
                 highlight: highlightLyricIndex === index,
               }"
-              :style="lineStyles"
               v-for="(line, index) in lyricWithTranslation"
               :key="index"
               :id="`line${index}`"
@@ -228,12 +232,9 @@ export default {
       }
       return ret;
     },
-    haveTranslation() {
+    lyricFontSize() {
-      return this.tlyric.length > 0;
-    },
-    lineStyles() {
       return {
-        fontSize: this.haveTranslation ? "28px" : "36px",
+        fontSize: this.$store.state.settings.lyricFontSize + "px",
       };
     },
     playerRef() {

src/views/settings.vue

@@ -74,6 +74,27 @@
           </select>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title"> {{ $t("settings.lyricFontSize.text") }} </div>
+        </div>
+        <div class="right">
+          <select v-model="lyricFontSize">
+            <option value="14">
+              {{ $t("settings.lyricFontSize.small") }} - 14px
+            </option>
+            <option value="22">
+              {{ $t("settings.lyricFontSize.medium") }} - 22px
+            </option>
+            <option value="28">
+              {{ $t("settings.lyricFontSize.large") }} - 28px
+            </option>
+            <option value="36">
+              {{ $t("settings.lyricFontSize.xlarge") }} - 36px
+            </option>
+          </select>
+        </div>
+      </div>
       <div class="item">
         <div class="left">
           <div class="title"> {{ $t("settings.deviceSelector") }} </div>
@@ -294,6 +315,15 @@ export default {
         this.clearCache("tracks");
       },
     },
+    lyricFontSize: {
+      get() {
+        if (this.settings.lyricFontSize === undefined) return 28;
+        return this.settings.lyricFontSize;
+      },
+      set(value) {
+        this.$store.commit("changeLyricFontSize", value);
+      },
+    },
     outputDevice: {
       get() {
         if (this.withoutAudioPriviledge === true) this.getAllOutputDevices();