WIP Artist page

resources/cider-ui-tests/index.js

@@ -76,6 +76,10 @@ const app = new Vue({
             personal: []
         },
         showingPlaylist: [],
+        artistPage: {
+            data: {},
+            topSongsExpanded: false
+        },
         library: {
             songs: {
                 listing: [],
@@ -112,7 +116,7 @@ const app = new Vue({
             drawerOpened: false,
             drawerState: "queue"
         },
-        page: "browse"
+        page: "artist-page"
     },
     methods: {
         async init() {
@@ -209,7 +213,21 @@ const app = new Vue({
             }
            
         },
+        async getArtistFromID(id){
+            var artistData = await this.mkapi("artists", false, id, {
+                "views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
+                "extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
+                "extend[playlists]": "trackCount",
+                "omit[resource:songs]": "relationships",
+                "fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount",
+                "limit[artists:top-songs]": 20,
+                "art[url]": "f"
+            }, {includeResponseMeta: !0})
+            this.artistPage.data = artistData.data[0]
+            this.page = "artist-page"
+        },
         routeView (item){
+            let self = this
             app.showingPlaylist = []; 
             let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
             let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
@@ -236,7 +254,8 @@ const app = new Vue({
                 "artists:top-songs": 20
             },
             "art[url]": "f"};
-            this.getTypeFromID("artist",id,isLibrary,query)
+            this.getArtistFromID(id)
+            //this.getTypeFromID("artist",id,isLibrary,query)
         },
         playMediaItem(item){
             let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));

resources/cider-ui-tests/style.css

@@ -1331,6 +1331,54 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 /* Cider */
 
+/* Artist Page */
+
+.artist-page {
+    padding: 0px;
+}
+
+.artist-page .artist-header {
+    background: var(--keyColor);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 300px;
+}
+
+.artist-page .artist-image {
+    width: 200px;
+    height: 200px;
+    background: red;
+    margin: 32px;
+}
+
+.artist-page .artist-body {
+    
+}
+
+.artist-page .showmoreless {
+    font-family: inherit;
+    font-size: 16px;
+    font-weight: 500;
+    background: transparent;
+    border: 0px;
+    border-radius: 6px;
+    appearance: none;
+    color: var(--keyColor);
+    padding: 8px 12px;
+    cursor: pointer;
+    margin-top: 12px;
+    float: right;
+}
+
+.artist-page .showmoreless:hover {
+    background: rgb(200 200 200 / 10%);
+}
+
+
+/* Artist Page End */
+
 .text-overflow-elipsis {
     display: -webkit-box;
     min-width: 0px;
@@ -1441,6 +1489,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     opacity: 0.7;
 }
 
+.cd-mediaitem-list-item .duration {
+    min-width: 60px;
+    text-align: center;
+}
+
 .cd-mediaitem-list-item .content-rating {
     text-transform: uppercase;
     font-size: 10px;

resources/cider-ui-tests/todo.js

@@ -95,6 +95,19 @@ await app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then
     console.log(data)
 })
 
+// Artist Page Data
+app.mkapi("artists", false, "412778295", {
+	"views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
+	"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
+	"extend[playlists]": "trackCount",
+	"omit[resource:songs]": "relationships",
+	"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount",
+	"limit[artists:top-songs]": 20,
+	"art[url]": "f"
+}, {includeResponseMeta: !0}).then((data)=>{
+    console.log(data)
+})
+
 // download entire library
 var library = []
 var downloaded = null;

resources/cider-ui-tests/views/components/mediaitem-list-item.ejs

@@ -24,7 +24,7 @@
             <div class="content-rating" v-if="item.attributes.contentRating">
                 {{ item.attributes.contentRating }}
             </div>
-            <div>
+            <div class="duration">
                 {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
             </div>
         </div>

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

@@ -197,6 +197,10 @@
                 </div>
             </div>
             <div id="app-content">
+                <!-- Artist Page -->
+                <transition name="wpfade">
+                    <%- include('pages/artist') %>
+                </transition>
                 <!-- Playlist / Album page-->
                 <transition name="wpfade">
                     <template v-if="page.includes('playlist_')">

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

@@ -0,0 +1,61 @@
+<template v-if="page == 'artist-page' && artistPage.data.attributes">
+    <div class="content-inner artist-page">
+        <div class="artist-header">
+            <div class="row">
+                <div class="col-sm" style="width: auto;">
+                    <div class="artist-image">
+
+                    </div>
+                </div>
+                <div class="col flex-center">
+                    <h1>{{ artistPage.data.attributes.name }}</h1>
+                </div>
+            </div>
+        </div>
+        <div class="artist-body">
+            <div class="row">
+                <div class="col-auto" v-if="artistPage.data.views['latest-release']">
+                    <h3>Latest Release</h3>
+                    <mediaitem-square
+                    v-for="song in artistPage.data.views['latest-release'].data"
+                    :item="song"></mediaitem-square>
+                </div>
+                <div class="col" v-if="artistPage.data.views['top-songs']">
+                    <h3>Top Songs</h3>
+                    <mediaitem-list-item
+                    v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
+                    :item="song"></mediaitem-list-item>
+                    <button class="showmoreless" @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
+                        <template v-if="!artistPage.topSongsExpanded">
+                            Show more
+                        </template>
+                        <template v-else>
+                            Show less
+                        </template>
+                    </button>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <h3>Albums</h3>
+                    <h3>Music Videos</h3>
+                    <h3>Artist Playlists</h3>
+                    <h3>Singles & EPs</h3>
+                    <h3>Live Albums</h3>
+                    <h3>Appears On</h3>
+                    <h3>More To Hear</h3>
+                    <h3>More To See</h3>
+                    <div class="row">
+                        <div class="col">
+                            <h3>About Artist Name</h3>
+                        </div>
+                        <div class="col">
+
+                        </div>
+                    </div>
+                    <h3>Similar Artists</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1 @@
+<h1 class="header-text">Settings</h1>