From cdc819fbe89464ce0824b48876967b5ad73e1bb1 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Sat, 5 Mar 2022 16:06:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AF=B9=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E6=AD=8C=E8=AF=8D=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E3=80=81=E6=98=AF=E5=90=A6=E7=BC=A9=E6=94=BE=E3=80=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E6=96=B9=E5=BC=8F=E7=9A=84=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |  4 ++
 src/common/defaultSetting.js                  |  9 ++-
 src/lang/en-us.json                           |  9 +++
 src/lang/zh-cn.json                           |  9 +++
 src/lang/zh-tw.json                           |  9 +++
 .../core/PlayDetail/LyricPlayer.vue           | 62 ++++++++++++++++---
 .../components/core/PlayDetail/index.vue      |  2 +-
 src/renderer/store/mutations.js               |  3 +
 src/renderer/views/setting/Setting.vue        |  6 ++
 .../setting/components/SettingPlayDetail.vue  | 39 ++++++++++++
 src/renderer/views/setting/setting.js         |  7 +++
 11 files changed, 150 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/views/setting/components/SettingPlayDetail.vue

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 9f0b9efe..fa0cde30 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,3 +1,7 @@
+### 新增
+
+- 新增对播放详情页歌词大小、是否缩放、对齐方式的设置，可以去设置-播放详情页设置查看
+
 ### 优化
 
 - 优化Windows任务栏缩略图工具栏控制按钮在浅色任务栏下的显示效果
diff --git a/src/common/defaultSetting.js b/src/common/defaultSetting.js
index 4f6374b9..cb4dbb0a 100644
--- a/src/common/defaultSetting.js
+++ b/src/common/defaultSetting.js
@@ -2,7 +2,7 @@ const path = require('path')
 const os = require('os')
 
 const defaultSetting = {
-  version: '1.0.51',
+  version: '1.0.52',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -19,6 +19,13 @@ const defaultSetting = {
     waitPlayEndStop: true,
     waitPlayEndStopTime: '',
   },
+  playDetail: {
+    isZoomActiveLrc: true,
+    style: {
+      fontSize: 100,
+      align: 'center',
+    },
+  },
   desktopLyric: {
     enable: false,
     isLock: false,
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index e0b2f8b6..02c3f279 100644
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@@ -323,6 +323,15 @@
   "setting__other_tray_theme_native": "White",
   "setting__other_tray_theme_origin": "Primary Color",
   "setting__play": "Play",
+  "setting__play_detail": "Play details page settings",
+  "setting__play_detail_align": "Lyric Alignment",
+  "setting__play_detail_align_center": "Centered",
+  "setting__play_detail_align_left": "Left",
+  "setting__play_detail_align_right": "Right",
+  "setting__play_detail_font_size": "Lyrics font size (you can use the keyboard - adjust the font size on the playback details page)",
+  "setting__play_detail_font_size_current": "Current font size: {size}",
+  "setting__play_detail_font_size_reset": "Reset",
+  "setting__play_detail_font_zoom": "Zoom the currently playing lyrics",
   "setting__play_lyric_lxlrc": "Use Karaoke-style lyrics playback (if supported)",
   "setting__play_lyric_s2t": "Convert the playing and downloading lyrics to Traditional Chinese",
   "setting__play_lyric_transition": "Show lyrics translation",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 1440e3aa..e271a2be 100644
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@@ -323,6 +323,15 @@
   "setting__other_tray_theme_native": "白色",
   "setting__other_tray_theme_origin": "原色",
   "setting__play": "播放设置",
+  "setting__play_detail": "播放详情页设置",
+  "setting__play_detail_align": "歌词对齐方式",
+  "setting__play_detail_align_center": "居中",
+  "setting__play_detail_align_left": "居左",
+  "setting__play_detail_align_right": "居右",
+  "setting__play_detail_font_size": "歌词字体大小（可以在播放详情页使用键盘的+-调整字体大小）",
+  "setting__play_detail_font_size_current": "当前字体大小：{size}",
+  "setting__play_detail_font_size_reset": "重置",
+  "setting__play_detail_font_zoom": "缩放当前正在播放的歌词",
   "setting__play_lyric_lxlrc": "使用卡拉OK式歌词播放（如果支持）",
   "setting__play_lyric_s2t": "将播放与下载的歌词转换为繁体中文",
   "setting__play_lyric_transition": "显示歌词翻译",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index bbb48883..992a8c68 100644
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@@ -323,6 +323,15 @@
   "setting__other_tray_theme_native": "白色",
   "setting__other_tray_theme_origin": "原色",
   "setting__play": "播放設置",
+  "setting__play_detail": "播放詳情頁設置",
+  "setting__play_detail_align": "歌詞對齊方式",
+  "setting__play_detail_align_center": "居中",
+  "setting__play_detail_align_left": "居左",
+  "setting__play_detail_align_right": "居右",
+  "setting__play_detail_font_size": "歌詞字體大小（可以在播放詳情頁使用鍵盤的 -調整字體大小）",
+  "setting__play_detail_font_size_current": "當前字體大小：{size}",
+  "setting__play_detail_font_size_reset": "重置",
+  "setting__play_detail_font_zoom": "縮放當前正在播放的歌詞",
   "setting__play_lyric_lxlrc": "使用卡拉OK式歌詞播放（如果支持）",
   "setting__play_lyric_s2t": "將播放與下載的歌詞轉換為繁體中文",
   "setting__play_lyric_transition": "顯示歌詞翻譯",
diff --git a/src/renderer/components/core/PlayDetail/LyricPlayer.vue b/src/renderer/components/core/PlayDetail/LyricPlayer.vue
index 1db3cb57..f5846b33 100644
--- a/src/renderer/components/core/PlayDetail/LyricPlayer.vue
+++ b/src/renderer/components/core/PlayDetail/LyricPlayer.vue
@@ -1,6 +1,6 @@
 <template>
 <div :class="['right', $style.right]">
-  <div :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
+  <div :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
     <div :class="$style.lyricSpace"></div>
     <div ref="dom_lyric_text"></div>
     <div :class="$style.lyricSpace"></div>
@@ -21,11 +21,13 @@
 import { clipboardWriteText } from '@renderer/utils'
 import { lyric } from '@renderer/core/share/lyric'
 import { isPlay, isShowLrcSelectContent } from '@renderer/core/share/player'
-// import { ref } from '@renderer/utils/vueTools'
+import { onMounted, onBeforeUnmount, useCommit, useRefGetter, computed } from '@renderer/utils/vueTools'
 import useLyric from '@renderer/utils/compositions/useLyric'
 
 export default {
   setup() {
+    const setting = useRefGetter('setting')
+    const setPlayDetailLyricFont = useCommit('setPlayDetailLyricFont')
     const {
       dom_lyric,
       dom_lyric_text,
@@ -33,6 +35,37 @@ export default {
       handleLyricMouseDown,
       handleWheel,
     } = useLyric({ isPlay, lyric })
+
+    const fontSizeUp = () => {
+      if (setting.value.playDetail.style.fontSize >= 200) return
+      setPlayDetailLyricFont(setting.value.playDetail.style.fontSize + 1)
+    }
+    const fontSizeDown = () => {
+      if (setting.value.playDetail.style.fontSize <= 70) return
+      setPlayDetailLyricFont(setting.value.playDetail.style.fontSize - 1)
+    }
+
+    const lrcStyles = computed(() => {
+      return {
+        fontSize: setting.value.playDetail.style.fontSize / 100 + 'rem',
+        textAlign: setting.value.playDetail.style.align,
+      }
+    })
+    const isZoomActiveLrc = computed(() => setting.value.playDetail.isZoomActiveLrc)
+
+    onMounted(() => {
+      window.eventHub.on('key_shift++_down', fontSizeUp)
+      window.eventHub.on('key_numadd_down', fontSizeUp)
+      window.eventHub.on('key_-_down', fontSizeDown)
+      window.eventHub.on('key_numsub_down', fontSizeDown)
+    })
+    onBeforeUnmount(() => {
+      window.eventHub.off('key_shift++_down', fontSizeUp)
+      window.eventHub.off('key_numadd_down', fontSizeUp)
+      window.eventHub.off('key_-_down', fontSizeDown)
+      window.eventHub.off('key_numsub_down', fontSizeDown)
+    })
+
     return {
       dom_lyric,
       dom_lyric_text,
@@ -41,6 +74,8 @@ export default {
       handleWheel,
       lyric,
       isShowLrcSelectContent,
+      lrcStyles,
+      isZoomActiveLrc,
     }
   },
   methods: {
@@ -119,13 +154,12 @@ export default {
           color: @color-theme;
         }
         .translation {
-          font-size: .94em;
           color: @color-theme;
         }
-        span {
-          // color: @color-theme;
-          font-size: 1.1em;
-        }
+        // span {
+        //   // color: @color-theme;
+        //   font-size: 1.1em;
+        // }
       }
 
       span {
@@ -153,6 +187,20 @@ export default {
   //   font-size: 1.2em;
   // }
 }
+.lrcActiveZoom {
+  :global {
+    .lrc-content {
+      &.active {
+        .translation {
+          font-size: .94em;
+        }
+        span {
+          font-size: 1.1em;
+        }
+      }
+    }
+  }
+}
 .lyricSelectContent {
   position: absolute;
   left: 0;
diff --git a/src/renderer/components/core/PlayDetail/index.vue b/src/renderer/components/core/PlayDetail/index.vue
index e364623f..be11ff11 100644
--- a/src/renderer/components/core/PlayDetail/index.vue
+++ b/src/renderer/components/core/PlayDetail/index.vue
@@ -297,7 +297,7 @@ export default {
       .right {
         flex-basis: 30%;
         .lyric {
-          font-size: 13px;
+          font-size: 13px !important;
         }
         .lyricSelectContent {
           font-size: 14px;
diff --git a/src/renderer/store/mutations.js b/src/renderer/store/mutations.js
index 9b28610b..b909451e 100644
--- a/src/renderer/store/mutations.js
+++ b/src/renderer/store/mutations.js
@@ -35,6 +35,9 @@ export default {
       state.setting.player.volume = val
     }
   },
+  setPlayDetailLyricFont(state, val) {
+    state.setting.playDetail.style.fontSize = val
+  },
   setPlayNextMode(state, val) {
     state.setting.player.togglePlayMethod = val
   },
diff --git a/src/renderer/views/setting/Setting.vue b/src/renderer/views/setting/Setting.vue
index 5de910cd..818aa629 100644
--- a/src/renderer/views/setting/Setting.vue
+++ b/src/renderer/views/setting/Setting.vue
@@ -20,6 +20,7 @@
     <dl ref="dom_setting_list">
       <SettingBasic />
       <SettingPlay />
+      <SettingPlayDetail />
       <SettingDesktopLyric />
       <SettingSearch />
       <SettingList />
@@ -43,6 +44,7 @@ import { currentStting } from './setting'
 
 import SettingBasic from './components/SettingBasic'
 import SettingPlay from './components/SettingPlay'
+import SettingPlayDetail from './components/SettingPlayDetail'
 import SettingDesktopLyric from './components/SettingDesktopLyric'
 import SettingSearch from './components/SettingSearch'
 import SettingList from './components/SettingList'
@@ -61,6 +63,7 @@ export default {
   components: {
     SettingBasic,
     SettingPlay,
+    SettingPlayDetail,
     SettingDesktopLyric,
     SettingSearch,
     SettingList,
@@ -94,6 +97,9 @@ export default {
     watch(() => setting.value.player.mediaDeviceId, val => {
       currentStting.value.player.mediaDeviceId = val
     })
+    watch(() => setting.value.playDetail.style.fontSize, val => {
+      currentStting.value.playDetail.style.fontSize = val
+    })
     watch(() => setting.value.player.isMute, val => {
       currentStting.value.player.isMute = val
     })
diff --git a/src/renderer/views/setting/components/SettingPlayDetail.vue b/src/renderer/views/setting/components/SettingPlayDetail.vue
new file mode 100644
index 00000000..c01ca80e
--- /dev/null
+++ b/src/renderer/views/setting/components/SettingPlayDetail.vue
@@ -0,0 +1,39 @@
+<template lang="pug">
+dt#play_detail {{$t('setting__play_detail')}}
+dd
+  .gap-top
+    base-checkbox(id="setting_play_detail_font_zoom_enable" v-model="currentStting.playDetail.isZoomActiveLrc" :label="$t('setting__play_detail_font_zoom')")
+
+dd
+  h3#play_detail_align {{$t('setting__play_detail_align')}}
+  div
+    base-checkbox.gap-left(id="setting_play_detail_align_left" v-model="currentStting.playDetail.style.align" value="left" :label="$t('setting__play_detail_align_left')")
+    base-checkbox.gap-left(id="setting_play_detail_align_center" v-model="currentStting.playDetail.style.align" value="center" :label="$t('setting__play_detail_align_center')")
+    //- base-checkbox.gap-left(id="setting_play_detail_align_right" v-model="currentStting.playDetail.style.align" value="right" :label="$t('setting__play_detail_align_right')")
+
+dd
+  h3#play_detail_align {{$t('setting__play_detail_font_size')}}
+  div
+    p.gap-top {{$t('setting__play_detail_font_size_current', { size: currentStting.playDetail.style.fontSize })}}
+    base-btn.gap-top.btn(min @click="handleResetFont") {{$t('setting__play_detail_font_size_reset')}}
+
+</template>
+
+<script>
+// import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'SettingPlayDetail',
+  setup() {
+    const handleResetFont = () => {
+      currentStting.value.playDetail.style.fontSize = 100
+    }
+
+    return {
+      currentStting,
+      handleResetFont,
+    }
+  },
+}
+</script>
diff --git a/src/renderer/views/setting/setting.js b/src/renderer/views/setting/setting.js
index 0f7c9567..3f5ac86c 100644
--- a/src/renderer/views/setting/setting.js
+++ b/src/renderer/views/setting/setting.js
@@ -11,6 +11,13 @@ export const currentStting = ref({
     waitPlayEndStop: true,
     waitPlayEndStopTime: 0,
   },
+  playDetail: {
+    isZoomActiveLrc: true,
+    style: {
+      fontSize: 100,
+      align: 'center',
+    },
+  },
   desktopLyric: {
     enable: false,
     isLock: false,