unauth button, playlists being generated from user store

This commit is contained in:
Core 2021-12-03 19:59:09 +00:00
parent 2d6ac28227
commit 76da41b460
2 changed files with 43 additions and 4 deletions

View file

@ -140,7 +140,9 @@
<div class="app-sidebar-header-text">
Playlists
</div>
<button class="app-sidebar-item" v-for="i in 32">Playist</button>
<button class="app-sidebar-item" v-for="item in playlists.items" :key="item.id" href="">
{{ item.attributes.name }}
</button>
</div>
<div class="app-sidebar-footer">
<input type="range" class="display--small">
@ -155,7 +157,8 @@
<div id="app-content">
<!-- Browse -->
<template v-if="page == 'browse'">
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop MusicKit</button>
<br>
<template v-if="mk.nowPlayingItem">
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}

View file

@ -43,6 +43,9 @@ const app = new Vue({
playerLCD: {
playbackDuration: 0
},
playlists: {
items: []
},
page: "browse"
},
methods: {
@ -54,6 +57,15 @@ const app = new Vue({
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a)=>{
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
})
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
console.log(res.data)
console.log(res.data.length)
self.playlists.items = res.data
})
},
unauthorize() {
this.mk.unauthorize()
},
showSearch() {
this.page = "search"
@ -100,6 +112,30 @@ const app = new Vue({
}, 1000)
})
})
},
apiCall(url, callback) {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = (e) => {
if (xmlHttp.readyState !== 4) {
return;
}
if (xmlHttp.status === 200) {
console.log('SUCCESS', xmlHttp.responseText);
callback(JSON.parse(xmlHttp.responseText));
} else {
console.warn('request_error');
}
};
xmlHttp.open("GET", url);
xmlHttp.setRequestHeader("Authorization", "Bearer " + MusicKit.getInstance().developerToken);
xmlHttp.setRequestHeader("Music-User-Token", "" + MusicKit.getInstance().musicUserToken);
xmlHttp.setRequestHeader("Accept", "application/json");
xmlHttp.setRequestHeader("Content-Type", "application/json");
xmlHttp.responseType = "text";
xmlHttp.send();
}
}
})