diff options
| -rw-r--r-- | bairadio.css | 29 | ||||
| -rw-r--r-- | bairadio.js | 42 | ||||
| -rw-r--r-- | index.html | 4 |
3 files changed, 50 insertions, 25 deletions
diff --git a/bairadio.css b/bairadio.css index b109585..d241ee8 100644 --- a/bairadio.css +++ b/bairadio.css @@ -10,7 +10,7 @@ html, body { background: #000; color: #fff; font-family: Arial, sans-serif; - font-size: 16px; + font-size: 15px; margin: 0; padding: 0; text-align: center; @@ -144,7 +144,8 @@ h1 { } .collapse #history { - height: 1.4em; + height: 1.4em !important; + min-height: 0; overflow-y: hidden; } @@ -223,8 +224,8 @@ h1 { #history { display: block; - min-height: 1em; - max-height: 5em; + min-height: 3em; + height: 5em; overflow-y: auto; text-align: left; } @@ -256,10 +257,18 @@ h1 { content: ")"; } +#chat-count:empty:before { + content: ""; +} + +#chat-count:empty:after { + content: ""; +} + #chat-all { display: block; height: 10em; - min-height: 5em; + min-height: 4em; text-align: left; overflow-y: auto; } @@ -275,6 +284,10 @@ h1 { padding: 4px 2px; } +#chat-all .msg.history { + color: #999; +} + #chat-all .msg:last-child { border-bottom: 0; } @@ -388,7 +401,7 @@ h1 { 50% { background: #000; } } -#resize { +.resize { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGFJREFUCNdlzMENAjEMRNGflLMXQCJ7xem/CM9UYg6bIAS+vj9uxzGhit8b56M6AK39gZX0VgtWsCElOsAOviFi0j+LcS9bSCZiYiW9KJ7nrWyjFK8IbF1vx9iQC64oYvIGzlo/pBk1ZaEAAAAASUVORK5CYII=") no-repeat center; float: right; position: relative; @@ -397,11 +410,11 @@ h1 { width: 10px; } -#resize:hover { +.resize:hover { cursor: url("data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPcAAAAAAAAAAAAAAAAAAA/3cAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAAAAAAAAAAAAAAAAAAj3AAAA9wAAAAAAAAAAgACPcAAAAPcAAAAAAAAAAIcAj3AAAAAAAAAAAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAA/3cAAAAAAAAACP/3d3AAAA9wAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////////////////////8////+H///jA///wwP//8P///+Hz//3h4f/8w+H//EPz//wH///8AED//ADA//wB4f/8A/P//Af///wP///8H////D////x////8/////f////w=="),auto; } -.collapse #resize { +.collapse .resize { display: none; } diff --git a/bairadio.js b/bairadio.js index 74b9b4e..685eaff 100644 --- a/bairadio.js +++ b/bairadio.js @@ -61,6 +61,9 @@ function update(first) { } resp = resp[selectedPos]; + var currentListen = document.getElementById("current_server"); + currentListen.value = resp.server_name; + var audio = document.getElementById("stream"); resp.listenurl = "https://bienvenidoainternet.org:8443" + resp.listenurl; if (audio.src != resp.listenurl) { @@ -204,7 +207,7 @@ function changeVolume(e) { } } -function collapseWindow(e) { +function collapsePanel(e) { var box = this.parentElement.parentElement; var cont = box.getElementsByClassName("content")[0]; if (box.classList.contains("collapse")) { @@ -218,15 +221,16 @@ function collapseWindow(e) { removeSel(); } -function resizeChat(e) { +function resizePanel(e) { var mousepos = e.y; + var id = this.dataset.id; document.addEventListener("mousemove", calcResize); document.addEventListener("mouseup", function() { document.removeEventListener("mousemove", calcResize); }); function calcResize(e) { - var chat = document.getElementById("chat-all"); + var chat = document.getElementById(id); var dx = mousepos - e.y; mousepos = e.y; chat.style.height = (parseInt(getComputedStyle(chat, "").height) - dx) + "px"; @@ -247,8 +251,8 @@ const chatFloodTime = 1100; function connect() { sock = new WebSocket("wss://radio.bienvenidoainternet.org/daemon/"); sock.addEventListener("open", function(e) { - addMsg("Conectado al chat."); chatConnected = true; + sock.send("HISTORY:10"); enableChat(); }); sock.addEventListener("message", function(e) { @@ -273,10 +277,13 @@ function interpretNewMsg(info) { var arg = info.split(":"); if (arg[0] == "MSG") { - var msg = unescapeColon(arg[2]); - addMsg(msg); + addMsg(unescapeColon(arg[2]), arg[1]); } else if (arg[0] == "COUNT") { document.getElementById("chat-count").textContent = arg[1]; + } else if (arg[0] == "HMSG") { + addMsg(unescapeColon(arg[3]), unescapeColon(arg[2]), arg[1]); + } else if (arg[0] == "HISTORY_OK") { + addMsg("Conectado al chat."); } } @@ -290,7 +297,7 @@ function checkSend(e) { if (!msg) { return; } if (chatConnected) { - sendMsg("MSG:0:" + escapeColon(msg)); + sendMsg("MSG:" + escapeColon(document.getElementById("current_server").value) + ":" + escapeColon(msg)); addMsg(msg); } else { return; } @@ -312,35 +319,38 @@ function sendMsg(msg) { sock.send(msg); } -function addMsg(msg) { +function addMsg(msg, stream, time) { + var time = time || false; + var stream = stream || false; var chat = document.getElementById("chat-all"); - + var line = document.createElement("div"); - line.className = "msg"; - var presentTime = new Date(); + line.className = (time ? "msg history" : "msg"); + var presentTime = (time ? new Date(Number(time)) : new Date()); var hh = presentTime.getHours(); hh = (hh < 10) ? ("0" + hh) : hh; var mm = presentTime.getMinutes(); mm = (mm < 10) ? ("0" + mm) : mm; line.textContent = "[" + hh + ":" + mm + "] "; + if (stream) { line.textContent += "(" + stream + ") "; } line.textContent += msg; chat.appendChild(line); chat.scrollTop = chat.scrollHeight; } - document.addEventListener("DOMContentLoaded", function() { document.getElementById("control").addEventListener("click", playPause); document.getElementById("volume").addEventListener("mousedown", changeVolume); document.getElementById("server_name").addEventListener("change", function(e) { selected = this.value; }); var boxt = document.getElementsByClassName("boxtitle"); for (var i = -1; ++i < boxt.length;) { - boxt[i].addEventListener("click", collapseWindow); + boxt[i].addEventListener("click", collapsePanel); + } + var resize = document.getElementsByClassName("resize"); + for (var i = -1; ++i < resize.length;) { + resize[i].addEventListener("mousedown", resizePanel); } - document.getElementById("resize").addEventListener("mousedown", resizeChat); - document.getElementById("resize").addEventListener("mousedown", resizeChat); - //return; update(true); startVisualization(); setInterval(update, 2000); @@ -50,6 +50,7 @@ <div id="box-history-title" class="boxtitle">Historial</div> <div class="content"> <div id="history" class="box"></div> + <span class="resize" data-id="history"></span> </div> </div> </div> @@ -62,10 +63,11 @@ <div class="content"> <div id="chat-all" class="box"></div> <form autocomplete="off" id="msg_cont"> + <input id="current_server" type="hidden" /> <input id="msg_type" type="text" placeholder="Escribe un mensaje aquí" maxlength="256" autofocus="autofocus" /> <input id="msg_send" class="btn" value="Enviar" type="submit" disabled="disabled" /> </form> - <span id="resize"></span> + <span class="resize" data-id="chat-all"></span> </div> </div> </div> |