mirror of https://github.com/calzoneman/sync.git
Support changing the ratio of video:chat width
This commit is contained in:
parent
b0ff4d5ef0
commit
2c57719318
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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…
Reference in New Issue