新增对播放详情页歌词大小、是否缩放、对齐方式的设置

publish/changeLog.md

@@ -1,3 +1,7 @@
+### 新增
+
+- 新增对播放详情页歌词大小、是否缩放、对齐方式的设置，可以去设置-播放详情页设置查看
+
 ### 优化
 
 - 优化Windows任务栏缩略图工具栏控制按钮在浅色任务栏下的显示效果

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,

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",

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": "显示歌词翻译",

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": "顯示歌詞翻譯",

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 {
+        // span {
-          // color: @color-theme;
+        //   // color: @color-theme;
-          font-size: 1.1em;
+        //   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;

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;

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
   },

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
     })

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>

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,