Merge pull request #1196 from SoNothingMC/feature/albumhero
album banners (aka editorial artwork) (aka album hero)
This commit is contained in:
vapormusic
GitHub
commit
e52825663e
4 changed files with 72 additions and 7 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -328,3 +328,4 @@ savedconfig/cider-config.json
|
|||
savedconfig/config.json
|
||||
savedconfig/session.json
|
||||
savedconfig/window-state.json
|
||||
src/main/base/sample.json
|
||||
|
|
|
|||
|
|
@ -658,6 +658,29 @@
|
|||
width : 100%;
|
||||
height : 100%;
|
||||
|
||||
.playlist-hero {
|
||||
width : 100%;
|
||||
transform : translateX(+25%);
|
||||
position : absolute;
|
||||
z-index : -1;
|
||||
top : 0;
|
||||
left : 0;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
|
||||
.mediaitem-artwork {
|
||||
-webkit-mask-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 75%);
|
||||
border-radius : 0px;
|
||||
}
|
||||
.hero-tint {
|
||||
position: absolute;
|
||||
top : 0;
|
||||
opacity: 0.6;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
>.row {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
|
@ -677,6 +700,10 @@
|
|||
flex-shrink : unset;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--heroplaceholdercolor)
|
||||
}
|
||||
|
||||
.nameEdit {
|
||||
font-weight: 700;
|
||||
font-size : 1.6rem;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
</div>
|
||||
<div class="col flex-center artist-title"
|
||||
:class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) || hasHero() }"
|
||||
:style="{ 'color': '#' +hasHeroObject()?.textColor1 ?? ''}"
|
||||
>
|
||||
<button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
|
||||
app.mk.play()
|
||||
|
|
@ -178,11 +179,21 @@
|
|||
return this.data.attributes?.editorialArtwork?.centeredFullscreenBackground.url
|
||||
} else if(this.data.attributes?.editorialArtwork?.bannerUber) {
|
||||
return this.data.attributes?.editorialArtwork?.bannerUber.url
|
||||
}else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
|
||||
} else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
|
||||
return this.data.attributes?.editorialArtwork?.subscriptionHero.url
|
||||
}
|
||||
return false;
|
||||
},
|
||||
hasHeroObject() {
|
||||
if(this.data.attributes?.editorialArtwork?.centeredFullscreenBackground){
|
||||
return this.data.attributes?.editorialArtwork?.centeredFullscreenBackground
|
||||
} else if(this.data.attributes?.editorialArtwork?.bannerUber) {
|
||||
return this.data.attributes?.editorialArtwork?.bannerUber
|
||||
} else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
|
||||
return this.data.attributes?.editorialArtwork?.subscriptionHero
|
||||
}
|
||||
return [];
|
||||
},
|
||||
isHeaderVisible(visible) {
|
||||
this.headerVisible = visible
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-if="app.playlists.loadingState == 1">
|
||||
<div class="playlist-display"
|
||||
<div class="playlist-display" :style="{ 'background-color': '#' +hasHeroObject()?.bgColor ?? '' }"
|
||||
@mouseover.self="minClass(false)">
|
||||
<div class="playlistInfo">
|
||||
<div class="playlist-hero" v-if="hasHero()">
|
||||
<mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
|
||||
<div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center" @mouseover="minClass(false)">
|
||||
<div class="mediaContainer">
|
||||
|
|
@ -26,7 +30,7 @@
|
|||
<div class="col playlist-info">
|
||||
<template v-if="!editorialNotesExpanded">
|
||||
<div>
|
||||
<div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()" v-show="!nameEditing">
|
||||
<div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()" v-show="!nameEditing" :style="{ 'color': '#' +hasHeroObject()?.textColor1 ?? '', 'filter' : 'drop-shadow(1px 3px 8px #' + hasHeroObject()?.textColor4 ?? '' +')' }">
|
||||
{{data.attributes ? (data.attributes.name ??
|
||||
(data.attributes.title ?? '') ?? '') : ''}}
|
||||
</div>
|
||||
|
|
@ -38,17 +42,18 @@
|
|||
@change="editPlaylist"
|
||||
@keydown.enter="editPlaylist"/>
|
||||
</div>
|
||||
<div class="playlist-time genre" style="margin: 0px;">{{getAlbumGenre()}}</div>
|
||||
<div class="playlist-time genre" style="margin: 0px;" :style="{ 'color': '#' + hasHeroObject()?.textColor2 ?? '' }">{{getAlbumGenre()}}</div>
|
||||
<div class="playlist-artist item-navigate"
|
||||
v-if="getArtistName(data) != '' && !useArtistChip"
|
||||
@click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
|
||||
{{getArtistName(data)}}
|
||||
</div>
|
||||
<template v-if="useArtistChip">
|
||||
<artist-chip v-for="artist in data.relationships.artists?.data"
|
||||
<artist-chip v-for="artist in data.relationships.artists?.data" :style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
|
||||
:item="artist"></artist-chip>
|
||||
</template>
|
||||
<div class="playlist-desc"
|
||||
:style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
|
||||
v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
|
||||
<div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null"
|
||||
class="content"
|
||||
|
|
@ -109,6 +114,7 @@
|
|||
spellcheck="false"
|
||||
:placeholder="$root.getLz('term.search') + '...'"
|
||||
@input="search()"
|
||||
:style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
|
||||
v-model="searchQuery"
|
||||
class="search-input">
|
||||
</div>
|
||||
|
|
@ -120,7 +126,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artworkContainer" v-if="data.attributes.artwork != null">
|
||||
<div class="artworkContainer" v-if="data.attributes.artwork != null && !hasHero()">
|
||||
<artwork-material :url="data.attributes.artwork.url" size="500" images="1"></artwork-material>
|
||||
</div>
|
||||
<button class="md-btn md-btn-small editTracksBtn" v-if="(data.attributes.canEdit && data.type == 'library-playlists')" @click="editing = !editing">
|
||||
|
|
@ -364,6 +370,26 @@
|
|||
isHeaderVisible(visible) {
|
||||
this.headerVisible = visible
|
||||
},
|
||||
hasHero() {
|
||||
if(this.data.attributes?.editorialArtwork?.bannerUber){
|
||||
return this.data.attributes?.editorialArtwork?.bannerUber.url
|
||||
} else if(this.data.attributes?.editorialArtwork?.subscriptionHero) {
|
||||
return this.data.attributes?.editorialArtwork?.subscriptionHero.url
|
||||
} else if(this.data.attributes?.editorialArtwork?.storeFlowcase){
|
||||
return this.data.attributes?.editorialArtwork?.storeFlowcase.url
|
||||
}
|
||||
return false;
|
||||
},
|
||||
hasHeroObject() {
|
||||
if(this.data.attributes?.editorialArtwork?.bannerUber){
|
||||
return this.data.attributes?.editorialArtwork?.bannerUber
|
||||
} else if(this.data.attributes?.editorialArtwork?.subscriptionHero) {
|
||||
return this.data.attributes?.editorialArtwork?.subscriptionHero
|
||||
} else if(this.data.attributes?.editorialArtwork?.storeFlowcase){
|
||||
return this.data.attributes?.editorialArtwork?.storeFlowcase
|
||||
}
|
||||
return [];
|
||||
},
|
||||
getBadges() {
|
||||
return
|
||||
if (this.badgesRequested) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue