orchard/src/renderer/views/pages/search.ejs

<script type="text/x-template" id="cider-search">
    <div class="content-inner">
        <div v-if="search != null && search != [] && search.term != ''">
            <div class="row">
                <div class="col-sm" style="width: auto;" v-if="getTopResult()">
                    <template>
                        <h3>{{app.getLz('term.topResult')}}</h3>
                        <mediaitem-square :item="getTopResult()"></mediaitem-square>
                    </template>
                </div>
                <div v-else style="text-align: center">
                    <h3>{{app.getLz('error.noResults')}}</h3>
                    <p>{{app.getLz('error.noResults.description')}}</p>
                </div>
                <div class="col" v-if="search.results.song">
                    <div class="row">
                        <div class="col">
                            <h3>{{app.getLz('term.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 >= 12">
                            <button class="cd-btn-seeall">{{app.getLz('term.seeAll')}}</button>
                        </div>
                    </div>
                    <div class="mediaitem-list-item__grid">
                        <div class="grid-body">
                        <mediaitem-list-item :item="item" :index="index"
                            v-for="(item, index) in search.results.song.data.limit(12)"></mediaitem-list-item>
                        </div>
                    </div>
                </div>
            </div>

            <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))">{{app.getLz('term.seeAll')}}
                            </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.getLz('term.sharedPlaylists')}}</h3>
                    </div>
                    <div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.length >= 10">
                        <button class="cd-btn-seeall"
                                @click="app.showCollection(search.resultsSocial.playlist, 'Shared Playlists', 'default')">{{app.getLz('term.seeAll')}}
                        </button>
                    </div>
                </div>
                <mediaitem-scroller-horizontal-large
                        :items="search.resultsSocial.playlist.data.limit(10)"></mediaitem-scroller-horizontal-large>
            </template>
            <template v-if="search.resultsSocial.profile">
                <div class="row">
                    <div class="col">
                        <h3>{{app.getLz('term.people')}}</h3>
                    </div>
                    <div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.length >= 10">
                        <button class="cd-btn-seeall"
                                @click="app.showCollection(search.resultsSocial.profile, 'People', 'default')">{{app.getLz('term.seeAll')}}
                        </button>
                    </div>
                </div>
                <mediaitem-scroller-horizontal-large
                        :items="search.resultsSocial.profile.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 of getFlattenedCategories()">
                </div>
           </div>
        </div>    
    </div>
</script>

<script>
    Vue.component('cider-search', {
        template: "#cider-search",
        props: ['search'],
        data: function () {
            return {
                app: this.$root,
                categoriesView: [],
                categoriesReady: false,
            }
        },
        methods: {
            getTopResult() {
                try {
                    return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
                } catch (error) {
                    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;
                    console.log(this.categoriesView)
                    this.categoriesReady = true;
                    return await true;
                }
            },
            getFlattenedCategories() {
                let flattened = [];
                for (let i = 0; i < this.categoriesView.length; i++) {
                    if (this.categoriesView[i].relationships && this.categoriesView[i].relationships.contents && this.categoriesView[i].relationships.contents.data) {
                        for (let j = 0; j < this.categoriesView[i].relationships.contents.data.length; j++) {
                            if (this.categoriesView[i].relationships.contents.data[j].type != 'editorial-items')
                            flattened.push(this.categoriesView[i].relationships.contents.data[j])
                        }
                    }
                }
                return flattened;
            }
        }
    })
</script>