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

Merge pull request #1196 from SoNothingMC/feature/albumhero

Browse source 
album banners (aka editorial artwork) (aka album hero)
This commit is contained in:
vapormusic 2022-06-25 10:37:37 +07:00 • committed by GitHub
commit e52825663e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -328,3 +328,4 @@ savedconfig/cider-config.json
savedconfig/config.json savedconfig/config.json
savedconfig/session.json savedconfig/session.json
savedconfig/window-state.json savedconfig/window-state.json
src/main/base/sample.json

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

@ -658,6 +658,29 @@
width : 100%; width : 100%;
height : 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 { >.row {
width: calc(100% - 32px); width: calc(100% - 32px);
} }
@ -677,6 +700,10 @@
flex-shrink : unset; flex-shrink : unset;
} }
.search-input::placeholder {
color: var(--heroplaceholdercolor)
}
.nameEdit { .nameEdit {
font-weight: 700; font-weight: 700;
font-size : 1.6rem; font-size : 1.6rem;

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

@ -25,6 +25,7 @@
</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)) || hasHero() }" :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(()=>{ <button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play() app.mk.play()
@ -178,11 +179,21 @@
return this.data.attributes?.editorialArtwork?.centeredFullscreenBackground.url return this.data.attributes?.editorialArtwork?.centeredFullscreenBackground.url
} else if(this.data.attributes?.editorialArtwork?.bannerUber) { } else if(this.data.attributes?.editorialArtwork?.bannerUber) {
return this.data.attributes?.editorialArtwork?.bannerUber.url 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 this.data.attributes?.editorialArtwork?.subscriptionHero.url
} }
return false; 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) { isHeaderVisible(visible) {
this.headerVisible = visible this.headerVisible = visible
}, },

36
src/renderer/views/pages/cider-playlist.ejs
View file

@ -8,9 +8,13 @@
</div> </div>
</template> </template>
<template v-if="app.playlists.loadingState == 1"> <template v-if="app.playlists.loadingState == 1">
<div class="playlist-display" <div class="playlist-display" :style="{ 'background-color': '#' +hasHeroObject()?.bgColor ?? '' }"
@mouseover.self="minClass(false)"> @mouseover.self="minClass(false)">
<div class="playlistInfo"> <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="row">
<div class="col-auto flex-center" @mouseover="minClass(false)"> <div class="col-auto flex-center" @mouseover="minClass(false)">
<div class="mediaContainer"> <div class="mediaContainer">
@ -26,7 +30,7 @@
<div class="col playlist-info"> <div class="col playlist-info">
<template v-if="!editorialNotesExpanded"> <template v-if="!editorialNotesExpanded">
<div> <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 ? (data.attributes.name ??
(data.attributes.title ?? '') ?? '') : ''}} (data.attributes.title ?? '') ?? '') : ''}}
</div> </div>
@ -38,17 +42,18 @@
@change="editPlaylist" @change="editPlaylist"
@keydown.enter="editPlaylist"/> @keydown.enter="editPlaylist"/>
</div> </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" <div class="playlist-artist item-navigate"
v-if="getArtistName(data) != '' && !useArtistChip" v-if="getArtistName(data) != '' && !useArtistChip"
@click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''"> @click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
{{getArtistName(data)}} {{getArtistName(data)}}
</div> </div>
<template v-if="useArtistChip"> <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> :item="artist"></artist-chip>
</template> </template>
<div class="playlist-desc" <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))"> 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" <div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null"
class="content" class="content"
@ -109,6 +114,7 @@
spellcheck="false" spellcheck="false"
:placeholder="$root.getLz('term.search') + '...'" :placeholder="$root.getLz('term.search') + '...'"
@input="search()" @input="search()"
:style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
v-model="searchQuery" v-model="searchQuery"
class="search-input"> class="search-input">
</div> </div>
@ -120,7 +126,7 @@
</div> </div>
</div> </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> <artwork-material :url="data.attributes.artwork.url" size="500" images="1"></artwork-material>
</div> </div>
<button class="md-btn md-btn-small editTracksBtn" v-if="(data.attributes.canEdit && data.type == 'library-playlists')" @click="editing = !editing"> <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) { isHeaderVisible(visible) {
this.headerVisible = 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() { getBadges() {
return return
if (this.badgesRequested) { if (this.badgesRequested) {