From a5885cf31bd7968e771f5831c443ffef8cedd44c Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 3 Dec 2021 16:00:20 -0800
Subject: [PATCH] Added basis for library-songs, made search a component,
 changed search layout, added new app.mkapi

Added basis for library-songs, made search a component, changed search layout, added new app.mkapi
---
 resources/cider-ui-tests/ameframework.css |   6 +-
 resources/cider-ui-tests/index.html       | 127 +++++++++++++++++-----
 resources/cider-ui-tests/index.js         | 104 ++++++++++++++++--
 resources/cider-ui-tests/style.css        |  31 +++++-
 resources/cider-ui-tests/todo.js          |   6 +-
 5 files changed, 224 insertions(+), 50 deletions(-)
diff --git a/resources/cider-ui-tests/ameframework.css b/resources/cider-ui-tests/ameframework.css
index ec7826da..ed9016dc 100644
--- a/resources/cider-ui-tests/ameframework.css
+++ b/resources/cider-ui-tests/ameframework.css
@@ -218,9 +218,9 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
     --bs-gutter-y: 0;
     display: flex;
     flex-wrap: wrap;
-    margin-top: calc(-1 * var(--bs-gutter-y));
-    margin-right: calc(-0.5 * var(--bs-gutter-x));
-    margin-left: calc(-0.5 * var(--bs-gutter-x));
+    /*margin-top: calc(-1 * var(--bs-gutter-y));*/
+    /*margin-right: calc(-0.5 * var(--bs-gutter-x));*/
+    /*margin-left: calc(-0.5 * var(--bs-gutter-x));*/
 }
 
 .row > * {
diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index d424087d..e2b2875b 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -22,7 +22,7 @@
     <link rel="manifest" href="./manifest.json?v=2">
 </head>
 
-<body oncontextmenu="return false;">
+<body oncontextmenu="return false;" loading="1">
 <div id="app">
     <div id="app-main">
         <div class="app-chrome">
@@ -219,30 +219,24 @@
                 <!-- Search -->
                 <transition name="wpfade">
                     <template v-if="page == 'search'">
+                        <cider-search :search="search"></cider-search>
+                    </template>
+                </transition>
+                <!-- Library - Songs -->
+                <transition name="wpfade" v-on:enter="getLibrarySongs()">
+                    <template v-if="page == 'library-songs'">
                         <div class="content-inner">
-                            <h1 class="header-text">{{ search.term }}</h1>
-                            <template v-if="search.results['meta']">
-                                <template v-if="search.results.songs">
-                                    <h3>Artists</h3>
-                                    <mediaitem-square :item="item"
-                                                      v-for="item in search.results.artists.data"></mediaitem-square>
-                                </template>
-                                <template v-if="search.results.songs">
-                                    <h3>Songs</h3>
-                                    <mediaitem-list-item :item="item"
-                                                         v-for="item in search.results.songs.data"></mediaitem-list-item>
-                                </template>
-                                <template v-if="search.results.songs">
-                                    <h3>Albums</h3>
-                                    <mediaitem-square :item="item"
-                                                      v-for="item in search.results.albums.data"></mediaitem-square>
-                                </template>
-                                <template v-if="search.results.songs">
-                                    <h3>Playlists</h3>
-                                    <mediaitem-square :item="item"
-                                                      v-for="item in search.results.playlists.data"></mediaitem-square>
-                                </template>
-                            </template>
+                            <h1 class="header-text">Songs</h1>
+                            <div class="search-input-container" style="width:100%;margin: 16px 0px;">
+                                <div class="search-input--icon"></div>
+                                <input type="search"
+                                       style="width:100%;"
+                                       spellcheck="false"
+                                       placeholder="Search..."
+                                       class="search-input">
+                            </div>
+                            <mediaitem-list-item :item="item"
+                                                 v-for="item in library.songs.listing"></mediaitem-list-item>
                         </div>
                     </template>
                 </transition>
@@ -255,6 +249,76 @@
     <div class="bg-artwork"></div>
 </div>
 
+<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.songs">
+                <div class="row">
+                    <div class="col">
+                        <h3>Songs</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="search.results.songs.data.length == search.limit">
+                        <button class="cd-btn-seeall">See All</button>
+                    </div>
+                </div>
+                <div>
+                    <mediaitem-list-item :item="item"
+                                         v-for="item in search.results.songs.data"></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 == search.limit">
+                        <button class="cd-btn-seeall">See All</button>
+                    </div>
+                </div>
+                <mediaitem-square :item="item"
+                                  v-for="item in search.results.albums.data"></mediaitem-square>
+            </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 == search.limit">
+                        <button class="cd-btn-seeall">See All</button>
+                    </div>
+                </div>
+                <mediaitem-square :item="item"
+                                  v-for="item in search.results.artists.data"></mediaitem-square>
+            </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 == search.limit">
+                        <button class="cd-btn-seeall">See All</button>
+                    </div>
+                </div>
+                <mediaitem-square :item="item"
+                                  v-for="item in search.results.playlists.data"></mediaitem-square>
+            </template>
+        </template>
+    </div>
+</script>
+
+<script type="text/x-template" id="am-musiccovershelf">
+    <h1>{{ component.attributes.title.stringForDisplay }}</h1>
+</script>
+
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)"
@@ -264,11 +328,11 @@
 
 <script type="text/x-template" id="mediaitem-list-item">
     <template>
-        <div @click="$parent.playMediaItemById(item.id, item.type)"
+        <div @click="app.playMediaItemById(item.id, item.type)"
              class="cd-mediaitem-list-item">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 55)}
+                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 34)}
                 "></div>
             <div class="info-rect">
                 <div class="title text-overflow-elipsis">
@@ -277,6 +341,9 @@
                 <div class="subtitle text-overflow-elipsis">
                     <template v-if="item.attributes.artistName">
                         {{ item.attributes.artistName }}
+                        <template v-if="item.attributes.albumName">
+                             - {{ item.attributes.albumName }}
+                        </template>
                     </template>
                 </div>
             </div>
@@ -289,11 +356,11 @@
 
 <script type="text/x-template" id="mediaitem-hrect">
     <template>
-        <div @click="$parent.playMediaItemById(item.id, item.type)"
+        <div @click="app.playMediaItemById(item.id, item.type)"
              class="cd-mediaitem-hrect">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 70)}
+                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 70)}
                 "></div>
             <div class="info-rect">
                 <div class="title text-overflow-elipsis">
@@ -312,11 +379,11 @@
 
 <script type="text/x-template" id="mediaitem-square">
     <template>
-        <div @click="$parent.playMediaItemById(item.id, item.type)"
+        <div @click="app.playMediaItemById(item.id, item.type)"
              class="cd-mediaitem-square">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
+                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
             <div class="title text-overflow-elipsis">
                 {{ item.attributes.name }}
             </div>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 1b858808..abbd6db4 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -22,6 +22,20 @@ Vue.component('mediaitem-list-item', {
     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;
+            }
+        }
+    }
+})
+
 const MusicKitTools = {
     getHeader() {
         return new Headers({
@@ -41,7 +55,8 @@ const app = new Vue({
         quickPlayQuery: "",
         search: {
             term: "",
-            results: {}
+            results: {},
+            limit: 10
         },
         playerLCD: {
             playbackDuration: 0
@@ -49,6 +64,12 @@ const app = new Vue({
         radio: {
             personal: []
         },
+        library: {
+            songs: {
+                listing: [],
+                meta: {total: 0}
+            }
+        },
         playlists: {
             listing: [],
             details: {}
@@ -69,6 +90,7 @@ const app = new Vue({
             this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
                 self.playlists.listing = res.data
             })
+            document.body.removeAttribute("loading")
         },
         getSidebarItemClass(page) {
             if (this.page == page) {
@@ -77,12 +99,78 @@ const app = new Vue({
                 return []
             }
         },
-        async getRadioStations() {
-            this.radio.personal = await this.mk.api.recentRadioStations("",
-                {
-                    "platform": "web",
-                    "art[url]": "f"
-                });
+        async mkapi(method, library = false, term, params = {}, params2 = {}, attempts = 0) {
+            if (attempts > 3) {
+                return
+            }
+            try {
+                if (library) {
+                    return await this.mk.api.library[method](term, params, params2)
+                } else {
+                    return await this.mk.api[method](term, params, params2)
+                }
+            } catch (e) {
+                console.log(e)
+                return await this.mkapi(method, library, term, params, params2, attempts + 1)
+            }
+        },
+        async getLibrarySongs() {
+            var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
+            this.library.songs.listing = response.data
+            this.library.songs.meta = response.meta
+        },
+        async getListenNow(attempt = 0) {
+            if (attempt > 3) {
+                return
+            }
+            try {
+                await this.mk.api.personalRecommendations("",
+                    {
+                        name: "listen-now",
+                        with: "friendsMix,library,social",
+                        "art[social-profiles:url]": "c",
+                        "art[url]": "c,f",
+                        "omit[resource]": "autos",
+                        "relate[editorial-items]": "contents",
+                        extend: ["editorialCard", "editorialVideo"],
+                        "extend[albums]": ["artistUrl"],
+                        "extend[library-albums]": ["artistUrl"],
+                        "extend[playlists]": ["artistNames", "editorialArtwork"],
+                        "extend[library-playlists]": ["artistNames", "editorialArtwork"],
+                        "extend[social-profiles]": "topGenreNames",
+                        "include[albums]": "artists",
+                        "include[songs]": "artists",
+                        "include[music-videos]": "artists",
+                        "fields[albums]": ["artistName", "artistUrl", "artwork", "contentRating", "editorialArtwork", "editorialVideo", "name", "playParams", "releaseDate", "url"],
+                        "fields[artists]": ["name", "url"],
+                        "extend[stations]": ["airDate", "supportsAirTimeUpdates"],
+                        "meta[stations]": "inflectionPoints",
+                        types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells",
+                        platform: "web"
+                    },
+                    {
+                        includeResponseMeta: !0,
+                        reload: !0
+                    });
+            } catch (e) {
+                console.log(e)
+                await this.getListenNow(attempt + 1)
+            }
+        },
+        async getRadioStations(attempt = 0) {
+            if (attempt > 3) {
+                return
+            }
+            try {
+                this.radio.personal = await this.mkapi("recentRadioStations", false, "",
+                    {
+                        "platform": "web",
+                        "art[url]": "f"
+                    });
+            } catch (e) {
+                console.log(e)
+                this.getRadioStations(attempt + 1)
+            }
         },
         unauthorize() {
             this.mk.unauthorize()
@@ -100,7 +188,7 @@ const app = new Vue({
             this.mk.api.search(this.search.term,
                 {
                     types: "songs,artists,albums,playlists",
-                    limit: 32
+                    limit: self.search.limit
                 }).then(function (results) {
                 self.search.results = results
             })
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index c8ee06cc..be3afed2 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -30,6 +30,12 @@ body {
 
 body {
     background: transparent;
+    transition: opacity .10s var(--appleEase);
+}
+
+body[loading] {
+    opacity: 0.5;
+    pointer-events: none;
 }
 
 *,
@@ -167,6 +173,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     top: 0;
     left: 0;
     padding: 32px;
+    width: 100%;
 }
 
 
@@ -1224,7 +1231,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 /* mediaitem-list-item */
 .cd-mediaitem-list-item {
     width: 100%;
-    height: 80px;
+    height: 60px;
     display: inline-flex;
     flex: 0 0 auto;
     flex-direction: row;
@@ -1240,8 +1247,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .cd-mediaitem-list-item .artwork {
-    height: 55px;
-    width: 55px;
+    height: 34px;
+    width: 34px;
     background: blue;
     border-radius: var(--mediaItemRadius);
     background: var(--artwork);
@@ -1265,8 +1272,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .cd-mediaitem-list-item .subtitle {
-    width: 100%;
+    width: 90%;
     font-size: 12px;
+    opacity: 0.7;
 }
 
 .cd-mediaitem-list-item .content-rating {
@@ -1377,6 +1385,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 
+.cd-btn-seeall {
+    background: transparent;
+    border: 0px;
+    color: var(--keyColor);
+    font-family: inherit;
+    font-size:  16px;
+    border-radius: 4px;
+    padding: 6px;
+}
+
+.cd-btn-seeall:hover {
+    cursor: pointer;
+    background: rgb(200 200 200 / 10%)
+}
+
 /* Cider */
 
 /* Transitions */
diff --git a/resources/cider-ui-tests/todo.js b/resources/cider-ui-tests/todo.js
index 4ca174b1..8c35f140 100644
--- a/resources/cider-ui-tests/todo.js
+++ b/resources/cider-ui-tests/todo.js
@@ -91,10 +91,6 @@ await app.mk.api.library.albums({limit: 50}).then((data)=>{
 app.mk.api.recommendations("",{extend: "editorialArtwork,artistUrl"})
 
 // Library with library length
-/** This will return 100 tracks in an array, however
- * the library total length is not returned but present in the network traffic response under
- * meta.total.  We need a way to get the full response from the network traffic.
- */
-await app.mk.api.library.songs({limit: 100}).then((data)=>{
+await app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((data)=>{
     console.log(data)
 })
