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

Fix for directory filter as well as some improvements (#147)

Browse Source 
* Update for efficacy

* Fix some styling in js

* Remove outer library card

* Fix for directory filter

* Use bootstrap spacing utilities for button spacing

* Update button activation logic

* Readd responsiveness to playlist button toolbar

* Remove pymumble folder
This commit is contained in:
Tyler Vigario 2020-05-11 21:54:00 -07:00 committed by GitHub
parent 03da8fe20d
commit 4f2dcf0620
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 259 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/bootstrap.darkly.min.css vendored
View File

File diff suppressed because one or more lines are too long

84
static/css/custom.css
View File

@ -1,7 +1,6 @@
.btn-space {margin-right: 5px;} .btn-space {margin-right: 5px;}
.tag-space {margin-right: 3px;}
.playlist-title-td {width: 60%;} /* Playlist */
.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;
@ -9,6 +8,33 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
#volume-slider {
margin-top: 8px;
width: 200px;
}
@media (max-width: 509.98px) {
#volume-slider {
width: 140px;
}
}
@media (max-width: 439.98px) {
#volume-slider {
width: 100px;
}
}
@media (max-width: 404.98px) {
#volume-slider {
width: 80px;
}
}
@media (max-width: 384.98px) {
#volume-slider {
display: none;
}
}
/* Library */
.tag-space {margin-right: 3px;}
.tag-click { .tag-click {
cursor: pointer; cursor: pointer;
transition: 400ms; transition: 400ms;
@ -22,25 +48,6 @@
opacity: 1; opacity: 1;
margin: 5px; margin: 5px;
} }
.floating-button {
width: 50px;
height: 50px;
background-color: #aaaaaa40;
border-radius: 50%;
box-shadow: 0 6px 10px 0 #66666647;
transition: all 0.1s ease-in-out;
font-size: 25px;
color: #9896967a;
text-align: center;
line-height: 52px;
position: fixed;
right: 50px;
bottom: 40px;
}
.floating-button:hover {
background-color: hsl(0, 0%, 43%);
color: white;
}
.library-item { .library-item {
display: flex; display: flex;
padding: .5rem .5rem .5rem 0; padding: .5rem .5rem .5rem 0;
@ -102,19 +109,24 @@
font-style: italic !important; font-style: italic !important;
font-weight: 300; font-weight: 300;
} }
#volume-slider {
margin-top: 8px; /* Theme changer */
.floating-button {
width: 50px;
height: 50px;
background-color: #aaaaaa40;
border-radius: 50%;
box-shadow: 0 6px 10px 0 #66666647;
transition: all 0.1s ease-in-out;
font-size: 25px;
color: #9896967a;
text-align: center;
line-height: 52px;
position: fixed;
right: 50px;
bottom: 40px;
} }
.dropdown { .floating-button:hover {
display: inline-block; background-color: hsl(0, 0%, 43%);
} color: white;
@media (max-width: 399.98px) {
#volume-slider {
width: 80px;
}
}
@media (max-width: 329.98px) {
#volume-slider {
display: none;
}
} }

59
static/js/custom.js
View File

@ -13,7 +13,6 @@ $('a.a-submit, button.btn-submit').on('click', function (event) {
// ------ Playlist ------ // ------ Playlist ------
// ---------------------- // ----------------------
var pl_item_template = $(".playlist-item-template"); var pl_item_template = $(".playlist-item-template");
var pl_id_element = $(".playlist-item-id"); var pl_id_element = $(".playlist-item-id");
var pl_index_element = $(".playlist-item-index"); var pl_index_element = $(".playlist-item-index");
@ -44,7 +43,8 @@ var playlist_range_to = 0;
var last_volume = 0; var last_volume = 0;
var playing = false; var playing = false;
var playPauseBtn = $("#play-pause-btn"); var playPauseBtn = $('#play-pause-btn');
var fastForwardBtn = $('#fast-forward-btn');
var playModeBtns = { var playModeBtns = {
'one-shot': $('#one-shot-mode-btn'), 'one-shot': $('#one-shot-mode-btn'),
@ -90,7 +90,7 @@ function addPlaylistItem(item) {
var item_copy = pl_item_template.clone(); var item_copy = pl_item_template.clone();
item_copy.attr("id", "playlist-item-" + item.index); item_copy.attr("id", "playlist-item-" + item.index);
item_copy.addClass("playlist-item"); item_copy.addClass("playlist-item").removeClass("d-none");
var tags = item_copy.find(".playlist-item-tags"); var tags = item_copy.find(".playlist-item-tags");
tags.empty(); tags.empty();
@ -114,7 +114,6 @@ function addPlaylistItem(item) {
} }
item_copy.appendTo(playlist_table); item_copy.appendTo(playlist_table);
item_copy.show();
} }
function displayPlaylist(data) { function displayPlaylist(data) {
@ -164,6 +163,7 @@ function displayActiveItem(current_index) {
function insertExpandPrompt(real_from, real_to, display_from, display_to) { function insertExpandPrompt(real_from, real_to, display_from, display_to) {
var expand_copy = playlist_expand.clone(); var expand_copy = playlist_expand.clone();
playlist_expand.removeClass('d-none');
if (display_from !== display_to) { if (display_from !== display_to) {
expand_copy.find(".playlist-expand-item-range").html((display_from + 1) + "~" + (display_to + 1)); expand_copy.find(".playlist-expand-item-range").html((display_from + 1) + "~" + (display_to + 1));
} else { } else {
@ -177,14 +177,13 @@ function insertExpandPrompt(real_from, real_to, display_from, display_to) {
playlist_range_to = real_to; playlist_range_to = real_to;
checkForPlaylistUpdate(); checkForPlaylistUpdate();
}); });
expand_copy.show();
} }
function updatePlaylist() { function updatePlaylist() {
playlist_table.animate({ opacity: 0 }, 200, function () { playlist_table.animate({ opacity: 0 }, 200, function () {
playlist_empty.hide(); playlist_empty.addClass('d-none');
playlist_loading.show(); playlist_loading.show();
$("#playlist-table .playlist-item").css("opacity", 0); playlist_table.find(".playlist-item").css("opacity", 0);
data = {}; data = {};
if (!(playlist_range_from === 0 && playlist_range_to === 0)) { if (!(playlist_range_from === 0 && playlist_range_to === 0)) {
data = { data = {
@ -200,7 +199,7 @@ function updatePlaylist() {
200: displayPlaylist, 200: displayPlaylist,
204: function () { 204: function () {
playlist_loading.hide(); playlist_loading.hide();
playlist_empty.show(); playlist_empty.removeClass('d-none');
$(".playlist-item").remove(); $(".playlist-item").remove();
} }
} }
@ -257,9 +256,11 @@ function bindPlaylistEvent() {
function updateControls(empty, play, mode, volume) { function updateControls(empty, play, mode, volume) {
if (empty) { if (empty) {
playPauseBtn.prop("disabled", true); playPauseBtn.prop('disabled', true);
fastForwardBtn.prop('disabled', true);
} else { } else {
playPauseBtn.prop("disabled", false); playPauseBtn.prop('disabled', false);
fastForwardBtn.prop('disabled', false);
if (play) { if (play) {
playing = true; playing = true;
playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-play').addClass('fa-pause'); playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-play').addClass('fa-pause');
@ -292,6 +293,25 @@ function updateControls(empty, play, mode, volume) {
} }
} }
function togglePlayPause() {
if (playing) {
request('post', {action: 'pause'});
} else {
request('post', {action: 'resume'});
}
}
function changePlayMode(mode) {
request('post', {action: mode});
}
// Check the version of playlist to see if update is needed.
setInterval(checkForPlaylistUpdate, 3000);
// ----------------------
// --- THEME SWITCHER ---
// ----------------------
function themeInit() { function themeInit() {
var theme = localStorage.getItem("theme"); var theme = localStorage.getItem("theme");
if (theme !== null) { if (theme !== null) {
@ -317,24 +337,11 @@ 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'});
}
}
function changePlayMode(mode) {
request('post', {action: mode});
}
// Check the version of playlist to see if update is needed.
setInterval(checkForPlaylistUpdate, 3000);
// --------------------- // ---------------------
// ------ Browser ------ // ------ Browser ------
// --------------------- // ---------------------
var filters = { var filters = {
file: $('#filter-type-file'), file: $('#filter-type-file'),
url: $('#filter-type-url'), url: $('#filter-type-url'),
@ -354,6 +361,10 @@ function setFilterType(event, type) {
filters[type].find('input[type=radio]').attr('checked', 'checked'); filters[type].find('input[type=radio]').attr('checked', 'checked');
} }
if (type === 'file') {
filter_dir.prop('disabled', !filters['file'].hasClass('active'));
}
updateResults(); updateResults();
} }

65
templates/index.html
View File

@ -26,14 +26,14 @@
<div id="playlist" class="container mb-5"> <div id="playlist" class="container mb-5">
<div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls"> <div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls">
<button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space" onclick="togglePlayPause()"> <button type="button" id="play-pause-btn" class="btn btn-info mb-2 mr-1" onclick="togglePlayPause()" disabled>
<i class="fas fa-play"></i> <i class="fas fa-play"></i>
</button> </button>
<button type="button" id="fast-forward-btn" class="btn btn-info mb-2" onclick="request('post', {action : 'next'})"> <button type="button" id="fast-forward-btn" class="btn btn-info mb-2 mr-1" onclick="request('post', {action : 'next'})" disabled>
<i class="fas fa-fast-forward"></i> <i class="fas fa-fast-forward"></i>
</button> </button>
<div class="ml-auto"> <div class="ml-auto">
<div class="dropdown mr-2"> <div class="dropdown d-inline-block mr-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode" <button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i> <i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
@ -56,7 +56,7 @@
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-warning ml-1" <button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_down'})"> onclick="request('post', {action : 'volume_down'})">
<i class="fa fa-volume-down" aria-hidden="true"></i> <i class="fas fa-volume-down" aria-hidden="true"></i>
</button> </button>
<input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01" <input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01"
@ -64,7 +64,7 @@
<button type="button" class="btn btn-warning ml-1" <button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_up'})"> onclick="request('post', {action : 'volume_up'})">
<i class="fa fa-volume-up" aria-hidden="true"></i> <i class="fas fa-volume-up" aria-hidden="true"></i>
</button> </button>
</div> </div>
</div> </div>
@ -75,7 +75,7 @@
<thead> <thead>
<tr> <tr>
<th scope="col" class="d-none d-md-table-cell">#</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="w-50">Title</th>
<th scope="col" class="d-none d-md-table-cell">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>
@ -86,23 +86,23 @@
<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" class="d-none">
<td colspan="4" class="text-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 d-none">
<td colspan="4" class="text-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. class="playlist-expand-item-range"></span> on the playlist.
</a> </a>
</td> </td>
</tr> </tr>
<tr class="playlist-item-template" style="display: none;"> <tr class="playlist-item-template d-none">
<th scope="row" class="playlist-item-index d-none d-md-table-cell"></th> <th scope="row" class="playlist-item-index d-none d-md-table-cell"></th>
<td> <td>
<input hidden type="text" class="playlist-item-id" value="" /> <input hidden type="text" class="playlist-item-id" value="" />
<div class="playlist-title"> <div class="float-left">
<img width="80" class="playlist-item-thumbnail" 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">
@ -113,8 +113,9 @@
<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">
style="color: #AAAAAA"></i></a> <i class="fas fa-edit" style="color: #AAAAAA"></i>
</a>
</div> </div>
</div> </div>
</td> </td>
@ -124,7 +125,7 @@
<td> <td>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="playlist-item-play btn btn-info btn-sm"> <button type="button" class="playlist-item-play btn btn-info btn-sm">
<i class="fa fa-play" aria-hidden="true"></i> <i class="fas fa-play" aria-hidden="true"></i>
</button> </button>
<button type="button" class="playlist-item-trash btn btn-danger btn-sm ml-1"> <button type="button" class="playlist-item-trash btn btn-danger btn-sm ml-1">
<i class="fas fa-trash-alt" aria-hidden="true"></i> <i class="fas fa-trash-alt" aria-hidden="true"></i>
@ -146,13 +147,7 @@
<div class="container mb-3"> <div class="container mb-3">
<h2 id="forms">Music Library</h2> <h2 id="forms">Music Library</h2>
<div id="browser" class="card"> <div class="card mb-3 bg-light">
<div class="card-header">
<h4 class="card-title">Browser</h4>
</div>
<div class="card-body">
<div class="card mb-3">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Filters</h5> <h5 class="card-title">Filters</h5>
<hr> <hr>
@ -218,12 +213,11 @@
<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">
<i class="fa fa-play" aria-hidden="true"></i> <i class="fas fa-play" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>
@ -250,25 +244,23 @@
<div class="btn-group library-action"> <div class="btn-group library-action">
<button class="library-item-add-next btn btn-info btn-sm btn-space" type="button" <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
title="Next to play"> title="Next to play">
<svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="5 5 17 17">
viewBox="5 5 17 17">
<path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z" /> <path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z" />
<path <path
d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z" /> d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z" />
</svg> </svg>
</button> </button>
<button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" <button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" type="button"
type="button" title="Add to bottom"> title="Add to bottom">
<svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="2 2 20 20">
viewBox="2 2 20 20">
<path <path
d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" /> d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" />
</svg> </svg>
</button> </button>
<button class="library-item-download btn btn-primary btn-sm btn-space" type="button"> <button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
<i class="fa fa-download" aria-hidden="true"></i> <i class="fas fa-download" aria-hidden="true"></i>
</button> </button>
<button class="library-item-trash btn btn-danger btn-sm btn-space" type="button"> <button class="library-item-trash btn btn-danger btn-sm btn-space" type="button">
<i class="fas fa-trash-alt"></i> <i class="fas fa-trash-alt"></i>
@ -289,7 +281,7 @@
</div> </div>
<div class="btn-group" role="group" class="mb-2"> <div class="btn-group" role="group" class="mb-2">
<button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fa fa-plus" <button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fas fa-plus"
aria-hidden="true"></i> Add All aria-hidden="true"></i> Add All
</button> </button>
<button type="submit" class="btn btn-secondary mr-1" <button type="submit" class="btn btn-secondary mr-1"
@ -297,10 +289,10 @@
<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 mr-1" 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 class="fas fa-download" aria-hidden="true"></i> Download All
</button> </button>
<button type="button" class="btn btn-danger mr-1" data-toggle="modal" <button type="button" class="btn btn-danger mr-1" data-toggle="modal" data-target="#deleteWarningModal"><i
data-target="#deleteWarningModal"><i class="fas fa-trash-alt" aria-hidden="true"></i> class="fas fa-trash-alt" aria-hidden="true"></i>
Delete All Delete All
</button> </button>
</div> </div>
@ -329,8 +321,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div id="upload" class="container mb-3"> <div id="upload" class="container mb-3">
<div class="card"> <div class="card">
@ -449,7 +440,7 @@
placeholder="tag1,tag2,..."> placeholder="tag1,tag2,...">
<button id="addTagModalAddBtn" type="button" class="btn btn-primary btn-sm" <button id="addTagModalAddBtn" type="button" class="btn btn-primary btn-sm"
onclick="addTagModalAdd()"> onclick="addTagModalAdd()">
<i class="fa fa-plus" aria-hidden="true"></i> <i class="fas fa-plus" aria-hidden="true"></i>
Add Add
</button> </button>
</div> </div>