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

新增桌面歌词设置字体加粗设置&优化歌词字体显示

pull/1168/head
lyswhut 2023-01-30 17:48:47 +08:00
parent c013d19530
commit c24b29a42c
14 changed files with 266 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@ -51,6 +51,7 @@
"@typescript-eslint/space-before-function-paren": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/naming-convention": "off",
"@typescript-eslint/ban-ts-comment": "off",
"vue/max-attributes-per-line": "off",
"vue/singleline-html-element-content-newline": "off",
"vue/use-v-on-exact": "off",
@ -102,6 +103,7 @@
}],
"@typescript-eslint/naming-convention": "off",
"@typescript-eslint/return-await": "off",
"@typescript-eslint/ban-ts-comment": "off",
"multiline-ternary": "off",
"@typescript-eslint/comma-dangle": "off",
},

8
publish/changeLog.md
View File

@ -1,3 +1,11 @@
### 新增
- 新增桌面歌词设置字体加粗设置，可以到设置-桌面歌词设置-加粗字体修改
### 优化
- 微调了桌面歌词逐行字体阴影，使其看起来更匀称
### 修复
- 修复播放下载列表的歌曲时，调整歌词偏移时间功能异常的问题

6
src/common/defaultSetting.ts
View File

@ -58,7 +58,7 @@ const defaultSetting: LX.AppSetting = {
'desktopLyric.style.align': 'center',
'desktopLyric.style.font': '',
'desktopLyric.style.fontSize': 20,
'desktopLyric.style.lineGap': 14,
'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.15)',
@ -66,6 +66,8 @@ const defaultSetting: LX.AppSetting = {
'desktopLyric.style.opacity': 95,
'desktopLyric.style.ellipsis': false,
'desktopLyric.style.isZoomActiveLrc': true,
'desktopLyric.style.isFontWeightFont': true,
'desktopLyric.style.isFontWeightLine': false,
'list.isClickPlayList': false,
'list.isShowSource': true,
@ -117,7 +119,7 @@ const defaultSetting: LX.AppSetting = {
// 使用新年皮肤
if (new Date().getMonth() < 2) {
defaultSetting['theme.id'] = 'happy_new_year'
defaultSetting['desktopLyric.style.lyricPlayedColor'] = 'rgba(255, 18, 34, 1)'
defaultSetting['desktopLyric.style.lyricPlayedColor'] = 'rgba(255, 57, 71, 1)'
}

10
src/common/types/app_setting.d.ts vendored
View File

@ -304,6 +304,16 @@ declare global {
*/
'desktopLyric.style.isZoomActiveLrc': boolean
/**
* 是否加粗逐字歌词字体
*/
'desktopLyric.style.isFontWeightFont': boolean
/**
* 是否加粗逐行歌词字体
*/
'desktopLyric.style.isFontWeightLine': boolean
/**
* 是否启用双击列表里的歌曲时自动切换到当前列表播放（仅对歌单、排行榜有效）
*/

2
src/common/types/desktop_lyric.d.ts vendored
View File

@ -26,6 +26,8 @@ declare namespace LX {
// 'desktopLyric.style.fontWeight': LX.AppSetting['desktopLyric.style.fontWeight']
'desktopLyric.style.opacity': LX.AppSetting['desktopLyric.style.opacity']
'desktopLyric.style.ellipsis': LX.AppSetting['desktopLyric.style.ellipsis']
'desktopLyric.style.isFontWeightFont': LX.AppSetting['desktopLyric.style.isFontWeightFont']
'desktopLyric.style.isFontWeightLine': LX.AppSetting['desktopLyric.style.isFontWeightLine']
'desktopLyric.style.isZoomActiveLrc': LX.AppSetting['desktopLyric.style.isZoomActiveLrc']
'common.langId': LX.AppSetting['common.langId']
'player.isShowLyricTranslation': LX.AppSetting['player.isShowLyricTranslation']

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

@ -446,6 +446,8 @@
"setting__search_focus_search_box": "Automatically focus the search box on startup",
"setting__search_history": "Search history",
"setting__search_hot": "Top Searches",
"setting__setting__desktop_lyric_font_weight_font": "verbatim lyrics",
"setting__setting__desktop_lyric_font_weight_line": "progressive lyrics",
"setting__sync": "Data synchronization",
"setting__sync_address": "Synchronization service address: {address}",
"setting__sync_auth_code": "Connection code: {code}",

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

@ -448,6 +448,8 @@
"setting__search_focus_search_box": "启动时自动聚焦搜索框",
"setting__search_history": "显示历史搜索记录",
"setting__search_hot": "显示热门搜索",
"setting__setting__desktop_lyric_font_weight_font": "逐字歌词",
"setting__setting__desktop_lyric_font_weight_line": "逐行歌词",
"setting__sync": "数据同步",
"setting__sync_address": "同步服务地址：{address}",
"setting__sync_auth_code": "连接码：{code}",

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

@ -447,6 +447,8 @@
"setting__search_focus_search_box": "啟動時自動聚焦搜索框",
"setting__search_history": "顯示歷史搜索記錄",
"setting__search_hot": "顯示熱門搜索",
"setting__setting__desktop_lyric_font_weight_font": "逐字歌詞",
"setting__setting__desktop_lyric_font_weight_line": "逐行歌詞",
"setting__sync": "數據同步",
"setting__sync_address": "同步服務地址：{address}",
"setting__sync_auth_code": "連接碼：{code}",

2
src/main/modules/winLyric/utils.ts
View File

@ -76,6 +76,8 @@ export const watchConfigKeys = [
// 'desktopLyric.style.fontWeight',
'desktopLyric.style.opacity',
'desktopLyric.style.ellipsis',
'desktopLyric.style.isFontWeightFont',
'desktopLyric.style.isFontWeightLine',
'desktopLyric.style.isZoomActiveLrc',
'common.langId',
'player.isShowLyricTranslation',

156
src/renderer-lyric/assets/styles/layout.less
View File

@ -48,18 +48,156 @@
text-shadow+: 0 0 0 @color;
}
.stroke4(@color) {
text-shadow:
0.02em -0.02em 0 var(--color-lyric-shadow),
// -0.02em 0.02em 0 var(--color-lyric-shadow),
// 0.02em 0.02em 0 var(--color-lyric-shadow),
// 0.02em -0.02em 0 var(--color-lyric-shadow),
-0.02em -1px 0 var(--color-lyric-shadow),
-0.02em 1px 0 var(--color-lyric-shadow),
0.02em 1px 0 var(--color-lyric-shadow),
0.02em -1px 0 var(--color-lyric-shadow),
-0.02em 0px 0 var(--color-lyric-shadow),
-0.02em 0px 0 var(--color-lyric-shadow),
0.02em 0px 0 var(--color-lyric-shadow),
0.02em 0px 0 var(--color-lyric-shadow),
// -1px -0.02em 0 var(--color-lyric-shadow),
// -1px 0.02em 0 var(--color-lyric-shadow),
// 1px 0.02em 0 var(--color-lyric-shadow),
// 1px -0.02em 0 var(--color-lyric-shadow),
-1px -1px 0 var(--color-lyric-shadow),
-1px 1px 0 var(--color-lyric-shadow),
1px 1px 0 var(--color-lyric-shadow),
1px -1px 0 var(--color-lyric-shadow),
-1px 0px 0 var(--color-lyric-shadow),
-1px 0px 0 var(--color-lyric-shadow),
1px 0px 0 var(--color-lyric-shadow),
1px 0px 0 var(--color-lyric-shadow)
// 0px -0.02em 0 var(--color-lyric-shadow),
// 0px 0.02em 0 var(--color-lyric-shadow),
// 0px 0.02em 0 var(--color-lyric-shadow),
// 0px -0.02em 0 var(--color-lyric-shadow),
// 0px -1px 0 var(--color-lyric-shadow),
// 0px 1px 0 var(--color-lyric-shadow),
// 0px 1px 0 var(--color-lyric-shadow),
// 0px -1px 0 var(--color-lyric-shadow)
;
// text-shadow:
// -0.04em -0.04em 0 var(--color-lyric-shadow),
// // -0.04em 0.04em 0 var(--color-lyric-shadow),
// 0.04em 0.04em 0 var(--color-lyric-shadow),
// 0.04em -0.04em 0 var(--color-lyric-shadow),
// -0.04em 0px 0 var(--color-lyric-shadow),
// -0.04em 0px 0 var(--color-lyric-shadow),
// 0.04em 0px 0 var(--color-lyric-shadow),
// 0.04em 0px 0 var(--color-lyric-shadow),
// // 0px -0.03em 0 var(--color-lyric-shadow),
// 0px 0.04em 0 var(--color-lyric-shadow),
// // 0px 0.03em 0 var(--color-lyric-shadow),
// 0px -0.04em 0 var(--color-lyric-shadow);
// @maxi: 2 + 1;
// .i-loop (@i) when (@i > 0) {
// @maxj: 2 + 1;
// .j-loop (@j) when (@j > 0) {
// text-shadow+: (@i - 1)*(-1px) (@j - 1)*(-1px) 0 @color;
// text-shadow+: (@i - 1)*(-1px) (@j - 1)*(1px) 0 @color;
// text-shadow+: (@i - 1)*(1px) (@j - 1)*(1px) 0 @color;
// text-shadow+: (@i - 1)*(1px) (@j - 1)*(-1px) 0 @color;
// .j-loop(@j - 1);
// }
// .j-loop (0) {}
// .j-loop(@maxj);
// .i-loop(@i - 1);
// }
// .i-loop (0) {}
// .i-loop(@maxi);
// text-shadow+: 0 0 0 @color;
}
.stroke3(@color) {
text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.04em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.04em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.04em 0px 0 var(--color-lyric-shadow-font-mode),
0.04em 0px 0 var(--color-lyric-shadow-font-mode),
-0.04em 0px 0 var(--color-lyric-shadow-font-mode),
-0.04em 0px 0 var(--color-lyric-shadow-font-mode),
0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.01em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.01em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.01em 0px 0 var(--color-lyric-shadow-font-mode),
0.01em 0px 0 var(--color-lyric-shadow-font-mode),
-0.01em 0px 0 var(--color-lyric-shadow-font-mode),
-0.01em 0px 0 var(--color-lyric-shadow-font-mode),
0px 0.04em 0 var(--color-lyric-shadow-font-mode),
0px -0.03em 0 var(--color-lyric-shadow-font-mode),
0px -0.03em 0 var(--color-lyric-shadow-font-mode),
0px 0.04em 0 var(--color-lyric-shadow-font-mode),
0px 0.01em 0 var(--color-lyric-shadow-font-mode),
0px -0.01em 0 var(--color-lyric-shadow-font-mode),
0px -0.01em 0 var(--color-lyric-shadow-font-mode),
0px 0.01em 0 var(--color-lyric-shadow-font-mode);
// text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.04em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.04em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// 0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.02em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.01em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.02em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0px 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0px 0 var(--color-lyric-shadow-font-mode),
// 0px 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.03em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.03em 0 var(--color-lyric-shadow-font-mode),
// 0px 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0px 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.02em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.02em 0 var(--color-lyric-shadow-font-mode),
// 0px 0.01em 0 var(--color-lyric-shadow-font-mode);
}
.stroke2(@color) {
text-shadow: 2px 0 @color, -2px 0 @color, 0 2px @color, 0 -2px @color,
1px 1px @color, -1px -1px @color, 1px -1px @color, -1px 1px @color;
}
// .stroke2(@color) {
// text-shadow:
// -1px -1px 0px @color,
// 0px -1px 0px @color,
// 1px -1px 0px @color,
// -1px 0px 0px @color,
// 1px 0px 0px @color,
// -1px 1px 0px @color,
// 0px 1px 0px @color,
// 1px 1px 0px @color;
// // text-shadow: 1px 1px 2px @color;
// // text-shadow:
// // -1px -1px 0px @color,
// // 0px -1px 0px @color,
// // 1px -1px 0px @color,
// // -1px 0px 0px @color,
// // 1px 0px 0px @color,
// // -1px 1px 0px @color,
// // 0px 1px 0px @color,
// // 1px 1px 0px @color;
// // -webkit-text-stroke: 0.03em black;
// // -webkit-text-fill-color: @color;
// }

56
src/renderer-lyric/components/layout/LyricHorizontal/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div
ref="dom_lyric"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis } ]"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis }, { [$style.fontWeightFont]: isFontWeightFont }, { [$style.fontWeightLine]: isFontWeightLine } ]"
:style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart"
>
<div :class="$style.lyricSpace" />
@ -19,7 +19,8 @@ export default {
setup() {
const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
// const fontWeight = computed(() => setting['desktopLyric.style.fontWeight'])
const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
const lrcStyles = computed(() => ({
fontFamily: setting['desktopLyric.style.font'],
fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
@ -41,7 +42,8 @@ export default {
isZoomActiveLrc,
lrcStyles,
ellipsis,
// fontWeight,
isFontWeightFont,
isFontWeightLine,
dom_lyric,
dom_lyric_text,
@ -70,6 +72,7 @@ export default {
:global {
.font-lrc, .shadow {
padding: 0.08em 0.14em;
margin: -0.08em -0.14em;
}
.font-lrc {
color: var(--color-lyric-unplay);
@ -104,9 +107,9 @@ export default {
transition: @transition-slow;
transition-property: font-size, color;
}
&.font-mode > .line {
font-weight: bold;
}
// &.font-mode > .line {
// font-weight: bold;
// }
&.font-mode > .line > .font-lrc {
> span {
@ -119,15 +122,21 @@ export default {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0.12em;
padding-right: 0.12em;
padding-bottom: 0.12em;
margin-left: -0.11em;
margin-right: -0.11em;
margin-bottom: -0.12em;
}
}
.line .shadow span {
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0.12em;
padding-right: 0.12em;
padding-bottom: 0.12em;
margin-left: -0.11em;
margin-right: -0.11em;
margin-bottom: -0.12em;
}
// &.line-mode {
// .shadow {
@ -140,7 +149,7 @@ export default {
}
.line-mode .font-lrc, .extended .font-lrc {
// text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
.stroke2(var(--color-lyric-shadow));
.stroke3(var(--color-lyric-shadow));
// .stroke2(rgba(0, 0, 0, 0.18));
// .stroke(1px, rgba(0, 0, 0, 0.08));
// .stroke(2px, rgba(0, 0, 0, 0.025));
@ -228,13 +237,20 @@ export default {
}
}
}
// .font-weight {
// :global {
// .font-mode > .line {
// font-weight: bold;
// }
// }
// }
.font-weight-font {
:global {
.font-mode > .line {
font-weight: bold;
}
}
}
.font-weight-line {
:global {
.line-mode > .line {
font-weight: bold;
}
}
}
// .footer {
// flex: 0 0 100px;
// overflow: hidden;

18
src/renderer-lyric/components/layout/LyricVertical/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div
ref="dom_lyric"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis } ]"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis }, { [$style.fontWeightFont]: isFontWeightFont }, { [$style.fontWeightLine]: isFontWeightLine } ]"
:style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart"
>
<div :class="$style.lyricSpace" />
@ -19,6 +19,8 @@ export default {
setup() {
const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
// const fontWeight = computed(() => setting['desktopLyric.style.fontWeight'])
const lrcStyles = computed(() => ({
fontFamily: setting['desktopLyric.style.font'],
@ -41,7 +43,8 @@ export default {
isZoomActiveLrc,
lrcStyles,
ellipsis,
// fontWeight,
isFontWeightFont,
isFontWeightLine,
dom_lyric,
dom_lyric_text,
@ -74,13 +77,14 @@ export default {
:global {
.font-lrc, .shadow {
padding: 0.14em 0.07em;
margin: -0.14em -0.07em;
}
.font-lrc {
color: var(--color-lyric-unplay);
}
.shadow {
color: transparent;
margin-left: -0.14em;
// margin-left: -0.14em;
}
.line-content {
line-height: 1.2;
@ -124,12 +128,14 @@ export default {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
padding: 2px;
padding: 0.14em;
margin: -0.08em;
}
}
&.font-mode .line .shadow span {
padding: 2px;
padding: 0.14em;
margin: -0.08em;
}
}
// .shadow {
@ -143,7 +149,7 @@ export default {
.line-mode .font-lrc, .extended .font-lrc {
// text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
// .stroke2(rgba(0, 0, 0, 0.14));
.stroke2(var(--color-lyric-shadow));
.stroke4(var(--color-lyric-shadow));
// .stroke(1px, rgba(0, 0, 0, 0.08));
// .stroke(2px, rgba(0, 0, 0, 0.025));
transition: font-size @transition-slow;

2
src/renderer-lyric/store/state.ts
View File

@ -26,6 +26,8 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
// 'desktopLyric.style.fontWeight': true,
'desktopLyric.style.opacity': 95,
'desktopLyric.style.ellipsis': false,
'desktopLyric.style.isFontWeightFont': false,
'desktopLyric.style.isFontWeightLine': false,
'desktopLyric.style.isZoomActiveLrc': true,
'common.langId': 'zh-cn',
'player.isShowLyricTranslation': false,

43
src/renderer/views/Setting/components/SettingDesktopLyric.vue
View File

@ -26,6 +26,13 @@ dd
//- .gap-top
base-checkbox(id="setting_desktop_lyric_fontWeight" :modelValue="appSetting['desktopLyric.style.fontWeight']" @update:modelValue="updateSetting({ 'desktopLyric.style.fontWeight': $event })" :label="$t('setting__desktop_lyric_font_weight')")
dd
h3#setting__desktop_lyric_font_weight {{$t('setting__desktop_lyric_font_weight')}}
div
base-checkbox.gap-left(id="setting_setting__desktop_lyric_font_weight_font" :modelValue="appSetting['desktopLyric.style.isFontWeightFont']" @update:modelValue="updateSetting({ 'desktopLyric.style.isFontWeightFont': $event })" :label="$t('setting__setting__desktop_lyric_font_weight_font')")
base-checkbox.gap-left(id="setting_setting__desktop_lyric_font_weight_line" :modelValue="appSetting['desktopLyric.style.isFontWeightLine']" @update:modelValue="updateSetting({ 'desktopLyric.style.isFontWeightLine': $event })" :label="$t('setting__setting__desktop_lyric_font_weight_line')")
dd
h3#desktop_lyric_direction {{$t('setting__desktop_lyric_direction')}}
div
@ -81,13 +88,38 @@ import { appSetting, updateSetting } from '@renderer/store/setting'
import { useI18n } from '@renderer/plugins/i18n'
import { pickrTools } from '@renderer/utils/pickrTools'
const defaultUnplayColors = [
'rgba(255, 255, 255, 1)',
'rgba(255, 236, 144, 1)',
'rgba(144, 255, 206, 1)',
'rgba(32, 255, 132, 1)',
'rgba(255, 226, 32, 1)',
'rgba(57, 203, 255, 1)',
'rgba(217, 57, 255, 1)',
'rgba(255, 57, 71, 1)',
]
const defaultPlayedColors = [
'rgba(255, 236, 144, 1)',
'rgba(144, 255, 206, 1)',
'rgba(32, 255, 132, 1)',
'rgba(255, 226, 32, 1)',
'rgba(57, 203, 255, 1)',
'rgba(7, 197, 86, 1)',
'rgba(25, 181, 254, 1)',
'rgba(217, 57, 255, 1)',
'rgba(255, 57, 71, 1)',
]
const defaultShadowColors = [
'rgba(0, 0, 0, 0.15)',
]
const useLyricUnplayColor = () => {
const lyric_unplay_color_ref = ref(null)
let tools
const initLyricUnplayColor = (color, changed, reset) => {
if (!lyric_unplay_color_ref.value) return
tools = pickrTools.create(lyric_unplay_color_ref.value, color, null, changed, reset)
tools = pickrTools.create(lyric_unplay_color_ref.value, color, defaultUnplayColors, changed, reset)
}
const destroyLyricUnplayColor = () => {
if (!tools) return
@ -112,12 +144,7 @@ const useLyricPlayedColor = () => {
const initLyricPlayedColor = (color, changed, reset) => {
if (!lyric_played_color_ref.value) return
tools = pickrTools.create(lyric_played_color_ref.value, color, [
'rgba(7, 197, 86, 1)',
'rgba(255, 250, 18, 1)',
'rgba(25, 181, 254, 1)',
'rgba(255, 18, 34, 1)',
], changed, reset)
tools = pickrTools.create(lyric_played_color_ref.value, color, defaultPlayedColors, changed, reset)
}
const destroyLyricPlayedColor = () => {
if (!tools) return
@ -142,7 +169,7 @@ const useLyricShadowColor = () => {
const initLyricShadowColor = (color, changed, reset) => {
if (!lyric_shadow_color_ref.value) return
tools = pickrTools.create(lyric_shadow_color_ref.value, color, null, changed, reset)
tools = pickrTools.create(lyric_shadow_color_ref.value, color, defaultShadowColors, changed, reset)
}
const destroyLyricShadowColor = () => {
if (!tools) return