add reason to listennow first row

src/renderer/style.less

@@ -1829,6 +1829,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.reasonSP{
+  // margin-left: 15px;
+  color: rgb(167 163 163);
+  font-weight: 500;
+  margin-left: 15px;
+}
+
 .text-overflow-elipsis {
   display: -webkit-box;
   min-width: 0px;

src/renderer/views/components/listennow-child.ejs

@@ -3,7 +3,7 @@
     <template v-if="isVisible && recom.attributes.display.kind != 'MusicSuperHeroShelf'">    
         <div class="row">
             <div class="col">
-                <h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : ""}}</h3>
+                <h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : "  "}}</h3>
             </div>
             <div class="col-auto flex-center" v-if="recom.relationships.contents.data.length >= 10">
                         <button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.contents, recom.attributes.title ? recom.attributes.title.stringForDisplay : '', 'listen_now')" >{{app.getLz('term.seeAll')}}</button>
@@ -15,6 +15,7 @@
         </template>
         <template v-else>
             <mediaitem-scroller-horizontal-sp
+            :withReason="index==0"  
             :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
         </template>
     </template> 
@@ -27,7 +28,7 @@
 <script>
     Vue.component('listennow-child', {
         template: "#listennow-child",
-        props: ["recom"],
+        props: ["recom","index"],
         data: function () {
             return {
                 isVisible: true,

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

@@ -2,7 +2,7 @@
         <div class="cd-hmedia-scroller hmedia-scroller-card">
             <vue-horizontal>
                 <template>
-                    <mediaitem-square kind="card" :item="item" size="300"
+                    <mediaitem-square kind="card" :item="item" size="300" :reasonShown="withReason"
                     v-for="item in items"></mediaitem-square>
                 </template>    
             </vue-horizontal>
@@ -12,7 +12,10 @@
 <script>
     Vue.component('mediaitem-scroller-horizontal-sp', {
         template: '#mediaitem-scroller-horizontal-sp',
-        props: ['items'],
+        props: {
+            'items': { type: Array , required: false },
+            'withReason': { type: Boolean, required: false, default: false },
+        },
         data: function () {
             return {
                 app: this.$root,

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

@@ -1,12 +1,13 @@
 <script type="text/x-template" id="mediaitem-square">
-    <div
+    <div tabindex="0"
-        tabindex="0"
     @click.self="app.routeView(item)"
     @controller-click="app.routeView(item)"
     @contextmenu.self="contextMenu"
-         class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
     v-observe-visibility="{callback: visibilityChanged}"
-         :style="{'--spcolor': getBgColor()}">
+   >
+    <div v-if="reasonShown && isVisible" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ' '}}</div>
+    <div style="{'--spcolor': getBgColor()}"
+         class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu">
         <template v-if="isVisible">           
             <div class="artwork-container">
                 <div class="unavailable-overlay" v-if="unavailable">
@@ -47,6 +48,7 @@
             </div>
         </template>
     </div>
+    </div>
 </script>
 
 <script>
@@ -69,6 +71,11 @@
                 type: Boolean,
                 default: false
             },
+            reasonShown: {
+                type: Boolean,
+                default: false,
+                required: false
+            },
             'contextExt': {type: Object, required: false},
         },
         data: function () {

src/renderer/views/pages/listen_now.ejs

@@ -1,8 +1,8 @@
 <script type="text/x-template" id="cider-listen-now">
     <div class="content-inner">
         <h1 class="header-text">{{app.getLz('term.listenNow')}}</h1>
-        <template v-for="recom in data.data">
+        <template v-for="(recom,index) in data.data">
-           <listennow-child :recom="recom"></listennow-child>
+           <listennow-child :recom="recom" :index="index"></listennow-child>
         </template>
     </div>
 </script>