From bd7288bed32f23345125a62e84145ab07891d3af Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Sat, 1 Jun 2013 15:42:08 -0400
Subject: [PATCH] Add user playlist interface

---
 channel.js                 | 30 +++++++++++++++++++++++
 user.js                    | 10 ++++++--
 www/assets/js/callbacks.js | 18 ++++++++++++++
 www/assets/js/client.js    | 49 ++++++++++++++++++++++++++++++++++++++
 www/assets/js/functions.js |  3 +++
 www/channel.html           | 41 ++++++++++++++++++++++++-------
 6 files changed, 140 insertions(+), 11 deletions(-)

diff --git a/channel.js b/channel.js
index e12c8a16..14270bef 100644
--- a/channel.js
+++ b/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;
diff --git a/user.js b/user.js
index 14c87059..275b8d77 100644
--- a/user.js
+++ b/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
diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js
index 5ef24636..6852693a 100644
--- a/www/assets/js/callbacks.js
+++ b/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() {
diff --git a/www/assets/js/client.js b/www/assets/js/client.js
index 4e821698..6ecd55b5 100644
--- a/www/assets/js/client.js
+++ b/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(),
diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js
index 68981bde..4cf07898 100644
--- a/www/assets/js/functions.js
+++ b/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"));
diff --git a/www/channel.html b/www/channel.html
index 45cb70cf..f4cf9491 100644
--- a/www/channel.html
+++ b/www/channel.html
@@ -76,17 +76,40 @@
                 <div class="row-fluid">
                     <div class="span12" id="pollcontainer">
                     </div>
-                    <div class="span7" style="margin-left: 0;">
-                        <input type="text" id="library_query" class="input-block-level" placeholder="Search Query">
+                    <div class="span12" id="leftpanetabs" style="margin-left: 0">
+                        <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">
-                        <button class="btn" id="library_search">Library</button>
-                        <button class="btn" id="youtube_search">YouTube</button>
+                    <div id="userplcontainer" style="display: none">
+                        <div class="span7" style="margin-left: 0;">
+                            <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;">
-                        <ul id="library" class="videolist">
-                        </ul>
-                        <button class="btn btn-block" id="search_clear">Clear Results</button>
+                    <div id="libcontainer">
+                        <div class="span7" style="margin-left: 0;">
+                            <input type="text" id="library_query" class="input-block-level" placeholder="Search Query">
+                        </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>