Skip to content

Instantly share code, notes, and snippets.

@zhepa zhepa/script.js
Created Feb 16, 2019

Embed
What would you like to do?
synchtube
var prevChatHeight = "";
USEROPTS.modhat = true;
document.getElementById("chatline").setAttribute("placeholder", "Напишите сообщение..");
document.querySelectorAll("input.form-control").forEach(function(e) {
e.setAttribute("style", "background-color: #2b2b2b !important")
});
$("#videocontrols").append('<button class="btn btn-sm btn-default" id="toggleCinemaMode" title="Режим кинотеатра">Режим кинотеатра</button>');
$("#toggleCinemaMode").click(function() {
var wrap = $("#wrap");
wrap.toggleClass("cinema");
var newState = wrap.hasClass("cinema");
var userListVisible = $("#userlist").is(":visible");
if (newState) {
$("#currenttitle").hide();
$("#chatheader").hide();
$("#chatwrap").attr("class", "col-lg-3 col-md-3");
$("#videowrap").attr("class", "col-lg-9 col-md-9");
prevChatHeight = $("#messagebuffer").css("height");
$("#messagebuffer").css({ "height": "calc(100% - 39px)", "background": "#151515", "border-right": "0", "border-left": 0 });
}
else {
$("#currenttitle").show();
$("#chatheader").show();
$("#chatwrap").attr("class", "col-lg-5 col-md-5");
$("#videowrap").attr("class", "col-lg-7 col-md-7");
$("#messagebuffer").attr("style", "height: " + prevChatHeight);
}
if (userListVisible) {
toggleUserlist();
}
this.innerHTML = newState ? "Обычный режим" : "Режим кинотеатра";
});
function formatChatMessage(data) {
// Backwards compat
if (!data.meta || data.msgclass) {
data.meta = {
addClass: data.msgclass,
// And the award for "variable name most like Java source code" goes to...
addClassToNameAndTimestamp: data.msgclass
};
}
// Phase 1: Determine whether to show the username or not
var skip = data.meta.addClass === "server-whisper";
// Prevent impersonation by abuse of the bold filter
if(data.msg.match(/^\s*<strong>\w+\s*:\s*<\/strong>\s*/))
skip = false;
if (data.meta.forceShowName)
skip = false;
data.msg = stripImages(data.msg);
data.msg = execEmotes(data.msg);
var div = $("<div/>");
/* drink is a special case because the entire container gets the class, not
just the message */
if (data.meta.addClass === "drink") {
div.addClass("drink");
data.meta.addClass = "";
}
// Add timestamps (unless disabled)
if (USEROPTS.show_timestamps) {
var time = $("<span/>").addClass("timestamp").appendTo(div);
var timestamp = new Date(data.time).toTimeString().split(" ")[0];
time.text(timestamp);
if (data.meta.addClass && data.meta.addClassToNameAndTimestamp) {
time.addClass(data.meta.addClass);
}
}
// Add username
var name = $("<span/>");
if (!skip) {
name.appendTo(div);
}
$("<strong/>").addClass("username").text(data.username + ": ").appendTo(name);
if (data.meta.modflair) {
name.addClass(getNameColor(data.meta.modflair));
}
if (data.meta.addClass && data.meta.addClassToNameAndTimestamp) {
name.addClass(data.meta.addClass);
}
if (data.meta.superadminflair) {
name.addClass("label")
.addClass(data.meta.superadminflair.labelclass);
$("<span/>").addClass(data.meta.superadminflair.icon)
.addClass("glyphicon")
.css("margin-right", "3px")
.prependTo(name);
}
// Add the message itself
var message = $("<span/>").appendTo(div);
message[0].innerHTML = data.msg;
// For /me the username is part of the message
if (data.meta.action) {
name.remove();
message[0].innerHTML = data.username + " " + data.msg;
}
if (data.meta.addClass) {
message.addClass(data.meta.addClass);
}
if (data.meta.shadow) {
div.addClass("chat-shadow");
}
return div;
}
(function() {
var chatlog = document.querySelectorAll("#messagebuffer > div[class^='chat-msg-']:not([class*='\$server\'])");
for (var i = 0; i < chatlog.length; i++) {
var message = chatlog[i];
var nextMessage = message.nextSibling;
//chat-msg-\$server\$
console.log()
if (nextMessage && !nextMessage.querySelector(".username")) {
var curUsername = message.querySelector(".username");
var clonedNickname = curUsername.parentNode.cloneNode(true);
nextMessage.insertBefore(clonedNickname, nextMessage.lastChild);
}
message.querySelector(".timestamp").innerHTML = message.querySelector(".timestamp").innerHTML.replace(/\[(.*)\]/, "$1");
}
}());
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=cyrillic");
#wrap {
font-family: "Roboto", sans-serif;
background: #2b2b2b;
}
.queue_temp .btn-group .glyphicon, #modflair, #footer {
display: none;
}
.navbar-toggle {
border: none;
}
.navbar, .navbar-collapse, .navbar-header {
background: #212121;
font-weight: 500;
font-size: 13px;
}
#chatheader, #currenttitle {
border: none;
background: #212121;
padding: 4px 8px;
border-radius: 0;
font-weight: 500;
font-size: 13px;
}
.btn {
background: #212121!important;
border-radius: 0!important;
border: none;
font-weight: 500;
color: #ffffffd6!important;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #3c3c3c;
}
::-webkit-scrollbar-thumb:hover {
background: #191919;
}
.embed-responsive {
background: #111111;
}
.nick-hover {
/*background-color: #262626;*/
background-color: transparent;
}
#userlist, #messagebuffer, #chatline {
border: none;
}
#userlist {
border-left: 4px solid #212121;
margin-bottom: -8px;
}
#messagebuffer {
border-right: 4px solid #212121;
border-left: 4px solid #212121;
padding-left: 0;
padding-right: 0;
}
input:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
input.form-control {
color: #c8c8c8;
border: 4px solid #212121!important;
border-radius: 0;
}
#userlist {
padding: 4px 6px;
}
#userlisttoggle {
padding-top: 3px;
font-size: 10px;
margin: 0 4px 0 2px;
}
div[class^="server-msg-"] {
border: none;
font-size: 12px;
}
div[class^="chat-msg-"] {
padding: 2px 8px;
}
div[class^="chat-msg-"]:hover .timestamp {
opacity: 0.3;
}
#chatheader .label {
margin-left: 2px;
margin-top: 2px;
font-weight: normal;
}
.navbar-nav>li>a {
border-left: none;
border-right: none;
}
nav {
border: none!important;
}
@media (min-width: 1200px) {
.col-lg-5 {
width: 35%;
}
.col-lg-7 {
width: 65%;
}
}
.queue_active.queue_temp, .queue_temp {
background-color: #212121;
background-image: none;
background-repeat: repeat;
border: none;
padding: 2px 10px;
margin-bottom: 3px!important;
font-weight: 500;
font-size: 12px;
}
.queue_temp .btn-group {
display: none;
}
.queue_temp .btn-group button {
opacity: 0.5;
}
.queue_temp .btn-group button:hover {
opacity: 1;
}
.queue_active {
border-left: 4px solid #ff4444 !important;
}
#plmeta {
border: none;
opacity: 0.6;
padding: 0 10px;
font-size: 13px;
}
.qe_time {
font-family: Roboto;
}
.timestamp {
font-size: 11px;
float: right;
opacity: 0;
margin-left: 4px;
}
.queue_entry {
display: flow-root;
}
.btn:not(.btn-xs):hover, .navbar-nav>li>a:hover, .navbar-nav>li>a:focus {
background: #191919!important
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none!important;
}
.glyphicon-time {
margin-right: 3px;
font-size: 10px;
opacity: 0.8;
}
#wrap.cinema nav {
display: none;
}
#wrap.cinema #mainpage {
padding-top: 0;
}
#wrap.cinema .col-lg-3,
#wrap.cinema .col-md-3,
#wrap.cinema .col-lg-7,
#wrap.cinema .col-md-7,
#wrap.cinema .col-lg-9,
#wrap.cinema .col-md-9 {
padding-left: 0;
padding-right: 0;
}
#wrap.cinema .container-fluid {
padding-left: 0;
padding-right: 0;
}
#wrap.cinema .row {
margin-right: 0;
margin-left: 0;
}
#wrap.cinema #main {
display: flex;
}
#wrap.cinema #chatwrap {
flex: 0 0 270px;
height: 100vh;
}
#wrap.cinema #videowrap {
flex: 1;
height: 100vh;
}
#wrap.cinema .timestamp {
display: none;
}
#wrap.cinema .embed-responsive {
height: 100%;
}
#wrap.cinema .embed-responsive-item {
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.