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

完善歌词

pull/459/head
lyswhut 2021-03-03 16:51:02 +08:00
parent f2b6c0a443
commit c66d7d6187
14 changed files with 126 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/common/defaultSetting.js
View File

@ -2,7 +2,7 @@ const path = require('path')
const os = require('os')
const defaultSetting = {
version: '1.0.39',
version: '1.0.40',
player: {
togglePlayMethod: 'listLoop',
highQuality: false,
@ -11,7 +11,8 @@ const defaultSetting = {
isMute: false,
mediaDeviceId: 'default',
isMediaDeviceRemovedStopPlay: false,
isShowLyricTransition: true,
isShowLyricTransition: false,
isPlayLxlrc: true,
isSavePlayTime: false,
},
desktopLyric: {

1
src/main/modules/winLyric/event.js
View File

@ -14,6 +14,7 @@ const setLrcConfig = () => {
config: desktopLyric,
languageId: global.appSetting.langId,
isShowLyricTransition: global.appSetting.player.isShowLyricTransition,
isPlayLxlrc: global.appSetting.player.isPlayLxlrc,
})
if (isLock != desktopLyric.isLock) {
isLock = desktopLyric.isLock

7
src/main/modules/winLyric/rendererEvent.js
View File

@ -24,7 +24,12 @@ mainOn(ipcWinLyricNames.set_lyric_config, (event, config) => {
})
mainHandle(ipcWinLyricNames.get_lyric_config, async() => {
return { config: global.appSetting.desktopLyric, languageId: global.appSetting.langId, isShowLyricTransition: global.appSetting.player.isShowLyricTransition }
return {
config: global.appSetting.desktopLyric,
languageId: global.appSetting.langId,
isShowLyricTransition: global.appSetting.player.isShowLyricTransition,
isPlayLxlrc: global.appSetting.player.isPlayLxlrc,
}
})
mainOn(ipcWinLyricNames.set_win_bounds, (event, options) => {

6
src/renderer-lyric/App.vue
View File

@ -4,7 +4,7 @@
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
.control-bar(v-show="!lrcConfig.isLock")
core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
core-lyric(:lrcConfig="lrcConfig" :isShowLyricTransition="isShowLyricTransition")
core-lyric(:lrcConfig="lrcConfig" :isPlayLxlrc="isPlayLxlrc" :isShowLyricTransition="isShowLyricTransition")
div.resize-left(@mousedown.self="handleMouseDown('left', $event)")
div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
@ -45,6 +45,7 @@ export default {
},
},
isShowLyricTransition: true,
isPlayLxlrc: true,
themeList: [
{
id: 0,
@ -118,9 +119,10 @@ export default {
document.removeEventListener('mouseup', this.handleMouseUp)
},
methods: {
handleUpdateConfig({ config, languageId, isShowLyricTransition }) {
handleUpdateConfig({ config, languageId, isShowLyricTransition, isPlayLxlrc }) {
this.lrcConfig = config
this.isShowLyricTransition = isShowLyricTransition
this.isPlayLxlrc = isPlayLxlrc
if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId
},
handleMouseDown(origin, event) {

31
src/renderer-lyric/components/core/Lyric.vue
View File

@ -28,6 +28,10 @@ export default {
}
},
},
isPlayLxlrc: {
type: Boolean,
default: true,
},
isShowLyricTransition: {
type: Boolean,
default: true,
@ -122,8 +126,11 @@ export default {
},
immediate: true,
},
isShowLyricTransition(n) {
console.log(n)
isShowLyricTransition() {
this.setLyric()
rendererSend(NAMES.winLyric.get_lyric_info, 'status')
},
isPlayLxlrc() {
this.setLyric()
rendererSend(NAMES.winLyric.get_lyric_info, 'status')
},
@ -226,8 +233,10 @@ export default {
cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0)
},
handleLyricMouseDown(e) {
console.log(e.target)
if (e.target.classList.contains('font') || e.target.parentNode.classList.contains('font')) {
if (e.target.classList.contains('font') ||
e.target.parentNode.classList.contains('font') ||
e.target.classList.contains('translation') ||
e.target.parentNode.classList.contains('translation')) {
this.lyricEvent.isMsDown = true
this.lyricEvent.msDownY = e.clientY
this.lyricEvent.msDownScrollY = this.$refs.dom_lyric.scrollTop
@ -296,7 +305,8 @@ export default {
},
setLyric() {
window.lrc.setLyric(
this.lyrics.lxlyric ? this.lyrics.lxlyric : this.lyrics.lyric,
this.isPlayLxlrc && this.lyrics.lxlyric ? this.lyrics.lxlyric : this.lyrics.lyric,
this.isShowLyricTransition && this.lyrics.tlyric ? this.lyrics.tlyric : '',
// (this.isShowLyricTransition && this.lyrics.tlyric ? (this.lyrics.tlyric + '\n') : '') + (this.lyrics.lyric || ''),
)
},
@ -327,6 +337,13 @@ export default {
display: inline-block;
}
.translation {
transition: @transition-theme !important;
transition-property: font-size, color;
font-size: 0.8em;
margin-top: 5px;
}
.line {
transition-property: font-size, color !important;
background: none !important;
@ -337,6 +354,10 @@ export default {
.line {
color: @color-theme;
}
.translation {
font-size: 1em;
color: @color-theme;
}
span {
// color: @color-theme;
font-size: 1.2em;

6
src/renderer/components/core/Player.vue
View File

@ -275,6 +275,9 @@ export default {
'setting.player.isShowLyricTransition'() {
this.setLyric()
},
'setting.player.isPlayLxlrc'() {
this.setLyric()
},
async list(n, o) {
if (n === o && this.musicInfo.songmid) {
let index = this.listId == 'download'
@ -856,7 +859,8 @@ export default {
},
setLyric() {
window.lrc.setLyric(
this.musicInfo.lxlrc ? this.musicInfo.lxlrc : this.musicInfo.lrc,
this.setting.player.isPlayLxlrc && this.musicInfo.lxlrc ? this.musicInfo.lxlrc : this.musicInfo.lrc,
this.setting.player.isShowLyricTransition && this.musicInfo.tlrc ? this.musicInfo.tlrc : '',
// (
// this.setting.player.isShowLyricTransition && this.musicInfo.tlrc
// ? (this.musicInfo.tlrc + '\n')

10
src/renderer/components/core/PlayerDetail.vue
View File

@ -589,6 +589,12 @@ export default {
margin: 16px 0;
overflow-wrap: break-word;
.translation {
transition: @transition-theme !important;
transition-property: font-size, color;
font-size: 1em;
margin-top: 5px;
}
.line {
transition-property: font-size, color !important;
background: none !important;
@ -599,6 +605,10 @@ export default {
.line {
color: @color-theme;
}
.translation {
font-size: 1.2em;
color: @color-theme;
}
span {
// color: @color-theme;
font-size: 1.2em;

1
src/renderer/lang/en-us/view/setting.json
View File

@ -30,6 +30,7 @@
"play": "Play",
"play_save_play_time": "Remember playback progress",
"play_lyric_transition": "Show lyrics translation",
"play_lyric_lxlrc": "Use Karaoke-style lyrics playback (if supported)",
"play_quality": "Play 320K quality songs first (if supported)",
"play_task_bar": "Show playing progress on the taskbar",
"play_mediaDevice_title": "Select a media device for audio output",

1
src/renderer/lang/zh-cn/view/setting.json
View File

@ -30,6 +30,7 @@
"play": "播放设置",
"play_save_play_time": "记住播放进度",
"play_lyric_transition": "显示歌词翻译",
"play_lyric_lxlrc": "使用卡拉OK式歌词播放（如果支持）",
"play_quality": "优先播放320K品质的歌曲（如果支持）",
"play_task_bar": "在任务栏上显示当前歌曲播放进度",
"play_mediaDevice_title": "选择声音输出的媒体设备",

1
src/renderer/lang/zh-tw/view/setting.json
View File

@ -30,6 +30,7 @@
"play": "播放設置",
"play_save_play_time": "記住播放進度",
"play_lyric_transition": "顯示歌詞翻譯",
"play_lyric_lxlrc": "使用卡拉OK式歌詞播放（如果支持）",
"play_quality": "優先播放320K品質的歌曲（如果支持）",
"play_task_bar": "在任務欄上顯示當前歌曲播放進度",
"play_mediaDevice_title": "選擇聲音輸出的媒體設備",

24
src/renderer/utils/lyric-font-player/font-player.js
View File

@ -20,11 +20,13 @@ const createAnimation = (dom, duration) => new window.Animation(new window.Keyfr
// https://jsfiddle.net/ceqpnbky/1/
module.exports = class FontPlayer {
constructor({ lyric = '', lineClassName = '', fontClassName = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) {
constructor({ lyric = '', translationLyric = '', lineClassName = '', fontClassName = '', translationClassName = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) {
this.lyric = lyric
this.translationLyric = translationLyric
this.lineClassName = lineClassName
this.fontClassName = fontClassName
this.translationClassName = translationClassName
this.lineModeClassName = lineModeClassName
this.shadowContent = shadowContent
this.shadowClassName = shadowClassName
@ -49,17 +51,33 @@ module.exports = class FontPlayer {
this.isLineMode = false
this.lineContent = document.createElement('div')
this.lineContent.style = 'position:relative;'
if (this.lineClassName) this.lineContent.classList.add(this.lineClassName)
this.fontContent = document.createElement('div')
this.fontContent.style = 'position:relative;display:inline-block;'
if (this.fontClassName) this.fontContent.classList.add(this.fontClassName)
if (this.shadowContent) {
this.fontShadowContent = document.createElement('div')
this.fontShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;'
this.fontShadowContent.className = this.shadowClassName
this.lineContent.appendChild(this.fontShadowContent)
this.fontContent.appendChild(this.fontShadowContent)
}
this.lineContent.appendChild(this.fontContent)
if (this.translationLyric) {
this.translationContent = document.createElement('div')
this.translationContent.style = 'position:relative;display:inline-block;'
this.translationContent.className = this.translationClassName
this.translationContent.textContent = this.translationLyric
this.lineContent.appendChild(document.createElement('br'))
this.lineContent.appendChild(this.translationContent)
if (this.shadowContent) {
this.translationShadowContent = document.createElement('div')
this.translationShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;'
this.translationShadowContent.className = this.shadowClassName
this.translationShadowContent.textContent = this.translationLyric
this.translationContent.appendChild(this.translationShadowContent)
}
}
this._parseLyric()
}

15
src/renderer/utils/lyric-font-player/index.js
View File

@ -6,9 +6,11 @@ const fontTimeExp = /<(\d+),(\d+)>/g
module.exports = class Lyric {
constructor({
lyric = '',
translationLyric = '',
offset = 150,
lineClassName = '',
fontClassName = 'font',
translationClassName = 'translation',
activeLineClassName = 'active',
lineModeClassName = 'line',
shadowClassName = '',
@ -17,12 +19,14 @@ module.exports = class Lyric {
onSetLyric = function() { },
}) {
this.lyric = lyric
this.translationLyric = translationLyric
this.offset = offset
this.onPlay = onPlay
this.onSetLyric = onSetLyric
this.lineClassName = lineClassName
this.fontClassName = fontClassName
this.translationClassName = translationClassName
this.activeLineClassName = activeLineClassName
this.lineModeClassName = lineModeClassName
this.shadowClassName = shadowClassName
@ -37,10 +41,11 @@ module.exports = class Lyric {
this.isLineMode = false
if (this.linePlayer) {
this.linePlayer.setLyric(this.lyric)
this.linePlayer.setLyric(this.lyric, this.translationLyric)
} else {
this.linePlayer = new LinePlayer({
lyric: this.lyric,
translationLyric: this.translationLyric,
offset: this.offset,
onPlay: this._handleLinePlayerOnPlay,
onSetLyric: this._handleLinePlayerOnSetLyric,
@ -93,6 +98,7 @@ module.exports = class Lyric {
}
_handleLinePlayerOnSetLyric = lyricLines => {
// console.log(lyricLines)
// this._lines = lyricsLines
this.isLineMode = lyricLines.length && !/^<\d+,\d+>/.test(lyricLines[0].text)
@ -101,8 +107,10 @@ module.exports = class Lyric {
this._lines = lyricLines.map(line => {
const fontPlayer = new FontPlayer({
lyric: line.text,
translationLyric: line.translation,
lineClassName: this.lineClassName,
fontClassName: this.fontClassName,
translationClassName: this.translationClassName,
lineModeClassName: this.lineModeClassName,
shadowClassName: this.shadowClassName,
shadowContent: this.shadowContent,
@ -119,8 +127,10 @@ module.exports = class Lyric {
this._lines = lyricLines.map(line => {
const fontPlayer = new FontPlayer({
lyric: line.text,
translationLyric: line.translation,
lineClassName: this.lineClassName,
fontClassName: this.fontClassName,
translationClassName: this.translationClassName,
shadowClassName: this.shadowClassName,
shadowContent: this.shadowContent,
})
@ -148,8 +158,9 @@ module.exports = class Lyric {
if (this.playingLineNum > -1) this._lineFonts[this.playingLineNum].pause()
}
setLyric(lyric) {
setLyric(lyric, translationLyric) {
this.lyric = lyric
this.translationLyric = translationLyric
this._init()
}
}

34
src/renderer/utils/lyric-font-player/line-player.js
View File

@ -12,10 +12,12 @@ const tagRegMap = {
const timeoutTools = new TimeoutTools()
module.exports = class LinePlayer {
constructor({ lyric = '', offset = 0, onPlay = function() { }, onSetLyric = function() { } } = {}) {
constructor({ lyric = '', translationLyric = '', offset = 0, onPlay = function() { }, onSetLyric = function() { } } = {}) {
this.lyric = lyric
this.translationLyric = translationLyric
this.tags = {}
this.lines = null
this.translationLines = null
this.onPlay = onPlay
this.onSetLyric = onSetLyric
this.isPlay = false
@ -30,6 +32,7 @@ module.exports = class LinePlayer {
_init() {
if (this.lyric == null) this.lyric = ''
if (this.translationLyric == null) this.translationLyric = ''
this._initTag()
this._initLines()
this.onSetLyric(this.lines)
@ -44,26 +47,45 @@ module.exports = class LinePlayer {
_initLines() {
this.lines = []
this.translationLines = []
const lines = this.lyric.split('\n')
const linesMap = {}
// const translationLines = this.translationLyric.split('\n')
for (let i = 0; i < lines.length; i++) {
const line = lines[i].trim()
let result = timeExp.exec(line)
if (result) {
const text = line.replace(timeExp, '').trim()
if (text) {
const timeArr = RegExp.$1.split(':')
const timeStr = RegExp.$1
const timeArr = timeStr.split(':')
if (timeArr.length < 3) timeArr.unshift(0)
if (timeArr[2].indexOf('.') > -1) {
timeArr.push(...timeArr[2].split('.'))
timeArr.splice(2, 1)
}
this.lines.push({
linesMap[timeStr] = {
time: parseInt(timeArr[0]) * 60 * 60 * 1000 + parseInt(timeArr[1]) * 60 * 1000 + parseInt(timeArr[2]) * 1000 + parseInt(timeArr[3] || 0),
text,
})
}
}
}
}
const translationLines = this.translationLyric.split('\n')
for (let i = 0; i < translationLines.length; i++) {
const line = translationLines[i].trim()
let result = timeExp.exec(line)
if (result) {
const text = line.replace(timeExp, '').trim()
if (text) {
const timeStr = RegExp.$1
const targetLine = linesMap[timeStr]
if (targetLine) targetLine.translation = text
}
}
}
this.lines = Object.values(linesMap)
this.lines.sort((a, b) => {
return a.time - b.time
})
@ -145,9 +167,11 @@ module.exports = class LinePlayer {
}
}
setLyric(lyric) {
setLyric(lyric, translationLyric) {
console.log(translationLyric)
if (this.isPlay) this.pause()
this.lyric = lyric
this.translationLyric = translationLyric
this._init()
}
}

5
src/renderer/views/Setting.vue
View File

@ -67,6 +67,8 @@ div.scroll(:class="$style.setting" ref="dom_setting")
material-checkbox(id="setting_player_save_play_time" v-model="current_setting.player.isSavePlayTime" :label="$t('view.setting.play_save_play_time')")
div(:class="$style.gapTop")
material-checkbox(id="setting_player_lyric_transition" v-model="current_setting.player.isShowLyricTransition" :label="$t('view.setting.play_lyric_transition')")
div(:class="$style.gapTop")
material-checkbox(id="setting_player_lyric_play_lxlrc" v-model="current_setting.player.isPlayLxlrc" :label="$t('view.setting.play_lyric_lxlrc')")
div(:class="$style.gapTop")
material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality" :label="$t('view.setting.play_quality')")
div(:class="$style.gapTop")
@ -606,6 +608,9 @@ export default {
'setting.player.togglePlayMethod'(n) {
this.current_setting.player.togglePlayMethod = n
},
// 'setting.player.isPlayLxlrc'(n) {
// this.current_setting.player.isPlayLxlrc = n
// },
'current_setting.player.isShowTaskProgess'(n) {
if (n) return
this.$nextTick(() => {