fix for artwork on playlists/albums, put some wip code for navigation events for history navigation

resources/cider-ui-tests/index.js

@@ -30,11 +30,6 @@ Vue.component('cider-listen-now', {
     props: ["data"]
 })
 
-Vue.component('cider-playlist', {
-    template: "#cider-playlist",
-    props: ["data"]
-})
-
 const MusicKitTools = {
     getHeader() {
         return new Headers({
@@ -57,6 +52,18 @@ function msToMinSec(ms) {
     return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
 }
 
+class NavigationEvent {
+    constructor(page, onnavigate, scrollPosition) {
+        this.page = page;
+        this.onnavigate = onnavigate;
+        this.scrollPosition = scrollPosition;
+    }
+    navigate() {
+        this.onnavigate();
+        document.querySelector("#app-content").scrollTop = this.scrollPosition;
+    }
+}
+
 const app = new Vue({
     el: "#app",
     data: {
@@ -116,7 +123,8 @@ const app = new Vue({
             drawerOpened: false,
             drawerState: "queue"
         },
-        page: "artist-page"
+        page: "artist-page",
+        pageHistory: [],
     },
     methods: {
         async init() {
@@ -242,6 +250,11 @@ const app = new Vue({
             app.getTypeFromID((kind),(id), (isLibrary));} else {
                 app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
             }
+            document.querySelector("#app-content").scrollTop = 0
+        },
+        pushNavigationEvent(item){
+            let self = this
+            
         },
         getArtistInfo(id, isLibrary){
             var query = {"omit[resource]": "autos",

resources/cider-ui-tests/style.css

@@ -1845,7 +1845,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 .playlist-display .playlist-info .playlist-desc {
     box-sizing: border-box;
-    font-size: 1.1rem;
+    font-size: 1em;
     flex-shrink: unset;
     margin-right: 5px;
 }

resources/cider-ui-tests/views/main.ejs

@@ -365,33 +365,8 @@
     </div>
 </script>
 
-<!-- Album / Playlist View -->
+<!-- Playlists / Albums -->
-<script type="text/x-template" id="cider-playlist">
+<%- include('pages/cider-playlist') %>
-    <div class="content-inner">
-        <template v-if="data != [] && data.attributes != []">
-            <div class="playlist-display row">
-                <div class="col-auto">
-                    <mediaitem-artwork
-                        :url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
-                        size="200"
-                    ></mediaitem-artwork>
-                </div>
-                <div class="col playlist-info">
-                    <div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
-                    <div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
-                        ''}}
-                    </div>
-                    <div class="playlist-desc"
-                         v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
-                </div>
-            </div>
-            <mediaitem-list-item :item="item"
-                                 v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
-            <div class="playlist-time">{{app.getTotalTime()}}</div>
-        </template>
-
-    </div>
-</script>
 
 <!-- Search -->
 <script type="text/x-template" id="cider-search">

resources/cider-ui-tests/views/pages/cider-playlist.ejs

@@ -0,0 +1,34 @@
+<script type="text/x-template" id="cider-playlist">
+    <div class="content-inner">
+        <template v-if="data != [] && data.attributes != []">
+            <div class="playlist-display row">
+                <div class="col-auto flex-center">
+                    <div style="width: 200px;height:200px;">
+                        <mediaitem-artwork
+                        :url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
+                        size="200"
+                    ></mediaitem-artwork>
+                    </div>
+                </div>
+                <div class="col playlist-info">
+                    <div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
+                    <div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
+                        ''}}
+                    </div>
+                    <div class="playlist-desc"
+                         v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
+                </div>
+            </div>
+            <mediaitem-list-item :item="item"
+                                 v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
+            <div class="playlist-time">{{app.getTotalTime()}}</div>
+        </template>
+
+    </div>
+</script>
+<script>
+    Vue.component('cider-playlist', {
+        template: "#cider-playlist",
+        props: ["data"]
+    })
+</script>