Add SSL user options so the page can be plain HTTP

changelog

@@ -1,3 +1,16 @@
+Tue Sep 10 22:40 2013 CDT
+    * www/account.html, www/acp.html, www/login.html: 
+      Import www/assets/js/data.js for easy access to user preferences
+    * www/assets/js/account.js, www/assets/js/acp.js: remove redundant
+      cookie util functions
+    * www/assets/js/data.js, www/assets/js/util.js, www/assets/js/iourl.js:
+      Add a user option to enable SSL for websockets and API calls
+    * www/assets/js/ui.js: Add a warning if the user loaded the page over
+      SSL (because some media players throw warnings and others don't work
+      at all (Twitch.tv, Justin.tv: go eat a dick)
+    * www/assets/js/player.js: Prevent race conditions for media types that
+      depend on swfobject
+
 Tue Sep 10 17:17 2013 CDT
     * www/assets/js/player.js: Fix loading over SSL for everything except
       TwitchTV and JustinTV

www/account.html

@@ -240,6 +240,7 @@
     <script src="./assets/js/bootstrap-modal.js"></script>
 
     <!-- Mine -->
+    <script src="./assets/js/data.js"></script>
     <script src="./assets/js/iourl.js"></script>
     <script src="./assets/js/account.js"></script>
   </body>

www/acp.html

@@ -289,8 +289,8 @@
     <script src="./assets/js/chart.js"></script>
 
     <!-- Mine -->
-    <script src="./assets/js/iourl.js"></script>
     <script src="./assets/js/data.js"></script>
+    <script src="./assets/js/iourl.js"></script>
     <script src="./assets/js/paginator.js"></script>
     <script src="./assets/js/util.js"></script>
     <script src="./assets/js/acp.js"></script>

www/assets/js/account.js

@@ -407,28 +407,3 @@ $("#login").click(function() {
         loggedin = false;
     }
 });
-
-function createCookie(name,value,days) {
-    if (days) {
-        var date = new Date();
-        date.setTime(date.getTime()+(days*24*60*60*1000));
-        var expires = "; expires="+date.toGMTString();
-    }
-    else var expires = "";
-    document.cookie = name+"="+value+expires+"; path=/";
-}
-
-function readCookie(name) {
-    var nameEQ = name + "=";
-    var ca = document.cookie.split(";");
-    for(var i=0;i < ca.length;i++) {
-        var c = ca[i];
-        while (c.charAt(0)==" ") c = c.substring(1,c.length);
-        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-    }
-    return null;
-}
-
-function eraseCookie(name) {
-    createCookie(name,"",-1);
-}

www/assets/js/acp.js

@@ -600,30 +600,3 @@ function setupCallbacks() {
         }
     });
 }
-
-/* cookie util */
-
-function createCookie(name,value,days) {
-    if (days) {
-        var date = new Date();
-        date.setTime(date.getTime()+(days*24*60*60*1000));
-        var expires = "; expires="+date.toGMTString();
-    }
-    else var expires = "";
-    document.cookie = name+"="+value+expires+"; path=/";
-}
-
-function readCookie(name) {
-    var nameEQ = name + "=";
-    var ca = document.cookie.split(";");
-    for(var i=0;i < ca.length;i++) {
-        var c = ca[i];
-        while (c.charAt(0)==" ") c = c.substring(1,c.length);
-        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-    }
-    return null;
-}
-
-function eraseCookie(name) {
-    createCookie(name,"",-1);
-}

www/assets/js/data.js

@@ -44,7 +44,6 @@ if($("#videowidth").length > 0) {
     VWIDTH = $("#videowidth").css("width").replace("px", "");
     VHEIGHT = ""+parseInt(parseInt(VWIDTH) * 9 / 16);
 }
-var MEDIA = { hash: "" };
 var PL_MOVING = false;
 var PL_ADDING = false;
 var PL_DELETING = false;
@@ -71,6 +70,7 @@ var SESSION = readCookie("cytube_session");
 var LEADTMR = false;
 var PL_FROM = "";
 var PL_AFTER = "";
+var PL_CURRENT = -1;
 var PL_WAIT_SCROLL = false;
 var FILTER_FROM = 0;
 var FILTER_TO = 0;
@@ -121,7 +121,8 @@ var USEROPTS = {
     sort_rank            : getOrDefault("sort_rank", false),
     sort_afk             : getOrDefault("sort_afk", false),
     default_quality      : getOrDefault("default_quality", "#quality_auto"),
-    boop                 : getOrDefault("boop", false)
+    boop                 : getOrDefault("boop", false),
+    secure_connection    : getOrDefault("secure_connection", false)
 };
 
 var NO_WEBSOCKETS = USEROPTS.altsocket;

www/assets/js/iourl.js

@@ -12,7 +12,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 var IO_URL = "http://localhost:1337";
 var WEB_URL = "http://localhost:8080";
 var SSL_URL = "https://localhost:443";
+var ALLOW_SSL = false;
 
-if (location.protocol === "https:") {
+if (ALLOW_SSL) {
-    IO_URL = WEB_URL = SSL_URL;
+    if (location.protocol === "https:" || USEROPTS.secure_connection) {
+        IO_URL = WEB_URL = SSL_URL;
+    }
 }

www/assets/js/player.js

@@ -485,7 +485,9 @@ var TwitchTVPlayer = function (data) {
         );
     };
 
-    self.init();
+    waitUntilDefined(window, "swfobject", function () {
+        self.init();
+    });
 
     self.load = function (data) {
         self.videoId = data.id;
@@ -528,7 +530,9 @@ var JustinTVPlayer = function (data) {
         );
     };
 
-    self.init();
+    waitUntilDefined(window, "swfobject", function () {
+        self.init();
+    });
 
     self.load = function (data) {
         self.videoId = data.id;
@@ -572,7 +576,9 @@ var RTMPPlayer = function (data) {
         );
     };
 
-    self.init();
+    waitUntilDefined(window, "swfobject", function () {
+        self.init();
+    });
 
     self.load = function (data) {
         self.videoId = data.id;

www/assets/js/ui.js

@@ -454,3 +454,16 @@ $("#sitefooter").load("footer.html");
 $(":input:not(textarea)").keypress(function(ev) {
     return ev.keyCode != 13;
 });
+
+if (location.protocol === "https:") {
+    var title = "Warning";
+    var text = "You connected to this page via HTTPS.  Due to browser "+
+               "security policy, certain media players may throw warnings,"+
+               " while others may not work at all due to only being "+
+               "available over plain HTTP.<br>To encrypt your websocket "+
+               "traffic and API calls (logins, account management, etc) "+
+               "while loading this page over plain HTTP, enable the SSL "+
+               "option from the Options menu.";
+    makeAlert(title, text, "alert-warning")
+        .appendTo($("#announcements"));
+}

www/assets/js/util.js

@@ -610,6 +610,21 @@ function showOptionsMenu() {
                   "does not work.");
         addOption(general, "", gen_altsocketinfo);
 
+        var gen_secure = addCheckbox(general, "SSL",
+                                     "Encrypt connections with SSL");
+        gen_secure.prop("checked", USEROPTS.secure_connection);
+        gen_secure.attr("disabled", !ALLOW_SSL);
+
+        var gen_secureinfo = $("<p/>")
+            .addClass("text-error")
+            .text("If enabled, websocket traffic and API calls (logins, "+
+                  "account management) will be sent over a secure "+
+                  "connection.  Changes take effect after a refresh.");
+            addOption(general, "", gen_secureinfo);
+        if (!ALLOW_SSL) {
+            gen_secureinfo.text("This server does not support SSL.");
+        }
+
         // playback options
         var playback = initForm("#uopt-panel-playback");
 
@@ -706,6 +721,7 @@ function showOptionsMenu() {
             USEROPTS.blink_title          = chat_all.prop("checked");
             USEROPTS.boop                 = chat_boop.prop("checked");
             USEROPTS.chatbtn              = chat_sendbtn.prop("checked");
+            USEROPTS.secure_connection    = gen_secure.prop("checked");
             if (CLIENT.rank >= 2) {
                 USEROPTS.modhat      = mod_flair.prop("checked");
                 USEROPTS.joinmessage = mod_joinmsg.prop("checked");

www/login.html

@@ -35,6 +35,7 @@
             </div>
         </form>
         <script src="assets/js/jquery.js" type="text/javascript"></script>
+        <script src="assets/js/data.js" type="text/javascript"></script>
         <script src="assets/js/iourl.js" type="text/javascript"></script>
         <script type="text/javascript">
             /*
@@ -61,17 +62,7 @@
                     dataType: "text"
                 });
             }
-            function readCookie(name) {
+            var theme = USEROPTS.theme;
-                var nameEQ = name + "=";
-                var ca = document.cookie.split(";");
-                for(var i=0;i < ca.length;i++) {
-                    var c = ca[i];
-                    while (c.charAt(0)==" ") c = c.substring(1,c.length);
-                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-                }
-                return null;
-            }
-            var theme = localStorage.getItem("theme") || "default";
             if(theme != "default") {
                 $("<link/>").attr("rel", "stylesheet")
                     .attr("type", "text/css")