From 830ca93768f345ee353fee4d1a274ca663693cb1 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 10 Dec 2021 01:28:17 -0800
Subject: [PATCH] added shadow property to mediaitem-artwork, enabled artwork
 shadow in artist page

---
 .../views/components/mediaitem-artwork.ejs    | 27 ++++++++++++++++---
 .../cider-ui-tests/views/pages/artist.ejs     |  1 +
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs b/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
index 7e5c2562..39a4e9be 100644
--- a/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
+++ b/resources/cider-ui-tests/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">
+        <div class="mediaitem-artwork rounded" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}">
             <img :src="app.getMediaItemArtwork(url, size)"
                  class="mediaitem-artwork--img">
         </div>
     </template>
     <template v-else>
-        <div class="mediaitem-artwork"
+        <div class="mediaitem-artwork" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}"
              v-observe-visibility="{callback: visibilityChanged}">
             <img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
                  class="mediaitem-artwork--img">
@@ -20,7 +20,28 @@
 <script>
     Vue.component('mediaitem-artwork', {
         template: '#mediaitem-artwork',
-        props: ['size', 'url', 'type', 'video'],
+        props: {
+            size: {
+                type: String,
+                default: '120'
+            },
+            url: {
+                type: String,
+                default: ''
+            },
+            type: {
+                type: String,
+                default: ''
+            },
+            video: {
+                type: String,
+                required: false
+            },
+            shadow: {
+                type: Boolean,
+                default: false
+            }
+        },
         data: function () {
             return {
                 isVisible: false
diff --git a/resources/cider-ui-tests/views/pages/artist.ejs b/resources/cider-ui-tests/views/pages/artist.ejs
index a1b98ec0..1e047963 100644
--- a/resources/cider-ui-tests/views/pages/artist.ejs
+++ b/resources/cider-ui-tests/views/pages/artist.ejs
@@ -9,6 +9,7 @@
                 <div class="col-sm" style="width: auto;">
                     <div class="artist-image">
                         <mediaitem-artwork
+                                :shadow="true"
                                 v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))"
                                 :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                 size="220" type="artists"></mediaitem-artwork>