334 lines
14 KiB
HTML
334 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="cursor: none;">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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 {
|
|
position: fixed;
|
|
bottom: 8px;
|
|
width: 100%;
|
|
background-color: #ddd;
|
|
}
|
|
.progress-bar {
|
|
width: 0%;
|
|
height: 10px;
|
|
background-color: #d734e9;
|
|
text-align: center;
|
|
line-height: 4px;
|
|
color: white;
|
|
}
|
|
.song-text {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
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: 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: 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: 36px;
|
|
text-align: center;
|
|
}
|
|
.buttons {
|
|
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">
|
|
<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>
|
|
<!-- <p id="album" class="song-info">{{ data['album'] }}</p>
|
|
<p id="progress_ms">{{ data['progress_ms'] }}</p>
|
|
<p id="duration_ms">{{ data['duration_ms'] }}</p> -->
|
|
<p>
|
|
<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">
|
|
<p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
|
|
</div>
|
|
</div>
|
|
<div style="padding-top: 5px;">
|
|
<div id="progress_container" class="progress-container">
|
|
<div id="progress_bar" class="progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
|
|
// Function to update the values every second
|
|
function updateValues() {
|
|
$.ajax({
|
|
url: '/appdata',
|
|
data: { id: id }, // Add the 'id' variable to the data object
|
|
success: function(data) {
|
|
$('#name').text(data['name']);
|
|
$('#artist').text(data['artist']);
|
|
$('#album').text(data['album']);
|
|
$('#image').attr('src', data['image']);
|
|
$('#is_playing').text(data['is_playing']);
|
|
$('#progress_ms').text(data['progress_ms']);
|
|
$('#duration_ms').text(data['duration_ms']);
|
|
// $('#duration_min').text(Math.floor(data['duration_ms'] / (1000 * 60) % 60));
|
|
// $('#duration_sec').text(Math.floor(data['duration_ms'] / 1000) % 60);
|
|
$('#is_liked').text(data['is_liked']);
|
|
$('#canvas').attr('src', data['canvas']);
|
|
|
|
if (data['id'] !== undefined) {
|
|
id = data['id'];
|
|
}
|
|
if (data['is_playing'] !== undefined) {
|
|
is_playing = data['is_playing'];
|
|
}
|
|
if (data['is_liked'] !== undefined) {
|
|
is_liked = data['is_liked'];
|
|
}
|
|
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');
|
|
|
|
if (is_playing) {
|
|
// Change button to play icon
|
|
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.png';
|
|
}
|
|
if (is_liked) {
|
|
// Change button to unlike text
|
|
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.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 = "flex";
|
|
}
|
|
getColors(data['image'])
|
|
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
|
|
}
|
|
});
|
|
}
|
|
// Update values every second
|
|
setInterval(updateValues, 1000);
|
|
|
|
// Function to run alongside the looped function if a variable is true
|
|
function getCanvas(id) {
|
|
$.ajax({
|
|
url: '/canvas',
|
|
data: { id: id },
|
|
success: function(canvas_data) {
|
|
if (canvas_data['canvas_url'] !== undefined) {
|
|
$('#canvas_url').attr('src', canvas_data['canvas_url']);
|
|
document.getElementById('canvas_url').style.display = "";
|
|
document.getElementById('image').style.display = "none";
|
|
canvas_url = canvas_data['canvas_url'];
|
|
} else {
|
|
document.getElementById('canvas_url').style.display = "none";
|
|
document.getElementById('image').style.display = "flex";
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function getLyrics(name, artist, progress_ms, fetchlyrics) {
|
|
if (lyrics == undefined || fetchlyrics !== undefined && name !== undefined) {
|
|
$('#lyric').text('');
|
|
$.ajax({
|
|
url: '/lyrics',
|
|
data: {name: name, artist: artist},
|
|
success: function(lyrics_data) {
|
|
lyrics = lyrics_data['lyrics'];
|
|
}
|
|
});
|
|
} else if (lyrics == 'no lyrics') {
|
|
|
|
} else {
|
|
progressMin = Math.floor(progress_ms / (1000 * 60)) % 60
|
|
progressSec = Math.floor((progress_ms / 1000) % 60)
|
|
const progressFormatted = `${progressMin}:${String(progressSec).padStart(2, '0')}`;
|
|
const lines = lyrics.split('\n');
|
|
for (const line of lines) {
|
|
if (line.includes(progressFormatted)) {
|
|
lyric = (line.split(']')[1])
|
|
$('#lyric').text(lyric);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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 + ')';
|
|
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() {
|
|
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({
|
|
type: 'POST',
|
|
url: '/control',
|
|
data: {command: 'pause'}, // Predefined command
|
|
success: function(response) {
|
|
}
|
|
});
|
|
});
|
|
$('#next').click(function() {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/control',
|
|
data: {command: 'next'}, // Predefined command
|
|
success: function(response) {
|
|
}
|
|
});
|
|
});
|
|
$('#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: progress_ms > 5000 ? 'restart' : 'previous'},
|
|
success: function(response) {
|
|
}
|
|
});
|
|
});
|
|
$('#like').click(function() {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/control',
|
|
data: {command: (is_liked ? 'unlike' : 'like'), id: id},
|
|
success: function(response) {
|
|
// if (is_liked) {
|
|
// is_liked = false;
|
|
// }
|
|
// else {
|
|
// is_liked = true;
|
|
// }
|
|
$('#is_liked').text(response['is_liked']);
|
|
is_liked = response['is_liked'];
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |