changes to songs page, changes to mediaitem-list-item

Added props to mediaitem-list-item
show-artwork
show-library-status
show-meta-data

resources/cider-ui-tests/style.css

@@ -1665,6 +1665,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     text-align: center;
 }
 
+.cd-mediaitem-list-item .metainfo {
+    min-width: 145px;
+    text-align: center;
+}
+
 .cd-mediaitem-list-item .content-rating {
     text-transform: uppercase;
     font-size: 10px;

resources/cider-ui-tests/views/components/mediaitem-list-item.ejs

@@ -2,17 +2,17 @@
     <template>
         <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
              class="cd-mediaitem-list-item">
-            <div class="isLibrary">
+            <div class="isLibrary" v-if="showLibraryStatus == true">
                 <button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
                 <button v-else>❤️</button>
             </div>
-            <div class="artwork">
+            <div class="artwork" v-if="showArtwork == true">
                 <mediaitem-artwork
                         :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                         size="34"
                         :type="item.type"></mediaitem-artwork>
             </div>
-            <div class="info-rect">
+            <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
                 <div class="title text-overflow-elipsis">
                     {{ item.attributes.name }}
                 </div>
@@ -28,6 +28,14 @@
             <div class="content-rating" v-if="item.attributes.contentRating">
                 {{ item.attributes.contentRating }}
             </div>
+            <template v-if="showMetaData == true">
+                <div class="metainfo">
+                    {{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
+                </div>
+                <div class="metainfo">
+                    {{ item.attributes.genreNames[0] ?? "" }}
+                </div>
+            </template>
             <div class="duration">
                 {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
             </div>
@@ -38,7 +46,12 @@
 <script>
     Vue.component('mediaitem-list-item', {
         template: '#mediaitem-list-item',
-        props: ['item'],
+        props: {
+            'item': {type: Object, required: true},
+            'show-artwork': {type: Boolean, default: true},
+            'show-library-status': {type: Boolean, default: true},
+            'show-meta-data': {type: Boolean, default: false}
+        },
         methods: {}
     });
 </script>

resources/cider-ui-tests/views/pages/library-songs.ejs

@@ -28,7 +28,6 @@
             </div>
         </div>
         <div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
-        <mediaitem-list-item :item="item"
+        <mediaitem-list-item :item="item" :show-artwork="false" :show-meta-data="true" :show-library-status="false" v-for="item in library.songs.displayListing"></mediaitem-list-item>
-                             v-for="item in library.songs.displayListing"></mediaitem-list-item>
     </div>
 </template>