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

Merge branch 'main' of https://github.com/ciderapp/Cider

Browse source
This commit is contained in:
vapormusic 2022-01-04 11:07:42 +07:00
commit e41ca2e5ee
2 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/index.js
View file

@ -341,7 +341,7 @@ const app = new Vue({
break; break;
case "disabled": case "disabled":
document.querySelector("html").style.background = "#222"; document.querySelector("html").style.background = "#222";
document.querySelector("body").style.background = "#222"; // document.querySelector("body").style.background = "#222";
break; break;
} }
}, },
@ -2430,18 +2430,18 @@ const app = new Vue({
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=>{
let angle = "140deg" let angle = "140deg"
if(palette.DarkMuted != null && palette.DarkVibrant != null){ let gradient = ""
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){
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{
let colors = Object.values(palette).filter(color=>color!=null) let colors = Object.values(palette).filter(color=>color!=null)
if(colors.length > 0){ if(colors.length > 0){
document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(colors[0]._rgb)} 0%, ${self._rgbToRgb(colors[1]._rgb)} 100%)` 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) }).setQuantizer(Vibrant.Quantizer.WebWorker)
try { try {

29
src/renderer/style.less
View file

@ -88,6 +88,7 @@ body[platform='linux'] {
#app { #app {
--color1: rgba(30, 30, 30, 30%); --color1: rgba(30, 30, 30, 30%);
--color2: rgba(15, 15, 15, 30%); --color2: rgba(15, 15, 15, 30%);
--bgColor: transparent;
--chromeHeight: 55px; --chromeHeight: 55px;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -98,13 +99,30 @@ body[platform='linux'] {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-size: 400% 400%; background-size: 400% 400%;
animation: bgGradient 10s ease infinite;
} }
@keyframes bgGradient { #app::before {
0%{background-position:0% 50%} position: absolute;
50%{background-position:100% 50%} top: -50%;
100%{background-position:0% 50%} left: -50%;
width: 200%;
height: 250%;
background-image: var(--bgColor);
content: "";
z-index: -1;
transform: rotateZ(0deg);
transform-origin: center;
animation: bgRotate 10s linear infinite;
filter: brightness(100%) saturate(200%) contrast(1.5);
}
@keyframes bgRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
} }
[hidden] { [hidden] {
@ -153,6 +171,7 @@ input[type="text"], input[type="number"] {
transition: opacity .25s var(--appleEase); transition: opacity .25s var(--appleEase);
pointer-events: none; pointer-events: none;
transform: translateZ(0px); transform: translateZ(0px);
display: none;
} }