fix lyrics scrolling

resources/cider-ui-tests/index.js

@@ -93,6 +93,7 @@ const app = new Vue({
         mxmtoken: "",
         lyricon: false,
         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;
-
+                app.getActiveLyric()
-                if (document.querySelector(".lyric-line.active")) {
-                    document.querySelector(".lyric-line.active").scrollIntoView({
-                        behavior: "smooth",
-                        block: "center"
-                    })
-                }
                 // 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) {
+        getActiveLyric() {
-            //this.lyriccurrenttime = app.getCurrentTime();
             const delayfix = 0.5
-            if (this.lyriccurrenttime + delayfix >= start  && this.lyriccurrenttime + delayfix <= end) {
+            const prevLine = app.currentLyricsLine;
-                return true;
+            for (var i = 0; i < app.lyrics.length; i++) {
-            } else {
+                if (this.lyriccurrenttime + delayfix >= app.lyrics[i].startTime && this.lyriccurrenttime + delayfix <= app.lyrics[i].endTime) {
-                return false;
+                    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){
@@ -998,3 +1006,13 @@ 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)

resources/cider-ui-tests/views/main.ejs

@@ -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>