improved server-whisper, user join/leave messages, layout/UI overhaul
This commit is contained in:
rainbownapkin
parent
e7adec32d7
commit
5f97baffc6
23 changed files with 729 additions and 917 deletions
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
155
www/js/ui.js
|
|
@ -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
380
www/js/util.js
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue