Add synchtube-fluid and hd layout

templates/channel-hd.jade

@@ -3,6 +3,7 @@ html(lang="en")
   head
     include head
     mixin head()
+    link(href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", rel="stylesheet")
   body
     #wrap
       nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
@@ -12,97 +13,190 @@ html(lang="en")
           - var cname = "/r/" + channelName
           ul.nav.navbar-nav
             mixin navdefaultlinks(cname)
-            li: a(href="javascript:showUserOptions()") Options
+            li: a(href="#", onclick="javascript:showUserOptions()") Options
+            li: a#showchansettings(href="#", onclick="javascript:$('#channeloptions').modal()") Channel Settings
           mixin navloginlogout(cname)
       section#mainpage
         .container
-          #motdwrap.col-lg-12.col-md-12
+          #motdrow.row
-            #motd
+            .col-lg-12.col-md-12
-          #announcements.col-lg-12.col-md-12
+              #motdwrap.well
-            .alert.alert-info Demo announcement
+                button#togglemotd.close.pull-right(type="button")
-          #drinkbar.col-lg-12.col-md-12
+                  span.glyphicon.glyphicon-minus
-            #drinkcount
+                #motd
-          #videowrap.hd-video-wrap.col-lg-8.col-lg-offset-2.col-md-8.col-md-offset-2
+                .clear
-          #videoopts.col-lg-8.col-lg-offset-2.col-md-8.col-md-offset-2
+          #announcements.row
-            button#voteskip.btn.btn-sm.btn-default Voteskip
+          #drinkbarwrap.row
-          .vertical-spacer.col-lg-8.col-md-8
+            #drinkbar.col-lg-12.col-md-12
-          #playlistwrap.col-lg-6.col-md-6
+              h1#drinkcount
-            #playlistheader
+          #videowrap.col-md-8.col-md-offset-2
-              button#showimport.btn.btn-default.btn-xs.btn-block(data-toggle="collapse", data-target="#playlistcontrols") Playlist Controls
+            p#currenttitle Nothing Playing
-              #playlistcontrols.collapse
+            #ytapiplayer
-                strong Add from URL
+          #rightcontrols.col-md-8.col-md-offset-2
-                #fromurl.input-group
+            .btn-group.pull-right
-                  input#urlinput.form-control(type="text")
+              button#mediarefresh.btn.btn-sm.btn-default(title="Reload the video player")
-                  .input-group-btn
+                span.glyphicon.glyphicon-retweet
-                    button#queuenext.btn.btn-default(type="button") Next
+              button#getplaylist.btn.btn-sm.btn-default(title="Retrieve playlist links")
-                    button#queueend.btn.btn-default(type="button") End
+                span.glyphicon.glyphicon-link
-                hr
+              button#voteskip.btn.btn-sm.btn-default(title="Voteskip")
-                #customembed
+                span.glyphicon.glyphicon-step-forward
-                  strong Custom Embed
+          #main.row
-                  br
-                  | Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags)
-                  textarea#customembedcode.form-control.input-block-level(rows="3")
-                  .input-group
-                    input#customembedtitle.form-control.input-block-level(placeholder="(Optional) Title")
-                    .input-group-btn
-                      button#customqueuenext.btn.btn-default(type="button") Next
-                      button#customqueueend.btn.btn-default(type="button") End
-                hr
-                #misccontrols
-                  strong Additional Controls
-                  button#clearplaylist.btn.btn-xs.btn-default.btn-block(type="button") Clear Playlist
-                  button#shuffleplaylist.btn.btn-xs.btn-default.btn-block(type="button") Shuffle Playlist
-                hr
 
-              button#showsearch.btn.btn-default.btn-xs.btn-block(data-toggle="collapse", data-target="#fromsearch") Search Library/YouTube
+          #playlistrow.row
-              #fromsearch.collapse
+            #rightpane.col-md-6
-                .input-group
+              #rightpane-inner.row
-                  input#ytsearchtext.form-control(type="text")
+                .col-md-12
-                  .input-group-btn
+                  #plcontrol.btn-group
-                    button#libsearchbtn.btn.btn-default(type="button") Library
+                    button#showsearch.btn.btn-sm.btn-default(title="Search for a video", data-toggle="collapse", data-target="#searchcontrol")
-                    button#ytsearchbtn.btn.btn-default(type="button") YouTube
+                      span.glyphicon.glyphicon-search
-                hr
+                    button#showmediaurl.btn.btn-sm.btn-default(title="Add video from URL", data-toggle="collapse", data-target="#addfromurl")
-                  #searchresultswrap(style="display: none")
+                      span.glyphicon.glyphicon-plus
-                    #searchresults
+                    button#showcustomembed.btn.btn-sm.btn-default(title="Embed a custom frame", data-toggle="collapse", data-target="#customembed")
-                    hr
+                      span.glyphicon.glyphicon-th-large
-            ul#playlist
+                    button#clearplaylist.btn.btn-sm.btn-default(title="Clear the playlist")
-              li
+                      span.glyphicon.glyphicon-trash
-                .btn-group.video-buttons
+                    button#shuffleplaylist.btn.btn-sm.btn-default(title="Shuffle the playlist")
-                  button.btn.btn-xs.btn-default
+                      span.glyphicon.glyphicon-sort
-                    span.glyphicon.glyphicon-play
+                    button#qlockbtn.btn.btn-sm.btn-danger(title="Playlist locked")
-                  button.btn.btn-xs.btn-default
+                      span.glyphicon.glyphicon-lock
-                    span.glyphicon.glyphicon-share-alt
+                #addfromurl.collapse.plcontrol-collapse.col-lg-12.col-md-12
-                  button.btn.btn-xs.btn-default
+                  .vertical-spacer
-                    span.glyphicon.glyphicon-flag
+                  .input-group
-                  button.btn.btn-xs.btn-default
+                    input#mediaurl.form-control(type="text", placeholder="Media URL")
-                    span.glyphicon.glyphicon-trash
+                    span.input-group-btn
-                a.video-title(href="#") Some Video Thing
+                      button#queue_next.btn.btn-default Next
-                span.video-time 02:00
+                    span.input-group-btn
-                span.clear
+                      button#queue_end.btn.btn-default At End
-              li
+                #searchcontrol.collapse.plcontrol-collapse.col-lg-12.col-md-12
-                a.video-title(href="#") Some Video Thing
+                  .vertical-spacer
-                span.video-time 02:00
+                  .input-group
-                span.clear
+                    input#library_query.form-control(type="text", placeholder="Search query")
-              li
+                    span.input-group-btn
-                a.video-title(href="#") Some Video Thing
+                      button#library_search.btn.btn-default Library
-                span.video-time 02:00
+                    span.input-group-btn
-                span.clear
+                      button#youtube_search.btn.btn-default YouTube
-          #chatwrap.col-lg-6.col-md-6
+                  ul#library.videolist.col-lg-12.col-md-12
-            #chatheader
+                #customembed.collapse.plcontrol-collapse.col-lg-12.col-md-12
-              span Not connected
+                  .vertical-spacer
-            ul#chatlist.pull-right
+                  .input-group
-              li Test
+                    input#customembed-title.form-control(type="text", placeholder="Title (optional)")
-              li Test 2
+                    span.input-group-btn
-            #chatbuffer.linewrap.
+                      button#ce_queue_next.btn.btn-default Next
-              sdfngjksdfngjnsdjkgfnjklsdngjksdngfsnjdfg
+                    span.input-group-btn
-              sdgfsdjifgjksdfngjksdngfjksdfnjgfknsdjkgfnsdgsdbfasdhbfhjbasdhjfbsdhjbghjsdfbghjsdbhjgbsdhjfbghjdsfbghj
+                      button#ce_queue_end.btn.btn-default At End
-              fsdfgfnjksdgjnsdjgnfjksngjksngjnksjgnsjnfgsd
+                  | Paste the embed code below and click Next or At End.
-              gfsnjgfjsnjkg
+                  | Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags.
-            input#chatline.form-control.input-block-level(type="text")
+                  textarea#customembed-content.input-block-level.form-control(rows="3")
+                #queuefail.col-lg-12.col-md-12
+                  .vertical-spacer
+                .col-lg-12.col-md-12
+                  ul#queue.videolist
+                  #plmeta
+                    span#plcount 0 items
+                    span#pllength 00:00:00
+            #chatwrap.col-md-6
+              #chatheader
+                i#userlisttoggle.glyphicon.glyphicon-chevron-up.pull-left.pointer(title="Show/Hide Userlist")
+                span#usercount.pointer Not Connected
+                span#modflair.label.label-default.pull-right.pointer M
+                span#adminflair.label.label-default.pull-right.pointer A
+              #userlist
+              #messagebuffer
+              input#chatline.form-control(type="text", maxlength="240", style="display: none")
+              #guestlogin.input-group
+                span.input-group-addon Guest login
+                input#guestname.form-control(type="text", placeholder="Name")
+              #leftcontrols.col-lg-5.col-md-5
+                button#newpollbtn.btn.btn-sm.btn-default New Poll
+            #leftpane.col-lg-5.col-md-5
+              #leftpane-inner.row
+                #pollwrap.col-lg-12.col-md-12
+                #playlistmanagerwrap.col-lg-12.col-md-12
+                  button#showplaylistmanager.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistmanager") Playlist Manager
+                  #playlistmanager.collapse
+                    .row.vertical-spacer
+                      .col-lg-12.col-md-12
+                        .input-group
+                          input#userpl_name.form-control(type="text", placeholder="Playlist Name")
+                          span.input-group-btn
+                            button#userpl_save.btn.btn-default Save
+                      ul#userpl_list.col-lg-12.col-md-12
+          #resizewrap.row
+            .col-lg-5.col-md-5
+            #videowidth.col-lg-7.col-md-7
+          #sitefooter
+            include pagefooter
+    #useroptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
+      .modal-dialog
+        .modal-content
+          .modal-header
+            button.close(data-dismiss="modal", aria-hidden="true") &times;
+            h4 User Preferences
+            ul.nav.nav-tabs
+              li: a(href="#us-general", data-toggle="tab") General
+              li: a(href="#us-playback", data-toggle="tab") Playback
+              li: a(href="#us-chat", data-toggle="tab") Chat
+              li: a(href="#us-mod", data-toggle="tab", style="") Moderator
+          .modal-body
+            .tab-content
+              include useroptions
+              mixin us-general()
+              mixin us-playback()
+              mixin us-chat()
+              mixin us-mod()
+          .modal-footer
+            button.btn.btn-primary(type="button", data-dismiss="modal", onclick="javascript:saveUserOptions()") Save
+            button.btn.btn-default(type="button", data-dismiss="modal") Close
+    #channeloptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
+      .modal-dialog
+        .modal-content
+          .modal-header
+            button.close(data-dismiss="modal", aria-hidden="true") &times;
+            h4 Channel Settings
+            ul.nav.nav-tabs
+              li: a(href="#cs-miscoptions", data-toggle="tab") General Settings
+              li: a(href="#cs-adminoptions", data-toggle="tab") Admin Settings
+              li.dropdown
+                a#cs-edit-dd-toggle(href="#", data-toggle="dropdown") Edit
+                  span.caret
+                ul.dropdown-menu
+                  li: a(href="#cs-chatfilters", data-toggle="tab", onclick="javascript:socket.emit('requestChatFilters')") Chat Filters
+                  li: a(href="#cs-motdeditor", data-toggle="tab", tabindex="-1") MOTD
+                  li: a(href="#cs-csseditor", data-toggle="tab", tabindex="-1") CSS
+                  li: a(href="#cs-jseditor", data-toggle="tab", tabindex="-1") Javascript
+                  li: a(href="#cs-permedit", data-toggle="tab", tabindex="-1") Permissions
+                  li: a(href="#cs-chanranks", data-toggle="tab", tabindex="-1", onclick="javascript:socket.emit('requestChannelRanks')") Moderators
+              li: a(href="#cs-banlist", data-toggle="tab", tabindex="-1", onclick="javascript:socket.emit('requestBanlist')") Ban list
+              li: a(href="#cs-chanlog", data-toggle="tab", onclick="javascript:socket.emit('readChanLog')") Log
+          .modal-body
+            .tab-content
+              include channeloptions
+              mixin miscoptions()
+              mixin adminoptions()
+              mixin motdeditor()
+              mixin csseditor()
+              mixin jseditor()
+              mixin banlist()
+              mixin recentjoins()
+              mixin chanranks()
+              mixin chatfilters()
+              mixin chanlog()
+              mixin permeditor()
+          .modal-footer
+            button.btn.btn-default(type="button", data-dismiss="modal") Close
     include footer
     mixin footer()
-    script(src="#{ioUrl}/socket.io/socket.io.js")
+    script(src=sioSource)
-    script(type="text/javascript").
+    script(src="/assets/js/data.js")
-      var IOSERVER = "#{ioUrl}";
+    script(src="/sioconfig")
-      var SOCKET = io.connect(IOSERVER);
+    script(src="/assets/js/util.js")
-    script(src="/js/functions.js")
+    script(src="/assets/js/player.js")
+    script(src="/assets/js/paginator.js")
+    script(src="/assets/js/ui.js")
+    script(src="/assets/js/callbacks.js")
+    script(defer, src="https://www.youtube.com/iframe_api")
+    script(defer, src="//api.dmcdn.net/all.js")
+    script(defer, src="/assets/js/jwplayer.js")
+    script(defer, src="/assets/js/sc.js")
+    script(defer, src="/assets/js/froogaloop.min.js")
+    script(defer, src="/assets/js/swf.js")

templates/useroptions.jade

@@ -31,7 +31,7 @@ mixin us-general
           select#us-theme.form-control
             option(value="default") Default
             option(value="/css/bootstrap-theme.min.css") Bootstrap
-            option(value="/css/dark.css") Dark
+            //option(value="/css/dark.css") Dark
       .form-group
         label.control-label.col-sm-4(for="#us-layout") Layout
         .col-sm-8
@@ -39,6 +39,8 @@ mixin us-general
             option(value="default") Compact
             option(value="synchtube") Synchtube (flipped)
             option(value="fluid") Fluid
+            option(value="synchtube-fluid") Synchtube + Fluid
+            option(value="hd") HD
       .col-sm-4
       .col-sm-8
         p.text-danger Changing layouts may require refreshing to take effect.

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
+        window.SOCKET_ERROR_REASON = reason;
-        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");
     },
 
     /* 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);

www/css/cytube.css

@@ -17,11 +17,6 @@
     margin-top: 20px;
 }
 
-#videowrap.hd-video-wrap {
-    height: 410px;
-    margin-bottom: 10px;
-}
-
 .vertical-spacer {
     margin-top: 10px;
 }