添加桌面歌词滚动对齐方式、歌词间距设置

pull/1050/head
lyswhut 2022-10-29 15:20:59 +08:00
parent 72418194e9
commit 07898cdfd6
15 changed files with 100 additions and 29 deletions

View File

@ -16,7 +16,7 @@
- 新增歌词时是否歌词翻译、罗马音设置,默认关闭,可以去设置-下载设置开启(#344
- 新增界面字体大小设置
- 桌面歌词新增竖排歌词显示功能(#971
- 桌面歌词新增歌词对齐方式、是否不允许歌词换行、歌词颜色设置
- 桌面歌词新增歌词对齐方式、是否不允许歌词换行、歌词颜色、滚动对齐方式、歌词间距设置
- 桌面歌词新增歌曲频谱显示得益于主窗口与桌面歌词进程通信的改进可以将此功能以CPU使用率“相对较低”的方式带到桌面歌词中
- 添加kg源罗马音歌词的支持

View File

@ -50,14 +50,16 @@ const defaultSetting: LX.AppSetting = {
'desktopLyric.y': null,
'desktopLyric.isLockScreen': true,
'desktopLyric.isDelayScroll': true,
'desktopLyric.scrollAlign': 'center',
'desktopLyric.isHoverHide': false,
'desktopLyric.direction': 'horizontal',
'desktopLyric.style.align': 'center',
'desktopLyric.style.font': '',
'desktopLyric.style.fontSize': 20,
'desktopLyric.style.lineGap': 15,
'desktopLyric.style.lyricUnplayColor': 'rgba(255, 255, 255, 1)',
'desktopLyric.style.lyricPlayedColor': 'rgba(7, 197, 86, 1)',
'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.14)',
'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.15)',
// 'desktopLyric.style.fontWeight': false,
'desktopLyric.style.opacity': 95,
'desktopLyric.style.ellipsis': false,

View File

@ -222,6 +222,11 @@ declare namespace LX {
*/
'desktopLyric.isDelayScroll': boolean
/**
*
*/
'desktopLyric.scrollAlign': 'top' | 'center'
/**
*
*/
@ -233,7 +238,7 @@ declare namespace LX {
'desktopLyric.direction': 'horizontal' | 'vertical'
/**
*
*
*/
'desktopLyric.style.align': 'center' | 'left' | 'right'
@ -247,6 +252,11 @@ declare namespace LX {
*/
'desktopLyric.style.fontSize': number
/**
*
*/
'desktopLyric.style.lineGap': number
/**
*
*/

View File

@ -12,11 +12,13 @@ declare namespace LX {
'desktopLyric.y': LX.AppSetting['desktopLyric.y']
'desktopLyric.isLockScreen': LX.AppSetting['desktopLyric.isLockScreen']
'desktopLyric.isDelayScroll': LX.AppSetting['desktopLyric.isDelayScroll']
'desktopLyric.scrollAlign': LX.AppSetting['desktopLyric.scrollAlign']
'desktopLyric.isHoverHide': LX.AppSetting['desktopLyric.isHoverHide']
'desktopLyric.direction': LX.AppSetting['desktopLyric.direction']
'desktopLyric.style.align': LX.AppSetting['desktopLyric.style.align']
'desktopLyric.style.font': LX.AppSetting['desktopLyric.style.font']
'desktopLyric.style.fontSize': LX.AppSetting['desktopLyric.style.fontSize']
'desktopLyric.style.lineGap': LX.AppSetting['desktopLyric.style.lineGap']
'desktopLyric.style.lyricUnplayColor': LX.AppSetting['desktopLyric.style.lyricUnplayColor']
'desktopLyric.style.lyricPlayedColor': LX.AppSetting['desktopLyric.style.lyricPlayedColor']
'desktopLyric.style.lyricShadowColor': LX.AppSetting['desktopLyric.style.lyricShadowColor']

View File

@ -70,11 +70,6 @@
"duplicate_list_tip": "You have favorited this list [{name}] before, do you need to update the songs in it?",
"export": "Export",
"fullscreen_exit": "Exit Full Screen",
"theme_edit_modal__copy": "Copy theme",
"theme_edit_modal__remove": "delete",
"theme_edit_modal__remove_tip": "Do you really want to remove this thread?",
"theme_edit_modal__save_new": "Save new",
"theme_edit_modal__select_bg_file": "Choose a background image",
"history_clear": "Clear History",
"history_remove": "Right click to remove this entry",
"history_search": "History Searches",
@ -315,9 +310,15 @@
"setting__desktop_lyric_font_default": "Default",
"setting__desktop_lyric_font_weight": "Bold font",
"setting__desktop_lyric_hover_hide": "Reduce the transparency of lyrics when the mouse moves into the lyrics area (this feature has platform compatibility issues)",
"setting__desktop_lyric_line_gap": "Lyric spacing ({num})",
"setting__desktop_lyric_line_gap_add": "increase the spacing",
"setting__desktop_lyric_line_gap_dec": "Reduce spacing",
"setting__desktop_lyric_lock": "Lock lyrics",
"setting__desktop_lyric_lock_screen": "It is not allowed to drag the lyrics window out of the main screen",
"setting__desktop_lyric_played_color": "color played",
"setting__desktop_lyric_scroll_align": "now playing lyrics scroll position",
"setting__desktop_lyric_scroll_align_center": "Center",
"setting__desktop_lyric_scroll_align_top": "Top",
"setting__desktop_lyric_shadow_color": "shadow color",
"setting__desktop_lyric_unplay_color": "Color not playing",
"setting__download": "Download",
@ -521,6 +522,7 @@
"theme_edit_modal__bg_image_remove": "remove background image",
"theme_edit_modal__close_btn": "Closure",
"theme_edit_modal__control_btn": "Left control button color",
"theme_edit_modal__copy": "Copy theme",
"theme_edit_modal__dark": "Dark theme",
"theme_edit_modal__hide_btn": "Hide play details page",
"theme_edit_modal__main_bg": "Content area background color",
@ -531,6 +533,10 @@
"theme_edit_modal__pick_save": "Confirm",
"theme_edit_modal__preview": "Preview theme",
"theme_edit_modal__primary": "Theme color",
"theme_edit_modal__remove": "delete",
"theme_edit_modal__remove_tip": "Do you really want to remove this thread?",
"theme_edit_modal__save_new": "Save new",
"theme_edit_modal__select_bg_file": "Choose a background image",
"theme_edit_modal__title": "Edit topic",
"theme_green": "Green",
"theme_grey": "Grey",

View File

@ -70,11 +70,6 @@
"duplicate_list_tip": "你之前已收藏过该列表 [{name}],是否需要更新里面的歌曲?",
"export": "导出",
"fullscreen_exit": "退出全屏",
"theme_edit_modal__copy": "复制主题",
"theme_edit_modal__remove": "删除",
"theme_edit_modal__remove_tip": "是否真的要移除这个主题?",
"theme_edit_modal__save_new": "另存",
"theme_edit_modal__select_bg_file": "选择背景图片",
"history_clear": "清空搜索历史",
"history_remove": "右击移除该历史",
"history_search": "历史搜索",
@ -317,9 +312,15 @@
"setting__desktop_lyric_font_default": "默认",
"setting__desktop_lyric_font_weight": "加粗字体",
"setting__desktop_lyric_hover_hide": "鼠标移入歌词区域时降低歌词透明度(此功能存在平台兼容性问题)",
"setting__desktop_lyric_line_gap": "歌词间距({num}",
"setting__desktop_lyric_line_gap_add": "加大间距",
"setting__desktop_lyric_line_gap_dec": "减小间距",
"setting__desktop_lyric_lock": "锁定歌词",
"setting__desktop_lyric_lock_screen": "不允许歌词窗口拖出主屏幕之外",
"setting__desktop_lyric_played_color": "已播放颜色",
"setting__desktop_lyric_scroll_align": "正在播放歌词滚动位置",
"setting__desktop_lyric_scroll_align_center": "中心",
"setting__desktop_lyric_scroll_align_top": "顶部",
"setting__desktop_lyric_shadow_color": "阴影颜色",
"setting__desktop_lyric_unplay_color": "未播放颜色",
"setting__download": "下载设置",
@ -523,6 +524,7 @@
"theme_edit_modal__bg_image_remove": "移除背景图片",
"theme_edit_modal__close_btn": "关闭",
"theme_edit_modal__control_btn": "左侧控制按钮颜色",
"theme_edit_modal__copy": "复制主题",
"theme_edit_modal__dark": "暗色主题",
"theme_edit_modal__hide_btn": "隐藏播放详情页",
"theme_edit_modal__main_bg": "内容区域背景颜色",
@ -533,6 +535,10 @@
"theme_edit_modal__pick_save": "确认",
"theme_edit_modal__preview": "预览主题",
"theme_edit_modal__primary": "主题色",
"theme_edit_modal__remove": "删除",
"theme_edit_modal__remove_tip": "是否真的要移除这个主题?",
"theme_edit_modal__save_new": "另存",
"theme_edit_modal__select_bg_file": "选择背景图片",
"theme_edit_modal__title": "编辑主题",
"theme_green": "绿意盎然",
"theme_grey": "灰常美丽",

View File

@ -70,11 +70,6 @@
"duplicate_list_tip": "你之前已收藏過該列表 [{name}],是否需要更新里面的歌曲?",
"export": "導出",
"fullscreen_exit": "退出全屏",
"theme_edit_modal__copy": "複製主題",
"theme_edit_modal__remove": "刪除",
"theme_edit_modal__remove_tip": "是否真的要移除這個主題?",
"theme_edit_modal__save_new": "另存",
"theme_edit_modal__select_bg_file": "選擇背景圖片",
"history_clear": "清空搜索歷史",
"history_remove": "右擊移除該歷史",
"history_search": "歷史搜索",
@ -316,9 +311,15 @@
"setting__desktop_lyric_font_default": "默認",
"setting__desktop_lyric_font_weight": "加粗字體",
"setting__desktop_lyric_hover_hide": "鼠標移入歌詞區域時降低歌詞透明度(此功能存在平台兼容性問題)",
"setting__desktop_lyric_line_gap": "歌詞間距({num}",
"setting__desktop_lyric_line_gap_add": "加大間距",
"setting__desktop_lyric_line_gap_dec": "減小間距",
"setting__desktop_lyric_lock": "鎖定歌詞",
"setting__desktop_lyric_lock_screen": "不允許歌詞窗口拖出主屏幕之外",
"setting__desktop_lyric_played_color": "已播放顏色",
"setting__desktop_lyric_scroll_align": "正在播放歌詞滾動位置",
"setting__desktop_lyric_scroll_align_center": "中心",
"setting__desktop_lyric_scroll_align_top": "頂部",
"setting__desktop_lyric_shadow_color": "陰影顏色",
"setting__desktop_lyric_unplay_color": "未播放顏色",
"setting__download": "下載設置",
@ -521,6 +522,7 @@
"theme_edit_modal__bg_image_remove": "移除背景圖片",
"theme_edit_modal__close_btn": "關閉",
"theme_edit_modal__control_btn": "左側控制按鈕顏色",
"theme_edit_modal__copy": "複製主題",
"theme_edit_modal__dark": "暗色主題",
"theme_edit_modal__hide_btn": "隱藏播放詳情頁",
"theme_edit_modal__main_bg": "內容區域背景顏色",
@ -531,6 +533,10 @@
"theme_edit_modal__pick_save": "確認",
"theme_edit_modal__preview": "預覽主題",
"theme_edit_modal__primary": "主題色",
"theme_edit_modal__remove": "刪除",
"theme_edit_modal__remove_tip": "是否真的要移除這個主題?",
"theme_edit_modal__save_new": "另存",
"theme_edit_modal__select_bg_file": "選擇背景圖片",
"theme_edit_modal__title": "編輯主題",
"theme_green": "綠意盎然",
"theme_grey": "灰常美麗",

View File

@ -87,6 +87,7 @@ export const watchConfigKeys = [
'desktopLyric.y',
'desktopLyric.isLockScreen',
'desktopLyric.isDelayScroll',
'desktopLyric.scrollAlign',
'desktopLyric.isHoverHide',
'desktopLyric.direction',
'desktopLyric.style.align',
@ -95,6 +96,7 @@ export const watchConfigKeys = [
'desktopLyric.style.lyricShadowColor',
'desktopLyric.style.font',
'desktopLyric.style.fontSize',
'desktopLyric.style.lineGap',
// 'desktopLyric.style.fontWeight',
'desktopLyric.style.opacity',
'desktopLyric.style.ellipsis',

View File

@ -25,6 +25,8 @@ export default {
fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
opacity: setting['desktopLyric.style.opacity'] / 100,
textAlign: setting['desktopLyric.style.align'],
'--line-gap': setting['desktopLyric.style.lineGap'] + 'px',
'--line-extended-gap': (setting['desktopLyric.style.lineGap'] / 3).toFixed(2) + 'px',
}))
const {
dom_lyric,
@ -74,7 +76,7 @@ export default {
}
.line-content {
line-height: 1.2;
margin: 16px 0;
margin: var(--line-gap) 0;
overflow-wrap: break-word;
.font-lrc {
@ -83,7 +85,7 @@ export default {
.extended {
font-size: 0.8em;
margin-top: 5px;
margin-top: var(--line-extended-gap);
}
&.line-mode {
.font-lrc {
@ -167,7 +169,7 @@ export default {
// // -webkit-text-stroke: thin #124628;
// }
.lyric-space {
height: 70%;
height: 80%;
}
// .lrc-active {

View File

@ -4,6 +4,13 @@ import { lyric } from '@lyric/store/lyric'
import { isPlay, setting } from '@lyric/store/state'
import { setWindowBounds } from '@lyric/utils/ipc'
const getOffsetTop = (contentHeight, lineHeight) => {
switch (setting['desktopLyric.scrollAlign']) {
case 'top': return setting['desktopLyric.style.lineGap'] / 2
default: return contentHeight * 0.5 - lineHeight / 2
}
}
export default () => {
const dom_lyric = ref(null)
const dom_lyric_text = ref(null)
@ -32,7 +39,7 @@ export default () => {
}
if (isStopScroll) return
let dom_p = dom_lines[lyric.line]
cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - dom_lyric.value.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0, duration)
cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - getOffsetTop(dom_lyric.value.clientHeight, dom_p.clientHeight)) : 0, duration)
}
const clearLyricScrollTimeout = () => {
if (!timeout) return

View File

@ -25,6 +25,8 @@ export default {
fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
opacity: setting['desktopLyric.style.opacity'] / 100,
textAlign: setting['desktopLyric.style.align'],
'--line-gap': Math.ceil(setting['desktopLyric.style.lineGap'] * 1.06) + 'px',
'--line-extended-gap': Math.ceil(setting['desktopLyric.style.lineGap'] * 1.06 / 8).toFixed(2) + 'px',
}))
const {
dom_lyric,
@ -78,7 +80,7 @@ export default {
}
.line-content {
line-height: 1.2;
margin: 0 16px;
margin: 0 var(--line-gap);
overflow-wrap: break-word;
letter-spacing: 5px;
@ -88,7 +90,7 @@ export default {
.extended {
font-size: 0.8em;
margin-right: 2px;
margin-right: var(--line-extended-gap);
}
&.line-mode {
.font-lrc {
@ -173,7 +175,7 @@ export default {
// // -webkit-text-stroke: thin #124628;
// }
.lyric-space {
width: 70%;
width: 80%;
height: 100%;
}
// .lrc-active {

View File

@ -4,6 +4,13 @@ import { lyric } from '@lyric/store/lyric'
import { isPlay, setting } from '@lyric/store/state'
import { setWindowBounds } from '@lyric/utils/ipc'
const getOffsetTop = (contentWidth, lineWidth) => {
switch (setting['desktopLyric.scrollAlign']) {
case 'top': return contentWidth - lineWidth - lineWidth * 0.1
default: return contentWidth * 0.5 - lineWidth / 2
}
}
export default () => {
const dom_lyric = ref(null)
const dom_lyric_text = ref(null)
@ -32,7 +39,7 @@ export default () => {
}
if (isStopScroll) return
let dom_p = dom_lines[lyric.line]
cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft - dom_lyric.value.clientWidth * 0.5 + dom_p.clientWidth / 2) : 0, duration)
cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft - getOffsetTop(dom_lyric.value.clientWidth, dom_p.clientWidth)) : 0, duration)
}
const clearLyricScrollTimeout = () => {
if (!timeout) return

View File

@ -12,6 +12,7 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
'desktopLyric.y': null,
'desktopLyric.isLockScreen': true,
'desktopLyric.isDelayScroll': true,
'desktopLyric.scrollAlign': 'center',
'desktopLyric.isHoverHide': false,
'desktopLyric.direction': 'horizontal',
'desktopLyric.style.align': 'center',
@ -19,7 +20,8 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
'desktopLyric.style.lyricPlayedColor': 'rgba(7, 197, 86, 1)',
'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.14)',
'desktopLyric.style.font': '',
'desktopLyric.style.fontSize': 120,
'desktopLyric.style.fontSize': 20,
'desktopLyric.style.lineGap': 15,
// 'desktopLyric.style.fontWeight': true,
'desktopLyric.style.opacity': 95,
'desktopLyric.style.ellipsis': false,

View File

@ -12,7 +12,7 @@ export default () => {
'--color-lyric-unplay': unplayColor,
'--color-lyric-played': playedColor,
'--color-lyric-shadow': shadowColor,
'--color-lyric-shadow-font-mode': RGB_Alpha_Shade(0.5, shadowColor),
'--color-lyric-shadow-font-mode': RGB_Alpha_Shade(0.49, shadowColor),
})
}, {
immediate: true,

View File

@ -30,6 +30,12 @@ dd
base-checkbox.gap-left(id="setting_desktop_lyric_direction_horizontal" :modelValue="appSetting['desktopLyric.direction']" @update:modelValue="updateSetting({ 'desktopLyric.direction': $event })" need value="horizontal" :label="$t('setting__desktop_lyric_direction_horizontal')")
base-checkbox.gap-left(id="setting_desktop_lyric_direction_vertical" :modelValue="appSetting['desktopLyric.direction']" @update:modelValue="updateSetting({ 'desktopLyric.direction': $event })" need value="vertical" :label="$t('setting__desktop_lyric_direction_vertical')")
dd
h3#desktop_lyric_scroll_align {{$t('setting__desktop_lyric_scroll_align')}}
div
base-checkbox.gap-left(id="setting_desktop_lyric_scroll_align_top" :modelValue="appSetting['desktopLyric.scrollAlign']" @update:modelValue="updateSetting({ 'desktopLyric.scrollAlign': $event })" need value="top" :label="$t('setting__desktop_lyric_scroll_align_top')")
base-checkbox.gap-left(id="setting_desktop_lyric_scroll_align_center" :modelValue="appSetting['desktopLyric.scrollAlign']" @update:modelValue="updateSetting({ 'desktopLyric.scrollAlign': $event })" need value="center" :label="$t('setting__desktop_lyric_scroll_align_center')")
dd
h3#desktop_lyric_align {{$t('setting__desktop_lyric_align')}}
div
@ -37,6 +43,12 @@ dd
base-checkbox.gap-left(id="setting_desktop_lyric_align_center" :modelValue="appSetting['desktopLyric.style.align']" @update:modelValue="updateSetting({ 'desktopLyric.style.align': $event })" need value="center" :label="$t('setting__desktop_lyric_align_center')")
base-checkbox.gap-left(id="setting_desktop_lyric_align_right" :modelValue="appSetting['desktopLyric.style.align']" @update:modelValue="updateSetting({ 'desktopLyric.style.align': $event })" need value="right" :label="$t('setting__desktop_lyric_align_right')")
dd
h3#desktop_lyric_line_gap {{$t('setting__desktop_lyric_line_gap', { num: appSetting['desktopLyric.style.lineGap'] })}}
div
p
base-btn.btn(min @click="changeLineGap(-1)") {{$t('setting__desktop_lyric_line_gap_dec')}}
base-btn.btn(min @click="changeLineGap(1)") {{$t('setting__desktop_lyric_line_gap_add')}}
dd
h3#desktop_lyric_color {{$t('setting__desktop_lyric_color')}}
div
@ -174,7 +186,7 @@ const useLyricColor = () => {
const defaultSetting = {
'desktopLyric.style.lyricUnplayColor': 'rgba(255, 255, 255, 1)',
'desktopLyric.style.lyricPlayedColor': 'rgba(7, 197, 86, 1)',
'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.14)',
'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.15)',
}
updateSetting(defaultSetting)
setLyricUnplayColor(defaultSetting['desktopLyric.style.lyricUnplayColor'])
@ -202,6 +214,10 @@ export default {
setup() {
const t = useI18n()
const changeLineGap = (step) => {
let gap = appSetting['desktopLyric.style.lineGap'] + step
updateSetting({ 'desktopLyric.style.lineGap': Math.min(Math.max(gap, 0), 25) })
}
const {
lyric_unplay_color_ref,
@ -221,6 +237,7 @@ export default {
return {
appSetting,
updateSetting,
changeLineGap,
lyric_unplay_color_ref,
lyric_played_color_ref,
lyric_shadow_color_ref,