From 5508f43aad02fbcd07b69e7fb97a15f07dd60385 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 7 Dec 2021 00:41:27 -0800
Subject: [PATCH] search improvements, fix for artist pages without color
 palettes

---
 resources/cider-ui-tests/index.js             | 63 ++++++++++----
 resources/cider-ui-tests/views/main.ejs       | 82 +++----------------
 .../cider-ui-tests/views/pages/artist.ejs     |  5 +-
 .../cider-ui-tests/views/pages/search.ejs     | 57 +++++++++++++
 4 files changed, 115 insertions(+), 92 deletions(-)

diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index ea893bfb..af3db417 100644
--- a/resources/cider-ui-tests/index.js
+++ b/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",
-                    limit: self.search.limit
+                    types: "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators",
+                    limit: 25
                 }).then(function (results) {
                 self.search.results = results
             })
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index b00de4e7..42eb3c81 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/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>
@@ -347,8 +349,8 @@
     <%- include("components/mediaitem-artwork"); %>
 
     <!-- Generic Collection of MediaItems -->
-    <script type="text/x-template" id="collection-view-generic">
-        <template>
+<script type="text/x-template" id="collection-view-generic">
+    <template>
         <div class="content-inner">
 
         </div>
@@ -356,8 +358,8 @@
 </script>
 
     <!-- Listen Now -->
-    <script type="text/x-template" id="cider-listen-now">
-        <div class="content-inner">
+<script type="text/x-template" id="cider-listen-now">
+    <div class="content-inner">
         <h1 class="header-text">Listen Now</h1>
         <template v-for="recom in data.data">
             <div class="row">
@@ -386,75 +388,11 @@
     <%- include('pages/cider-playlist') %>
 
     <!-- Search -->
-    <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-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>
+    <%- include('pages/search') %>
 
     <script type="text/x-template" id="am-musiccovershelf">
         <h1>{{ component.attributes.title.stringForDisplay }}</h1>
-</script>
+    </script>
 
     <!-- Sidebar Item -->
     <script type="text/x-template" id="sidebar-library-item">
diff --git a/resources/cider-ui-tests/views/pages/artist.ejs b/resources/cider-ui-tests/views/pages/artist.ejs
index 9cb02a86..c851f906 100644
--- a/resources/cider-ui-tests/views/pages/artist.ejs
+++ b/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="{
-            'background': '#' + artistPage.data.attributes.artwork.bgColor,
-            'color': '#' + artistPage.data.attributes.artwork.textColor1
-        }">
+        <div class="artist-header" :style="getArtistPalette(artistPage.data)">
             <div class="row">
                 <div class="col-sm" style="width: auto;">
                     <div class="artist-image">
diff --git a/resources/cider-ui-tests/views/pages/search.ejs b/resources/cider-ui-tests/views/pages/search.ejs
index e69de29b..3b3e3a7b 100644
--- a/resources/cider-ui-tests/views/pages/search.ejs
+++ b/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>
\ No newline at end of file