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

Implement play mode as dropdown button

Browse Source
This commit is contained in:
Tyler Vigario
2020-04-27 20:18:28 -07:00
parent 7766b15ea1
commit 504a5786d8
2 changed files with 57 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
static/js/custom.js
View File

@@ -46,6 +46,13 @@ var last_volume = 0;
var playing = false;
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) {
console.log(_data);
$.ajax({
@@ -255,27 +262,14 @@ function updateControls(empty, play, mode, volume) {
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);
$("#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-primary").addClass("btn-secondary").prop("disabled", false);
} 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);
let otherModes = Object.assign({}, playModeBtns);
delete otherModes[mode];
for (_mode in otherModes) {
otherModes[_mode].removeClass('active');
}
playModeBtns[mode].addClass('active');
if (volume != last_volume) {
last_volume = volume;
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.
setInterval(checkForPlaylistUpdate, 3000);

74
templates/index.html
View File

@@ -6,17 +6,17 @@
<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 rel="stylesheet" href="static/css/custom.css">
<link id="pagestyle" rel="stylesheet" href="../static/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/css/custom.css">
</head>
<body>
<div class="container page-header mb-5" id="banner">
<div class="row">
<div class="col-auto">
<img src="static/image/logo.png" height="200px">
<img src="../static/image/logo.png" height="200px">
</div>
<div class="col my-auto">
<h1>botamusique Web Interface</h1>
@@ -27,33 +27,37 @@
<div class="container mb-5">
<div id="playlist">
<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()">
<i class="fas fa-play"></i>
</button>
</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="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"
onclick="request('post', {action : 'volume_down'})">
<i class="fa fa-volume-down" aria-hidden="true"></i>
@@ -83,12 +87,12 @@
<tbody id="playlist-table" class="playlist-table">
<tr id="playlist-loading">
<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>
</tr>
<tr id="playlist-empty" style="display: none;">
<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>
</tr>
<tr id="playlist-expand" class="table-dark" style="display: none;">
@@ -103,7 +107,7 @@
<input hidden type="text" class="playlist-item-id" value="" />
<div class="playlist-title">
<img width="80" class="playlist-item-thumbnail"
src="static/image/unknown-album.png" />
src="../static/image/unknown-album.png" />
</div>
<div class="playlist-artwork">
<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-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 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 id="library-item" style="display: none;" class="list-group-item library-item">
<input hidden type="text" class="library-item-id" value="" />
@@ -217,7 +221,7 @@
<div class="library-thumb-col">
<div class="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 class="btn-group-vertical library-thumb-grp">
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
@@ -459,10 +463,10 @@
</div>
</div>
<script src="static/js/jquery-3.4.1.min.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/fontawesome.all.js"></script>
<script src="static/js/custom.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/fontawesome.all.js"></script>
<script src="../static/js/custom.js"></script>
</body>
</html>