github-mirror/YesPlayMusic
github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2025-03-05 10:37:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: click a lyric line to change track current time

Browse Source
This commit is contained in:
qier222 2021-01-29 14:55:57 +08:00
parent 94f7d7b928
commit 6f478be27a
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/lyrics.vue
View File

@ -129,7 +129,8 @@
v-for="(line, index) in lyricWithTranslation"
:key="index"
:id="`line${index}`"
v-html="formatLine(line)"
@click="seek(line.time)"
><span v-html="formatLine(line)"></span
></div>
</div>
</transition>
@ -265,6 +266,10 @@ export default {
this.$parent.$refs.player.setProgress(value);
this.$parent.$refs.player.player.seek(value);
},
seek(value) {
this.$parent.$refs.player.setProgress(value);
this.$parent.$refs.player.player.seek(value);
},
setLyricsInterval() {
this.lyricsInterval = setInterval(() => {
const progress = this.player.seek() ?? 0;
@ -289,9 +294,9 @@ export default {
const showLyricsTranslation = this.$store.state.settings
.showLyricsTranslation;
if (showLyricsTranslation && line.contents[1]) {
return line.contents[0] + "<br/>" + line.contents[1];
return `<span>${line.contents[0]}<br/>${line.contents[1]}</span>`;
} else {
return line.contents[0];
return `<span>${line.contents[0]}</span>`;
}
},
},
@ -459,15 +464,24 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
padding-left: 96px;
padding-left: 78px;
max-width: 460px;
overflow-y: auto;
transition: 0.5s;
.line {
margin-top: 38px;
opacity: 0.28;
// margin-top: 38px;
padding: 18px;
transition: 0.2s;
border-radius: 12px;
&:hover {
background: var(--color-secondary-bg);
}
span {
opacity: 0.28;
cursor: default;
}
}
.highlight {
.highlight span {
opacity: 0.98;
transition: 0.5s;
}