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

Revert "revert 49cd2b87355a0031b1376f1842d894c19f0f0d67"

Browse Source 
This reverts commit d3a4e97180.

redoing previous revert
This commit is contained in:
Brandon Brunson
2024-05-08 14:57:45 -07:00
parent b0f8467a5e
commit 7adb79881e
3 changed files with 53 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
templates/webapp.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="cursor: none;">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,19 +7,17 @@
<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;
.animated-background {
transition: background-color 1s ease-in-out; /* add a transition effect */
background-color: #fff; /* initial background color */
}
@keyframes bg-fade {
from { background-color: var(--start-color); }
to { background-color: var(--end-color); }
.animated-background.update-color {
background-color: var(--color); /* change the background color to black */
}
body {
background-color: #d734e9
}
.animateBackground {
animation: bg-fade 4s;
@keyframes fade-in {
to {
background-color: var(--color); /* change the background color to black */
}
}
.progress-container {
position: fixed;
@@ -95,7 +93,7 @@
}
</style>
</head>
<body>
<body class="animated-background">
<!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
<div class="total">
<div class="left">
@@ -188,8 +186,10 @@
document.getElementById('canvas_url').style.display = "none";
document.getElementById('image').style.display = "flex";
}
getColors(data['image'])
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
if (data['gofetch'] !== undefined) {
getColors(data['image'])
}
getLyrics(data['name'], data['artist'], data['progress_ms'], data['gofetch'])
}
});
}
@@ -214,8 +214,8 @@
}
});
}
function getLyrics(name, artist, progress_ms, fetchlyrics) {
if (lyrics == undefined || fetchlyrics !== undefined && name !== undefined) {
function getLyrics(name, artist, progress_ms, gofetch) {
if (lyrics == undefined || gofetch !== undefined && name !== undefined) {
$('#lyric').text('');
$.ajax({
url: '/lyrics',
@@ -243,7 +243,7 @@
const colorThief = new ColorThief();
const img = document.getElementById('image');
img.crossOrigin = 'Anonymous';
//set property:
animatedBackground = document.querySelector('.animated-background');
document.documentElement.style
.setProperty('--my-variable-name', '100px');
@@ -254,26 +254,17 @@ getComputedStyle(document.documentElement)
.getPropertyValue('--my-variable-name'); // returns value
if (img.complete) {
const color = colorThief.getColor(img);
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 + ')';
// document.body.style.backgroundColor = 'rgb(' + color + ')';
animatedBackground.style.setProperty('--color', 'rgb(' + color + ')');
animatedBackground.classList.add('update-color');
getLuminance(color);
} else {
img.addEventListener('load', function() {
const color = colorThief.getColor(img);
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 + ')';
animatedBackground.style.setProperty('--color', 'rgb(' + color + ')');
animatedBackground.classList.add('update-color');
getLuminance(color);
});
}