search improvements, fix for artist pages without color palettes

resources/cider-ui-tests/index.js

@@ -11,20 +11,6 @@ Vue.component('lyrics-view', {
     methods: {}
 });
 
-Vue.component('cider-search', {
-    template: "#cider-search",
-    props: ['search'],
-    methods: {
-        getTopResult() {
-            if (this.search.results["meta"]) {
-                return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
-            } else {
-                return false;
-            }
-        }
-    }
-})
-
 Vue.component('cider-listen-now', {
     template: "#cider-listen-now",
     props: ["data"]
@@ -246,6 +232,19 @@ const app = new Vue({
             this.artistPage.data = artistData.data[0]
             this.page = "artist-page"
         },
+        getArtistPalette(artist){
+            if(artist["attributes"]["artwork"]) {
+                return {
+                    "background": "#" + artist["attributes"]["artwork"]["bgColor"],
+                    "color": "#" + artist["attributes"]["artwork"]["textColor1"],
+                }
+            }else{
+                return {
+                    "background": "#000000",
+                    "color": "#ffffff",
+                }
+            }
+        },
         routeView (item){
             let self = this
             app.showingPlaylist = []; 
@@ -762,12 +761,44 @@ const app = new Vue({
                 })
             }
         },
+        friendlyTypes(type) {
+            // use switch statement to return friendly name for media types "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators"
+            switch (type) {
+                case "songs":
+                    return "Songs"
+                    break;
+                case "artists":
+                    return "Artists"
+                    break;
+                case "albums":
+                    return "Albums"
+                    break;
+                case "playlists":
+                    return "Playlists"
+                    break;
+                case "music-videos":
+                    return "Music Videos"
+                    break;
+                case "stations":
+                    return "Stations"
+                    break;
+                case "apple-curators":
+                    return "Apple Curators"
+                    break;
+                case "curators":
+                    return "Curators"
+                    break;
+                default:
+                    return type
+                    break;
+            }
+        },
         searchQuery() {
             let self = this
             this.mk.api.search(this.search.term,
                 {
-                    types: "songs,artists,albums,playlists",
+                    types: "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators",
-                    limit: self.search.limit
+                    limit: 25
                 }).then(function (results) {
                 self.search.results = results
             })

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

@@ -333,10 +333,12 @@
                             fill-rule="nonzero" />
                     </svg>
                 </div>
-                <div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()" title="Picture-in-Picture">
+                <div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
+                    title="Picture-in-Picture">
                     <%- include("svg/fullscreen.svg") %>
                 </div>
-                <div id="player-fullscreen" @click="document.querySelector('video').requestFullscreen()" title="Fullscreen">
+                <div id="player-fullscreen" @click="document.querySelector('video').requestFullscreen()"
+                    title="Fullscreen">
                     <%- include("svg/fullscreen.svg") %>
                 </div>
             </div>
@@ -386,71 +388,7 @@
     <%- include('pages/cider-playlist') %>
 
     <!-- Search -->
-    <script type="text/x-template" id="cider-search">
+    <%- include('pages/search') %>
-        <div class="content-inner">
-        <div class="row">
-            <div class="col-sm" style="width: auto;" v-if="getTopResult()">
-                <template>
-                    <h3>Top Result</h3>
-                    <mediaitem-square-large :item="getTopResult()"></mediaitem-square>
-                </template>
-            </div>
-            <div class="col" v-if="search.results.songs">
-                <div class="row">
-                    <div class="col">
-                        <h3>Songs</h3>
-                    </div>
-                    <div class="col-auto flex-center" v-if="search.results.songs.data.length >= 6">
-                        <button class="cd-btn-seeall">See All</button>
-                    </div>
-                </div>
-                <div>
-                    <mediaitem-list-item :item="item"
-                                         v-for="item in search.results.songs.data.limit(6)"></mediaitem-list-item>
-                </div>
-            </div>
-        </div>
-
-        <template v-if="search.results['meta']">
-            <template v-if="search.results.albums">
-                <div class="row">
-                    <div class="col">
-                        <h3>Albums</h3>
-                    </div>
-                    <div class="col-auto flex-center" v-if="search.results.albums.data.length >= 10">
-                        <button class="cd-btn-seeall">See All</button>
-                    </div>
-                </div>
-                <mediaitem-scroller-horizontal-large
-                        :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal-large>
-            </template>
-            <template v-if="search.results.artists">
-                <div class="row">
-                    <div class="col">
-                        <h3>Artists</h3>
-                    </div>
-                    <div class="col-auto flex-center" v-if="search.results.artists.data.length >= 5">
-                        <button class="cd-btn-seeall">See All</button>
-                    </div>
-                </div>
-                <mediaitem-square-large :item="item"
-                                        v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
-            </template>
-            <template v-if="search.results.playlists">
-                <div class="row">
-                    <div class="col">
-                        <h3>Playlists</h3>
-                    </div>
-                    <div class="col-auto flex-center" v-if="search.results.playlists.data.length >= 10">
-                        <button class="cd-btn-seeall">See All</button>
-                    </div>
-                </div>
-                <mediaitem-square-large :item="item"
-                                        v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
-            </template>
-        </template>
-    </div>
-</script>
 
     <script type="text/x-template" id="am-musiccovershelf">
         <h1>{{ component.attributes.title.stringForDisplay }}</h1>

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

@@ -1,9 +1,6 @@
 <template v-if="page == 'artist-page' && artistPage.data.attributes">
     <div class="content-inner artist-page">
-        <div class="artist-header" :style="{
+        <div class="artist-header" :style="getArtistPalette(artistPage.data)">
-            'background': '#' + artistPage.data.attributes.artwork.bgColor,
-            'color': '#' + artistPage.data.attributes.artwork.textColor1
-        }">
             <div class="row">
                 <div class="col-sm" style="width: auto;">
                     <div class="artist-image">

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

@@ -0,0 +1,57 @@
+<script type="text/x-template" id="cider-search">
+    <div class="content-inner">
+        <div class="row">
+            <div class="col-sm" style="width: auto;" v-if="getTopResult()">
+                <template>
+                    <h3>Top Result</h3>
+                    <mediaitem-square-large :item="getTopResult()"></mediaitem-square>
+                </template>
+            </div>
+            <div class="col" v-if="search.results.songs">
+                <div class="row">
+                    <div class="col">
+                        <h3>Songs</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="search.results.songs.data.length >= 6">
+                        <button class="cd-btn-seeall">See All</button>
+                    </div>
+                </div>
+                <div>
+                    <mediaitem-list-item :item="item"
+                                        v-for="item in search.results.songs.data.limit(6)"></mediaitem-list-item>
+                </div>
+            </div>
+        </div>
+
+        <template v-if="search.results['meta']">
+            <template v-for="section in search.results.meta.results.order">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ app.friendlyTypes(section) }}</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="search.results[section].data.length >= 10">
+                        <button class="cd-btn-seeall">See All</button>
+                    </div>
+                </div>
+                <mediaitem-scroller-horizontal-large
+                        :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
+            </template>
+        </template>
+    </div>
+</script>
+
+<script>
+    Vue.component('cider-search', {
+        template: "#cider-search",
+        props: ['search'],
+        methods: {
+            getTopResult() {
+                if (this.search.results["meta"]) {
+                    return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
+                } else {
+                    return false;
+                }
+            }
+        }
+    })
+</script>