Redesign playlist management

channel.js

@@ -47,11 +47,14 @@ var Channel = function(name) {
         oplaylistmove: 1.5,
         oplaylistdelete: 2,
         oplaylistjump: 1.5,
+        oplaylistaddlist: 1.5,
         playlistadd: 1.5,
         playlistnext: 1.5,
         playlistmove: 1.5,
         playlistdelete: 2,
         playlistjump: 1.5,
+        playlistaddlist: 1.5,
+        playlistadd: 1.5,
         addnontemp: 2,
         settemp: 2,
         playlistgeturl: 1.5,
@@ -1080,7 +1083,7 @@ Channel.prototype.tryQueue = function(user, data) {
 }
 
 Channel.prototype.tryQueuePlaylist = function(user, data) {
-    if(!this.hasPermission(user, "playlistadd")) {
+    if(!this.hasPermission(user, "playlistaddlist")) {
         return;
     }
 

database.js

@@ -814,8 +814,9 @@ function saveUserPlaylist(pl, user, name) {
     var plstr = JSON.stringify(pl2);
 
     var query = createQuery(
-        "INSERT INTO user_playlists VALUES (?, ?, ?)",
+        "INSERT INTO user_playlists VALUES (?, ?, ?)" +
-        [user, name, plstr]
+        "ON DUPLICATE KEY UPDATE contents=?",
+        [user, name, plstr, plstr]
     );
 
     var results = db.querySync(query);
@@ -827,6 +828,24 @@ function saveUserPlaylist(pl, user, name) {
     return true;
 }
 
+function deleteUserPlaylist(user, name) {
+    var db = getConnection();
+    if(!db) {
+        return false;
+    }
+
+    var query = createQuery(
+        "DELETE FROM user_playlists WHERE user=? AND name=?",
+        [user, name]
+    );
+
+    var results = db.querySync(query);
+    if(!results) {
+        Logger.errlog.log("! Failed to delete from user_playlists");
+    }
+    return results;
+}
+
 exports.setup = setup;
 exports.getConnection = getConnection;
 exports.createQuery = createQuery;
@@ -855,3 +874,4 @@ exports.resetPassword = resetPassword;
 exports.getUserPlaylists = getUserPlaylists;
 exports.loadUserPlaylist = loadUserPlaylist;
 exports.saveUserPlaylist = saveUserPlaylist;
+exports.deleteUserPlaylist = deleteUserPlaylist;

user.js

@@ -457,6 +457,10 @@ User.prototype.initCallbacks = function() {
             success: result,
             error: result ? false : "Unknown"
         });
+        var list = Database.getUserPlaylists(this.name);
+        this.socket.emit("listPlaylists", {
+            pllist: list,
+        });
     }.bind(this));
 
     this.socket.on("queuePlaylist", function(data) {
@@ -464,6 +468,18 @@ User.prototype.initCallbacks = function() {
             this.channel.tryQueuePlaylist(this, data);
         }
     }.bind(this));
+
+    this.socket.on("deletePlaylist", function(data) {
+        if(typeof data.name != "string") {
+            return;
+        }
+
+        Database.deleteUserPlaylist(this.name, data.name);
+        var list = Database.getUserPlaylists(this.name);
+        this.socket.emit("listPlaylists", {
+            pllist: list,
+        });
+    }.bind(this));
 }
 
 // Handle administration

www/assets/css/ytsync.css

@@ -59,6 +59,20 @@ html, body {
     clear: both;
 }
 
+#userpl_list {
+    list-style: none outside none;
+    margin-left: 0;
+    max-height: 500px;
+    overflow-y: scroll;
+}
+
+#userpl_list li {
+    clear: both;
+    margin: 2px 0 0 auto;
+    padding: 2px;
+    font-size: 8pt;
+}
+
 #queue {
     margin-bottom: 0;
 }

www/assets/js/callbacks.js

@@ -760,11 +760,62 @@ Callbacks = {
         }
         else {
             var pls = data.pllist;
-            $("#userpl_dropdown").html("");
+            pls.sort(function(a, b) {
+                var x = a.name.toLowerCase();
+                var y = b.name.toLowerCase();
+                if(x < y) return -1;
+                if(x > y) return 1;
+                return 0;
+            });
+            $("#userpl_list").html("");
             for(var i = 0; i < pls.length; i++) {
-                $("<option/>").attr("value", pls[i].name)
+                var li = $("<li/>").appendTo($("#userpl_list"))
-                    .text(pls[i].name)
+                    .addClass("well");
-                    .appendTo($("#userpl_dropdown"));
+                li.data("pl-name", pls[i].name);
+                $("<div/>").text(pls[i].name).appendTo(li)
+                    .css("float", "left")
+                    .css("margin-left", "1em");
+                var bg = $("<div/>").addClass("btn-group")
+                    .css("float", "left")
+                    .prependTo(li);
+                var del = $("<button/>")
+                    .addClass("btn btn-mini btn-danger")
+                    .prependTo(bg);
+                $("<i/>").addClass("icon-trash").appendTo(del);
+                (function(li) {
+                del.click(function() {
+                    socket.emit("deletePlaylist", {
+                        name: li.data("pl-name")
+                    });
+                });
+                })(li);
+                if(hasPermission("playlistaddlist")) {
+                    (function(li) {
+                    $("<button/>").addClass("btn btn-mini")
+                        .text("End")
+                        .prependTo(bg)
+                        .click(function() {
+                            socket.emit("queuePlaylist", {
+                                name: li.data("pl-name"),
+                                pos: "end"
+                            });
+                        });
+                    })(li);
+
+                    if(hasPermission("playlistnext")) {
+                        (function(li) {
+                        $("<button/>").addClass("btn btn-mini")
+                            .text("Next")
+                            .prependTo(bg)
+                            .click(function() {
+                                socket.emit("queuePlaylist", {
+                                    name: li.data("pl-name"),
+                                    pos: "next"
+                                });
+                            });
+                        })(li);
+                    }
+                }
             }
         }
     }

www/assets/js/client.js

@@ -572,20 +572,6 @@ $("#userpl_name").keydown(function(ev) {
     }
 });
 
-$("#userpl_queuenext").click(function() {
-    socket.emit("queuePlaylist", {
-        name: $("#userpl_dropdown").val(),
-        pos: "next"
-    });
-});
-
-$("#userpl_queueend").click(function() {
-    socket.emit("queuePlaylist", {
-        name: $("#userpl_dropdown").val(),
-        pos: "end"
-    });
-});
-
 $("#show_userpl").click(function() {
     $("#show_library").parent().removeClass("active");
     $("#show_userpl").parent().addClass("active");

www/assets/js/functions.js

@@ -784,8 +784,8 @@ function handlePermissionChange() {
     setVisible("#clearplaylist", hasPermission("playlistclear"));
     setVisible("#shuffleplaylist", hasPermission("playlistshuffle"));
 
-    $("#userpl_queueend").attr("disabled", !hasPermission("playlistadd"));
+    $("#userpl_queueend").attr("disabled", !hasPermission("playlistaddlist"));
-    $("#userpl_queuenext").attr("disabled", !hasPermission("playlistnext"));
+    $("#userpl_queuenext").attr("disabled", !hasPermission("playlistaddlist") || !hasPermission("playlistnext"));
 
     setVisible("#modnav", RANK >= 2);
     setVisible("#chanperms_tab", RANK >= 3);
@@ -1268,6 +1268,7 @@ function genPermissionsEditor() {
     makeOption("Move playlist items", "oplaylistmove", standard, CHANPERMS.oplaylistmove+"");
     makeOption("Delete playlist items", "oplaylistdelete", standard, CHANPERMS.oplaylistdelete+"");
     makeOption("Jump to video", "oplaylistjump", standard, CHANPERMS.oplaylistjump+"");
+    makeOption("Queue playlist", "oplaylistaddlist", standard, CHANPERMS.oplaylistaddlist+"");
 
     addDivider("General playlist permissions");
     makeOption("Add to playlist", "playlistadd", standard, CHANPERMS.playlistadd+"");
@@ -1275,6 +1276,7 @@ function genPermissionsEditor() {
     makeOption("Move playlist items", "playlistmove", standard, CHANPERMS.playlistmove+"");
     makeOption("Delete playlist items", "playlistdelete", standard, CHANPERMS.playlistdelete+"");
     makeOption("Jump to video", "playlistjump", standard, CHANPERMS.playlistjump+"");
+    makeOption("Queue playlist", "playlistaddlist", standard, CHANPERMS.playlistaddlist+"");
     makeOption("Add nontemporary media", "addnontemp", standard, CHANPERMS.addnontemp+"");
     makeOption("Temp/untemp playlist item", "settemp", standard, CHANPERMS.settemp+"");
     makeOption("Retrieve playlist URLs", "playlistgeturl", standard, CHANPERMS.playlistgeturl+"");

www/channel.html

@@ -88,14 +88,8 @@
                         <div class="span5">
                             <button class="btn btn-block" id="userpl_save">Save Playlist</button>
                         </div>
-                        <div class="span7" style="margin-left: 0;">
+                        <ul class="span12" id="userpl_list" style="margin-left: 0">
-                            <select id="userpl_dropdown" class="input-block-level">
+                        </ul>
-                            </select>
-                        </div>
-                        <div class="span5 btn-group">
-                            <button class="btn btn-block" id="userpl_queuenext">Queue Next</button>
-                            <button class="btn btn-block" id="userpl_queueend">Queue End</button>
-                        </div>
                     </div>
                     <div id="libcontainer">
                         <div class="span7" style="margin-left: 0;">