新增歌词文本选择复制功能

pull/639/head
lyswhut 2021-10-01 12:30:07 +08:00
parent 96804ae2e2
commit 91279922f1
7 changed files with 190 additions and 123 deletions

View File

@ -3,6 +3,7 @@
- 新增歌词简体中文转繁体中文,当软件语言被设置为繁体中文后,播放歌曲的歌词也将自动转成繁体中文显示
- 为方便分享歌曲列表,新增单个列表导入/导出功能,可在右击“我的列表”里的列表名后弹出的菜单中使用
- 为防止误删列表,新增删除列表前的确认弹窗
- 新增歌词文本选择复制功能,可在详情页进度条上方的歌词文本选择按钮进入歌词文本选择模式,选择完成后可鼠标右击或者使用系统快捷键复制
### 修复

View File

@ -217,5 +217,10 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
g#icon-comment(fill='currentColor')
// 0 0 24 24
path(d='M16 11H8V9H16V11M22 4V16C22 17.11 21.11 18 20 18H13.9L10.2 21.71C10 21.9 9.75 22 9.5 22H9C8.45 22 8 21.55 8 21V18H4C2.9 18 2 17.11 2 16V4C2 2.89 2.9 2 4 2H20C21.11 2 22 2.9 22 4M20 4H4V16H10V19.08L13.08 16H20V4')
g#icon-text(fill='currentColor')
// 0 0 24 24
path(fill='currentColor', d='M21,6V8H3V6H21M3,18H12V16H3V18M3,13H21V11H3V13Z')
</template>

View File

@ -27,17 +27,28 @@
p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}}
div(:class="$style.right")
div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
div(:class="$style.lyricSpace")
div(:class="[$style.lyricText]" ref="dom_lyric_text")
//- p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
div(:class="$style.lyricSpace")
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
div(:class="[$style.lyricSelectContent, 'select', 'scroll']" v-if="isShowLrcSelectContent" @contextmenu="handleCopySelectText")
//- div(:class="$style.lyricSpace")
div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lyricSelectline, { [$style.lrcActive]: lyric.line == index }]")
span {{info.text}}
br(v-if="info.translation")
span(:class="$style.lyricSelectlineTransition") {{info.translation}}
//- div(:class="$style.lyricSpace")
material-music-comment(:class="$style.comment" :titleFormat="this.setting.download.fileName" :musicInfo="musicInfo" v-model="isShowComment")
div(:class="$style.footer")
div(:class="$style.footerLeft")
div(:class="$style.footerLeftControlBtns")
div(:class="[$style.footerLeftControlBtn, { [$style.active]: isShowLrcSelectContent }]" @click="isShowLrcSelectContent = !isShowLrcSelectContent" :tips="$t('core.player.lyric_select')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-text')
div(:class="[$style.footerLeftControlBtn, isShowComment ? $style.active : null]" @click="isShowComment = !isShowComment" :tips="$t('core.player.comment_show')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-comment')
@ -87,7 +98,7 @@
<script>
import { mapGetters, mapMutations } from 'vuex'
import { base as eventBaseName } from '../../event/names'
import { scrollTo } from '../../utils'
import { clipboardWriteText, scrollTo } from '../../utils'
let cancelScrollFn = null
@ -230,23 +241,22 @@ export default {
lyricLines: [],
isSetedLines: false,
isShowComment: false,
isShowLrcSelectContent: false,
}
},
mounted() {
this.$nextTick(() => {
this.setProgressWidth()
})
document.addEventListener('mousemove', this.handleMouseMsMove)
document.addEventListener('mouseup', this.handleMouseMsUp)
window.addEventListener('resize', this.handleResize)
this.listenEvent()
// console.log('object', this.$refs.dom_lyric_text)
this.setLyric(this.lyricLines)
},
beforeDestroy() {
this.unlistenEvent()
this.clearLyricScrollTimeout()
document.removeEventListener('mousemove', this.handleMouseMsMove)
document.removeEventListener('mouseup', this.handleMouseMsUp)
window.removeEventListener('resize', this.handleResize)
},
computed: {
...mapGetters(['setting']),
@ -256,6 +266,16 @@ export default {
...mapMutations('player', [
'visiblePlayerDetail',
]),
listenEvent() {
document.addEventListener('mousemove', this.handleMouseMsMove)
document.addEventListener('mouseup', this.handleMouseMsUp)
window.addEventListener('resize', this.handleResize)
},
unlistenEvent() {
document.removeEventListener('mousemove', this.handleMouseMsMove)
document.removeEventListener('mouseup', this.handleMouseMsUp)
window.removeEventListener('resize', this.handleResize)
},
setLyric(lines) {
const dom_lines = document.createDocumentFragment()
for (const line of lines) {
@ -359,6 +379,12 @@ export default {
close() {
window.eventHub.$emit(eventBaseName.close)
},
handleCopySelectText() {
let str = window.getSelection().toString()
str = str.trim()
if (!str.length) return
clipboardWriteText(str)
},
},
}
</script>
@ -635,14 +661,41 @@ export default {
// transition: @transition-theme !important;
// transition-property: color, font-size;
// }
// .lrc-active {
// color: @color-theme;
// font-size: 1.2em;
// }
}
.lyricSelectContent {
position: absolute;
left: 0;
top: 0;
// text-align: center;
height: 100%;
width: 100%;
font-size: 16px;
background-color: @color-theme_2-background_1;
z-index: 10;
color: @color-player-detail-lyric;
.lyricSelectline {
padding: 8px 0;
overflow-wrap: break-word;
transition: @transition-theme !important;
transition-property: color, font-size;
line-height: 1.3;
}
.lyricSelectlineTransition {
font-size: 14px;
}
.lrc-active {
color: @color-theme;
}
}
.lyric-space {
height: 70%;
}
.lrc-active {
color: @color-theme;
font-size: 1.2em;
}
.comment {
flex: 0 0 0;
@ -853,6 +906,13 @@ each(@themes, {
// .lrc-active {
// color: ~'@{color-@{value}-theme}';
// }
.lyricSelectContent {
background-color: ~'@{color-@{value}-theme_2-background_1}';
color: ~'@{color-@{value}-player-detail-lyric}';
.lrc-active {
color: ~'@{color-@{value}-theme}';
}
}
.footerLeftControlBtns {
color: ~'@{color-@{value}-theme_2-font}';
}

View File

@ -1,43 +1,43 @@
{
"copy_title": " (Click to copy)",
"volume": "Volume: ",
"pause": "Pause",
"play": "Play",
"prev": "Prev",
"next": "Next",
"playing": "Now playing...",
"stop": "Paused",
"end": "Stopped",
"refresh_url": "Music URL expired, refreshing...",
"error": "Error loading music. Switch to next song after 5 seconds",
"loading": "Music loading...",
"buffering": "Buffering...",
"geting_url": "Getting music link...",
"lyric_error": "Failed to get lyrics",
"hide_detail": "Hide detail page (Right-click in the view to quickly hide the details page)",
"name": "Name: ",
"singer": "Artist: ",
"album": "Album: ",
"add_music_to": "Add the current song to...",
"desktop_lyric_on": "Open Desktop Lyrics",
"desktop_lyric_off": "Close Desktop Lyrics",
"desktop_lyric_lock": "Right click to lock lyrics",
"desktop_lyric_unlock": "Right click to unlock lyrics",
"play_toggle_mode_list_loop": "List Loop",
"play_toggle_mode_random": "List Random",
"play_toggle_mode_list": "Play in order",
"play_toggle_mode_single_loop": "Single Loop",
"play_toggle_mode_off": "Disable",
"pic_tip": "Right click to locate the currently playing song in \"My List\"",
"comment_show": "Song comments",
"comment_hot_loading": "Hot comments are loading",
"comment_new_loading": "Latest comments are loading",
"album": "Album: ",
"buffering": "Buffering...",
"comment_hot_load_error": "Hot comments failed to load, click to try to reload",
"comment_new_load_error": "The latest comment failed to load, click to try to reload",
"comment_refresh": "Refresh comments",
"comment_no_content": "No comments yet",
"comment_hot_loading": "Hot comments are loading",
"comment_hot_title": "Hot Comment",
"comment_new_load_error": "The latest comment failed to load, click to try to reload",
"comment_new_loading": "Latest comments are loading",
"comment_new_title": "Latest comment",
"comment_title": "{name} comment"
"comment_no_content": "No comments yet",
"comment_refresh": "Refresh comments",
"comment_show": "Song comments",
"comment_title": "{name} comment",
"copy_title": " (Click to copy)",
"desktop_lyric_lock": "Right click to lock lyrics",
"desktop_lyric_off": "Close Desktop Lyrics",
"desktop_lyric_on": "Open Desktop Lyrics",
"desktop_lyric_unlock": "Right click to unlock lyrics",
"end": "Stopped",
"error": "Error loading music. Switch to next song after 5 seconds",
"geting_url": "Getting music link...",
"hide_detail": "Hide detail page (Right-click in the view to quickly hide the details page)",
"loading": "Music loading...",
"lyric_error": "Failed to get lyrics",
"lyric_select": "Lyric text selection",
"name": "Name: ",
"next": "Next",
"pause": "Pause",
"pic_tip": "Right click to locate the currently playing song in \"My List\"",
"play": "Play",
"play_toggle_mode_list": "Play in order",
"play_toggle_mode_list_loop": "List Loop",
"play_toggle_mode_off": "Disable",
"play_toggle_mode_random": "List Random",
"play_toggle_mode_single_loop": "Single Loop",
"playing": "Now playing...",
"prev": "Prev",
"refresh_url": "Music URL expired, refreshing...",
"singer": "Artist: ",
"stop": "Paused",
"volume": "Volume: "
}

View File

@ -1,43 +1,43 @@
{
"copy_title": "(点击复制)",
"volume": "当前音量:",
"pause": "暂停",
"play": "播放",
"prev": "上一首",
"next": "下一首",
"playing": "播放中...",
"stop": "暂停播放",
"end": "播放完毕",
"refresh_url": "URL过期正在刷新URL...",
"error": "音频加载出错5 秒后切换下一首",
"loading": "音乐加载中...",
"buffering": "缓冲中...",
"geting_url": "歌曲链接获取中...",
"lyric_error": "歌词获取失败",
"hide_detail": "隐藏详情页(界面内右键双击可快速隐藏详情页)",
"name": "歌曲名:",
"singer": "艺术家:",
"album": "专辑名:",
"add_music_to": "添加当前歌曲到...",
"desktop_lyric_on": "开启桌面歌词",
"desktop_lyric_off": "关闭桌面歌词",
"desktop_lyric_lock": "右击锁定歌词",
"desktop_lyric_unlock": "右击解锁歌词",
"play_toggle_mode_list_loop": "列表循环",
"play_toggle_mode_random": "列表随机",
"play_toggle_mode_list": "顺序播放",
"play_toggle_mode_single_loop": "单曲循环",
"play_toggle_mode_off": "禁用",
"pic_tip": "右击在“我的列表”定位当前播放的歌曲",
"comment_show": "歌曲评论",
"comment_hot_loading": "热门评论加载中",
"comment_new_loading": "最新评论加载中",
"album": "专辑名:",
"buffering": "缓冲中...",
"comment_hot_load_error": "热门评论加载失败,点击尝试重新加载",
"comment_new_load_error": "最新评论加载失败,点击尝试重新加载",
"comment_refresh": "刷新评论",
"comment_no_content": "暂无评论",
"comment_hot_loading": "热门评论加载中",
"comment_hot_title": "热门评论",
"comment_new_load_error": "最新评论加载失败,点击尝试重新加载",
"comment_new_loading": "最新评论加载中",
"comment_new_title": "最新评论",
"comment_title": "{name} 的评论"
"comment_no_content": "暂无评论",
"comment_refresh": "刷新评论",
"comment_show": "歌曲评论",
"comment_title": "{name} 的评论",
"copy_title": "(点击复制)",
"desktop_lyric_lock": "右击锁定歌词",
"desktop_lyric_off": "关闭桌面歌词",
"desktop_lyric_on": "开启桌面歌词",
"desktop_lyric_unlock": "右击解锁歌词",
"end": "播放完毕",
"error": "音频加载出错5 秒后切换下一首",
"geting_url": "歌曲链接获取中...",
"hide_detail": "隐藏详情页(界面内右键双击可快速隐藏详情页)",
"loading": "音乐加载中...",
"lyric_error": "歌词获取失败",
"lyric_select": "歌词文本选择",
"name": "歌曲名:",
"next": "下一首",
"pause": "暂停",
"pic_tip": "右击在“我的列表”定位当前播放的歌曲",
"play": "播放",
"play_toggle_mode_list": "顺序播放",
"play_toggle_mode_list_loop": "列表循环",
"play_toggle_mode_off": "禁用",
"play_toggle_mode_random": "列表随机",
"play_toggle_mode_single_loop": "单曲循环",
"playing": "播放中...",
"prev": "上一首",
"refresh_url": "URL过期正在刷新URL...",
"singer": "艺术家:",
"stop": "暂停播放",
"volume": "当前音量:"
}

View File

@ -1,43 +1,43 @@
{
"copy_title": "(點擊複製)",
"volume": "當前音量:",
"pause": "暫停",
"play": "播放",
"prev": "上一首",
"next": "下一首",
"playing": "播放中...",
"stop": "暫停播放",
"end": "播放完畢",
"refresh_url": "URL過期正在刷新URL...",
"error": "音頻加載出錯5 秒後切換下一首",
"loading": "音樂加載中...",
"buffering": "緩衝中...",
"geting_url": "歌曲鏈接獲取中...",
"lyric_error": "歌詞獲取失敗",
"hide_detail": "隱藏詳情頁(界面內右鍵雙擊可快速隱藏詳情頁)",
"name": "歌曲名:",
"singer": "藝術家:",
"album": "專輯名:",
"add_music_to": "添加當前歌曲到...",
"desktop_lyric_on": "開啟桌面歌詞",
"desktop_lyric_off": "關閉桌面歌詞",
"desktop_lyric_lock": "右擊鎖定歌詞",
"desktop_lyric_unlock": "右擊解鎖歌詞",
"play_toggle_mode_list_loop": "列表循環",
"play_toggle_mode_random": "列表隨機",
"play_toggle_mode_list": "順序播放",
"play_toggle_mode_single_loop": "單曲循環",
"play_toggle_mode_off": "禁用",
"pic_tip": "右擊在“我的列表”定位當前播放的歌曲",
"comment_show": "歌曲評論",
"comment_hot_loading": "熱門評論加載中",
"comment_new_loading": "最新評論加載中",
"album": "專輯名:",
"buffering": "緩衝中...",
"comment_hot_load_error": "熱門評論加載失敗,點擊嘗試重新加載",
"comment_new_load_error": "最新評論加載失敗,點擊嘗試重新加載",
"comment_refresh": "刷新評論",
"comment_no_content": "暫無評論",
"comment_hot_loading": "熱門評論加載中",
"comment_hot_title": "熱門評論",
"comment_new_load_error": "最新評論加載失敗,點擊嘗試重新加載",
"comment_new_loading": "最新評論加載中",
"comment_new_title": "最新評論",
"comment_title": "{name} 的評論"
"comment_no_content": "暫無評論",
"comment_refresh": "刷新評論",
"comment_show": "歌曲評論",
"comment_title": "{name} 的評論",
"copy_title": "(點擊複製)",
"desktop_lyric_lock": "右擊鎖定歌詞",
"desktop_lyric_off": "關閉桌面歌詞",
"desktop_lyric_on": "開啟桌面歌詞",
"desktop_lyric_unlock": "右擊解鎖歌詞",
"end": "播放完畢",
"error": "音頻加載出錯5 秒後切換下一首",
"geting_url": "歌曲鏈接獲取中...",
"hide_detail": "隱藏詳情頁(界面內右鍵雙擊可快速隱藏詳情頁)",
"loading": "音樂加載中...",
"lyric_error": "歌詞獲取失敗",
"lyric_select": "歌詞文本選擇",
"name": "歌曲名:",
"next": "下一首",
"pause": "暫停",
"pic_tip": "右擊在“我的列表”定位當前播放的歌曲",
"play": "播放",
"play_toggle_mode_list": "順序播放",
"play_toggle_mode_list_loop": "列表循環",
"play_toggle_mode_off": "禁用",
"play_toggle_mode_random": "列表隨機",
"play_toggle_mode_single_loop": "單曲循環",
"playing": "播放中...",
"prev": "上一首",
"refresh_url": "URL過期正在刷新URL...",
"singer": "藝術家:",
"stop": "暫停播放",
"volume": "當前音量:"
}

View File

@ -120,6 +120,7 @@ module.exports = class Lyric {
return {
text: line.text,
time: line.time,
translation: line.translation,
dom_line: fontPlayer.lineContent,
}
})