Support changing the ratio of video:chat width

This commit is contained in:
Calvin Montgomery 2017-01-23 21:47:21 -08:00
parent b0ff4d5ef0
commit 2c57719318
6 changed files with 64 additions and 2 deletions

View file

@ -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);

View file

@ -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);
}
});

View file

@ -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();
};