okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed player duration not updating correctly

Browse source
This commit is contained in:
booploops 2021-12-03 01:06:29 -08:00
parent cb924ccaa3
commit eb912c5c5f
3 changed files with 79 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

100
resources/cider-ui-tests/index.html
View file

@ -67,7 +67,7 @@
<input type="range" step="0.01" min="0" <input type="range" step="0.01" min="0"
@change="mk.seekToTime($event.target.value)" @change="mk.seekToTime($event.target.value)"
:max="mk.currentPlaybackDuration" :max="mk.currentPlaybackDuration"
:value="mk.currentPlaybackProgress * 100"> :value="playerLCD.playbackDuration">
</div> </div>
</div> </div>
<div class="actions">❤️</div> <div class="actions">❤️</div>
@ -154,61 +154,61 @@
</div> </div>
<div id="app-content"> <div id="app-content">
<!-- Browse --> <!-- Browse -->
<template v-if="page == 'browse'"> <template v-if="page == 'browse'">
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button> <button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
<br>
<template v-if="mk.nowPlayingItem">
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<br> <br>
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }} <template v-if="mk.nowPlayingItem">
</template> currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<div><input type="text" v-model="quickPlayQuery"> <br>
<button @click="quickPlay(quickPlayQuery)">Play</button> currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
</div> </template>
<h1 class="header-text">Browse</h1> <div><input type="text" v-model="quickPlayQuery">
<p> <button @click="quickPlay(quickPlayQuery)">Play</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt </div>
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi. <h1 class="header-text">Browse</h1>
</p> <p>
<div class="media-item--small"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
<div class="artwork"> consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
</p>
<div class="media-item--small">
<div class="artwork">
</div>
<div class="text">
Text
</div>
<div class="subtext">
Subtext
</div>
</div> </div>
<div class="text"> <br>
Text <br>
</div> <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<div class="subtext"> <button class="md-btn">Button</button>
Subtext <button class="md-btn md-btn-primary">Button</button>
</div> </template>
</div>
<br>
<br>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<button class="md-btn">Button</button>
<button class="md-btn md-btn-primary">Button</button>
</template>
<!-- Search --> <!-- Search -->
<template v-if="page == 'search'"> <template v-if="page == 'search'">
<h1 class="header-text">{{ search.term }}</h1> <h1 class="header-text">{{ search.term }}</h1>
<template v-if="search.results['meta']"> <template v-if="search.results['meta']">
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Artists</h3> <h3>Artists</h3>
<mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square> <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
</template> </template>
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Songs</h3> <h3>Songs</h3>
<mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item> <mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item>
</template> </template>
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Albums</h3> <h3>Albums</h3>
<mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square> <mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
</template> </template>
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Playlists</h3> <h3>Playlists</h3>
<mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square> <mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
</template>
</template> </template>
</template> </template>
</template>
</div> </div>
<div class="app-drawer" v-if="drawertest"> <div class="app-drawer" v-if="drawertest">

18
resources/cider-ui-tests/index.js
View file

@ -19,6 +19,17 @@ Vue.component('mediaitem-list-item', {
} }
}); });
const MusicKitTools = {
getHeader() {
return new Headers({
Authorization: 'Bearer ' + MusicKit.getInstance().developerToken,
Accept: 'application/json',
'Content-Type': 'application/json',
'Music-User-Token': '' + MusicKit.getInstance().musicUserToken
});
}
}
const app = new Vue({ const app = new Vue({
el: "#app", el: "#app",
data: { data: {
@ -29,13 +40,20 @@ const app = new Vue({
term: "", term: "",
results: {} results: {}
}, },
playerLCD: {
playbackDuration: 0
},
page: "browse" page: "browse"
}, },
methods: { methods: {
init() { init() {
let self = this
this.mk = MusicKit.getInstance() this.mk = MusicKit.getInstance()
this.mk.authorize() this.mk.authorize()
this.$forceUpdate() this.$forceUpdate()
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a)=>{
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
})
}, },
showSearch() { showSearch() {
this.page = "search" this.page = "search"

11
resources/cider-ui-tests/todo.js Normal file
View file

@ -0,0 +1,11 @@
// Made For You
app.mk.api.recommendations({extend: "editorialArtwork,artistUrl"})
// Library with library length
/** This will return 100 tracks in an array, however
* the library total length is not returned but present in the network traffic response under
* meta.total. We need a way to get the full response from the network traffic.
*/
await app.mk.api.library.songs({limit: 100}).then((data)=>{
console.log(data)
})