brandon/spotify-gui.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
Brandon Brunson
2024-05-08 14:16:52 -07:00
parent d3a4e97180
commit 7eff3f8d78
3 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
templates/webapp.html
View File

@@ -7,6 +7,20 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<style>
:root {
--start-color: #d734e9;
--end-color: #FFFFFF;
}
@keyframes bg-fade {
from { background-color: var(--start-color); }
to { background-color: var(--end-color); }
}
body {
background-color: #d734e9
}
.animateBackground {
animation: bg-fade 4s;
}
.progress-container {
position: fixed;
bottom: 8px;
@@ -229,15 +243,37 @@
const colorThief = new ColorThief();
const img = document.getElementById('image');
img.crossOrigin = 'Anonymous';
//set property:
document.documentElement.style
.setProperty('--my-variable-name', '100px');
//get property
getComputedStyle(document.documentElement)
.getPropertyValue('--my-variable-name'); // returns value
if (img.complete) {
const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')';
oldColor = getComputedStyle(document.documentElement)
.getPropertyValue('--end-color');
document.documentElement.style
.setProperty('--start-color', oldColor);
document.documentElement.style
.setProperty('--end-color', color);
document.body.classList.add('animateBackground');
// document.body.style.backgroundColor = 'rgb(' + color + ')';
getLuminance(color);
} else {
img.addEventListener('load', function() {
const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')';
oldColor = getComputedStyle(document.documentElement)
.getPropertyValue('--end-color');
document.documentElement.style
.setProperty('--start-color', oldColor);
document.documentElement.style
.setProperty('--end-color', color);
document.body.classList.add('animateBackground');
// document.body.style.backgroundColor = 'rgb(' + color + ')';
getLuminance(color);
});
}