added support for rooms, added listitem groups to groupings

- added app.showRoom(href: string)
- applied to browse and groupings
- added listitem groups to groupings and browse

src/renderer/main/vueapp.js

@@ -1406,6 +1406,16 @@ const app = new Vue({
                 })
             }
         },
+        /** 
+         * @param {string} url, href for the initial request
+         * @memberof app
+        */
+        async showRoom(url) {
+            let self = this
+            const response = await this.mk.api.v3.music(url)
+            let room = response.data.data[0]
+            this.showCollection(room.relationships.contents, room.attributes.title)
+        },
         async showCollection(response, title, type, requestBody = {}) {
             let self = this
             console.debug(response)

src/renderer/views/pages/browse.ejs

@@ -8,14 +8,21 @@
                   <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>
+                <button class="cd-btn-seeall" v-if="recom.relationships.room" @click="app.showRoom(recom.relationships.room?.data[0].href)" >{{app.getLz('term.seeAll')}}</button>
-              </div>
+                <button class="cd-btn-seeall" v-else @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="(['327']).includes(recom.attributes.editorialElementKind)">
+                <div class="mediaitem-list-item__grid">
+                    <listitem-horizontal :items="recom.relationships.contents.data.limit(20)">
+                    </listitem-horizontal>
+                </div>                
+            </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>

src/renderer/views/pages/groupings.ejs

@@ -10,7 +10,8 @@
                       <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>
+                      <button class="cd-btn-seeall" v-if="recom.relationships.room" @click="app.showRoom(recom.relationships.room?.data[0].href)" >{{app.getLz('term.seeAll')}}</button>
+                      <button class="cd-btn-seeall" v-else @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)))">
@@ -18,6 +19,12 @@
                       <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="(['327']).includes(recom.attributes.editorialElementKind)">
+                    <div class="mediaitem-list-item__grid">
+                        <listitem-horizontal :items="recom.relationships.contents.data.limit(20)">
+                        </listitem-horizontal>
+                    </div>                
+                </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>