Add progress bar to the queue

www/js/callbacks.js

@@ -25,6 +25,7 @@ Callbacks = {
             .text("Connected")
             .appendTo($("#messagebuffer"));
         scrollChat();
+        stopQueueSpinner();
     },
 
     disconnect: function() {
@@ -723,6 +724,7 @@ Callbacks = {
 
     queue: function(data) {
         PL_ACTION_QUEUE.queue(function (plq) {
+            stopQueueSpinner();
             var li = makeQueueEntry(data.item, true);
             if (data.item.uid === PL_CURRENT)
                 li.addClass("queue_active");
@@ -760,6 +762,7 @@ Callbacks = {
     },
 
     queueFail: function (data) {
+        stopQueueSpinner();
         queueMessage(data, "alert-danger");
     },
 

www/js/ui.js

@@ -420,6 +420,7 @@ function queue(pos, src) {
             delete data.link;
 
             socket.emit("queue", data);
+            startQueueSpinner();
             if (emitQueue.length > 0) {
                 notification.textContent = "Waiting to queue " + emitQueue[0].link;
             } else {

www/js/util.js

@@ -3037,3 +3037,28 @@ function showChannelSettings() {
 
     $("#channeloptions").modal();
 }
+
+// There is a point where this file needed to stop and we have clearly passed
+// it but let's keep going and see what happens
+
+function startQueueSpinner() {
+    if ($("#queueprogress").length > 0) {
+        return;
+    }
+
+    var progress = $("<div/>").addClass("progress").attr("id", "queueprogress");
+    var progressBar = $("<div/>").addClass("progress-bar progress-bar-striped active")
+            .attr({
+                role: "progressbar",
+                "aria-valuenow": "100",
+                "aria-valuemin": "0",
+                "aria-valuemax": "100",
+            }).css({
+                width: "100%"
+            }).appendTo(progress);
+    progress.appendTo($("#addfromurl"));
+}
+
+function stopQueueSpinner() {
+    $("#queueprogress").remove();
+}