diff --git a/static/scorch.css b/static/scorch.css index a4cd046..9b46086 100644 --- a/static/scorch.css +++ b/static/scorch.css @@ -20,8 +20,7 @@ main { grid-template-areas: "h h h" "a b c" - "f f f" - "d d d"; + "f f f"; } #header { @@ -62,7 +61,3 @@ main { padding-right: 1em; padding-top: 8px; } - -#debugContainer { - grid-area: d; -} diff --git a/static/scorch.js b/static/scorch.js index 9e4f2b0..47f6191 100644 --- a/static/scorch.js +++ b/static/scorch.js @@ -1,45 +1,28 @@ -var socket; +var worker; function load() { - init_websocket(); + init_worker(); document.querySelector('#player').addEventListener('ended', function() { if (document.querySelector('#shuffle').checked) { - socket.send_event('random_track', {}); + ww_send_event('random_track', {}); } }); } -/* Websocket setup */ -function init_websocket() { - let _socket; - _socket = new WebSocket('wss://' + window.location.hostname + ws_uri); - _socket.send_event = send_event; - _socket.onopen = onopen; - _socket.onmessage = onmessage; - _socket.onclose = onclose; - _socket.onerror = onerror; - _socket.events = {}; - _socket.events['artist_albums'] = artist_albums_recv; - _socket.events['album_tracks'] = album_tracks_recv; - _socket.events['track'] = track_recv; - window.socket = _socket; +function init_worker() { + worker = new Worker('/static/scorchWorker.js'); + worker.onmessage = ww_onmessage; + worker.events = {}; + worker.events['artist_albums'] = artist_albums_recv; + worker.events['album_tracks'] = album_tracks_recv; + worker.events['track'] = track_recv; } -function send_event(event_title, data) { - data = JSON.stringify({'event': event_title, 'data': data}); - if (this.readyState == 0) { - console.log("Socket is still opening!"); - return; - } - log_debug_message('debug', "Sending `" + event_title + "` event with following data: " + JSON.stringify(data)); - this.send(data); +function ww_send_event(event_title, data) { + worker.postMessage([event_title, data]); } -function onopen(event) { - log_debug_message('debug', 'Websocket connected to server.'); -} - -function onmessage(event) { +function ww_onmessage(event) { let data; let event_title; try { @@ -67,31 +50,12 @@ function onmessage(event) { return; } - if (socket.events[event_title] === undefined) { + if (worker.events[event_title] === undefined) { console.log("Unknown socket event: " + event_title); return; } - log_debug_message('debug', "Received `" + event_title + "` event with following data: " + JSON.stringify(data)); - socket.events[event_title](data); -} - -async function onclose(event) { - log_debug_message('debug', 'Websocket lost connection to server.') - if (event.wasClean) { return; } // no need to reconnect - console.log(event); - console.log('Websocket lost connection to server. Re-trying...'); - await sleep(3000); - init_websocket(); -} - -function sleep(ms) { - return new Promise(resolve => setTimeout(resolve, ms)); -} - -function onerror(event) { - log_debug_message('error', 'Websocket encountered an error.') - console.log("Websocket error!") - console.log(event); + //console.log("Received `" + event_title + "` event with following data: " + JSON.stringify(data)); + worker.events[event_title](data); } /* Websocket receive */ @@ -140,7 +104,7 @@ function select_artist(select) { let data = { 'artist': select.value, }; - socket.send_event('select_artist', data); + ww_send_event('select_artist', data); } function select_album(select) { @@ -148,7 +112,7 @@ function select_album(select) { 'artist': document.querySelector('#artistList').value, 'album': select.value, }; - socket.send_event('select_album', data); + ww_send_event('select_album', data); } function select_track(select) { @@ -158,22 +122,5 @@ function select_track(select) { 'discnumber': select.selectedOptions[0].dataset['discnumber'], 'tracknumber': select.selectedOptions[0].dataset['tracknumber'], }; - socket.send_event('select_track', data); -} - -/* 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); + ww_send_event('select_track', data); } diff --git a/static/scorchWorker.js b/static/scorchWorker.js new file mode 100644 index 0000000..748b812 --- /dev/null +++ b/static/scorchWorker.js @@ -0,0 +1,48 @@ +var socket; +init_websocket(); + +onmessage = ww_onmessage; +function ww_onmessage(event) { + socket.send_event(event.data[0], event.data[1]); +} + +/* Websocket setup */ +function init_websocket() { + let _socket; + _socket = new WebSocket('wss://' + self.location.hostname + '/scorch/ws'); + _socket.send_event = ws_send_event; + _socket.onopen = ws_onopen; + _socket.onmessage = ws_onmessage; + _socket.onclose = ws_onclose; + _socket.onerror = ws_onerror; + self.socket = _socket; +} + +function ws_send_event(event_title, data) { + data = JSON.stringify({'event': event_title, 'data': data}); + if (this.readyState == 0) { + console.log("Websocket not ready."); + return; + } + //console.log("Sending `" + event_title + "` event with following data: " + JSON.stringify(data)); + this.send(data); +} + +function ws_onopen(event) { + console.log('Websocket connected to server.'); +} + +function ws_onmessage(event) { + postMessage(event.data); +} + +function ws_onclose(event) { + console.log('Websocket lost connection to server.'); + if (event.wasClean) { return; } // no need to reconnect + console.log('Connection break was unclean. Attempting to reconnect...'); + self.setTimeout(init_websocket, 3000); +} + +function ws_onerror(event) { + console.log("Websocket encountered an error."); +} diff --git a/templates/index.html b/templates/index.html index 1a0b51d..5439a6d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -44,11 +44,6 @@ -
- - -
-