fabian/esmp3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Webinterface: Added an overlay to display when the websocket isn't connected.

Browse Source
This commit is contained in:
Fabian Schlenz 2019-12-04 05:59:52 +01:00
parent 6d452ecbc0
commit fa208858d9
1 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/index.html
View File

@ -9,9 +9,24 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/272149490a.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/272149490a.js" crossorigin="anonymous"></script>
<style>
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
position: absolute;
z-index: 1;
margin: auto 0px;
vertical-align: middle;
color: white;
font-size: 60px;
text-align: center;
}
</style>
</head> </head>
<body> <body>
<div id="overlay" class="overlay">Not connected...</div>
<div class="container bg-dark text-light"> <div class="container bg-dark text-light">
<div class="row"> <div class="row">
<div class="col-sm-1"> <div class="col-sm-1">
@ -104,7 +119,7 @@
<input type="text" class="form-control" id="input_url" /> <input type="text" class="form-control" id="input_url" />
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-primary" id="button_url_open">Go</button> <button class="btn btn-primary" id="button_url_open">Go</button>
<button class="btn btn-danger" id="button_url_add_mapping" style="display: none;"><i class="fa fa-arrows-alt-h"></i></button> <button class="btn btn-warning" id="button_url_add_mapping" style="display: none;"><i class="fa fa-arrows-alt-h"></i></button>
</div> </div>
</div> </div>
@ -273,10 +288,30 @@ process_ws_message = function(event) {
} }
var play_on_click = true; var play_on_click = true;
interval = null;
ws = null;
var start_reconnect_timer = function() {
console.log("start_reconnect_timer() running...");
$('#overlay').show();
interval = setInterval(connect_to_ws, 2500);
}
var connect_to_ws = function() {
if (!ws || ws.readyState >= ws.CLOSING) {
ws = new WebSocket("ws://" + location.host + "/ws");
ws.onopen = function() {
console.log("on_open() running...");
clearInterval(interval);
$('#overlay').hide();
};
ws.onmessage = process_ws_message;
ws.onclose = start_reconnect_timer;
}
}
$(function() { $(function() {
ws = new WebSocket("ws://" + location.host + "/ws"); start_reconnect_timer();
ws.onmessage = process_ws_message;
$('#volume_slider').change(function(e) { ws.send("volume=" + e.target.value); }); $('#volume_slider').change(function(e) { ws.send("volume=" + e.target.value); });
$('#button_play').click(function(e) { ws.send("play"); }); $('#button_play').click(function(e) { ws.send("play"); });