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

Further improvements to web interface (#139)

Browse Source 
* Implement button toolbar

* Fix filters logic

* Switch to btn-primary for active filters

* Reduce playlist table columns on mobile

* Cleanup playlist area

* Reduce volume spacing

* Hide items in playlist as well for mobile

* Use text utility classes vs style

* Filter use checkbox instead of radio

* Hide library file column on mobile

* Update jQuery and FontAwesome to latest
This commit is contained in:
Tyler Vigario
2020-05-06 18:14:38 -07:00
committed by GitHub
parent 529527c1c0
commit aba9eea336
7 changed files with 187 additions and 4578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
static/css/custom.css
View File

@ -1,24 +1,22 @@
.bs-docs-section{margin-top:4em} .btn-space {margin-right: 5px;}
.bs-docs-section .page-header h1 { padding: 2rem 0; font-size: 3rem; margin-bottom: 10px } .tag-space {margin-right: 3px;}
.btn-space{margin-right:5px;} .playlist-title-td {width: 60%;}
.tag-space{margin-right:3px;} .playlist-title {float: left;}
.playlist-title-td{width:60%}
.playlist-title{float:left; }
.playlist-item {transition: all 0.2s ease-in-out;} .playlist-item {transition: all 0.2s ease-in-out;}
.playlist-artwork{ .playlist-artwork {
float:left; float: left;
margin-left:10px; margin-left: 10px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.tag-click{ .tag-click {
cursor:pointer; cursor: pointer;
transition: 400ms; transition: 400ms;
} }
.tag-unclicked{ .tag-unclicked {
opacity: 0.6; opacity: 0.6;
} }
.tag-clicked{ .tag-clicked {
box-shadow: 2px 4px 10px #777777; box-shadow: 2px 4px 10px #777777;
transform: scale(1.2); transform: scale(1.2);
opacity: 1; opacity: 1;
@ -43,7 +41,7 @@
background-color: hsl(0, 0%, 43%); background-color: hsl(0, 0%, 43%);
color: white; color: white;
} }
.library-item{ .library-item {
display: flex; display: flex;
padding: .5rem .5rem .5rem 0; padding: .5rem .5rem .5rem 0;
height: 72px; height: 72px;
@ -100,11 +98,23 @@
.library-action { .library-action {
margin-left: auto; margin-left: auto;
} }
.library-info-col .path{ .library-info-col .path {
font-style: italic !important; font-style: italic !important;
font-weight: 300; font-weight: 300;
} }
#volume-slider { #volume-slider {
margin-top: 8px; margin-top: 8px;
margin-right: 6px; }
.dropdown {
display: inline-block;
}
@media (max-width: 399.98px) {
#volume-slider {
width: 80px;
}
}
@media (max-width: 329.98px) {
#volume-slider {
display: none;
}
} }

61
static/js/custom.js
View File

@ -269,8 +269,8 @@ function updateControls(empty, play, mode, volume) {
} }
} }
for (const otherModes of Object.values(playModeBtns)) { for (const otherMode of Object.values(playModeBtns)) {
otherModes.removeClass('active'); otherMode.removeClass('active');
} }
playModeBtns[mode].addClass('active'); playModeBtns[mode].addClass('active');
@ -335,46 +335,25 @@ setInterval(checkForPlaylistUpdate, 3000);
// --------------------- // ---------------------
// ------ Browser ------ // ------ Browser ------
// --------------------- // ---------------------
var filter_file = false; var filters = {
var filter_url = false; file: $('#filter-type-file'),
var filter_radio = false; url: $('#filter-type-url'),
radio: $('#filter-type-radio'),
};
var filter_dir = $("#filter-dir"); var filter_dir = $("#filter-dir");
var filter_keywords = $("#filter-keywords"); var filter_keywords = $("#filter-keywords");
var filter_btn_file = $("#filter-type-file");
var filter_btn_url = $("#filter-type-url");
var filter_btn_radio = $("#filter-type-radio");
function setFilterType(type) { function setFilterType(event, type) {
filter_types = []; event.preventDefault();
if (type === "file") { if (filters[type].hasClass('active')) {
if (filter_btn_file.hasClass("btn-primary")) { filters[type].removeClass('active btn-primary').addClass('btn-secondary');
filter_btn_file.removeClass("btn-primary").addClass("btn-secondary"); filters[type].find('input[type=radio]').removeAttr('checked');
filter_dir.prop("disabled", true); } else {
filter_file = false; filters[type].removeClass('btn-secondary').addClass('active btn-primary');
} else { filters[type].find('input[type=radio]').attr('checked', 'checked');
filter_btn_file.removeClass("btn-secondary").addClass("btn-primary");
filter_dir.prop("disabled", false);
filter_file = true;
}
} else if (type === "url") {
if (filter_btn_url.hasClass("btn-primary")) {
filter_btn_url.removeClass("btn-primary").addClass("btn-secondary");
filter_url = false;
} else {
filter_btn_url.removeClass("btn-secondary").addClass("btn-primary");
filter_url = true;
}
} else if (type === "radio") {
if (filter_btn_radio.hasClass("btn-primary")) {
filter_btn_radio.removeClass("btn-primary").addClass("btn-secondary");
filter_radio = false;
} else {
filter_btn_radio.removeClass("btn-secondary").addClass("btn-primary");
filter_types.push('radio');
filter_radio = true;
}
} }
updateResults(); updateResults();
} }
@ -511,9 +490,11 @@ function getFilters(dest_page = 1) {
}); });
filter_types = []; filter_types = [];
if (filter_file) { filter_types.push("file"); } for (const filter in filters) {
if (filter_url) { filter_types.push("url"); } if (filters[filter].hasClass('active')) {
if (filter_radio) { filter_types.push("radio"); } filter_types.push(filter);
}
}
return { return {
type: filter_types.join(','), type: filter_types.join(','),

4387
static/js/fontawesome.all.js
View File

File diff suppressed because one or more lines are too long

5
static/js/fontawesome.all.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
static/js/jquery-3.4.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/js/jquery-3.5.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

266
templates/index.html
View File

@ -24,125 +24,119 @@
</div> </div>
</div> </div>
<div class="container mb-5"> <div id="playlist" class="container mb-5">
<div id="playlist"> <div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls">
<div class="row"> <button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()">
<div class="col-auto"> <i class="fas fa-play"></i>
<button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()"> </button>
<i class="fas fa-play"></i> <div class="ml-auto">
<div class="dropdown mr-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
</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('randomize')">
<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 class="btn-group" role="group">
<button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_down'})">
<i class="fa fa-volume-down" aria-hidden="true"></i>
</button>
<input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01"
value="0.5" onchange="setVolumeDelayed(this.value)" />
<button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_up'})">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</button> </button>
</div> </div>
<div class="col btn-group">
<div class="dropdown mb-2 btn-space" style="margin-left: auto;">
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
</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('randomize')">
<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 class="btn-group mb-2">
<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>
</button>
<input type="range" class="custom-range" id="volume-slider" min="0" max="1" step="0.01"
value="0.5" onchange="setVolumeDelayed(this.value)" />
<button type="button" class="btn btn-warning btn-space"
onclick="request('post', {action : 'volume_up'})">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</button>
</div>
</div>
</div> </div>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col" class="d-none d-md-table-cell">#</th>
<th scope="col" class="playlist-title-td">Title</th> <th scope="col" class="playlist-title-td">Title</th>
<th scope="col">Url/Path</th> <th scope="col" class="d-none d-md-table-cell">Url/Path</th>
<th scope="col">Action</th> <th scope="col">Action</th>
</tr> </tr>
</thead> </thead>
<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" class="text-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" class="text-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;">
<td colspan="4" style="text-align:center;"> <td colspan="4" class="text-center">
<a class="text-muted" href="javascript:">See item <span <a class="text-muted" href="javascript;">See item <span
class="playlist-expand-item-range"></span> on the playlist.</a> class="playlist-expand-item-range"></span> on the playlist.
</td> </a>
</tr> </td>
<tr class="playlist-item-template" style="display: none;"> </tr>
<th scope="row" class="playlist-item-index"></th> <tr class="playlist-item-template" style="display: none;">
<td> <th scope="row" class="playlist-item-index d-none d-md-table-cell"></th>
<input hidden type="text" class="playlist-item-id" value="" /> <td>
<div class="playlist-title"> <input hidden type="text" class="playlist-item-id" value="" />
<img width="80" class="playlist-item-thumbnail" <div class="playlist-title">
src="static/image/unknown-album.png" /> <img width="80" class="playlist-item-thumbnail" 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>
<span class="playlist-item-type badge badge-secondary"></span> <span class="playlist-item-type badge badge-secondary"></span>
<br /> <br />
<span class="playlist-item-artist"></span> <span class="playlist-item-artist"></span>
<br /> <br />
<div class="playlist-item-tags"> <div class="playlist-item-tags">
<a class="playlist-item-edit tag-space tag-click"><i class="fas fa-edit" <a class="playlist-item-edit tag-space tag-click"><i class="fas fa-edit"
style="color: #AAAAAA"></i></a> style="color: #AAAAAA"></i></a>
</div>
</div> </div>
</td> </div>
<td> </td>
<small class="playlist-item-path"></small> <td class="d-none d-md-table-cell">
</td> <small class="playlist-item-path"></small>
<td> </td>
<div class="btn-group"> <td>
<button type="button" class="playlist-item-play btn btn-info btn-sm btn-space"> <div class="btn-group">
<i class="fa fa-play" aria-hidden="true"></i> <button type="button" class="playlist-item-play btn btn-info btn-sm">
</button> <i class="fa fa-play" aria-hidden="true"></i>
<button type="button" class="playlist-item-trash btn btn-danger btn-sm btn-space"> </button>
<i class="fas fa-trash-alt" aria-hidden="true"></i> <button type="button" class="playlist-item-trash btn btn-danger btn-sm ml-1">
</button> <i class="fas fa-trash-alt" aria-hidden="true"></i>
</div> </button>
</td> </div>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</div> </table>
</div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger btn-space" onclick="request('post', {action : 'clear'})"> <button type="button" class="btn btn-danger mr-1" onclick="request('post', {action : 'clear'})">
<i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist <i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
</button> </button>
</div>
</div> </div>
</div> </div>
@ -163,16 +157,19 @@
<div class="col"> <div class="col">
<label>Type</label> <label>Type</label>
<div id="filter-type" class="input-group mb-2"> <div id="filter-type" class="input-group mb-2">
<div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons"> <div class="btn-group btn-group-sm btn-group-toggle">
<button type="button" id="filter-type-file" class="btn btn-secondary btn-sm" <label id="filter-type-file" class="btn btn-secondary"
onclick="setFilterType('file')">File onclick="setFilterType(event, 'file')">
</button> <input type="checkbox" name="options"> File
<button type="button" id="filter-type-url" class="btn btn-secondary btn-sm" </label>
onclick="setFilterType('url')">URL <label id="filter-type-url" class="btn btn-secondary"
</button> onclick="setFilterType(event, 'url')">
<button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm" <input type="checkbox" name="options"> URL
onclick="setFilterType('radio')">Radio </label>
</button> <label id="filter-type-radio" class="btn btn-secondary"
onclick="setFilterType(event, 'radio')">
<input type="checkbox" name="options"> Radio
</label>
</div> </div>
</div> </div>
@ -236,7 +233,7 @@
</div> </div>
</div> </div>
<div class="library-info-col col-4" style="padding: 3px;"> <div class="library-info-col col-4 d-none d-md-flex" style="padding: 3px;">
<span class="library-item-path text-muted path">Path/to/the/file</span> <span class="library-item-path text-muted path">Path/to/the/file</span>
<div class="library-item-tags"> <div class="library-item-tags">
<a class="tag-space tag-click library-item-edit"><i class="fas fa-edit" <a class="tag-space tag-click library-item-edit"><i class="fas fa-edit"
@ -288,18 +285,21 @@
</div> </div>
</div> </div>
<div class="btn-group" style="margin-bottom: 5px;" role="group"> <div class="btn-group" role="group" class="mb-2">
<button type="submit" class="btn btn-secondary btn-space" onclick="addAllResults()"><i <button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fa fa-plus"
class="fa fa-plus" aria-hidden="true"></i> Add All</button> aria-hidden="true"></i> Add All
<button type="submit" class="btn btn-secondary btn-space" </button>
<button type="submit" class="btn btn-secondary mr-1"
onclick="request('post', {action : 'rescan'}); updateResults()"> onclick="request('post', {action : 'rescan'}); updateResults()">
<i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files <i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
</button> </button>
<button type="submit" class="btn btn-secondary btn-space" onclick="downloadAllResults()"><i <button type="submit" class="btn btn-secondary mr-1" onclick="downloadAllResults()"><i
class="fa fa-download" aria-hidden="true"></i> Download All</button> class="fa fa-download" aria-hidden="true"></i> Download All
<button type="button" class="btn btn-danger btn-space" data-toggle="modal" </button>
<button type="button" class="btn btn-danger mr-1" data-toggle="modal"
data-target="#deleteWarningModal"><i class="fas fa-trash-alt" aria-hidden="true"></i> data-target="#deleteWarningModal"><i class="fas fa-trash-alt" aria-hidden="true"></i>
Delete All</button> Delete All
</button>
</div> </div>
<div class="modal fade" id="deleteWarningModal" tabindex="-1" role="dialog" <div class="modal fade" id="deleteWarningModal" tabindex="-1" role="dialog"
@ -461,10 +461,10 @@
</div> </div>
</div> </div>
<script src="static/js/jquery-3.4.1.min.js"></script> <script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/popper.min.js"></script> <script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script> <script src="static/js/bootstrap.min.js"></script>
<script src="static/js/fontawesome.all.js"></script> <script src="static/js/fontawesome.all.min.js"></script>
<script src="static/js/custom.js"></script> <script src="static/js/custom.js"></script>
</body> </body>