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

layout adjustments

Browse Source
This commit is contained in:
Brandon4466
2024-04-30 16:36:47 -07:00
parent 1a1bf8c144
commit 555dae121c
2 changed files with 89 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
client_id client_id
client_secret client_secret
code code
spotify-gui.js.code-workspace

120
templates/webapp.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" style="cursor: none;">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,12 +8,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<style> <style>
.progress-container { .progress-container {
position: fixed;
bottom: 8px;
width: 100%; width: 100%;
background-color: #ddd; background-color: #ddd;
} }
.progress-bar { .progress-bar {
width: 0%; width: 0%;
height: 4px; height: 10px;
background-color: #d734e9; background-color: #d734e9;
text-align: center; text-align: center;
line-height: 4px; line-height: 4px;
@@ -21,49 +23,71 @@
} }
.song-text { .song-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 25px; font-size: 36px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin-bottom: 5px; margin-bottom: 5px;
} }
.artist-text { .artist-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 20px; font-size: 29px;
text-align: center; text-align: center;
margin-top: 5px; margin-top: 5px;
} }
.middle { .middle {
position: relative;
flex: 1;
display: flex;
text-align: center;
display: inline-block;
vertical-align: center;
height: 100%;
width: 33%;
}
.right {
flex: 1; flex: 1;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: center;
}
.right {
height: 100%;
display: inline-block;
width: 33%; width: 33%;
} }
.lyrics { .lyrics {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 32px; font-size: 36px;
text-align: center; text-align: center;
} }
.buttons { .buttons {
display: initial; position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.buttons-individual {
padding-top: 10%; padding-top: 10%;
/* mix-blend-mode: difference; */ /* mix-blend-mode: difference; */
} }
.total { .total {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
height: 94vh;
}
.left {
flex: 1;
text-align: center;
display: inline-block;
vertical-align: center;
width: 33%;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> --> <!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
<div class="total"> <div class="total">
<img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;"> <div class="left">
<video wdith="300" height="300" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none;"></video> <img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 330px; padding-left: 25%;">
<video width="330" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none; padding-left: 10%;"></video>
</div>
<div class="middle"> <div class="middle">
<p id="name" class="song-text">{{ data['name'] }}</p> <p id="name" class="song-text">{{ data['name'] }}</p>
<p id="artist" class="artist-text">{{ data['artist'] }}</p> <p id="artist" class="artist-text">{{ data['artist'] }}</p>
@@ -71,10 +95,12 @@
<p id="progress_ms">{{ data['progress_ms'] }}</p> <p id="progress_ms">{{ data['progress_ms'] }}</p>
<p id="duration_ms">{{ data['duration_ms'] }}</p> --> <p id="duration_ms">{{ data['duration_ms'] }}</p> -->
<p> <p>
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous-black.png" class="buttons"></a> <div class="buttons">
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play-black.png" class="buttons"></a> <a><img id="previous" src="http://127.0.0.1:8888/icons/previous.png" class="buttons-individual"></a>
<a><img id="next" src="http://127.0.0.1:8888/icons/next-black.png" class="buttons"></a> <a><img id="playpause" src="http://127.0.0.1:8888/icons/play.png" class="buttons-individual"></a>
<a><img id="like" src="http://127.0.0.1:8888/icons/heart-black.png" class="buttons" style="display:none;"></a> <a><img id="next" src="http://127.0.0.1:8888/icons/next.png" class="buttons-individual"></a>
<a><img id="like" src="http://127.0.0.1:8888/icons/heart.png" class="buttons-individual" style="display:none;"></a>
</div>
</p> </p>
</div> </div>
<div class="right"> <div class="right">
@@ -82,7 +108,7 @@
</div> </div>
</div> </div>
<div style="padding-top: 5px;"> <div style="padding-top: 5px;">
<div class="progress-container"> <div id="progress_container" class="progress-container">
<div id="progress_bar" class="progress-bar"></div> <div id="progress_bar" class="progress-bar"></div>
</div> </div>
</div> </div>
@@ -130,23 +156,23 @@
if (is_playing) { if (is_playing) {
// Change button to play icon // Change button to play icon
document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/pause-black.png'; document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/pause.png';
} else { } else {
// Change button to pause icon // Change button to pause icon
document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/play-black.png'; document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/play.png';
} }
if (is_liked) { if (is_liked) {
// Change button to unlike text // Change button to unlike text
document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-on-black.png'; document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-on.png';
} else { } else {
// Change button to like text // Change button to like text
document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-black.png'; document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart.png';
} }
if (data['canvas'] !== undefined) { if (data['canvas'] !== undefined) {
getCanvas(data['id']); getCanvas(data['id']);
} else if (canvas_url == undefined) { } else if (canvas_url == undefined) {
document.getElementById('canvas_url').style.display = "none"; document.getElementById('canvas_url').style.display = "none";
document.getElementById('image').style.display = ""; document.getElementById('image').style.display = "flex";
} }
getColors(data['image']) getColors(data['image'])
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics']) getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
@@ -169,7 +195,7 @@
canvas_url = canvas_data['canvas_url']; canvas_url = canvas_data['canvas_url'];
} else { } else {
document.getElementById('canvas_url').style.display = "none"; document.getElementById('canvas_url').style.display = "none";
document.getElementById('image').style.display = ""; document.getElementById('image').style.display = "flex";
} }
} }
}); });
@@ -207,27 +233,55 @@
if (img.complete) { if (img.complete) {
const color = colorThief.getColor(img); const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')'; document.body.style.backgroundColor = 'rgb(' + color + ')';
getLuminance(color);
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
lightColor = [color[0] + 50, color[1] + 50, color[2] + 50]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
} else { } else {
img.addEventListener('load', function() { img.addEventListener('load', function() {
const color = colorThief.getColor(img); const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')'; document.body.style.backgroundColor = 'rgb(' + color + ')';
getLuminance(color);
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
lightColor = [color[0] + 50, color[1] + 50, color[2] + 50]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
}); });
} }
} }
function getLuminance(color) {
if (Math.sqrt(0.299 * (color[0] ** 2) + 0.587 * (color[1] ** 2) + 0.114 * (color[2] ** 2)) > 170) {
document.getElementById('name').style.color = 'black';
document.getElementById('artist').style.color = 'black';
document.getElementById('lyric').style.color = 'black';
document.getElementbyId('previous').style.filter = 'invert(100%)';
document.getElementbyId('playpause').style.filter = 'invert(100%)';
document.getElementbyId('next').style.filter = 'invert(100%)';
document.getElementbyId('like').style.filter = 'invert(100%)';
} else {
document.getElementById('name').style.color = 'white';
document.getElementById('artist').style.color = 'white';
document.getElementById('lyric').style.color = 'white';
document.getElementbyId('previous').style.filter = '';
document.getElementbyId('playpause').style.filter = '';
document.getElementbyId('next').style.filter = '';
document.getElementbyId('like').style.filter = '';
}
}
// function getLuminance() { // function getLuminance() {
// } // }
// BUTTONS // BUTTONS
$('#playpause').click(function() { $('#playpause').click(function() {
$.ajax({ location.reload();
type: 'POST', // $.ajax({
url: '/control', // type: 'POST',
data: {command: (is_playing ? 'pause' : 'play')}, // Predefined command // url: '/control',
success: function(response) { // data: {command: (is_playing ? 'pause' : 'play')}, // Predefined command
$('#is_playing').text(response['is_playing']); // success: function(response) {
is_playing = response['is_playing']; // $('#is_playing').text(response['is_playing']);
} // is_playing = response['is_playing'];
}); // }
// });
}); });
$('#pause').click(function() { $('#pause').click(function() {
$.ajax({ $.ajax({