-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpanpigo.html
89 lines (88 loc) · 3.01 KB
/
panpigo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=device-height, initial-scale=1" charset="utf-8" />
<title> Pandora's WebSockets </title>
<script src="/js/jquery.min.js"></script>
<script>
try {
var sock = new WebSocket("ws://{{.}}/sock");
//sock.binaryType = 'blob'; // can set it to 'blob' or 'arraybuffer
console.log("Websocket - status: " + sock.readyState);
sock.onopen = function(m) {
console.log("CONNECTION opened..." + this.readyState);}
sock.onmessage = function(m) { parseMessage(m.data); }
sock.onerror = function(m) {
console.log("Error occured sending..." + m.data);}
sock.onclose = function(m) {
console.log("Disconnected - status " + this.readyState);}
} catch(exception) {
console.log(exception);
}
</script>
</head>
<body>
<b id="time_remaining">Calculating . . .</b>
<table>
<tr><td><b>Artist: </b></td><td id="artist" >Waiting . . .</td></tr>
<tr><td><b>Title: </b></td><td id="title" >Waiting . . .</td></tr>
<tr><td><b>Album: </b></td><td id="album" >Waiting . . .</td></tr>
<tr><td><b>Station:</b></td><td id="stationName">Waiting . . .</td></tr>
</table>
<div>
<input type="button" value="pause" id="command_pause">
<input type="button" value="love" id="command_love">
<input type="button" value="next" id="command_next">
<input type="button" value="ban" id="command_ban">
</div>
<img src="" id="coverArt" alt="waiting for cover art" style='height: 250px; width: 250px;'>
<br>
<b> Select Station </b><br>
<select id="stations_available">
</select>
<script>
function parseMessage (message){
var fields = message.split("\t");
if (fields.length == 1){
return;
}
switch (fields[0]){
case "timerem":
$('#time_remaining').html(fields[1]);
break;
case "current":
var itempair = fields[1].split("=");
if ( itempair[0] == "coverArt"){
document.getElementById('coverArt').src = itempair[1];
}
else {
$('#'+itempair[0]).html( itempair[1] );
}
break;
case "station":
var stationpair = fields[1].split("=");
if ( stationpair[0] == "stationCount"){
$('#stations_available').html('');
}
else {
var stationVal = stationpair[0].replace(/station/,"station\t")
$('#stations_available').append( '<option value="'+stationVal+'">'+stationpair[1]+'</option>');
}
break;
}
}
</script>
<script>//button handlers
$('#stations_available').change( function(event) {
sock.send($('#stations_available').val());
});
$('#command_pause').click( function(event) { sock.send("command\tp"); } );
$('#command_love' ).click( function(event) { sock.send("command\t+"); } );
$('#command_next' ).click( function(event) { sock.send("command\tn"); } );
$('#command_ban' ).click( function(event) { if (window.confirm("Ban song?")){sock.send("command\t-");} } );
</script>
</body>
</html>