Implement play mode as dropdown button
This commit is contained in:
Tyler Vigario
parent
7766b15ea1
commit
504a5786d8
@ -46,6 +46,13 @@ var last_volume = 0;
|
|||||||
var playing = false;
|
var playing = false;
|
||||||
var playPauseBtn = $("#play-pause-btn");
|
var playPauseBtn = $("#play-pause-btn");
|
||||||
|
|
||||||
|
var playModeBtns = {
|
||||||
|
'one-shot': $('#one-shot-mode-btn'),
|
||||||
|
random: $('#random-mode-btn'),
|
||||||
|
repeat: $('#repeat-mode-btn'),
|
||||||
|
autoplay: $('#autoplay-mode-btn')
|
||||||
|
};
|
||||||
|
|
||||||
function request(_url, _data, refresh = false) {
|
function request(_url, _data, refresh = false) {
|
||||||
console.log(_data);
|
console.log(_data);
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@ -255,27 +262,14 @@ function updateControls(empty, play, mode, volume) {
|
|||||||
playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-pause').addClass('fa-play');
|
playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-pause').addClass('fa-play');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (mode === "one-shot") {
|
|
||||||
$("#oneshot-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
|
let otherModes = Object.assign({}, playModeBtns);
|
||||||
$("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
delete otherModes[mode];
|
||||||
$("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
for (_mode in otherModes) {
|
||||||
$("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
otherModes[_mode].removeClass('active');
|
||||||
} else if (mode === "repeat") {
|
|
||||||
$("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
$("#repeat-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
|
|
||||||
$("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
$("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
} else if (mode === "random") {
|
|
||||||
$("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
$("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
$("#random-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", false); // This is a feature.
|
|
||||||
$("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
} else if (mode === "autoplay") {
|
|
||||||
$("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
$("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
$("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
||||||
$("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
|
|
||||||
}
|
}
|
||||||
|
playModeBtns[mode].addClass('active');
|
||||||
|
|
||||||
if (volume != last_volume) {
|
if (volume != last_volume) {
|
||||||
last_volume = volume;
|
last_volume = volume;
|
||||||
if (volume > 1) {
|
if (volume > 1) {
|
||||||
@ -321,6 +315,10 @@ function togglePlayPause() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changePlayMode(mode) {
|
||||||
|
request('post', {action: mode});
|
||||||
|
}
|
||||||
|
|
||||||
// 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);
|
||||||
|
|
||||||
|
|||||||
@ -6,17 +6,17 @@
|
|||||||
|
|
||||||
<title>botamusique web interface</title>
|
<title>botamusique web interface</title>
|
||||||
|
|
||||||
<link rel="icon" href="static/image/favicon.ico" />
|
<link rel="icon" href="../static/image/favicon.ico" />
|
||||||
|
|
||||||
<link id="pagestyle" rel="stylesheet" href="static/css/bootstrap.min.css">
|
<link id="pagestyle" rel="stylesheet" href="../static/css/bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="static/css/custom.css">
|
<link rel="stylesheet" href="../static/css/custom.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container page-header mb-5" id="banner">
|
<div class="container page-header mb-5" id="banner">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<img src="static/image/logo.png" height="200px">
|
<img src="../static/image/logo.png" height="200px">
|
||||||
</div>
|
</div>
|
||||||
<div class="col my-auto">
|
<div class="col my-auto">
|
||||||
<h1>botamusique Web Interface</h1>
|
<h1>botamusique Web Interface</h1>
|
||||||
@ -27,33 +27,37 @@
|
|||||||
<div class="container mb-5">
|
<div class="container mb-5">
|
||||||
<div id="playlist">
|
<div id="playlist">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col-auto">
|
||||||
<button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()">
|
<button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()">
|
||||||
<i class="fas fa-play"></i>
|
<i class="fas fa-play"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<div class="dropdown mb-2">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
|
||||||
|
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Mode
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="play-mode">
|
||||||
|
<a class="dropdown-item" href="#" id="one-shot-mode-btn"
|
||||||
|
onclick="changePlayMode('one-shot')">
|
||||||
|
<i class="fas fa-tasks mr-2" aria-hidden="true"></i>One-shot
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#" id="random-mode-btn" onclick="changePlayMode('random')">
|
||||||
|
<i class="fas fa-random mr-2" aria-hidden="true"></i>Random
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#" id="repeat-mode-btn" onclick="changePlayMode('repeat')">
|
||||||
|
<i class="fas fa-redo mr-2" aria-hidden="true"></i>Repeat
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#" id="autoplay-mode-btn"
|
||||||
|
onclick="changePlayMode('autoplay')">
|
||||||
|
<i class="fas fa-robot mr-2" aria-hidden="true"></i>Autoplay
|
||||||
|
</a>
|
||||||
|
</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">
|
||||||
<button type="button" id="oneshot-btn" class="btn btn-primary btn-space" title="One-shot Mode"
|
|
||||||
onclick="request('post', {action : 'one-shot'})" disabled>
|
|
||||||
<i class="fas fa-tasks" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="button" id="random-btn" class="btn btn-primary btn-space" title="Random Mode"
|
|
||||||
onclick="request('post', {action : 'randomize'})" disabled>
|
|
||||||
<i class="fas fa-random" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="button" id="repeat-btn" class="btn btn-primary btn-space" title="Repeat Mode"
|
|
||||||
onclick="request('post', {action : 'repeat'})" disabled>
|
|
||||||
<i class="fas fa-redo" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="button" id="autoplay-btn" class="btn btn-primary btn-space" title="Autoplay Mode"
|
|
||||||
onclick="request('post', {action : 'autoplay'})" disabled>
|
|
||||||
<i class="fas fa-robot" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="button" class="btn btn-warning btn-space"
|
<button type="button" class="btn btn-warning btn-space"
|
||||||
onclick="request('post', {action : 'volume_down'})">
|
onclick="request('post', {action : 'volume_down'})">
|
||||||
<i class="fa fa-volume-down" aria-hidden="true"></i>
|
<i class="fa fa-volume-down" aria-hidden="true"></i>
|
||||||
@ -83,12 +87,12 @@
|
|||||||
<tbody id="playlist-table" class="playlist-table">
|
<tbody id="playlist-table" class="playlist-table">
|
||||||
<tr id="playlist-loading">
|
<tr id="playlist-loading">
|
||||||
<td colspan="4" style="text-align:center;">
|
<td colspan="4" style="text-align:center;">
|
||||||
<img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="playlist-empty" style="display: none;">
|
<tr id="playlist-empty" style="display: none;">
|
||||||
<td colspan="4" style="text-align:center;">
|
<td colspan="4" style="text-align:center;">
|
||||||
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="playlist-expand" class="table-dark" style="display: none;">
|
<tr id="playlist-expand" class="table-dark" style="display: none;">
|
||||||
@ -103,7 +107,7 @@
|
|||||||
<input hidden type="text" class="playlist-item-id" value="" />
|
<input hidden type="text" class="playlist-item-id" value="" />
|
||||||
<div class="playlist-title">
|
<div class="playlist-title">
|
||||||
<img width="80" class="playlist-item-thumbnail"
|
<img width="80" class="playlist-item-thumbnail"
|
||||||
src="static/image/unknown-album.png" />
|
src="../static/image/unknown-album.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="playlist-artwork">
|
<div class="playlist-artwork">
|
||||||
<b class="playlist-item-title"></b>
|
<b class="playlist-item-title"></b>
|
||||||
@ -206,10 +210,10 @@
|
|||||||
|
|
||||||
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
||||||
<div id="library-item-loading" class="list-group-item library-item">
|
<div id="library-item-loading" class="list-group-item library-item">
|
||||||
<img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
||||||
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
||||||
<input hidden type="text" class="library-item-id" value="" />
|
<input hidden type="text" class="library-item-id" value="" />
|
||||||
@ -217,7 +221,7 @@
|
|||||||
<div class="library-thumb-col">
|
<div class="library-thumb-col">
|
||||||
<div class="library-thumb-img">
|
<div class="library-thumb-img">
|
||||||
<img class="library-item-thumb library-thumb-img"
|
<img class="library-item-thumb library-thumb-img"
|
||||||
src="static/image/unknown-album.png" />
|
src="../static/image/unknown-album.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group-vertical library-thumb-grp">
|
<div class="btn-group-vertical library-thumb-grp">
|
||||||
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
|
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
|
||||||
@ -459,10 +463,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="static/js/jquery-3.4.1.min.js"></script>
|
<script src="../static/js/jquery-3.4.1.min.js"></script>
|
||||||
<script src="static/js/bootstrap.bundle.min.js"></script>
|
<script src="../static/js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="static/js/fontawesome.all.js"></script>
|
<script src="../static/js/fontawesome.all.js"></script>
|
||||||
<script src="static/js/custom.js"></script>
|
<script src="../static/js/custom.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user