Implement play/pause as one button

This commit is contained in:
Tyler Vigario 2020-04-27 18:32:44 -07:00
parent 8c6b5e8f63
commit 7766b15ea1
No known key found for this signature in database
GPG Key ID: E144FF8EAD8ABFCC
2 changed files with 21 additions and 26 deletions

View File

@ -43,6 +43,9 @@ var playlist_range_to = 0;
var last_volume = 0;
var playing = false;
var playPauseBtn = $("#play-pause-btn");
function request(_url, _data, refresh = false) {
console.log(_data);
$.ajax({
@ -56,7 +59,7 @@ function request(_url, _data, refresh = false) {
}
updateControls(data.empty, data.play, data.mode, data.volume);
}
}
},
});
if (refresh) {
location.reload()
@ -241,18 +244,15 @@ function bindPlaylistEvent() {
function updateControls(empty, play, mode, volume) {
if (empty) {
$("#play-btn").prop("disabled", true);
$("#pause-btn").prop("disabled", true);
$("#stop-btn").prop("disabled", true);
playPauseBtn.prop("disabled", true);
} else {
playPauseBtn.prop("disabled", false);
if (play) {
$("#play-btn").prop("disabled", true);
$("#pause-btn").prop("disabled", false);
$("#stop-btn").prop("disabled", false);
playing = true;
playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-play').addClass('fa-pause');
} else {
$("#play-btn").prop("disabled", false);
$("#pause-btn").prop("disabled", true);
$("#stop-btn").prop("disabled", true);
playing = false;
playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-pause').addClass('fa-play');
}
}
if (mode === "one-shot") {
@ -313,6 +313,14 @@ function setPageTheme(theme) {
document.getElementById("pagestyle").setAttribute("href", "../static/css/bootstrap.darkly.min.css");
}
function togglePlayPause() {
if (playing) {
request('post', {action: 'pause'});
} else {
request('post', {action: 'resume'});
}
}
// Check the version of playlist to see if update is needed.
setInterval(checkForPlaylistUpdate, 3000);

View File

@ -28,22 +28,9 @@
<div id="playlist">
<div class="row">
<div class="col">
<div class="btn-group mb-2">
<button type="button" id="play-btn" class="btn btn-info btn-space"
onclick="request('post', {action : 'resume'})" disabled>
<i class="fas fa-play" aria-hidden="true"></i>
</button>
<button type="button" id="pause-btn" class="btn btn-warning btn-space"
onclick="request('post', {action : 'pause'})" disabled>
<i class="fas fa-pause" aria-hidden="true"></i>
</button>
<button type="button" id="stop-btn" class="btn btn-danger btn-space"
onclick="request('post', {action : 'stop'})" disabled>
<i class="fas fa-stop" aria-hidden="true"></i>
</button>
</div>
<button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()">
<i class="fas fa-play"></i>
</button>
</div>
<div class="col text-right">
<div class="btn-group mb-2">