From eb912c5c5ffef0b38ee44f8a408b2d866e40588f Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 3 Dec 2021 01:06:29 -0800
Subject: [PATCH] fixed player duration not updating correctly

---
 resources/cider-ui-tests/index.html | 100 ++++++++++++++--------------
 resources/cider-ui-tests/index.js   |  18 +++++
 resources/cider-ui-tests/todo.js    |  11 +++
 3 files changed, 79 insertions(+), 50 deletions(-)
 create mode 100644 resources/cider-ui-tests/todo.js

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 8763b3a2..cc0e2ec0 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -67,7 +67,7 @@
                                     <input type="range" step="0.01" min="0"
                                            @change="mk.seekToTime($event.target.value)"
                                            :max="mk.currentPlaybackDuration"
-                                           :value="mk.currentPlaybackProgress * 100">
+                                           :value="playerLCD.playbackDuration">
                                 </div>
                             </div>
                             <div class="actions">❤️</div>
@@ -154,61 +154,61 @@
             </div>
             <div id="app-content">
                 <!-- Browse -->
-                <template v-if="page == 'browse'">
-                    <button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
-                    <br>
-                    <template v-if="mk.nowPlayingItem">
-                        currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
+                    <template v-if="page == 'browse'">
+                        <button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
                         <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>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
-                        consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
-                    </p>
-                    <div class="media-item--small">
-                        <div class="artwork">
+                        <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>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
+                            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 class="text">
-                            Text
-                        </div>
-                        <div class="subtext">
-                            Subtext
-                        </div>
-                    </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>
+                        <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 -->
-                <template v-if="page == 'search'">
-                    <h1 class="header-text">{{ search.term }}</h1>
-                    <template v-if="search.results['meta']">
-                        <template v-if="search.results.songs">
-                            <h3>Artists</h3>
-                            <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
-                        </template>
-                        <template v-if="search.results.songs">
-                            <h3>Songs</h3>
-                            <mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item>
-                        </template>
-                        <template v-if="search.results.songs">
-                            <h3>Albums</h3>
-                            <mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
-                        </template>
-                        <template v-if="search.results.songs">
-                            <h3>Playlists</h3>
-                            <mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
+                    <template v-if="page == 'search'">
+                        <h1 class="header-text">{{ search.term }}</h1>
+                        <template v-if="search.results['meta']">
+                            <template v-if="search.results.songs">
+                                <h3>Artists</h3>
+                                <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
+                            </template>
+                            <template v-if="search.results.songs">
+                                <h3>Songs</h3>
+                                <mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item>
+                            </template>
+                            <template v-if="search.results.songs">
+                                <h3>Albums</h3>
+                                <mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
+                            </template>
+                            <template v-if="search.results.songs">
+                                <h3>Playlists</h3>
+                                <mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
+                            </template>
                         </template>
                     </template>
-                </template>
             </div>
             <div class="app-drawer" v-if="drawertest">
 
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 7702a9e5..cdd15ef2 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -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({
     el: "#app",
     data: {
@@ -29,13 +40,20 @@ const app = new Vue({
             term: "",
             results: {}
         },
+        playerLCD: {
+            playbackDuration: 0
+        },
         page: "browse"
     },
     methods: {
         init() {
+            let self = this
             this.mk = MusicKit.getInstance()
             this.mk.authorize()
             this.$forceUpdate()
+            this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a)=>{
+                self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
+            })
         },
         showSearch() {
             this.page = "search"
diff --git a/resources/cider-ui-tests/todo.js b/resources/cider-ui-tests/todo.js
new file mode 100644
index 00000000..b6b38a7e
--- /dev/null
+++ b/resources/cider-ui-tests/todo.js
@@ -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)
+})