From 5c40a72d4750d6c2d1c29a4cccd566e9ebf7fb1c Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Sat, 14 Dec 2013 21:59:47 -0600
Subject: [PATCH] Start refactoring clientside

---
 www/assets/js/callbacks.js |  53 ++++++++-----------
 www/assets/js/data.js      |   2 +-
 www/assets/js/ui.js        | 101 ++++++++++++-------------------------
 www/assets/js/util.js      |  19 +++++++
 www/css/cytube.css         |   2 +-
 5 files changed, 74 insertions(+), 103 deletions(-)

diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js
index 9ec52682..5f069945 100644
--- a/www/assets/js/callbacks.js
+++ b/www/assets/js/callbacks.js
@@ -17,7 +17,7 @@ Callbacks = {
         if(reason && reason.returnValue === true)
             return;
 
-        var d = $("<div/>").addClass("alert alert-error span12")
+        var d = $("<div/>").addClass("alert alert-danger col-lg-12 col-md-12")
             .appendTo($("#announcements"));
         $("<h3/>").text("Uh-oh!").appendTo(d);
         $("<p/>").html("The socket.io connection failed."+
@@ -66,7 +66,7 @@ Callbacks = {
         $("<div/>").addClass("server-msg-reconnect")
             .text("Connected")
             .appendTo($("#messagebuffer"));
-        $("#messagebuffer").scrollTop($("#messagebuffer").prop("scrollHeight"));
+        scrollChat();
     },
 
     disconnect: function() {
@@ -86,27 +86,17 @@ Callbacks = {
     costanza: function (data) {
         hidePlayer();
         $("#costanza-modal").modal("hide");
-        var modal = $("<div/>").addClass("modal hide fade")
-            .attr("id", "costanza-modal")
+        var modal = makeModal();
+        modal.attr("id", "costanza-modal")
             .appendTo($("body"));
 
-
-        var body = $("<div/>").addClass("modal-body").appendTo(modal);
-        $("<button/>").addClass("close")
-            .attr("data-dismiss", "modal")
-            .attr("data-hidden", "true")
-            .html("&times;")
-            .appendTo(body);
+        var body = $("<div/>").addClass("modal-body")
+            .appendTo(modal.find(".modal-content"));
         $("<img/>").attr("src", "http://i0.kym-cdn.com/entries/icons/original/000/005/498/1300044776986.jpg")
             .appendTo(body);
 
         $("<strong/>").text(data.msg).appendTo(body);
-
-        modal.on("hidden", function () {
-            modal.remove();
-            unhidePlayer();
-        });
-
+        hidePlayer();
         modal.modal();
     },
 
@@ -143,10 +133,11 @@ Callbacks = {
                 .appendTo(div);
         }
 
-        var pwbox = $("<input/>").addClass("input-block-level")
+        var pwbox = $("<input/>").addClass("form-control")
             .attr("type", "password")
             .appendTo(div);
-        var submit = $("<button/>").addClass("btn btn-mini btn-block")
+        var submit = $("<button/>").addClass("btn btn-xs btn-default btn-block")
+            .css("margin-top", "5px")
             .text("Submit")
             .appendTo(div);
         var parent = chatDialog(div);
@@ -208,7 +199,7 @@ Callbacks = {
             $("#chregnotice").remove();
         }
         else {
-            makeAlert("Error", data.error, "alert-error")
+            makeAlert("Error", data.error, "alert-danger")
                 .insertAfter($("#chregnotice"));
         }
     },
@@ -234,9 +225,9 @@ Callbacks = {
         if(data.motd != "") {
             $("#motdwrap").show();
             $("#motd").show();
-            $("#togglemotd").find(".icon-plus")
-                .removeClass("icon-plus")
-                .addClass("icon-minus");
+            $("#togglemotd").find(".glyphicon-plus")
+                .removeClass("glyphicon-plus")
+                .addClass("glyphicon-minus");
         }
         else
             $("#motdwrap").hide();
@@ -254,9 +245,9 @@ Callbacks = {
         for(var i = 0; i < entries.length; i++) {
             var f = entries[i];
             var tr = $("<tr/>").appendTo(tbl).addClass("filter-row");
-            var remove = $("<button/>").addClass("btn btn-mini btn-danger")
+            var remove = $("<button/>").addClass("btn btn-xs btn-danger")
                 .appendTo($("<td/>").appendTo(tr));
-            $("<i/>").addClass("icon-trash").appendTo(remove);
+            $("<span/>").addClass("glyphicon glyphicon-trash").appendTo(remove);
             var name = $("<code/>").text(f.name)
                 .appendTo($("<td/>").appendTo(tr));
             var regex = $("<code/>").text(f.source)
@@ -277,11 +268,11 @@ Callbacks = {
                         return;
                     var r = this.text();
                     this.text("");
-                    var edit = $("<input/>").attr("type", "text")
+                    var edit = $("<input/>").addClass("form-control filter-regex-edit")
+                        .attr("type", "text")
                         .css("font-family", "Monospace")
                         .attr("placeholder", r)
                         .val(r)
-                        .addClass("filter-regex-edit")
                         .appendTo(this)
                         .focus();
 
@@ -309,7 +300,7 @@ Callbacks = {
                         .css("font-family", "Monospace")
                         .attr("placeholder", r)
                         .val(r)
-                        .addClass("filter-flags-edit")
+                        .addClass("form-control filter-flags-edit")
                         .appendTo(this)
                         .focus();
 
@@ -337,7 +328,7 @@ Callbacks = {
                         .css("font-family", "Monospace")
                         .attr("placeholder", r)
                         .val(r)
-                        .addClass("filter-replace-edit")
+                        .addClass("form-control filter-replace-edit")
                         .appendTo(this)
                         .focus();
 
@@ -465,9 +456,9 @@ Callbacks = {
         }
         for(var i = 0; i < entries.length; i++) {
             var tr = document.createElement("tr");
-            var remove = $("<button/>").addClass("btn btn-mini btn-danger")
+            var remove = $("<button/>").addClass("btn btn-xs btn-danger")
                 .appendTo($("<td/>").appendTo(tr));
-            $("<i/>").addClass("icon-remove-circle").appendTo(remove);
+            $("<span/>").addClass("glyphicon glyphicon-remove-circle").appendTo(remove);
             var ip = $("<td/>").text(entries[i].ip_displayed).appendTo(tr);
             var name = $("<td/>").text(entries[i].name).appendTo(tr);
             var aliases = $("<td/>").text(entries[i].aliases.join(", ")).appendTo(tr);
diff --git a/www/assets/js/data.js b/www/assets/js/data.js
index 33db153d..8ea6bb9f 100644
--- a/www/assets/js/data.js
+++ b/www/assets/js/data.js
@@ -61,7 +61,7 @@ var LASTCHATTIME = 0;
 var FOCUSED = true;
 var PAGETITLE = "CyTube";
 var TITLE_BLINK;
-var CHATSOUND = new Audio("assets/sounds/boop.wav");
+var CHATSOUND = new Audio("/assets/sounds/boop.wav");
 var KICKED = false;
 var NAME = readCookie("cytube_uname");
 var SESSION = readCookie("cytube_session");
diff --git a/www/assets/js/ui.js b/www/assets/js/ui.js
index 1226954e..21991382 100644
--- a/www/assets/js/ui.js
+++ b/www/assets/js/ui.js
@@ -19,32 +19,6 @@ $(window).focus(function() {
     FOCUSED = false;
 });
 
-/* Generalized show/hide function */
-function generateToggle(chevron, div) {
-    $(chevron).click(function() {
-        if($(div).css("display") == "none") {
-            $(chevron).html($(chevron).html().replace(/Show/, "Hide"));
-            $(div).show();
-            $(chevron+" i").removeClass("icon-plus")
-                .addClass("icon-minus");
-        }
-        else {
-            $(chevron).html($(chevron).html().replace(/Hide/, "Show"));
-            $(div).hide();
-            $(chevron+" i").removeClass("icon-minus")
-                .addClass("icon-plus");
-        }
-    });
-}
-
-/* setup show/hide toggles */
-generateToggle("#usercount", "#userlist");
-generateToggle("#userlisttoggle", "#userlist");
-$("#usercountwrap").click(scrollChat);
-generateToggle("#librarytoggle", "#librarywrap");
-generateToggle("#userpltoggle", "#userplaylistwrap");
-generateToggle("#playlisttoggle", "#playlist_controls");
-
 $("#editmotd").click(showMOTDEditor);
 
 $("#togglemotd").click(function () {
@@ -61,29 +35,6 @@ $("#togglemotd").click(function () {
     }
 });
 
-/* navbar stuff */
-$("#optlink").click(showOptionsMenu);
-$("#chatonly").click(chatOnly);
-
-function guestLogin() {
-    socket.emit("login", {
-        name: $("#guestname").val(),
-    });
-}
-$("#guestlogin").click(guestLogin);
-$("#guestname").keydown(function(ev) {
-    if(ev.keyCode == 13) {
-        guestLogin();
-    }
-});
-
-$("#login").click(showLoginMenu);
-$("#logout").click(function() {
-    eraseCookie("cytube_name");
-    eraseCookie("cytube_session");
-    document.location.reload(true);
-});
-
 /* chatbox */
 
 $("#modflair").click(function () {
@@ -147,6 +98,7 @@ $("#messagebuffer").mouseenter(function() { SCROLLCHAT = false; });
 $("#messagebuffer").mouseleave(function() { SCROLLCHAT = true; });
 
 $("#chatline").keydown(function(ev) {
+    // Enter/return
     if(ev.keyCode == 13) {
         if (CHATTHROTTLE) {
             return;
@@ -159,6 +111,8 @@ $("#chatline").keydown(function(ev) {
             } else if (USEROPTS.modhat && CLIENT.rank >= Rank.Moderator) {
                 meta.modflair = CLIENT.rank;
             }
+
+            // The /m command no longer exists, so emulate it clientside
             if (CLIENT.rank >= 2 && msg.indexOf("/m ") === 0) {
                 meta.modflair = CLIENT.rank;
                 msg = msg.substring(3);
@@ -174,16 +128,19 @@ $("#chatline").keydown(function(ev) {
         }
         return;
     }
-    else if(ev.keyCode == 9) {
+    else if(ev.keyCode == 9) { // Tab completion
         var words = $("#chatline").val().split(" ");
         var current = words[words.length - 1].toLowerCase();
         var users = $("#userlist").children();
         var match = null;
         for(var i = 0; i < users.length; i++) {
             var name = users[i].children[1].innerHTML.toLowerCase();
+            // Last word is a unique match for a userlist name
             if(name.indexOf(current) == 0 && match == null) {
                 match = users[i].children[1].innerHTML;
             }
+            // Last word is NOT a unique match- a match has already
+            // been found.  Bail because no unique completion is possible.
             else if(name.indexOf(current) == 0) {
                 match = null;
                 break;
@@ -200,7 +157,7 @@ $("#chatline").keydown(function(ev) {
         ev.preventDefault();
         return false;
     }
-    else if(ev.keyCode == 38) {
+    else if(ev.keyCode == 38) { // Up arrow (input history)
         if(CHATHISTIDX == CHATHIST.length) {
             CHATHIST.push($("#chatline").val());
         }
@@ -212,7 +169,7 @@ $("#chatline").keydown(function(ev) {
         ev.preventDefault();
         return false;
     }
-    else if(ev.keyCode == 40) {
+    else if(ev.keyCode == 40) { // Down arrow (input history)
         if(CHATHISTIDX < CHATHIST.length - 1) {
             CHATHISTIDX++;
             $("#chatline").val(CHATHIST[CHATHISTIDX]);
@@ -249,8 +206,7 @@ $("#youtube_search").click(function () {
         makeAlert("Media Link", "If you already have the link, paste it " +
                   "in the 'Media URL' box under Playlist Controls.  This "+
                   "searchbar works like YouTube's search function.",
-                  "alert-error")
-            .addClass("span12")
+                  "alert-danger")
             .insertBefore($("#library"));
     }
 
@@ -262,14 +218,13 @@ $("#youtube_search").click(function () {
 
 /* user playlists */
 
-$("#userpltoggle").click(function() {
+$("#showplaylistmanager").click(function() {
     socket.emit("listPlaylists");
 });
 
 $("#userpl_save").click(function() {
     if($("#userpl_name").val().trim() == "") {
-        makeAlert("Invalid Name", "Playlist name cannot be empty", "alert-error")
-            .addClass("span12")
+        makeAlert("Invalid Name", "Playlist name cannot be empty", "alert-danger")
             .insertAfter($("#userpl_save").parent());
         return;
     }
@@ -279,16 +234,14 @@ $("#userpl_save").click(function() {
 });
 
 /* video controls */
-function selectQuality(select, preset) {
-
-}
+// TODO this is ugly, change it?
 (function() {
     function qualHandler(select, preset) {
         $(select).click(function() {
             VIDEOQUALITY = preset;
             USEROPTS.default_quality = select;
             saveOpts();
-            var btn = $("#qualitywrap .btn.dropdown-toggle");
+            var btn = $("#qdrop");
             var caret = btn.find(".caret").detach();
             btn.text($(select).text());
             caret.appendTo(btn);
@@ -309,6 +262,8 @@ function selectQuality(select, preset) {
 $("#mediarefresh").click(function() {
     PLAYER.type = "";
     PLAYER.id = "";
+    // playerReady triggers the server to send a changeMedia.
+    // the changeMedia handler then reloads the player
     socket.emit("playerReady");
 });
 
@@ -333,6 +288,7 @@ $("#queue").sortable({
 });
 $("#queue").disableSelection();
 
+// TODO no more comma separated queueing.
 function queue(pos) {
     if($("#customembed_code").val()) {
         var title = false;
@@ -354,8 +310,7 @@ function queue(pos) {
     links.forEach(function(link) {
         var data = parseMediaLink(link);
         if(data.id === null || data.type === null) {
-            makeAlert("Error", "Invalid link.  Please double check it and remove extraneous information", "alert-error")
-                .addClass("span12")
+            makeAlert("Error", "Invalid link.  Please double check it and remove extraneous information", "alert-danger")
                 .insertBefore($("#extended_controls"));
         }
         else {
@@ -424,8 +379,10 @@ $("#getplaylist").click(function() {
         }
         var urls = list.join(",");
 
-        var modal = $("<div/>").addClass("modal hide fade")
+        var outer = $("<div/>").addClass("modal fade")
             .appendTo($("body"));
+        modal = $("<div/>").addClass("modal-dialog").appendTo(outer);
+        modal = $("<div/>").addClass("modal-content").appendTo(modal);
         var head = $("<div/>").addClass("modal-header")
             .appendTo(modal);
         $("<button/>").addClass("close")
@@ -435,16 +392,16 @@ $("#getplaylist").click(function() {
             .appendTo(head);
         $("<h3/>").text("Playlist URLs").appendTo(head);
         var body = $("<div/>").addClass("modal-body").appendTo(modal);
-        $("<input/>").attr("type", "text")
+        $("<input/>").addClass("form-control").attr("type", "text")
             .val(urls)
             .appendTo(body);
         $("<div/>").addClass("modal-footer").appendTo(modal);
-        modal.on("hidden", function() {
-            modal.remove();
+        outer.on("hidden", function() {
+            outer.remove();
             unhidePlayer();
         });
-        modal.modal();
-    }
+        outer.modal();
+    };
     socket.on("playlist", callback);
     socket.emit("requestPlaylist");
 });
@@ -464,6 +421,7 @@ $("#shuffleplaylist").click(function() {
 });
 
 /* layout stuff */
+/*
 $(window).resize(function() {
     VWIDTH = $("#videowidth").css("width").replace("px", "");
     VHEIGHT = ""+parseInt(parseInt(VWIDTH) * 9 / 16);
@@ -474,6 +432,7 @@ $(window).resize(function() {
         $("#ytapiplayer").attr("height", VHEIGHT);
     }
 });
+*/
 
 /* load channel */
 
@@ -482,11 +441,12 @@ var m = loc.match(/\/r\/([a-zA-Z0-9-_]+)$/);
 if(m) {
     CHANNEL.name = m[1];
 }
+/*
 else {
     var main = $("#main");
     var container = $("<div/>").addClass("container").insertBefore(main);
     var row = $("<div/>").addClass("row").appendTo(container);
-    var div = $("<div/>").addClass("span6").appendTo(row);
+    var div = $("<div/>").addClass("col-lg-6 col-md-6").appendTo(row);
     main.css("display", "none");
     var label = $("<label/>").text("Enter Channel:").appendTo(div);
     var entry = $("<input/>").attr("type", "text").appendTo(div);
@@ -499,6 +459,7 @@ else {
         }
     });
 }
+*/
 
 /* custom footer */
 $("#sitefooter").load("footer.html");
diff --git a/www/assets/js/util.js b/www/assets/js/util.js
index d91b83e8..84b5b7a0 100644
--- a/www/assets/js/util.js
+++ b/www/assets/js/util.js
@@ -1964,3 +1964,22 @@ function filterChannelLog() {
 
     $("#chanlog_contents").text(include.join("\n"));
 }
+
+function makeModal() {
+    var wrap = $("<div/>").addClass("modal fade");
+    var dialog = $("<div/>").addClass("modal-dialog").appendTo(wrap);
+    var content = $("<div/>").addClass("modal-content").appendTo(dialog);
+
+    var head = $("<div/>").addClass("modal-header").appendTo(content);
+    $("<button/>").addClass("close")
+        .attr("data-dismiss", "modal")
+        .attr("data-hidden", "true")
+        .html("&times;")
+        .appendTo(head);
+
+    wrap.on("hidden", function () {
+        unhidePlayer();
+        wrap.remove();
+    });
+    return wrap;
+}
diff --git a/www/css/cytube.css b/www/css/cytube.css
index dbb0d445..b0eaf4a2 100644
--- a/www/css/cytube.css
+++ b/www/css/cytube.css
@@ -402,7 +402,7 @@
 
 .profile-box {
     z-index: 9999;
-    position: absolute;
+    position: fixed;
     border: 1px solid #aaaaaa;
     border-radius: 5px;
     background-color: #ffffff;