Agregando historial de mensajes

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