Skip to content

Commit f9299b4

Browse files
buzinkbuzink
committed
Added controls hidden behind album cover
1 parent d278a49 commit f9299b4

1 file changed

Lines changed: 114 additions & 6 deletions

File tree

‎BluOS from across the room display.html‎

Lines changed: 114 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,22 @@
4141
margin-right: auto;
4242
width: 90vh;
4343
}
44+
#controls {
45+
display: none;
46+
margin-left: auto;
47+
margin-right: auto;
48+
width: 90vh;
49+
font-size: 3vh;
50+
}
51+
#controls button {
52+
font-size: 3vh;
53+
margin-bottom: 3vh;
54+
}
55+
#hideControls {
56+
color: white;
57+
text-decoration: none;
58+
display: block;
59+
}
4460
#songTitle {
4561
font-size: 12vh;
4662
width: 100%;
@@ -89,7 +105,20 @@
89105
</div>
90106
</div>
91107
<div id="right">
92-
<img id="albumcover" src=""/>
108+
<img onclick="toggleControls();" id="albumcover" src=""/>
109+
<div id="controls">
110+
<button onclick="control('/Pause?toggle=1')" id="togglePause">Play</button>
111+
<button onclick="control('/Back')" id="back">Back</button>
112+
<button onclick="control('/Skip')" id="skip">Skip</button>
113+
<button onclick="control('/Volume?db=1&tell_slaves=off')" id="volumeUp">Volume up</button>
114+
<button onclick="control('/Volume?db=-1&tell_slaves=off')" id="volumeDown">Volume down</button>
115+
<div id="actions">
116+
</div>
117+
<div id="presets">
118+
</div>
119+
<button onclick="location.reload()">Reload app</button>
120+
<a href="#" onclick="toggleControls();" id="hideControls">Back to album art ></a>
121+
</div>
93122
</div>
94123
</div>
95124

@@ -100,17 +129,20 @@
100129
//stop editing here unless you know what your are doing :)
101130
function longPoll() {
102131
var xhttp = new XMLHttpRequest();
103-
//console.log('eTag: ' + eTag);
132+
console.log("Api call " + call);
104133
xhttp.open("GET", "http://" + ipAddress + ":" + port + "/Status?timeout=100&etag=" + eTag, true);
105134
xhttp.send();
106135
const tryAgain = setTimeout(() => {
107-
console.log("try again run " + run);
136+
console.log("Initiate timeout api call " + call + " (update " + update +")");
108137
xhttp.abort;
109138
longPoll();
110139
}, 101000);
111140
xhttp.onreadystatechange = function() {
141+
console.log("Readystate " + xhttp.readyState + " / Status " + xhttp.status);
112142
if (xhttp.readyState == 4) {
113143
if(xhttp.status == 200) {
144+
listpresets();
145+
console.log("Cancel timeout api call " + (call-1) + " (update " + update + ")");
114146
clearTimeout(tryAgain);
115147
var xmlDoc = xhttp.responseXML;
116148
eTag = xmlDoc.getElementsByTagName('status')[0].getAttribute('etag');
@@ -224,22 +256,98 @@
224256
document.getElementById("quality").innerHTML = document.getElementById("quality").innerHTML + ' (' + xmlDoc.getElementsByTagName("streamFormat")[0].innerHTML + ')';
225257
}
226258
}
227-
//console.log("RUN " + run);
228-
run = run + 1;
259+
if (typeof xmlDoc.getElementsByTagName("state")[0] != "undefined") {
260+
if (xmlDoc.getElementsByTagName("state")[0].innerHTML == 'pause') {
261+
document.getElementById("togglePause").innerHTML = "Play";
262+
document.getElementById("togglePause").style.display = 'block';
263+
document.getElementById("back").style.display = 'block';
264+
document.getElementById("skip").style.display = 'block';
265+
} else if (xmlDoc.getElementsByTagName("state")[0].innerHTML == 'play') {
266+
document.getElementById("togglePause").innerHTML = "Pause";
267+
document.getElementById("togglePause").style.display = 'block';
268+
document.getElementById("back").style.display = 'block';
269+
document.getElementById("skip").style.display = 'block';
270+
} else if (xmlDoc.getElementsByTagName("state")[0].innerHTML == 'stream') {
271+
document.getElementById("togglePause").innerHTML = "Pause";
272+
document.getElementById("togglePause").style.display = 'block';
273+
document.getElementById("back").style.display = 'none';
274+
document.getElementById("skip").style.display = 'none';
275+
} else {
276+
document.getElementById("togglePause").style.display = 'none';
277+
document.getElementById("back").style.display = 'none';
278+
document.getElementById("skip").style.display = 'none';
279+
}
280+
}
281+
document.getElementById("actions").innerHTML = '';
282+
if (typeof xmlDoc.getElementsByTagName("action")[0] != "undefined") {
283+
for (i=0; i < xmlDoc.getElementsByTagName("action").length; i++) {
284+
if (typeof xmlDoc.getElementsByTagName("action")[i].getAttribute('url') != 'undefined' && xmlDoc.getElementsByTagName("action")[i].getAttribute('url') != null) {
285+
document.getElementById("actions").innerHTML += '<button onclick=\"window.location.href=\'http://' + ipAddress + ":" + port + xmlDoc.getElementsByTagName("action")[i].getAttribute('url') + '\'\"" id=\"' + xmlDoc.getElementsByTagName("action")[i].getAttribute('name') + '\">' + xmlDoc.getElementsByTagName("action")[i].getAttribute('name') + '</button>';
286+
}
287+
}
288+
}
289+
console.log("Update " + update);
290+
update = update + 1;
229291
}
230292
if (xhttp.status > 0) {
231293
longPoll();
232294
}
233295
}
234296
};
297+
call = call + 1;
235298
}
236299
const urlParams = new URLSearchParams(window.location.search);
237300
if(urlParams.get('ipaddress') != null) {
238301
ipAddress = urlParams.get('ipaddress');
239302
}
240-
var run = 0;
303+
var update = 1;
304+
var call = 1;
241305
var eTag = "";
242306
longPoll();
307+
//controls
308+
const albumCover = document.getElementById('albumcover');
309+
const controls = document.getElementById('controls');
310+
function toggleControls () {
311+
if (controls.style.display === 'none') {
312+
controls.style.display = 'block';
313+
albumCover.style.display = 'none';
314+
} else {
315+
controls.style.display = 'none';
316+
albumCover.style.display = 'block';
317+
}
318+
}
319+
function control(message) {
320+
var xhttpa = new XMLHttpRequest();
321+
xhttpa.open("GET", "http://" + ipAddress + ":" + port + message, true);
322+
xhttpa.send();
323+
xhttpa.onreadystatechange = function() {
324+
if (xhttpa.readyState == 4) {
325+
if(xhttpa.status == 200) {
326+
var xmlDoca = xhttpa.responseXML;
327+
}
328+
}
329+
};
330+
}
331+
function listpresets() {
332+
var xhttpP = new XMLHttpRequest();
333+
xhttpP.open("GET", "http://" + ipAddress + ":" + port + '/Presets', true);
334+
xhttpP.send();
335+
xhttpP.onreadystatechange = function() {
336+
if (xhttpP.readyState == 4) {
337+
if(xhttpP.status == 200) {
338+
var xmlDocP = xhttpP.responseXML;
339+
document.getElementById("presets").innerHTML = '';
340+
if (typeof xmlDocP.getElementsByTagName("preset")[0] != "undefined") {
341+
for (i=0; i < xmlDocP.getElementsByTagName("preset").length; i++) {
342+
if (typeof xmlDocP.getElementsByTagName("preset")[i].getAttribute('name') != 'undefined' && xmlDocP.getElementsByTagName("preset")[i].getAttribute('name') != null) {
343+
document.getElementById("presets").innerHTML += '<button onclick=\"control(\'/Preset?id=' + xmlDocP.getElementsByTagName("preset")[i].getAttribute('id') + '\'\)"" id=\"' + xmlDocP.getElementsByTagName("preset")[i].getAttribute('name') + '\">' + xmlDocP.getElementsByTagName("preset")[i].getAttribute('name') + '</button>';
344+
}
345+
}
346+
}
347+
}
348+
}
349+
};
350+
}
243351
</script>
244352
</body>
245353
</html>

0 commit comments

Comments
 (0)