diff options
| -rw-r--r-- | bairadio.css | 40 | ||||
| -rw-r--r-- | bairadio.js | 67 | ||||
| -rw-r--r-- | index.html | 7 |
3 files changed, 97 insertions, 17 deletions
diff --git a/bairadio.css b/bairadio.css index d241ee8..5d42c5a 100644 --- a/bairadio.css +++ b/bairadio.css @@ -36,9 +36,10 @@ h1 { border-right: 1px solid #adb5c6; border-bottom: 1px solid #adb5c6; color: #2f374d; - font-size: 10px; + font-size: 9px; margin: 1px; - padding: 0 4px; + line-height: 1em; + padding: 1px 4px; text-transform: uppercase; outline: 1px outset #adb5c6; } @@ -60,6 +61,17 @@ h1 { outline: 1px outset #5a5a5a; } +.btn.toggle-on { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TtSIVBzuIOGSoThaKijhqFYpQIdQKrTqYvPQPmjQkKS6OgmvBwZ/FqoOLs64OroIg+APi5Oik6CIl3pcUWsT44PI+znvncN99gNCoMM3qigOabpvpZELM5lbF0CuCCFP1IC4zy5iTpBR819c9Any/i/Es/3t/rn41bzEgIBLPMsO0iTeIpzdtg/M+cYSVZJX4nHjcpAaJH7muePzGueiywDMjZiY9TxwhFosdrHQwK5ka8RRxVNV0yheyHquctzhrlRpr9clfGM7rK8tcpxpBEotYggQRCmooowIbMdp1Uiyk6Tzh4x92/RK5FHKVwcixgCo0yK4f/A9+z9YqTE54SeEE0P3iOB+jQGgXaNYd5/vYcZonQPAZuNLb/moDmPkkvd7WokfAwDZwcd3WlD3gcgcYejJkU3alIJVQKADvZ/RNOWDwFuhb8+bWOsfpA5ChWaVugINDYKxI2es+7+7tnNu/d1rz+wEdv3KFwJkSCwAAAAZiS0dEAAAA1gAAcEfy/QAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAClJREFUCNdj9IrK/s+AA7AwMDAwbKuZiiFxleMTAxMDHkC+JAvMfGwAAF1aB4OnYynVAAAAAElFTkSuQmCC"); +} +.btn.toggle-off { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TtSIVBzuIOGSoThaKijhqFYpQIdQKrTqYvPQPmjQkKS6OgmvBwZ/FqoOLs64OroIg+APi5Oik6CIl3pcUWsT44PI+znvncN99gNCoMM3qigOabpvpZELM5lbF0CuCCFP1IC4zy5iTpBR819c9Any/i/Es/3t/rn41bzEgIBLPMsO0iTeIpzdtg/M+cYSVZJX4nHjcpAaJH7muePzGueiywDMjZiY9TxwhFosdrHQwK5ka8RRxVNV0yheyHquctzhrlRpr9clfGM7rK8tcpxpBEotYggQRCmooowIbMdp1Uiyk6Tzh4x92/RK5FHKVwcixgCo0yK4f/A9+z9YqTE54SeEE0P3iOB+jQGgXaNYd5/vYcZonQPAZuNLb/moDmPkkvd7WokfAwDZwcd3WlD3gcgcYejJkU3alIJVQKADvZ/RNOWDwFuhb8+bWOsfpA5ChWaVugINDYKxI2es+7+7tnNu/d1rz+wEdv3KFwJkSCwAAAAZiS0dEAAAA1gAAcEfy/QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAClJREFUCNdj9IrK/s+AA7AwMDAwnGCciSFxuPkdAxMDHkC+JAvMfGwAAF57B+ivUX9rAAAAAElFTkSuQmCC"); +} +.btn.toggle-on, .btn.toggle-off { + background-repeat: no-repeat; + background-position: 4px 50%; +} + .sep { display: block; } @@ -284,6 +296,10 @@ h1 { padding: 4px 2px; } +.show-own #chat-all .msg.own { + background: #002900; +} + #chat-all .msg.history { color: #999; } @@ -304,7 +320,7 @@ h1 { display: block; } -#msg_cont { +#msg_cont, #msg_opts { display: flex; display: -moz-flex; display: -ms-flex; @@ -323,10 +339,6 @@ h1 { border-right: 2px solid #6a6a7a; border-bottom: 2px solid #6a6a7a; color: #fff; - flex: 1; - -ms-flex: 1; - -moz-flex: 1; - -webkit-flex: 1; margin-right: 4px; padding: 2px; width: 100%; @@ -339,6 +351,20 @@ h1 { -webkit-flex-shrink: 0; } +#msg_type, #msg_opts input { + flex: 1; + -ms-flex: 1; + -moz-flex: 1; + -webkit-flex: 1; +} + +#msg_opts input { + margin-right: 4px; +} +#msg_opts input:last-child { + margin-right: 0; +} + #vis-cont { display: inline-block; max-height: 91px; diff --git a/bairadio.js b/bairadio.js index 685eaff..104e2f3 100644 --- a/bairadio.js +++ b/bairadio.js @@ -69,6 +69,7 @@ function update(first) { if (audio.src != resp.listenurl) { audio.src = resp.listenurl; if (!first) { playPause(); } + if (document.getElementById("chat-filter")) { filterChat(true); } } var current = artist.textContent + title.textContent; @@ -153,15 +154,15 @@ function checkLong() { var cont = document.getElementById("nowplaying"); var strip = document.getElementById("nowplaying-txt"); - var marquee = document.getElementById("marqueeStyle"); - if (marquee) marquee.parentElement.removeChild(marquee); + var marquee = document.getElementById("marquee-style"); + if (marquee) { marquee.parentElement.removeChild(marquee); } var ws = strip.clientWidth; var wc = cont.clientWidth if (ws > wc) { var travel = ws - (wc-10); var style = document.createElement("style"); - style.id = "marqueeStyle"; + style.id = "marquee-style"; var dur = Math.round(travel/10); if (dur < 3) { dur++; } style.textContent = "#nowplaying-txt {\n -webkit-animation: marquee " + dur + "s linear infinite;\n animation: marquee " + dur + "s linear infinite;\n}\n"; @@ -294,11 +295,12 @@ function checkSend(e) { var msgField = document.getElementById("msg_type"); var msg = msgField.value.trim(); + var stream = document.getElementById("current_server").value; if (!msg) { return; } if (chatConnected) { - sendMsg("MSG:" + escapeColon(document.getElementById("current_server").value) + ":" + escapeColon(msg)); - addMsg(msg); + sendMsg("MSG:" + escapeColon(stream) + ":" + escapeColon(msg)); + addMsg(msg, stream, false, true); } else { return; } msgField.value = ""; @@ -319,29 +321,54 @@ function sendMsg(msg) { sock.send(msg); } -function addMsg(msg, stream, time) { +function addMsg(msg, stream, time, own) { var time = time || false; var stream = stream || false; + var own = own || false; var chat = document.getElementById("chat-all"); var line = document.createElement("div"); - line.className = (time ? "msg history" : "msg"); + line.className = (own ? "msg own" : (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 + ") "; } + if (stream) { + line.textContent += "(" + stream + ") "; + line.dataset.stream = stream; + } line.textContent += msg; chat.appendChild(line); chat.scrollTop = chat.scrollHeight; } + +function filterChat(enable) { + var filter = document.getElementById("chat-filter"); + if (filter) { filter.parentElement.removeChild(filter); } + + if (enable) { + var current = document.getElementById("current_server").value; + var style = document.createElement("style"); + style.id = "chat-filter"; + style.textContent = '[data-stream] { display: none; }'; + style.textContent += '[data-stream^="' + current + '"] { display: block; }'; + document.getElementsByTagName("head")[0].appendChild(style); + } + + var chat = document.getElementById("chat-all"); + 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; }); + 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", collapsePanel); @@ -350,6 +377,28 @@ document.addEventListener("DOMContentLoaded", function() { for (var i = -1; ++i < resize.length;) { resize[i].addEventListener("mousedown", resizePanel); } + + document.getElementById("show_own").addEventListener("click", function(e) { + if (document.body.hasAttribute("class")) { + document.body.removeAttribute("class"); + this.className = "btn toggle-off"; + } else { + document.body.className = "show-own"; + this.className = "btn toggle-on"; + } + }); + document.getElementById("stream_filter").addEventListener("click", function(e) { + if (document.getElementById("chat-filter")) { + filterChat(false); + this.className = "btn toggle-off"; + } else { + filterChat(true); + this.className = "btn toggle-on"; + } + }); + document.getElementById("clear_chat").addEventListener("click", function(e) { + document.getElementById("chat-all").textContent = ""; + }); update(true); startVisualization(); @@ -67,6 +67,11 @@ <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> + <div id="msg_opts"> + <input id="show_own" class="btn toggle-off" type="button" value="Marcar propios" /> + <input id="stream_filter" class="btn toggle-off" type="button" value="Filtrar por show" /> + <input id="clear_chat" class="btn" type="button" value="Limpiar chat" /> + </div> <span class="resize" data-id="chat-all"></span> </div> </div> @@ -75,7 +80,7 @@ <div class="sep"></div> <div id="footer"> - bmus v0.3 ★ + bmus v0.4 ★ <a href="https://bienvenidoainternet.org/" target="_blank">Bienvenido a Internet</a> ★ 2010-2020 </div> </body> |