captions for mv

resources/cider-ui-tests/index.js

@@ -140,7 +140,8 @@ 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 (self.lyricon) app.getActiveLyric();
                 // animated dot like AM - bad perf
                 if (self.lyricon && self.drawertest){
                     let currentLine = document.querySelector(`.lyric-line.active`)

resources/cider-ui-tests/style.css

@@ -2012,3 +2012,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 img[src=""] {  
     text-indent: -10000px;
 }
+
+div#captions {
+    font-size: 1.2rem;
+    position: absolute;
+    top: 85%;
+    text-align: center;
+    width: auto;
+    align-self: center;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(0,0,0,0.6);
+    color: yellow;
+}

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

@@ -100,7 +100,7 @@
                     </div>
                     <div class="app-chrome-item generic">
                         <button class="playback-button--small lyrics"
-                            @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
+                            @click=" lyricon =!lyricon; if( document.getElementById(`apple-music-video-container`).style.display != `block`){drawertest = !drawertest}; "></button>
                     </div>
                     <div class="app-chrome-item full-height">
                         <div class="window-controls">
@@ -341,6 +341,7 @@
                             fill-rule="nonzero" />
                     </svg>
                 </div>
+                <div id="captions">{{(app.lyricon) ? ((app.lyrics.length > 0 ) ? app.lyrics[app.currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}</div>
                 <div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
                     title="Picture-in-Picture">
                     <%- include("svg/fullscreen.svg") %>