fixes and adds continuous loading to non library playlists
This commit is contained in:
booploops
parent
135793850a
commit
224a0d4e2e
1 changed files with 109 additions and 81 deletions
|
|
@ -297,7 +297,6 @@ const app = new Vue({
|
||||||
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) => {
|
||||||
if (self.mk.nowPlayingItem && self.mk.nowPlayingItem.playParams.kind.includes('ideo')) {
|
if (self.mk.nowPlayingItem && self.mk.nowPlayingItem.playParams.kind.includes('ideo')) {
|
||||||
self.lyriccurrenttime = (self.mk.currentPlaybackTime)
|
self.lyriccurrenttime = (self.mk.currentPlaybackTime)
|
||||||
|
|
@ -457,6 +456,32 @@ const app = new Vue({
|
||||||
}
|
}
|
||||||
await this.showCollection(responseFormat, title, "search")
|
await this.showCollection(responseFormat, title, "search")
|
||||||
},
|
},
|
||||||
|
async getPlaylistContinuous(response) {
|
||||||
|
let self = this
|
||||||
|
let playlistId = response.id
|
||||||
|
this.playlists.loadingState = 0
|
||||||
|
this.showingPlaylist = response
|
||||||
|
if(!response.relationships.tracks.next) {
|
||||||
|
this.playlists.loadingState = 1
|
||||||
|
return
|
||||||
|
}
|
||||||
|
function getPlaylistTracks(next) {
|
||||||
|
app.apiCall(app.musicBaseUrl + next, res => {
|
||||||
|
if (self.showingPlaylist.id != playlistId) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
self.showingPlaylist.relationships.tracks.data = self.showingPlaylist.relationships.tracks.data.concat(res.data)
|
||||||
|
if (res.next) {
|
||||||
|
getPlaylistTracks(res.next)
|
||||||
|
} else {
|
||||||
|
self.playlists.loadingState = 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
getPlaylistTracks(response.relationships.tracks.next)
|
||||||
|
|
||||||
|
},
|
||||||
async getPlaylistFromID(id) {
|
async getPlaylistFromID(id) {
|
||||||
let self = this
|
let self = this
|
||||||
const params = {
|
const params = {
|
||||||
|
|
@ -471,39 +496,17 @@ const app = new Vue({
|
||||||
|
|
||||||
this.playlists.loadingState = 0
|
this.playlists.loadingState = 0
|
||||||
let playlistId = ''
|
let playlistId = ''
|
||||||
// TO DO: Replace with a universal function for recursive calls
|
|
||||||
function getPlaylistTracks(next) {
|
|
||||||
if (!next) {
|
|
||||||
app.mk.api.library.playlist(id, params).then(res => {
|
|
||||||
self.showingPlaylist = res
|
|
||||||
playlistId = res.id
|
|
||||||
if (res.relationships.tracks.next) {
|
|
||||||
getPlaylistTracks(res.relationships.tracks.next)
|
|
||||||
} else {
|
|
||||||
self.playlists.loadingState = 1
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
app.apiCall(app.musicBaseUrl + next, res => {
|
|
||||||
if(self.showingPlaylist.id != playlistId) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
self.showingPlaylist.relationships.tracks.data = self.showingPlaylist.relationships.tracks.data.concat(res.data)
|
|
||||||
if (res.next) {
|
|
||||||
getPlaylistTracks(res.next)
|
|
||||||
} else {
|
|
||||||
self.playlists.loadingState = 1
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
getPlaylistTracks()
|
app.mk.api.library.playlist(id, params).then(res => {
|
||||||
|
self.getPlaylistContinuous(res)
|
||||||
|
})
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
try {
|
try {
|
||||||
getPlaylistTracks()
|
app.mk.api.library.playlist(id, params).then(res => {
|
||||||
|
self.getPlaylistContinuous(res)
|
||||||
|
})
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
}
|
}
|
||||||
|
|
@ -642,8 +645,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("artist")) {
|
||||||
else if (kind.toString().includes("artist")) {
|
|
||||||
app.getArtistInfo(id, isLibrary)
|
app.getArtistInfo(id, isLibrary)
|
||||||
window.location.hash = `${kind}/${id}`
|
window.location.hash = `${kind}/${id}`
|
||||||
document.querySelector("#app-content").scrollTop = 0
|
document.querySelector("#app-content").scrollTop = 0
|
||||||
|
|
@ -825,12 +827,10 @@ const app = new Vue({
|
||||||
console.log(err);
|
console.log(err);
|
||||||
a = []
|
a = []
|
||||||
} finally {
|
} finally {
|
||||||
this.showingPlaylist = a
|
this.getPlaylistContinuous(a)
|
||||||
this.playlists.loadingState = 1
|
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
this.showingPlaylist = a
|
this.getPlaylistContinuous(a)
|
||||||
this.playlists.loadingState = 1
|
|
||||||
}
|
}
|
||||||
;
|
;
|
||||||
},
|
},
|
||||||
|
|
@ -1365,7 +1365,8 @@ const app = new Vue({
|
||||||
lrcrich = jsonResponse["message"]["body"]["macro_calls"]["track.richsync.get"]["message"]["body"]["richsync"]["richsync_body"];
|
lrcrich = jsonResponse["message"]["body"]["macro_calls"]["track.richsync.get"]["message"]["body"]["richsync"]["richsync_body"];
|
||||||
richsync = JSON.parse(lrcrich);
|
richsync = JSON.parse(lrcrich);
|
||||||
app.richlyrics = richsync;
|
app.richlyrics = richsync;
|
||||||
} catch (_) { }
|
} catch (_) {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (lrcfile == "") {
|
if (lrcfile == "") {
|
||||||
|
|
@ -1589,8 +1590,7 @@ const app = new Vue({
|
||||||
app.mk.setStationQueue({artist: 'a-' + id}).then(() => {
|
app.mk.setStationQueue({artist: 'a-' + id}).then(() => {
|
||||||
app.mk.play()
|
app.mk.play()
|
||||||
})
|
})
|
||||||
}
|
} else if (truekind == "radioStations") {
|
||||||
else if (truekind == "radioStations") {
|
|
||||||
this.mk.setStationQueue({url: raurl}).then(function (queue) {
|
this.mk.setStationQueue({url: raurl}).then(function (queue) {
|
||||||
MusicKit.getInstance().play()
|
MusicKit.getInstance().play()
|
||||||
});
|
});
|
||||||
|
|
@ -1618,20 +1618,29 @@ const app = new Vue({
|
||||||
}
|
}
|
||||||
|
|
||||||
let query = app.library.songs.listing.map(item => new MusicKit.MediaItem(item));
|
let query = app.library.songs.listing.map(item => new MusicKit.MediaItem(item));
|
||||||
try { app.mk.stop() } catch (e) { }
|
try {
|
||||||
|
app.mk.stop()
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
this.mk.clearQueue().then(function (_) {
|
this.mk.clearQueue().then(function (_) {
|
||||||
app.mk.queue.append(query)
|
app.mk.queue.append(query)
|
||||||
app.mk.changeToMediaAtIndex(childIndex)
|
app.mk.changeToMediaAtIndex(childIndex)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
try { app.mk.stop() } catch (e) { }
|
try {
|
||||||
|
app.mk.stop()
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
this.mk.setQueue({[truekind]: [id]}).then(function (queue) {
|
this.mk.setQueue({[truekind]: [id]}).then(function (queue) {
|
||||||
app.mk.changeToMediaAtIndex(childIndex)
|
app.mk.changeToMediaAtIndex(childIndex)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
try { app.mk.stop() } catch (e) { }
|
try {
|
||||||
|
app.mk.stop()
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
this.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
|
this.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1763,17 +1772,26 @@ const app = new Vue({
|
||||||
document.querySelector('.bg-artwork').src = "";
|
document.querySelector('.bg-artwork').src = "";
|
||||||
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
||||||
document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
|
document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
|
||||||
try { clearInterval(bginterval); } catch (err) { }
|
try {
|
||||||
|
clearInterval(bginterval);
|
||||||
|
} catch (err) {
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.setLibraryArtBG()
|
this.setLibraryArtBG()
|
||||||
}
|
}
|
||||||
} else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
|
} else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
|
||||||
try { clearInterval(bginterval); } catch (err) { }
|
try {
|
||||||
|
clearInterval(bginterval);
|
||||||
|
} catch (err) {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.bg-artwork')) {
|
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.bg-artwork')) {
|
||||||
this.setLibraryArtBG()
|
this.setLibraryArtBG()
|
||||||
try { clearInterval(bginterval); } catch (err) { }
|
try {
|
||||||
|
clearInterval(bginterval);
|
||||||
|
} catch (err) {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, 200)
|
}, 200)
|
||||||
|
|
@ -1791,17 +1809,26 @@ const app = new Vue({
|
||||||
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', '');
|
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', '');
|
||||||
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
||||||
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
|
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
|
||||||
try { clearInterval(interval); } catch (err) { }
|
try {
|
||||||
|
clearInterval(interval);
|
||||||
|
} catch (err) {
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.setLibraryArt()
|
this.setLibraryArt()
|
||||||
}
|
}
|
||||||
} else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
|
} else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
|
||||||
try { clearInterval(interval); } catch (err) { }
|
try {
|
||||||
|
clearInterval(interval);
|
||||||
|
} catch (err) {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) {
|
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) {
|
||||||
this.setLibraryArt()
|
this.setLibraryArt()
|
||||||
try { clearInterval(interval); } catch (err) { }
|
try {
|
||||||
|
clearInterval(interval);
|
||||||
|
} catch (err) {
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,5 +2046,6 @@ async function webGPU() {
|
||||||
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)
|
||||||
}
|
}
|
||||||
|
|
||||||
webGPU().then()
|
webGPU().then()
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue