Support changing the ratio of video:chat width

package.json

@@ -2,7 +2,7 @@
   "author": "Calvin Montgomery",
   "name": "CyTube",
   "description": "Online media synchronizer and chat",
-  "version": "3.28.1",
+  "version": "3.28.2",
   "repository": {
     "url": "http://github.com/calzoneman/sync"
   },

templates/channel.pug

@@ -50,7 +50,10 @@ html(lang="en")
                 span.input-group-addon Guest login
                 input#guestname.form-control(type="text", placeholder="Name")
             #videowrap.col-lg-7.col-md-7
-              p#currenttitle Nothing Playing
+              p#currenttitle
+                span#resize-video-smaller.glyphicon.glyphicon-minus.pointer(title="Make the video smaller")
+                span#resize-video-larger.glyphicon.glyphicon-plus.pointer(title="Make the video larger")
+                | Nothing Playing
               .embed-responsive.embed-responsive-16by9
                 #ytapiplayer.embed-responsive-item
           #controlsrow.row

www/css/cytube.css

@@ -680,3 +680,11 @@ input#logout[type="submit"]:hover {
     margin-left: 10px;
     margin-right: 10px;
 }
+
+#resize-video-larger, #resize-video-smaller {
+    float: right;
+}
+
+body.hd #resize-video-larger, body.hd #resize-video-smaller {
+    display: none;
+}

www/js/data.js

@@ -69,6 +69,7 @@ var SOCKETIO_CONNECT_ERROR_COUNT = 0;
 var HAS_CONNECTED_BEFORE = false;
 var IMAGE_MATCH = /<img\s[^>]*?src\s*=\s*['\"]([^'\"]*?)['\"][^>]*?>/gi;
 var CyTube = {};
+CyTube.ui = {};
 
 function getOpt(k) {
     var v = NO_STORAGE ? readCookie(k) : localStorage.getItem(k);

www/js/ui.js

@@ -960,3 +960,19 @@ $("#cs-csstext").bind("input", handleCSSJSTooLarge.bind($("#cs-csstext")[0],
         "#cs-csstext-too-big"));
 $("#cs-jstext").bind("input", handleCSSJSTooLarge.bind($("#cs-jstext")[0],
         "#cs-jstext-too-big"));
+
+$("#resize-video-larger").click(function () {
+    try {
+        CyTube.ui.changeVideoWidth(1);
+    } catch (error) {
+        console.error(error);
+    }
+});
+
+$("#resize-video-smaller").click(function () {
+    try {
+        CyTube.ui.changeVideoWidth(-1);
+    } catch (error) {
+        console.error(error);
+    }
+});

www/js/util.js

@@ -3324,3 +3324,37 @@ function backoffRetry(fn, cb, options) {
 
     fn(callback);
 }
+
+CyTube.ui.changeVideoWidth = function uiChangeVideoWidth(direction) {
+    var body = document.body;
+    if (/hd/.test(body.className)) {
+        throw new Error("ui::changeVideoWidth does not work with the 'hd' layout");
+    }
+
+    var videoWrap = document.getElementById("videowrap");
+    var leftControls = document.getElementById("leftcontrols");
+    var leftPane = document.getElementById("leftpane");
+    var chatWrap = document.getElementById("chatwrap");
+    var rightControls = document.getElementById("rightcontrols");
+    var rightPane = document.getElementById("rightpane");
+
+    var match = videoWrap.className.match(/col-md-(\d+)/);
+    if (!match) {
+        throw new Error("ui::changeVideoWidth: videowrap is missing bootstrap class!");
+    }
+
+    var videoWidth = parseInt(match[1], 10) + direction;
+    if (videoWidth < 3 || videoWidth > 9) {
+        return;
+    }
+
+    var chatWidth = 12 - videoWidth;
+    videoWrap.className = "col-md-" + videoWidth + " col-lg-" + videoWidth;
+    rightControls.className = "col-md-" + videoWidth + " col-lg-" + videoWidth;
+    rightPane.className = "col-md-" + videoWidth + " col-lg-" + videoWidth;
+    chatWrap.className = "col-md-" + chatWidth + " col-lg-" + chatWidth;
+    leftControls.className = "col-md-" + chatWidth + " col-lg-" + chatWidth;
+    leftPane.className = "col-md-" + chatWidth + " col-lg-" + chatWidth;
+
+    handleVideoResize();
+};