Compare commits

...

2 Commits

Author SHA1 Message Date
1f5eb2bc30 navigation and playing works 2018-09-13 14:22:27 -04:00
9a2938ae48 page layout 2018-09-12 17:52:38 -04:00
4 changed files with 123 additions and 14 deletions

View File

@ -2,10 +2,15 @@
""" """
Music streaming. Music streaming.
""" """
import os
import json
import subprocess import subprocess
from urllib import parse
from flask import Flask, Response, render_template from flask import Flask, Response, render_template
from werkzeug.utils import secure_filename
MUSIC_DIR = "/mnt/music/Music"
FFMPEG_CMD = [ FFMPEG_CMD = [
'ffmpeg', '-y', 'ffmpeg', '-y',
'-loglevel', 'panic', '-loglevel', 'panic',
@ -21,14 +26,24 @@ app = Flask(__name__)
@app.route('/') @app.route('/')
def index(): def index():
"""Main index page.""" """Main index page."""
track = "01 - Balls to the Wall.flac" nav_items = os.listdir(MUSIC_DIR)
return render_template('index.html', track=track) 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): def stream(track):
"""View for the raw audio file.""" """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(): def generate():
with subprocess.Popen(FFMPEG_CMD, stdout=subprocess.PIPE) as proc: with subprocess.Popen(FFMPEG_CMD, stdout=subprocess.PIPE) as proc:
@ -39,5 +54,31 @@ def stream(track):
return Response(generate(), mimetype="audio/ogg") 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__": if __name__ == "__main__":
app.run(host='0.0.0.0', port=5150) app.run(host='0.0.0.0', port=5150)

View File

@ -1,2 +1,20 @@
body { #mainContainer {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#navigationContainer {
flex: auto;
overflow: auto;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
}
#navItems {
list-style-type: none;
} }

View File

@ -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;
} }

View File

@ -6,14 +6,24 @@
<script type="text/javascript" src="/static/musik.js"></script> <script type="text/javascript" src="/static/musik.js"></script>
</head> </head>
<body> <body>
<h1>Musik</h1> <div id="mainContainer">
<div id="navigation"> <center><h1>Musik</h1></center>
</div> <div id="navigationContainer">
<div id="playerContainer"> <div id="currentDirectory">{{ cd }}</div>
<hr> <ul id="navItems">
<audio id="player" controls> {% for item in nav_items %}
<source id="stream" src="{{ url_for('stream', track=track) }}" type="audio/ogg"> <li><a href="javascript:void(0);" onclick="navigate('{{ item }}')">{{ item }}</a></li>
</audio> {% endfor %}
</ul>
</div>
<div id="playerContainer">
<center>
<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>
</center>
</div>
</div> </div>
</body> </body>
</html> </html>