Window out of focus will now pause animated artwork
This commit is contained in:
booploops
parent
b5ee061205
commit
e5a1762650
2 changed files with 316 additions and 241 deletions
|
|
@ -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');}
|
||||
catch(e){}
|
||||
currentLine.classList.remove('mode3');
|
||||
} 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);
|
||||
try{this.showingPlaylist = await app.mk.api.playlist(id)} catch (err) {console.log(err)}
|
||||
this.showingPlaylist = await app.mk.api.library.playlist(id)
|
||||
} 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"))
|
||||
{app.page = (kind) + "_"+ (id);
|
||||
} else if (!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo")) {
|
||||
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 }
|
||||
} finally { this.showingPlaylist = a };
|
||||
} catch (err) {
|
||||
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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue