182 lines
7.4 KiB
HTML
182 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>
|
|
<style>
|
|
.progress-container {
|
|
width: 100%;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 0%;
|
|
height: 4px;
|
|
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: 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
.artist-text {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
.middle {
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
|
|
<img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;">
|
|
<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>
|
|
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous-black.png" style="width:96px;height:96px;"></a>
|
|
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play-black.png" style="width:96px;height:96px;"></a>
|
|
<a><img id="next" src="http://127.0.0.1:8888/icons/next-black.png" style="width:96px;height:96px;"></a>
|
|
<a><img id="like" src="http://127.0.0.1:8888/icons/heart-black.png" style="width:96px;height:96px;"></a>
|
|
</p>
|
|
</div>
|
|
<div class="progress-container">
|
|
<div id="progress_bar" class="progress-bar"></div>
|
|
</div>
|
|
<script>
|
|
let id, is_playing, is_liked, duration_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']);
|
|
// $('#progress_min').text(Math.floor(data['progress_ms'] / (1000 * 60)) % 60);
|
|
// $('#progress_sec').text(Math.floor((data['progress_ms'] / 1000) % 60));
|
|
// $('#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']);
|
|
|
|
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'];
|
|
}
|
|
|
|
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-black.png';
|
|
} else {
|
|
// Change button to pause icon
|
|
document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/play-black.png';
|
|
}
|
|
if (is_liked) {
|
|
// Change button to unlike text
|
|
document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-on-black.png';
|
|
} else {
|
|
// Change button to like text
|
|
document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-black.png';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// Update values every second
|
|
setInterval(updateValues, 3000);
|
|
|
|
// 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'];
|
|
}
|
|
});
|
|
});
|
|
$('#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() {
|
|
$.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'},
|
|
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>
|