support for groupings

src/main/base/browserwindow.ts

@@ -56,6 +56,7 @@ export class BrowserWindow {
                 "pages/library-albums",
                 "pages/library-artists",
                 "pages/browse",
+                "pages/groupings",
                 "pages/settings",
                 "pages/installed-themes",
                 "pages/listen_now",
@@ -188,6 +189,11 @@ export class BrowserWindow {
                     component: `<cider-browse :data="browsepage"></cider-browse>`,
                     condition: `page == 'browse'`,
                     onEnter: ``
+                },{
+                    page: "groupings",
+                    component: `<cider-groupings :data="browsepage"></cider-groupings>`,
+                    condition: `page == 'groupings'`,
+                    onEnter: ``
                 }, {
                     page: "listen_now",
                     component: `<cider-listen-now :data="listennow"></cider-listen-now>`,

src/renderer/less/elements.less

@@ -2048,4 +2048,39 @@ input[type=checkbox][switch]:checked:active::before {
     z-index       : 0;
     pointer-events: none;
   }
+}
+
+.grouping-container {
+  display: flex;
+  flex-flow: wrap;
+  gap: 16px;
+  .grouping-btn {
+    padding: 16px;
+    appearance: none;
+    border: 0px;
+    border-radius: 10px;
+    background: var(--color1);
+    color: var(--keyColor);
+    width: 100%;
+    text-align: left;
+    font-family: inherit;
+    cursor: pointer;
+    flex: 1 0 21%;
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      font-family: "codicon";
+      display: flex;
+      align-items: center;
+      width: 28px;
+      font-weight: bold;
+      font-size: 1.2em;
+      pointer-events: none;
+    }
+  }
 }

src/renderer/main/events.js

@@ -4,7 +4,10 @@ const Events = {
 
 // add event listener for when window.location.hash changes
         window.addEventListener("hashchange", function () {
-            app.appRoute(window.location.hash)
+            app.page = "blank"
+            setTimeout(()=>{
+                app.appRoute(window.location.hash)
+            }, 100)
         });
 
         window.addEventListener("mouseup", (e) => {

src/renderer/main/vueapp.js

@@ -484,6 +484,10 @@ const app = new Vue({
                 }, 100)
             })
         },
+        goToGrouping(url = "https://music.apple.com/WebObjects/MZStore.woa/wa/viewGrouping?cc=us&id=34") {
+            const id = url.split("id=")[1];
+            window.location.hash = `#groupings/${id}`
+        },
         navigateForward() {
             history.forward()
         },

src/renderer/views/pages/browse.ejs

@@ -1,49 +1,58 @@
 <script type="text/x-template" id="cider-browse">
-    <div class="content-inner">
+  <div class="content-inner">
-        <h1 class="header-text">{{$root.getLz("term.browse")}}</h1>
+      <h1 class="header-text">{{$root.getLz("term.browse")}}</h1>
-         <template v-if="data.relationships && data.relationships.tabs">
+       <template v-if="data.relationships && data.relationships.tabs">
-            <template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
+          <template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
-            <div class="row">
+          <div class="row">
-                <div class="col" v-if="recom.attributes.name != 'Chart Set'">
+              <div class="col" v-if="recom.attributes.name != 'Chart Set'">
-                    <h3>{{ recom.attributes.name ?? ""}}</h3>
+                  <h3>{{ recom.attributes.name ?? ""}}</h3>
+              </div>
+              <div class="col-auto flex-center" v-if="index != 0 && 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')" >{{app.getLz('term.seeAll')}}</button>
+              </div>
+          </div>
+          <template v-if="(recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data)))">
+              <template v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
+                  <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)" :kind="recom.attributes.editorialElementKind"
+                          :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="(['385']).includes(recom.attributes.editorialElementKind)">
+                  <mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
+                          :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 v-else>
+            <template v-if="recom.attributes.links && recom.attributes.editorialElementKind.includes('391')">
+                <div class="grouping-container">
+                    <button class="grouping-btn" @click="$root.goToGrouping(link.url)" v-for="link in recom.attributes.links">{{ link.label }}</button>
                 </div>
-                <div class="col-auto flex-center" v-if="index != 0 && 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')" >{{app.getLz('term.seeAll')}}</button>
-                </div>
-            </div>
-            <template v-if="recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
-                <template v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
-                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)" :kind="recom.attributes.editorialElementKind"
-                            :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="(['385']).includes(recom.attributes.editorialElementKind)">
-                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
-                            :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>
-        </template> 
+          </template>
-    </div>
+      </template>
+  </div>
 </script>
 
 <script>
-    Vue.component('cider-browse', {
+  Vue.component("cider-browse", {
-        template: "#cider-browse",
+    template: "#cider-browse",
-        props: ["data"],
+    props: ["data"],
-        data: function () {
+    data: function () {
-            return {
+      return {
-                app: this.$root
+        app: this.$root,
-            }
+      };
-        },
+    },
-        mounted() {
+    mounted() {
-            this.$root.getBrowsePage();
+      this.$root.getBrowsePage();
-        }
+    },
-    })    
+    methods: {
-</script>
+    }
+  });
+</script>

src/renderer/views/pages/groupings.ejs

@@ -0,0 +1,76 @@
+<script type="text/x-template" id="cider-groupings">
+  <div class="content-inner">
+       <template v-if="data != null">
+          <h1 class="header-text">{{data.attributes?.name}}</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="index != 0 && 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')" >{{app.getLz('term.seeAll')}}</button>
+                  </div>
+              </div>
+              <template v-if="(recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data)))">
+                  <template v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
+                      <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)" :kind="recom.attributes.editorialElementKind"
+                              :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="(['385']).includes(recom.attributes.editorialElementKind)">
+                      <mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
+                              :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 v-else>
+                <template v-if="recom.attributes.links && recom.attributes.editorialElementKind.includes('391')">
+                    <div class="grouping-container">
+                        <button class="grouping-btn" @click="$root.goToGrouping(link.url)" v-for="link in recom.attributes.links">{{ link.label }}</button>
+                    </div>
+                </template>
+              </template>
+              </template>
+          </template>
+      </template>
+  </div>
+</script>
+
+<script>
+  Vue.component("cider-groupings", {
+    template: "#cider-groupings",
+    data: function () {
+      return {
+        data: null,
+        app: this.$root,
+        query: "",
+      };
+    },
+    async mounted() {   
+      const queryDefaults = `?platform=web&l=en-us&extend=editorialArtwork%2CartistUrl&omit%5Bresource%3Aartists%5D=relationships&include[groupings]=curator&include[albums]=artists&include[songs]=artists&include[music-videos]=artists&fields%5Bartists%5D=name%2Curl%2Cartwork%2CeditorialArtwork%2CgenreNames%2CeditorialNotes`
+      const hash = window.location.hash;
+      // get everything after the first / character but keep everything afterwards
+      const query = hash.substring(hash.indexOf("/") + 1);
+      this.query = query;
+      if(!this.query.includes("?")) {
+        this.query += queryDefaults;
+      }
+      console.debug(query);
+      const result = await this.$root.mk.api.v3.music(
+        `/v1/editorial/${this.$root.mk.storefrontId}/groupings/${this.query}`
+      );
+      this.data = result.data.data[0];
+
+      console.log(this.data);
+
+      //this.$root.getBrowsePage();
+    },
+  });
+</script>