static/scorch.css

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

static/scorch.js

@@ -1,7 +1,7 @@
 var socket;
 
 function load() {
-	init_websocket();
+	socket = init_websocket();
 	document.querySelector('#player').addEventListener('ended', function() {
 		if (document.querySelector('#shuffle').checked) {
 			socket.send_event('random_track', {});
@@ -11,18 +11,16 @@ function load() {
 
 /* Websocket setup */
 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) {
@@ -31,14 +29,9 @@ function send_event(event_title, data) {
 		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 onopen(event) {
-	log_debug_message('debug', 'Websocket connected to server.');
-}
-
 function onmessage(event) {
 	let data;
 	let event_title;
@@ -71,17 +64,15 @@ function onmessage(event) {
 		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();
+	socket = init_websocket();
 }
 
 function sleep(ms) {
@@ -89,7 +80,6 @@ function sleep(ms) {
 }
 
 function onerror(event) {
-	log_debug_message('error', 'Websocket encountered an error.')
 	console.log("Websocket error!")
 	console.log(event);
 }
@@ -162,18 +152,3 @@ function select_track(select) {
 }
 
 /* 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);
-}

templates/index.html

@@ -44,11 +44,6 @@
 					</div>
 				</span>
 			</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>
 	</body>
 </html>