Support changing the ratio of video:chat width
This commit is contained in:
parent
b0ff4d5ef0
commit
2c57719318
6 changed files with 64 additions and 2 deletions
|
|
@ -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);
|
||||
|
|
|
|||
16
www/js/ui.js
16
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);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue