iou1name/Musik
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

changed css, added preliminary support for album art display

Browse Source
This commit is contained in:
iou1name 2018-09-20 10:00:07 -04:00
parent ade66a4a1b
commit f23b55e5bd
3 changed files with 60 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
musik.py
View File

@ -8,7 +8,7 @@ import random
import subprocess import subprocess
from urllib import parse from urllib import parse
from flask import Flask, Response, render_template from flask import Flask, Response, render_template, send_file
from werkzeug.utils import secure_filename from werkzeug.utils import secure_filename
MUSIC_DIR = "/mnt/music/Music" MUSIC_DIR = "/mnt/music/Music"
@ -32,6 +32,7 @@ def index():
nav_items.sort() nav_items.sort()
nav_items = [item + '/' for item in nav_items] 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_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 = "/" cd = "/"
return render_template('index.html', **locals()) return render_template('index.html', **locals())
@ -84,7 +85,7 @@ def get_dir(directory):
@app.route('/get_shuffle') @app.route('/get_shuffle')
def shuffle(): def shuffle():
"""Returns a randomly selected song from the library.""" """Returns a randomly selected track from the library."""
item = random.choice(os.listdir(MUSIC_DIR)) item = random.choice(os.listdir(MUSIC_DIR))
path = os.path.join(MUSIC_DIR, item) path = os.path.join(MUSIC_DIR, item)
n = 0 n = 0
@ -101,5 +102,18 @@ def shuffle():
return path.replace(MUSIC_DIR, '') return path.replace(MUSIC_DIR, '')
@app.route('/album_cover/<path:cover>')
def album_cover(cover):
"""View for the raw audio file."""
path = os.path.join(MUSIC_DIR, cover)
path = os.path.abspath(path)
if not path.startswith(MUSIC_DIR):
return "False"
if not os.path.isfile(path):
return "False"
return send_file(path)
if __name__ == "__main__": if __name__ == "__main__":
app.run(host='0.0.0.0', port=5150) app.run(host='0.0.0.0', port=5150)

40
static/musik.css
View File

@ -1,11 +1,20 @@
#mainContainer { body {
position: absolute; margin: 0;
top: 0; }
right: 0;
height: 100%; img {
width: 100%; max-width:100%;
max-height:100%;
}
#globalContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh;
}
#titleContainer {
text-align: center;
} }
#navigationContainer { #navigationContainer {
@ -15,6 +24,25 @@
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc;
} }
#currentDirectory {
padding-left: 0.5em;
}
#navItems { #navItems {
list-style-type: none; list-style-type: none;
} }
#playerContainer {
flex: 0 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
}
#albumCover {
padding-right: 1em;
}
#playerControls {
text-align: center;
}

16
templates/index.html
View File

@ -7,8 +7,8 @@
<script>window.onload = load;</script> <script>window.onload = load;</script>
</head> </head>
<body> <body>
<div id="mainContainer"> <div id="globalContainer">
<center><h1>Musik</h1></center> <div id="titleContainer"><h1>Musik</h1></div>
<div id="navigationContainer"> <div id="navigationContainer">
<div id="currentDirectory">{{ cd }}</div> <div id="currentDirectory">{{ cd }}</div>
<ul id="navItems"> <ul id="navItems">
@ -18,13 +18,17 @@
</ul> </ul>
</div> </div>
<div id="playerContainer"> <div id="playerContainer">
<center> <div id="albumCover"><img src="/musik/album_cover{{ initial_cover }}"/></div>
<div><h3 id="nowPlaying">{{ initial_track }}</h3></div> <div id="playerControls">
<h3 id="nowPlaying">{{ initial_track }}</h3>
<audio id="player" controls> <audio id="player" controls>
<source id="stream" src="{{ url_for('stream', track=initial_track) }}" type="audio/ogg"> <source id="stream" src="{{ url_for('stream', track=initial_track) }}" type="audio/ogg">
</audio> </audio>
<div><input type="checkbox" id="shuffle">Shuffle</input> <div>
</center> <input type="checkbox" name="shuffle" id="shuffle" checked="true">
<label for="shuffle">Shuffle</label>
</div>
</div>
</div> </div>
</div> </div>
</body> </body>