changes to mediaitem elements

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

@@ -1,12 +1,12 @@
 <script type="text/x-template" id="mediaitem-artwork">
     <template v-if="type == 'artists'">
-        <div class="mediaitem-artwork rounded" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}">
+        <div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
             <img :src="app.getMediaItemArtwork(url, size)"
                  class="mediaitem-artwork--img">
         </div>
     </template>
     <template v-else>
-        <div class="mediaitem-artwork" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}"
+        <div class="mediaitem-artwork" :key="url" :style="getStyle()"
              v-observe-visibility="{callback: visibilityChanged}">
             <img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
                  class="mediaitem-artwork--img">
@@ -38,16 +38,32 @@
                 required: false
             },
             shadow: {
-                type: Boolean,
-                default: false
+                type: String,
+                default: 'none'
             }
         },
         data: function () {
             return {
-                isVisible: false
+                isVisible: false,
+                style: {
+                    "box-shadow": ""
+                }
             }
         },
         methods: {
+            getStyle() {
+                switch(this.shadow) {
+                    case "large":
+                        this.style["box-shadow"] = "var(--mediaItemShadow-Shadow)"
+                    break;
+                    case "subtle":
+                        this.style["box-shadow"] = "var(--mediaItemShadow-ShadowSubtle)"
+                    break;
+                    default:
+                    break;
+                }
+                return this.style;
+            },
             getArtworkStyle() {
                 return {
                     width: this.size + 'px',

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

@@ -6,8 +6,8 @@
                    :badge="item.attributes"                     v-for="item in items"></mediaitem-mvview-sp>
             </template>
             <template v-else>
-                <mediaitem-mvview :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
-                v-for="item in items"></mediaitem-mvview>
+                <mediaitem-square :kind="kind" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
+                v-for="item in items"></mediaitem-square>
             </template>                            
         </div>
     </template>
@@ -17,7 +17,25 @@
 <script>
     Vue.component('mediaitem-scroller-horizontal-mvview', {
         template: '#mediaitem-scroller-horizontal-mvview',
-        props: ['items',"imagesize","browsesp"],
+        props: {
+            items: {
+                type: Array,
+                required: true
+            },
+            imagesize: {
+                type: String,
+                required: true
+            },
+            browsesp: {
+                type: Boolean,
+                required: true
+            },
+            kind: {
+                type: String,
+                required: false,
+                default: ""
+            }
+        },
         methods: {}
     });
 </script>

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

@@ -9,6 +9,7 @@
                                     :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                                     :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                                     size="300"
+                                    shadow="subtle"
                                     :type="item.type"></mediaitem-artwork>
                         </div>
                         <button class="menu-btn" v-if="item.type != 'artists' && item.type != 'stations'" @click="contextMenu"><%- include("../svg/more.svg") %></button>
@@ -29,7 +30,16 @@
 <script>
     Vue.component('mediaitem-square', {
         template: '#mediaitem-square',
-        props: ['item'],
+        props: {
+            item: {
+                type: Object,
+                required: true
+            },
+            kind: {
+                type: String,
+                default: ''
+            }
+        },
         data: function () {
             return {
                 isVisible: false,
@@ -39,10 +49,15 @@
         },
         methods: {
             getClasses() {
-                switch(this.item.type) {
+                let type = this.item.type
+                if(this.kind != "") {
+                    type = this.kind
+                }
+                switch(type) {
                     default:
                         return []
                     break;
+                    case "music-videos":
                     case "uploaded-videos":
                         return "mediaitem-video";
                     break;