From d89a29ee9546dde3fcff415b112f73beed482b9c Mon Sep 17 00:00:00 2001
From: SoNothing <git@sonothing.com>
Date: Fri, 24 Jun 2022 15:59:30 +0800
Subject: [PATCH 1/5] this basically works

---
 src/renderer/less/pages.less                | 16 ++++++++++++++++
 src/renderer/views/pages/artist.ejs         |  2 +-
 src/renderer/views/pages/cider-playlist.ejs | 13 +++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 859565b7..efe7ebb2 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -658,6 +658,22 @@
       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;
+        }
+      }
+
       >.row {
         width: calc(100% - 32px);
       }
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index c926794f..87c4c2c0 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -178,7 +178,7 @@
                     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;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 7d2cfd04..ebdad38d 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -11,6 +11,9 @@
             <div class="playlist-display"
                  @mouseover.self="minClass(false)">
                 <div class="playlistInfo">
+                    <div class="playlist-hero" v-if="hasHero()">
+                        <mediaitem-artwork shadow="none" :url="hasHero()" size="2048" />
+                    </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">
                             <div class="mediaContainer">
@@ -364,6 +367,16 @@
             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;
+            },
             getBadges() {
                 return
                 if (this.badgesRequested) {

From 447545dd03af4fab74f19c600ab87f39968a2b92 Mon Sep 17 00:00:00 2001
From: SoNothing <git@sonothing.com>
Date: Fri, 24 Jun 2022 16:05:50 +0800
Subject: [PATCH 2/5] stick to formatting

---
 src/renderer/less/pages.less | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index efe7ebb2..6a3480e3 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -659,18 +659,18 @@
       height         : 100%;
 
       .playlist-hero {
-        width             : 100%;
-        transform: translateX(+25%);
-        position: absolute;
-        z-index : -1;
-        top     : 0;
-        left    : 0;
-        right   : 0;
-        bottom  : 0;
+        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;
+          -webkit-mask-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 75%);
+          border-radius     : 0px;
         }
       }
 

From 430a78e23f1380eb8cf5dd95b530771368e5e28b Mon Sep 17 00:00:00 2001
From: SoNothing <git@sonothing.com>
Date: Fri, 24 Jun 2022 17:03:21 +0800
Subject: [PATCH 3/5] change `size` to 2160

sizes for these ediorial artworks are 4320*1080,
so changing to 2160 (0.5x) makes more sense
---
 src/renderer/views/pages/cider-playlist.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index ebdad38d..1ecf2e11 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -12,7 +12,7 @@
                  @mouseover.self="minClass(false)">
                 <div class="playlistInfo">
                     <div class="playlist-hero" v-if="hasHero()">
-                        <mediaitem-artwork shadow="none" :url="hasHero()" size="2048" />
+                        <mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
                     </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">

From 5aa2e2bb93074393a0ae22fcba0ce93d0fafc2f9 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Fri, 24 Jun 2022 15:43:48 +0700
Subject: [PATCH 4/5] some fixes

---
 .gitignore                                  |  1 +
 src/renderer/less/pages.less                |  7 ++++++
 src/renderer/views/pages/artist.ejs         | 13 ++++++++++-
 src/renderer/views/pages/cider-playlist.ejs | 25 ++++++++++++++++-----
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index e6413018..29a853c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -328,3 +328,4 @@ savedconfig/cider-config.json
 savedconfig/config.json
 savedconfig/session.json
 savedconfig/window-state.json
+src/main/base/sample.json
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 6a3480e3..e0aa78b0 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -672,6 +672,13 @@
           -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 {
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index 87c4c2c0..539393dc 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -25,7 +25,8 @@
                     </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()
                     })" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
@@ -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
             },
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 1ecf2e11..3cdffb4a 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -8,11 +8,15 @@
             </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="{ 'position':'absolute', 'top' : '0',
+                        'background-color': '#' + hasHeroObject()?.bgColor ?? '' , // 50%
+                        'opacity': '0.6',
+                        'width':'100%', 'height':'100%'}"></div> 
                     </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">
@@ -29,7 +33,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>
@@ -41,17 +45,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"
@@ -123,7 +128,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">
@@ -377,6 +382,16 @@
                 }
                 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) {

From 44eef28a5b59b9adf415a9d3b9b1be7e97427bb5 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Fri, 24 Jun 2022 15:24:50 +0700
Subject: [PATCH 5/5] test

---
 src/renderer/less/pages.less                | 4 ++++
 src/renderer/views/pages/cider-playlist.ejs | 6 ++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index e0aa78b0..9d74de15 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -700,6 +700,10 @@
           flex-shrink    : unset;
         }
 
+        .search-input::placeholder {
+          color: var(--heroplaceholdercolor)
+        }
+
         .nameEdit {
           font-weight: 700;
           font-size  : 1.6rem;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 3cdffb4a..2723bc4a 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -13,10 +13,7 @@
                 <div class="playlistInfo">
                     <div class="playlist-hero" v-if="hasHero()">
                         <mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
-                        <div class="hero-tint" :style="{ 'position':'absolute', 'top' : '0',
-                        'background-color': '#' + hasHeroObject()?.bgColor ?? '' , // 50%
-                        'opacity': '0.6',
-                        'width':'100%', 'height':'100%'}"></div> 
+                        <div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div> 
                     </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">
@@ -117,6 +114,7 @@
                                             spellcheck="false"
                                             :placeholder="$root.getLz('term.search') + '...'"
                                             @input="search()"
+                                            :style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
                                             v-model="searchQuery"
                                             class="search-input">
                                     </div>