artist page improvements

src/renderer/less/pages.less

@@ -962,6 +962,10 @@
     right   : 28px;
   }
 
+  &.animated .artist-header {
+    min-height: 500px;
+  }
+
   .artist-header {
     //background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
     color          : white;
@@ -977,6 +981,19 @@
       // margin-top: -16px;
     }
 
+    .artist-hero {
+      height:100%;
+      position: absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+
+      .mediaitem-artwork {
+        border-radius: 0px;
+      }
+    }
+
 
     .artworkContainer {
       position          : absolute;
@@ -1013,6 +1030,7 @@
       position  : absolute;
       overflow  : hidden;
       box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+      z-index: 1;
 
       video {
         overflow  : hidden;

src/renderer/views/pages/artist.ejs

@@ -4,7 +4,7 @@
         <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)"
+                    v-if="hasAnimated()"
                     :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
             </animatedartwork-view>
             <div class="header-content" style="pointer-events: all;">
@@ -45,6 +45,9 @@
                  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 class="artist-hero" v-if="hasHero() && !hasAnimated()">
+                <mediaitem-artwork shadow="none" :url="data.attributes.editorialArtwork.bannerUber.url" size="2048" />
+            </div>
         </div>
         <div class="floating-header"
              :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
@@ -164,6 +167,19 @@
             }
         },
         methods: {
+            hasAnimated() {
+                if(this.data.attributes?.editorialVideo && (this.data.attributes?.editorialVideo?.motionArtistWide16x9 || this.data.attributes?.editorialVideo?.motionArtistFullscreen16x9)) {
+                    return true;
+                }
+                return false;
+            },
+            hasHero() {
+                if(this.data.attributes?.editorialArtwork?.bannerUber) {
+                    return true;
+                }else{
+                    return false;
+                }
+            },
             isHeaderVisible(visible) {
                 this.headerVisible = visible
             },