Compare commits

..

No commits in common. "84ac3813ed79a07e44125ddeffca287d5e34f1a9" and "5d96848c8cffeee253940c566aae494f0f970599" have entirely different histories.

3 changed files with 14 additions and 49 deletions

View File

@ -16,12 +16,11 @@ main {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto auto; grid-template-rows: auto 1fr auto;
grid-template-areas: grid-template-areas:
"h h h" "h h h"
"a b c" "a b c"
"f f f" "f f f";
"d d d";
} }
#header { #header {
@ -62,7 +61,3 @@ main {
padding-right: 1em; padding-right: 1em;
padding-top: 8px; padding-top: 8px;
} }
#debugContainer {
grid-area: d;
}

View File

@ -1,7 +1,7 @@
var socket; var socket;
function load() { function load() {
init_websocket(); socket = init_websocket();
document.querySelector('#player').addEventListener('ended', function() { document.querySelector('#player').addEventListener('ended', function() {
if (document.querySelector('#shuffle').checked) { if (document.querySelector('#shuffle').checked) {
socket.send_event('random_track', {}); socket.send_event('random_track', {});
@ -11,18 +11,16 @@ function load() {
/* Websocket setup */ /* Websocket setup */
function init_websocket() { function init_websocket() {
let _socket; let socket = new WebSocket('wss://' + window.location.hostname + ws_uri);
_socket = new WebSocket('wss://' + window.location.hostname + ws_uri); socket.send_event = send_event;
_socket.send_event = send_event; socket.onmessage = onmessage;
_socket.onopen = onopen; socket.onclose = onclose;
_socket.onmessage = onmessage; socket.onerror = onerror;
_socket.onclose = onclose; socket.events = {};
_socket.onerror = onerror; socket.events['artist_albums'] = artist_albums_recv;
_socket.events = {}; socket.events['album_tracks'] = album_tracks_recv;
_socket.events['artist_albums'] = artist_albums_recv; socket.events['track'] = track_recv;
_socket.events['album_tracks'] = album_tracks_recv; return socket;
_socket.events['track'] = track_recv;
window.socket = _socket;
} }
function send_event(event_title, data) { function send_event(event_title, data) {
@ -31,14 +29,9 @@ function send_event(event_title, data) {
console.log("Socket is still opening!"); console.log("Socket is still opening!");
return; return;
} }
log_debug_message('debug', "Sending `" + event_title + "` event with following data: " + JSON.stringify(data));
this.send(data); this.send(data);
} }
function onopen(event) {
log_debug_message('debug', 'Websocket connected to server.');
}
function onmessage(event) { function onmessage(event) {
let data; let data;
let event_title; let event_title;
@ -71,17 +64,15 @@ function onmessage(event) {
console.log("Unknown socket event: " + event_title); console.log("Unknown socket event: " + event_title);
return; return;
} }
log_debug_message('debug', "Received `" + event_title + "` event with following data: " + JSON.stringify(data));
socket.events[event_title](data); socket.events[event_title](data);
} }
async function onclose(event) { async function onclose(event) {
log_debug_message('debug', 'Websocket lost connection to server.')
if (event.wasClean) { return; } // no need to reconnect if (event.wasClean) { return; } // no need to reconnect
console.log(event); console.log(event);
console.log('Websocket lost connection to server. Re-trying...'); console.log('Websocket lost connection to server. Re-trying...');
await sleep(3000); await sleep(3000);
init_websocket(); socket = init_websocket();
} }
function sleep(ms) { function sleep(ms) {
@ -89,7 +80,6 @@ function sleep(ms) {
} }
function onerror(event) { function onerror(event) {
log_debug_message('error', 'Websocket encountered an error.')
console.log("Websocket error!") console.log("Websocket error!")
console.log(event); console.log(event);
} }
@ -162,18 +152,3 @@ function select_track(select) {
} }
/* DOM */ /* DOM */
function show_debug(checkbox) {
if (checkbox.checked) {
document.querySelector('#debugLog').style.display = 'inherit';
} else {
document.querySelector('#debugLog').style.display = 'none';
}
}
function log_debug_message(log_level, message) {
let msg = new Date().toTimeString().replace(/ .*/, '') + ' ' + message;
let li = document.createElement('li');
li.className = log_level;
li.textContent = msg;
document.querySelector('#debugLog').appendChild(li);
}

View File

@ -44,11 +44,6 @@
</div> </div>
</span> </span>
</div> </div>
<div id="debugContainer">
<input type="checkbox" name="showDebug" id="showDebug" onchange="show_debug(this)">
<label for="showDebug">Show Debug Log</label>
<pre><ul id="debugLog" style="display:none"></ul></pre>
</div>
</main> </main>
</body> </body>
</html> </html>