From ec13b75a2f1b050255e99b30c9f2fda258a907ad Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Thu, 9 Dec 2021 16:52:55 +0700
Subject: [PATCH] fix lyrics caption

---
 resources/cider-ui-tests/index.js       | 4 ++--
 resources/cider-ui-tests/style.less     | 1 +
 resources/cider-ui-tests/views/main.ejs | 5 +++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 6d71b36e..6567bd99 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1158,8 +1158,8 @@ const app = new Vue({
                                 })
                             }
                         }
-                    } else if (app.currentLyricsLine == 0) {
-                        if (!document.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
+                    } else if (app.currentLyricsLine == 0) {                
+                        if (document.querySelector(`.lyric-line[line-index="0"]`) && !document.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
                         document.querySelector(`.lyric-line[line-index="0"]`).classList.add("active");
                     } 
                     break;
diff --git a/resources/cider-ui-tests/style.less b/resources/cider-ui-tests/style.less
index ba0afddd..edb9eca5 100644
--- a/resources/cider-ui-tests/style.less
+++ b/resources/cider-ui-tests/style.less
@@ -2225,6 +2225,7 @@ div#captions {
   transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.6);
   color: yellow;
+  white-space: pre-line;
 }
 
 [v-cloak] {
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 85d5e89f..04bd3a21 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -351,8 +351,9 @@
                             fill-rule="nonzero"/>
                 </svg>
             </div>
-            <div id="captions">{{(lyricon) ? ((lyrics.length > 0 ) ?
-                lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}
+            <div id="captions">{{((lyricon) ? ((lyrics.length > 0 ) ?
+                lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length > 0 ) ?
+                    (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") : '')}} 
             </div>
             <div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
                  title="Picture-in-Picture">