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

auto reload on failure

Browse Source
This commit is contained in:
Brandon4466
2024-04-27 17:23:42 -07:00
parent ad989ad50b
commit cc25fcaa34
5 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
templates/webapp.html
View File

@@ -5,12 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpotifyJS</title>
<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>
.progress-container {
width: 100%;
background-color: #ddd;
}
.progress-bar {
width: 0%;
height: 4px;
@@ -51,6 +51,7 @@
.buttons {
display: initial;
padding-top: 10%;
/* mix-blend-mode: difference; */
}
.total {
display: flex;
@@ -86,7 +87,7 @@
</div>
</div>
<script>
let id, is_playing, is_liked, duration_ms, canvas_url, lyrics;
let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
// Function to update the values every second
function updateValues() {
$.ajax({
@@ -117,6 +118,12 @@
if (data['duration_ms'] !== undefined) {
duration_ms = data['duration_ms'];
}
if (data['progress_ms'] !== undefined) {
progress_ms = data['progress_ms'];
}
if (data['reload'] == true) {
location.reload();
}
document.getElementById('progress_bar').style.width = (data['progress_ms'] / duration_ms) * 100 + '%';
// document.getElementById('progress_bar').textContent = (Math.floor(data['progress_ms'] / (1000 * 60)) % 60) + ':' + (Math.floor((data['progress_ms'] / 1000) % 60)).toString().padStart(2, '0');
@@ -141,6 +148,7 @@
document.getElementById('canvas_url').style.display = "none";
document.getElementById('image').style.display = "";
}
getColors(data['image'])
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
}
});
@@ -191,6 +199,24 @@
}
}
}
function getColors(image) {
const colorThief = new ColorThief();
const img = document.getElementById('image');
img.crossOrigin = 'Anonymous';
if (img.complete) {
const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')';
} else {
img.addEventListener('load', function() {
const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')';
});
}
}
// function getLuminance() {
// }
// BUTTONS
$('#playpause').click(function() {
$.ajax({
@@ -222,11 +248,12 @@
});
});
$('#previous').click(function() {
console.log(progress_ms)
$.ajax({
type: 'POST',
url: '/control',
// data: {command: (data['progress_ms'] < 5000) ? 'restart' : 'previous'}, // FIX THIS: IT DOESNT SEE THE DATA VARIABLE SO CANT CHECK THE PROGRESS MS
data: {command: (1 == 1) ? 'restart' : 'previous'},
data: {command: progress_ms > 5000 ? 'restart' : 'previous'},
success: function(response) {
}
});
@@ -250,4 +277,4 @@
});
</script>
</body>
</html>
</html>