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" v-for="image in images"/>
-        <img :src="src"/>
     </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,37 +1,42 @@
 <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="row">
+            <div class="header-content">
-                <div class="col-sm" style="width: auto;">
+                <div class="row">
-                    <div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
+                    <div class="col-sm" style="width: auto;">
-                        <mediaitem-artwork
+                        <div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
-                                shadow="large"
+                            <mediaitem-artwork
-                                :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
+                                    shadow="large"
-                                size="190" type="artists"></mediaitem-artwork>
+                                    :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
-                        <button class="overlay-play"  @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
+                                    size="190" type="artists"></mediaitem-artwork>
+                            <button class="overlay-play"  @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
                             app.mk.play()
                         })">
-                            <%- include("../svg/play.svg") %>
+                                <%- include("../svg/play.svg") %>
-                        </button>
+                            </button>
+                        </div>
                     </div>
-                </div>
+                    <div class="col flex-center artist-title"
-                <div class="col flex-center artist-title"
+                         :class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) }"
-                     :class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) }"
+                    >
-                >
+                        <button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
-                    <button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
                         app.mk.play()
                     })"><%- include("../svg/play.svg") %></button>
-                    <h1>{{ data.attributes.name }}</h1>
+                        <h1>{{ data.attributes.name }}</h1>
+                    </div>
                 </div>
+                <button class="more-btn-round" @click="artistMenu">
+                    <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>
-            <button class="more-btn-round" @click="artistMenu">
-                <div class="svg-icon"></div>
-            </button>
         </div>
         <div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
             <div class="row">

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>