github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2025-02-03 07:17:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: lyrics won't scroll to top after switch track

Browse Source
This commit is contained in:
qier222 2021-01-15 14:46:19 +08:00
parent f3c8576bd4
commit cfc42be2db
3 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Player.vue
View File

@ -156,7 +156,7 @@ export default {
mounted() { mounted() {
setInterval(() => { setInterval(() => {
this.progress = ~~this.player.seek(); this.progress = ~~this.player.seek();
}, 1000); }, 500);
if (isAccountLoggedIn()) { if (isAccountLoggedIn()) {
userLikedSongsIDs(this.data.user.userId).then((data) => { userLikedSongsIDs(this.data.user.userId).then((data) => {
this.updateLikedSongs(data.ids); this.updateLikedSongs(data.ids);

4
src/utils/lyrics.js
View File

@ -2,8 +2,8 @@
export function lyricParser(lrc) { export function lyricParser(lrc) {
return { return {
lyric: parseLyric(lrc.lrc.lyric || ""), lyric: parseLyric(lrc?.lrc?.lyric || ""),
tlyric: parseLyric(lrc.tlyric.lyric || ""), tlyric: parseLyric(lrc?.tlyric?.lyric || ""),
lyricuser: lrc.lyricUser, lyricuser: lrc.lyricUser,
transuser: lrc.transUser, transuser: lrc.transUser,
}; };

24
src/views/lyrics.vue
View File

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