listen now looking good

resources/cider-ui-tests/index.html

@@ -276,7 +276,7 @@
                 </div>
             </div>
             <template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
-            <mediaitem-scroller-horizontal :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal>
+                <mediaitem-scroller-horizontal-large :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
             </template>
             <template v-else>
                 <mediaitem-scroller-horizontal-sp :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>    
@@ -371,6 +371,15 @@
     </template>
 </script>
 
+<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
+    <template>
+        <div class="cd-hmedia-scroller">
+            <mediaitem-square-large :item="item" 
+                              v-for="item in items"></mediaitem-square-large>
+        </div>
+    </template>
+</script>
+
 <script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
     <template>
         <div class="cd-hmedia-scroller">
@@ -448,11 +457,28 @@
     </template>
 </script>
 
+<script type="text/x-template" id="mediaitem-square-large">
+    <template>
+        <div @click="app.playMediaItemById(item.id, item.type)"
+             class="cd-mediaitem-square-large">
+            <div class="artwork"
+                 :class="{'round': item.type == 'artists'}"
+                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
+            <div class="title text-overflow-elipsis">
+                {{ item.attributes.name }}
+            </div>
+            <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
+                {{ item.attributes.artistName }}
+            </div>
+        </div>
+    </template>
+</script>
+
 <script type="text/x-template" id="mediaitem-square-sp">
     <template>
         <div @click="app.playMediaItemById(item.id, item.type)"
              class="cd-mediaitem-square-sp"
-             :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : transparent}"
+             :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"
              
              >
             <div class="artwork"

resources/cider-ui-tests/index.js

@@ -16,18 +16,29 @@ Vue.component('mediaitem-scroller-horizontal-sp', {
     methods: {}
 });
 
+Vue.component('mediaitem-scroller-horizontal-large', {
+    template: '#mediaitem-scroller-horizontal-large',
+    props: ['items'],
+    methods: {}
+});
+
 Vue.component('mediaitem-square', {
     template: '#mediaitem-square',
     props: ['item'],
     methods: {}
 });
-
 Vue.component('mediaitem-square-sp', {
     template: '#mediaitem-square-sp',
     props: ['item'],
     methods: {}
 });
 
+Vue.component('mediaitem-square-large', {
+    template: '#mediaitem-square-large',
+    props: ['item'],
+    methods: {}
+});
+
 Vue.component('mediaitem-hrect', {
     template: '#mediaitem-hrect',
     props: ['item'],

resources/cider-ui-tests/style.css

@@ -1453,6 +1453,51 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     font-size: 12px;
 }
 
+/* mediaitem-square-large */
+.cd-mediaitem-square-large {
+    width: 190px;
+    height: 250px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    font-size: 14px;
+    justify-content: flex-start;
+    align-items: center;
+    border-radius: 6px;
+    margin-left: 10px;
+    cursor: pointer;
+}
+
+.cd-mediaitem-square-large:hover {
+    background: rgb(200 200 200 / 10%);
+}
+
+.cd-mediaitem-square-large .artwork {
+    height: 190px;
+    width: 190px;
+    background: blue;
+    border-radius: var(--mediaItemRadius);
+    background: var(--artwork);
+    background-size: cover;
+    box-shadow: var(--mediaItemShadow);
+    flex: 0 0 auto;
+    margin: 6px;
+}
+
+.cd-mediaitem-square-large .artwork.round {
+    border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-square-large .title {
+    width: 90%;
+    text-align: center;
+}
+
+.cd-mediaitem-square-large .subtitle {
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+}
 
 /* mediaitem-square */
 .cd-mediaitem-square {