Agregando más funciones a chat

1 files changed, 58 insertions, 9 deletions

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();