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

* 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

static/js/custom.js

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