From 5aa59bf662561980755acf131897379092eeeba3 Mon Sep 17 00:00:00 2001
From: jay
Date: Wed, 11 Mar 2020 22:56:41 -0300
Subject: Agregando historial de mensajes
---
bairadio.css | 29 +++++++++++++++++++++--------
bairadio.js | 42 ++++++++++++++++++++++++++----------------
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);
diff --git a/index.html b/index.html
index 1d98d98..da625d4 100644
--- a/index.html
+++ b/index.html
@@ -50,6 +50,7 @@
Historial
@@ -62,10 +63,11 @@
--
cgit v1.2.1-18-gbd029