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

slight animation on bg

Browse source
This commit is contained in:
booploops 2022-01-03 19:32:18 -08:00
parent c84a19eb16
commit 23fb0db161
2 changed files with 18 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/renderer/index.js
View file

@ -2408,6 +2408,7 @@ const app = new Vue({
return newurl return newurl
}, },
_rgbToRgb(rgb = [0,0,0]) { _rgbToRgb(rgb = [0,0,0]) {
// if rgb
return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})` return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
}, },
getNowPlayingArtworkBG(size = 600) { getNowPlayingArtworkBG(size = 600) {
@ -2428,13 +2429,18 @@ const app = new Vue({
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size); 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=>{ Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
console.log(palette) let angle = "140deg"
if(palette.DarkMuted != null && palette.DarkVibrant != null){ if(palette.DarkMuted != null && palette.DarkVibrant != null){
document.querySelector("#app").style.backgroundImage = `linear-gradient(to bottom, ${self._rgbToRgb(palette.DarkMuted._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)` document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.DarkMuted._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)`
}else if(palette.Muted != null && palette.LightMuted != null){ }else if(palette.Muted != null && palette.LightMuted != null){
document.querySelector("#app").style.backgroundImage = `linear-gradient(to bottom, ${self._rgbToRgb(palette.Muted._rgb)} 0%, ${self._rgbToRgb(palette.LightMuted._rgb)} 100%)` document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.Muted._rgb)} 0%, ${self._rgbToRgb(palette.LightMuted._rgb)} 100%)`
}else if(palette.Vibrant != null && palette.DarkVibrant != null){
document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.Vibrant._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)`
}else{ }else{
document.querySelector("#app").style.backgroundImage = `linear-gradient(to bottom, ${self._rgbToRgb(palette.Vibrant._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)` let colors = Object.values(palette).filter(color=>color!=null)
if(colors.length > 0){
document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(colors[0]._rgb)} 0%, ${self._rgbToRgb(colors[1]._rgb)} 100%)`
}
} }
}).setQuantizer(Vibrant.Quantizer.WebWorker) }).setQuantizer(Vibrant.Quantizer.WebWorker)

8
src/renderer/style.less
View file

@ -97,6 +97,14 @@ body[platform='linux'] {
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-size: 400% 400%;
animation: bgGradient 10s ease infinite;
}
@keyframes bgGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
} }
[hidden] { [hidden] {