From d710254ba867bd03e427d867b1cab9c07ffad248 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Tue, 7 Dec 2021 22:25:04 +0700
Subject: [PATCH] captions for mv

---
 resources/cider-ui-tests/index.js       |  3 ++-
 resources/cider-ui-tests/style.css      | 13 +++++++++++++
 resources/cider-ui-tests/views/main.ejs |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 1557cd03..7efaf70d 100644
--- a/resources/cider-ui-tests/index.js
+++ b/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`)
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 69d8c186..44e4130b 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -2011,4 +2011,17 @@ 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;
 }
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 93d89850..b678ce27 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/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") %>