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,7 +293,7 @@ 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 = "";
@ -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,10 +383,10 @@ 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
@ -393,24 +400,24 @@ const app = new Vue({
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++;
} }
@ -420,11 +427,12 @@ const app = new Vue({
}) })
})},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
} }
} }
@ -1617,12 +1625,13 @@ 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 {
if (app.cfg.lyrics.enable_mxm) {
this.loadMXM(); this.loadMXM();
} else {this.loadAMLyrics();} } else { this.loadAMLyrics(); }
} }
}, },
loadAMLyrics() { loadAMLyrics() {
@ -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)
}) })
}, },
@ -1686,9 +1695,10 @@ 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();
} }
@ -1767,7 +1777,7 @@ const app = new Vue({
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: [
@ -2398,7 +2408,7 @@ const app = new Vue({
{ {
"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)
} }
} }
@ -2485,7 +2495,8 @@ document.addEventListener('musickitloaded', function () {
}); });
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,7 +2507,7 @@ 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()
} }
}; };
@ -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,