diff options
Diffstat (limited to 'bairadio.js')
| -rw-r--r-- | bairadio.js | 342 |
1 files changed, 342 insertions, 0 deletions
diff --git a/bairadio.js b/bairadio.js new file mode 100644 index 0000000..2e1eafe --- /dev/null +++ b/bairadio.js @@ -0,0 +1,342 @@ +var radionum = 0; + +function updateSelect() { + var req = new XMLHttpRequest(); + var url = "https://bienvenidoainternet.org:8443"; + req.open("GET", url+"/status-json.xsl", true); + req.send(); + req.onreadystatechange = function() { + if (this.readyState === 4 && this.status === 200) { + var resp = JSON.parse(req.response); + resp = resp.icestats.source; + + var sel = document.getElementById("server_name"); + sel.innerHTML = ""; + 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 o = document.createElement("option"); + o.value = 0; + o.textContent = resp.server_name; + if (resp.server_description) { + o.textContent += ": " + resp.server_description; + } + sel.appendChild(o); + } + } + } +} + +function update(first) { + var first = first || false; + + var req = new XMLHttpRequest(); + var url = "https://bienvenidoainternet.org:8443"; + req.open("GET", url+"/status-json.xsl", true); + 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.length > 1) { + resp = resp[radionum]; + } + + var audio = document.getElementById("stream"); + resp.listenurl = resp.listenurl.replace("http://bienvenidoainternet.org:8000", "https://bienvenidoainternet.org:8443"); + if (audio.src != resp.listenurl) { + audio.src = resp.listenurl; + if (!first) { playPause(); } + } + + var current = document.getElementById("artist").textContent + document.getElementById("title").textContent; + + if (resp.artist) { + resp.artist = resp.artist.trim(); + var artist = document.getElementById("artist"); + if (!artist.textContent.startsWith(resp.artist)) { + artist.textContent = resp.artist + " - "; + } + } else { + document.getElementById("artist").textContent = ""; + } + + if (resp.title) { + resp.title = resp.title.trim(); + var title = document.getElementById("title"); + if (title.textContent != resp.title) { + if (title.textContent != "" && title.textContent != resp.title) { + var history = document.getElementById("history"); + history.innerHTML += '<div class="pastsong">' + current + '</div>'; + history.scrollTop = history.scrollHeight; + } + + title.textContent = resp.title; + document.title = resp.title + ((resp.artist) ? (" - "+resp.artist) : "") + " @ Radio B.a.I."; + + checkLong(); + } + } else { + document.getElementById("title").textContent = "(Sin título)"; + document.title = "(Sin título) @ Radio B.a.I."; + } + + if (resp.listeners) { + var listeners = document.getElementById("listeners"); + if (listeners.textContent != resp.listeners) { + listeners.textContent = resp.listeners; + } + } + + if (resp["ice-bitrate"]) { + var bitrate = document.getElementById("bitrate"); + if (bitrate.textContent != resp["ice-bitrate"]) { + bitrate.textContent = resp["ice-bitrate"]; + } + } + + if (resp.audio_samplerate) { + var audio_samplerate = document.getElementById("audio_samplerate"); + audio_samplerate.textContent = Math.round(resp.audio_samplerate / 1000); + } + } + } +} + +function startVisualization() { + var ctx = new AudioContext(); + var audio = document.getElementById("stream"); + var src = ctx.createMediaElementSource(audio); + var anal = ctx.createAnalyser(); + src.connect(anal); + src.connect(ctx.destination); + var freq = new Uint8Array(anal.frequencyBinCount); + + function renderVis() { + requestAnimationFrame(renderVis); + anal.getByteFrequencyData(freq); + + var vis = document.getElementById("vis"); + vis.innerHTML = ""; + var div = 3; + + for (var i = 0; i < 900; i += 20) { + var h = (freq[i] / div); + vis.innerHTML += '<rect class="bar"' + + 'height="' + h + '" ' + + 'width="1"' + + 'x="' + (i / 10) + '" ' + + 'y="' + ((255 / div) - h) + '" />'; + } + } + + renderVis(); +} + +function checkLong() { + var strip = document.getElementById("nowplaying-txt"); + + var marquee = document.getElementById("marqueeStyle"); + if (marquee) marquee.parentElement.removeChild(marquee); + + if (strip.clientWidth > 480) { // #nowplaying width = 480px + var travel = strip.clientWidth - 475; + var style = document.createElement("style"); + style.id = "marqueeStyle"; + style.textContent = "#nowplaying-txt {animation: marquee " + Math.round(travel/10) + "s linear infinite;}"; + style.textContent += "@keyframes marquee {"; + style.textContent += "10% { transform: translateX(0); }"; + style.textContent += "45% { transform: translateX(-" + travel + "px); }"; + style.textContent += "55% { transform: translateX(-" + travel + "px); }"; + style.textContent += "90% { transform: translateX(0); }"; + style.textContent += "}"; + document.getElementsByTagName("head")[0].appendChild(style); + } +} + +function playPause() { + var radio = document.getElementById("stream"); + var vis = document.getElementById("vis"); + if (radio.paused) { + radio.play(); + vis.removeAttribute("class") + } else { + vis.setAttribute("class", "show-play-btn"); + radio.pause(); + } +} + +function changeVolume(e) { + var mousepos = e.x; + document.addEventListener("mousemove", setVolume); + document.addEventListener("mouseup", function() { + document.removeEventListener("mousemove", setVolume); + }); + + function setVolume(e) { + var audio = document.getElementById("stream"); + var dx = mousepos - e.x; + mousepos = e.x; + + var vol = document.getElementById("volume"); + var newvol = Math.round(parseInt(vol.textContent) + (dx * -1)); + if (newvol < 0) { newvol = 0; } + else if (newvol > 100) { newvol = 100; } + + vol.textContent = (newvol < 10) ? ("0" + newvol) : newvol; + audio.volume = newvol / 100; + + removeSel(); + } +} + +function collapseHistory() { + var box = document.getElementById("box-history"); + + if (box.className == "outer") { + box.classList.add("collapse"); + } else { + box.classList.remove("collapse"); + } + + removeSel(); +} + +function resizeChat(e) { + var mousepos = e.y; + document.addEventListener("mousemove", calcResize); + document.addEventListener("mouseup", function() { + document.removeEventListener("mousemove", calcResize); + }); + + function calcResize(e) { + var chat = document.getElementById("chat-all"); + var dx = mousepos - e.y; + mousepos = e.y; + chat.style.height = (parseInt(getComputedStyle(chat, "").height) - dx) + "px"; + chat.scrollTop = chat.scrollHeight; + removeSel(); + } +} + +function removeSel() { + if (document.selection) { document.selection.empty(); } + else { window.getSelection().removeAllRanges(); } +} + +var chatConnected = false; +var antiFlood = false; +const chatMaxChar = 80; +const chatFloodTime = 1100; + +function connect() { + sock = new WebSocket("wss://tv.bienvenidoainternet.org/daemon/"); + sock.addEventListener("open", function(e) { + addMsg("Conectado al chat."); + chatConnected = true; + enableChat(); + }); + sock.addEventListener("message", function(e) { + interpretNewMsg(e.data); + }); + sock.addEventListener("close", function(e) { + addMsg("Desconectado del chat. " + (e.reason ? "Razón: "+e.reason : "Código: "+e.code)); + document.getElementById("chat-count").textContent = ""; + chatConnected = false; + }); + + document.getElementById("msg_send").addEventListener("click", checkSend); +} + +function enableChat() { + antiFlood = false; + document.getElementById("msg_send").disabled = false; +} + +function interpretNewMsg(info) { + console.log("<<< " + info); + var arg = info.split(":"); + + if (arg[0] == "MSG") { + var msg = unescapeColon(arg[2]); + addMsg(msg); + } else if (arg[0] == "COUNT") { + document.getElementById("chat-count").textContent = " (Usuarios: " + arg[1] + ")"; + } +} + +function checkSend(e) { + e.preventDefault(); + if (!chatConnected) return; + if (antiFlood) return; + + var msgField = document.getElementById("msg_type"); + var msg = msgField.value.trim().substr(0, chatMaxChar); + if (!msg) return; + + if (chatConnected) { + sendMsg("MSG:0:" + escapeColon(msg)); + addMsg(msg); + } else return; + + msgField.value = ""; + antiFlood = true; + document.getElementById("msg_send").disabled = true; + setTimeout(enableChat, chatFloodTime); +} + +function escapeColon(msg) { + return msg ? msg.replace(/:/g, "%3A") : ""; +} +function unescapeColon(msg) { + return msg ? msg.replace(/%3A/g, ":") : ""; +} + +function sendMsg(msg) { + console.log(">>> " + msg); + sock.send(msg); +} + +function addMsg(msg) { + var chat = document.getElementById("chat-all"); + + var line = document.createElement("div"); + line.className = "msg"; + var presentTime = 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 + "] "; + line.textContent += msg; + + chat.appendChild(line); + chat.scrollTop = chat.scrollHeight; +} + +document.addEventListener("DOMContentLoaded", function() { + document.getElementById("vis").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("resize").addEventListener("mousedown", resizeChat); + + update(true); + updateSelect(); + startVisualization(); + setInterval(update, 1000); + setInterval(updateSelect, 10000); + connect(); +}); |