Init

1 files changed, 728 insertions, 0 deletions

diff --git a/baitv.js b/baitv.js
new file mode 100644
index 0000000..93308af
--- /dev/null
+++ b/baitv.js
@@ -0,0 +1,728 @@
+var s;

+var antiflood = false;

+var is_connected = false;

+var chat_num = 0;

+var focused = true;

+var comments_hidden = false;

+var video, hls, dash;

+var current_source;

+var notice_audio;

+var loading_timer;

+

+var live_mode = "hls";

+var live_time = -1;

+var modpanel = null;

+var mod = false;

+var mod_name = "";

+

+var is_fullscreen;

+var fullscreen_activity = {on: false, hide: null};

+var notice_activity = {on: false, hide: null, blink: null};

+

+var CHAT_FACTOR = (ANIM_MAX - ANIM_MIN) / MAXCHAR;

+

+function removeThis(e) {

+    e.target.parentElement.removeChild(e.target);

+}

+

+const formatTime = (seconds, h = Math.floor(seconds / 3600), m = Math.floor((seconds % 3600) / 60), s = Math.floor(seconds) % 60) => [h, m > 9 ? m : '0' + m, s > 9 ? s : '0' + s].filter(s => s).join(':');

+

+function escapeColon(msg) {

+    return msg ? msg.replace(/:/g, "%3A") : "";

+}

+

+function translateColon(msg) {

+    return msg ? msg.replace(/%3A/g, ":") : "";

+}

+

+function escapeHTML(unsafe) {

+    return unsafe

+         .replace("&", "&")

+         .replace("<", "&lt;")

+         .replace(">", "&gt;")

+         .replace("\"", "&quot;")

+         .replace("'", "&#039;");

+}

+

+function show_chat(msg, color, own) {

+    if(!focused) return;

+

+    var chat = document.getElementById("chat");

+    var chats = chat.children;

+    var chat_rect = chat.getBoundingClientRect();

+   

+    var line = 0;

+

+    for(var i = 0; i < chats.length; i++) {

+        var el = chats[i];

+        var rect = el.getBoundingClientRect();

+

+        if(

+	    el.dataset.line == line &&

+	    (rect.left - chat_rect.left + rect.width) > (chat_rect.width - CHAT_SEP)

+          )

+    	{

+            i = 0;

+            line++;

+        }

+    }

+ 

+    var obj = document.createElement('span');

+    obj.style.boxSizing = "content-box";

+    obj.textContent = msg;

+    obj.dataset.line = line;

+    obj.addEventListener("transitionend", removeThis);

+    chat.appendChild(obj);

+

+    if(own)

+        obj.classList.add("own");

+    

+    var width = Math.round(obj.getBoundingClientRect().width);

+    var height = parseFloat(getComputedStyle(obj).getPropertyValue("height"));

+

+    obj.style.top = ((height+LINE_SEP)*line) + "px";

+    obj.style.transitionDuration = (ANIM_MIN + (msg.length * CHAT_FACTOR)) + "s";

+    obj.style.left = "-" + width + "px";

+}

+

+function show_notice(name, msg) {

+    document.getElementById("noticebox").style.backgroundImage = "none";

+    document.getElementById("notice").innerHTML = anchorme(escapeHTML(msg), {truncate: 20});

+    document.getElementById("notice").style.animation = "blinker 0.2s step-start infinite";

+    document.getElementById("author").textContent = (name ? name : "Streamer");

+

+    if(is_fullscreen)

+        document.getElementById("noticebox").style.display = "block";

+

+    if(!video.muted) {

+	    if(typeof variable === 'undefined')

+		notice_sound = new Audio("notice.opus");

+

+	    notice_sound.volume = video.volume;

+	    notice_sound.play();

+    }

+

+    clearTimeout(notice_activity.hide);

+    clearTimeout(notice_activity.blink);

+    notice_activity.hide = setTimeout(hide_notice, NOTICE_TIME);

+    notice_activity.blink = setTimeout(stop_notice_blink, NOTICE_BLINK_TIME);

+    notice_activity.on = true;

+}

+

+function stop_notice_blink() {

+    document.getElementById("notice").style.animation = "none";

+}

+

+function hide_notice() {

+    document.getElementById("noticebox").style.backgroundImage = "url('baitvlogo.png')";

+    document.getElementById("notice").textContent = "";

+    document.getElementById("author").textContent = "";

+    if(is_fullscreen)

+        document.getElementById("noticebox").style.display = "none";

+    notice_activity.on = false;

+}   

+

+function get_time() {

+    var time = new Date();

+    return (

+        ("0" + time.getHours()).slice(-2)   + ":" + 

+	("0" + time.getMinutes()).slice(-2) + ":" + 

+	("0" + time.getSeconds()).slice(-2));

+}

+

+function show_tt(e) {

+    var tt = document.getElementById("tt");

+

+    tt.style.visibility = "visible";

+    tt.textContent = this.children[0].textContent;

+    tt.style.left = (e.pageX + 10) + "px";

+    tt.style.top = (e.pageY + 10) + "px";

+}

+

+function hide_tt(e) {

+    var tt = document.getElementById("tt");

+

+    tt.style.visibility = "hidden";

+}

+

+function show_chatbox(msg, classname) {

+    var chatbox = document.getElementById("chatbox");

+    var chatbox_length = chatbox.children.length;

+

+    if(chatbox_length >= CHATBOX_MAX)

+        chatbox.removeChild(chatbox.firstChild);

+

+    var line = document.createElement('div');

+    var content = document.createElement('span');

+    var time = document.createElement('span');

+

+    //line.classList.add("l" + (chat_num ^= 1));

+    line.addEventListener("mousemove", show_tt);

+    line.addEventListener("mouseout", hide_tt);

+

+    if(classname)

+        line.classList.add(classname);

+

+    content.textContent = msg;

+    content.className = "msg";

+    line.appendChild(content);

+

+    //time.textContent = get_time();

+    time.textContent = get_live_time();

+    time.className = "time";

+    line.appendChild(time);

+

+    chatbox.appendChild(line);

+    chatbox.scrollTop = chatbox.scrollHeight;

+}

+

+function on_msg(line) {

+    console.log("<< " + line);

+

+    var args = line.split(':');

+  

+    if(args[0] == "MSG") {

+        var color = args[1];

+        var msg = translateColon(args[2]);

+        show_chat(msg, color, false);

+	    show_chatbox(msg, null);

+    } else if (args[0] == "FMSG") {

+	    var id = args[1];

+        var color = args[2];

+        var msg = translateColon(args[3]);

+        show_chat(msg, color, false);

+	    show_chatbox("["+id+"] " + msg, null);	

+    } else if (args[0] == "NOTICE") {

+        var name = args[1];

+        var msg = translateColon(args[2]);

+        show_notice(name, msg);

+	    show_chatbox((name ? "["+name+"] "+msg : msg), "mod");

+    } else if (args[0] == "COUNT") {

+        document.getElementById("viewers").textContent = args[1];

+    } else if (args[0] == "SOURCE") {

+	    switch_source(args[1], parseInt(args[2]));

+    } else if (args[0] == "TITLE") {

+        var title = translateColon(args[1]);

+        set_title(title);

+    } else if (args[0] == "KICKED" || args[0] == "BANNED") {

+    	show_chatbox("Un usuario fue expulsado.", "warn");

+    } else if (args[0] == "YOU_KICKED" || args[0] == "YOU_BANNED") {

+    	show_chatbox("¡Fuiste expulsado!", "warn");

+    } else if (args[0] == "BADPASS") {

+    	set_status("Mod: PSK erróneo.");

+    } else if (args[0] == "LOGIN_OK") {

+    	set_status("Mod: Log in suceso.");

+    	enable_modpanel(true, args[1]);

+    } else if (args[0] == "LOGOUT_OK") {

+        set_status("Mod: Log out suceso.");

+    	enable_modpanel(false, "");

+    } else {

+    	if(mod) set_status(line);

+    }

+}

+

+function set_title(title) {

+    document.getElementById("title").textContent = title ? title : "Sin título";

+}

+

+function set_status(msg) {

+    show_chatbox(msg, "sys");

+    console.log(msg);

+}

+

+function video_play() {

+    video.muted = false;

+    if(typeof Promise === "function") {

+    	var promise = video.play();

+

+    	promise.catch(function(e) {

+    		console.log("Your browser is rejecting autoplay; attempting to play muted.");

+    		video.muted = true;

+    		video.play();

+    	});

+    } else { 

+    	console.log("Promise not supported; muting just in case.");

+        video.muted = true;

+        video.play();

+    }

+}

+

+function video_volume() {

+    if(video.muted) video.muted = false;

+    video.volume = this.value;

+}

+

+function parse_state(msg) {

+    var state = JSON.parse(msg);

+

+    switch_source(state.source, state.source_time);

+    set_title(translateColon(state.title));

+

+    if(state.welcome)

+        show_chatbox(state.welcome, "sys");

+}

+

+function switch_source(source, src_time) {

+    if(!PLAY) return;

+    if(current_source == source) return;

+    

+    console.log("Switching source to: " + source);

+

+    if(source == "live") {

+        console.log(src_time);

+        // hls.js

+        video.src = "";

+        video.loop = false;

+        video.addEventListener("waiting", event_waiting);

+        video.addEventListener("canplay", event_canplay);

+        source_time = src_time

+        

+        if(live_mode == "hls") {

+            if(Hls.isSupported()) {

+        		hls = new Hls(HLS_CONFIG);

+        		hls.loadSource(MEDIA_HLS_URL);

+        		hls.attachMedia(video);

+                video_play();

+        		hls.on(Hls.Events.MANIFEST_PARSED,function() {video_play();});

+        		hls.on(Hls.Events.ERROR, on_hls_error);

+        		hls.on(Hls.Events.FRAG_CHANGED,function(event,data) {

+        			live_time = Math.floor((data.frag.programDateTime / 1000) - data.frag.start) - source_time;

+        		});

+            } else { set_status("Tu navegador no soporta HLS. Cancelando."); return; }

+        } else if(live_mode == "dash") {

+            if ( typeof ( window.MediaSource || window.WebKitMediaSource ) === "function" ) {

+                if(!dash) dash = dashjs.MediaPlayer().create();

+                dash.initialize();

+                //dash.getDebug().setLogToBrowserConsole(true);

+                dash.setAutoPlay(false);

+                dash.setManifestLoaderRetryAttempts(7);

+                dash.setManifestLoaderRetryInterval(5);

+                dash.on(dashjs.MediaPlayer.events.CAN_PLAY, video_play);

+                dash.attachView(video);

+                dash.attachSource(MEDIA_DASH_URL);

+                event_waiting();

+                live_time = 0;

+                set_status("Nota: Utilizando DASH. ¡Experimental!");

+            } else { set_status("Tu navegador no soporta MediaSource. Cancelando."); return; }

+        } else if(live_mode == "rx") {

+            if ( typeof ( window.MediaSource || window.WebKitMediaSource ) === "function" ) {

+                var rx = new RxPlayer({videoElement: video});

+                rx.loadVideo({url: MEDIA_DASH_URL, transport:"dash", autoPlay:false});

+                live_time = 0;

+                set_status("Nota: Utilizando DASH (rx). ¡Experimental!");

+                video_play();

+            } else { set_status("Tu navegador no soporta MediaSource. Cancelando."); return; }

+        } else if(live_mode == "shaka") {

+            shaka.polyfill.installAll();

+            if(shaka.Player.isBrowserSupported()) {

+                var player = shaka.Player(video);

+                player.load(MEDIA_DASH_URL).then(video_play);

+                live_time = 0;

+                set_status("Nota: Utilizando DASH (shaka). ¡Experimental!");

+            } else { set_status("Tu navegador no soporta Shaka. Cancelando."); return; }

+        }

+        document.getElementById("livestatus").classList.add("live");

+    } else {

+        if(current_source == "live") {

+            if(hls) { 

+                hls.detachMedia();

+                hls.destroy();

+                console.log("hls.js destroyed");

+            }

+            if(dash) {

+                dash.reset();

+                console.log("dash.js destroyed");

+            }

+        }

+            

+        source_time = -1

+        live_time = -1;

+        document.getElementById("time").textContent = "--:--";

+

+        video.src = IDLE_VIDEO;

+        video.loop = true;

+        video.muted = true;

+        video.removeEventListener("waiting", event_waiting);

+        video.removeEventListener("canplay", event_canplay);

+        event_canplay();

+        video.play();

+

+        document.getElementById("livestatus").classList.remove("live");

+    }

+

+    current_source = source;

+

+}

+function on_hls_error(e, data) {

+    console.log(data['type']);

+    console.log(data['details']);

+}

+

+function update_controls() {

+    document.getElementById("volume").style.opacity = video.muted ? 0.5 : 1;

+    document.getElementById("mute").children[0].style.display = video.muted ? "none" : "block";

+    document.getElementById("mute").children[1].style.display = video.muted ? "block" : "none";

+    document.getElementById("volume").value = video.volume;

+}

+

+function get_live_time() {

+    if(current_source == "live") {

+        return formatTime(live_time + video.currentTime);

+    } else {

+        return "--:--"

+    }

+}

+

+function update_time() {

+    if(current_source == "live")

+        document.getElementById("time").textContent = get_live_time();

+}

+

+function on_play() {

+    if(video.paused)

+        video.play()

+    else

+    	video.pause()

+}

+

+function on_mute() {

+    video.muted = !video.muted;

+}

+

+function on_hidecomments() {

+    if(comments_hidden) {

+    	document.getElementById("chat").style.visibility = "visible";

+    	document.getElementById("hidecomments").children[0].style.display = "block";

+    	document.getElementById("hidecomments").children[1].style.display = "none";

+    	comments_hidden = false;

+    } else {

+    	document.getElementById("chat").style.visibility = "hidden";

+    	document.getElementById("hidecomments").children[0].style.display = "none";

+    	document.getElementById("hidecomments").children[1].style.display = "block";

+	comments_hidden = true;

+    }

+}

+

+function on_fullscreen() {

+    var elem = document.getElementById("player");

+

+	if (

+  		document.fullscreenElement || /* Standard syntax */

+  		document.webkitFullscreenElement || /* Chrome, Safari and Opera syntax */

+  		document.mozFullScreenElement ||/* Firefox syntax */

+  		document.msFullscreenElement /* IE/Edge syntax */

+	) {

+		console.log("requesting exit full screen");

+		if (document.exitFullscreen) {

+			document.exitFullscreen();

+		} else if (document.mozCancelFullScreen) { /* Firefox */

+			document.mozCancelFullScreen();

+  		} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */

+    		document.webkitExitFullscreen();

+  		} else if (document.msExitFullscreen) { /* IE/Edge */

+  			document.msExitFullscreen();

+  		}

+	} else {

+		console.log("requesting full screen");

+		if (elem.requestFullscreen) {

+			elem.requestFullscreen();

+		} else if (elem.mozRequestFullScreen) { /* Firefox */

+			elem.mozRequestFullScreen();

+		} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */

+			elem.webkitRequestFullscreen();

+		} else if (elem.msRequestFullscreen) { /* IE/Edge */

+			elem.msRequestFullscreen();

+		}

+	}

+}

+

+function fullscreen_clear() {

+    fullscreen_base(false);

+    clearTimeout(fullscreen_activity.hide);

+    fullscreen_activity.on = false;

+}

+

+function fullscreen_base(show) {

+    var base = document.getElementById("base");

+

+    base.style.visibility = show ? "" : "hidden";

+    document.getElementById("player").style.cursor = show ? "" : "none";

+}

+function fullscreen_move(e) {

+    if(!fullscreen_activity.on) {

+        fullscreen_base(true);

+        fullscreen_activity.on = true;

+    }

+

+    clearInterval(fullscreen_activity.hide);

+    fullscreen_activity.hide = setInterval(fullscreen_clear, BASE_SHOW_TIME);

+}

+

+function fullscreen_event() {

+    console.log("fullscreen event");

+    var noticebox = document.getElementById("noticebox");

+    var base = document.getElementById("base");

+    

+    if(document.fullscreenElement) {

+        base.style.position = "absolute";

+        base.style.opacity = "0.7";

+        noticebox.style.position = "absolute";

+        if(!notice_activity.on) {

+            noticebox.style.display = "none";

+        }

+        fullscreen_move(null);

+        document.getElementById("player").addEventListener("mousemove", fullscreen_move);

+        document.getElementById("player").addEventListener("keypress", fullscreen_move);

+        document.getElementById("chat_msg").focus();

+        is_fullscreen = true;

+    } else {

+        base.style.position = "";

+        base.style.opacity = "";

+        noticebox.style.position = "";

+        noticebox.style.display = "";

+        clearInterval(fullscreen_activity.hide);

+        fullscreen_base(true);

+        document.getElementById("player").removeEventListener("mousemove", fullscreen_move);

+        document.getElementById("player").removeEventListener("keypress", fullscreen_move);

+        is_fullscreen = false;

+    }

+}

+function event_waiting() {

+    loading_timer = setTimeout(show_loading, 1000);

+}

+function show_loading() {

+    document.getElementById("loading").style.display="block";

+}

+function event_canplay() {

+    clearInterval(loading_timer);

+    document.getElementById("loading").style.display="none";

+}

+    

+function start() {

+    console.log("baitv.js 0.4");

+

+    if(window.location.href.endsWith("?dash")) live_mode = "dash";

+    if(window.location.href.endsWith("?rx")) live_mode = "rx";

+    if(window.location.href.endsWith("?shaka")) live_mode = "shaka";

+

+    video = document.getElementById('video');

+

+    if(PLAY) {

+    	var req = new XMLHttpRequest();

+    	req.onload = function(e) { parse_state(req.response); }

+    	req.open("GET", STATE_URL + "?t=" + Date.now());

+    	req.send();

+    }

+    if(CONNECT) {

+        s = new WebSocket(ADDRESS);

+        s.addEventListener("message", function(e) { on_msg(e.data); });

+        s.addEventListener("open", function(e) { set_status("Conectado al chat."); is_connected = true; enable_chat(); });

+        s.addEventListener("close", function(e) {

+            set_status("Desconectado del chat. " + (e.reason ? "Razón: "+e.reason : "Código: "+e.code));

+            is_connected = false;

+            document.getElementById("viewers").textContent = "-";

+        });

+    }

+

+    document.getElementById("sendchat").addEventListener("click", on_send);

+    //document.getElementById("playbtn").addEventListener("click", on_play);

+    document.getElementById("mute").addEventListener("click", on_mute);

+    document.getElementById("hidecomments").addEventListener("click", on_hidecomments);

+    document.getElementById("fullscreen").addEventListener("click", on_fullscreen);

+

+    var vol = document.getElementById("volume");

+    vol.min = 0;

+    vol.max = 1;

+    vol.step = 0.01;

+    vol.addEventListener("input", video_volume);

+    video.addEventListener("volumechange", update_controls);

+    video.addEventListener("timeupdate", update_time);

+   

+    //video.addEventListener("stalled", function() {console.log("stalled");});

+    //video.addEventListener("playing", function() {console.log("playing");});

+    

+    document.getElementById("chat_msg").focus();

+}

+

+function send_msg(msg) {

+    console.log(">> " + msg);

+    s.send(msg);

+}

+

+function enable_chat() {

+    antiflood = false;

+    document.getElementById("sendchat").disabled = false;

+}

+

+function on_send(e) {

+    e.preventDefault();

+    if(!is_connected) return;

+    if(antiflood) return;

+

+    var msg = document.getElementById("chat_msg");

+    var msg_str = msg.value.trim().substr(0, MAXCHAR);

+    var send = document.getElementById("sendchat");

+    var colors = document.getElementById("colors");

+

+    if(!msg_str) return;

+

+    if(is_connected) send_msg("MSG:" + colors.value + ":" + escapeColon(msg_str));

+    show_chat(msg_str, colors.value, true);

+    show_chatbox(msg_str, "own");

+

+    if(is_fullscreen) fullscreen_clear();

+    msg.value = "";

+    antiflood = true;

+    send.disabled = true;

+    setTimeout(enable_chat, FLOOD_TIME);

+}

+

+window.addEventListener("load", start);

+window.onfocus = function() {focused = true;};

+window.onblur = function() {focused = false;};

+window.addEventListener ("keydown", function (e) {

+    if (e.ctrlKey && e.key === ",") {

+	    console.log("Showing mod panel");

+	    toggle_modpanel();

+    }

+});

+document.addEventListener("fullscreenchange", fullscreen_event);

+document.addEventListener("mozfullscreenchange", fullscreen_event);

+document.addEventListener("webkitfullscreenchange", fullscreen_event);

+document.addEventListener("msfullscreenchange", fullscreen_event);

+

+function enable_modpanel(val, name) {

+	mod = val;

+	mod_name = name;

+

+	document.getElementById("txt_psk").disabled = val;

+	document.getElementById("btn_psk").textContent = val ? "Salir" : "Identificarse";

+	document.getElementById("txt_notice").disabled = !val;

+	document.getElementById("btn_notice").disabled = !val;

+	document.getElementById("chk_showname").disabled = !val;

+	document.getElementById("txt_mod").disabled = !val;

+	document.getElementById("btn_kick").disabled = !val;

+	document.getElementById("btn_ban").disabled = !val;

+	document.getElementById("txt_title").disabled = !val;

+	document.getElementById("btn_title").disabled = !val;

+	

+	document.getElementById("lbl_subtitle").textContent = name ? "Identificado como: " + name : "Sin permisos"

+}

+

+function toggle_modpanel() {

+    if(modpanel == null) {

+        modpanel = document.createElement("div");

+        modpanel.className = "modpanel";

+        modpanel.style.display = "none";

+

+        var title = document.createElement("h3");

+        title.textContent = "Panel de streamer";

+        modpanel.appendChild(title);

+        

+        var subtitle = document.createElement("h4");

+        subtitle.id = "lbl_subtitle";

+        subtitle.textContent = "Sin permisos";

+        modpanel.appendChild(subtitle);

+

+        var line1 = document.createElement("div");

+        var line2 = document.createElement("div");

+        var line3 = document.createElement("div");

+        var line4 = document.createElement("div");

+

+        line1.appendChild(document.createTextNode("PSK: "));

+        var txt_psk = document.createElement("input");

+        txt_psk.id = "txt_psk";

+        txt_psk.type = "password";

+        txt_psk.size = "20";

+        txt_psk.addEventListener("keydown", function(e) {if (e.keyCode === 13) btn_psk.click();}); 

+        line1.appendChild(txt_psk);

+        var btn_psk = document.createElement("button");

+        btn_psk.id = "btn_psk";

+        btn_psk.type = "button";

+        btn_psk.textContent = "Identificarse";

+        btn_psk.onclick = function() { if(txt_psk.value && is_connected) {send_msg(mod ? "LOGOUT" : "LOGIN:" + txt_psk.value); txt_psk.value = "";} };

+        line1.appendChild(btn_psk);

+

+        line2.appendChild(document.createTextNode("Noticia: "));

+        var txt_notice = document.createElement("input");

+        txt_notice.id = "txt_notice";    

+        txt_notice.type = "text";

+        txt_notice.size = "40";

+        txt_notice.maxlength = "80";

+        txt_notice.disabled = true;

+        txt_notice.addEventListener("keydown", function(e) {if (e.keyCode === 13) btn_notice.click();}); 

+        line2.appendChild(txt_notice);

+        var chk_showname = document.createElement("input");

+        chk_showname.id = "chk_showname";

+        chk_showname.type = "checkbox";

+        chk_showname.disabled = true;

+        var lbl_showname = document.createElement("label");

+        lbl_showname.appendChild(chk_showname);

+        var lbl_lbl = document.createElement("small");

+        lbl_lbl.textContent = "Usar nombre";

+        lbl_showname.appendChild(lbl_lbl);

+        line2.appendChild(lbl_showname);

+        var btn_notice = document.createElement("button");

+        btn_notice.id = "btn_notice";

+        btn_notice.type = "button";

+        btn_notice.disabled = true;

+        btn_notice.textContent = "Enviar";

+            btn_notice.onclick = function() { if(txt_notice.value && is_connected) {

+            var msg = txt_notice.value;

+            var showname = chk_showname.checked;

+            send_msg("NOTICE:" + (showname?"1":"0") + ":" + escapeColon(msg));

+            show_notice((showname?mod_name:""), msg);

+            show_chatbox((showname ? "["+mod_name+"] "+msg : msg), "mod");

+            txt_notice.value = "";

+        }};

+        line2.appendChild(btn_notice);

+

+        line3.appendChild(document.createTextNode("Moderación: "));

+        var txt_mod = document.createElement("input");

+        txt_mod.id = "txt_mod";

+        txt_mod.type = "text";

+        txt_mod.disabled = true;

+        line3.appendChild(txt_mod);

+        var btn_kick = document.createElement("button");

+        btn_kick.id = "btn_kick";

+        btn_kick.type = "button";

+        btn_kick.disabled = true;

+        btn_kick.textContent = "Kickear";

+        btn_kick.onclick = function() { if(txt_mod.value && is_connected) {send_msg("KICK:" + txt_mod.value); txt_mod.value = "";} };

+        line3.appendChild(btn_kick);

+        var btn_ban = document.createElement("button");

+        btn_ban.id = "btn_ban";

+        btn_ban.type = "button";

+        btn_ban.disabled = true;

+        btn_ban.textContent = "Banear";

+        line3.appendChild(btn_ban);

+        line4.appendChild(document.createTextNode("Título: "));

+        var txt_title = document.createElement("input");

+        txt_title.id = "txt_title";

+        txt_title.type = "text";

+        txt_title.size = "30";

+        txt_title.maxlength = "35";

+        txt_title.disabled = true;

+        txt_title.addEventListener("keydown", function(e) {if (e.keyCode === 13) btn_title.click();}); 

+        line4.appendChild(txt_title);

+        var btn_title = document.createElement("button");

+        btn_title.id = "btn_title";

+        btn_title.type = "button";

+        btn_title.disabled = true;

+        btn_title.textContent = "Cambiar";

+        btn_title.onclick = function() {

+            if(is_connected) send_msg("SETTITLE:" + escapeColon(txt_title.value));

+            set_title(txt_title.value);

+            txt_title.value = "";

+        };

+        line4.appendChild(btn_title);

+

+        modpanel.appendChild(line1);

+        modpanel.appendChild(line2);

+        modpanel.appendChild(line3);

+        modpanel.appendChild(line4);

+        document.getElementById("bottompanel").appendChild(modpanel);

+    }

+

+    modpanel.style.display = (modpanel.style.display == "block" ? "none" : "block");

+}