From 2c5771931830a69907a83afc0fe31bc4588986f7 Mon Sep 17 00:00:00 2001
From: Calvin Montgomery <calzoneman@gmail.com>
Date: Mon, 23 Jan 2017 21:47:21 -0800
Subject: [PATCH] Support changing the ratio of video:chat width

---
 package.json          |  2 +-
 templates/channel.pug |  5 ++++-
 www/css/cytube.css    |  8 ++++++++
 www/js/data.js        |  1 +
 www/js/ui.js          | 16 ++++++++++++++++
 www/js/util.js        | 34 ++++++++++++++++++++++++++++++++++
 6 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6dc2b27e..da2b9d6c 100644
--- a/package.json
+++ b/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"
   },
diff --git a/templates/channel.pug b/templates/channel.pug
index 82fd3070..1aac98d6 100644
--- a/templates/channel.pug
+++ b/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
diff --git a/www/css/cytube.css b/www/css/cytube.css
index 5292128d..916aae8d 100644
--- a/www/css/cytube.css
+++ b/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;
+}
diff --git a/www/js/data.js b/www/js/data.js
index 9317cc65..14e39eab 100644
--- a/www/js/data.js
+++ b/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);
diff --git a/www/js/ui.js b/www/js/ui.js
index 4e55804c..d315faa3 100644
--- a/www/js/ui.js
+++ b/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);
+    }
+});
diff --git a/www/js/util.js b/www/js/util.js
index 095f8829..1425c754 100644
--- a/www/js/util.js
+++ b/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();
+};