storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement play/pause as one button

Browse Source
This commit is contained in:
Tyler Vigario
2020-04-27 18:32:44 -07:00
parent 8c6b5e8f63
commit 7766b15ea1
2 changed files with 21 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/js/custom.js
View File

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

19
templates/index.html
View File

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