changes to mediaitem elements

src/renderer/style.less

@@ -2,8 +2,10 @@
 
 :root {
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
-  --mediaItemShadow-Shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
   --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
+  --mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
+  --mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
+  --ciderShadow-Generic: var(--mediaItemShadow), 0 8px 40px rgb(0 0 0 / 0.55);
   --mediaItemRadius: 6px;
   --mediaItemRadiusRound: 100%;
   --contentInnerPadding: 16px;
@@ -243,7 +245,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   z-index: 9;
   height: 94%;
   backdrop-filter: blur(40px) saturate(180%);
-  box-shadow: var(--mediaItemShadow-Shadow);
+  box-shadow: var(--ciderShadow-Generic);
 }
 
 .search-input-container {
@@ -395,7 +397,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     padding: 6px;
     border-radius: 6px;
     width: 100%;
-    box-shadow: var(--mediaItemShadow-Shadow);
+    box-shadow: var(--ciderShadow-Generic);
   }
 
   .item {
@@ -477,7 +479,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     background: #242424;
     padding: 6px;
     border-radius: 6px;
-    box-shadow: var(--mediaItemShadow-Shadow);
+    box-shadow: var(--ciderShadow-Generic);
 
     &.context-menu-open {
       animation-duration: .10s;
@@ -1752,7 +1754,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     background: rgb(60 60 60);
     border: 0px;
     appearance: none;
-    box-shadow: var(--mediaItemShadow-Shadow);
+    box-shadow: var(--ciderShadow-Generic);
 
     >svg {
       height: 50%;
@@ -1791,7 +1793,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     .artist-more {
       border-radius: 100%;
       background: var(--keyColor);
-      box-shadow: var(--mediaItemShadow-Shadow);
+      box-shadow: var(--ciderShadow-Generic);
       width: 36px;
       height: 36px;
       position: absolute;
@@ -2593,8 +2595,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &.mediaitem-video {
     height: 200px;
+    width: 240px;
     .artwork {
-      height: 106px;
+      height: 120px;
+      width: 212px;
     }
   }
 }

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,
+                type: String,
-                default: false
+                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"
+                <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-mvview>
+                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;

src/renderer/views/pages/artist.ejs

@@ -9,8 +9,7 @@
                 <div class="col-sm" style="width: auto;">
                     <div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
                         <mediaitem-artwork
-                                :shadow="true"
+                                shadow="large"
-
                                 :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                 size="220" type="artists"></mediaitem-artwork>
                         <button class="overlay-play"  @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{

src/renderer/views/pages/browse.ejs

@@ -12,10 +12,14 @@
                 </div>
             </div>
             <template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
-                <template v-if="(['385']).includes(recom.attributes.editorialElementKind) || index === 0">
+                <template v-if="index === 0">
                     <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
                             :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                 </template>
+                <template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
+                    <mediaitem-scroller-horizontal-mvview :imagesize="800" kind="music-videos"
+                            :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
+                </template>
                 <template v-else-if="recom.attributes.name == 'Chart Set'">
                    <!-- ignored -->
                 </template>

src/renderer/views/pages/collection-list.ejs

@@ -11,8 +11,7 @@
                             v-if="item.attributes.playParams.kind == 'song'"
                             :index="key"
                             :item="item"></mediaitem-list-item>
-                    <mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
+                    <mediaitem-square v-else :item="item" :type="item.attributes.playParams.kind"></mediaitem-square>
-                    <mediaitem-square v-else :item="item"></mediaitem-square>
                 </template>
             </template>
             <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>

src/renderer/views/pages/recordLabel.ejs

@@ -5,7 +5,7 @@
                 <div class="col-sm" style="width: auto;">
                     <div class="artist-image">
                         <mediaitem-artwork
-                                :shadow="true"
+                                shadow="large"
                                 :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                 size="220" type="artists"></mediaitem-artwork>
                     </div>