Window out of focus will now pause animated artwork

resources/cider-ui-tests/index.js

@@ -46,6 +46,7 @@ class NavigationEvent {
         this.onnavigate = onnavigate;
         this.scrollPosition = scrollPosition;
     }
+
     navigate() {
         this.onnavigate();
         document.querySelector("#app-content").scrollTop = this.scrollPosition;
@@ -166,7 +167,8 @@ const app = new Vue({
                                 currentLine.classList.add('mode1');
                                 currentLine.classList.remove('mode3');
                                 currentLine.classList.remove('mode2');
-                             } catch(e){}
+                            } catch (e) {
+                            }
                             currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
                             currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
                             currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
@@ -178,8 +180,8 @@ const app = new Vue({
                                 currentLine.classList.add('mode2');
                                 currentLine.classList.remove('mode1');
                                 currentLine.classList.remove('mode3');
+                            } catch (e) {
                             }
-                             catch(e){}
                             currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
                             currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
                             currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
@@ -190,7 +192,8 @@ const app = new Vue({
                                 currentLine.classList.add('mode3');
                                 currentLine.classList.remove('mode1');
                                 currentLine.classList.remove('mode2');
-                             } catch(e){}
+                            } catch (e) {
+                            }
                             currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
                             currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
                             currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
@@ -200,8 +203,9 @@ const app = new Vue({
                             try {
                                 currentLine.classList.remove('mode1');
                                 currentLine.classList.remove('mode2');
-                             currentLine.classList.remove('mode3');}
+                                currentLine.classList.remove('mode3');
-                             catch(e){}
+                            } catch (e) {
+                            }
                             currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
                             currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
                             currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
@@ -209,7 +213,8 @@ const app = new Vue({
 
                         }
 
-                }}
+                    }
+                }
             })
 
             this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
@@ -234,8 +239,14 @@ const app = new Vue({
         },
         async getPlaylistFromID(id) {
             try {
-            this.showingPlaylist = await app.mk.api.library.playlist(id)} catch (e){console.log(e);
+                this.showingPlaylist = await app.mk.api.library.playlist(id)
-            try{this.showingPlaylist = await app.mk.api.playlist(id)} catch (err) {console.log(err)}    
+            } catch (e) {
+                console.log(e);
+                try {
+                    this.showingPlaylist = await app.mk.api.playlist(id)
+                } catch (err) {
+                    console.log(err)
+                }
             }
 
         },
@@ -277,8 +288,14 @@ const app = new Vue({
                             video.play();
                             return "";
                         });
-            });} else {  console.log("hso"); return "";}
+                    });
-        } else { return "";}
+                } else {
+                    console.log("hso");
+                    return "";
+                }
+            } else {
+                return "";
+            }
         },
         getArtistPalette(artist) {
             if (artist["attributes"]["artwork"]) {
@@ -297,16 +314,17 @@ const app = new Vue({
             let self = this
             app.showingPlaylist = [];
             let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')) : (item.type ?? ''));
-            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
+            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id ?? '')) : (item.id ?? ''));
+            ;
             let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
             console.log(kind, id, isLibrary)
             if (kind.toString().includes("artist")) {
                 app.getArtistInfo(id, isLibrary)
-            }
+            } else if (!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo")) {
-            else if(!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo"))
+                app.page = (kind) + "_" + (id);
-            {app.page = (kind) + "_"+ (id); 
                 console.log("oks");
-            app.getTypeFromID((kind),(id), (isLibrary),{extend:  "editorialVideo"});} else {
+                app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo"});
+            } else {
                 app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
             }
             document.querySelector("#app-content").scrollTop = 0
@@ -320,7 +338,8 @@ const app = new Vue({
             document.getElementById("apple-music-video-container").style.display = "none";
         },
         getArtistInfo(id, isLibrary) {
-            var query = {"omit[resource]": "autos",
+            var query = {
+                "omit[resource]": "autos",
                 views: ["featured-release", "full-albums", "appears-on-albums", "featured-albums", "featured-on-albums", "singles", "compilation-albums", "live-albums", "latest-release", "top-music-videos", "similar-artists", "top-songs", "playlists", "more-to-hear", "more-to-see"],
                 extend: ["artistBio", "bornOrFormed", "editorialArtwork", "editorialVideo", "isGroup", "origin", "hero"],
                 "extend[playlists]": ["trackCount"],
@@ -329,13 +348,15 @@ const app = new Vue({
                 limit: {
                     "artists:top-songs": 20
                 },
-            "art[url]": "f"};
+                "art[url]": "f"
+            };
             this.getArtistFromID(id)
             //this.getTypeFromID("artist",id,isLibrary,query)
         },
         playMediaItem(item) {
             let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')) : (item.type ?? ''));
-            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
+            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id ?? '')) : (item.id ?? ''));
+            ;
             let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
             console.log(kind, id, isLibrary)
             app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
@@ -345,17 +366,25 @@ const app = new Vue({
             var a;
             try {
                 a = await this.mkapi(kind.toString(), isLibrary, id.toString(), params);
-            }
+            } catch (e) {
-            catch (e) {
                 console.log(e);
                 try {
                     console.log("opp", !isLibrary);
                     a = await this.mkapi(kind.toString(), !isLibrary, id.toString(), params);
-                } catch (err) { console.log(err); a = [] } finally { this.showingPlaylist = a }
+                } catch (err) {
-            } finally { this.showingPlaylist = a };
+                    console.log(err);
+                    a = []
+                } finally {
+                    this.showingPlaylist = a
+                }
+            } finally {
+                this.showingPlaylist = a
+            }
+            ;
         },
         searchLibrarySongs() {
             let self = this
+
             function sortSongs() {
                 if (self.library.songs.sortOrder == "asc") {
                     // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in ascending order based on alphabetical order and numeric order
@@ -406,6 +435,7 @@ const app = new Vue({
                     })
                 }
             }
+
             if (this.library.songs.search == "") {
                 this.library.songs.displayListing = this.library.songs.listing
                 sortSongs()
@@ -513,7 +543,8 @@ const app = new Vue({
         getTotalTime() {
             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 ""
+                return app.showingPlaylist.relationships.tracks.data.length + " tracks, " + time + " mins.";
+            } else return ""
         },
         async getLibrarySongs() {
             var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
@@ -609,6 +640,7 @@ const app = new Vue({
             function revisedRandId() {
                 return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
             }
+
             /* get token */
             function getToken(mode, track, artist, songid, lang, time) {
                 if (attempt > 2) {
@@ -649,8 +681,10 @@ const app = new Vue({
                         console.log('error');
                         app.loadAMLyrics();
                     };
-                req.send();}
+                    req.send();
                 }
+            }
+
             function getMXMSubs(track, artist, token, lang, time) {
                 var usertoken = encodeURIComponent(token);
                 var timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`;
@@ -683,10 +717,20 @@ const app = new Vue({
                                 for (var i = u.length - 1; i >= 0; i--) {
                                     let xline = (/(\[[0-9.:\[\]]*\])+(.*)/).exec(u[i])
                                     let end = (preLrc.length > 0) ? ((preLrc[preLrc.length - 1].startTime) ?? 99999) : 99999
-                                    preLrc.push({ startTime: app.toMS(xline[1].substring(1,xline[1].length - 2)) ?? 0, endTime: end, line: xline[2], translation: '' })
+                                    preLrc.push({
+                                        startTime: app.toMS(xline[1].substring(1, xline[1].length - 2)) ?? 0,
+                                        endTime: end,
+                                        line: xline[2],
+                                        translation: ''
+                                    })
                                 }
                                 if (preLrc.length > 0)
-                                     preLrc.push({startTime: 0,endTime: preLrc[preLrc.length-1].startTime, line: "lrcInstrumental", translation: ''});
+                                    preLrc.push({
+                                        startTime: 0,
+                                        endTime: preLrc[preLrc.length - 1].startTime,
+                                        line: "lrcInstrumental",
+                                        translation: ''
+                                    });
                                 app.lyrics = preLrc.reverse();
                                 if (lrcfile != null && lrcfile != '') {
                                     // load translation
@@ -706,6 +750,7 @@ const app = new Vue({
                 }
                 req.send();
             }
+
             function getMXMTrans(id, lang, token) {
                 if (lang != "disabled" && id != '') {
                     let usertoken = encodeURIComponent(token);
@@ -781,7 +826,11 @@ const app = new Vue({
                     start = this.toMS(element.getAttribute('begin'))
                     end = this.toMS(element.getAttribute('end'))
                     if (start - endTimes[endTimes.length - 1] > 5 && endTimes[endTimes.length - 1] != 0) {
-                    preLrc.push({startTime: endTimes[endTimes.length - 1],endTime: start, line: "lrcInstrumental"});
+                        preLrc.push({
+                            startTime: endTimes[endTimes.length - 1],
+                            endTime: start,
+                            line: "lrcInstrumental"
+                        });
                     }
                     preLrc.push({startTime: start, endTime: end, line: element.textContent});
                     endTimes.push(end);
@@ -1096,6 +1145,17 @@ const app = new Vue({
             })
 
             // tracks are found in relationship.data
+        },
+        windowFocus(val) {
+            if(val) {
+                document.querySelectorAll(".animated-artwork-video").forEach(el => {
+                    el.play()
+                })
+            } else {
+                document.querySelectorAll(".animated-artwork-video").forEach(el => {
+                    el.pause()
+                })
+            }
         }
     }
 })
@@ -1115,12 +1175,24 @@ document.addEventListener('musickitloaded', function () {
             app.init()
         }, 1000)
     }
+
     const request = new XMLHttpRequest();
     request.addEventListener("load", initMusicKit);
     request.open("GET", "https://api.cider.sh/");
     request.send();
 });
 
+function refreshFocus() {
+    if (document.hasFocus() == false) {
+        app.windowFocus(false)
+    } else {
+        app.windowFocus(true)
+    }
+    setTimeout(refreshFocus, 200);
+}
+
+refreshFocus();
+
 function xmlToJson(xml) {
 
     // Create the return object
@@ -1166,7 +1238,9 @@ var checkIfScrollIsStatic = setInterval(() => {
             clearInterval(checkIfScrollIsStatic)
             // do something
         }
-    position = document.getElementsByClassName('lyric-body')[0].scrollTop } catch (e){}
+        position = document.getElementsByClassName('lyric-body')[0].scrollTop
+    } catch (e) {
+    }
 
 }, 50);
 

resources/cider-ui-tests/views/components/animatedartwork-view.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="animatedartwork-view">
     <template v-if="video">
         <div class="animated" v-bind:vid="app.hashCode(video).toString()">
-            <video loop id = "animated-artwork"></video>
+            <video class="animated-artwork-video" loop id="animated-artwork"></video>
         </div>
     </template>
 </script>
@@ -14,7 +14,8 @@
             if (this.video) {
                 this.$nextTick(function () {
                     app.playAnimatedArtwork(this.video);
-            })}
+                })
+            }
         }
     });
 </script>