From 28a0a95851caecb257c36fead7a72da3f44a4dee Mon Sep 17 00:00:00 2001 From: calzoneman Date: Wed, 3 Apr 2013 17:56:03 -0500 Subject: [PATCH] Fix a bunch of stuff; refactor clientside --- channel.js | 13 +- www/assets/js/callbacks.js | 293 +++++++++++++++++-------------------- www/assets/js/functions.js | 81 +++++----- www/assets/js/media.js | 10 +- 4 files changed, 183 insertions(+), 214 deletions(-) diff --git a/channel.js b/channel.js index e49b030c..67b8c9cf 100644 --- a/channel.js +++ b/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 || - data.seconds == undefined || data.type == undefined) { + if(data.id == undefined || data.currentTime == 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()); } diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js index 1035592b..e79ed723 100644 --- a/www/assets/js/callbacks.js +++ b/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() { $("
").addClass("alert").addClass("alert-error") .insertAfter($(".row")[0])[0] .innerHTML = "

Disconnected from server

"; }); + socket.on("announcement", function(data) { + showAnnouncement(data.title, data.text); + }); + + /* REGION Channel Meta */ socket.on("channelNotRegistered", function() { showChannelRegistration(); }); - socket.on("announcement", function(data) { - showAnnouncement(data.title, data.text); + socket.on("registerChannel", function(data) { + 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) { diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js index e162efd3..9a7538df 100644 --- a/www/assets/js/functions.js +++ b/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"); - $(div).attr("class", "userlist_item"); - var span = document.createElement("span"); - var flair = document.createElement("span"); - span.innerHTML = name; - div.appendChild(flair); - div.appendChild(span); - fmtUserlistItem(div, rank, leader); + var div = $("
").attr("class", "userlist_item"); + var flair = $("").appendTo(div); + var nametag = $("").text(name).appendTo(div); + fmtUserlistItem(div[0], 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 = $("
"); 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"); - $(message).addClass("action"); - message.innerHTML = data.username + " " + data.msg; - div.appendChild(message); + var message = $("").text(data.username + " " + data.msg) + .addClass("action") + .appendTo(div); } else { - var name = document.createElement("span"); - var message = document.createElement("span"); - name.innerHTML = "<" + data.username + "> "; + var name = $(""); + $("").text("<" + data.username + ">").appendTo(name); if(data.msgclass == "shout") - $(name).addClass("shout"); - $(message).addClass(data.msgclass); - message.innerHTML = data.msg; - div.appendChild(name); - div.appendChild(message); + name.addClass("shout"); + var message = $("").text(data.msg).addClass(data.msgclass); + name.appendTo(div); + message.appendTo(div); } return div; } @@ -265,6 +258,8 @@ function addLibraryButtons(li, id) { var btnNext = $("