okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

artist page improvements

Browse source
This commit is contained in:
booploops 2022-06-15 04:10:45 -07:00
parent 369bf386da
commit f54de4926d
2 changed files with 37 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/renderer/less/pages.less
View file

@ -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;

18
src/renderer/views/pages/artist.ejs
View file

@ -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
},