layout adjustments
This commit is contained in:
Brandon4466
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
client_id
|
||||
client_secret
|
||||
code
|
||||
spotify-gui.js.code-workspace
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" style="cursor: none;">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<style>
|
||||
.progress-container {
|
||||
position: fixed;
|
||||
bottom: 8px;
|
||||
width: 100%;
|
||||
background-color: #ddd;
|
||||
}
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 4px;
|
||||
height: 10px;
|
||||
background-color: #d734e9;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
@@ -21,49 +23,71 @@
|
||||
}
|
||||
.song-text {
|
||||
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;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.artist-text {
|
||||
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;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.middle {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: center;
|
||||
height: 100%;
|
||||
width: 33%;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.right {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: center;
|
||||
width: 33%;
|
||||
}
|
||||
.lyrics {
|
||||
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;
|
||||
}
|
||||
.buttons {
|
||||
display: initial;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.buttons-individual {
|
||||
padding-top: 10%;
|
||||
/* mix-blend-mode: difference; */
|
||||
}
|
||||
.total {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 94vh;
|
||||
}
|
||||
.left {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: center;
|
||||
width: 33%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
|
||||
<div class="total">
|
||||
<img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;">
|
||||
<video wdith="300" height="300" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none;"></video>
|
||||
<div class="left">
|
||||
<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">
|
||||
<p id="name" class="song-text">{{ data['name'] }}</p>
|
||||
<p id="artist" class="artist-text">{{ data['artist'] }}</p>
|
||||
@@ -71,10 +95,12 @@
|
||||
<p id="progress_ms">{{ data['progress_ms'] }}</p>
|
||||
<p id="duration_ms">{{ data['duration_ms'] }}</p> -->
|
||||
<p>
|
||||
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous-black.png" class="buttons"></a>
|
||||
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play-black.png" class="buttons"></a>
|
||||
<a><img id="next" src="http://127.0.0.1:8888/icons/next-black.png" class="buttons"></a>
|
||||
<a><img id="like" src="http://127.0.0.1:8888/icons/heart-black.png" class="buttons" style="display:none;"></a>
|
||||
<div class="buttons">
|
||||
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous.png" class="buttons-individual"></a>
|
||||
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play.png" class="buttons-individual"></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>
|
||||
</div>
|
||||
<div class="right">
|
||||
@@ -82,10 +108,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
|
||||
// Function to update the values every second
|
||||
@@ -130,23 +156,23 @@
|
||||
|
||||
if (is_playing) {
|
||||
// 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 {
|
||||
// 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) {
|
||||
// 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 {
|
||||
// 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) {
|
||||
getCanvas(data['id']);
|
||||
} else if (canvas_url == undefined) {
|
||||
document.getElementById('canvas_url').style.display = "none";
|
||||
document.getElementById('image').style.display = "";
|
||||
document.getElementById('image').style.display = "flex";
|
||||
}
|
||||
getColors(data['image'])
|
||||
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
|
||||
@@ -169,7 +195,7 @@
|
||||
canvas_url = canvas_data['canvas_url'];
|
||||
} else {
|
||||
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) {
|
||||
const color = colorThief.getColor(img);
|
||||
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 {
|
||||
img.addEventListener('load', function() {
|
||||
const color = colorThief.getColor(img);
|
||||
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() {
|
||||
|
||||
// }
|
||||
// BUTTONS
|
||||
$('#playpause').click(function() {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/control',
|
||||
data: {command: (is_playing ? 'pause' : 'play')}, // Predefined command
|
||||
success: function(response) {
|
||||
$('#is_playing').text(response['is_playing']);
|
||||
is_playing = response['is_playing'];
|
||||
}
|
||||
});
|
||||
location.reload();
|
||||
// $.ajax({
|
||||
// type: 'POST',
|
||||
// url: '/control',
|
||||
// data: {command: (is_playing ? 'pause' : 'play')}, // Predefined command
|
||||
// success: function(response) {
|
||||
// $('#is_playing').text(response['is_playing']);
|
||||
// is_playing = response['is_playing'];
|
||||
// }
|
||||
// });
|
||||
});
|
||||
$('#pause').click(function() {
|
||||
$.ajax({
|
||||
|
||||
Reference in New Issue
Block a user