added tests commands for modular ui elements

This commit is contained in:
booploops 2021-12-27 23:47:15 -08:00
parent b57fe0f3ac
commit df6ba93242
2 changed files with 199 additions and 153 deletions

View file

@ -279,6 +279,13 @@ const app = new Vue({
}, },
}, },
methods: { methods: {
modularUITest(val = false) {
if (val) {
document.querySelector("#app-main").classList.add("modular-fs")
} else {
document.querySelector("#app-main").classList.remove("modular-fs")
}
},
navigateBack() { navigateBack() {
history.back() history.back()
}, },
@ -286,16 +293,16 @@ const app = new Vue({
history.forward() history.forward()
}, },
getHTMLStyle() { getHTMLStyle() {
switch(this.cfg.visual.window_transparency) { switch (this.cfg.visual.window_transparency) {
case "acrylic": case "acrylic":
default: default:
document.querySelector("html").style.background = ""; document.querySelector("html").style.background = "";
document.querySelector("body").style.background = ""; document.querySelector("body").style.background = "";
break; break;
case "disabled": case "disabled":
document.querySelector("html").style.background = "#222"; document.querySelector("html").style.background = "#222";
document.querySelector("body").style.background = "#222"; document.querySelector("body").style.background = "#222";
break; break;
} }
}, },
resetState() { resetState() {
@ -338,10 +345,10 @@ const app = new Vue({
this.mk = MusicKit.getInstance() this.mk = MusicKit.getInstance()
this.mk.authorize() this.mk.authorize()
this.$forceUpdate() this.$forceUpdate()
if(this.isDev) { if (this.isDev) {
this.mk.privateEnabled = true this.mk.privateEnabled = true
} }
if(this.cfg.visual.hw_acceleration == "disabled") { if (this.cfg.visual.hw_acceleration == "disabled") {
document.body.classList.add("no-gpu") document.body.classList.add("no-gpu")
} }
this.mk._services.timing.mode = 0 this.mk._services.timing.mode = 0
@ -376,55 +383,56 @@ const app = new Vue({
this.library.albums.displayListing = this.library.albums.listing this.library.albums.displayListing = this.library.albums.listing
} }
window.onbeforeunload = function(e) { window.onbeforeunload = function (e) {
window.localStorage.setItem("currentTrack",JSON.stringify(app.mk.nowPlayingItem)) window.localStorage.setItem("currentTrack", JSON.stringify(app.mk.nowPlayingItem))
window.localStorage.setItem("currentTime",JSON.stringify(app.mk.currentPlaybackTime)) window.localStorage.setItem("currentTime", JSON.stringify(app.mk.currentPlaybackTime))
window.localStorage.setItem("currentQueue",JSON.stringify(app.mk.queue.items)) window.localStorage.setItem("currentQueue", JSON.stringify(app.mk.queue.items))
}; };
// load last played track // load last played track
try { try {
let lastItem = window.localStorage.getItem("currentTrack") let lastItem = window.localStorage.getItem("currentTrack")
let time = window.localStorage.getItem("currentTime") let time = window.localStorage.getItem("currentTime")
let queue = window.localStorage.getItem("currentQueue") let queue = window.localStorage.getItem("currentQueue")
if (lastItem != null) { if (lastItem != null) {
lastItem = JSON.parse(lastItem) lastItem = JSON.parse(lastItem)
let kind = lastItem.attributes.playParams.kind; let kind = lastItem.attributes.playParams.kind;
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind; let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.setQueue({ [truekind]: [lastItem.attributes.playParams.id] }) app.mk.setQueue({ [truekind]: [lastItem.attributes.playParams.id] })
app.mk.mute() app.mk.mute()
setTimeout(() =>{ setTimeout(() => {
app.mk.play().then(() => { app.mk.play().then(() => {
app.mk.pause().then(() => { app.mk.pause().then(() => {
if (time != null) { if (time != null) {
app.mk.seekToTime(time) app.mk.seekToTime(time)
} }
app.mk.unmute() app.mk.unmute()
if (queue != null ){ if (queue != null) {
queue = JSON.parse(queue) queue = JSON.parse(queue)
if (queue && queue.length > 0){ if (queue && queue.length > 0) {
let ids = queue.map ( e => (e.playParams ? e.playParams.id : (e.attributes.playParams ? e.attributes.playParams.id : '') )) let ids = queue.map(e => (e.playParams ? e.playParams.id : (e.attributes.playParams ? e.attributes.playParams.id : '')))
let i = 0; let i = 0;
if (ids.length > 0) { if (ids.length > 0) {
for (id of ids){ for (id of ids) {
if (!(i == 0 && ids[0] == lastItem.attributes.playParams.id)){ if (!(i == 0 && ids[0] == lastItem.attributes.playParams.id)) {
try{ try {
app.mk.playLater({songs: [id] }) app.mk.playLater({ songs: [id] })
} catch (err){} } catch (err) { }
} }
i++; i++;
} }
} }
}
} }
}
})
}) })
}, 1500)
})},1500)
} }
} catch (e) {console.log(e)} } catch (e) { console.log(e) }
MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player") MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player")
@ -842,7 +850,7 @@ const app = new Vue({
window.location.hash = `${kind}/${id}` window.location.hash = `${kind}/${id}`
document.querySelector("#app-content").scrollTop = 0 document.querySelector("#app-content").scrollTop = 0
}else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) { } else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) {
if (kind.toString().includes("record-label")) { if (kind.toString().includes("record-label")) {
kind = "recordLabel" kind = "recordLabel"
} else { } else {
@ -889,7 +897,7 @@ const app = new Vue({
let artistId = ''; let artistId = '';
try { try {
if (item.relationships.artists && item.relationships.artists.data.length > 0 && !item.relationships.artists.data[0].type.includes("library")) { if (item.relationships.artists && item.relationships.artists.data.length > 0 && !item.relationships.artists.data[0].type.includes("library")) {
if (item.relationships.artists.data[0].type === "artist" || item.relationships.artists.data[0].type === "artists" ) { if (item.relationships.artists.data[0].type === "artist" || item.relationships.artists.data[0].type === "artists") {
artistId = item.relationships.artists.data[0].id artistId = item.relationships.artists.data[0].id
} }
} }
@ -1170,70 +1178,70 @@ const app = new Vue({
sortAlbums() sortAlbums()
} }
}, },
// make a copy of searchLibrarySongs except use Albums instead of Songs // make a copy of searchLibrarySongs except use Albums instead of Songs
searchLibraryArtists(index) { searchLibraryArtists(index) {
let self = this let self = this
function sortArtists() { function sortArtists() {
// sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting[index]] in descending or ascending order based on alphabetical order and numeric order // sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting[index]] in descending or ascending order based on alphabetical order and numeric order
// check if album.attributes[self.library.albums.sorting[index]] is a number and if so, sort by number if not, sort by alphabetical order ignoring case // check if album.attributes[self.library.albums.sorting[index]] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.artists.displayListing.sort((a, b) => { self.library.artists.displayListing.sort((a, b) => {
let aa = a.attributes[self.library.artists.sorting[index]] let aa = a.attributes[self.library.artists.sorting[index]]
let bb = b.attributes[self.library.artists.sorting[index]] let bb = b.attributes[self.library.artists.sorting[index]]
if (self.library.artists.sorting[index] == "genre") { if (self.library.artists.sorting[index] == "genre") {
aa = a.attributes.genreNames[0] aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0] bb = b.attributes.genreNames[0]
}
if (aa == null) {
aa = ""
}
if (bb == null) {
bb = ""
}
if (self.library.artists.sortOrder[index] == "asc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return aa - bb
} else {
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
}
} else if (self.library.artists.sortOrder[index] == "desc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return bb - aa
} else {
return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
}
}
})
} }
if (aa == null) {
if (this.library.artists.search == "") { aa = ""
this.library.artists.displayListing = this.library.artists.listing
sortArtists()
} else {
this.library.artists.displayListing = this.library.artists.listing.filter(item => {
let itemName = item.attributes.name.toLowerCase()
let searchTerm = this.library.artists.search.toLowerCase()
let artistName = ""
let albumName = ""
// if (item.attributes.artistName != null) {
// artistName = item.attributes.artistName.toLowerCase()
// }
// if (item.attributes.albumName != null) {
// albumName = item.attributes.albumName.toLowerCase()
// }
// remove any non-alphanumeric characters and spaces from search term and item name
searchTerm = searchTerm.replace(/[^a-z0-9 ]/gi, "")
itemName = itemName.replace(/[^a-z0-9 ]/gi, "")
if (itemName.includes(searchTerm) || artistName.includes(searchTerm) || albumName.includes(searchTerm)) {
return item
}
})
sortArtists()
} }
}, if (bb == null) {
bb = ""
}
if (self.library.artists.sortOrder[index] == "asc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return aa - bb
} else {
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
}
} else if (self.library.artists.sortOrder[index] == "desc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return bb - aa
} else {
return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
}
}
})
}
if (this.library.artists.search == "") {
this.library.artists.displayListing = this.library.artists.listing
sortArtists()
} else {
this.library.artists.displayListing = this.library.artists.listing.filter(item => {
let itemName = item.attributes.name.toLowerCase()
let searchTerm = this.library.artists.search.toLowerCase()
let artistName = ""
let albumName = ""
// if (item.attributes.artistName != null) {
// artistName = item.attributes.artistName.toLowerCase()
// }
// if (item.attributes.albumName != null) {
// albumName = item.attributes.albumName.toLowerCase()
// }
// remove any non-alphanumeric characters and spaces from search term and item name
searchTerm = searchTerm.replace(/[^a-z0-9 ]/gi, "")
itemName = itemName.replace(/[^a-z0-9 ]/gi, "")
if (itemName.includes(searchTerm) || artistName.includes(searchTerm) || albumName.includes(searchTerm)) {
return item
}
})
sortArtists()
}
},
getSidebarItemClass(page) { getSidebarItemClass(page) {
if (this.page == page) { if (this.page == page) {
return ["active"] return ["active"]
@ -1247,7 +1255,7 @@ const app = new Vue({
} }
try { try {
if (library) { if (library) {
return await this.mk.api.library[method](term, params, params2) return await this.mk.api.library[method](term, params, params2)
} else { } else {
return await this.mk.api[method](term, params, params2) return await this.mk.api[method](term, params, params2)
} }
@ -1617,13 +1625,14 @@ const app = new Vue({
}, },
loadLyrics() { loadLyrics() {
const musicType = (MusicKit.getInstance().nowPlayingItem != null) ? MusicKit.getInstance().nowPlayingItem["type"] ?? '' : ''; const musicType = (MusicKit.getInstance().nowPlayingItem != null) ? MusicKit.getInstance().nowPlayingItem["type"] ?? '' : '';
console.log("mt",musicType) console.log("mt", musicType)
if (musicType === "musicVideo") { if (musicType === "musicVideo") {
this.loadYTLyrics();} else { this.loadYTLyrics();
if(app.cfg.lyrics.enable_mxm){ } else {
this.loadMXM(); if (app.cfg.lyrics.enable_mxm) {
} else {this.loadAMLyrics();} this.loadMXM();
} } else { this.loadAMLyrics(); }
}
}, },
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;
@ -1642,10 +1651,10 @@ const app = new Vue({
self.getLibrarySongsFull(true) self.getLibrarySongsFull(true)
}) })
}, },
removeFromLibrary(kind,id) { removeFromLibrary(kind, id) {
let self = this let self = this
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind; let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
this.mk.api.library.remove({[truekind]: id }).then((data) => { this.mk.api.library.remove({ [truekind]: id }).then((data) => {
self.getLibrarySongsFull(true) self.getLibrarySongsFull(true)
}) })
}, },
@ -1685,10 +1694,11 @@ const app = new Vue({
} }
req2.onload = function () { req2.onload = function () {
try { try {
const ttmlLyrics = this.responseText; const ttmlLyrics = this.responseText;
if (ttmlLyrics){ if (ttmlLyrics) {
this.lyricsMediaItem = ttmlLyrics this.lyricsMediaItem = ttmlLyrics
this.parseTTML()} this.parseTTML()
}
} catch (e) { } catch (e) {
app.loadMXM(); app.loadMXM();
} }
@ -1765,9 +1775,9 @@ const app = new Vue({
function getMXMSubs(track, artist, token, lang, time) { function getMXMSubs(track, artist, token, lang, time) {
let usertoken = encodeURIComponent(token); let usertoken = encodeURIComponent(token);
let richsyncQuery = (app.cfg.lyrics.mxm_karaoke) ? "&optional_calls=track.richsync" : "" let richsyncQuery = (app.cfg.lyrics.mxm_karaoke) ? "&optional_calls=track.richsync" : ""
let timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`; let timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`;
let url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched"+ richsyncQuery +"&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + "&usertoken=" + usertoken + timecustom + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId(); let url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched" + richsyncQuery + "&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + "&usertoken=" + usertoken + timecustom + "&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);
@ -2193,9 +2203,9 @@ const app = new Vue({
} }
}, },
getMediaItemArtwork(url, height = 64, width) { getMediaItemArtwork(url, height = 64, width) {
let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900)? "sr" :"cc"))}`; let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900) ? "sr" : "cc"))}`;
if (newurl.includes("900x516")){newurl = newurl.replace("900x516cc","900x516sr").replace("900x516bb","900x516sr");} if (newurl.includes("900x516")) { newurl = newurl.replace("900x516cc", "900x516sr").replace("900x516bb", "900x516sr"); }
return newurl return newurl
}, },
getNowPlayingArtworkBG(size = 600) { getNowPlayingArtworkBG(size = 600) {
@ -2368,7 +2378,7 @@ const app = new Vue({
let data_type = this.mk.nowPlayingItem.playParams.kind let data_type = this.mk.nowPlayingItem.playParams.kind
let item_id = this.mk.nowPlayingItem.attributes.playParams.id ?? this.mk.nowPlayingItem.id let item_id = this.mk.nowPlayingItem.attributes.playParams.id ?? this.mk.nowPlayingItem.id
let isLibrary = this.mk.nowPlayingItem.attributes.playParams.isLibrary ?? false let isLibrary = this.mk.nowPlayingItem.attributes.playParams.isLibrary ?? false
let params = {"fields[songs]": "inLibrary","fields[albums]": "inLibrary","relate" : "library","t" : "1"} let params = { "fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "t": "1" }
// let res = await app.mkapi(data_type, isLibrary , item_id, params); // let res = await app.mkapi(data_type, isLibrary , item_id, params);
// if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) { // if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
// item_id = res.relationships.library.data[0].id // item_id = res.relationships.library.data[0].id
@ -2378,7 +2388,7 @@ const app = new Vue({
let useMenu = "normal" let useMenu = "normal"
let menus = { let menus = {
multiple: { multiple: {
items: [ ] items: []
}, },
normal: { normal: {
items: [ items: [
@ -2389,16 +2399,16 @@ const app = new Vue({
} }
}, },
{ {
"name": "Add to Library...", "name": "Add to Library...",
"action": function () { "action": function () {
app.addToLibrary(item_id); app.addToLibrary(item_id);
// if (!isLibrary) {app.addToLibrary(item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = true} else { app.removeFromLibrary(data_type,item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = false}; // if (!isLibrary) {app.addToLibrary(item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = true} else { app.removeFromLibrary(data_type,item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = false};
} }
}, },
{ {
"name": "Start Radio", "name": "Start Radio",
"action": function () { "action": function () {
app.mk.setStationQueue({song: item_id}).then(() => { app.mk.setStationQueue({ song: item_id }).then(() => {
app.mk.play() app.mk.play()
app.selectedMediaItems = [] app.selectedMediaItems = []
}) })
@ -2407,9 +2417,9 @@ const app = new Vue({
] ]
} }
} }
if(this.contextExt) { if (this.contextExt) {
// if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays // if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
if(this.contextExt.normal) { if (this.contextExt.normal) {
menus.normal.items = menus.normal.items.concat(this.contextExt.normal) menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
} }
} }
@ -2472,20 +2482,21 @@ document.addEventListener('musickitloaded', function () {
const request = new XMLHttpRequest(); const request = new XMLHttpRequest();
function loadAlternateKey() { function loadAlternateKey() {
let parsedJson = JSON.parse(this.responseText) let parsedJson = JSON.parse(this.responseText)
MusicKit.configure({ MusicKit.configure({
developerToken: parsedJson.developerToken, developerToken: parsedJson.developerToken,
app: { app: {
name: 'Apple Music', name: 'Apple Music',
build: '1978.4.1', build: '1978.4.1',
version: "1.0" version: "1.0"
}, },
sourceType: 24, sourceType: 24,
suppressErrorDialog: true suppressErrorDialog: true
}); });
setTimeout(() => { setTimeout(() => {
app.init() app.init()
}, 1000)} }, 1000)
}
request.addEventListener("load", loadAlternateKey); request.addEventListener("load", loadAlternateKey);
request.open("GET", "https://raw.githubusercontent.com/lujjjh/LitoMusic/main/token.json"); request.open("GET", "https://raw.githubusercontent.com/lujjjh/LitoMusic/main/token.json");
request.send(); request.send();
@ -2496,10 +2507,10 @@ document.addEventListener('musickitloaded', function () {
request.addEventListener("load", initMusicKit); request.addEventListener("load", initMusicKit);
request.onreadystatechange = function (aEvt) { request.onreadystatechange = function (aEvt) {
if (request.readyState == 4) { if (request.readyState == 4) {
if(request.status != 200) if (request.status != 200)
fallbackinitMusicKit() fallbackinitMusicKit()
} }
}; };
request.open("GET", "https://api.cider.sh/"); request.open("GET", "https://api.cider.sh/");
request.send(); request.send();
}); });
@ -2596,7 +2607,7 @@ var checkIfScrollIsStatic = setInterval(() => {
// WebGPU Console Notification // WebGPU Console Notification
async function webGPU() { async function webGPU() {
try{ try {
const currentGPU = await navigator.gpu.requestAdapter() const currentGPU = await navigator.gpu.requestAdapter()
console.log("WebGPU enabled on", currentGPU.name, "with feature ID", currentGPU.features.size) console.log("WebGPU enabled on", currentGPU.name, "with feature ID", currentGPU.features.size)
} catch (e) { } catch (e) {

View file

@ -2949,6 +2949,41 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Cider */ /* Cider */
// Modular
.modular-fs {
.app-drawer {
width:100%;
right:0px;
top:0px;
height:100%;
border-radius: 0px;
box-shadow: unset;
background: black;
.lyric-body {
justify-content: center;
align-items:center;
.lyric-line {
pointer-events: none;
font-weight: 500;
font-size: 1.6em;
&:not(.active) {
display: none;
margin: 0;
transform: scale(1);
}
&.active {
margin: 0;
transform: scale(1);
}
}
}
}
}
// Modular
/* Transitions */ /* Transitions */
.modal-enter-active, .modal-enter-active,