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

change to artwork bg

Browse source
This commit is contained in:
booploops 2022-01-03 21:26:01 -08:00
parent 3bf8aabd27
commit add235af05
3 changed files with 65 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/renderer/index.js
View file

@ -2428,22 +2428,24 @@ const app = new Vue({
this.currentTrackID = this.mk.nowPlayingItem["id"];
document.querySelector('.bg-artwork').src = "";
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
let angle = "140deg"
let gradient = ""
let colors = Object.values(palette).filter(color=>color!=null)
if(colors.length > 0){
let stops = []
colors.forEach(color=>{
stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
document.querySelectorAll('.bg-artwork').forEach(artwork => {
artwork.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
})
stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
}
document.querySelector("#app").style.setProperty("--bgColor", gradient)
}).setQuantizer(Vibrant.Quantizer.WebWorker)
// Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
// let angle = "140deg"
// let gradient = ""
// let colors = Object.values(palette).filter(color=>color!=null)
// if(colors.length > 0){
// let stops = []
// colors.forEach(color=>{
// stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
// })
// stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
// gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
// }
//
// document.querySelector("#app").style.setProperty("--bgColor", gradient)
// }).setQuantizer(Vibrant.Quantizer.WebWorker)
try {
clearInterval(bginterval);

51
src/renderer/style.less
View file

@ -89,6 +89,8 @@ body[platform='linux'] {
--color1: rgba(30, 30, 30, 30%);
--color2: rgba(15, 15, 15, 30%);
--bgColor: transparent;
--bgWidth: 0px;
--bgHeight: 0px;
--chromeHeight: 55px;
width: 100%;
height: 100%;
@ -104,8 +106,8 @@ body[platform='linux'] {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 250%;
width: var(--bgWidth);
height: var(--bgHeight);
background-image: var(--bgColor);
content: "";
z-index: -1;
@ -179,22 +181,51 @@ input[type="text"], input[type="number"] {
.bg-artwork {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 200%;
background: var(--artwork);
z-index: -1;
object-fit: cover;
object-position: center;
//object-fit: cover;
//object-position: center;
/* filter: blur(60px) saturate(180%);
opacity: 0.70; */
filter: blur(180px) saturate(280%);
opacity: 0.60;
opacity: 1;
transition: opacity .25s var(--appleEase);
pointer-events: none;
transform: translateZ(0px);
display: none;
animation: rotateBg 35s linear infinite;
//display: none;
}
@keyframes rotateBg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.bg-artwork-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
.bg-artwork.a {
top:0;
left:0;
mix-blend-mode: luminosity;
}
.bg-artwork.b {
bottom:0;
right:0;
animation-direction: reverse;
animation-delay: 10s;
}
}

6
src/renderer/views/main.ejs
View file

@ -462,8 +462,12 @@
</div>
</transition>
<transition name="wpfade">
<img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
<div class="bg-artwork-container">
<img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork a "
>
<img v-show="chrome.artworkReady" class="bg-artwork b"
>
</div>
</transition>
<transition name="wpfade">
<div class="bg-artwork--placeholder"></div>