From 60f9f83c096f8a4278604d72276af62c86725124 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 2 Dec 2021 22:24:58 -0800
Subject: [PATCH] added search and play from search

---
 resources/cider-ui-tests/index.html | 106 ++++++++++++++++++++--------
 resources/cider-ui-tests/index.js   |  25 ++++++-
 2 files changed, 102 insertions(+), 29 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 3fb8a3cc..867b9c6f 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -106,7 +106,12 @@
                     <div class="app-sidebar-header">
                         <div class="search-input-container">
                             <div class="search-input--icon"></div>
-                            <input type="search" placeholder="Search..." class="search-input">
+                            <input type="search"
+                                   @click="showSearch()"
+                                   @change="showSearch();searchQuery()"
+                                   placeholder="Search..."
+                                   v-model="search.term"
+                                   class="search-input">
                         </div>
                     </div>
                     <div class="app-sidebar-content">
@@ -142,36 +147,81 @@
                     </div>
                 </div>
                 <div id="app-content">
-                    <button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
-                    <br>
-                    <template v-if="mk.nowPlayingItem">
-                        currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
+                    <!-- Browse -->
+                    <template v-if="page == 'browse'">
+                        <button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
                         <br>
-                        currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
-                    </template>
-                    <div><input type="text" v-model="quickPlayQuery">
-                        <button @click="quickPlay(quickPlayQuery)">Play</button></div>
-                    <h1 class="header-text">Browse</h1>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
-                        consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
-                    </p>
-                    <div class="media-item--small">
-                        <div class="artwork">
+                        <template v-if="mk.nowPlayingItem">
+                            currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
+                            <br>
+                            currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
+                        </template>
+                        <div><input type="text" v-model="quickPlayQuery">
+                            <button @click="quickPlay(quickPlayQuery)">Play</button></div>
+                        <h1 class="header-text">Browse</h1>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
+                            consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
+                        </p>
+                        <div class="media-item--small">
+                            <div class="artwork">
 
+                            </div>
+                            <div class="text">
+                                Text
+                            </div>
+                            <div class="subtext">
+                                Subtext
+                            </div>
                         </div>
-                        <div class="text">
-                            Text
-                        </div>
-                        <div class="subtext">
-                            Subtext
-                        </div>
-                    </div>
-                    <br>
-                    <br>
-                    <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
-                    <button class="md-btn">Button</button>
-                    <button class="md-btn md-btn-primary">Button</button>
+                        <br>
+                        <br>
+                        <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
+                        <button class="md-btn">Button</button>
+                        <button class="md-btn md-btn-primary">Button</button>
+                    </template>
+                    <!-- Search -->
+                    <template v-if="page == 'search'">
+                        <h1 class="header-text">{{ search.term }}</h1>
+                        <template v-if="search.results['meta']">
+                            <template v-if="search.results.songs">
+                                <h3>Songs</h3>
+                                <button
+                                        @click="playMediaItemById(item.id, item.type)"
+                                        v-for="item in search.results.songs.data">
+                                    <b>{{ item.attributes.name }}</b>
+                                    <br>
+                                    {{ item.attributes.artistName }}
+                                </button>
+                            </template>
+                            <template v-if="search.results.songs">
+                                <h3>Albums</h3>
+                                <button
+                                        @click="playMediaItemById(item.id, item.type)"
+                                        v-for="item in search.results.albums.data">
+                                    <b>{{ item.attributes.name }}</b>
+                                    <br>
+                                    {{ item.attributes.artistName }}
+                                </button>
+                            </template>
+                            <template v-if="search.results.songs">
+                                <h3>Artists</h3>
+                                <button
+                                        @click="playMediaItemById(item.id, item.type)"
+                                        v-for="item in search.results.artists.data">
+                                    {{ item.attributes.name }}
+                                </button>
+                            </template>
+                            <template v-if="search.results.songs">
+                                <h3>Playlists</h3>
+                                <button
+                                        @click="playMediaItemById(item.id, item.type)"
+                                        v-for="item in search.results.playlists.data">
+                                    {{ item.attributes.name }}
+                                </button>
+                            </template>
+                        </template>
+                    </template>
                 </div>
                 <div class="app-drawer" v-if="drawertest">
 
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 75c32b3c..9a2fa4c5 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -3,7 +3,12 @@ var app = new Vue({
     data: {
         drawertest: false,
         mk: {},
-        quickPlayQuery: ""
+        quickPlayQuery: "",
+        search: {
+            term: "",
+            results: {}
+        },
+        page: "browse"
     },
     methods: {
         init() {
@@ -11,6 +16,24 @@ var app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
         },
+        showSearch() {
+            this.page = "search"
+        },
+        playMediaItemById(id, kind) {
+            this.mk.setQueue({ [kind]: [id] }).then(function (queue) {
+                MusicKit.getInstance().play()
+            })
+        },
+        searchQuery() {
+            let self = this
+            this.mk.api.search(this.search.term,
+                {
+                    types: "songs,artists,albums,playlists",
+                    limit: 32
+                }).then(function(results) {
+                self.search.results = results
+            })
+        },
         mkReady() {
             if(this.mk["nowPlayingItem"]) {
                 return true