Work on playlist items

www/assets/css/ytsync.css

@@ -110,6 +110,10 @@ html, body {
     border: 1px solid #aaaaaa; // [](/w21)
 }
 
+.queue_temp {
+    background-image: url(../img/stripe-diagonal.png);
+}
+
 #plmeta {
     border: 1px solid #aaaaaa;
     background-color: #ffffff;

www/assets/js/callbacks.js

@@ -526,24 +526,26 @@ Callbacks = {
     },
 
     setTemp: function(data) {
-        // TODO redo this when buttons are decided
-        var li = $("#queue").children()[data.idx];
+        var li = $("#queue").children()[data.position];
         li = $(li);
-        var buttons = li.find(".qe_btn");
-        if(buttons.length == 5) {
-            $(buttons[4]).removeClass("btn-danger btn-success");
-            $(buttons[4]).addClass(data.temp ? "btn-success" : "btn-danger");
-        }
+        if(data.temp)
+            li.addClass("queue_temp");
+        else
+            li.removeClass("queue_temp");
+        var btn = li.find(".qbtn-tmp");
+        btn.data("temp", data.temp);
         if(data.temp) {
-            li.addClass("alert alert-error");
+            btn.html(btn.html().replace("Make Temporary",
+                                        "Make Permanent"));
         }
         else {
-            li.removeClass("alert alert-error");
+            btn.html(btn.html().replace("Make Permanent",
+                                        "Make Temporary"));
         }
     },
 
-    unqueue: function(data) {
-        var li = $("#queue").children()[data.pos];
+    "delete": function(data) {
+        var li = $("#queue").children()[data.position];
         $(li).remove();
     },
 

www/assets/js/data.js

@@ -20,7 +20,12 @@ var PLAYER = false;
 var VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");
 var VHEIGHT = ""+parseInt(parseInt(VWIDTH) * 9 / 16);
 var POSITION = -1;
-var socket;
+var socket = {
+    emit: function() {
+        console.log("socket not initialized");
+        console.log(arguments);
+    }
+};
 var IGNORED = [];
 var CHATHIST = [];
 var CHATHISTIDX = 0;

www/assets/js/util.js

@@ -214,26 +214,56 @@ function makeQueueEntry(video) {
         li.addClass("queue_temp");
     }
 
-    // Add dropdown
-    // class="dropdown dropup" lolwut
-    var dd = $("<div/>").addClass("dropdown dropup").appendTo(li);
-    var menu = $("<ul/>").addClass("dropdown-menu")
-        .attr("role", "menu")
-        .appendTo(dd);
-    var del = $("<a/>").appendTo($("<li/>").appendTo(menu))
-        .attr("href", "javascript:void(0)")
-        .attr("tabindex", "-1")
+    // TODO Permissions
+    var menu = $("<div/>").addClass("btn-group").appendTo(li);
+    // Play
+    $("<button/>").addClass("btn btn-mini qbtn-play")
+        .html("<i class='icon-play'></i>Play")
         .click(function() {
+            var i = $("#queue").children().index(li);
+            socket.emit("jumpTo", i);
         })
-        .text("Remove");
-    $("<i/>").addClass("icon-trash").prependTo(del);
+        .appendTo(menu);
+    // Queue next
+    $("<button/>").addClass("btn btn-mini qbtn-next")
+        .html("<i class='icon-share-alt'></i>Queue Next")
+        .click(function() {
+            var i = $("#queue").children().index(li);
+            socket.emit("moveMedia", {
+                src: i,
+                dest: i < POSITION ? POSITION : POSITION + 1
+            });
+        })
+        .appendTo(menu);
+    // Temp/Untemp
+    $("<button/>").addClass("btn btn-mini qbtn-tmp")
+        .html("<i class='icon-flag'></i>Make Temporary")
+        .click(function() {
+            var i = $("#queue").children().index(li);
+            var temp = li.find(".qbtn-tmp").data("temp");
+            socket.emit("setTemp", {
+                position: i,
+                temp: !temp
+            });
+        })
+        .appendTo(menu);
+    // Delete
+    $("<button/>").addClass("btn btn-mini qbtn-delete")
+        .html("<i class='icon-trash'></i>Delete")
+        .click(function() {
+            var i = $("#queue").children().index(li);
+            socket.emit("delete", i);
+        })
+        .appendTo(menu);
+
+    menu.hide();
 
     li.contextmenu(function(ev) {
         ev.preventDefault();
         if(menu.css("display") == "none")
-            menu.show();
+            menu.show("blind");
         else
-            menu.hide();
+            menu.hide("blind");
         return false;
     });