3pp-mirror/snapcast
1
0
Fork 0
mirror of https://github.com/badaix/snapcast.git synced 2025-08-06 10:09:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

update webinterface

Browse source
This commit is contained in:
badaix 2019-11-17 15:17:32 +01:00
parent b8be0e5349
commit ba2e40909e
1 changed files with 232 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

434
server/etc/interface.html
View file

@ -5,22 +5,27 @@
Taken from <a href="https://github.com/derglaus/snapcast-websockets-ui">derglaus/snapcast-websockets-ui</a> for Taken from <a href="https://github.com/derglaus/snapcast-websockets-ui">derglaus/snapcast-websockets-ui</a> for
testing purposes testing purposes
<script> <script>
var connection = new WebSocket('ws://' + window.location.hostname + ':1780/jsonrpc'); var connection = new WebSocket('ws://' + window.location.hostname + ':1780/jsonrpc');
var server; var server;
connection.onmessage = function (e) { connection.onmessage = function (e) {
var recv = e.data; var recv = e.data
//String.fromCharCode.apply(null, new Uint8Array(e.data)); // console.log(recv);
console.log(recv);
var answer = JSON.parse(recv); var answer = JSON.parse(recv);
if (answer.id == 1) { server = answer.result; } console.log(answer)
// console.log(answer.method); if (answer.id == 1) {
if (answer.method == "Client.OnVolumeChanged" || answer.method == "Client.OnLatencyChanged" || answer.method == "Client.OnNameChanged") { clientChange(answer.params); } server = answer.result;
if (answer.method == "Client.OnConnect" || answer.method == "Client.OnDisconnect") { clientConnect(answer.params); } } else if (Array.isArray(answer)) {
if (answer.method == "Group.OnMute") { groupMute(answer.params); } for (let i = 0; i < answer.length; i++) {
if (answer.method == "Group.OnStreamChanged") { groupStream(answer.params); } action(answer[i]);
if (answer.method == "Stream.OnUpdate") { streamUpdate(answer.params); } }
if (answer.method == "Server.OnUpdate") { server = answer.params } } else {
action(answer);
}
show() show()
} }
@ -32,170 +37,199 @@
alert("error"); alert("error");
} }
function send(str) { function action(answer) {
connection.send(str) switch (answer.method) {
} case 'Client.OnVolumeChanged':
case 'Client.OnLatencyChanged':
function clientChange(params) {//console.log(params); case 'Client.OnNameChanged':
var i_group = 0 clientChange(answer.params);
while (i_group < server.server.groups.length) { break;
var i_client = 0 case 'Client.OnConnect':
while (i_client < server.server.groups[i_group].clients.length) { case 'Client.OnDisconnect':
if (server.server.groups[i_group].clients[i_client].id == params.id) {//console.log(server.server.groups[i_group].clients[i_client]); clientConnect(answer.params);
server.server.groups[i_group].clients[i_client].config = Object.assign(server.server.groups[i_group].clients[i_client].config, params); break;
//console.log(server.server.groups[i_group].clients[i_client]); case 'Group.OnMute':
} groupMute(answer.params);
i_client++ break;
} case 'Group.OnStremChanged':
i_group++ groupStream(answer.params);
break;
case 'Stream.OnUpdate':
streamUpdate(answer.params);
break;
case 'Server.OnUpdate':
server = answer.params;
break;
default:
break;
} }
} }
function clientConnect(params) {//console.log(params); function send(str) {
var i_group = 0 var buf = new ArrayBuffer(str.length);
var bufView = new Uint8Array(buf);
for (var i = 0, strLen = str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
while (i_group < server.server.groups.length) { // console.log(buf);
var i_client = 0 var recv = String.fromCharCode.apply(null, new Uint8Array(buf));
while (i_client < server.server.groups[i_group].clients.length) { // console.log(recv);
connection.send(buf)
}
function clientChange(params) {
// Update the client configuration with one from params
for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
if (server.server.groups[i_group].clients[i_client].id == params.id) {
server.server.groups[i_group].clients[i_client].config = Object.assign(server.server.groups[i_group].clients[i_client].config, params);
}
}
}
}
function clientConnect(params) {
// Update all client info
for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
if (server.server.groups[i_group].clients[i_client].id == params.client.id) { if (server.server.groups[i_group].clients[i_client].id == params.client.id) {
server.server.groups[i_group].clients[i_client] = params.client; server.server.groups[i_group].clients[i_client] = params.client;
// console.log(server.server.groups[i_group].clients[i_client]); // console.log(server.server.groups[i_group].clients[i_client]);
} }
i_client++
} }
i_group++
} }
} }
function groupMute(params) {//console.log(params); function groupMute(params) {
var i_group = 0 // Set group mute boolean
for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
while (i_group < server.server.groups.length) {
if (server.server.groups[i_group].id == params.id) { if (server.server.groups[i_group].id == params.id) {
server.server.groups[i_group].muted = params.mute; server.server.groups[i_group].muted = params.mute;
// console.log(server.server.groups[i_group]);
} }
i_group++
} }
} }
function groupStream(params) {//console.log(params); function groupStream(params) {
var i_group = 0 // Set group stream id
for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
while (i_group < server.server.groups.length) {
if (server.server.groups[i_group].id == params.id) { if (server.server.groups[i_group].id == params.id) {
server.server.groups[i_group].stream_id = params.stream_id; server.server.groups[i_group].stream_id = params.stream_id;
// console.log(server.server.groups[i_group]);
} }
i_group++
} }
} }
function streamUpdate(params) {//console.log(params); function streamUpdate(params) {
var i_stream = 0 // Update all stream inforamtion
for (let i_stream = 0; i_stream < server.server.streams.length;) {
while (i_stream < server.server.streams.length) {
if (server.server.streams[i_stream].id == params.id) { if (server.server.streams[i_stream].id == params.id) {
server.server.streams[i_stream] = params.stream; server.server.streams[i_stream] = params.stream;
// console.log(server.server.streams[i_stream]); // console.log(server.server.streams[i_stream]);
} }
i_stream++
} }
} }
function show() { function show() {
var i_group = 0; // Render the page
var content = ""; var content = "";
while (i_group < server.server.groups.length) { for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
var i_client = 0; // Set mute variables
var classgroup;
var unmuted; var unmuted;
var streamselect = "<select id='stream_" + server.server.groups[i_group].id + "' onchange='setStream(\"" + server.server.groups[i_group].id + "\")' class='stream'>"
var i_stream = 0;
while (i_stream < server.server.streams.length) {
var streamselected = "";
if (server.server.groups[i_group].stream_id == server.server.streams[i_stream].id) { streamselected = 'selected' }
streamselect = streamselect + "<option value='" + server.server.streams[i_stream].id + "' " + streamselected + ">" + server.server.streams[i_stream].id + ": " + server.server.streams[i_stream].status + "</option>";
i_stream++
}
streamselect = streamselect + "</select>";
var classgroup = 'group';
if (server.server.groups[i_group].muted == true) { classgroup = 'groupmuted' }
content = content + "<div id='g_" + server.server.groups[i_group].id + "' class='" + classgroup + "'>";
content = content + streamselect;
var mutetext; var mutetext;
if (server.server.groups[i_group].muted == true) { if (server.server.groups[i_group].muted == true) {
classgroup = 'groupmuted';
unmuted = 'false'; unmuted = 'false';
mutetext = '&#x1F507'; mutetext = '&#x1F507';
} } else {
if (server.server.groups[i_group].muted == false) { classgroup = 'group';
unmuted = 'true'; unmuted = 'true';
mutetext = '&#128266'; mutetext = '&#128266';
} }
content = content + " <a href=\"javascript:setMuteGroup('" + server.server.groups[i_group].id + "','" + unmuted + "');\" class='mutebuttongroup'>" + mutetext + "</a>"; // Start group div
//content=content+": "+server.server.groups[i_group].muted; content += "<div id='g_" + server.server.groups[i_group].id + "' class='" + classgroup + "'>";
content = content + "<input type='button' value='Refresh' class='refreshbutton' onclick='javascript: location.reload()'>"; // Create stream selection dropdown
content = content + "<br>"; var streamselect = "<select id='stream_" + server.server.groups[i_group].id + "' onchange='setStream(\"" + server.server.groups[i_group].id + "\")' class='stream'>"
while (i_client < server.server.groups[i_group].clients.length) { for (let i_stream = 0; i_stream < server.server.streams.length; i_stream++) {
var streamselected = "";
if (server.server.groups[i_group].stream_id == server.server.streams[i_stream].id) {
streamselected = 'selected'
}
streamselect += "<option value='" + server.server.streams[i_stream].id + "' " + streamselected + ">" + server.server.streams[i_stream].id + ": " + server.server.streams[i_stream].status + "</option>";
}
streamselect += "</select>";
content += streamselect;
// Group mute and refresh button
content += " <a href=\"javascript:setMuteGroup('" + server.server.groups[i_group].id + "','" + unmuted + "');\" class='mutebuttongroup'>" + mutetext + "</a>";
content += "<input type='button' value='Refresh' class='refreshbutton' onclick='javascript: location.reload()'>";
content += "<br/>";
// Create clients in group
for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
var sv = server.server.groups[i_group].clients[i_client]; var sv = server.server.groups[i_group].clients[i_client];
var groupselect = "<select id='group_" + sv.id + "' onchange='setGroup(\"" + sv.id + "\")'>"; // Set name and connection state vars, start client div
var o_group = 0
while (o_group < server.server.groups.length) {
var groupselected = "";
if (o_group == i_group) { groupselected = 'selected' }
groupselect = groupselect + "<option value='" + server.server.groups[o_group].id + "' " + groupselected + ">Group " + o_group + " (" + server.server.groups[o_group].clients.length + " Clients)</option>";
o_group++
}
groupselect = groupselect + "<option value='new'>new</option>";
groupselect = groupselect + "</select>"
var name; var name;
var unmuted;
if (sv.config.name != "") { name = sv.config.name; }
else { name = sv.host.name; }
var clas = 'client' var clas = 'client'
if (sv.connected == false) { clas = 'disconnected'; } if (sv.config.name != "") {
name = sv.config.name;
} else {
name = sv.host.name;
}
if (sv.connected == false) {
clas = 'disconnected';
}
content = content + "<div id='c_" + sv.id + "' class='" + clas + "'>"; content = content + "<div id='c_" + sv.id + "' class='" + clas + "'>";
// Client mute status vars
var unmuted;
var mutetextclient; var mutetextclient;
var sliderclass;
if (sv.config.volume.muted == true) { if (sv.config.volume.muted == true) {
unmuted = 'false'; unmuted = 'false';
sliderclass = 'slidermute';
mutetext = '&#128263'; mutetext = '&#128263';
} } else {
if (sv.config.volume.muted == false) { sliderclass = 'slider'
unmuted = 'true'; unmuted = 'true';
mutetext = '&#128266'; mutetext = '&#128266';
} }
// Client group selection vars
var groupselect = "<select id='group_" + sv.id + "' onchange='setGroup(\"" + sv.id + "\")'>";
for (let o_group = 0; o_group < server.server.groups.length; o_group++) {
var groupselected = "";
if (o_group == i_group) {
groupselected = 'selected'
}
groupselect = groupselect + "<option value='" + server.server.groups[o_group].id + "' " + groupselected + ">Group " + o_group + " (" + server.server.groups[o_group].clients.length + " Clients)</option>";
}
groupselect = groupselect + "<option value='new'>new</option>";
groupselect = groupselect + "</select>"
// Populate client div
content = content + " <a href=\"javascript:setVolume('" + sv.id + "','" + unmuted + "');\" class='mutebutton'>" + mutetext + "</a>"; content = content + " <a href=\"javascript:setVolume('" + sv.id + "','" + unmuted + "');\" class='mutebutton'>" + mutetext + "</a>";
// content=content+": "+sv.config.volume.muted;
var sliderclass = 'slider';
if (sv.config.volume.muted == true) { sliderclass = 'slidermute'; }
content = content + "<div class='sliders'><div class='sliderdiv'><input type='range' min=0 max=100 step=1 id='vol_" + sv.id + "' onchange='javascript:setVolume(\"" + sv.id + "\",\"" + sv.config.volume.muted + "\")' value=" + sv.config.volume.percent + " class='" + sliderclass + "' orient='vertical'></div>"; content = content + "<div class='sliders'><div class='sliderdiv'><input type='range' min=0 max=100 step=1 id='vol_" + sv.id + "' onchange='javascript:setVolume(\"" + sv.id + "\",\"" + sv.config.volume.muted + "\")' value=" + sv.config.volume.percent + " class='" + sliderclass + "' orient='vertical'></div>";
content = content + "<div class='finebg'>++<br>+<br>0<br>-<br>--</div><div class='sliderdiv_fine'><input type='range' min=0 max=10 step=1 id='vol_fine_" + sv.id + "' onchange='javascript:setVolume(\"" + sv.id + "\",\"" + sv.config.volume.muted + "\")' value=5 class='" + sliderclass + "_fine' orient='vertical'></div></div>"; content = content + "<div class='finebg'>++<br>+<br>0<br>-<br>--</div><div class='sliderdiv_fine'><input type='range' min=0 max=10 step=1 id='vol_fine_" + sv.id + "' onchange='javascript:setVolume(\"" + sv.id + "\",\"" + sv.config.volume.muted + "\")' value=5 class='" + sliderclass + "_fine' orient='vertical'></div></div>";
content = content + " <a href=\"javascript:setName('" + sv.id + "');\" class='edit'>&#9998</a>"; content = content + " <a href=\"javascript:setName('" + sv.id + "');\" class='edit'>&#9998</a>";
content = content + name; content = content + name;
// content=content+" Connected:"+sv.connected;
content = content + groupselect; content = content + groupselect;
content = content + "</div>"; content = content + "</div>";
i_client++
} }
content = content + "</div>" content = content + "</div>"
i_group++
} }
// Pad then update page
content = content + "<br><br>"; content = content + "<br><br>";
document.getElementById('show').innerHTML = content; document.getElementById('show').innerHTML = content;
} }
@ -204,154 +238,157 @@
percent = document.getElementById('vol_' + id).value; percent = document.getElementById('vol_' + id).value;
percent_fine = document.getElementById('vol_fine_' + id).value; percent_fine = document.getElementById('vol_fine_' + id).value;
//alert(percent +" "+percent_fine+" "+Number(percent)); // Take away 5 as it's the default of the fine slider. Only relevant if it
// has changed
percent = Number(percent) + Number(percent_fine) - 5; percent = Number(percent) + Number(percent_fine) - 5;
if (percent < 0) { percent = 0 }
if (percent > 100) { percent = 100 }
send('{"id":8,"jsonrpc":"2.0","method":"Client.SetVolume","params":{"id":"' + id + '","volume":{"muted":' + mute + ',"percent":' + percent + '}}}') if (percent < 0) {
percent = 0
var i_group = 0 }
else if (percent > 100) {
while (i_group < server.server.groups.length) { percent = 100
var i_client = 0
while (i_client < server.server.groups[i_group].clients.length) {
var sv = server.server.groups[i_group].clients[i_client];
if (sv.id == id) {
if (mute == 'true') { sv.config.volume.muted = true; }
if (mute == 'false') { sv.config.volume.muted = false; }
sv.config.volume.percent = percent;
// console.log(server.server.groups[i_group]);
}
i_client++
}
i_group++
} }
// Request changes
send('{"id":8,"jsonrpc":"2.0","method":"Client.SetVolume","params":{"id":"' + id + '","volume":{"muted":' + mute + ',"percent":' + percent + '}}}')
// Make updates to server info and refresh content
for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
var sv = server.server.groups[i_group].clients[i_client];
if (sv.id == id) {
if (mute == 'true') {
sv.config.volume.muted = true;
}
if (mute == 'false') {
sv.config.volume.muted = false;
}
sv.config.volume.percent = percent;
}
}
}
show() show()
} }
function setMuteGroup(id, what) { function setMuteGroup(id, what) {
send('{"id":"MuteGroup_' + id + '","jsonrpc":"2.0","method":"Group.SetMute","params":{"id":"' + id + '","mute":' + what + '}}') send('{"id":"MuteGroup_' + id + '","jsonrpc":"2.0","method":"Group.SetMute","params":{"id":"' + id + '","mute":' + what + '}}')
var i_group = 0
while (i_group < server.server.groups.length) { for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
if (server.server.groups[i_group].id == id) { if (server.server.groups[i_group].id == id) {
if (what == 'true') { server.server.groups[i_group].muted = true; } if (what == 'true') {
if (what == 'false') { server.server.groups[i_group].muted = false; } server.server.groups[i_group].muted = true;
}
if (what == 'false') {
server.server.groups[i_group].muted = false;
}
// console.log(server.server.groups[i_group]); // console.log(server.server.groups[i_group]);
} }
i_group++
} }
show() show()
} }
function setStream(id) { function setStream(id) {
send('{"id":4,"jsonrpc":"2.0","method":"Group.SetStream","params":{"id":"' + id + '","stream_id":"' + document.getElementById('stream_' + id).value + '"}}') send('{"id":4,"jsonrpc":"2.0","method":"Group.SetStream","params":{"id":"' + id + '","stream_id":"' + document.getElementById('stream_' + id).value + '"}}')
var i_group = 0 for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
while (i_group < server.server.groups.length) {
if (server.server.groups[i_group].id == id) { if (server.server.groups[i_group].id == id) {
server.server.groups[i_group].stream_id = document.getElementById('stream_' + id).value; server.server.groups[i_group].stream_id = document.getElementById('stream_' + id).value;
// console.log(server.server.groups[i_group]); // console.log(server.server.groups[i_group]);
} }
i_group++
} }
show() show()
} }
function setGroup(id) { function setGroup(id) {
group = document.getElementById('group_' + id).value; group = document.getElementById('group_' + id).value;
var current_group;
var i_group = 0
while (i_group < server.server.groups.length) {
var i_client = 0
while (i_client < server.server.groups[i_group].clients.length) {
if (id == server.server.groups[i_group].clients[i_client].id) { current_group = server.server.groups[i_group].id }
i_client++
}
i_group++
}
var send_clients = []; // Get client group id
var i_group = 0 var current_group;
while (i_group < server.server.groups.length) { groups:
if (server.server.groups[i_group].id == group || (group == "new" && server.server.groups[i_group].id == current_group)) { for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
var i_client = 0 for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
while (i_client < server.server.groups[i_group].clients.length) { if (id == server.server.groups[i_group].clients[i_client].id) {
if (group == "new" && server.server.groups[i_group].clients[i_client].id == id) { } current_group = server.server.groups[i_group].id;
else {//console.log(group); break groups;
//console.log(server.server.groups[i_group].clients[i_client].id);
//console.log(id);
send_clients[send_clients.length] = server.server.groups[i_group].clients[i_client].id;
}
i_client++
} }
} }
i_group++
} }
if (group != "new") { send_clients[send_clients.length] = id; }
// Get
// List of target group's clients
// OR
// List of current group's other clients
var send_clients = [];
for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
if (server.server.groups[i_group].id == group || (group == "new" && server.server.groups[i_group].id == current_group)) {
for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
if (group == "new" && server.server.groups[i_group].clients[i_client].id == id) { }
else {
send_clients[send_clients.length] = server.server.groups[i_group].clients[i_client].id;
}
}
}
}
if (group == "new") {
group = current_group
}
else {
send_clients[send_clients.length] = id;
}
var send_clients_string = JSON.stringify(send_clients); var send_clients_string = JSON.stringify(send_clients);
// console.log(send_clients_string);
var sendgroup = group
if (group == "new") { group = current_group }
send('{"id":1,"jsonrpc":"2.0","method":"Group.SetClients","params":{"clients":' + send_clients_string + ',"id":"' + group + '"}}') send('{"id":1,"jsonrpc":"2.0","method":"Group.SetClients","params":{"clients":' + send_clients_string + ',"id":"' + group + '"}}')
//send('{"id":1,"jsonrpc":"2.0","method":"Server.GetStatus"}}')
} }
function setName(id) { function setName(id) {
// Get current name and lacency
var current_name; var current_name;
var current_latemcy; var current_latency;
var i_group = 0; groups:
for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
while (i_group < server.server.groups.length) { for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
var i_client = 0
while (i_client < server.server.groups[i_group].clients.length) {
var sv = server.server.groups[i_group].clients[i_client]; var sv = server.server.groups[i_group].clients[i_client];
if (sv.id == id) { if (sv.id == id) {
if (sv.config.name != "") { current_name = sv.config.name; } if (sv.config.name != "") {
else { current_name = sv.host.name; } current_name = sv.config.name;
} else {
current_name = sv.host.name;
}
current_latency = sv.config.latency; current_latency = sv.config.latency;
break groups;
} }
i_client++
} }
i_group++
} }
var newName = window.prompt("New Name", current_name); var newName = window.prompt("New Name", current_name);
var newLatency = window.prompt("New Latency", current_latency); var newLatency = window.prompt("New Latency", current_latency);
send('{"id":6,"jsonrpc":"2.0","method":"Client.SetName","params":{"id":"' + id + '","name":"' + newName + '"}}') // Don't change anything if user cancel's
send('{"id":7,"jsonrpc":"2.0","method":"Client.SetLatency","params":{"id":"' + id + '","latency":' + newLatency + '}}') if (newName != null) {
send('{"id":6,"jsonrpc":"2.0","method":"Client.SetName","params":{"id":"' + id + '","name":"' + newName + '"}}')
} else {
newName = current_name
}
if (newLatency != null) {
send('{"id":7,"jsonrpc":"2.0","method":"Client.SetLatency","params":{"id":"' + id + '","latency":' + newLatency + '}}')
} else {
newLatency = current_latency
}
var i_group = 0; for (let i_group = 0; i_group < server.server.groups.length; i_group++) {
while (i_group < server.server.groups.length) { for (let i_client = 0; i_client < server.server.groups[i_group].clients.length; i_client++) {
var i_client = 0
while (i_client < server.server.groups[i_group].clients.length) {
var sv = server.server.groups[i_group].clients[i_client]; var sv = server.server.groups[i_group].clients[i_client];
if (sv.id == id) { if (sv.id == id) {
sv.config.name = newName; sv.config.name = newName;
sv.config.latency = newLatency; sv.config.latency = newLatency;
} }
i_client++
} }
i_group++
} }
show() show()
} }
</script>
</script>
<style> <style>
body { body {
background: #1f1f1f; background: #1f1f1f;
@ -456,7 +493,6 @@
opacity: 0.27; opacity: 0.27;
} }
.sliders { .sliders {
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
@ -464,12 +500,10 @@
padding-top: 10px; padding-top: 10px;
clear: both; clear: both;
float: none; float: none;
} }
.sliderdiv { .sliderdiv {
display: inline-block; display: inline-block;
padding-left: 40px; padding-left: 40px;
text-align: left; text-align: left;
width: 20px; width: 20px;
@ -477,10 +511,8 @@
.sliderdiv_fine { .sliderdiv_fine {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
width: 20px; width: 20px;
position: relative; position: relative;
top: 0px; top: 0px;
left: 13px; left: 13px;
@ -506,8 +538,7 @@
border: 1px solid #555555; border: 1px solid #555555;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
appearancce: none; appearance: none;
} }
.stream { .stream {
@ -518,7 +549,6 @@
.refreshbutton { .refreshbutton {
background-color: rgb(61, 61, 61); background-color: rgb(61, 61, 61);
font-size: 20px; font-size: 20px;
color: #e3e3e3; color: #e3e3e3;
border: 1px solid #555555; border: 1px solid #555555;