From 90c3e44619606694caa7754436e6c36d6b9565c4 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Wed, 8 Dec 2021 19:35:26 +0700
Subject: [PATCH 1/4] fix album art on uploaded tracks

---
 resources/cider-ui-tests/index.js       | 91 ++++++++++++++-----------
 resources/cider-ui-tests/views/main.ejs |  4 +-
 2 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 7c0a288f..2a0337d1 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -127,6 +127,8 @@ const app = new Vue({
         },
         mxmtoken: "",
         lyricon: false,
+        currentTrackID: '',
+        currentTrackIDBG: '',
         lyrics: [],
         currentLyricsLine: 0,
         lyriccurrenttime: 0,
@@ -250,6 +252,8 @@ const app = new Vue({
                 }
                 self.chrome.artworkReady = false
                 self.lyrics = []
+                app.getNowPlayingArtwork(42);
+                app.getNowPlayingArtworkBG(32);
                 app.loadLyrics()
             })
 
@@ -700,10 +704,11 @@ const app = new Vue({
             downloadChunk()
         },
         getTotalTime() {
+            try{
             if (app.showingPlaylist.relationships.tracks.data.length > 0) {
                 time = Math.round([].concat(...app.showingPlaylist.relationships.tracks.data).reduce((a, {attributes: {durationInMillis}}) => a + durationInMillis, 0) / 60000);
                 return app.showingPlaylist.relationships.tracks.data.length + " tracks, " + time + " mins.";
-            } else return ""
+            } else return ""} catch(err){return ""}
         },
         async getLibrarySongs() {
             var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
@@ -1221,52 +1226,58 @@ const app = new Vue({
                 return ""
             }
             try {
+                if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackID) {
+                    this.currentTrackID = this.mk.nowPlayingItem.id;
+                    document.querySelector('.bg-artwork').style.setProperty('--artwork', '');
                 if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                    return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
+                    document.querySelector('.bg-artwork').style.setProperty('--artwork',`url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`);
+                } else {  
+                this.setLibraryArtBG()}}
+
+                
+            } catch (e) { 
+                this.setLibraryArtBG()}
+        },
+        getNowPlayingArtwork(size = 600) {    
+            try {
+                if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackIDBG) {
+                    this.currentTrackIDBG = this.mk.nowPlayingItem.id;
+                    document.querySelector('.app-playback-controls .artwork').src = "";
+                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                    document.querySelector('.app-playback-controls .artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
+                } else {  
+                this.setLibraryArt()}}
+
+                
+            } catch (e) { 
+                this.setLibraryArt()
+              
+            }
+
+
+            
+        },
+        
+        async setLibraryArt() {
+            const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
+            try {
+                if (data != null && data !== "") {
+                    document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', 'url("' + (data["attributes"]["artwork"]["url"]).toString() + '")');
                 } else {
-                    return "";
+                    document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg`);
                 }
             } catch (e) {
-                return ""
-                // Does not work
-                // this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {
-                //     try {
-                //         if (data != null && data !== "") {
-                //             //document.getElementsByClassName("bg-artwork")[0].setAttribute('src', `${data["attributes"]["artwork"]["url"]}`)
-                //             return  `${data["attributes"]["artwork"]["url"]}`;
-                //         } else {
-                //             return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg";
-                //         }
-                //     } catch (e) {
-                //         return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg";
-                //     }
-
-                // });
+                document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg`);
             }
         },
-        getNowPlayingArtwork(size = 600) {
+        async setLibraryArtBG() {
+            const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
             try {
-                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                    return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
-                } else {
-                    return "";
-                }
-            } catch (e) {
-                return ""
-                // Does not work
-                // this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {
-                //     try {
-                //         if (data != null && data !== "") {
-                //             return  `url(${data["attributes"]["artwork"]["url"]})`;
-                //         } else {
-                //             return "url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg)";
-                //         }
-                //     } catch (e) {
-                //         return "url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg)";
-                //     }
-
-                // });
-            }
+                if (data != null && data !== "") {
+                    document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString() ;
+                } 
+            } catch (e) {}
+            
         },
         quickPlay(query) {
             let self = this
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index ee70390d..991db20d 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -61,7 +61,7 @@
                     <div class="app-chrome-item playback-controls">
                         <template v-if="mkReady()">
                             <div class="app-playback-controls">
-                                <div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
+                                <div class="artwork" ></div>
                                 <div class="playback-info">
                                     <div class="song-name">
                                         {{ mk.nowPlayingItem["attributes"]["name"] }}
@@ -320,7 +320,7 @@
         </div>
         <transition name="wpfade">
             <img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
-                :src="getNowPlayingArtworkBG(32)">
+                >
         </transition>
         <transition name="wpfade">
             <div class="bg-artwork--placeholder" v-else></div>

From f76fa0bd1f3b9c5103d2fa014fcba472fa80e4be Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Wed, 8 Dec 2021 21:50:36 +0700
Subject: [PATCH 2/4] fix artwork (again)

---
 resources/cider-ui-tests/index.js | 61 ++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 2a0337d1..b3bf3b15 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1222,40 +1222,51 @@ const app = new Vue({
             return newurl
         },
         getNowPlayingArtworkBG(size = 600) {
+            let interval =  setInterval(()=>{  
             if (!this.mkReady()) {
                 return ""
             }
+
             try {
-                if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackID) {
+                if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackID && document.querySelector('.bg-artwork')) {
+                    if (document.querySelector('.bg-artwork')){
+                        clearInterval(interval);
+                    }
                     this.currentTrackID = this.mk.nowPlayingItem.id;
-                    document.querySelector('.bg-artwork').style.setProperty('--artwork', '');
+                    document.querySelector('.bg-artwork').style.src = "";
                 if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                    document.querySelector('.bg-artwork').style.setProperty('--artwork',`url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`);
+                    document.querySelector('.bg-artwork').style.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
                 } else {  
-                this.setLibraryArtBG()}}
-
-                
-            } catch (e) { 
                 this.setLibraryArtBG()}
-        },
-        getNowPlayingArtwork(size = 600) {    
-            try {
-                if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackIDBG) {
-                    this.currentTrackIDBG = this.mk.nowPlayingItem.id;
-                    document.querySelector('.app-playback-controls .artwork').src = "";
-                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                    document.querySelector('.app-playback-controls .artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
-                } else {  
-                this.setLibraryArt()}}
-
-                
+            }       
             } catch (e) { 
-                this.setLibraryArt()
-              
-            }
+                this.setLibraryArtBG()}},200)
+        },
+        getNowPlayingArtwork(size = 600) {
+            let interval = setInterval(() => {
+
+                try {
+                    if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) {
+                        this.currentTrackIDBG = this.mk.nowPlayingItem.id;
+                        if (document.querySelector('.app-playback-controls .artwork') != null) {
+                            clearInterval(interval);
+                        }
+                        document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', '');
+                        if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                            document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
+                        } else {
+                            this.setLibraryArt()
+                        }
+                    }
+                } catch (e) {
+                    console.log(e);
+                    this.setLibraryArt()
+
+                }
+            }, 200)
+
 
 
-            
         },
         
         async setLibraryArt() {
@@ -1264,10 +1275,10 @@ const app = new Vue({
                 if (data != null && data !== "") {
                     document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', 'url("' + (data["attributes"]["artwork"]["url"]).toString() + '")');
                 } else {
-                    document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg`);
+                    document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg")`);
                 }
             } catch (e) {
-                document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg`);
+                document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg")`);
             }
         },
         async setLibraryArtBG() {

From 71d75f4fae350b018044fcbf9131ff28d9aa408e Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Wed, 8 Dec 2021 22:21:03 +0700
Subject: [PATCH 3/4] change appearance of the alt volume slider

---
 resources/cider-ui-tests/style.css      | 14 ++++++++++++++
 resources/cider-ui-tests/views/main.ejs |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index a394fba4..cb1df0bd 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -713,6 +713,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     display: none !important;
 }
 
+.web-slider.display--small{
+    margin: 10px;
+}
+
+input[type="range"].web-slider.display--small::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    background: rgb(50 50 50);
+    cursor: default;
+    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+}
+
 /* Window is smaller <= 1023px width */
 @media only screen and (max-width: 1023px) {
     .display--small {
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 991db20d..4a1c522e 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -168,7 +168,7 @@
                         </div>
                     </transition>
                     <div class="app-sidebar-footer">
-                        <input type="range" class="display--small" step="0.01" min="0" max="1" v-model="mk.volume"
+                        <input type="range" class="web-slider display--small" step="0.01" min="0" max="1" v-model="mk.volume"
                         v-if="typeof mk.volume != 'undefined'">
                         <button class="app-sidebar-button" style="width:100%"
                             @click="chrome.menuOpened = !chrome.menuOpened">

From a88d7f93fba387195e5a93de282d279dea5dbbaa Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Wed, 8 Dec 2021 22:41:49 +0700
Subject: [PATCH 4/4] some lyrics fixes: disable click on unsynced & fix
 waiting dot

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

diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index b3bf3b15..7fb1141f 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1047,7 +1047,10 @@ const app = new Vue({
                                 })
                             }
                         }
-                    }
+                    } else if (app.currentLyricsLine == 0) {
+                        if (!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/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 4a1c522e..0d7ed2eb 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -430,9 +430,9 @@
     <!-- Lyrics View -->
     <script type="text/x-template" id="lyrics-view">
         <div class="md-body lyric-body">
-        <template v-if="lyrics">
+        <template v-if="lyrics && lyrics != []">
             <template v-for="(lyric, index) in lyrics" v-if="lyric.line != 'lrcInstrumental'">
-                <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
+                <h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
                 v-bind:line-index="index.toString()">
                     {{ lyric.line }}
                     <div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
@@ -441,7 +441,7 @@
                 </h3>
             </template>
             <template v-else>
-                <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
+                <h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
                     :end="lyric.endTime" v-bind:line-index="index.toString()">
                     <div class="lyricWaiting">
                         <div class='WaitingDot1'></div>