Merge pull request #1196 from SoNothingMC/feature/albumhero

album banners (aka editorial artwork) (aka album hero)

.gitignore

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

src/renderer/less/pages.less

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

src/renderer/views/pages/artist.ejs

@@ -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()
@@ -183,6 +184,16 @@
                 }
                 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
             },

src/renderer/views/pages/cider-playlist.ejs

@@ -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) {