github-mirror/YesPlayMusic
github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2025-03-06 02:05:20 +08:00
Code Issues Actions 2 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" v-for="(line, index) in lyricWithTranslation"
:key="index" :key="index"
:id="`line${index}`" :id="`line${index}`"
v-html="formatLine(line)" @click="seek(line.time)"
><span v-html="formatLine(line)"></span
></div> ></div>
</div> </div>
</transition> </transition>
@ -265,6 +266,10 @@ export default {
this.$parent.$refs.player.setProgress(value); this.$parent.$refs.player.setProgress(value);
this.$parent.$refs.player.player.seek(value); this.$parent.$refs.player.player.seek(value);
}, },
seek(value) {
this.$parent.$refs.player.setProgress(value);
this.$parent.$refs.player.player.seek(value);
},
setLyricsInterval() { setLyricsInterval() {
this.lyricsInterval = setInterval(() => { this.lyricsInterval = setInterval(() => {
const progress = this.player.seek() ?? 0; const progress = this.player.seek() ?? 0;
@ -289,9 +294,9 @@ export default {
const showLyricsTranslation = this.$store.state.settings const showLyricsTranslation = this.$store.state.settings
.showLyricsTranslation; .showLyricsTranslation;
if (showLyricsTranslation && line.contents[1]) { if (showLyricsTranslation && line.contents[1]) {
return line.contents[0] + "<br/>" + line.contents[1]; return `<span>${line.contents[0]}<br/>${line.contents[1]}</span>`;
} else { } else {
return line.contents[0]; return `<span>${line.contents[0]}</span>`;
} }
}, },
}, },
@ -459,15 +464,24 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 96px; padding-left: 78px;
max-width: 460px; max-width: 460px;
overflow-y: auto; overflow-y: auto;
transition: 0.5s; transition: 0.5s;
.line { .line {
margin-top: 38px; // margin-top: 38px;
opacity: 0.28; 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; opacity: 0.98;
transition: 0.5s; transition: 0.5s;
} }