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/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>