path: root/bairadio.js

var radionum = 0;

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 (radionum > resp.length) { radionum = 0; }

      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 o = document.createElement("option");
        o.value = 0;
        o.textContent = resp.server_name;
        if (resp.server_description) {
          o.textContent += ": " + resp.server_description;
        }
        o.defaultSelected = true;
        sel.appendChild(o);
      }
      
      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;
      
      var artist = document.getElementById("artist");
      if (resp.artist) {
        resp.artist = resp.artist.trim();
        if (artist.textContent.slice(0,-3) != resp.artist) {
          artist.textContent = resp.artist + " - ";
        }
      } else {
        artist.textContent = "";
      }

      var title = document.getElementById("title");
      if (resp.title) {
        resp.title = String(resp.title).trim();
      } else {
        resp.title = "(Sin título)";
      }
      if (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 + " @ Radio B.a.I.";
        
        checkLong();
      }

      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");
        var khz = Math.round(resp.audio_samplerate / 1000);
        if (audio_samplerate.textContent != khz) {
          audio_samplerate.textContent = khz;
        }
      }
    }
  }
}

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.textContent = "";
    var div = 3;
    
    var svgns = "http://www.w3.org/2000/svg";
    for (var i = 0; i < 900; i += 20) {
      var h = (freq[i] / div);
      var rect = document.createElementNS(svgns, "rect");
      rect.setAttributeNS(null, "x", (i / 10));
      rect.setAttributeNS(null, "y", ((255 / div) - h));
      rect.setAttributeNS(null, "height", h);
      rect.setAttributeNS(null, "width", "1");
      rect.setAttributeNS(null, "class", "bar");
      vis.appendChild(rect);
    }
  }

  renderVis();
}

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 ws = strip.clientWidth;
  var wc = cont.clientWidth
  if (ws > wc) {
    var travel = ws - (wc-5);
    var style = document.createElement("style");
    style.id = "marqueeStyle";
    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";
    style.textContent += "@-webkit-keyframes marquee {\n 10% { transform: translateX(0); }\n 45% { transform: translateX(-" + travel + "px); }\n 55% { transform: translateX(-" + travel + "px); }\n 90% { transform: translateX(0); }\n}\n";
    style.textContent += "@keyframes marquee {\n 10% { transform: translateX(0); }\n 45% { transform: translateX(-" + travel + "px); }\n 55% { transform: translateX(-" + travel + "px); }\n 90% { transform: translateX(0); }\n}";
    document.getElementsByTagName("head")[0].appendChild(style);
  }
}

function playPause() {
  var radio = document.getElementById("stream");
  var stat = document.getElementById("control");
  if (radio.paused) {
    radio.play();
    stat.setAttribute("class", "playing");
  } else {
    stat.setAttribute("class", "paused");
    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");
  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 {
    cont.removeAttribute("style");
    box.classList.remove("collapse");
  }
  box.scrollTop = box.scrollHeight;
  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 chatFloodTime = 1100;

function connect() {
  sock = new WebSocket("wss://radio.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();
  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("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("resize").addEventListener("mousedown", resizeChat);

  update(true);
  startVisualization();
  setInterval(update, 1500);
  connect();
});