playlist view

resources/cider-ui-tests/index.html

@@ -142,7 +142,7 @@
                     <div class="app-sidebar-header-text">
                         Playlists
                     </div>
-                    <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" href="item.href">
+                    <button class="app-sidebar-item"  v-for="item in playlists.listing" :key="item.id" :href="item.href" @click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
                         {{ item.attributes.name }}
                     </button>
                 </div>
@@ -199,6 +199,12 @@
                 </div>
             </div>
             <div id="app-content">
+                <!-- Playlist page-->
+                <transition name="wpfade" >
+                    <template v-if="page.includes('playlist_')" >
+                      <cider-playlist :data="showingPlaylist"></cider-playlist>
+                    </template>
+                </transition>
                 <!-- Browse -->
                 <transition name="wpfade">
                     <template v-if="page == 'browse'">
@@ -371,6 +377,24 @@
     </div>
 </script>
 
+<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 artwork" 
+            :style="{'--artwork': app.getMediaItemArtwork((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 ?? '':''), 300)}
+           "></div>
+            <div class="playlist-info">
+                <div class="playlist-name">{{data.attributes.name ?? ''}}</div>
+                <div class="playlist-desc">{{data.attributes.description ? data.attributes.description.standard ?? '' : ''}}</div>
+            </div>    
+        </div>
+        <mediaitem-list-item :item="item"
+                            v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
+        </template>
+    </div>    
+</script>
+
 <!-- Search -->
 <script type="text/x-template" id="cider-search">
     <div class="content-inner">
@@ -489,7 +513,7 @@
              class="cd-mediaitem-list-item">
             <div class="artwork" v-if="item.attributes.artwork"
                  :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url ? item.attributes.artwork.url : '', 34)}
+                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork ? item.attributes.artwork.url : '', 34)}
                 "></div>
             <div class="info-rect">
                 <div class="title text-overflow-elipsis">

resources/cider-ui-tests/index.js

@@ -76,6 +76,11 @@ Vue.component('cider-listen-now', {
     props: ["data"]
 })
 
+Vue.component('cider-playlist', {
+    template: "#cider-playlist",
+    props: ["data"]
+})
+
 const MusicKitTools = {
     getHeader() {
         return new Headers({
@@ -110,6 +115,7 @@ const app = new Vue({
         radio: {
             personal: []
         },
+        showingPlaylist: [],
         library: {
             songs: {
                 listing: [],
@@ -234,6 +240,13 @@ const app = new Vue({
             })
             document.body.removeAttribute("loading")
         },
+        async getPlaylistFromID(id){
+            try{
+            this.showingPlaylist = await app.mk.api.library.playlist(id)} catch (e){console.log(e);
+            try{this.showingPlaylist = await app.mk.api.playlist(id)} catch (err) {console.log(err)}    
+            }
+           
+        },
         searchLibrarySongs() {
             let self = this
             if (this.library.songs.search == "") {

resources/cider-ui-tests/style.css

@@ -1485,6 +1485,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     margin: 6px;
     margin-top: 0px;
 }
+
+.artwork
+{height: 190px;
+    width: 190px;
+    background: blue;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background: var(--artwork);
+    background-size: cover;
+    box-shadow: var(--mediaItemShadow);
+    flex: 0 0 auto; 
+    margin: 6px;
+    margin-top: 0px;
+}
+
 .cd-mediaitem-square-sp .artwork:hover {
     box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
 }
@@ -1647,3 +1662,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
         --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC');
     }
 }
+
+.playlist-display {
+    flex-wrap: nowrap;
+}
+
+.playlist-info{ 
+    flex-shrink: unset;
+}
+
+.playlist-name {
+    font-weight: 700;
+    font-size: 1.6rem;
+    margin-bottom: 6px;
+    margin-right: 6px;
+    flex-shrink: unset;
+
+}
+
+.playlist-desc {
+    box-sizing: border-box;
+    font-size: 1.1rem;
+    flex-shrink: unset;
+    margin-right: 5px;
+}