rainbownapkin/fore.st
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

improved server-whisper, user join/leave messages, layout/UI overhaul

Browse source
This commit is contained in:
rainbownapkin 2022-07-10 03:31:30 +00:00
parent e7adec32d7
commit 5f97baffc6
23 changed files with 729 additions and 917 deletions
Download patch file Download diff file Expand all files Collapse all files

27
www/css/cytube.css
View file

@ -36,6 +36,13 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
body{
max-width: 100%;
overflow-x: hidden;
}
#main, #titles{
display: flex;
}
.container-fluid {
padding-left: 15px;
@ -44,6 +51,15 @@ SOFTWARE.
margin-right: auto;
}
#minicontrol{
display: none;
margin: 0 0.5em 0 0.5em;
}
#vidplay{
}
#viddur{
margin-right:0.5em;
}
#loginform > .form-group {
margin-right: 5px;
}
@ -60,7 +76,7 @@ SOFTWARE.
margin-top: 10px;
}
#messagebuffer {
#messagebuffer{
width: auto;
padding-left: 5px;
padding-right: 5px;
@ -142,6 +158,14 @@ SOFTWARE.
margin: 0;
}
#videowrap, #videowrap-header{
flex: 0 0 50%;
}
#chatwrap, #chatheader{
flex: 1 1;
}
.pointer {
cursor: pointer;
}
@ -385,7 +409,6 @@ label[for="emotealphabox"]{
}
#chatheader .label {
height: 100%;
margin-left: 2px;
}

6
www/css/sticky-footer-navbar.css
View file

@ -6,12 +6,8 @@ body {
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
min-height: calc(100vh - 60px);
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */

88
www/css/themes/bootstrap-theme.min.css vendored
View file

File diff suppressed because one or more lines are too long

92
www/css/themes/cyborg.css
View file

File diff suppressed because one or more lines are too long

31
www/css/themes/fore.st.css
View file

@ -82,6 +82,8 @@ mark{
background:#ff0;
color:#000
}
#minicontrol{
}
sub,sup{
font-size:75%;
line-height:0;
@ -1221,27 +1223,6 @@ pre code{
max-height:340px;
overflow-y:scroll
}
.container,.container-fluid{
margin-right:auto;
margin-left:auto;
padding-left:0px;
padding-right:0px
}
@media (min-width:768px){
.container{
width:750px
}
}
@media (min-width:992px){
.container{
width:970px
}
}
@media (min-width:1200px){
.container{
width:1170px
}
}
.row{
margin-left:0px;
margin-right:0px
@ -4490,6 +4471,10 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
padding:0;
overflow:hidden;
border: 1px solid #949494;
border-bottom: 0px;
}
#main{
border-bottom: 1px solid #949494;
}
.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{
position:absolute;
@ -4501,10 +4486,8 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
border:0
}
.embed-responsive.embed-responsive-16by9{
padding-bottom:56.25%
}
.embed-responsive.embed-responsive-4by3{
padding-bottom:75%
}
.well{
min-height:20px;
@ -5509,7 +5492,7 @@ a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover{
text-decoration: none;
}
#emotelistbtm, #chatsend, #motdwrap, #chatline, #rightcontrols, #chatheader, #userlist, #messagebuffer, #videowrap-header, .embed-responsive, #rightpane, #mainrow{
#pollopenbtn, #prefopenbtn, #emoteopenbtn, #chatsend, #motdwrap, #chatline, #rightcontrols, #chatheader, #userlist, #messagebuffer, #videowrap-header, .embed-responsive, #rightpane, #mainrow{
background-color: #111111C0;
backdrop-filter: blur(12px);
}

82
www/css/themes/light.css
View file

File diff suppressed because one or more lines are too long

193
www/css/themes/modern.css
View file

File diff suppressed because one or more lines are too long

104
www/css/themes/slate.css
View file

File diff suppressed because one or more lines are too long

10
www/js/data.js
View file

@ -37,7 +37,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
var CL_VERSION = 3.0;
var CL_VERSION = 1.1;
var GS_VERSION = 1.7; // Google Drive Userscript
var CLIENT = {
@ -66,7 +66,6 @@ var CHANNEL = {
var PLAYER = false;
var LIVESTREAM_CHROMELESS = false;
var FLUIDLAYOUT = false;
var VWIDTH;
var VHEIGHT;
if($("#videowidth").length > 0) {
@ -90,10 +89,13 @@ var LASTCHAT = {
name: ""
};
var FOCUSED = true;
var PAGETITLE = "CyTube";
var PAGETITLE = "fore.st";
var TITLE_BLINK;
var CHATSOUND = new Audio("/boop.wav");
var KICKED = false;
var RATIO_LOCKED = true;
var MUTED_VOL = 1;
var VIEW_WIDTH = 50;
var NAME = readCookie("cytube_uname");
var SESSION = readCookie("cytube_session");
var LEADTMR = false;
@ -152,7 +154,6 @@ var IGNORED = getOrDefault("ignorelist", []);
var USEROPTS = {
theme : getOrDefault("theme", DEFAULT_THEME), // Set in head template
layout : getOrDefault("layout", "fluid"),
synch : getOrDefault("synch", true),
hidevid : getOrDefault("hidevid", false),
show_timestamps : getOrDefault("show_timestamps", true),
@ -169,6 +170,7 @@ var USEROPTS = {
sort_rank : getOrDefault("sort_rank", true),
sort_afk : getOrDefault("sort_afk", false),
legacy_emote : getOrDefault("legacy_emote", false),
show_seconds : getOrDefault("show_seconds", false),
default_quality : getOrDefault("default_quality", "auto"),
boop : getOrDefault("boop", "never"),
show_shadowchat : getOrDefault("show_shadowchat", false),

19
www/js/fpanel.js
View file

@ -286,6 +286,22 @@ fpset.ocall = function(){
}),
),
$("<form>").append(
$("<label>").prop("for","qs-show-timestamp").html("Show Timestamps (reqs refresh on enable): "),
$("<input>").prop("id","qs-show-timestamp").prop("type","checkbox").addClass("qs-form").change(function() {
USEROPTS.show_timestamps = $("#qs-show-timestamps").prop("checked");
processOpts();
}),
),
$("<form>").append(
$("<label>").prop("for","qs-timestamp-second").html("Show Seconds on Timestamps: "),
$("<input>").prop("id","qs-timestamp-second").prop("type","checkbox").addClass("qs-form").change(function() {
USEROPTS.show_seconds = $("#qs-timestamp-second").prop("checked");
processOpts();
}),
),
])
fpset.loadSettings();
@ -303,5 +319,8 @@ fpset.loadSettings = function(){
$("#qs-boop").val(USEROPTS.boop);
$("#us-notifications").children().clone().appendTo($("#qs-notifications"));
$("#qs-notifications").val(USEROPTS.notifications);
$("#qs-show-timestamp").prop("checked", USEROPTS.show_timestamps);
$("#qs-timestamp-second").parent().toggle(USEROPTS.show_timestamps);
$("#qs-timestamp-second").prop("checked", USEROPTS.show_seconds);
}

77
www/js/player.js
View file

@ -74,6 +74,10 @@
return cb(VOLUME);
};
Player.prototype.getRes = function(cb) {
return cb();
};
Player.prototype.destroy = function() {};
return Player;
@ -88,6 +92,8 @@
return new VimeoPlayer(data);
}
this.load(data);
this.resx = 0;
this.resy = 0;
}
VimeoPlayer.prototype.load = function(data) {
@ -115,6 +121,7 @@
});
_this.vimeo.on('pause', function() {
_this.paused = true;
setMini();
if (CLIENT.leader) {
return sendVideoUpdate();
} else {
@ -123,6 +130,8 @@
});
_this.vimeo.on('play', function() {
_this.paused = false;
setMini();
handleVideoResize();
if (CLIENT.leader) {
return sendVideoUpdate();
}
@ -132,8 +141,24 @@
return _this.unlatch();
}
});
_this.vimeo.on('timeupdate', function() {
return setDur();
});
_this.vimeo.on('volumechange', function() {
return setMini();
});
_this.play();
return _this.setVolume(VOLUME);
_this.setVolume(VOLUME);
_this.vimeo.getVideoWidth().then(function(wid) {
return window.PLAYER.resx = wid;
})["catch"](function(error) {
return console.error('vimeo::getVideoWidth():', error);
});
return _this.vimeo.getVideoHeight().then(function(hgt) {
return window.PLAYER.resy = hgt;
})["catch"](function(error) {
return console.error('vimeo::getVideoHeight():', error);
});
};
})(this));
};
@ -196,6 +221,14 @@
}
};
VimeoPlayer.prototype.getRes = function(cb) {
if (this.vimeo) {
return cb([this.resx, this.resy]);
} else {
return cb();
}
};
return VimeoPlayer;
})(Player);
@ -359,6 +392,7 @@
});
_this.dm.addEventListener('pause', function() {
_this.paused = true;
setMini();
if (CLIENT.leader) {
return sendVideoUpdate();
} else {
@ -367,6 +401,7 @@
});
_this.dm.addEventListener('playing', function() {
_this.paused = false;
setMini();
if (CLIENT.leader) {
sendVideoUpdate();
}
@ -380,11 +415,22 @@
return _this.unlatch();
}
});
_this.dm.addEventListener('timeupdate', function() {
return setDur();
});
_this.dm.addEventListener('volumechange', function() {
return setMini();
});
_this.player.on('canplay', function() {
handleVideoResize();
return console.log(_this.player.children);
});
_this.dm.addEventListener('video_end', function() {
return _this.dmReady = false;
});
return _this.dm.addEventListener('playback_ready', function() {
_this.dmReady = true;
handleVideoResize();
if (_this.playbackReadyCb) {
_this.playbackReadyCb();
return _this.playbackReadyCb = null;
@ -404,6 +450,7 @@
console.log('Warning: load() called before DM is ready, queueing callback');
return this.playbackReadyCb = (function(_this) {
return function() {
handleVideoResize();
_this.dm.load(data.id);
return _this.dm.seek(data.currentTime);
};
@ -464,6 +511,14 @@
}
};
DailymotionPlayer.prototype.getRes = function(cb) {
if (this.dm && this.dmReady) {
return cb([this.dm.width, this.dm.height]);
} else {
return cb();
}
};
DailymotionPlayer.prototype.mapQuality = function(quality) {
switch (String(quality)) {
case '240':
@ -640,6 +695,7 @@
});
_this.player.on('pause', function() {
_this.paused = true;
setMini();
if (CLIENT.leader) {
return sendVideoUpdate();
} else {
@ -648,16 +704,27 @@
});
_this.player.on('play', function() {
_this.paused = false;
setMini();
if (CLIENT.leader) {
return sendVideoUpdate();
}
});
_this.player.on('volumechange', function() {
return setMini();
});
_this.player.on('seeked', function() {
$('.vjs-waiting').removeClass('vjs-waiting');
if (!CLIENT.leader) {
return _this.unlatch();
}
});
_this.player.on('canplay', function() {
handleVideoResize();
return console.log(_this.player.children);
});
_this.player.on('timeupdate', function() {
return setDur();
});
return setTimeout(function() {
return $('#ytapiplayer .vjs-subtitles-button .vjs-menu-item').each(function(i, elem) {
var textNode;
@ -750,6 +817,14 @@
}
};
VideoJSPlayer.prototype.getRes = function(cb) {
if (this.player) {
return cb([this.player.videoWidth(), this.player.videoHeight()]);
} else {
return cb();
}
};
VideoJSPlayer.prototype.destroy = function() {
removeOld();
if (this.player) {

155
www/js/ui.js
View file

@ -54,7 +54,8 @@ $(".modal").focus(CyTube.ui.onPageFocus);
$("#togglemotd").click(function () {
var hidden = $("#motdwrap")[0].style.display === "none";
$("#motdwrap").toggle("blind");
$("#motdwrap").toggle("blind", function(){handleWindowResize()});
if (hidden) {
$("#togglemotd").find(".glyphicon-plus")
.removeClass("glyphicon-plus")
@ -66,7 +67,89 @@ $("#togglemotd").click(function () {
}
});
/* main */
let draggingVidSplit = false;
let motdOpen = false;
let chatWidthLockoff = 0;
$("#main").mousemove(function(evnt){
var mdist = Math.abs(evnt.pageX - parseInt($("#videowrap").css("width")));
if(mdist <= 1 && $("#videowrap").is(":visible") && $("#chatwrap").is(":visible")){
$("#main").css("cursor", "col-resize");
$("#ytapiplayer").css("pointer-events", draggingVidSplit ? "none" : "auto");
$("#main").css("user-select", draggingVidSplit ? "none" : "auto");
}else{
$("#main").css("cursor", "");
}
if(draggingVidSplit){
dpercent = ((evnt.pageX )/$("body").outerWidth()) * 100;
moveSplit(dpercent, evnt.pageX);
$("#main").css("cursor", "col-resize");
}
});
function moveSplit(dper, mx){//Gross and hacky, but this prevents code re-use
if($("#videowrap").is(":visible") && $("#chatwrap").is(":visible")){
if(($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth() >= 1)){
lastmin = ((($("#videowrap").outerWidth() - ($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth())) / $("body").outerWidth()) * 100);
$("#videowrap").css("flex-basis", lastmin + "%");
$("#videowrap-header").css("flex-basis", lastmin + "%");
chatWidthLockoff = $("#chatwrap").offset().left;
}else if(chatWidthLockoff === 0 || chatWidthLockoff > mx){
$("#videowrap").css("flex-basis", dper + "%");
$("#videowrap-header").css("flex-basis", dper + "%");
}
}
$("#fpaneldiv").outerWidth($("#chatwrap").outerWidth() * 0.7);
}
$("#main").mousedown(function(evnt){
if(draggingVidSplit = $("#videowrap").is(":visible") && $("#chatwrap").is(":visible") && (Math.abs(evnt.pageX - parseInt($("#videowrap").css("width"))) <= 1)){
RATIO_LOCKED = false;
$("#lockaspect").show("");
}
});
$("#main").mouseup(function(evnt){
draggingVidSplit = false;
$("#ytapiplayer").css("pointer-events","auto");
$("#main").css("user-select", "auto");
});
$("#cinemode").click(function(){
if($("#footer").is(":visible") || $(".navbar").is(":visible") || $("#motdwrap").is(":visible")){
motdOpen = $("#motdwrap").is(":visible");
$("#motdwrap").hide( "blind");
$("#footer").hide("blind");
$(".navbar").hide("blind", function(){handleWindowResize()});
}else{
if(motdOpen){
$("#motdwrap").show( "blind");
}
$("#footer").show("blind");
$(".navbar").show("blind", function(){handleWindowResize()});
}
});
$("#lockaspect").click(function() {
RATIO_LOCKED = true;
$("#lockaspect").hide("");
handleVideoResize();
});
/* chatbox */
$("#blindchat").click(function() {
if($("#chatwrap").is(":visible")){
$("#blindchat").css("rotate","270deg");
}else{
$("#blindchat").css("rotate","");
}
blindChat();
});
$("#modflair").click(function () {
var m = $("#modflair");
@ -375,6 +458,72 @@ $("#latchvid").click(function() {
$("#latchvid").hide();
});
$("#blindvideo").click(function() {
if($("#videowrap").is(":visible")){
$("#blindvideo").css("rotate","270deg");
}else{
$("#blindvideo").css("rotate","");
}
blindVideo();
});
$("#vidplay").click(function(){
window.PLAYER.isPaused(function(p){
if(p){
window.PLAYER.play();
}else{
window.PLAYER.pause();
}
});
});
$("#vidmute").on("wheel",function(evnt){
evnt.originalEvent.preventDefault();
wup = evnt.originalEvent.deltaY < 0;
window.PLAYER.getVolume(function(v){
window.PLAYER.setVolume(vu = (((wup ? 1 : -1) * 0.05) + v));
});
});
$("#vidmute").click(function(){
window.PLAYER.getVolume(function(v){
if(v == 0){
window.PLAYER.setVolume(MUTED_VOL);
}else{
MUTED_VOL = v;
window.PLAYER.setVolume(0);
}
});
});
$("#viddur").on("wheel",function(evnt){
evnt.originalEvent.preventDefault();
wup = evnt.originalEvent.deltaY < 0;
window.PLAYER.getTime(function (t){
window.PLAYER.seekTo(((wup ? 1 : -1) * 5) + t);
});
});
function setDur(){
window.PLAYER.getTime(function (t){
min = Math.floor(t / 60);
hour = Math.floor(min / 60);
min = min - (hour * 60);
sec = Math.floor(t % 60);
dmin = Math.floor(window.PLAYER.mediaLength / 60);
dhour = Math.floor(dmin/60);
dmin = dmin - (60 * dhour);
dsec = (window.PLAYER.mediaLength % 60).toFixed();
$("#viddur").html((hour > 0 ? (padtime(hour) + ":") : "") + padtime(min) + ":" + padtime(sec) + "/" +
(dhour > 0 ? (padtime(dhour) + ":") : "") + padtime(dmin) + ":" + padtime(dsec));
});
}
/* playlist controls */
$("#queue").sortable({
@ -972,7 +1121,7 @@ applyOpts();
if (!record.addedNodes || record.addedNodes.length === 0) return;
var elem = record.addedNodes[0];
if (elem.id === "ytapiplayer") handleVideoResize();
//if (elem.id === "ytapiplayer") handleVideoResize();
});
});
@ -983,7 +1132,7 @@ applyOpts();
* for browsers that do not support MutationObserver
*/
embed.addEventListener("DOMNodeInserted", function (ev) {
if (ev.target.id === "ytapiplayer") handleVideoResize();
//if (ev.target.id === "ytapiplayer") handleVideoResize();
});
}
})();

380
www/js/util.js
View file

@ -703,7 +703,6 @@ function showUserOptions() {
}
$("#us-theme").val(USEROPTS.theme);
$("#us-layout").val(USEROPTS.layout);
$("#us-no-channelcss").prop("checked", USEROPTS.ignore_channelcss);
$("#us-no-channeljs").prop("checked", USEROPTS.ignore_channeljs);
@ -717,6 +716,7 @@ function showUserOptions() {
$("#us-default-quality").val(USEROPTS.default_quality || "auto");
$("#us-chat-timestamp").prop("checked", USEROPTS.show_timestamps);
$("#us-timestamp-second").prop("checked", USEROPTS.show_seconds);
$("#us-sort-rank").prop("checked", USEROPTS.sort_rank);
$("#us-sort-afk").prop("checked", USEROPTS.sort_afk);
$("#us-legacy-emote").prop("checked", USEROPTS.legacy_emote);
@ -740,7 +740,6 @@ function showUserOptions() {
function saveUserOptions() {
USEROPTS.theme = $("#us-theme").val();
createCookie("cytube-theme", USEROPTS.theme, 1000);
USEROPTS.layout = $("#us-layout").val();
USEROPTS.ignore_channelcss = $("#us-no-channelcss").prop("checked");
USEROPTS.ignore_channeljs = $("#us-no-channeljs").prop("checked");
USEROPTS.show_ip_in_tooltip = $("#us-show-ip-in-tooltip").prop("checked");
@ -755,6 +754,7 @@ function saveUserOptions() {
USEROPTS.default_quality = $("#us-default-quality").val();
USEROPTS.show_timestamps = $("#us-chat-timestamp").prop("checked");
USEROPTS.show_seconds = $("#us-timestamp-second").prop("checked");
USEROPTS.sort_rank = $("#us-sort-rank").prop("checked");
USEROPTS.sort_afk = $("#us-sort-afk").prop("checked");
USEROPTS.legacy_emote = $("#us-legacy-emote").prop("checked");
@ -799,25 +799,6 @@ function applyOpts() {
fixWeirdButtonAlignmentIssue();
}
/*switch (USEROPTS.layout) {
case "synchtube-fluid":
fluidLayout();
case "synchtube":
synchtubeLayout();
break;
case "fluid":
fluidLayout();
break;
case "hd":
hdLayout();
break;
default:
fluidLayout();
//compactLayout();Actual fucking cancer layout. Even for 2014. What the actual shit, this was a barely acceptable layout in 05'
break;
}*/
fluidLayout();//Temporary measure until the other layouts are removed for good.
$("#emoteopenbtn").attr("onclick", (USEROPTS.legacy_emote ? "javascript:EMOTELISTMODAL.modal()" : "javascript:panelbtn(fpemote)"));
if(USEROPTS.show_orientation){
@ -1625,7 +1606,7 @@ function formatChatMessage(data, last) {
}
// Phase 1: Determine whether to show the username or not
var skip = data.username === last.name;
if(data.meta.addClass === "server-whisper")
if(data.meta.addClass === "server-whisper" && data.username === "[server]")
skip = true;
// Prevent impersonation by abuse of the bold filter
if(data.msg.match(/^\s*<strong>\w+\s*:\s*<\/strong>\s*/))
@ -1642,8 +1623,8 @@ function formatChatMessage(data, last) {
// Add timestamps (unless disabled)
if (USEROPTS.show_timestamps && data.meta.addClass != "shout") {
var time = $("<span/>").addClass("timestamp").appendTo(div);
var timestamp = new Date(data.time).toTimeString().split(" ")[0];
time.text("["+timestamp+"] ");
var timestamp = new Date(data.time).toTimeString().split(" ")[0].split(":");
time.text("["+timestamp[0]+":"+timestamp[1]+(USEROPTS.show_seconds ? (":" + timestamp[2]) : "" )+"] ");
if (data.meta.addClass && data.meta.addClassToNameAndTimestamp) {
time.addClass(data.meta.addClass);
}
@ -1673,14 +1654,12 @@ function formatChatMessage(data, last) {
.prependTo(name);
}else if (data.meta.modflair) {
if(data.meta.addClass === "shout"){
console.log('asdasd');
$("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").text(data.username + "\n").appendTo(name);
}else{
$("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").text(data.username + "> ").appendTo(name);
}
name.addClass(getNameColor(data.meta.modflair));
}else if(data.meta.addClass === "shout"){
console.log('asdasd');
$("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").text(data.username + "\n").appendTo(name);
}else{
$("<strong/>").addClass("username").attr('onclick',"chatpaste('" + data.username + "')").attr('id',getColor(data.username)).text(data.username + "> ").appendTo(name);
@ -1721,7 +1700,6 @@ function addChatMessage(data) {
// a message, it highlights messages from that user
var safeUsername = data.username.replace(/[^\w-]/g, '\\$');
div.addClass("chat-msg-" + safeUsername);
console.log(data.meta.modflair);
if(data.meta.addClass === "shout"){//legacy tokebot junk
div.addClass("shout");
@ -1833,226 +1811,152 @@ function showDesktopNotification(notificationTitle, notificationBody)
new Notification(notificationTitle, {body: notificationBody, icon: null});
}
/* layouts */
function undoHDLayout() {
$("body").removeClass("hd");
$("#drinkbar").detach().removeClass().addClass("col-lg-12 col-md-12")
.appendTo("#drinkbarwrap");
$("#chatwrap").detach().removeClass().addClass("col-lg-5 col-md-5")
.appendTo("#main");
$("#videowrap").detach().removeClass().addClass("col-lg-7 col-md-7")
.appendTo("#main");
$("#leftcontrols").detach().removeClass().addClass("col-lg-5 col-md-5")
.prependTo("#controlsrow");
$("#plcontrol").detach().appendTo("#rightcontrols");
$("#videocontrols").detach().appendTo("#rightcontrols");
$("#playlistrow").prepend('<div id="leftpane" class="col-lg-5 col-md-5" />');
$("#leftpane").append('<div id="leftpane-inner" class="row" />');
$("#pollwrap").detach().removeClass().addClass("col-lg-12 col-md-12")
.appendTo("#leftpane-inner");
$("#playlistmanagerwrap").detach().removeClass().addClass("col-lg-12 col-md-12")
.css("margin-top", "10px")
.appendTo("#leftpane-inner");
$("#rightpane").detach().removeClass().addClass("col-lg-7 col-md-7")
.appendTo("#playlistrow");
$("nav").addClass("navbar-fixed-top");
$("#mainpage").css("padding-top", "60px");
$("#queue").css("max-height", "500px");
$("#messagebuffer, #userlist").css("max-height", "");
}
function compactLayout() {
/* Undo synchtube layout */
if ($("body").hasClass("synchtube")) {
$("body").removeClass("synchtube")
$("#chatwrap").detach().insertBefore($("#videowrap"));
$("#leftcontrols").detach().insertBefore($("#rightcontrols"));
$("#leftpane").detach().insertBefore($("#rightpane"));
$("#userlist").css("float", "left");
if($("#userlisttoggle").hasClass("glyphicon-chevron-left")){
$("#userlisttoggle").removeClass("glyphicon-chevron-left").addClass("glyphicon-chevron-right")
}
$("#userlisttoggle").removeClass("pull-right").addClass("pull-left")
}
/* Undo fluid layout */
if ($("body").hasClass("fluid")) {
$("body").removeClass("fluid")
$(".container-fluid").removeClass("container-fluid").addClass("container");
}
/* Undo HD layout */
if ($("body").hasClass("hd")) {
undoHDLayout();
}
$("body").addClass("compact");
handleVideoResize();
}
function fluidLayout() {
if ($("body").hasClass("hd")) {
undoHDLayout();
}
$(".container").removeClass("container").addClass("container-fluid");
$("footer .container-fluid").removeClass("container-fluid").addClass("container");
$("body").addClass("fluid");
handleVideoResize();
}
function synchtubeLayout() {
if ($("body").hasClass("hd")) {
undoHDLayout();
}
if($("#userlisttoggle").hasClass("glyphicon-chevron-right")){
$("#userlisttoggle").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-left")
}
$("#userlisttoggle").removeClass("pull-left").addClass("pull-right")
$("#videowrap").detach().insertBefore($("#chatwrap"));
$("#rightcontrols").detach().insertBefore($("#leftcontrols"));
$("#rightpane").detach().insertBefore($("#leftpane"));
$("#userlist").css("float", "right");
$("body").addClass("synchtube");
}
/*
* "HD" is kind of a misnomer. Should be renamed at some point.
*/
function hdLayout() {
var videowrap = $("#videowrap"),
chatwrap = $("#chatwrap"),
playlist = $("#rightpane")
videowrap.detach().insertAfter($("#drinkbar"))
.removeClass()
.addClass("col-md-8 col-md-offset-2");
playlist.detach().insertBefore(chatwrap)
.removeClass()
.addClass("col-md-6");
chatwrap.removeClass()
.addClass("col-md-6");
var ch = "320px";
$("#messagebuffer").css("max-height", ch);
$("#userlist").css("max-height", ch);
$("#queue").css("max-height", "312px");
$("#leftcontrols").detach()
.insertAfter(chatwrap)
.removeClass()
.addClass("col-md-6");
$("#playlistmanagerwrap").detach()
.insertBefore($("#leftcontrols"))
.css("margin-top", "0")
.removeClass()
.addClass("col-md-6");
$("#showplaylistmanager").addClass("btn-sm");
var plcontrolwrap = $("<div/>").addClass("col-md-12")
.prependTo($("#rightpane-inner"));
$("#plcontrol").detach().appendTo(plcontrolwrap);
$("#videocontrols").detach()
.appendTo(plcontrolwrap);
$("#controlswrap").remove();
$("#pollwrap").detach()
.insertAfter($("#leftcontrols"))
.removeClass()
.addClass("col-md-6 col-md-offset-6");
$("#leftpane").remove();
$("nav.navbar-fixed-top").removeClass("navbar-fixed-top");
$("#mainpage").css("padding-top", "0");
$("body").addClass("hd");
handleVideoResize();
}
function chatOnly() {
var chat = $("#chatwrap").detach();
removeVideo();
$("#wrap").remove();
$("footer").remove();
chat.prependTo($("body"));
chat.css({
"min-height": "100%",
"min-width": "100%",
margin: "0",
padding: "0"
});
$("<span/>").addClass("label label-default pull-right pointer")
.text("User Options")
.appendTo($("#chatheader"))
.click(showUserOptions);
$("<span/>").addClass("label label-default pull-right pointer")
.attr("id", "showchansettings")
.text("Channel Settings")
.appendTo($("#chatheader"))
.click(function () {
$("#channeloptions").modal();
});
$("<span/>").addClass("label label-default pull-right pointer")
.text("Emote List")
.appendTo($("#chatheader"))
.click(function () {
EMOTELISTMODAL.modal();
});
setVisible("#showchansettings", CLIENT.rank >= 2);
$("body").addClass("chatOnly");
handleWindowResize();
}
function handleWindowResize() {
if ($("body").hasClass("chatOnly")) {
var h = $("body").outerHeight() - $("#chatline").outerHeight() -
$("#chatheader").outerHeight();
var vid = $("#videowrap");
var cht = $("#chatwrap");
var isPortrait = (window.innerWidth - parseInt(vid.css("width"))) == 0;
if(!isPortrait){
vid.css("height",window.innerHeight);
cht.css("height",window.innerHeight);
}
//if ($("body").hasClass("chatOnly")) {
var rawh = $("body").outerHeight() -
($("#motdwrap").is(":visible") ? $("#motdwrap").outerHeight() : 0) -
($("#footer").is(":visible") ? $("#footer").outerHeight() : 0) -
($(".navbar").is(":visible") ? $(".navbar").outerHeight() : 0) -
$("#chatheader").outerHeight() - 1;
var h = rawh - $("#chatline").outerHeight();
$("#messagebuffer").outerHeight(h);
$("#fpaneldiv").outerHeight(h - 1);
$(".embed-responsive").outerHeight(rawh);
$("#ytapiplayer").outerHeight(rawh);
$("#userlist").outerHeight(h);
$("#sidepanel").outerHeight(h);
return;
} else {
handleVideoResize();
}
scrollChat();
}
$("#chatwrap").outerHeight(rawh);
$("#videowrap").outerHeight(rawh);
function handleVideoResize() {
if ($("#ytapiplayer").length === 0) return;
chatWidthLockoff = 0;
if(($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth() >= 1)){
lastmin = ((($("#videowrap").outerWidth() - ($("#chatwrap").offset().left + $("#chatwrap").outerWidth() - $("body").outerWidth())) / $("body").outerWidth()) * 100);
$("#videowrap").css("flex-basis", lastmin + "%");
chatWidthLockoff = $("#chatwrap").offset().left;
}
var intv, ticks = 0;
var resize = function () {
if (++ticks > 10) clearInterval(intv);
if ($("#ytapiplayer").parent().outerHeight() <= 0) return;
clearInterval(intv);
var responsiveFrame = $("#ytapiplayer").parent();
var height = responsiveFrame.outerHeight() - $("#chatline").outerHeight() - 2;
$("#messagebuffer").height(height);
$("#userlist").height(height);
$("#fpaneldiv").height(height);
sizeFPDiv();
$("#ytapiplayer").attr("height", VHEIGHT = responsiveFrame.outerHeight());
$("#ytapiplayer").attr("width", VWIDTH = responsiveFrame.outerWidth());
};
$("#fpaneldiv").outerWidth($("#chatwrap").outerWidth() * 0.7);
handleVideoResize();
if ($("#ytapiplayer").height() > 0) resize();
else intv = setInterval(resize, 500);
//scrollChat();
}
function handleVideoResize() {//rewritten to adjust width to aspect ratio
var res;
if(window.PLAYER != null && typeof(window.PLAYER.getRes) === "function" && RATIO_LOCKED && $("#chatwrap").is(":visible")){
window.PLAYER.getRes(function(x){
res = x != null ? x : [0,0];
});
rwidth = (res[0]/res[1]) * parseInt($("#ytapiplayer").css("height"));
rper = ((rwidth/$("body").outerWidth()) * 100);
$("#videowrap").css("flex-basis", rper + "%");//theres probably cleaner ways to do this but i was high as balls and tired as fuck so you're getting this hacky shit
moveSplit(rper,0)
}
}
function blindVideo(){//this and the next one especially are fucking spaghetti
if($("#videowrap").is(":visible")){
VIEW_WIDTH = $("#chatwrap").is(":visible") ? $("#videowrap").css("flex-basis") : VIEW_WIDTH;
$("#videowrap").hide();
$("#lockaspect").hide("");
$("#flipx-video").hide("");
$("#flipy-video").hide("");
$("#minicontrol").show("");
setMini();
$("#videowrap-header").css("flex-basis","auto");
}else{
$("#minicontrol").hide("");
$("#videowrap").show(handleVideoResize);
if(!RATIO_LOCKED){
$("#lockaspect").show("");
}
$("#flipx-video").show("");
$("#flipy-video").show("");
$("#videowrap").css("flex-basis", $("#chatwrap").is(":visible") ? VIEW_WIDTH : "100%");
$("#videowrap-header").css("flex-basis", VIEW_WIDTH);
}
}
function blindChat(){
if($("#chatwrap").is(":visible")){
VIEW_WIDTH = $("#videowrap").is(":visible") ? $("#videowrap").css("flex-basis") : VIEW_WIDTH;
$("#modflair").hide("");
$("#lockaspect").hide("");
$("#chatwrap").hide("blind",function(){
$("#videowrap").css("flex-basis", "100%");
$("#videowrap-header").css("flex", "1 1");
$("#chatheader").css("flex", "0 auto");
});
}else{
$("#chatwrap").show()
$("#videowrap-header").css("flex", "0 0");
$("#chatheader").css("flex", "1 1");
if(!$("#videowrap").is(":visible")){
$("#videowrap-header").css("flex-basis","auto");
}else if(!RATIO_LOCKED){
$("#lockaspect").show("");
$("#videowrap").css("flex-basis", VIEW_WIDTH);
$("#videowrap-header").css("flex-basis", VIEW_WIDTH);
}else{
handleVideoResize();
}
if(CLIENT.rank >= 2){
$("#modflair").show("");
}
}
}
function setMini(){
window.PLAYER.isPaused(function(p){
if(p){
$("#vidplay").removeClass("glyphicon-pause");
$("#vidplay").addClass("glyphicon-play");
}else{
$("#vidplay").removeClass("glyphicon-play");
$("#vidplay").addClass("glyphicon-pause");
}
});
window.PLAYER.getVolume(function(v){
if(v != 0){
$("#vidmute").removeClass("glyphicon-volume-off");
$("#vidmute").addClass("glyphicon-volume-up");
}else{
$("#vidmute").removeClass("glyphicon-volume-up");
$("#vidmute").addClass("glyphicon-volume-off");
}
});
}
function padtime(n){
return (n < 10 ? '0' : '') + n;
}
$(window).resize(handleWindowResize);
handleWindowResize();
@ -3013,7 +2917,7 @@ function checkScriptAccess(viewSource, type, cb) {
setOpt("channel_js_pref", JSPREF);
}
cb("ALLOW");
handleVideoResize();
//handleVideoResize();
});
$("#chanjs-deny").click(function () {
@ -3546,7 +3450,7 @@ CyTube.ui.changeVideoWidth = function uiChangeVideoWidth(direction) {
leftControls.className = "col-md-" + chatWidth + " col-lg-" + chatWidth;
leftPane.className = "col-md-" + chatWidth + " col-lg-" + chatWidth;
handleVideoResize();
//handleVideoResize();
};
CyTube._internal_do_not_use_or_you_will_be_banned.addUserToList = function (data, removePrev) {