lyrics working

resources/cider-ui-tests/index.html

@@ -319,7 +319,7 @@
                 </transition>
             </div>
             <div class="app-drawer" v-if="drawertest">
-                <lyrics-view v-if="drawertest && lyricon"></lyrics-view>
+                <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view>
             </div>
         </div>
     </div>
@@ -600,16 +600,16 @@
 </script>
 <script type="text/x-template" id="lyrics-view">
     <div class="md-body lyric-body">
-        <template v-if="app.lyrics">
-            <template v-for="lyric in app.lyrics" v-if="lyric.line != 'lrcInstrumental'">
+        <template v-if="lyrics">
+            <template v-for="lyric in lyrics" v-if="lyric.line != 'lrcInstrumental'">
                 <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
-                    :class="app.getLyricClass(lyric.startTime, lyric.endTime)">
+                    v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
                     {{ lyric.line }}
                 </h3>
             </template>
             <template v-else>
                 <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
-                    :class="app.getLyricClass(lyric.startTime, lyric.endTime)">
+                    v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
                     <div class="lyricWaiting">
                         <div></div>
                         <div></div>

resources/cider-ui-tests/index.js

@@ -53,6 +53,7 @@ Vue.component('mediaitem-list-item', {
 
 Vue.component('lyrics-view', {
     template: '#lyrics-view',
+    props: ["time", "lyrics"],
     methods: {}
 });
 
@@ -128,6 +129,7 @@ const app = new Vue({
         },
         lyricon: false,
         lyrics: [],
+        lyriccurrenttime: 0,
         lyricsMediaItem: {},
         lyricsDebug: {
                 current: 0,
@@ -155,10 +157,12 @@ const app = new Vue({
 
             this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
                 self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
+                self.lyriccurrenttime = app.mk.currentPlaybackTime;
             })
 
             this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
                 self.chrome.artworkReady = false
+                self.lyrics = []
                 app.loadLyrics()
             })
 
@@ -360,9 +364,8 @@ const app = new Vue({
             return parseFloat(this.hmsToSecondsOnly(this.parseTime(this.mk.nowPlayingItem.attributes.durationInMillis - app.mk.currentPlaybackTimeRemaining *1000)));
         },
         getLyricClass(start, end) {
-            let currentTime = app.getCurrentTime();
-            // check if currenttime is between start and end
-            if (currentTime >= start && currentTime <= end) {
+            //this.lyriccurrenttime = app.getCurrentTime();
+            if (this.lyriccurrenttime >= start && this.lyriccurrenttime <= end) {
                 setTimeout(() => {
                     if (document.querySelector(".lyric-line.active")) {
                         document.querySelector(".lyric-line.active").scrollIntoView({
@@ -371,9 +374,9 @@ const app = new Vue({
                         })
                     }
                 }, 200)
-                return "active"
+                return true;
             } else {
-                return ""
+                return false;
             }
         },
         seekTo(time){