Merge branch 'main' of https://github.com/Apple-Music-Electron/Cider
This commit is contained in:
booploops
commit
aba65afa6d
3 changed files with 86 additions and 15 deletions
|
|
@ -2,6 +2,15 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||||
|
|
@ -28,7 +37,8 @@
|
||||||
<button class="playback-button previous"></button>
|
<button class="playback-button previous"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item">
|
<div class="app-chrome-item">
|
||||||
<button class="playback-button play"></button>
|
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
|
||||||
|
<button class="playback-button play" @click="mk.play()" v-else></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item">
|
<div class="app-chrome-item">
|
||||||
<button class="playback-button next"></button>
|
<button class="playback-button next"></button>
|
||||||
|
|
@ -39,22 +49,32 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome--center">
|
<div class="app-chrome--center">
|
||||||
<div class="app-chrome-item playback-controls">
|
<div class="app-chrome-item playback-controls">
|
||||||
<div class="app-playback-controls">
|
<template v-if="mkReady()">
|
||||||
<div class="artwork"></div>
|
<div class="app-playback-controls">
|
||||||
<div class="playback-info">
|
<div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
|
||||||
<div class="song-name">Song Name</div>
|
<div class="playback-info">
|
||||||
<div class="song-artist">Artist - Album</div>
|
<div class="song-name">
|
||||||
<div class="song-progress">
|
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||||
<input type="range" step="0.01" min="0" max="1500">
|
</div>
|
||||||
|
<div class="song-artist">
|
||||||
|
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }}
|
||||||
|
</div>
|
||||||
|
<div class="song-progress">
|
||||||
|
<input type="range" step="0.01" min="0"
|
||||||
|
@change="mk.seekToTime($event.target.value)"
|
||||||
|
:max="mk.currentPlaybackDuration"
|
||||||
|
:value="mk.currentPlaybackProgress * 100">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="actions">❤️</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">❤️</div>
|
</template>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome--right">
|
<div class="app-chrome--right">
|
||||||
<div class="app-chrome-item volume display--large">
|
<div class="app-chrome-item volume display--large">
|
||||||
<input type="range" class="">
|
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'">
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item generic">
|
<div class="app-chrome-item generic">
|
||||||
<button class="playback-button--small">
|
<button class="playback-button--small">
|
||||||
|
|
@ -122,6 +142,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="app-content">
|
<div id="app-content">
|
||||||
|
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
|
||||||
|
<br>
|
||||||
|
<template v-if="mk.nowPlayingItem">
|
||||||
|
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||||
|
<br>
|
||||||
|
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||||
|
</template>
|
||||||
|
<div><input type="text" v-model="quickPlayQuery">
|
||||||
|
<button @click="quickPlay(quickPlayQuery)">Play</button></div>
|
||||||
<h1 class="header-text">Browse</h1>
|
<h1 class="header-text">Browse</h1>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
|
||||||
|
|
@ -151,6 +180,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-artwork"></div>
|
<div class="bg-artwork"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js"></script>
|
||||||
<script src="index.js?v=1"></script>
|
<script src="index.js?v=1"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,50 @@
|
||||||
var app = new Vue({
|
var app = new Vue({
|
||||||
el: "#app",
|
el: "#app",
|
||||||
data: {
|
data: {
|
||||||
drawertest: false
|
drawertest: false,
|
||||||
|
mk: {},
|
||||||
|
quickPlayQuery: ""
|
||||||
},
|
},
|
||||||
methods: {
|
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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
document.addEventListener('musickitloaded', function() {
|
||||||
|
// MusicKit global is now defined
|
||||||
|
MusicKit.configure({
|
||||||
|
developerToken: '',
|
||||||
|
app: {
|
||||||
|
name: 'My Cool Web App',
|
||||||
|
build: '1978.4.1'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -538,7 +538,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
||||||
.app-chrome .app-chrome-item>.app-playback-controls .artwork {
|
.app-chrome .app-chrome-item>.app-playback-controls .artwork {
|
||||||
width: 42px;
|
width: 42px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
background-image: url("artwork.jpeg");
|
background-image: var(--artwork);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue