api and webpage are working

musik.py

@@ -8,7 +8,7 @@ import random
 import subprocess
 from urllib import parse
 
-from flask import Flask, Response, render_template, send_file
+from flask import Flask, Response, render_template, send_file, url_for
 from flask_restful import reqparse, abort, Api, Resource
 import mutagen
 
@@ -78,8 +78,8 @@ tracks = init_library()
 @app.route('/')
 def index():
 	"""Main index page."""
-	artist = list(set(t.artist for t in tracks))
+	artists = list(set(t.artist for t in tracks))
-	artist.sort()
+	artists.sort()
 	return render_template('index.html', **locals())
 
 
@@ -106,50 +106,61 @@ class Selection(Resource):
 	def get(self):
 		global tracks
 		args = parser.parse_args()
-		print(args)
 		validate_select_args(args)
 
 		if args.get('track'):
-			track = [t for t in tracks
+			for track in tracks:
-				if (t.title == args.get('track') and
+				if (track.artist == args.get('artist') and
-				t.album == args.get('album') and
+					track.album == args.get('album') and
-				t.artist == args.get('artist'))]
+					track.title == args.get('track')):
-			if not track:
+					break
-				abort(404, message="Track does not exist.")
 			else:
-				return vars(track[0])
+				abort(404, message="Track does not exist.")
+			found = dict(vars(track))
+			found.pop('filepath')
+			found['streampath'] = url_for(
+				'stream',
+				artist=track.artist,
+				album=track.album,
+				track=track.title)
+			return found
 
 		elif args.get('album'):
-			tracks = [t for t in tracks
+			found = []
-				if (t.album == args.get('album') and
+			for track in tracks:
-				t.artist == args.get('artist'))]
+				if (track.artist == args.get('artist') and
-			if not tracks:
+					track.album == args.get('album')):
+					found.append(track)
+			if not found:
 				abort(404, message="Album does not exist.")
-			else:
+			return [t.title for t in found]
-				return [t.title for t in tracks]
 
 		elif args.get('artist'):
-			albums = list(set(t.album for t in tracks
+			found = []
-				if t.artist == args.get('artist')))
+			for track in tracks:
-			if not albums:
+				if track.artist == args.get('artist'):
+					found.append(track)
+			if not found:
 				abort(404, message="Artist does not exist.")
-			else:
+			found = list(set(t.album for t in found))
-				return sorted(albums)
+			return sorted(found)
 
 api.add_resource(Selection, '/select')
+api.init_app(app)
 
 
-@app.route('/stream/<path:track>')
+@app.route('/stream/<artist>/<album>/<track>')
-def stream(track):
+def stream(artist, album, track):
 	"""View for the raw audio file."""
-	track = parse.unquote(track)
+	for t in tracks:
-	path = os.path.join(MUSIC_DIR, track)
+		if (t.artist == artist and
-	path = os.path.abspath(path)
+			t.album == album and
-	if not path.startswith(MUSIC_DIR):
+			t.title == track):
-		return "False"
+			break
-	if not os.path.isfile(path):
+	else:
-		return "False"
+		abort(404, message="Track does not exist.")
-	FFMPEG_CMD[5] = path
+
+	FFMPEG_CMD[5] = t.filepath
 
 	def generate():
 		with subprocess.Popen(FFMPEG_CMD, stdout=subprocess.PIPE) as proc:

static/musik.css

@@ -28,32 +28,7 @@ img {
 	border-bottom: 2px solid #ccc;
 }
 
-#selectArtistContainer {
+.list {
-	height: 100%;
-	width: 100%;
-}
-
-#selectArtist {
-	height: 100%;
-	width: 100%;
-}
-
-#selectAlbumContainer {
-	height: 100%;
-	width: 100%;
-}
-
-#selectAlbum {
-	height: 100%;
-	width: 100%;
-}
-
-#selectTrackContainer {
-	height: 100%;
-	width: 100%;
-}
-
-#selectTrack {
 	height: 100%;
 	width: 100%;
 }

static/musik.js

@@ -17,20 +17,58 @@ function load() {
 	});
 }
 
-
+function select_artist(select) {
-function navigate(item) {
+	var httpRequest;
-	if (/\..{3,5}$/.test(item)) {
+	httpRequest = new XMLHttpRequest();
-		select_track(item);
+	httpRequest.onreadystatechange = function () {
-	}
+		if (httpRequest.readyState !== XMLHttpRequest.DONE) { return; }
-	else {
+		if (httpRequest.status !== 200) { return; }
-		get_dir(item);
+		nav_items = JSON.parse(httpRequest.responseText);
-	}
+		let html_str = '';
+		for (let i = 0; i < nav_items.length; i++) {
+			html_str += '<option value="' + nav_items[i] + '">' + nav_items[i] + '</option>';
+		}
+		document.getElementById('albumList').innerHTML = html_str;
+	};
+	httpRequest.open('GET', api_uri + '?artist=' + select.value, true);
+	httpRequest.send();
 }
 
-function select_track(item) {
+function select_album(select) {
-	let cd = document.getElementById('currentDirectory').innerText;
+	var httpRequest;
-	let track = cd + item;
+	httpRequest = new XMLHttpRequest();
-	change_track(track);
+	httpRequest.onreadystatechange = function () {
+		if (httpRequest.readyState !== XMLHttpRequest.DONE) { return; }
+		if (httpRequest.status !== 200) { return; }
+		nav_items = JSON.parse(httpRequest.responseText);
+		let html_str = '';
+		for (let i = 0; i < nav_items.length; i++) {
+			html_str += '<option value="' + nav_items[i] + '">' + nav_items[i] + '</option>';
+		}
+		document.getElementById('trackList').innerHTML = html_str;
+	};
+	httpRequest.open('GET', api_uri + '?artist=' + document.getElementById('artistList').value + '&album=' + select.value, true);
+	httpRequest.send();
+}
+
+function select_track(select) {
+	var httpRequest;
+	httpRequest = new XMLHttpRequest();
+	httpRequest.onreadystatechange = function () {
+		if (httpRequest.readyState !== XMLHttpRequest.DONE) { return; }
+		if (httpRequest.status !== 200) { return; }
+
+		let track = JSON.parse(httpRequest.responseText);
+		console.log(track);
+		let source = document.getElementById('stream');
+		source.src = track.streampath;
+		let player = document.getElementById('player');
+		player.load();
+		player.play();
+		document.getElementById('nowPlaying').innerHTML = track.title;
+	};
+	httpRequest.open('GET', api_uri + '?artist=' + document.getElementById('artistList').value + '&album=' + document.getElementById('albumList').value + '&track=' + select.value, true);
+	httpRequest.send();
 }
 
 function change_track(track) {
@@ -45,34 +83,3 @@ function change_track(track) {
 	let art = document.getElementById('albumCover');
 	art.firstChild.src = '/musik/album_cover' + arr.slice(0, arr.length-1).join("/") + '/folder.jpg';
 }
-
-function get_dir(item) {
-	let cd = document.getElementById('currentDirectory').innerText;
-	if (item === "../") {
-		if (cd !== "/") {
-			item = cd.slice(0, cd.slice(0, -1).lastIndexOf("/")+1);
-		}
-		else {
-			return;
-		}
-	}
-	else {
-		item = cd + item;
-	}
-
-	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);
-		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;
-	};
-	httpRequest.open('GET', '/musik/get_dir/' + item, true);
-	httpRequest.send();
-}

templates/index.html

@@ -4,26 +4,28 @@
 	<title>Musik</title>
 	<link rel="stylesheet" type="text/css" href="/static/musik.css">
 	<script type="text/javascript" src="/static/musik.js"></script>
+	<script>
+		const api_uri = "{{ url_for('selection') }}";
+	</script>
 	<script>window.onload = load;</script>
 </head>
 <body>
 	<div id="globalContainer">
 		<div id="titleContainer"><h1>Musik</h1></div>
 		<div id="navigationContainer">
-			<div id="selectArtistContainer">
+			<div id="artistListContainer" class="list">
-				<select id="selectArtist" size="2">
+				<select id="artistList" size="2" class="list" onchange="select_artist(this)">
 					{% for artist in artists %}
-					<!--<li><a href="javascript:void(0);" onclick="navigate('{{ item }}')">{{ item }}</a></li>-->
+					<option value="{{ artist }}">{{ artist }}</option>
-					<option>{{ artist }}</option>
 					{% endfor %}
 				</select>
 			</div>
-			<div id="selectAlbumContainer">
+			<div id="albumListContainer" class="list">
-				<select id="selectAlbum" size="2">
+				<select id="albumList" size="2" class="list" onchange="select_album(this)">
 				</select>
 			</div>
-			<div id="selectTrackContainer">
+			<div id="trackListContainer" class="list">
-				<select id="selectTrack" size="2">
+				<select id="trackList" size="2" class="list" onchange="select_track(this)">
 				</select>
 			</div>
 		</div>