github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/930/merge
lyswhut 2022-03-05 16:06:45 +08:00
parent 4629d4cd3e
commit cdc819fbe8
11 changed files with 150 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
publish/changeLog.md
View File

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

9
src/common/defaultSetting.js
View File

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

9
src/lang/en-us.json
View File

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

9
src/lang/zh-cn.json
View File

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

9
src/lang/zh-tw.json
View File

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

62
src/renderer/components/core/PlayDetail/LyricPlayer.vue
View File

@ -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;

2
src/renderer/components/core/PlayDetail/index.vue
View File

@ -297,7 +297,7 @@ export default {
.right {
flex-basis: 30%;
.lyric {
font-size: 13px;
font-size: 13px !important;
}
.lyricSelectContent {
font-size: 14px;

3
src/renderer/store/mutations.js
View File

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

6
src/renderer/views/setting/Setting.vue
View File

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

39
src/renderer/views/setting/components/SettingPlayDetail.vue Normal file
View File

@ -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>

7
src/renderer/views/setting/setting.js
View File

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