From 91664d2d91d581dd11a8b2b16f0f3a954d8f58f0 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 21 Dec 2021 17:52:03 -0800
Subject: [PATCH] added brick type for media items, brick will now display the
 correct artwork

---
 src/renderer/style.less                       |  9 ++++++
 .../mediaitem-scroller-horizontal-mvview.ejs  |  2 +-
 .../views/components/mediaitem-square.ejs     | 28 +++++++++++++++----
 src/renderer/views/pages/browse.ejs           |  4 +--
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 535c3a48..c5d0589e 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2601,6 +2601,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       width: 212px;
     }
   }
+
+  &.mediaitem-brick {
+    height: 200px;
+    width: 240px;
+    .artwork {
+      height: 123px;
+      width: 220px;
+    }
+  }
 }
 
 .cd-btn-seeall {
diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs
index 3e5edb93..19919512 100644
--- a/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs
+++ b/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs
@@ -6,7 +6,7 @@
                    :badge="item.attributes"                     v-for="item in items"></mediaitem-mvview-sp>
             </template>
             <template v-else>
-                <mediaitem-square :kind="kind" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
+                <mediaitem-square :kind="kind" size="600" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
                 v-for="item in items"></mediaitem-square>
             </template>                            
         </div>
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 2cca2e9e..39d64a40 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -6,9 +6,9 @@
                     <div class="artwork-container">
                         <div class="artwork" @click='app.routeView(item)'>
                             <mediaitem-artwork
-                                    :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                                    :url="getArtworkUrl()"
                                     :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="size"
                                     shadow="subtle"
                                     :type="item.type"></mediaitem-artwork>
                         </div>
@@ -38,6 +38,10 @@
             kind: {
                 type: String,
                 default: ''
+            },
+            size: {
+                type: String,
+                default: '300'
             }
         },
         data: function () {
@@ -48,19 +52,31 @@
             }
         },
         methods: {
+            getArtworkUrl() {
+                let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
+                switch (this.kind) {
+                    case "385":
+                        artwork = this.item.attributes.editorialArtwork.subscriptionHero.url
+                        break;
+                }
+                return artwork
+            },
             getClasses() {
                 let type = this.item.type
-                if(this.kind != "") {
+                if (this.kind != "") {
                     type = this.kind
                 }
-                switch(type) {
+                switch (type) {
                     default:
                         return []
-                    break;
+                        break;
+                    case "385": // editorial
+                        return ["mediaitem-brick"]
+                        break;
                     case "music-videos":
                     case "uploaded-videos":
                         return "mediaitem-video";
-                    break;
+                        break;
                 }
             },
             visibilityChanged: function (isVisible, entry) {
diff --git a/src/renderer/views/pages/browse.ejs b/src/renderer/views/pages/browse.ejs
index 0bec99e1..b8ebbd93 100644
--- a/src/renderer/views/pages/browse.ejs
+++ b/src/renderer/views/pages/browse.ejs
@@ -13,11 +13,11 @@
             </div>
             <template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
                 <template v-if="index === 0">
-                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
+                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0" :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="music-videos"
+                    <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'">