diff --git a/docs/app-win/index.html b/docs/app-win/index.html index 685a752f..8b32d746 100644 --- a/docs/app-win/index.html +++ b/docs/app-win/index.html @@ -2,6 +2,15 @@ + + + + + + + + + @@ -28,7 +37,8 @@
- + +
@@ -39,22 +49,32 @@
-
-
-
-
Song Name
-
Artist - Album
-
- + +
- +
+ +
+ +
+

Browse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt @@ -151,6 +180,7 @@

+ diff --git a/docs/app-win/index.js b/docs/app-win/index.js index 564c6bda..4b2870f2 100644 --- a/docs/app-win/index.js +++ b/docs/app-win/index.js @@ -1,9 +1,50 @@ var app = new Vue({ el: "#app", data: { - drawertest: false + drawertest: false, + mk: {}, + quickPlayQuery: "" }, methods: { - + init() { + this.mk = MusicKit.getInstance() + this.$forceUpdate() + }, + mkReady() { + if(this.mk["nowPlayingItem"]) { + return true + }else{ + return false + } + }, + getNowPlayingArtwork(size = 600) { + if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { + return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`; + } else { + return ""; + } + }, + quickPlay(query) { + let self = this + MusicKit.getInstance().api.search(query, { limit: 2, types: 'songs' }).then(function (data) { + MusicKit.getInstance().setQueue({ song: data["songs"]['data'][0]["id"] }).then(function (queue) { + MusicKit.getInstance().play() + setTimeout(()=>{ + self.$forceUpdate() + }, 1000) + }) + }) + } } -}) \ No newline at end of file +}) + +document.addEventListener('musickitloaded', function() { + // MusicKit global is now defined + MusicKit.configure({ + developerToken: '', + app: { + name: 'My Cool Web App', + build: '1978.4.1' + } + }); +}); \ No newline at end of file diff --git a/docs/app-win/style.css b/docs/app-win/style.css index e7db7d70..7d764a91 100644 --- a/docs/app-win/style.css +++ b/docs/app-win/style.css @@ -538,7 +538,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { .app-chrome .app-chrome-item>.app-playback-controls .artwork { width: 42px; height: 42px; - background-image: url("artwork.jpeg"); + background-image: var(--artwork); background-position: center; background-size: contain; background-repeat: no-repeat;