okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix lyrics scrolling

Browse source
This commit is contained in:
vapormusic 2021-12-07 16:17:03 +07:00
parent a17403b074
commit f25b78f4d5
2 changed files with 36 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

48
resources/cider-ui-tests/index.js
View file

@ -92,7 +92,8 @@ const app = new Vue({
},
mxmtoken: "",
lyricon: false,
lyrics: [],
lyrics: [],
currentLyricsLine: 0,
lyriccurrenttime: 0,
lyricsMediaItem: {},
lyricsDebug: {
@ -128,13 +129,7 @@ const app = new Vue({
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
self.lyriccurrenttime = app.mk.currentPlaybackTime;
if (document.querySelector(".lyric-line.active")) {
document.querySelector(".lyric-line.active").scrollIntoView({
behavior: "smooth",
block: "center"
})
}
app.getActiveLyric()
// animated dot like AM - bad perf
if (self.lyricon && self.drawertest){
let currentLine = document.querySelector(`.lyric-line.active`)
@ -696,13 +691,26 @@ const app = new Vue({
getCurrentTime() {
return parseFloat(this.hmsToSecondsOnly(this.parseTime(this.mk.nowPlayingItem.attributes.durationInMillis - app.mk.currentPlaybackTimeRemaining *1000)));
},
getLyricClass(start, end) {
//this.lyriccurrenttime = app.getCurrentTime();
getActiveLyric() {
const delayfix = 0.5
if (this.lyriccurrenttime + delayfix >= start && this.lyriccurrenttime + delayfix <= end) {
return true;
} else {
return false;
const prevLine = app.currentLyricsLine;
for (var i = 0; i < app.lyrics.length; i++) {
if (this.lyriccurrenttime + delayfix >= app.lyrics[i].startTime && this.lyriccurrenttime + delayfix <= app.lyrics[i].endTime) {
if (app.currentLyricsLine != i) {
app.currentLyricsLine = i;
if (app.lyricon && document.querySelector(`.lyric-line[line-index="${i}"]`)) {
document.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");
document.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active");
if (checkIfScrollIsStatic) {
document.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
behavior: "smooth",
block: "center"
})
}
}
}
break;
}
}
},
seekTo(time){
@ -997,4 +1005,14 @@ function xmlToJson(xml) {
}
console.log(obj);
return obj;
};
};
var checkIfScrollIsStatic = setInterval(() => {
try{
if (position === document.getElementsByClassName('lyric-body')[0].scrollTop) {
clearInterval(checkIfScrollIsStatic)
// do something
}
position = document.getElementsByClassName('lyric-body')[0].scrollTop } catch (e){}
}, 50)

6
resources/cider-ui-tests/views/main.ejs
View file

@ -423,9 +423,9 @@
<script type="text/x-template" id="lyrics-view">
<div class="md-body lyric-body">
<template v-if="lyrics">
<template v-for="lyric in lyrics" v-if="lyric.line != 'lrcInstrumental'">
<template v-for="(lyric, index) in lyrics" v-if="lyric.line != 'lrcInstrumental'">
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
v-bind:line-index="index.toString()">
{{ lyric.line }}
<div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
{{ lyric.translation }}
@ -434,7 +434,7 @@
</template>
<template v-else>
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
:end="lyric.endTime" v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
:end="lyric.endTime" v-bind:line-index="index.toString()">
<div class="lyricWaiting">
<div class='WaitingDot1'></div>
<div class='WaitingDot2'></div>