Fix a bunch of stuff; refactor clientside

channel.js

@@ -277,7 +277,7 @@ Channel.prototype.userJoin = function(user) {
     // Set the new guy up
     this.sendPlaylist(user);
     this.sendMediaUpdate(user);
-    user.socket.emit("queueLock", {locked: this.qlocked});
+    user.socket.emit("queueLock", {locked: !this.openqueue});
     this.sendUserlist(user);
     this.sendRecentChat(user);
     if(this.poll) {
@@ -355,7 +355,7 @@ Channel.prototype.sendPlaylist = function(user) {
         pl: this.queue
     });
     user.socket.emit("updatePlaylistIdx", {
-        idx: this.currentPosition
+        idx: this.position
     });
 }
 
@@ -695,8 +695,7 @@ Channel.prototype.tryUpdate = function(user, data) {
         return;
     }
 
-    if(data.id == undefined || data.title == undefined ||
+    if(data.id == undefined || data.currentTime == undefined) {
-       data.seconds == undefined || data.type == undefined) {
            return;
     }
 
@@ -705,7 +704,11 @@ Channel.prototype.tryUpdate = function(user, data) {
         return;
     }
 
-    this.media = new Media(data.id, data.title, data.seconds, data.type);
+    if(this.media.id != data.id) {
+        return;
+    }
+
+    this.media.currentTime = data.currentTime;
     this.sendAll("mediaUpdate", this.media.packupdate());
 }
 

www/assets/js/callbacks.js

@@ -12,18 +12,30 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 // Wrapped in a function so I can ensure that the socket
 // is defined before these statements are run
 function initCallbacks() {
+    /* REGION Globals */
+
     socket.on("disconnect", function() {
         $("<div/>").addClass("alert").addClass("alert-error")
             .insertAfter($(".row")[0])[0]
             .innerHTML = "<h3>Disconnected from server</h3>";
     });
 
+    socket.on("announcement", function(data) {
+        showAnnouncement(data.title, data.text);
+    });
+
+    /* REGION Channel Meta */
     socket.on("channelNotRegistered", function() {
         showChannelRegistration();
     });
 
-    socket.on("announcement", function(data) {
+    socket.on("registerChannel", function(data) {
-        showAnnouncement(data.title, data.text);
+        if(data.success) {
+            $("#chregnotice").remove();
+        }
+        else {
+            alert(data.error);
+        }
     });
 
     socket.on("updateMotd", function(data) {
@@ -39,41 +51,6 @@ function initCallbacks() {
         updateChatFilters(data.filters);
     });
 
-    socket.on("registerChannel", function(data) {
-        if(data.success) {
-            $("#chregnotice").remove();
-        }
-        else {
-            alert(data.error);
-        }
-    });
-
-    socket.on("rank", function(data) {
-        RANK = data.rank;
-        handleRankChange();
-    });
-
-    socket.on("login", function(data) {
-        if(!data.success)
-            alert(data.error);
-        else {
-            $("#welcome")[0].innerHTML = "Welcome, " + uname;
-            $("#loginform").css("display", "none");
-            $("#logoutform").css("display", "");
-            $("#loggedin").css("display", "");
-            if(pw != "") {
-                createCookie("sync_uname", uname, 1);
-                createCookie("sync_pw", pw, 1);
-            }
-        }
-    });
-
-    socket.on("register", function(data) {
-        if(data.error) {
-            alert(data.error);
-        }
-    });
-
     socket.on("channelOpts", function(opts) {
         $("#opt_qopen_allow_qnext").prop("checked", opts.qopen_allow_qnext);
         $("#opt_qopen_allow_move").prop("checked", opts.qopen_allow_move);
@@ -95,6 +72,8 @@ function initCallbacks() {
         CHANNELOPTS = opts;
         if(opts.qopen_allow_qnext)
             $("#queue_next").attr("disabled", false);
+        else if(RANK < Rank.Moderator && !LEADER)
+            $("#queue_next").attr("disabled", true);
         if(opts.qopen_allow_playnext)
             $("#play_next").attr("disabled", false);
         else if(RANK < Rank.Moderator && !LEADER)
@@ -111,13 +90,44 @@ function initCallbacks() {
         updateBanlist(data.entries);
     });
 
+    /* REGION Rank Stuff */
+
+    socket.on("rank", function(data) {
+        RANK = data.rank;
+        handleRankChange();
+    });
+
+    socket.on("register", function(data) {
+        if(data.error) {
+            alert(data.error);
+        }
+    });
+
+    socket.on("login", function(data) {
+        if(!data.success)
+            alert(data.error);
+        else {
+            $("#welcome")[0].innerHTML = "Welcome, " + uname;
+            $("#loginform").css("display", "none");
+            $("#logoutform").css("display", "");
+            $("#loggedin").css("display", "");
+            if(pw != "") {
+                createCookie("sync_uname", uname, 1);
+                createCookie("sync_pw", pw, 1);
+            }
+        }
+    });
+
+
+    /* REGION Chat */
+
     socket.on("usercount", function(data) {
         $("#usercount").text(data.count + " connected users");
     });
 
     socket.on("chatMsg", function(data) {
         var div = formatChatMessage(data);
-        $("#messagebuffer")[0].appendChild(div);
+        div.appendTo($("#messagebuffer"));
         // Cap chatbox at most recent 100 messages
         if($("#messagebuffer").children().length > 100) {
             $($("#messagebufer").children()[0]).remove();
@@ -126,7 +136,63 @@ function initCallbacks() {
             $("#messagebuffer").scrollTop($("#messagebuffer").prop("scrollHeight"));
     });
 
+    socket.on("userlist", function(data) {
+        for(var i = 0; i < data.length; i++) {
+            addUser(data[i].name, data[i].rank, data[i].leader);
+        }
+    });
+
+    socket.on("addUser", function(data) {
+        addUser(data.name, data.rank, data.leader);
+    });
+
+    socket.on("updateUser", function(data) {
+        if(data.name == uname) {
+            LEADER = data.leader;
+            handleRankChange();
+            if(LEADER) {
+                // I'm a leader!  Set up sync function
+                sendVideoUpdate = function() {
+                    PLAYER.getTime(function(seconds) {
+                        socket.emit("mediaUpdate", {
+                            id: PLAYER.id,
+                            currentTime: seconds,
+                            paused: false,
+                            type: PLAYER.type
+                        });
+                    });
+                };
+            }
+            // I'm not a leader.  Don't send syncs to the server
+            else {
+                sendVideoUpdate = function() { }
+            }
+
+        }
+        var users = $("#userlist").children();
+        for(var i = 0; i < users.length; i++) {
+            var name = users[i].children[1].innerHTML;
+            // Reformat user
+            if(name == data.name) {
+                fmtUserlistItem(users[i], data.rank, data.leader);
+            }
+        }
+    });
+
+    socket.on("userLeave", function(data) {
+        var users = $("#userlist").children();
+        for(var i = 0; i < users.length; i++) {
+            var name = users[i].children[1].innerHTML;
+            if(name == data.name) {
+                $("#userlist")[0].removeChild(users[i]);
+            }
+        }
+    });
+
+    /* REGION Playlist Stuff */
+
     socket.on("playlist", function(data) {
+        // Clear the playlist first
         var ul = $("#queue")[0];
         var n = ul.children.length;
         for(var i = 0; i < n; i++) {
@@ -155,15 +221,38 @@ function initCallbacks() {
 
     socket.on("unqueue", function(data) {
         var li = $("#queue").children()[data.pos];
-        //$(li).hide("blind", function() {
+        $(li).remove();
-            $(li).remove();
-        //});
     });
 
     socket.on("moveVideo", function(data) {
         moveVideo(data.src, data.dest);
     });
 
+    socket.on("updatePlaylistIdx", function(data) {
+        if(data.old != undefined) {
+            var liold = $("#queue").children()[data.old];
+            $(liold).removeClass("alert alert-info");
+        }
+        var linew = $("#queue").children()[data.idx];
+        $(linew).addClass("alert alert-info");
+        POSITION = data.idx;
+        $("#voteskip").attr("disabled", false);
+    });
+
+    socket.on("mediaUpdate", function(data) {
+        $("#currenttitle").text("Currently Playing: " + data.title);
+        if(data.type != "sc" && MEDIATYPE == "sc")
+            // [](/goddamnitmango)
+            fixSoundcloudShit();
+        if(data.type != MEDIATYPE) {
+            MEDIATYPE = data.type;
+            PLAYER = new Media(data);
+        }
+        else if(PLAYER.update) {
+            PLAYER.update(data);
+        }
+    });
+
     socket.on("queueLock", function(data) {
         OPENQUEUE = !data.locked;
         if(OPENQUEUE) {
@@ -177,8 +266,9 @@ function initCallbacks() {
                     $("#play_next").attr("disabled", true);
             }
         }
-        else if(RANK < Rank.Moderator) {
+        else if(RANK < Rank.Moderator && !LEADER) {
             $("#playlist_controls").css("display", "none");
+            rebuildPlaylist();
         }
         if(OPENQUEUE) {
             $("#qlockbtn").removeClass("btn-danger")
@@ -192,123 +282,6 @@ function initCallbacks() {
         }
     });
 
-    socket.on("updatePlaylistIdx", function(data) {
-        if(data.old != undefined) {
-            console.log("unhighlight", data.old);
-            var liold = $("#queue").children()[data.old];
-            $(liold).removeClass("alert alert-info");
-        }
-        var linew = $("#queue").children()[data.idx];
-        $(linew).addClass("alert alert-info");
-        POSITION = data.idx;
-        $("#voteskip").attr("disabled", false);
-    });
-
-    socket.on("mediaUpdate", function(data) {
-        $("#currenttitle").text("Currently Playing: " + data.title);
-        if(data.type != "sc" && MEDIATYPE == "sc")
-            fixSoundcloudShit();
-        if(data.type != MEDIATYPE) {
-            MEDIATYPE = data.type;
-            PLAYER = new Media(data);
-        }
-        else {
-            PLAYER.update(data);
-        }
-    });
-
-    socket.on("userlist", function(data) {
-        for(var i = 0; i < data.length; i++) {
-            addUser(data[i].name, data[i].rank, data[i].leader);
-        }
-    });
-
-    socket.on("addUser", function(data) {
-        addUser(data.name, data.rank, data.leader);
-    });
-
-    socket.on("updateUser", function(data) {
-        if(data.name == uname) {
-            LEADER = data.leader;
-            handleRankChange();
-            if(LEADER) {
-                // I'm a leader!  Set up sync function
-                sendVideoUpdate = function() {
-                    PLAYER.getTime(function(seconds) {
-                        socket.emit("mediaUpdate", {
-                            id: PLAYER.id,
-                            seconds: seconds,
-                            paused: false,
-                            type: PLAYER.type
-                        });
-                    });
-                        
-                    /*
-                    if(MEDIATYPE == "yt") {
-                        socket.emit("mediaUpdate", {
-                            id: parseYTURL(PLAYER.getVideoUrl()),
-                            seconds: PLAYER.getCurrentTime(),
-                            paused: PLAYER.getPlayerState() == YT.PlayerState.PAUSED,
-                            type: "yt"
-                        });
-                    }
-                    else if(MEDIATYPE == "sc") {
-                        PLAYER.getPosition(function(pos) {
-                            socket.emit("mediaUpdate", {
-                                id: PLAYER.mediaId,
-                                seconds: pos / 1000,
-                                paused: false,
-                                type: "sc"
-                            });
-                        });
-                    }
-                    else if(MEDIATYPE == "vi") {
-                        PLAYER.api("getCurrentTime", function(data) {
-                            socket.emit("mediaUpdate", {
-                                id: PLAYER.videoid,
-                                seconds: data,
-                                paused: false,
-                                type: "vi"
-                            });
-                        });
-                    }
-                    else if(MEDIATYPE == "dm") {
-                        socket.emit("mediaUpdate", {
-                            id: PLAYER.mediaId,
-                            seconds: PLAYER.currentTime,
-                            paused: PLAYER.paused,
-                            type: "dm"
-                        });
-                    }
-                    */
-                };
-            }
-            // I'm not a leader.  Don"t send syncs to the server
-            else {
-                sendVideoUpdate = function() { }
-            }
-
-        }
-        var users = $("#userlist").children();
-        for(var i = 0; i < users.length; i++) {
-            var name = users[i].children[1].innerHTML;
-            // Reformat user
-            if(name == data.name) {
-                fmtUserlistItem(users[i], data.rank, data.leader);
-            }
-        }
-    });
-
-    socket.on("userLeave", function(data) {
-        var users = $("#userlist").children();
-        for(var i = 0; i < users.length; i++) {
-            var name = users[i].children[1].innerHTML;
-            if(name == data.name) {
-                $("#userlist")[0].removeChild(users[i]);
-            }
-        }
-    });
-
     socket.on("librarySearchResults", function(data) {
         var n = $("#library").children().length;
         for(var i = 0; i < n; i++) {
@@ -323,6 +296,8 @@ function initCallbacks() {
         }
     });
 
+    /* REGION Poll */
+
     socket.on("newPoll", function(data) {
         addPoll(data);
         if(SCROLLCHAT) {

www/assets/js/functions.js

@@ -11,36 +11,32 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 // Adds a user to the chatbox userlist
 function addUser(name, rank, leader) {
-    var div = document.createElement("div");
+    var div = $("<div/>").attr("class", "userlist_item");
-    $(div).attr("class", "userlist_item");
+    var flair = $("<span/>").appendTo(div);
-    var span = document.createElement("span");
+    var nametag = $("<span/>").text(name).appendTo(div);
-    var flair = document.createElement("span");
+    fmtUserlistItem(div[0], rank, leader);
-    span.innerHTML = name;
-    div.appendChild(flair);
-    div.appendChild(span);
-    fmtUserlistItem(div, rank, leader);
     if(RANK >= Rank.Moderator)
         addUserDropdown(div, name);
     var users = $("#userlist").children();
     for(var i = 0; i < users.length; i++) {
         var othername = users[i].children[1].innerHTML;
         if(othername.toLowerCase() > name.toLowerCase()) {
-            $(div).insertBefore(users[i]);
+            div.insertBefore(users[i]);
             return;
         }
     }
-    $("#userlist")[0].appendChild(div);
+    div.appendTo($("#userlist"));
 }
 
 // Format a userlist entry based on a person"s rank
 function fmtUserlistItem(div, rank, leader) {
-    var span = div.children[1];
+    var name = div.children[1];
     if(rank >= Rank.Siteadmin)
-        $(span).attr("class", "userlist_siteadmin");
+        $(name).attr("class", "userlist_siteadmin");
     else if(rank >= Rank.Owner)
-        $(span).attr("class", "userlist_owner");
+        $(name).attr("class", "userlist_owner");
     else if(rank >= Rank.Moderator)
-        $(span).attr("class", "userlist_op");
+        $(name).attr("class", "userlist_op");
 
     var flair = div.children[0];
     // denote current leader with [L]
@@ -127,9 +123,9 @@ function addUserDropdown(entry, name) {
 }
 
 function formatChatMessage(data) {
-    var div = document.createElement("div");
+    var div = $("<div/>");
     if(data.msg.toUpperCase().indexOf(uname.toUpperCase()) != -1) {
-        $(div).addClass("nick-highlight");
+        div.addClass("nick-highlight");
         if(!FOCUSED) {
             TITLE_BLINK = setInterval(function() {
                 if(document.title == "*Chat*")
@@ -140,21 +136,18 @@ function formatChatMessage(data) {
         }
     }
     if(data.msgclass == "action") {
-        var message = document.createElement("span");
+        var message = $("<span/>").text(data.username + " " + data.msg)
-        $(message).addClass("action");
+            .addClass("action")
-        message.innerHTML = data.username + " " + data.msg;
+            .appendTo(div);
-        div.appendChild(message);
     }
     else {
-        var name = document.createElement("span");
+        var name = $("<span/>");
-        var message = document.createElement("span");
+        $("<strong/>").text("<" + data.username + ">").appendTo(name);
-        name.innerHTML = "<strong>&lt;" + data.username + "&gt;</strong> ";
         if(data.msgclass == "shout")
-            $(name).addClass("shout");
+            name.addClass("shout");
-        $(message).addClass(data.msgclass);
+        var message = $("<span/>").text(data.msg).addClass(data.msgclass);
-        message.innerHTML = data.msg;
+        name.appendTo(div);
-        div.appendChild(name);
+        message.appendTo(div);
-        div.appendChild(message);
     }
     return div;
 }
@@ -265,6 +258,8 @@ function addLibraryButtons(li, id) {
     var btnNext =  $("<button />").attr("class", "btn qe_btn").appendTo(btnstrip);
     //$("<i />").attr("class", "icon-play").appendTo(btnNext);
     btnNext.text("Next");
+    if(!CHANNELOPTS.qopen_allow_qnext)
+        btnNext.attr("disabled", true);
 
     var btnEnd =  $("<button />").attr("class", "btn qe_btn").appendTo(btnstrip);
     //$("<i />").attr("class", "icon-fast-forward").appendTo(btnEnd);
@@ -288,25 +283,25 @@ function addLibraryButtons(li, id) {
 
 // Rearranges the queue
 function moveVideo(src, dest, noanim) {
-    var li = $("#queue").children()[src];
+    var li = $($("#queue").children()[src]);
     var ul = $("#queue")[0];
     if(noanim) {
-        ul.removeChild(li);
+        li.detach();
         if(dest == ul.children.length) {
-            ul.appendChild(li);
+            li.appendTo(ul);
         }
         else {
-            ul.insertBefore(li, ul.getElementsByTagName("li")[dest]);
+            li.insertBefore(ul.getElementsByTagName("li")[dest]);
         }
     }
     else {
-        $(li).hide("blind", function() {
+        li.hide("blind", function() {
-            ul.removeChild(li);
+            li.detach();
             if(dest == ul.children.length) {
-                ul.appendChild(li);
+                li.appendTo(ul);
             }
             else {
-                ul.insertBefore(li, ul.getElementsByTagName("li")[dest]);
+                li.insertBefore(ul.getElementsByTagName("li")[dest]);
             }
             $(li).show("blind");
         });
@@ -342,18 +337,14 @@ function parseVideoURL(url){
 function parseYTURL(url) {
     var m = url.match(/v=([^&#]+)/);
     if(m) {
-        // Extract ID
         return m[1];
     }
     var m = url.match(/youtu\.be\/([^&#]+)/);
     if(m) {
-        // Extract ID
         return m[1];
     }
-    // Final try
     var m = url.match(/([^&#]*)/);
     if(m) {
-        // Extract ID
         return m[1];
     }
     return null;
@@ -370,7 +361,6 @@ function parseYTPlaylist(url) {
 function parseTwitch(url) {
     var m = url.match(/twitch\.tv\/([a-zA-Z0-9]+)/);
     if(m) {
-        // Extract channel name
         return m[1];
     }
     return null;
@@ -379,7 +369,6 @@ function parseTwitch(url) {
 function parseLivestream(url) {
     var m = url.match(/livestream\.com\/([a-zA-Z0-9]+)/);
     if(m) {
-        // Extract channel name
         return m[1];
     }
     return null;
@@ -388,7 +377,6 @@ function parseLivestream(url) {
 function parseVimeo(url) {
     var m = url.match(/vimeo\.com\/([0-9]+)/);
     if(m) {
-        // Extract video ID
         return m[1];
     }
     return null;
@@ -435,7 +423,6 @@ function addPoll(data) {
     $("<h3/>").text(data.title).appendTo(poll);
     for(var i = 0; i < data.options.length; i++) {
         var callback = (function(i) { return function() {
-                console.log(i);
                 socket.emit("vote", {
                     option: i
                 });
@@ -600,13 +587,13 @@ function handleRankChange() {
         $("#modnav").show();
         $("#chancontrols").show();
     }
-    else {
+    else if(!LEADER) {
         if(OPENQUEUE) {
-            if(CHANNELOPTS.qopen_allow_qnext || LEADER)
+            if(CHANNELOPTS.qopen_allow_qnext)
                 $("#queue_next").attr("disabled", false);
             else
                 $("#queue_next").attr("disabled", true);
-            if(CHANNELOPTS.qopen_allow_playnext || LEADER)
+            if(CHANNELOPTS.qopen_allow_playnext)
                 $("#play_next").attr("disabled", false);
             else
                 $("#play_next").attr("disabled", true);

www/assets/js/media.js

@@ -44,8 +44,10 @@ Media.prototype.initYouTube = function() {
     });
 
     this.load = function(data) {
-        this.player.loadVideoById(data.id, data.currentTime);
+        if(this.player.loadVideoById) {
-        this.id = data.id;
+            this.player.loadVideoById(data.id, data.currentTime);
+            this.id = data.id;
+        }
     }
 
     this.pause = function() {
@@ -230,7 +232,9 @@ Media.prototype.update = function(data) {
     }
     this.getTime(function(seconds) {
         if(Math.abs(data.currentTime - seconds) > SYNC_THRESHOLD) {
-            this.seek(data.currentTime);
+            if(!LEADER) {
+                this.seek(data.currentTime);
+            }
         }
     }.bind(this));
 }