348 lines
12 KiB
JavaScript
348 lines
12 KiB
JavaScript
var gateway = `ws://${window.location.hostname}/ws`;
|
|
var websocket;
|
|
var currentItem = 0;
|
|
|
|
window.addEventListener('load', onLoad);
|
|
function initWebSocket() {
|
|
console.log('Trying to open a WebSocket connection...');
|
|
websocket = new WebSocket(gateway);
|
|
websocket.onopen = onOpen;
|
|
websocket.onclose = onClose;
|
|
websocket.onmessage = onMessage;
|
|
}
|
|
function onOpen(event) {
|
|
console.log('Connection opened');
|
|
}
|
|
function onClose(event) {
|
|
console.log('Connection closed');
|
|
document.getElementById('playbutton').setAttribute("class", "stopped");
|
|
setTimeout(initWebSocket, 2000);
|
|
}
|
|
function cleanString(input) {
|
|
var output = "";
|
|
for (var i=0; i<input.length; i++) {
|
|
if (input.charCodeAt(i) <= 127 || input.charCodeAt(i) >= 160 && input.charCodeAt(i) <= 255) {
|
|
output += input.charAt(i);
|
|
}
|
|
}
|
|
return output;
|
|
}
|
|
function onMessage(event) {
|
|
var data = JSON.parse(event.data);
|
|
if(data.nameset) document.getElementById('nameset').innerHTML = data.nameset;
|
|
if(data.meta) document.getElementById('meta').innerHTML = cleanString(data.meta);
|
|
if(data.vol) {
|
|
setVolRangeValue(document.getElementById('volrange'),data.vol);
|
|
}
|
|
if(data.current) setCurrentItem(data.current);
|
|
if(data.file) generatePlaylist(data.file);
|
|
if(data.bitrate) document.getElementById('bitinfo').innerText = 'bitrate: '+data.bitrate+'kBits';
|
|
if(data.rssi) document.getElementById('rsiinfo').innerText = 'rssi: '+data.rssi+'dBm';
|
|
if(data.mode) {
|
|
document.getElementById('playbutton').setAttribute("class",data.mode);
|
|
}
|
|
if(data.bass) {
|
|
setVolRangeValue(document.getElementById('eqbass'),data.bass);
|
|
setVolRangeValue(document.getElementById('eqmiddle'),data.middle);
|
|
setVolRangeValue(document.getElementById('eqtreble'),data.trebble);
|
|
}
|
|
if(data.balance) {
|
|
setVolRangeValue(document.getElementById('eqbal'),data.balance);
|
|
}
|
|
}
|
|
function scrollToCurrent(){
|
|
var pl = document.getElementById('playlist');
|
|
var lis = pl.getElementsByTagName('li');
|
|
var plh = pl.offsetHeight;
|
|
var plt = pl.offsetTop;
|
|
var topPos = 0;
|
|
var lih = 0;
|
|
for (var i = 0; i <= lis.length - 1; i++) {
|
|
if(i+1==currentItem) {
|
|
topPos = lis[i].offsetTop;
|
|
lih = lis[i].offsetHeight;
|
|
}
|
|
}
|
|
pl.scrollTo({
|
|
top: topPos-plt-plh/2+lih/2,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
function setCurrentItem(item){
|
|
currentItem=item;
|
|
var pl = document.getElementById('playlist');
|
|
var lis = pl.getElementsByTagName('li');
|
|
for (var i = 0; i <= lis.length - 1; i++) {
|
|
lis[i].removeAttribute('class');
|
|
if(i+1==currentItem) {
|
|
lis[i].setAttribute("class","active");
|
|
|
|
}
|
|
}
|
|
scrollToCurrent();
|
|
}
|
|
function generatePlaylist(lines){
|
|
var ul = document.getElementById('playlist');
|
|
ul.innerHTML="";
|
|
lines.forEach((line, index) => {
|
|
li = document.createElement('li');
|
|
li.setAttribute('onclick','playStation(this);');
|
|
li.setAttribute('attr-id', index+1);
|
|
li.setAttribute('attr-name', line.name);
|
|
li.setAttribute('attr-url', line.url);
|
|
li.setAttribute('attr-ovol', line.ovol);
|
|
if(index+1==currentItem){
|
|
li.setAttribute("class","active");
|
|
}
|
|
var span = document.createElement('span');
|
|
span.innerHTML = index+1;
|
|
li.appendChild(document.createTextNode(line.name));
|
|
li.appendChild(span);
|
|
ul.appendChild(li);
|
|
initPLEditor();
|
|
});
|
|
scrollToCurrent();
|
|
}
|
|
function initPLEditor(){
|
|
ple= document.getElementById('pleditorcontent');
|
|
ple.innerHTML="";
|
|
pllines = document.getElementById('playlist').getElementsByTagName('li');
|
|
for (let i = 0; i <= pllines.length - 1; i++) {
|
|
plitem = document.createElement('li');
|
|
plitem.setAttribute('class', 'pleitem');
|
|
plitem.setAttribute('id', 'plitem'+i);
|
|
let pName = pllines[i].getAttribute('attr-name');
|
|
let pUrl = pllines[i].getAttribute('attr-url');
|
|
let pOvol = pllines[i].getAttribute('attr-ovol');
|
|
plitem.innerHTML = '<span class="grabbable" draggable="true">'+("00"+(i+1)).slice(-3)+'</span>\
|
|
<span class="pleinput plecheck"><input type="checkbox" /></span>\
|
|
<input class="pleinput plename" type="text" value="'+pName+'" maxlength="140" />\
|
|
<input class="pleinput pleurl" type="text" value="'+pUrl+'" maxlength="140" />\
|
|
<input class="pleinput pleovol" type="number" min="-30" max="30" step="1" value="'+pOvol+'" />';
|
|
ple.appendChild(plitem);
|
|
}
|
|
}
|
|
function playStation(el){
|
|
let lis = document.getElementById('playlist').getElementsByTagName('li');
|
|
|
|
for (let i = 0; i <= lis.length - 1; i++) {
|
|
lis[i].removeAttribute('class');
|
|
}
|
|
el.setAttribute("class","active");
|
|
id=el.getAttribute('attr-id');
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/",true);
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send("playstation="+id);
|
|
}
|
|
function setVolRangeValue(el, val=null){
|
|
let slave = el.getAttribute('data-slaveid');
|
|
if(val){
|
|
el.value = val;
|
|
document.getElementById(slave).innerText=val;
|
|
}
|
|
document.getElementById(slave).innerText=el.value;
|
|
var value = (el.value-el.min)/(el.max-el.min)*100;
|
|
el.style.background = 'linear-gradient(to right, #bfa73e 0%, #bfa73e ' + value + '%, #272727 ' + value + '%, #272727 100%)';
|
|
}
|
|
|
|
function onRangeVolChange(value) {
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/",true);
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send("vol=" + value+"&");
|
|
}
|
|
function onRangeEqChange(el){
|
|
let trebble = document.getElementById('eqtreble').value;
|
|
let middle = document.getElementById('eqmiddle').value;
|
|
let bass = document.getElementById('eqbass').value;
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/",true);
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send("trebble=" + trebble + "&middle=" + middle + "&bass=" + bass + "&");
|
|
}
|
|
function onRangeBalChange(el){
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/",true);
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send("ballance=" + el.value+"&");
|
|
}
|
|
function showSettings(){
|
|
document.getElementById('pleditorwrap').hidden=true;
|
|
document.getElementById('settings').hidden=false;
|
|
}
|
|
function showEditor(){
|
|
document.getElementById('settings').hidden=true;
|
|
initPLEditor();
|
|
document.getElementById('pleditorwrap').hidden=false;
|
|
}
|
|
function doCancel() {
|
|
document.getElementById('settings').hidden=true;
|
|
document.getElementById('pleditorwrap').hidden=true;
|
|
}
|
|
function doExport() {
|
|
window.open("/data/playlist.csv");
|
|
}
|
|
function doUpload(finput) {
|
|
var formData = new FormData();
|
|
formData.append("plfile", finput.files[0]);
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/upload",true);
|
|
xhr.send(formData);
|
|
}
|
|
function doAdd(){
|
|
let ple=document.getElementById('pleditorcontent');
|
|
let plitem = document.createElement('li');
|
|
let cnt=ple.getElementsByTagName('li');
|
|
plitem.setAttribute('class', 'pleitem');
|
|
plitem.setAttribute('id', 'plitem'+(cnt.length));
|
|
plitem.innerHTML = '<span class="grabbable" draggable="true">'+("00"+(cnt.length+1)).slice(-3)+'</span>\
|
|
<span class="pleinput plecheck"><input type="checkbox" /></span>\
|
|
<input class="pleinput plename" type="text" value="" maxlength="140" />\
|
|
<input class="pleinput pleurl" type="text" value="" maxlength="140" />\
|
|
<input class="pleinput pleovol" type="number" min="-30" max="30" step="1" value="0" />';
|
|
ple.appendChild(plitem);
|
|
ple.scrollTo({
|
|
top: ple.scrollHeight,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
function doRemove(){
|
|
let items=document.getElementById('pleditorcontent').getElementsByTagName('li');
|
|
let pass=[];
|
|
for (let i = 0; i <= items.length - 1; i++) {
|
|
if(items[i].getElementsByTagName('span')[1].getElementsByTagName('input')[0].checked) {
|
|
pass.push(items[i]);
|
|
}
|
|
}
|
|
if(pass.length==0) {
|
|
alert('Choose something first');
|
|
return;
|
|
}
|
|
for (var i = 0; i < pass.length; i++)
|
|
{
|
|
pass[i].remove();
|
|
}
|
|
items=document.getElementById('pleditorcontent').getElementsByTagName('li');
|
|
for (let i = 0; i <= items.length-1; i++) {
|
|
items[i].getElementsByTagName('span')[0].innerText=("00"+(i+1)).slice(-3);
|
|
}
|
|
}
|
|
function showEqualizer(isshowing){
|
|
document.getElementById('equalizerbg').classList.toggle('hidden');
|
|
}
|
|
function submitWiFi(){
|
|
var items=document.getElementById("credentialwrap").getElementsByTagName("li");
|
|
var output="";
|
|
for (var i = 0; i <= items.length - 1; i++) {
|
|
inputs=items[i].getElementsByTagName("input");
|
|
if(inputs[0].value == "") continue;
|
|
output+=inputs[0].value+"\t"+inputs[1].value+"\n";
|
|
}
|
|
if(output!=""){ // Well, let's say, quack.
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/",true);
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send("wifisettings="+output);
|
|
document.getElementById("settings").innerHTML="<h2>Settings saved. Rebooting...</h2>";
|
|
setTimeout(function(){ window.location.reload(); }, 10000);
|
|
}
|
|
}
|
|
function submitPlaylist(){
|
|
var items=document.getElementById("pleditorcontent").getElementsByTagName("li");
|
|
var output="";
|
|
for (var i = 0; i <= items.length - 1; i++) {
|
|
inputs=items[i].getElementsByTagName("input");
|
|
if(inputs[1].value == "" || inputs[2].value == "") continue;
|
|
let ovol = inputs[3].value;
|
|
if(ovol < -30) ovol = -30;
|
|
if(ovol > 30) ovol = 30;
|
|
output+=inputs[1].value+"\t"+inputs[2].value+"\t"+inputs[3].value+"\n";
|
|
}
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/",true);
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send("playlist="+output.slice(0, -1));
|
|
document.getElementById('pleditorwrap').hidden=true;
|
|
}
|
|
function initSliers(){
|
|
var sliders = document.getElementsByClassName('slider');
|
|
for (var i = 0; i <= sliders.length - 1; i++) {
|
|
sliders[i].oninput = function() {
|
|
setVolRangeValue(this);
|
|
};
|
|
setVolRangeValue(sliders[i], 0);
|
|
}
|
|
return;
|
|
var volslider = document.getElementById("volrange");
|
|
var eqvolslider = document.getElementById("eqvol");
|
|
var balslider = document.getElementById("eqbal");
|
|
volslider.oninput = function() {
|
|
setVolRangeValue(this);
|
|
};
|
|
eqvolslider.oninput = function() {
|
|
setVolRangeValue(this);
|
|
};
|
|
balslider.oninput = function() {
|
|
setVolRangeValue(this);
|
|
};
|
|
setVolRangeValue(volslider, 0);
|
|
setVolRangeValue(eqvolslider, 0);
|
|
setVolRangeValue(balslider, 0);
|
|
}
|
|
function onLoad(event) {
|
|
initWebSocket();
|
|
initButton();
|
|
initSliers();
|
|
document.getElementById("volrange").addEventListener("wheel", function(e){
|
|
if (e.deltaY < 0){
|
|
this.valueAsNumber += 1;
|
|
}else{
|
|
this.value -= 1;
|
|
}
|
|
websocket.send('volume='+this.value);
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}, {passive: false});
|
|
}
|
|
function initButton() {
|
|
document.getElementById('playbutton').addEventListener('click', playbutton);
|
|
document.getElementById('prevbutton').addEventListener('click', prevbutton);
|
|
document.getElementById('nextbutton').addEventListener('click', nextbutton);
|
|
document.getElementById('volmbutton').addEventListener('click', volmbutton);
|
|
document.getElementById('volpbutton').addEventListener('click', volpbutton);
|
|
}
|
|
|
|
function playercommand(cmd){
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("POST","/",true);
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send(cmd+"=1");
|
|
}
|
|
function playbutton(){
|
|
var btn=document.getElementById('playbutton');
|
|
if(btn.getAttribute("class")=="stopped") {
|
|
btn.setAttribute("class", "playing");
|
|
playercommand("start");
|
|
return;
|
|
}
|
|
if(btn.getAttribute("class")=="playing") {
|
|
btn.setAttribute("class", "stopped");
|
|
playercommand("stop");
|
|
}
|
|
}
|
|
function prevbutton(){
|
|
playercommand("prev");
|
|
}
|
|
function nextbutton(){
|
|
playercommand("next");
|
|
}
|
|
function volmbutton(){
|
|
playercommand("volm");
|
|
}
|
|
function volpbutton(){
|
|
playercommand("volp");
|
|
}
|