From 3600a3114ab5f848ef8d3c260c2aec31bea7fbdf Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Wed, 1 May 2013 13:39:01 -0500
Subject: [PATCH] Transition channel page away from index.html

---
 package.json               |   2 +-
 server.js                  |   4 +-
 www/assets/js/client.js    |  79 ++++------
 www/assets/js/functions.js |  14 +-
 www/channel.html           | 300 +++++++++++++++++++++++++++++++++++++
 www/index.html             |  51 +++++--
 6 files changed, 382 insertions(+), 68 deletions(-)
 create mode 100644 www/channel.html

diff --git a/package.json b/package.json
index 5a3f9bcf..cc5b9c7a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "author": "Calvin Montgomery",
     "name": "CyTube",
     "description": "Online media synchronizer and chat",
-    "version": "1.5.2",
+    "version": "1.5.3",
     "repository": {
         "url": "http://github.com/calzoneman/sync"
     },
diff --git a/server.js b/server.js
index 23ffa9c7..7fd1d33f 100644
--- a/server.js
+++ b/server.js
@@ -9,7 +9,7 @@ The above copyright notice and this permission notice shall be included in all c
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-const VERSION = "1.5.2";
+const VERSION = "1.5.3";
 
 var fs = require("fs");
 var Logger = require("./logger.js");
@@ -26,7 +26,7 @@ app.get("/r/:channel(*)", function(req, res, next) {
         res.redirect("/" + param);
     }
     else {
-        res.sendfile(__dirname + "/www/index.html");
+        res.sendfile(__dirname + "/www/channel.html");
     }
 });
 
diff --git a/www/assets/js/client.js b/www/assets/js/client.js
index 5eb74724..9f5b0559 100644
--- a/www/assets/js/client.js
+++ b/www/assets/js/client.js
@@ -29,6 +29,7 @@ var VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//670
 var VHEIGHT = "377";
 var IGNORED = [];
 var KICKED = false;
+var CHANNEL = "";
 var uname = readCookie("sync_uname");
 var session = readCookie("sync_session");
 
@@ -46,6 +47,7 @@ var USEROPTS = {
     css: readCookie("cytube_css") || "",
     layout: readCookie("cytube_layout") || "default",
     synch: parseBool(readCookie("cytube_synch")) || true,
+    hidevid: parseBool(readCookie("cytube_hidevid")) || false,
     modhat: parseBool(readCookie("cytube_modhat")) || false
 };
 applyOpts();
@@ -81,60 +83,38 @@ $(window).resize(function() {
     $("#ytapiplayer").attr("width", VWIDTH);
 });
 
-var params = {};
-if(window.location.search) {
-    var parameters = window.location.search.substring(1).split("&");
-    for(var i = 0; i < parameters.length; i++) {
-        var s = parameters[i].split("=");
-        if(s.length != 2)
-            continue;
-        params[s[0]] = s[1];
-    }
+// Match URLs of the form http://site.tld/r/channel
+var loc = document.location+"";
+var m = loc.match(/\/r\/([a-zA-Z0-9]+)$/);
+if(m) {
+    CHANNEL = m[1];
 }
-
-if(params["novideo"] != undefined) {
-    $("#videodiv").remove();
-}
-
-if(params["channel"] == undefined) {
-    // Match URLs of the form http://site.tld/r/channel
-    var loc = document.location+"";
-    var m = loc.match(/\/r\/([a-zA-Z0-9]+)$/);
-    if(m) {
-        socket.emit("joinChannel", {
-            name: m[1]
-        });
-    }
-    else {
-
-        var main = $($(".container")[1]);
-        var container = $("<div/>").addClass("container").insertBefore(main);
-        var row = $("<div/>").addClass("row").appendTo(container);
-        var div = $("<div/>").addClass("span6").appendTo(row);
-        main.css("display", "none");
-        var label = $("<label/>").text("Enter Channel:").appendTo(div);
-        var entry = $("<input/>").attr("type", "text").appendTo(div);
-        entry.keydown(function(ev) {
-            if(ev.keyCode == 13) { document.location = document.location + "?channel=" + entry.val();
-                socket.emit("joinChannel", {
-                    name: entry.val()
-                });
-                container.remove();
-                main.css("display", "");
-            }
-        });
-    }
-}
-else if(!params["channel"].match(/^[a-zA-Z0-9]+$/)) {
-    $("<div/>").addClass("alert alert-error")
-        .insertAfter($(".row")[0])[0]
-        .innerHTML = "<h3>Invalid Channel Name</h3><p>Channel names must conain only numbers and letters</p>";
-
+else {
+    var main = $($(".container")[1]);
+    var container = $("<div/>").addClass("container").insertBefore(main);
+    var row = $("<div/>").addClass("row").appendTo(container);
+    var div = $("<div/>").addClass("span6").appendTo(row);
+    main.css("display", "none");
+    var label = $("<label/>").text("Enter Channel:").appendTo(div);
+    var entry = $("<input/>").attr("type", "text").appendTo(div);
+    entry.keydown(function(ev) {
+        var host = ""+document.location;
+        host = host.replace("http://", "");
+        host = host.substring(0, host.indexOf("/"));
+        if(ev.keyCode == 13) {
+            document.location = "http://" + host + "/r/" + entry.val();
+            socket.emit("joinChannel", {
+                name: entry.val()
+            });
+            container.remove();
+            main.css("display", "");
+        }
+    });
 }
 
 socket.on("connect", function() {
     socket.emit("joinChannel", {
-        name: params["channel"]
+        name: CHANNEL
     });
     if(uname && session) {
         socket.emit("login", {
@@ -146,7 +126,6 @@ socket.on("connect", function() {
         .text("Connected")
         .appendTo($("#messagebuffer"));
     $("#messagebuffer").scrollTop($("#messagebuffer").prop("scrollHeight"));
-    setTimeout(function() { $("#reconnect_box").remove(); }, 3000);
 });
 
 
diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js
index 9d41b20a..9cd9f87b 100644
--- a/www/assets/js/functions.js
+++ b/www/assets/js/functions.js
@@ -193,7 +193,7 @@ function formatChatMessage(data) {
     if(uname) {
         if(data.msg.toUpperCase().indexOf(uname.toUpperCase()) != -1) {
             div.addClass("nick-highlight");
-            if(!FOCUSED) {
+            if(!FOCUSED && !TITLE_BLINK) {
                 TITLE_BLINK = setInterval(function() {
                     if(document.title == "*Chat*")
                         document.title = PAGETITLE;
@@ -841,6 +841,7 @@ function handleRankChange() {
 
 function onWindowFocus() {
     clearInterval(TITLE_BLINK);
+    TITLE_BLINK = false;
     document.title = PAGETITLE;
 }
 
@@ -1048,6 +1049,12 @@ function showUserOpts() {
     synch.prop("checked", USEROPTS.synch);
     addOption("Synch", synchcontainer);
 
+    var vidcontainer = $("<label/>").addClass("checkbox")
+        .text("Hide Video");
+    var hidevid = $("<input/>").attr("type", "checkbox").appendTo(vidcontainer);
+    hidevid.prop("checked", USEROPTS.hidevid);
+    addOption("Hide Video", vidcontainer);
+
     if(RANK >= Rank.Moderator) {
         $("<hr>").appendTo(form);
         var modhatcontainer = $("<label/>").addClass("checkbox")
@@ -1067,6 +1074,7 @@ function showUserOpts() {
         USEROPTS.css    = usercss.val();
         USEROPTS.layout = layoutselect.val();
         USEROPTS.synch  = synch.prop("checked");
+        USEROPTS.hidevid= hidevid.prop("checked");
         if(RANK >= Rank.Moderator) {
             USEROPTS.modhat = modhat.prop("checked");
         }
@@ -1123,4 +1131,8 @@ function applyOpts() {
         default:
             break;
     }
+
+    if(USEROPTS.hidevid) {
+        $("#videodiv").remove();
+    }
 }
diff --git a/www/channel.html b/www/channel.html
new file mode 100644
index 00000000..920e77a5
--- /dev/null
+++ b/www/channel.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>CyTube</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Calvin 'calzoneman' Montgomery">
+
+    <link href="./assets/css/bootstrap.css" rel="stylesheet">
+    <link href="./assets/css/ytsync.css" rel="stylesheet">
+    <style>
+      body {
+        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+      }
+    </style>
+    <link href="./assets/css/bootstrap-responsive.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="wrapper">
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="index.html">CyTube</a>
+          <div class="">
+            <ul class="nav">
+              <li class="active"><a href="index.html">Home</a></li>
+              <li><a href="help.html">Help</a></li>
+              <li><a href="javascript:void(0)" id="optlink">Options</a></li>
+            </ul>
+            <div class="navbar-form pull-right" id="loginform">
+                <input type="text" id="guestname" placeholder="Name">
+                <button class="btn" id="guestlogin">Guest Login</button>
+                <button class="btn" id="login">Login/Register</button>
+            </div>
+            <div class="navbar-form pull-right" id="logoutform" style="display: none;">
+                <button class="btn" id="logout">Logout</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+        <div class="row">
+            <div id="loggedin" class="span6" style="display: none;">
+                <h3 id="welcome"></h3>
+            </div>
+        </div>
+        <div class="row" id="motdrow">
+            <div class="span10 offset1 well">
+                <p id="motd"></p>
+            </div>
+            <div class="span12 drinkbar">
+                <h1 id="drinkcount"></h1>
+            </div>
+        </div>
+        <div class="row" id="main" style="margin-top: 20px;">
+            <div class="span5" id="chatdiv">
+                <p id="usercount"></p>
+                <div id="userlist">
+                </div>
+                <div id="messagebuffer">
+                </div>
+                <input type="text" id="chatline" class="span5">
+            </div>
+            <div class="span7" id="videodiv">
+                <p id="currenttitle">Currently Playing: </p>
+                <div id="ytapiplayer">
+                </div>
+            </div>
+        </div>
+        <div class="row" id="queuerow">
+            <div class="span5">
+                <div class="row-fluid">
+                    <div class="span12" id="pollcontainer">
+                    </div>
+                    <div class="span7" style="margin-left: 0;">
+                        <input type="text" id="library_query" class="input-block-level" placeholder="Search Query">
+                    </div>
+                    <div class="span5 btn-group">
+                        <button class="btn" id="library_search">Library</button>
+                        <button class="btn" id="youtube_search">YouTube</button>
+                    </div>
+                    <div class="span12" style="margin-left: 0;">
+                        <ul id="library" class="videolist">
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="span7" id="queuediv">
+                <div class="row-fluid" id="qclear">
+                    <div class="span12"></div>
+                </div>
+                <div id="playlist_controls"style="display: none;">
+                    <div class="row-fluid">
+                        <div class="span8">
+                            <input type="text" id="mediaurl" class="input-block-level" placeholder="Media URL">
+                        </div>
+                        <div class="span4 btn-group">
+                            <button class="btn" id="queue_next">Next</button>
+                            <button class="btn" id="queue_end">End</button>
+                        </div>
+                    </div>
+                </div>
+                <button class="btn btn-block" id="voteskip">Voteskip</button>
+                <div class="row-fluid">
+                    <ul id="queue" class="span12 videolist">
+                    </ul>
+                    <div class="span12 well well-small" id="plmeta">
+                        <span id="plcount"></span>
+                        <span id="pllength"></span>
+                        <div class="clear: both;"></div>
+                    </div>
+                    <button class="btn btn-danger btn-block" id="qlockbtn" style="display:none;">Unlock Queue</button>
+                    <div class="span12 btn-group" style="margin: 0">
+                        <button class="btn" id="getplaylist" style="width: 100%">Get Playlist URLs</button>
+                        <button class="btn" id="clearplaylist" style="width: 33%; display: none;">Clear Playlist</button>
+                        <button class="btn" id="shuffleplaylist" style="width: 33%; display: none;">Shuffle Playlist</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row" style="display: none;" id="modnav">
+            <div class="span12" id="modtabs">
+                <ul class="nav nav-tabs">
+                    <li class="active">
+                        <a href="javascript:void(0)" id="show_chancontrols">Channel Controls</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0)" id="show_banlist">Ban List</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0)" id="show_loginlog">Connection Log</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0)" id="show_motdeditor">MOTD</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0)" id="show_filtereditor">Chat Filters</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0)" id="show_acl">Channel Ranks</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="row modonly" style="display: none" id="chancontrols">
+            <div class="span12">
+                <form action="javascript:void(0)">
+                    <fieldset>
+                        <div class="span5">
+                            <label>When the queue is open:</label>
+                            <label class="checkbox">
+                                <input type="checkbox" id="opt_qopen_allow_qnext">
+                                Allow anyone to Queue Next
+                            </label>
+                            <label class="checkbox">
+                                <input type="checkbox" id="opt_qopen_allow_move">
+                                Allow anyone to move videos
+                            </label>
+                            <label class="checkbox">
+                                <input type="checkbox" id="opt_qopen_allow_delete">
+                                Allow anyone to delete videos
+                            </label>
+                            <label class="checkbox">
+                                <input type="checkbox" id="opt_qopen_allow_playnext">
+                                Allow anyone to jump to a video
+                            </label>
+                        </div>
+                        <div class="span5">
+                            <label>Page Title
+                                <input type="text" id="opt_pagetitle" placeholder="Sync" class="pull-right">
+                            </label>
+                            <br>
+                            <label>Custom CSS
+                                <input type="text" id="opt_customcss" class="pull-right">
+                            </label>
+                            <br>
+                            <label>Custom JS<sup class="text-warning">BETA</sup>
+                                <input type="text" id="opt_customjs" class="pull-right">
+                            </label>
+                            <br>
+                            <label class="checkbox">
+                                <input type="checkbox" id="opt_allow_voteskip">
+                                Allow voteskip
+                            </label>
+                            <br>
+                            <label>Voteskip Ratio
+                                <input type="text" id="opt_voteskip_ratio" class="pull-right">
+                            </label>
+                            <br>
+                            <label class="checkbox">
+                                <input type="checkbox" id="opt_chat_antiflood">
+                                Prevent chat flood
+                            </label>
+                        </div>
+
+                        <div class="span10">
+                            <button class="btn btn-primary" id="opt_submit">Save</button>
+                        </div>
+                    </fieldset>
+                </form>
+            </div>
+        </div>
+        <div class="row modonly" id="banlist" style="display: none;">
+            <div class="span12">
+                <table class="table table-striped">
+                    <thead>
+                        <th></th>
+                        <th>IP</th>
+                        <th>Name</th>
+                        <th>Banned By</th>
+                    </thead>
+                </table>
+            </div>
+        </div>
+        <div class="row modonly" id="loginlog" style="display: none;">
+            <div class="span12">
+                <table class="table table-striped">
+                    <thead>
+                        <th></th>
+                        <th>IP</th>
+                        <th>Names</th>
+                    </thead>
+                </table>
+            </div>
+        </div>
+        <div class="row modonly" id="motdeditor" style="display: none;">
+            <div class="span12">
+                <textarea rows="10" id="motdtext"></textarea>
+                <button class="btn btn-primary" id="updatemotd">Update</button>
+            </div>
+        </div>
+        <div class="row modonly" id="filtereditor" style="display: none;">
+            <div class="span12">
+                <table class="table table-striped">
+                    <thead>
+                        <th></th>
+                        <th>Name</th>
+                        <th>Regex</th>
+                        <th>Flags</th>
+                        <th>Replacement</th>
+                        <th>Active</th>
+                    </thead>
+                </table>
+            </div>
+            <div class="span12">
+                <p>Multiple filters can be added at once below.  They should contain 3-4 fields separated by whitespace: (name) regex flags replacement.<br>If any field contains whitespace, it must be escaped by a backslash, for example "what\ a\ story\ mark"</p>
+                <textarea rows="10" class="input-block-level" id="multifiltereditor"></textarea>
+                <button class="btn btn-primary" id="multifilter">Update Multiple</button>
+            </div>
+        </div>
+        <div class="row modonly" id="channelranks" style="display: none;">
+            <div class="span12">
+                <table class="table table-striped">
+                    <thead>
+                        <th>Name</th>
+                        <th>Rank</th>
+                        <th>Control</th>
+                    </thead>
+                </table>
+            </div>
+        </div>
+    </div> <!-- /container -->
+    <div class="push"></div>
+    <div id="sitefooter">
+    </div>
+    </div>
+    <div id="footer">
+        <p class="muted">
+        CyTube Software Copyright &copy; 2013 Calvin Montgomery&nbsp;&middot;&nbsp;Available for free on <a href="http://github.com/calzoneman/sync">GitHub</a>&nbsp;&middot;
+        <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=5Y7PUVVGVSEWG&lc=US&item_name=CyTube&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted">Donate</a>
+        </p>
+
+    </div>
+
+    <!-- APIs -->
+    <script src="http://api.dmcdn.net/all.js"></script>
+    <script src="http://jwpsrv.com/library/QouFCLBMEeKC+CIACpYGxA.js"></script>
+    <script src="./assets/js/sc.js"></script>
+    <script src="./assets/js/froogaloop.min.js"></script>
+    <script src="./assets/js/swf.js"></script>
+    <!-- Third party -->
+    <script src="./assets/js/jquery.js"></script>
+    <script src="./assets/js/bootstrap.js"></script>
+    <script src="./assets/js/bootstrap-transition.js"></script>
+    <script src="./assets/js/bootstrap-modal.js"></script>
+    <script src="./socket.io/socket.io.js"></script>
+    <!-- My Javascript -->
+    <script src="./assets/js/functions.js"></script>
+    <script src="./assets/js/callbacks.js"></script>
+    <script src="./assets/js/iourl.js"></script>
+    <script src="./assets/js/media.js"></script>
+    <script src="./assets/js/client.js"></script>
+
+  </body>
+</html>
diff --git a/www/index.html b/www/index.html
index 920e77a5..1b190781 100644
--- a/www/index.html
+++ b/www/index.html
@@ -277,24 +277,47 @@
 
     </div>
 
-    <!-- APIs -->
-    <script src="http://api.dmcdn.net/all.js"></script>
-    <script src="http://jwpsrv.com/library/QouFCLBMEeKC+CIACpYGxA.js"></script>
-    <script src="./assets/js/sc.js"></script>
-    <script src="./assets/js/froogaloop.min.js"></script>
-    <script src="./assets/js/swf.js"></script>
     <!-- Third party -->
-    <script src="./assets/js/jquery.js"></script>
     <script src="./assets/js/bootstrap.js"></script>
     <script src="./assets/js/bootstrap-transition.js"></script>
     <script src="./assets/js/bootstrap-modal.js"></script>
-    <script src="./socket.io/socket.io.js"></script>
-    <!-- My Javascript -->
-    <script src="./assets/js/functions.js"></script>
-    <script src="./assets/js/callbacks.js"></script>
-    <script src="./assets/js/iourl.js"></script>
-    <script src="./assets/js/media.js"></script>
-    <script src="./assets/js/client.js"></script>
+    <!-- Mine -->
+    <script src="./assets/js/jquery.js"></script>
+    <script type="text/javascript">
+        var params = {};
+        if(window.location.search) {
+            var parameters = window.location.search.substring(1).split("&");
+            for(var i = 0; i < parameters.length; i++) {
+                var s = parameters[i].split("=");
+                if(s.length != 2)
+                    continue;
+                params[s[0]] = s[1];
+            }
+        }
+        if(params["channel"] && params["channel"].match(/^[a-zA-Z0-9]+$/)) {
+            var host = ""+document.location;
+            host = host.replace("http://", "");
+            host = host.substring(0, host.indexOf("/"));
+            document.location = "http://" + host + "/r/" + params["channel"];
+        }
+        else {
+            var main = $($(".container")[1]);
+            var container = $("<div/>").addClass("container").insertBefore(main);
+            var row = $("<div/>").addClass("row").appendTo(container);
+            var div = $("<div/>").addClass("span6").appendTo(row);
+            main.css("display", "none");
+            var label = $("<label/>").text("Enter Channel:").appendTo(div);
+            var entry = $("<input/>").attr("type", "text").appendTo(div);
+            entry.keydown(function(ev) {
+                var host = ""+document.location;
+                host = host.replace("http://", "");
+                host = host.substring(0, host.indexOf("/"));
+                if(ev.keyCode == 13) {
+                    document.location = "http://" + host + "/r/" + entry.val();
+                }
+            });
+        }
+    </script>
 
   </body>
 </html>