working on replacing mediaitem-sp on listen now with mediaitem-square variant

src/renderer/style.less

@@ -2703,6 +2703,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     overflow-x: overlay;
     height: 210px;
   }
+
+  &.hmedia-scroller-card {
+    height: 370px;
+    .mediaitem-card {
+      margin: 12px;
+    }
+  }
 }
 
 /* mediaitem-list-item */
@@ -3255,6 +3262,64 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       width: 128px;
     }
   }
+
+  &.mediaitem-card {
+    background: #ccc;
+    background: var(--spcolor);
+    height: 298px;
+    width: 230px;
+    max-width: 250px;
+    max-height: 500px;
+    overflow: hidden;
+    position: relative;
+    border-radius: calc(var(--mediaItemRadius) * 2);
+    box-shadow: var(--mediaItemShadow-ShadowSubtle);
+
+    .artwork {
+      width: 230px;
+      height: 230px;
+      overflow: hidden;
+      border-radius: 0px;
+      margin: 0;
+      .mediaitem-artwork {
+        border-radius: 0px;
+
+        &::after {
+          box-shadow: unset;
+        }
+      }
+    }
+
+    .title {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 0.8em;
+      font-weight: 500;
+    }
+
+    .subtitle {
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      font-size: 0.7em;
+      width: 90%;
+      display: flex;
+    }
+
+    &::after {
+      box-shadow: var(--mediaItemShadow);
+      content: "";
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+  }
 }
 
 /* mediaitem-square */

src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs

@@ -1,8 +1,8 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
     <template>
-        <div class="cd-hmedia-scroller">
+        <div class="cd-hmedia-scroller hmedia-scroller-card">
-            <mediaitem-square-sp :item="item"
+            <mediaitem-square kind="card" :item="item"
-                                 v-for="item in items"></mediaitem-square-sp>
+                                 v-for="item in items"></mediaitem-square>
         </div>
     </template>
 </script>

src/renderer/views/components/mediaitem-square.ejs

@@ -1,7 +1,9 @@
 <script type="text/x-template" id="mediaitem-square">
     <div tabindex="0"
          class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
-         v-observe-visibility="{callback: visibilityChanged}">
+         v-observe-visibility="{callback: visibilityChanged}"
+         :style="{'--spcolor': getBgColor()}"
+         @click.self='app.routeView(item)'>
         <template v-if="isVisible">
             <div class="artwork-container">
                 <div class="artwork" @click='app.routeView(item)'>
@@ -24,14 +26,14 @@
                     </div>
                 </div>
             </div>
-            <div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
+            <div class="title item-navigate text-overflow-elipsis" v-if="item.attributes.artistNames == null" @click.self='app.routeView(item)'>
                 {{ item.attributes.name }}
             </div>
             <div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')"
-                 v-if="item.attributes.artistName">
+                 v-if="getSubtitle() != ''">
-                {{ item.attributes.artistName }}
+                {{ getSubtitle() }}
             </div>
-            <div class="subtitle" v-else>&nbsp;</div>
+            <div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
         </template>
     </div>
 </script>
@@ -70,11 +72,54 @@
             await this.getBadges()
         },
         methods: {
+            getBgColor() {
+                let color = `#${(this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : `333333`}`
+                let c = color.substring(1);      // strip #
+                var rgb = parseInt(c, 16);   // convert rrggbb to decimal
+                var r = (rgb >> 16) & 0xff;  // extract red
+                var g = (rgb >>  8) & 0xff;  // extract green
+                var b = (rgb >>  0) & 0xff;  // extract blue
+
+                var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
+
+                console.log(color)
+                console.log(luma)
+                if (luma > 140) {
+                    return "#aaaaaa"
+                }else{
+                    return color
+                }
+
+
+            },
+            getSubtitle() {
+                if(this.kind == 'card') {
+                    try {
+                        if (typeof this.item.attributes.artistNames != "undefined") {
+                            return this.item.attributes.artistNames
+                        } else if (typeof this.item.attributes.editorialNotes != "undefined") {
+                            return this.item.attributes.editorialNotes.short
+                        } else if (typeof this.item.attributes.artistName != "undefined") {
+                            return this.item.attributes.artistName
+                        } else {
+                            return ''
+                        }
+                    }catch(e) {
+                        return ''
+                    }
+                }else {
+                    if (typeof this.item.attributes.artistName != "undefined") {
+                        return this.item.attributes.artistName
+                    } else {
+                        return ''
+                    }
+                }
+            },
             async getBadges() {
                 let self = this
-                if(this.badges[this.item.attributes.playParams.id ?? this.item.id]) {
+                if (this.badges[this.item.attributes.playParams.id ?? this.item.id]) {
                     let friends = this.badges[this.item.attributes.playParams.id ?? this.item.id]
-                    if(friends) {
+                    if (friends) {
                         friends.forEach(function (friend) {
                             self.app.mk.api.socialProfile(friend).then(data => {
                                 self.itemBadges.push(data)
@@ -141,6 +186,9 @@
                     default:
                         return []
                         break;
+                    case "card":
+                        return ["mediaitem-card"]
+                        break;
                     case "385": // editorial
                         return ["mediaitem-brick"]
                         break;
@@ -311,12 +359,12 @@
                     })
                 }
                 let rating = await app.getRating(self.item)
-                if(rating == 0) {
+                if (rating == 0) {
                     menus.normal.items.find(x => x.id == 'love').disabled = false
                     menus.normal.items.find(x => x.id == 'dislike').disabled = false
-                }else if(rating == 1) {
+                } else if (rating == 1) {
                     menus.normal.items.find(x => x.id == 'unlove').disabled = false
-                }else if(rating == -1) {
+                } else if (rating == -1) {
                     menus.normal.items.find(x => x.id == 'undo_dislike').disabled = false
                 }
 
@@ -332,9 +380,9 @@
             },
         },
         beforeDestroy: function () {
-            this.item = null;
+            // this.item = null;
-            this.kind = null;
+            // this.kind = null;
-            this.size = null;
+            // this.size = null;
         }
     });
 </script>