inital version, simple layout and functionality
This commit is contained in:
158
templates/webapp.html
Normal file
158
templates/webapp.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Updating Value</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-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.artist-text {
|
||||
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>
|
||||
<img id="image" src="{{ song_info['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;">
|
||||
<div class="middle">
|
||||
<p id="name" class="song-text">{{ song_info['name'] }}</p>
|
||||
<p id="artist" class="artist-text">{{ song_info['artist'] }}</p>
|
||||
<!-- <p id="album" class="song-info">{{ song_info['album'] }}</p>
|
||||
<p id="progress_ms">{{ song_info['progress_ms'] }}</p>
|
||||
<p id="duration_ms">{{ song_info['duration_ms'] }}</p> -->
|
||||
<p>
|
||||
<button id="playpause">Play/Pause</button>
|
||||
<button id="previous">Previous</button>
|
||||
<button id="next">Next</button>
|
||||
<button id="like">Like/Unlike</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="progress-container">
|
||||
<div id="progress_bar" class="progress-bar"></div>
|
||||
</div>
|
||||
<script>
|
||||
var is_playing = false
|
||||
var id = ''
|
||||
// Function to update the values every second
|
||||
function updateValues() {
|
||||
$.ajax({
|
||||
url: '/appdata',
|
||||
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']);
|
||||
|
||||
id = data['id'];
|
||||
is_playing = data['is_playing'];
|
||||
is_liked = data['is_liked'];
|
||||
|
||||
document.getElementById('progress_bar').style.width = (data['progress_ms'] / data['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').textContent = 'Pause';
|
||||
} else {
|
||||
// Change button to pause icon
|
||||
document.getElementById('playpause').textContent = 'Play';
|
||||
}
|
||||
if (is_liked) {
|
||||
// Change button to unlike text
|
||||
document.getElementById('like').textContent = 'Unlike';
|
||||
} else {
|
||||
// Change button to like text
|
||||
document.getElementById('like').textContent = 'Like';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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) {
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#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: (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) {
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user