navigation and playing works

musik.py

@@ -2,10 +2,15 @@
 """
 Music streaming.
 """
+import os
+import json
 import subprocess
+from urllib import parse
 
 from flask import Flask, Response, render_template
+from werkzeug.utils import secure_filename
 
+MUSIC_DIR = "/mnt/music/Music"
 FFMPEG_CMD = [
 	'ffmpeg', '-y',
 	'-loglevel', 'panic',
@@ -21,14 +26,24 @@ app = Flask(__name__)
 @app.route('/')
 def index():
 	"""Main index page."""
-	track = "01 - Balls to the Wall.flac"
-	return render_template('index.html', track=track)
+	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"
+	cd = "/"
+	return render_template('index.html', **locals())
 
 
-@app.route('/stream/<track>')
+@app.route('/stream/<path:track>')
 def stream(track):
 	"""View for the raw audio file."""
-	FFMPEG_CMD[5] = track
+	path = os.path.join(MUSIC_DIR, track)
+	path = os.path.abspath(path)
+	if not path.startswith(MUSIC_DIR):
+		return "False"
+	if not os.path.isfile(path):
+		return "False"
+	FFMPEG_CMD[5] = path
 
 	def generate():
 		with subprocess.Popen(FFMPEG_CMD, stdout=subprocess.PIPE) as proc:
@@ -39,5 +54,31 @@ def stream(track):
 	return Response(generate(), mimetype="audio/ogg")
 
 
+@app.route('/get_dir/<path:directory>/')
+def get_dir(directory):
+	"""Returns the contents of the requested directory."""
+	directory = directory.replace("DOTDOT", "..")
+	directory = os.path.join(MUSIC_DIR, directory)
+	directory = os.path.abspath(directory)
+	if not directory.startswith(MUSIC_DIR):
+		return "False"
+	if not os.path.isdir(directory):
+		return "False"
+
+	nav_items = os.listdir(directory)
+	nav_items.sort()
+	if directory != MUSIC_DIR:
+		nav_items = [".."] + nav_items
+
+	nav_items_new = []
+	for item in nav_items:
+		if os.path.isdir(os.path.join(directory, item)):
+			item += '/'
+		nav_items_new.append(item)
+	nav_items_new = [directory.replace(MUSIC_DIR, '') + '/'] + nav_items_new
+
+	return json.dumps(nav_items_new)
+
+
 if __name__ == "__main__":
 	app.run(host='0.0.0.0', port=5150)

static/musik.js

@@ -1,2 +1,42 @@
-function ajax() {
+var httpRequest
+function navigate(item) {
+	if (/\..{3,5}$/.test(item)) {
+		change_track(item);
+	}
+	else {
+		get_dir(item);
+	}
+}
+
+function change_track(item) {
+	let cd = document.getElementById('currentDirectory').innerText;
+	let track = cd + item;
+	let source = document.getElementById('stream');
+	source.src = '/musik/stream' + track;
+	let player = document.getElementById('player');
+	player.load();
+	player.play();
+	document.getElementById('nowPlaying').innerHTML = track;
+}
+
+function get_dir(item) {
+	let cd = document.getElementById('currentDirectory').innerText;
+	item = cd + item;
+	item = item.replace(/\.\./g, 'DOTDOT');
+	httpRequest = new XMLHttpRequest();
+	httpRequest.onreadystatechange = update_nav_items;
+	httpRequest.open('GET', '/musik/get_dir' + item, true);
+	httpRequest.send();
+}
+
+function update_nav_items() {
+	if (httpRequest.readyState !== XMLHttpRequest.DONE) { return; }
+	if (httpRequest.status !== 200) { return; }
+	nav_items = JSON.parse(httpRequest.responseText);
+	document.getElementById('currentDirectory').innerText = nav_items.shift();
+	let html_str = '';
+	for (let i = 0; i < nav_items.length; i++) {
+		html_str += '<li><a href="javascript:void(0);" onclick="navigate(\'' + nav_items[i] + '\')">' + nav_items[i] + '</a></li>';
+	}
+	document.getElementById('navItems').innerHTML = html_str;
 }

templates/index.html

@@ -9,6 +9,7 @@
 	<div id="mainContainer">
 		<center><h1>Musik</h1></center>
 		<div id="navigationContainer">
+			<div id="currentDirectory">{{ cd }}</div>
 			<ul id="navItems">
 				{% for item in nav_items %}
 				<li><a href="javascript:void(0);" onclick="navigate('{{ item }}')">{{ item }}</a></li>
@@ -17,7 +18,7 @@
 		</div>
 		<div id="playerContainer">
 			<center>
-				<div id="nowPlaying"><h3>{{ initial_track.replace('%2F', '/') }}</h3></div>
+				<div><h3 id="nowPlaying">{{ initial_track }}</h3></div>
 				<audio id="player" controls>
 					<source id="stream" src="{{ url_for('stream', track=initial_track) }}" type="audio/ogg">
 				</audio>