Add synchtube-fluid and hd layout

www/assets/js/callbacks.js

@@ -1,5 +1,4 @@
 /*
-return null;
 The MIT License (MIT)
 Copyright (c) 2013 Calvin Montgomery
 
@@ -13,32 +12,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 Callbacks = {
 
     error: function (reason) {
-        // Don't show the error for when the server goes down
-        if(reason && reason.returnValue === true)
-            return;
-
-        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."+
-                       "Try going to the "+
-                       "'Options' menu and enabling 'Alternate socket "+
-                       " connection'.  If that doesn't help, talk to "+
-                       "someone on <a href='http://webchat.6irc.net/?"+
-                       "channels=synchtube'>IRC</a>").appendTo(d);
-        var data = {
-            iourl: IO_URL,
-            weburl: WEB_URL,
-            transports: io.transports,
-            fallback: USEROPTS.altsocket,
-            reason: reason
-        };
-
-        var r = JSON.stringify(data);
-        $("<em/>").text("When asking for help, give the following "+
-                        "information to an administrator:").appendTo(d);
-        $("<code/>").text(r).appendTo(d)
-            .css("white-space", "pre-wrap");
+        window.SOCKET_ERROR_REASON = reason;
     },
 
     /* fired when socket connection completes */
@@ -1041,6 +1015,15 @@ setupCallbacks = function() {
 }
 
 try {
+    if (typeof io === "undefined") {
+        makeAlert("Uh oh!", "It appears the connection to <code>" + IO_URL + "</code> " +
+                            "has failed.  If this error persists, a firewall or " +
+                            "antivirus is likely blocking the connection, or the " +
+                            "server is down.", "alert-danger")
+            .appendTo($("#announcements"));
+        throw false;
+    }
+
     if (NO_WEBSOCKETS || USEROPTS.altsocket) {
         var i = io.transports.indexOf("websocket");
         if (i >= 0) {
@@ -1054,5 +1037,7 @@ try {
     socket = io.connect(IO_URL, opts);
     setupCallbacks();
 } catch (e) {
-    Callbacks.disconnect();
+    if (e) {
+        Callbacks.disconnect();
+    }
 }

www/assets/js/util.js

@@ -14,19 +14,22 @@ function makeAlert(title, text, klass) {
         klass = "alert-info";
     }
 
+    var wrap = $("<div/>").addClass("col-md-12");
+
     var al = $("<div/>").addClass("alert")
         .addClass(klass)
-        .html(text);
+        .html(text)
+        .appendTo(wrap);
     $("<br/>").prependTo(al);
     $("<strong/>").text(title).prependTo(al);
     $("<button/>").addClass("close pull-right").html("&times;")
         .click(function() {
             al.hide("fade", function() {
-                al.remove();
+                wrap.remove();
             });
         })
         .prependTo(al);
-    return al;
+    return wrap;
 }
 
 function formatURL(data) {
@@ -653,6 +656,9 @@ function applyOpts() {
         case "fluid":
             fluidLayout();
             break;
+        case "hd":
+            hdLayout();
+            break;
         default:
             break;
     }
@@ -1284,6 +1290,7 @@ function formatChatMessage(data) {
             .addClass(data.meta.superadminflair.labelclass);
         $("<span/>").addClass(data.meta.superadminflair.icon)
             .addClass("glyphicon")
+            .css("margin-right", "3px")
             .prependTo(name);
     }
 
@@ -1359,6 +1366,8 @@ function addChatMessage(data) {
 
 function fluidLayout() {
     $(".container").removeClass("container").addClass("container-fluid");
+    $("footer .container").removeClass("container-fluid").addClass("container");
+    $("body").addClass("fluid");
     resizeStuff();
 }
 
@@ -1367,6 +1376,62 @@ function synchtubeLayout() {
     $("#rightcontrols").detach().insertBefore($("#leftcontrols"));
     $("#rightpane").detach().insertBefore($("#leftpane"));
     $("#userlist").css("float", "right");
+    $("body").addClass("synchtube");
+}
+
+function hdLayout() {
+    var videowrap = $("#videowrap"),
+        chatwrap = $("#chatwrap"),
+        playlist = $("#rightpane")
+
+    videowrap.detach().insertAfter($("#drinkbar"))
+        .removeClass()
+        .addClass("col-md-8 col-md-offset-2");
+
+    playlist.detach().insertBefore(chatwrap)
+        .removeClass()
+        .addClass("col-md-6");
+
+    chatwrap.removeClass()
+        .addClass("col-md-6");
+
+    var ch = "320px";
+    $("#messagebuffer").css("max-height", ch);
+    $("#userlist").css("max-height", ch);
+    $("#queue").css("max-height", "312px");
+
+    $("#leftcontrols").detach()
+        .insertAfter(chatwrap)
+        .removeClass()
+        .addClass("col-md-6");
+
+    $("#playlistmanagerwrap").detach()
+        .insertBefore($("#leftcontrols"))
+        .css("margin-top", "0")
+        .removeClass()
+        .addClass("col-md-6");
+
+    $("#showplaylistmanager").addClass("btn-sm");
+
+    var plcontrolwrap = $("<div/>").addClass("col-md-12")
+        .prependTo($("#rightpane-inner"));
+
+    $("#plcontrol").detach().appendTo(plcontrolwrap);
+    $("#rightcontrols .btn-group.pull-right").detach()
+        .appendTo(plcontrolwrap);
+
+    $("#controlswrap").remove();
+    $("#leftpane").remove();
+
+    $("#pollwrap").detach()
+        .insertAfter($("#leftcontrols"))
+        .removeClass()
+        .addClass("col-md-6 col-md-offset-6");
+
+    $("nav.navbar-fixed-top").removeClass("navbar-fixed-top");
+    $("#mainpage").css("padding-top", "0");
+
+    $("body").addClass("hd");
 }
 
 function chatOnly() {
@@ -1380,14 +1445,15 @@ function chatOnly() {
 }
 
 function resizeStuff() {
-    // Only execute if we are on a fluid layout
-    if ($(".container-fluid").length === 0) {
-        return;
-    }
     VWIDTH = $("#videowrap").width() + "";
     VHEIGHT = Math.floor(parseInt(VWIDTH) * 9 / 16) + "";
     $("#ytapiplayer").width(VWIDTH).height(VHEIGHT);
 
+    // Only execute if we are on a fluid layout
+    if ($("body").hasClass("fluid")) {
+        return;
+    }
+
     var h = parseInt(VHEIGHT) - 33;
     $("#messagebuffer").height(h);
     $("#userlist").height(h);