Agregando más funciones a chat

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();
diff --git a/index.html b/index.html
index da625d4..c983957 100644
--- a/index.html
+++ b/index.html
@@ -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>