Merge branch 'main' of https://github.com/ciderapp/Cider

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})
@@ -1042,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;
                 }
             }
@@ -1217,57 +1225,74 @@ const app = new Vue({
             return newurl
         },
         getNowPlayingArtworkBG(size = 600) {
+            let interval =  setInterval(()=>{  
             if (!this.mkReady()) {
                 return ""
             }
-            try {
-                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                    return `${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 !== "") {
-                //             //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";
-                //     }
 
-                // });
+            try {
-            }
+                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.src = "";
+                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                    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()}},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() {
+            const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
             try {
-                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                if (data != null && data !== "") {
-                    return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
+                    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 ""
+                document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg")`);
-                // 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)";
-                //     }
-
-                // });
             }
         },
+        async setLibraryArtBG() {
+            const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
+            try {
+                if (data != null && data !== "") {
+                    document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString() ;
+                } 
+            } catch (e) {}
+            
+        },
         quickPlay(query) {
             let self = this
             MusicKit.getInstance().api.search(query, {limit: 2, types: 'songs'}).then(function (data) {

resources/cider-ui-tests/style.css

@@ -710,6 +710,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 {

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"] }}
@@ -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">
@@ -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>
@@ -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>