From 352819f877af4aa9e983ba583a0fbf797e5fc233 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Sat, 15 Jan 2022 14:10:27 +0700
Subject: [PATCH] add categories in search

---
 src/renderer/views/pages/search.ejs | 152 ++++++++++++++++------------
 1 file changed, 88 insertions(+), 64 deletions(-)

diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index f056ecdb..e2b69f2c 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -1,82 +1,97 @@
 <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 :item="getTopResult()"></mediaitem-square>
-                </template>
-            </div>
-            <div class="col" v-if="search.results.song">
-                <div class="row">
-                    <div class="col">
-                        <h3>Songs</h3>
+        <div v-if="search != null && search != [] && search.term != ''">
+            <div class="row">
+                <div class="col-sm" style="width: auto;" v-if="getTopResult()">
+                    <template>
+                        <h3>Top Result</h3>
+                        <mediaitem-square :item="getTopResult()"></mediaitem-square>
+                    </template>
+                </div>
+                <div class="col" v-if="search.results.song">
+                    <div class="row">
+                        <div class="col">
+                            <h3>Songs</h3>
+                        </div>
+                        <div class="col-auto flex-center"
+                            @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
+                            v-if="search.results.song.data.length >= 6">
+                            <button class="cd-btn-seeall">See All</button>
+                        </div>
                     </div>
-                    <div class="col-auto flex-center"
-                         @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
-                         v-if="search.results.song.data.length >= 6">
-                        <button class="cd-btn-seeall">See All</button>
+                    <div>
+                        <mediaitem-list-item :item="item" :index="index"
+                                            v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
                     </div>
                 </div>
-                <div>
-                    <mediaitem-list-item :item="item" :index="index"
-                                         v-for="(item, index) in search.results.song.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" v-if="section != 'song' && section != 'top'">
+            <template v-if="search.results['meta'] != null">
+                <template
+                        v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
+                    <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"
+                                    @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See
+                                All
+                            </button>
+                        </div>
+                    </div>
+                    <template v-if="!app.friendlyTypes(section).includes('Video')">
+                        <mediaitem-scroller-horizontal-large
+                                :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
+                    </template>
+                    <template v-else>
+                        <mediaitem-scroller-horizontal-mvview
+                                :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
+                    </template>
+                </template>
+            </template>
+            <template v-if="search.resultsSocial.playlist">
                 <div class="row">
                     <div class="col">
-                        <h3>{{ app.friendlyTypes(section) }}</h3>
+                        <h3>Shared Playlists</h3>
                     </div>
-                    <div class="col-auto flex-center" v-if="search.results[section].data.length >= 10">
+                    <div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.data.length >= 10">
                         <button class="cd-btn-seeall"
-                                @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See
-                            All
+                                @click="app.showCollection(search.resultsSocial.playlist.data, 'Shared Playlists', 'default')">See All
                         </button>
                     </div>
                 </div>
-                <template v-if="!app.friendlyTypes(section).includes('Video')">
-                    <mediaitem-scroller-horizontal-large
-                            :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
-                </template>
-                <template v-else>
-                    <mediaitem-scroller-horizontal-mvview
-                            :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
-                </template>
+                <mediaitem-scroller-horizontal-large
+                        :items="search.resultsSocial.playlist.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
             </template>
-        </template>
-        <template v-if="search.resultsSocial.playlist">
-            <div class="row">
-                <div class="col">
-                    <h3>Shared Playlists</h3>
+            <template v-if="search.resultsSocial.profile">
+                <div class="row">
+                    <div class="col">
+                        <h3>People</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.data.length >= 10">
+                        <button class="cd-btn-seeall"
+                                @click="app.showCollection(search.resultsSocial.profile.data, 'People', 'default')">See All
+                        </button>
+                    </div>
                 </div>
-                <div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.data.length >= 10">
-                    <button class="cd-btn-seeall"
-                            @click="app.showCollection(search.resultsSocial.playlist.data, 'Shared Playlists', 'default')">See All
-                    </button>
+                <mediaitem-scroller-horizontal-large
+                        :items="search.resultsSocial.profile.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
+            </template>
+        </div>
+        <div v-else>
+           <div v-if="categoriesReady || getCategories()">
+                <div>
+                    <div class="col" v-if="categoriesView != null && categoriesView != [] && categoriesView[0].attributes != null && categoriesView[0].attributes.title != null">
+                        <h3>{{categoriesView[0].attributes.title.stringForDisplay ?? ""}}</h3>
+                    </div>  
+                    <mediaitem-square :kind="'385'" size="600"
+                    :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
+                    :imagesize="800"
+                    v-for="item in categoriesView[1].relationships.contents.data.filter(item => item.type != 'editorial-items')">
                 </div>
-            </div>
-            <mediaitem-scroller-horizontal-large
-                    :items="search.resultsSocial.playlist.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
-        </template>
-        <template v-if="search.resultsSocial.profile">
-            <div class="row">
-                <div class="col">
-                    <h3>People</h3>
-                </div>
-                <div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.data.length >= 10">
-                    <button class="cd-btn-seeall"
-                            @click="app.showCollection(search.resultsSocial.profile.data, 'People', 'default')">See All
-                    </button>
-                </div>
-            </div>
-            <mediaitem-scroller-horizontal-large
-                    :items="search.resultsSocial.profile.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
-        </template>
+           </div>
+        </div>    
     </div>
 </script>
 
@@ -86,8 +101,10 @@
         props: ['search'],
         data: function () {
             return {
-                app: this.$root
-            }
+                app: this.$root,
+                categoriesView : [],
+                categoriesReady : false,
+            }    
         },
         methods: {
             getTopResult() {
@@ -96,6 +113,13 @@
                 } else {
                     return false;
                 }
+            },
+            async getCategories() {
+                if(this.categoriesView != [] && this.categoriesView.length > 0) {this.categoriesReady = true; return await true;} else {
+                let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities`);
+                this.categoriesView = response.data.data;
+                this.categoriesReady = true;
+                return await true;}
             }
         }
     })