refactor ajax functions, remove default track

musik.py

@@ -50,8 +50,6 @@ def index():
 	nav_items = os.listdir(MUSIC_DIR)
 	nav_items.sort()
 	nav_items = [item + '/' for item in nav_items]
-	initial_track = "/Accept/Accept - Balls to the Wall (1983) [FLAC] {74321 93214 2}/01 - Balls to the Wall.flac"
-	initial_cover = "/Accept/Accept - Balls to the Wall (1983) [FLAC] {74321 93214 2}/folder.jpg"
 	cd = "/"
 	return render_template('index.html', **locals())
 

static/musik.js

@@ -3,23 +3,20 @@ function load() {
 	document.getElementById('player').addEventListener('ended', function() {
 		// shuffle
 		if (document.getElementById('shuffle').checked) {
-			ajax('/musik/get_shuffle', function() {
+			var httpRequest;
+			httpRequest = new XMLHttpRequest();
+			httpRequest.onreadystatechange = function() {
 				if (httpRequest.readyState !== XMLHttpRequest.DONE) { return; }
 				if (httpRequest.status !== 200) { return; }
 				let track = httpRequest.responseText;
 				change_track(track);
-			});
+			};
+			httpRequest.open('GET', '/musik/get_shuffle', true);
+			httpRequest.send();
 		}
 	});
 }
 
-var httpRequest;
-function ajax(url, func) {
-	httpRequest = new XMLHttpRequest();
-	httpRequest.onreadystatechange = func;
-	httpRequest.open('GET', url, true);
-	httpRequest.send();
-}
 
 function navigate(item) {
 	if (/\..{3,5}$/.test(item)) {
@@ -62,10 +59,10 @@ function get_dir(item) {
 	else {
 		item = cd + item;
 	}
-	ajax('/musik/get_dir/' + item, update_nav_items);
-}
 
-function update_nav_items() {
+	var httpRequest;
+	httpRequest = new XMLHttpRequest();
+	httpRequest.onreadystatechange = function () {
 		if (httpRequest.readyState !== XMLHttpRequest.DONE) { return; }
 		if (httpRequest.status !== 200) { return; }
 		nav_items = JSON.parse(httpRequest.responseText);
@@ -75,4 +72,7 @@ function update_nav_items() {
 			html_str += `<li><a href="javascript:void(0);" onclick="navigate(\`${nav_items[i]}\`)">${nav_items[i]}</a></li>`;
 		}
 		document.getElementById('navItems').innerHTML = html_str;
+	};
+	httpRequest.open('GET', '/musik/get_dir/' + item, true);
+	httpRequest.send();
 }

templates/index.html

@@ -18,11 +18,11 @@
 			</ul>
 		</div>
 		<div id="playerContainer">
-			<span id="albumCover"><img src="/musik/album_cover{{ initial_cover }}"/></span>
+			<span id="albumCover"><img src=""/></span>
 			<span id="playerControls">
-				<h3 id="nowPlaying">{{ initial_track }}</h3>
+				<h3 id="nowPlaying"></h3>
 				<audio id="player" controls>
-					<source id="stream" src="{{ url_for('stream', track=initial_track) }}" type="audio/ogg">
+					<source id="stream" src="" type="audio/ogg">
 				</audio>
 				<div>
 					<input type="checkbox" name="shuffle" id="shuffle" checked="true">