Add user playlist interface

channel.js

@@ -1079,6 +1079,36 @@ Channel.prototype.tryQueue = function(user, data) {
     this.enqueue(data, user);
 }
 
+Channel.prototype.tryQueuePlaylist = function(user, data) {
+    if(!this.hasPermission(user, "playlistadd")) {
+        return;
+    }
+
+    if(typeof data.name != "string" ||
+       typeof data.pos != "string") {
+        return;
+    }
+
+    if(data.pos == "next" && !this.hasPermission(user, "playlistnext")) {
+        return;
+    }
+
+    var pl = Database.loadUserPlaylist(user.name, data.name);
+    // Queue in reverse order for qnext
+    if(data.pos == "next") {
+        for(var i = pl.length - 1; i >= 0; i--) {
+            pl[i].pos = "next";
+            this.enqueue(pl[i], user);
+        }
+    }
+    else {
+        for(var i = 0; i < pl.length; i++) {
+            pl[i].pos = "end";
+            this.enqueue(pl[i], user);
+        }
+    }
+}
+
 Channel.prototype.setTemp = function(idx, temp) {
     var med = this.queue[idx];
     med.temp = temp;

user.js

@@ -417,7 +417,7 @@ User.prototype.initCallbacks = function() {
 
     this.socket.on("listPlaylists", function(data) {
         if(this.name == "" || this.rank < 1) {
-            socket.emit("listPlaylists", {
+            this.socket.emit("listPlaylists", {
                 pllist: [],
                 error: "You must be logged in to manage playlists"
             });
@@ -425,7 +425,7 @@ User.prototype.initCallbacks = function() {
         }
 
         var list = Database.getUserPlaylists(this.name);
-        socket.emit("listPlaylists", {
+        this.socket.emit("listPlaylists", {
             pllist: list,
         });
     }.bind(this));
@@ -458,6 +458,12 @@ User.prototype.initCallbacks = function() {
             error: result ? false : "Unknown"
         });
     }.bind(this));
+
+    this.socket.on("queuePlaylist", function(data) {
+        if(this.channel != null) {
+            this.channel.tryQueuePlaylist(this, data);
+        }
+    }.bind(this));
 }
 
 // Handle administration

www/assets/js/callbacks.js

@@ -750,6 +750,24 @@ Callbacks = {
             makeAlert("Error", data.error, "alert-error");
         }
     },
+
+    listPlaylists: function(data) {
+        if(data.error) {
+            makeAlert("Error", data.error, "alert-error")
+                .addClass("span12")
+                .css("margin-left", "0")
+                .insertBefore($("#userpl_name").parent());
+        }
+        else {
+            var pls = data.pllist;
+            $("#userpl_dropdown").html("");
+            for(var i = 0; i < pls.length; i++) {
+                $("<option/>").attr("value", pls[i].name)
+                    .text(pls[i].name)
+                    .appendTo($("#userpl_dropdown"));
+            }
+        }
+    }
 }
 
 $.getScript(IO_URL+"/socket.io/socket.io.js", function() {

www/assets/js/client.js

@@ -552,6 +552,55 @@ $("#library_query").keydown(function(ev) {
         searchLibrary();
 });
 
+function savePlaylist() {
+    if($("#userpl_name").val().trim() == "") {
+        makeAlert("Invalid Name", "Playlist name cannot be empty", "alert-error")
+            .addClass("span12")
+            .css("margin-left", "0")
+            .insertAfter($("#userpl_save").parent());
+        return;
+    }
+    socket.emit("savePlaylist", {
+        name: $("#userpl_name").val()
+    });
+}
+
+$("#userpl_save").click(savePlaylist);
+$("#userpl_name").keydown(function(ev) {
+    if(ev.keyCode == 13) {
+        savePlaylist();
+    }
+});
+
+$("#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");
+    $("#libcontainer").hide();
+    $("#userplcontainer").show();
+    socket.emit("listPlaylists");
+});
+
+$("#show_library").click(function() {
+    $("#show_userpl").parent().removeClass("active");
+    $("#show_library").parent().addClass("active");
+    $("#userplcontainer").hide();
+    $("#libcontainer").show();
+});
+
 $("#youtube_search").click(function() {
     socket.emit("searchLibrary", {
         query: $("#library_query").val(),

www/assets/js/functions.js

@@ -784,6 +784,9 @@ function handlePermissionChange() {
     setVisible("#clearplaylist", hasPermission("playlistclear"));
     setVisible("#shuffleplaylist", hasPermission("playlistshuffle"));
 
+    $("#userpl_queueend").attr("disabled", !hasPermission("playlistadd"));
+    $("#userpl_queuenext").attr("disabled", !hasPermission("playlistnext"));
+
     setVisible("#modnav", RANK >= 2);
     setVisible("#chanperms_tab", RANK >= 3);
     setVisible("#banlist_tab", hasPermission("ban"));

www/channel.html

@@ -76,17 +76,40 @@
                 <div class="row-fluid">
                     <div class="span12" id="pollcontainer">
                     </div>
-                    <div class="span7" style="margin-left: 0;">
+                    <div class="span12" id="leftpanetabs" style="margin-left: 0">
-                        <input type="text" id="library_query" class="input-block-level" placeholder="Search Query">
+                        <ul class="nav nav-pills">
+                            <li class="active"><a href="javascript:void(0)" id="show_library">Library/YouTube Search</a></li>
+                            <li><a href="javascript:void(0)" id="show_userpl">User Playlists</a></li>
                     </div>
-                    <div class="span5 btn-group">
+                    <div id="userplcontainer" style="display: none">
-                        <button class="btn" id="library_search">Library</button>
+                        <div class="span7" style="margin-left: 0;">
-                        <button class="btn" id="youtube_search">YouTube</button>
+                            <input type="text" id="userpl_name" class="input-block-level" placeholder="Playlist Name">
+                        </div>
+                        <div class="span5">
+                            <button class="btn btn-block" id="userpl_save">Save Playlist</button>
+                        </div>
+                        <div class="span7" style="margin-left: 0;">
+                            <select id="userpl_dropdown" class="input-block-level">
+                            </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 class="span12" style="margin-left: 0;">
+                    <div id="libcontainer">
-                        <ul id="library" class="videolist">
+                        <div class="span7" style="margin-left: 0;">
-                        </ul>
+                            <input type="text" id="library_query" class="input-block-level" placeholder="Search Query">
-                        <button class="btn btn-block" id="search_clear">Clear Results</button>
+                        </div>
+                        <div class="span5 btn-group">
+                            <button class="btn" id="library_search">Library</button>
+                            <button class="btn" id="youtube_search">YouTube</button>
+                        </div>
+                        <div class="span12" style="margin-left: 0;">
+                            <ul id="library" class="videolist">
+                            </ul>
+                            <button class="btn btn-block" id="search_clear">Clear Results</button>
+                        </div>
                     </div>
                 </div>
             </div>