added artwork-material to artist page

src/renderer/style.less

@@ -2484,9 +2484,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         height: 100%;
         transform: unset;
       }
-      .artworkMaterial>img:last-child {
-        display: none;
-      }
     }
 
     .playlistInfo {
@@ -2709,7 +2706,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .artist-header {
-    background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
+    //background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
     color: white;
     display: flex;
     align-items: center;
@@ -2717,6 +2714,32 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     min-height: 400px;
     position: relative;
 
+    .header-content {
+      z-index: 1;
+    }
+
+    .artworkContainer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
+      opacity: .7;
+      animation: playlistArtworkFadeIn 1s var(--appleEase);
+
+      .artworkMaterial>img {
+        filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
+        object-position: center;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        transform: unset;
+      }
+    }
+
     .more-btn-round {
       position: absolute;
       bottom: 26px;

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

@@ -1,7 +1,6 @@
 <script type="text/x-template" id="artwork-material">
     <div class="artworkMaterial">
-        <img :src="src"/>
-        <img :src="src"/>
+        <img :src="src" v-for="image in images"/>
     </div>
 </script>
 
@@ -25,6 +24,11 @@
                 type: [String, Number],
                 required: false,
                 default: '32'
+            },
+            images: {
+                type: [String, Number],
+                required: false,
+                default: '2'
             }
         },
         methods: {

src/renderer/views/pages/artist.ejs

@@ -1,11 +1,12 @@
 <script type="text/x-template" id="cider-artist">
     <div class="content-inner artist-page">
-        <div class="artist-header" :style="getArtistPalette(data)" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
+        <div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
             <animatedartwork-view
                     :priority="true"
                     v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
                     :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
             </animatedartwork-view>
+            <div class="header-content">
                 <div class="row">
                     <div class="col-sm" style="width: auto;">
                         <div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
@@ -33,6 +34,10 @@
                     <div class="svg-icon"></div>
                 </button>
             </div>
+            <div class="artworkContainer" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
+                <artwork-material :url="data.attributes.artwork.url" size="190" images="1"></artwork-material>
+            </div>
+        </div>
         <div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
             <div class="row">
                 <div class="col-auto flex-center">

src/renderer/views/pages/cider-playlist.ejs

@@ -86,7 +86,7 @@
                     </div>
                 </div>
                 <div class="artworkContainer" v-if="data.attributes.artwork != null">
-                    <artwork-material :url="data.attributes.artwork.url" size="260"></artwork-material>
+                    <artwork-material :url="data.attributes.artwork.url" size="260" images="1"></artwork-material>
                 </div>
 
             </div>