diff options
| -rw-r--r-- | bairadio.css | 128 | ||||
| -rw-r--r-- | bairadio.js | 90 | ||||
| -rw-r--r-- | index.html | 9 |
3 files changed, 149 insertions, 78 deletions
diff --git a/bairadio.css b/bairadio.css index 8b8c26d..b109585 100644 --- a/bairadio.css +++ b/bairadio.css @@ -18,6 +18,7 @@ html, body { a, a:visited, a:hover { color: #fff; + text-decoration: none; } a:active { @@ -28,6 +29,37 @@ h1 { margin: 16px 0; } +.btn { + background: #bdced6; + border-top: 1px solid #f9feff; + border-left: 1px solid #f9feff; + border-right: 1px solid #adb5c6; + border-bottom: 1px solid #adb5c6; + color: #2f374d; + font-size: 10px; + margin: 1px; + padding: 0 4px; + text-transform: uppercase; + outline: 1px outset #adb5c6; +} + +.btn:active { + background: #7b8c9c; + border: 1px solid #adbdc6; + color: #000; + outline: 1px solid #000; +} + +.btn:disabled { + background: #444; + border-top: 1px solid #7f7f7f; + border-left: 1px solid #7f7f7f; + border-right: 1px solid #333; + border-bottom: 1px solid #333; + color: #111; + outline: 1px outset #5a5a5a; +} + .sep { display: block; } @@ -81,6 +113,7 @@ h1 { .boxtitle { font-weight: bold; text-shadow: 1px 1px #000; + white-space: nowrap; } .collapse .inner { @@ -106,6 +139,10 @@ h1 { padding: 0; } +.collapse .content .box { + padding: 0; +} + .collapse #history { height: 1.4em; overflow-y: hidden; @@ -207,6 +244,18 @@ h1 { font-weight: initial; } +#chat-count:before { + content: " (Usuarios: "; +} + +.collapse #chat-count:before { + content: " ("; +} + +#chat-count:after { + content: ")"; +} + #chat-all { display: block; height: 10em; @@ -215,6 +264,12 @@ h1 { overflow-y: auto; } +.collapse #chat-all { + height: 1.4em !important; + min-height: 0; + overflow-y: hidden; +} + #chat-all .msg { border-bottom: 1px solid; padding: 4px 2px; @@ -224,6 +279,18 @@ h1 { border-bottom: 0; } +.collapse #chat-all .msg { + display: none; + padding: 0 2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.collapse #chat-all .msg:last-child { + display: block; +} + #msg_cont { display: flex; display: -moz-flex; @@ -232,6 +299,10 @@ h1 { margin-top: 4px; } +.collapse #msg_cont { + display: none; +} + #msg_type { background: none; border-top: 2px solid #100f18; @@ -249,38 +320,10 @@ h1 { } #msg_send { - background: #bdced6; - border-top: 1px solid #f9feff; - border-left: 1px solid #f9feff; - border-right: 1px solid #adb5c6; - border-bottom: 1px solid #adb5c6; - color: #2f374d; flex-shrink: 0; -ms-flex-shrink: 0; -moz-flex-shrink: 0; -webkit-flex-shrink: 0; - font-size: 10px; - margin: 1px; - padding: 0 4px; - text-transform: uppercase; - outline: 1px outset #adb5c6; -} - -#msg_send:active { - background: #7b8c9c; - border: 1px solid #adbdc6; - color: #000; - outline: 1px solid #000; -} - -#msg_send:disabled { - background: #444; - border-top: 1px solid #7f7f7f; - border-left: 1px solid #7f7f7f; - border-right: 1px solid #333; - border-bottom: 1px solid #333; - color: #111; - outline: 1px outset #5a5a5a; } #vis-cont { @@ -302,14 +345,14 @@ h1 { } .stopped { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAACZJREFUSMftzUEBACAMAKHT/p23FPqCApym6bHbBxKJRCKRSCSSFqHqAjAKrwD1AAAAAElFTkSuQmCC") no-repeat center; + background: #000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAACZJREFUSMftzUEBACAMAKHT/p23FPqCApym6bHbBxKJRCKRSCSSFqHqAjAKrwD1AAAAAElFTkSuQmCC") no-repeat center; } .playing { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZCAYAAADqrKTxAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAHFJREFUOMud1EsOwCAIBNBx7n9nu7GNH5CZslLMi6hEoKPDDAKAC/mNDMhlJkIeGQEyzBaQ6coF8lpHAlmeOoCU7niDlF90grT6Z8D2v/ecaGh0gbfTADqagIY2UKMA3FECcnQBMSrAiQSwIhHYv9AbD4kSHCjuBbjMAAAAAElFTkSuQmCC") no-repeat center; - animation: fade 1s ease-in 1; - -webkit-animation: fade 1s ease-in 1; - -moz-animation: fade 1s ease-in 1; + background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZCAYAAADqrKTxAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAHFJREFUOMud1EsOwCAIBNBx7n9nu7GNH5CZslLMi6hEoKPDDAKAC/mNDMhlJkIeGQEyzBaQ6coF8lpHAlmeOoCU7niDlF90grT6Z8D2v/ecaGh0gbfTADqagIY2UKMA3FECcnQBMSrAiQSwIhHYv9AbD4kSHCjuBbjMAAAAAElFTkSuQmCC") no-repeat center; + animation: fade 0.5s ease-in 1; + -webkit-animation: fade 0.5s ease-in 1; + -moz-animation: fade 0.5s ease-in 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; @@ -329,7 +372,20 @@ h1 { } .paused { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAACtJREFUSMftzTEBAAAIhEC0f+e3gW5OEIArQtgr7tZH85CIiIiIiIiIiAgDN6QDMKZ8V40AAAAASUVORK5CYII=") no-repeat center; + background: #000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAACtJREFUSMftzTEBAAAIhEC0f+e3gW5OEIArQtgr7tZH85CIiIiIiIiIiAgDN6QDMKZ8V40AAAAASUVORK5CYII=") no-repeat center; + animation: blink 1s step-end infinite; + -webkit-animation: blink 1s step-end infinite; + -moz-animation: blink 1s step-end infinite; +} + +@-webkit-keyframes blink { + 50% { background: #000; } +} +@-moz-keyframes blink { + 50% { background: #000; } +} +@keyframes blink { + 50% { background: #000; } } #resize { @@ -345,6 +401,10 @@ h1 { 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 { + display: none; +} + .outer, #footer { margin-bottom: 16px; } diff --git a/bairadio.js b/bairadio.js index 4ee1541..b318c1f 100644 --- a/bairadio.js +++ b/bairadio.js @@ -1,4 +1,5 @@ -var radionum = 0; +var selected = ""; +var renderType = 0; function update(first) { var first = first || false; @@ -9,41 +10,47 @@ function update(first) { req.send(); req.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { - if (first) { document.getElementById("status").textContent = ""; } - var resp = JSON.parse(req.response); - resp = resp.icestats.source; + if (resp.icestats.source) { + resp = resp.icestats.source; + } else { + document.getElementById("status").textContent = "*** La radio está OFFLINE ***"; + var o = document.createElement("option"); + o.textContent = "Nadie está transmitiendo..."; + sel.appendChild(o); + selected = ""; + return; + } - if (radionum > resp.length) { radionum = 0; } + if (!resp.length) { resp = [resp]; } + + if (first || !selected) { + document.getElementById("status").textContent = ""; + selected = resp[0].listenurl.replace("http://bienvenidoainternet.org:8000", ""); + } var sel = document.getElementById("server_name"); sel.textContent = ""; - if (resp.length > 1) { - for (var i = -1; ++i < resp.length;) { - var o = document.createElement("option"); - o.value = i; - o.textContent = resp[i].server_name; - if (resp[i].server_description) { - o.textContent += ": " + resp[i].server_description; - } - if (i == radionum) { o.defaultSelected = true; } - sel.appendChild(o); - } - resp = resp[radionum]; - } else { + var selectedPos = 0; + for (var i = -1; ++i < resp.length;) { var o = document.createElement("option"); - o.value = 0; - o.textContent = resp.server_name; - if (resp.server_description) { - o.textContent += ": " + resp.server_description; + resp[i].listenurl = resp[i].listenurl.replace("http://bienvenidoainternet.org:8000", ""); + o.value = resp[i].listenurl; + o.textContent = resp[i].server_name; + if (resp[i].server_description) { + o.textContent += ": " + resp[i].server_description; + } + if (resp[i].listenurl == selected) { + o.defaultSelected = true; + selectedPos = i; } - o.defaultSelected = true; sel.appendChild(o); } + resp = resp[selectedPos]; var audio = document.getElementById("stream"); - resp.listenurl = resp.listenurl.replace("http://bienvenidoainternet.org:8000", "https://bienvenidoainternet.org:8443"); + resp.listenurl = "https://bienvenidoainternet.org:8443" + resp.listenurl; if (audio.src != resp.listenurl) { audio.src = resp.listenurl; if (!first) { playPause(); } @@ -146,7 +153,7 @@ function checkLong() { var ws = strip.clientWidth; var wc = cont.clientWidth if (ws > wc) { - var travel = ws - (wc-5); + var travel = ws - (wc-10); var style = document.createElement("style"); style.id = "marqueeStyle"; var dur = Math.round(travel/10); @@ -165,8 +172,8 @@ function playPause() { radio.play(); stat.setAttribute("class", "playing"); } else { - stat.setAttribute("class", "paused"); radio.pause(); + stat.setAttribute("class", "paused"); } } @@ -194,15 +201,15 @@ function changeVolume(e) { } } -function collapseHistory() { - var box = document.getElementById("box-history"); - var cont = document.getElementById("history").parentElement; - if (box.className == "outer") { - box.classList.add("collapse"); - cont.style.width = (box.clientWidth - document.getElementById("box-history-title").clientWidth - 14) + "px"; - } else { +function collapseWindow(e) { + var box = this.parentElement.parentElement; + var cont = box.getElementsByClassName("content")[0]; + if (box.classList.contains("collapse")) { cont.removeAttribute("style"); box.classList.remove("collapse"); + } else { + box.classList.add("collapse"); + cont.style.width = (box.clientWidth - this.clientWidth - 14) + "px"; } box.scrollTop = box.scrollHeight; removeSel(); @@ -266,7 +273,7 @@ function interpretNewMsg(info) { var msg = unescapeColon(arg[2]); addMsg(msg); } else if (arg[0] == "COUNT") { - document.getElementById("chat-count").textContent = " (Usuarios: " + arg[1] + ")"; + document.getElementById("chat-count").textContent = arg[1]; } } @@ -277,12 +284,12 @@ function checkSend(e) { var msgField = document.getElementById("msg_type"); var msg = msgField.value.trim(); - if (!msg) return; + if (!msg) { return; } if (chatConnected) { sendMsg("MSG:0:" + escapeColon(msg)); addMsg(msg); - } else return; + } else { return; } msgField.value = ""; antiFlood = true; @@ -322,12 +329,17 @@ function addMsg(msg) { document.addEventListener("DOMContentLoaded", function() { document.getElementById("control").addEventListener("click", playPause); document.getElementById("volume").addEventListener("mousedown", changeVolume); - document.getElementById("server_name").addEventListener("change", function(e) { radionum = this.value; }); - document.getElementById("box-history-title").addEventListener("dblclick", collapseHistory); + 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); + } + document.getElementById("resize").addEventListener("mousedown", resizeChat); document.getElementById("resize").addEventListener("mousedown", resizeChat); + //return; update(true); startVisualization(); - setInterval(update, 1500); + setInterval(update, 2000); connect(); }); @@ -29,7 +29,7 @@ </div> <div id="details"> <div class="line"> - <div id="server_name-cont" class="block"><span>Show:</span><select id="server_name" class="box"></select></div> + <div id="server_name-cont" class="block"><span>Show:</span><select id="server_name" class="box"><option>Nadie está transmitiendo...</option></select></div> </div> <div class="line"> <div class="block">Volumen:<span id="volume" class="box">100</span></div> @@ -58,12 +58,12 @@ <div id="box-chat" class="outer chat"> <div class="inner"> - <div id="box-chat-title" class="boxtitle">Chat<span id="chat-count"></span></div> + <div id="box-chat-title" class="boxtitle">Chat<span id="chat-count">0</span></div> <div class="content"> <div id="chat-all" class="box"></div> <form autocomplete="off" id="msg_cont"> <input id="msg_type" type="text" placeholder="Escribe un mensaje aquí" maxlength="256" autofocus="autofocus" /> - <input id="msg_send" value="Enviar" type="submit" disabled="disabled" /> + <input id="msg_send" class="btn" value="Enviar" type="submit" disabled="disabled" /> </form> <span id="resize"></span> </div> @@ -73,8 +73,7 @@ <div class="sep"></div> <div id="footer"> - <a href="/bai.ogg.m3u" target="_blank">Archivo M3U</a> ★ - <a href="/bai.ogg.xspf" target="_blank">Archivo XSPF</a> ★ + bmus v0.3 ★ <a href="https://bienvenidoainternet.org/" target="_blank">Bienvenido a Internet</a> ★ 2010-2020 </div> </body> |