okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Window out of focus will now pause animated artwork

Browse source
This commit is contained in:
booploops 2021-12-07 18:50:08 -08:00
parent b5ee061205
commit e5a1762650
2 changed files with 316 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

548
resources/cider-ui-tests/index.js
View file

@ -46,6 +46,7 @@ class NavigationEvent {
this.onnavigate = onnavigate; this.onnavigate = onnavigate;
this.scrollPosition = scrollPosition; this.scrollPosition = scrollPosition;
} }
navigate() { navigate() {
this.onnavigate(); this.onnavigate();
document.querySelector("#app-content").scrollTop = this.scrollPosition; document.querySelector("#app-content").scrollTop = this.scrollPosition;
@ -109,14 +110,14 @@ const app = new Vue({
}, },
mxmtoken: "", mxmtoken: "",
lyricon: false, lyricon: false,
lyrics: [], lyrics: [],
currentLyricsLine: 0, currentLyricsLine: 0,
lyriccurrenttime: 0, lyriccurrenttime: 0,
lyricsMediaItem: {}, lyricsMediaItem: {},
lyricsDebug: { lyricsDebug: {
current: 0, current: 0,
start: 0, start: 0,
end: 0 end: 0
}, },
chrome: { chrome: {
hideUserInfo: false, hideUserInfo: false,
@ -143,79 +144,83 @@ const app = new Vue({
this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "") this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
// load cached library // load cached library
if(localStorage.getItem("librarySongs") != null) { if (localStorage.getItem("librarySongs") != null) {
this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs")) this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs"))
this.library.songs.displayListing = this.library.songs.listing this.library.songs.displayListing = this.library.songs.listing
} }
MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player") MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player")
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => { this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime) self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
self.lyriccurrenttime = app.mk.currentPlaybackTime; self.lyriccurrenttime = app.mk.currentPlaybackTime;
if (self.lyricon) app.getActiveLyric(); if (self.lyricon) app.getActiveLyric();
// animated dot like AM - bad perf // animated dot like AM - bad perf
if (self.lyricon && self.drawertest){ if (self.lyricon && self.drawertest) {
let currentLine = document.querySelector(`.lyric-line.active`) let currentLine = document.querySelector(`.lyric-line.active`)
if (currentLine && currentLine.getElementsByClassName('lyricWaiting').length > 0){ if (currentLine && currentLine.getElementsByClassName('lyricWaiting').length > 0) {
let duration = currentLine.getAttribute("end") - currentLine.getAttribute("start"); let duration = currentLine.getAttribute("end") - currentLine.getAttribute("start");
let u = ( self.lyriccurrenttime - currentLine.getAttribute("start") ) / duration; let u = (self.lyriccurrenttime - currentLine.getAttribute("start")) / duration;
if (u < 0.25 && !currentLine.classList.contains('mode1')){ if (u < 0.25 && !currentLine.classList.contains('mode1')) {
try{ try {
currentLine.classList.add('mode1'); currentLine.classList.add('mode1');
currentLine.classList.remove('mode3'); currentLine.classList.remove('mode3');
currentLine.classList.remove('mode2'); 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('WaitingDot1')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``; currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 0.25; currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25; currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 0.25;
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
} else if (u >= 0.25 && u < 0.5 && !currentLine.classList.contains('mode2')){
try{ } else if (u >= 0.25 && u < 0.5 && !currentLine.classList.contains('mode2')) {
currentLine.classList.add('mode2'); try {
currentLine.classList.remove('mode1'); currentLine.classList.add('mode2');
currentLine.classList.remove('mode3'); 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('WaitingDot2')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``; currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1; currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25; currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
} else if (u >= 0.5 && u < 0.75 && !currentLine.classList.contains('mode3')){ currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
try{ } else if (u >= 0.5 && u < 0.75 && !currentLine.classList.contains('mode3')) {
currentLine.classList.add('mode3'); try {
currentLine.classList.remove('mode1'); currentLine.classList.add('mode3');
currentLine.classList.remove('mode2'); currentLine.classList.remove('mode1');
} catch(e){} currentLine.classList.remove('mode2');
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`; } catch (e) {
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``; }
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``; 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.opacity = 1; currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1; currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
} else if (u >= 0.75 && currentLine.classList.contains('mode3')){ currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
try{ currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
currentLine.classList.remove('mode1'); } else if (u >= 0.75 && currentLine.classList.contains('mode3')) {
currentLine.classList.remove('mode2'); try {
currentLine.classList.remove('mode3');} currentLine.classList.remove('mode1');
catch(e){} currentLine.classList.remove('mode2');
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``; currentLine.classList.remove('mode3');
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``; } catch (e) {
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1; }
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1; currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
} }
}} }
}
}) })
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => { this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
let type = (self.mk.nowPlayingItem != null) ? self.mk.nowPlayingItem["type"] ?? '' : ''; let type = (self.mk.nowPlayingItem != null) ? self.mk.nowPlayingItem["type"] ?? '' : '';
if (type.includes("musicVideo") || type.includes("uploadedVideo")){ if (type.includes("musicVideo") || type.includes("uploadedVideo")) {
document.getElementById("apple-music-video-container").style.display = "block"; document.getElementById("apple-music-video-container").style.display = "block";
// app.chrome.topChromeVisible = false // app.chrome.topChromeVisible = false
} else { } else {
@ -232,14 +237,20 @@ const app = new Vue({
}) })
document.body.removeAttribute("loading") document.body.removeAttribute("loading")
}, },
async getPlaylistFromID(id){ async getPlaylistFromID(id) {
try{ 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)
}
} }
}, },
async getArtistFromID(id){ async getArtistFromID(id) {
var artistData = await this.mkapi("artists", false, id, { var artistData = await this.mkapi("artists", false, id, {
"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", "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": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
@ -256,114 +267,132 @@ const app = new Vue({
var hash = 0, i, chr; var hash = 0, i, chr;
if (str.length === 0) return hash; if (str.length === 0) return hash;
for (i = 0; i < str.length; i++) { for (i = 0; i < str.length; i++) {
chr = str.charCodeAt(i); chr = str.charCodeAt(i);
hash = ((hash << 5) - hash) + chr; hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer hash |= 0; // Convert to 32bit integer
} }
return hash; return hash;
}, },
playAnimatedArtwork(url){ playAnimatedArtwork(url) {
if (Hls.isSupported()) { if (Hls.isSupported()) {
var video = document.querySelector(`[vid="${app.hashCode(url)}"] > video`) var video = document.querySelector(`[vid="${app.hashCode(url)}"] > video`)
console.log('supported'); console.log('supported');
var hls = new Hls(); var hls = new Hls();
// bind them together // bind them together
if (video){ if (video) {
hls.attachMedia(video); hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () { hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log('video and hls.js are now bound together !'); console.log('video and hls.js are now bound together !');
hls.loadSource(url); hls.loadSource(url);
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
video.play(); video.play();
return "";
});
});
} else {
console.log("hso");
return ""; return "";
}); }
});} else { console.log("hso"); return "";} } else {
} else { return "";} return "";
}
}, },
getArtistPalette(artist){ getArtistPalette(artist) {
if(artist["attributes"]["artwork"]) { if (artist["attributes"]["artwork"]) {
return { return {
"background": "#" + artist["attributes"]["artwork"]["bgColor"], "background": "#" + artist["attributes"]["artwork"]["bgColor"],
"color": "#" + artist["attributes"]["artwork"]["textColor1"], "color": "#" + artist["attributes"]["artwork"]["textColor1"],
} }
}else{ } else {
return { return {
"background": "#000000", "background": "#000000",
"color": "#ffffff", "color": "#ffffff",
} }
} }
}, },
routeView (item){ routeView(item) {
let self = this let self = this
app.showingPlaylist = []; app.showingPlaylist = [];
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')); 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; let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
console.log(kind, id, isLibrary) console.log(kind, id, isLibrary)
if(kind.toString().includes("artist")){ if (kind.toString().includes("artist")) {
app.getArtistInfo(id, isLibrary) 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");
console.log("oks"); app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo"});
app.getTypeFromID((kind),(id), (isLibrary),{extend: "editorialVideo"});} else { } else {
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '') app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
} }
document.querySelector("#app-content").scrollTop = 0 document.querySelector("#app-content").scrollTop = 0
}, },
pushNavigationEvent(item){ pushNavigationEvent(item) {
let self = this let self = this
}, },
exitMV(){ exitMV() {
MusicKit.getInstance().stop() MusicKit.getInstance().stop()
document.getElementById("apple-music-video-container").style.display = "none"; document.getElementById("apple-music-video-container").style.display = "none";
}, },
getArtistInfo(id, isLibrary){ getArtistInfo(id, isLibrary) {
var query = {"omit[resource]": "autos", var query = {
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"], "omit[resource]": "autos",
extend: ["artistBio", "bornOrFormed", "editorialArtwork", "editorialVideo", "isGroup", "origin", "hero"], 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[playlists]": ["trackCount"], extend: ["artistBio", "bornOrFormed", "editorialArtwork", "editorialVideo", "isGroup", "origin", "hero"],
"omit[resource:songs]": "relationships", "extend[playlists]": ["trackCount"],
"fields[albums]": [...["fields[albums]"], "trackCount"], "omit[resource:songs]": "relationships",
limit: { "fields[albums]": [...["fields[albums]"], "trackCount"],
"artists:top-songs": 20 limit: {
}, "artists:top-songs": 20
"art[url]": "f"}; },
"art[url]": "f"
};
this.getArtistFromID(id) this.getArtistFromID(id)
//this.getTypeFromID("artist",id,isLibrary,query) //this.getTypeFromID("artist",id,isLibrary,query)
}, },
playMediaItem(item){ playMediaItem(item) {
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')); 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; let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
console.log(kind, id, isLibrary) console.log(kind, id, isLibrary)
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '') app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
}, },
async getTypeFromID(kind,id, isLibrary = false, params = {}){ async getTypeFromID(kind, id, isLibrary = false, params = {}) {
var a; var a;
try { try {
a = await this.mkapi(kind.toString(), isLibrary, id.toString(), params); a = await this.mkapi(kind.toString(), isLibrary, id.toString(), params);
} } catch (e) {
catch (e) {
console.log(e); console.log(e);
try { try {
console.log("opp", !isLibrary); console.log("opp", !isLibrary);
a = await this.mkapi(kind.toString(), !isLibrary, id.toString(), params); 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() { searchLibrarySongs() {
let self = this let self = this
function sortSongs () {
if(self.library.songs.sortOrder == "asc") { 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 // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in ascending order based on alphabetical order and numeric order
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.songs.displayListing.sort((a, b) => { self.library.songs.displayListing.sort((a, b) => {
let aa = null; let aa = null;
let bb = null; let bb = null;
if(self.library.songs.sorting == "genre") { if (self.library.songs.sorting == "genre") {
aa = a.attributes.genreNames[0] aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0] bb = b.attributes.genreNames[0]
} }
@ -382,11 +411,11 @@ const app = new Vue({
} }
}) })
} }
if(self.library.songs.sortOrder == "desc") { if (self.library.songs.sortOrder == "desc") {
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.songs.displayListing.sort((a, b) => { self.library.songs.displayListing.sort((a, b) => {
if(self.library.songs.sorting == "genre") { if (self.library.songs.sorting == "genre") {
aa = a.attributes.genreNames[0] aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0] bb = b.attributes.genreNames[0]
} }
@ -406,12 +435,13 @@ const app = new Vue({
}) })
} }
} }
if (this.library.songs.search == "") { if (this.library.songs.search == "") {
this.library.songs.displayListing = this.library.songs.listing this.library.songs.displayListing = this.library.songs.listing
sortSongs() sortSongs()
} else { } else {
this.library.songs.displayListing = this.library.songs.listing.filter(item => { this.library.songs.displayListing = this.library.songs.listing.filter(item => {
if(item.attributes.name.toLowerCase().includes(this.library.songs.search.toLowerCase())) { if (item.attributes.name.toLowerCase().includes(this.library.songs.search.toLowerCase())) {
return item return item
} }
}) })
@ -443,9 +473,9 @@ const app = new Vue({
getLibraryGenres() { getLibraryGenres() {
let genres = [] let genres = []
genres = [] genres = []
this.library.songs.listing.forEach((item)=>{ this.library.songs.listing.forEach((item) => {
item.attributes.genreNames.forEach((genre)=>{ item.attributes.genreNames.forEach((genre) => {
if(!genres.includes(genre)){ if (!genres.includes(genre)) {
genres.push(genre) genres.push(genre)
} }
}) })
@ -459,11 +489,11 @@ const app = new Vue({
if ((this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) && !force) { if ((this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) && !force) {
return return
} }
if(localStorage.getItem("librarySongs") != null) { if (localStorage.getItem("librarySongs") != null) {
this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs")) this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs"))
this.searchLibrarySongs() this.searchLibrarySongs()
} }
if(this.songstest) { if (this.songstest) {
return return
} }
this.library.songs.downloadState = 1 this.library.songs.downloadState = 1
@ -485,11 +515,11 @@ const app = new Vue({
library = library.concat(downloaded.data) library = library.concat(downloaded.data)
self.library.songs.meta.total = downloaded.meta.total self.library.songs.meta.total = downloaded.meta.total
self.library.songs.meta.progress = library.length self.library.songs.meta.progress = library.length
if(downloaded.meta.total == 0) { if (downloaded.meta.total == 0) {
self.library.songs.downloadState = 3 self.library.songs.downloadState = 3
return return
} }
if(typeof downloaded.next == "undefined") { if (typeof downloaded.next == "undefined") {
console.log("downloaded.next is undefined") console.log("downloaded.next is undefined")
self.library.songs.listing = library self.library.songs.listing = library
self.library.songs.downloadState = 2 self.library.songs.downloadState = 2
@ -510,10 +540,11 @@ const app = new Vue({
downloadChunk() downloadChunk()
}, },
getTotalTime(){ getTotalTime() {
if (app.showingPlaylist.relationships.tracks.data.length > 0){ 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); 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() { async getLibrarySongs() {
var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0}) var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
@ -587,8 +618,8 @@ const app = new Vue({
}, },
loadLyrics() { loadLyrics() {
this.loadMXM(); this.loadMXM();
}, },
loadAMLyrics(){ loadAMLyrics() {
const songID = (this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem["_songId"] ?? -1 : -1; const songID = (this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem["_songId"] ?? -1 : -1;
// this.getMXM( trackName, artistName, 'en', duration); // this.getMXM( trackName, artistName, 'en', duration);
if (songID != -1) { if (songID != -1) {
@ -599,7 +630,7 @@ const app = new Vue({
}) })
} }
}, },
loadMXM(){ loadMXM() {
let attempt = 0; let attempt = 0;
const track = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.title ?? '' : ''); const track = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.title ?? '' : '');
const artist = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.artistName ?? '' : ''); const artist = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.artistName ?? '' : '');
@ -609,51 +640,54 @@ const app = new Vue({
function revisedRandId() { function revisedRandId() {
return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10); return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
} }
/* get token */ /* get token */
function getToken(mode, track, artist, songid, lang, time) { function getToken(mode, track, artist, songid, lang, time) {
if (attempt > 2){ if (attempt > 2) {
app.loadAMLyrics(); app.loadAMLyrics();
} else { } else {
attempt = attempt + 1; attempt = attempt + 1;
let url = "https://apic-desktop.musixmatch.com/ws/1.1/token.get?app_id=web-desktop-app-v1.0&t=" + revisedRandId(); let url = "https://apic-desktop.musixmatch.com/ws/1.1/token.get?app_id=web-desktop-app-v1.0&t=" + revisedRandId();
let req = new XMLHttpRequest(); let req = new XMLHttpRequest();
req.overrideMimeType("application/json"); req.overrideMimeType("application/json");
req.open('GET', url, true); req.open('GET', url, true);
req.setRequestHeader("authority", "apic-desktop.musixmatch.com"); req.setRequestHeader("authority", "apic-desktop.musixmatch.com");
req.onload = function () { req.onload = function () {
let jsonResponse = JSON.parse(this.responseText); let jsonResponse = JSON.parse(this.responseText);
let status2 = jsonResponse["message"]["header"]["status_code"]; let status2 = jsonResponse["message"]["header"]["status_code"];
if (status2 == 200) { if (status2 == 200) {
let token = jsonResponse["message"]["body"]["user_token"] ?? ''; let token = jsonResponse["message"]["body"]["user_token"] ?? '';
if (token != "" && token != "UpgradeOnlyUpgradeOnlyUpgradeOnlyUpgradeOnly") { if (token != "" && token != "UpgradeOnlyUpgradeOnlyUpgradeOnlyUpgradeOnly") {
console.log('200 token',mode); console.log('200 token', mode);
// token good // token good
app.mxmtoken = token; app.mxmtoken = token;
if (mode == 1) { if (mode == 1) {
getMXMSubs(track, artist, app.mxmtoken, lang, time); getMXMSubs(track, artist, app.mxmtoken, lang, time);
} else {
getMXMTrans(songid, lang, app.mxmtoken);
}
} else { } else {
getMXMTrans(songid, lang, app.mxmtoken); console.log('fake 200 token');
getToken(mode, track, artist, songid, lang, time)
} }
} else { } else {
console.log('fake 200 token'); console.log('token 4xx');
getToken(mode, track, artist, songid, lang, time) getToken(mode, track, artist, songid, lang, time)
} }
} else {
console.log('token 4xx');
getToken(mode, track, artist, songid, lang, time)
}
}; };
req.onerror = function () { req.onerror = function () {
console.log('error'); console.log('error');
app.loadAMLyrics(); app.loadAMLyrics();
}; };
req.send();} req.send();
}
} }
function getMXMSubs(track, artist, token, lang, time) { function getMXMSubs(track, artist, token, lang, time) {
var usertoken = encodeURIComponent(token); var usertoken = encodeURIComponent(token);
var timecustom = ( !time || (time && time < 0)) ? '': `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`; var timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`;
var url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + "&usertoken=" + usertoken + timecustom + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId(); var url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + "&usertoken=" + usertoken + timecustom + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId();
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
req.overrideMimeType("application/json"); req.overrideMimeType("application/json");
@ -676,21 +710,31 @@ const app = new Vue({
console.log('track not found'); console.log('track not found');
app.loadAMLyrics() app.loadAMLyrics()
} else { } else {
// process lrcfile to json here // process lrcfile to json here
app.lyricsMediaItem = lrcfile app.lyricsMediaItem = lrcfile
let u = app.lyricsMediaItem.split(/[\r\n]/); let u = app.lyricsMediaItem.split(/[\r\n]/);
let preLrc = [] let preLrc = []
for (var i = u.length -1; i >= 0; i--) { for (var i = u.length - 1; i >= 0; i--) {
let xline = (/(\[[0-9.:\[\]]*\])+(.*)/).exec(u[i]) let xline = (/(\[[0-9.:\[\]]*\])+(.*)/).exec(u[i])
let end = (preLrc.length > 0) ? ((preLrc[preLrc.length-1].startTime) ?? 99999) : 99999 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,
if (preLrc.length > 0) endTime: end,
preLrc.push({startTime: 0,endTime: preLrc[preLrc.length-1].startTime, line: "lrcInstrumental", translation: ''}); line: xline[2],
app.lyrics = preLrc.reverse(); translation: ''
})
}
if (preLrc.length > 0)
preLrc.push({
startTime: 0,
endTime: preLrc[preLrc.length - 1].startTime,
line: "lrcInstrumental",
translation: ''
});
app.lyrics = preLrc.reverse();
if (lrcfile != null && lrcfile != '') { if (lrcfile != null && lrcfile != '') {
// load translation // load translation
getMXMTrans(id, lang, token); getMXMTrans(id, lang, token);
} else { } else {
app.loadAMLyrics() app.loadAMLyrics()
} }
@ -706,6 +750,7 @@ const app = new Vue({
} }
req.send(); req.send();
} }
function getMXMTrans(id, lang, token) { function getMXMTrans(id, lang, token) {
if (lang != "disabled" && id != '') { if (lang != "disabled" && id != '') {
let usertoken = encodeURIComponent(token); let usertoken = encodeURIComponent(token);
@ -724,16 +769,16 @@ const app = new Vue({
let u = app.lyrics; let u = app.lyrics;
let translation_list = jsonResponse2["message"]["body"]["translations_list"]; let translation_list = jsonResponse2["message"]["body"]["translations_list"];
if (translation_list.length > 0) { if (translation_list.length > 0) {
for (var i = 0; i < u.length - 1; i++) { for (var i = 0; i < u.length - 1; i++) {
preTrans[i] = "" preTrans[i] = ""
for (var trans_line of translation_list){ for (var trans_line of translation_list) {
if (u[i].line == " "+trans_line["translation"]["matched_line"]){ if (u[i].line == " " + trans_line["translation"]["matched_line"]) {
u[i].translation = trans_line["translation"]["description"]; u[i].translation = trans_line["translation"]["description"];
break; break;
} }
} }
} }
app.lyrics = u; app.lyrics = u;
} }
} catch (e) { } catch (e) {
/// not found trans -> ignore /// not found trans -> ignore
@ -744,56 +789,60 @@ const app = new Vue({
} }
req2.send(); req2.send();
} }
} }
if (track != "" & track != "No Title Found"){ if (track != "" & track != "No Title Found") {
if ( app.mxmtoken != null && app.mxmtoken != '' ) { if (app.mxmtoken != null && app.mxmtoken != '') {
console.log("we good"); console.log("we good");
getMXMSubs(track, artist, app.mxmtoken, lang, time) getMXMSubs(track, artist, app.mxmtoken, lang, time)
} else { } else {
console.log("get token"); console.log("get token");
getToken(1,track, artist, '', lang, time); getToken(1, track, artist, '', lang, time);
} }
} }
}, },
toMS(str) { toMS(str) {
let rawTime = str.match(/(\d+:)?(\d+:)?(\d+)(\.\d+)?/); let rawTime = str.match(/(\d+:)?(\d+:)?(\d+)(\.\d+)?/);
let hours = (rawTime[2] != null) ? (rawTime[1].replace(":", "")) : 0; let hours = (rawTime[2] != null) ? (rawTime[1].replace(":", "")) : 0;
let minutes = (rawTime[2] != null) ? (hours * 60 + rawTime[2].replace(":", "") * 1 ) : ((rawTime[1] != null) ? rawTime[1].replace(":", "") : 0); let minutes = (rawTime[2] != null) ? (hours * 60 + rawTime[2].replace(":", "") * 1) : ((rawTime[1] != null) ? rawTime[1].replace(":", "") : 0);
let seconds = (rawTime[3] != null) ? (rawTime[3]) : 0; let seconds = (rawTime[3] != null) ? (rawTime[3]) : 0;
let milliseconds = (rawTime[4] != null) ? (rawTime[4].replace(".", "") ) : 0 let milliseconds = (rawTime[4] != null) ? (rawTime[4].replace(".", "")) : 0
return parseFloat(`${minutes * 60 + seconds * 1 }.${milliseconds * 1}`) ; return parseFloat(`${minutes * 60 + seconds * 1}.${milliseconds * 1}`);
}, },
parseTTML(){ parseTTML() {
this.lyrics = []; this.lyrics = [];
let preLrc = []; let preLrc = [];
let xml = this.stringToXml(this.lyricsMediaItem); let xml = this.stringToXml(this.lyricsMediaItem);
let lyricsLines = xml.getElementsByTagName('p'); let lyricsLines = xml.getElementsByTagName('p');
let synced = true; let synced = true;
let endTimes = []; let endTimes = [];
if (xml.getElementsByTagName('tt')[0].getAttribute("itunes:timing") === "None"){ if (xml.getElementsByTagName('tt')[0].getAttribute("itunes:timing") === "None") {
synced = false; synced = false;
} }
endTimes.push(0); endTimes.push(0);
if (synced) { if (synced) {
for (element of lyricsLines){ for (element of lyricsLines) {
start = this.toMS(element.getAttribute('begin')) start = this.toMS(element.getAttribute('begin'))
end = this.toMS(element.getAttribute('end')) end = this.toMS(element.getAttribute('end'))
if (start - endTimes[endTimes.length - 1] > 5 && endTimes[endTimes.length - 1] != 0 ){ 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);
} }
preLrc.push({startTime: start ,endTime: end, line: element.textContent}); // first line dot
endTimes.push(end); if (preLrc.length > 0)
} preLrc.unshift({startTime: 0, endTime: preLrc[0].startTime, line: "lrcInstrumental"});
// first line dot
if (preLrc.length > 0)
preLrc.unshift({startTime: 0,endTime: preLrc[0].startTime, line: "lrcInstrumental"});
} else { } else {
for (element of lyricsLines){ for (element of lyricsLines) {
preLrc.push({startTime: 9999999 ,endTime: 9999999 , line: element.textContent}); preLrc.push({startTime: 9999999, endTime: 9999999, line: element.textContent});
} }
} }
this.lyrics = preLrc; this.lyrics = preLrc;
}, },
@ -809,7 +858,7 @@ const app = new Vue({
}, },
getCurrentTime() { getCurrentTime() {
return parseFloat(this.hmsToSecondsOnly(this.parseTime(this.mk.nowPlayingItem.attributes.durationInMillis - app.mk.currentPlaybackTimeRemaining *1000))); return parseFloat(this.hmsToSecondsOnly(this.parseTime(this.mk.nowPlayingItem.attributes.durationInMillis - app.mk.currentPlaybackTimeRemaining * 1000)));
}, },
getActiveLyric() { getActiveLyric() {
const delayfix = 0.5 const delayfix = 0.5
@ -833,8 +882,8 @@ const app = new Vue({
} }
} }
}, },
seekTo(time){ seekTo(time) {
this.mk.seekToTime(time); this.mk.seekToTime(time);
}, },
parseTime(value) { parseTime(value) {
var minutes = Math.floor(value / 60000); var minutes = Math.floor(value / 60000);
@ -889,7 +938,7 @@ const app = new Vue({
MusicKit.getInstance().play() MusicKit.getInstance().play()
}) })
} }
}catch(err){ } catch (err) {
console.log(err) console.log(err)
this.playMediaItemById(id, kind, isLibrary, raurl) this.playMediaItemById(id, kind, isLibrary, raurl)
} }
@ -923,7 +972,7 @@ const app = new Vue({
break; break;
case "record_label": case "record_label":
return "Record Labels" return "Record Labels"
break; break;
case "radio_episode": case "radio_episode":
return "Episodes" return "Episodes"
break; break;
@ -935,7 +984,7 @@ const app = new Vue({
break; break;
case "top": case "top":
return "Top" return "Top"
break; break;
default: default:
return type return type
break; break;
@ -968,26 +1017,26 @@ const app = new Vue({
let self = this let self = this
let id = "" let id = ""
// ugly code to check if current playback item is in library // ugly code to check if current playback item is in library
if(typeof playParams == "undefined"){ if (typeof playParams == "undefined") {
return true return true
} }
if(playParams["isLibrary"]) { if (playParams["isLibrary"]) {
return true return true
}else if(playParams["catalogId"]) { } else if (playParams["catalogId"]) {
id = playParams["catalogId"] id = playParams["catalogId"]
}else if(playParams["id"]) { } else if (playParams["id"]) {
id = playParams["id"] id = playParams["id"]
} }
var found = this.library.songs.listing.filter((item)=>{ var found = this.library.songs.listing.filter((item) => {
if(item["attributes"]){ if (item["attributes"]) {
if(item["attributes"]["playParams"] && (item["attributes"]["playParams"]["catalogId"] == id)){ if (item["attributes"]["playParams"] && (item["attributes"]["playParams"]["catalogId"] == id)) {
return item; return item;
} }
} }
}) })
if(found.length != 0) { if (found.length != 0) {
return true return true
}else{ } else {
return false return false
} }
}, },
@ -1096,13 +1145,24 @@ const app = new Vue({
}) })
// tracks are found in relationship.data // 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()
})
}
} }
} }
}) })
document.addEventListener('musickitloaded', function () { document.addEventListener('musickitloaded', function () {
// MusicKit global is now defined // MusicKit global is now defined
function initMusicKit () { function initMusicKit() {
let parsedJson = JSON.parse(this.responseText) let parsedJson = JSON.parse(this.responseText)
MusicKit.configure({ MusicKit.configure({
developerToken: parsedJson.Key, developerToken: parsedJson.Key,
@ -1115,14 +1175,26 @@ document.addEventListener('musickitloaded', function () {
app.init() app.init()
}, 1000) }, 1000)
} }
const request = new XMLHttpRequest(); const request = new XMLHttpRequest();
request.addEventListener("load", initMusicKit); request.addEventListener("load", initMusicKit);
request.open("GET", "https://api.cider.sh/"); request.open("GET", "https://api.cider.sh/");
request.send(); request.send();
}); });
function refreshFocus() {
if (document.hasFocus() == false) {
app.windowFocus(false)
} else {
app.windowFocus(true)
}
setTimeout(refreshFocus, 200);
}
refreshFocus();
function xmlToJson(xml) { function xmlToJson(xml) {
// Create the return object // Create the return object
var obj = {}; var obj = {};
@ -1161,12 +1233,14 @@ function xmlToJson(xml) {
}; };
var checkIfScrollIsStatic = setInterval(() => { var checkIfScrollIsStatic = setInterval(() => {
try{ try {
if (position === document.getElementsByClassName('lyric-body')[0].scrollTop) { if (position === document.getElementsByClassName('lyric-body')[0].scrollTop) {
clearInterval(checkIfScrollIsStatic) clearInterval(checkIfScrollIsStatic)
// do something // do something
}
position = document.getElementsByClassName('lyric-body')[0].scrollTop
} catch (e) {
} }
position = document.getElementsByClassName('lyric-body')[0].scrollTop } catch (e){}
}, 50); }, 50);

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

@ -1,7 +1,7 @@
<script type="text/x-template" id="animatedartwork-view"> <script type="text/x-template" id="animatedartwork-view">
<template v-if="video"> <template v-if="video">
<div class="animated" v-bind:vid="app.hashCode(video).toString()"> <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> </div>
</template> </template>
</script> </script>
@ -12,9 +12,10 @@
props: ['video'], props: ['video'],
mounted() { mounted() {
if (this.video) { if (this.video) {
this.$nextTick(function () { this.$nextTick(function () {
app.playAnimatedArtwork(this.video); app.playAnimatedArtwork(this.video);
})} })
}
} }
}); });
</script> </script>