|
|
|
@ -119,6 +119,7 @@
|
|
|
|
|
<div class="right-side">
|
|
|
|
|
<transition name="slide-fade">
|
|
|
|
|
<div class="lyrics-container" ref="lyricsContainer" v-show="!noLyric">
|
|
|
|
|
<div class="line" id="line-1"></div>
|
|
|
|
|
<div
|
|
|
|
|
class="line"
|
|
|
|
|
:class="{
|
|
|
|
@ -127,7 +128,7 @@
|
|
|
|
|
:style="lineStyles"
|
|
|
|
|
v-for="(line, index) in lyricWithTranslation"
|
|
|
|
|
:key="index"
|
|
|
|
|
:id="`line-${index}`"
|
|
|
|
|
:id="`line${index}`"
|
|
|
|
|
v-html="formatLine(line)"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
@ -162,7 +163,7 @@ export default {
|
|
|
|
|
lyricsInterval: null,
|
|
|
|
|
lyric: [],
|
|
|
|
|
tlyric: [],
|
|
|
|
|
highlightLyricIndex: -1,
|
|
|
|
|
highlightLyricIndex: 0,
|
|
|
|
|
minimize: true,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
@ -244,7 +245,7 @@ export default {
|
|
|
|
|
...mapMutations(["toggleLyrics"]),
|
|
|
|
|
getLyric() {
|
|
|
|
|
return getLyric(this.currentTrack.id).then((data) => {
|
|
|
|
|
if (data.nolyric) {
|
|
|
|
|
if (!data?.lrc?.lyric) {
|
|
|
|
|
this.lyric = [];
|
|
|
|
|
this.tlyric = [];
|
|
|
|
|
return false;
|
|
|
|
@ -275,10 +276,12 @@ export default {
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
if (oldHighlightLyricIndex !== this.highlightLyricIndex) {
|
|
|
|
|
const el = document.getElementById(
|
|
|
|
|
`line-${this.highlightLyricIndex}`
|
|
|
|
|
);
|
|
|
|
|
if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
|
|
|
const el = document.getElementById(`line${this.highlightLyricIndex}`);
|
|
|
|
|
if (el)
|
|
|
|
|
el.scrollIntoView({
|
|
|
|
|
behavior: "smooth",
|
|
|
|
|
block: "center",
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, 500);
|
|
|
|
|
},
|
|
|
|
@ -294,12 +297,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
currentTrack() {
|
|
|
|
|
this.getLyric().then((result) => {
|
|
|
|
|
if (result) {
|
|
|
|
|
const el = document.getElementById(`line-0`);
|
|
|
|
|
el.scrollIntoView({ block: "center" });
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.getLyric();
|
|
|
|
|
},
|
|
|
|
|
showLyrics(show) {
|
|
|
|
|
if (show) {
|
|
|
|
|