initial browse page

resources/cider-ui-tests/index.js

@@ -68,6 +68,7 @@ const app = new Vue({
             desiredDuration: 0,
             userInteraction: false
         },
+        browsepage: [],
         listennow: [],
         radio: {
             personal: []
@@ -262,7 +263,9 @@ const app = new Vue({
 
             this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
                 this.currentSongInfo = a
-                a = a.item.attributes;
+                try{
+                    a = a.item.attributes;
+                } catch(_){}
 
                 let type = (self.mk.nowPlayingItem != null) ? self.mk.nowPlayingItem["type"] ?? '' : '';
 
@@ -279,6 +282,7 @@ const app = new Vue({
                 app.getNowPlayingArtworkBG(32);
                 app.loadLyrics()
                 
+                try{
                 // Playback Notifications
                 if ((app.platform === "darwin" || app.platform === "linux") && !document.hasFocus()) {
                     if (this.notification) {
@@ -290,6 +294,7 @@ const app = new Vue({
                         silent: true
                     })
                 }
+                } catch (_){}
             })
 
             this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
@@ -453,12 +458,10 @@ const app = new Vue({
                        {kind = "recordLabel"}
                     else {kind = "curator"}  
                     app.page = (kind) + "_" + (id);
-                    console.log("oks");
                     app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo",include: 'grouping,playlists', views: 'top-releases,latest-releases,top-artists'});
                 } 
                 else if (!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo")) {
                     app.page = (kind) + "_" + (id);
-                    console.log("oks");
                     app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo"});
                 } else {
                     app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
@@ -1003,6 +1006,30 @@ const app = new Vue({
                 this.getListenNow(attempt + 1)
             }
         },
+        async getBrowsePage(attempt = 0) {
+            if (attempt > 3) {
+                return
+            }
+            try {
+                var browse = await this.mk.api.groupings("",
+                {
+                     platform: "web",
+                     name: "music",
+                     "omit[resource:artists]": "relationships",
+                     "include[albums]": "artists",
+                     "include[songs]": "artists",
+                     "include[music-videos]": "artists",
+                     extend: "editorialArtwork,artistUrl",
+                     "fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
+                     "art[url]": "f"
+                });
+                this.browsepage = browse[0];
+                console.log(this.browsepage)
+            } catch (e) {
+                console.log(e)
+                this.getBrowsePage(attempt + 1)
+            }
+        },
         async getRadioStations(attempt = 0) {
             if (attempt > 3) {
                 return

resources/cider-ui-tests/views/components/mediaitem-mvview.ejs

@@ -7,8 +7,8 @@
                     <mediaitem-artwork
                             :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                             :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
-                            size="300"
+                            :size="imagesize ?? 300"
-                            :type="item.type"></mediaitem-artwork>
+                            ></mediaitem-artwork>
                 </div>
                 <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
                     <div class="button" style="
@@ -53,7 +53,7 @@
 <script>
     Vue.component('mediaitem-mvview', {
         template: '#mediaitem-mvview',
-        props: ['item'],
+        props: ['item', "imagesize"],
         methods: {}
     });
 </script>

resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-mvview.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
     <template>
         <div class="cd-hmedia-scroller">
-            <mediaitem-mvview :item="item"
+            <mediaitem-mvview :item="item ? (item.attributes.kind ? item: item.relationships.contents.data[0]) : []" :imagesize="imagesize"
                                     v-for="item in items"></mediaitem-mvview>
         </div>
     </template>
@@ -11,7 +11,7 @@
 <script>
     Vue.component('mediaitem-scroller-horizontal-mvview', {
         template: '#mediaitem-scroller-horizontal-mvview',
-        props: ['items'],
+        props: ['items',"imagesize"],
         methods: {}
     });
 </script>

resources/cider-ui-tests/views/main.ejs

@@ -269,9 +269,9 @@
                     </template>
                 </transition>
                 <!-- Browse -->
-                <transition name="wpfade">
+                <transition v-on:enter="app.getBrowsePage(); console.log('browse')" name="wpfade">
                     <template v-if="page == 'browse'">
-                        <div class="content-inner">
+                        <!-- <div class="content-inner">
 
                             <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
                                 MusicKit
@@ -319,7 +319,8 @@
                             <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>
-                        </div>
+                        </div> -->
+                        <cider-browse :data="browsepage"></cider-browse>
                     </template>
                 </transition>
                 <!-- Listen Now -->
@@ -407,6 +408,9 @@
     </template>
 </script>
 
+<!-- Browse -->
+<%- include('pages/browse') %>
+
 <!-- Listen Now -->
 <%- include('pages/listen_now') %>
 

resources/cider-ui-tests/views/pages/browse.ejs

@@ -0,0 +1,37 @@
+<script type="text/x-template" id="cider-browse">
+    <div class="content-inner">
+        <h1 class="header-text">Browse</h1>
+         <template v-if="data.relationships && data.relationships.tabs">
+            <template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
+            <div class="row">
+                <div class="col" v-if="recom.attributes.name != 'Chart Set'">
+                    <h3>{{ recom.attributes.name ?? ""}}</h3>
+                </div>
+                <div class="col-auto flex-center" v-if="recom.relationships && ((recom.relationships.children &&  recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
+                    <button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >See All</button>
+                </div>
+            </div>
+            <template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
+                <template v-if="(['385']).includes(recom.attributes.editorialElementKind) || index === 0">
+                    <mediaitem-scroller-horizontal-mvview :imagesize="800"
+                            :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
+                </template>
+                <template v-else-if="recom.attributes.name == 'Chart Set'">
+                   <!-- ignored -->
+                </template>
+                <template v-else>
+                    <mediaitem-scroller-horizontal-large
+                            :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
+                </template>
+            </template>
+            </template>
+        </template> 
+    </div>
+</script>
+
+<script>
+    Vue.component('cider-browse', {
+        template: "#cider-browse",
+        props: ["data"]
+    })    
+</script>