moon
/
sync
mirror of https://github.com/calzoneman/sync.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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"
},

5
templates/channel.pug
View File

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

8
www/css/cytube.css
View File

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

1
www/js/data.js
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);

16
www/js/ui.js
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);
}
});

34
www/js/util.js
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();
};