fix album art on uploaded tracks

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,53 +1226,59 @@ 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 {  
-                    return "";
+                this.setLibraryArtBG()}}
-                }
-            } 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";
-                //     }
 
-                // });
+                
-            }
+            } 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"]) {
-                    return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
+                    document.querySelector('.app-playback-controls .artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
                 } else {  
-                    return "";
+                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 {
+                    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/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>