新增歌词文本选择复制功能
parent
96804ae2e2
commit
91279922f1
|
@ -3,6 +3,7 @@
|
|||
- 新增歌词简体中文转繁体中文,当软件语言被设置为繁体中文后,播放歌曲的歌词也将自动转成繁体中文显示
|
||||
- 为方便分享歌曲列表,新增单个列表导入/导出功能,可在右击“我的列表”里的列表名后弹出的菜单中使用
|
||||
- 为防止误删列表,新增删除列表前的确认弹窗
|
||||
- 新增歌词文本选择复制功能,可在详情页进度条上方的歌词文本选择按钮进入歌词文本选择模式,选择完成后可鼠标右击或者使用系统快捷键复制
|
||||
|
||||
### 修复
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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}';
|
||||
}
|
||||
|
|
|
@ -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: "
|
||||
}
|
||||
|
|
|
@ -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": "当前音量:"
|
||||
}
|
||||
|
|
|
@ -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": "當前音量:"
|
||||
}
|
||||
|
|
|
@ -120,6 +120,7 @@ module.exports = class Lyric {
|
|||
return {
|
||||
text: line.text,
|
||||
time: line.time,
|
||||
translation: line.translation,
|
||||
dom_line: fontPlayer.lineContent,
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue