storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Web interface

Browse Source 
Merge pull request #56 from KagurazakaNyaa/master
This commit is contained in:
azlux 2019-11-22 16:10:30 +01:00 committed by GitHub
commit dddabc94ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 233 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -108,3 +108,6 @@ venv.bak/
configuration.ini
.vscode/settings.json
2019-07-27 22_09_08-radiobrowser.py - botamusique - Visual Studio Code.png
music_folder/
tmp/

2
configuration.default.ini
View File

@ -11,7 +11,7 @@ username = botamusique
comment = Hi, I'm here to play radio, local music or youtube/soundcloud music. Have fun !
volume = 0.1
admin = User1;User2; # Allow user to kill the bot
music_folder = /home/azlux/botamusique/music_folder/
music_folder = music_folder/
tmp_folder = /tmp/
pip3_path = venv/bin/pip
auto_update = True

13
interface.py
View File

@ -122,6 +122,7 @@ def index():
user=var.user)
@web.route('/upload', methods=["POST"])
def upload():
file = request.files['file']
if not file:
@ -137,14 +138,15 @@ def upload():
elif '../' in targetdir:
return redirect("./", code=406)
# print('Uploading file:')
# print('filename:', filename)
# print('targetdir:', targetdir)
# print('mimetype:', file.mimetype)
print('Uploading file:')
print('filename:', filename)
print('targetdir:', targetdir)
print('mimetype:', file.mimetype)
if "audio" in file.mimetype:
storagepath = os.path.abspath(os.path.join(var.music_folder, targetdir))
if not storagepath.startswith(var.music_folder):
print('storagepath:',storagepath)
if not storagepath.startswith(os.path.abspath(var.music_folder)):
return redirect("./", code=406)
try:
@ -154,6 +156,7 @@ def upload():
return redirect("./", code=500)
filepath = os.path.join(storagepath, filename)
print('filepath:',filepath)
if os.path.exists(filepath):
return redirect("./", code=406)

7
static/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
static/css/bootstrap.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

53
static/index.css
View File

@ -1,53 +0,0 @@
/* necessary to place both forms/buttons next to each other */
li.file {
clear: both;
list-style-position: outside;
}
/* necessary to place both forms/buttons next to each other */
form.file {
/* Float both forms to the left */
float: left;
}
form.file.file_add {
margin-left: 5px;
margin-right: 5px;
}
/* necessary to place both forms/buttons next to each other */
form.file.file_download {
clear: right;
/* with some space to the left of the second form */
margin-right: 20px;
}
/* necessary to place all forms/buttons of the directory entries next to each other */
li.directory {
clear: both;
list-style-position: outside;
margin-top: 15px;
margin-bottom: 15px;
}
li.directory span {
float: left;
}
form.directory {
float: left;
}
form.directory.form1 {
margin-left: 5px;
margin-right: 5px;
}
form.directory.form2 {
margin-right: 5px;
}
form.directory.form3 {
clear: right;
margin-right: 5px;
}

7
static/js/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
static/js/bootstrap.bundle.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
static/js/jquery-3.4.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

253
templates/index.html
View File

@ -1,38 +1,47 @@
{% macro dirlisting(dir, path='') -%}
<ul>
<ul class="list-group">
{% for subdirname, subdirobj in dir.get_subdirs().items() %}
{%- set subdirpath = os.path.relpath(subdirobj.fullpath, music_library.fullpath) %}
<li class="directory">
<span>{{ subdirname }}/&nbsp;</span>
<form method="post" class="directory form1">
{%- set subdirid = subdirpath.replace("/","-") %}
<li class="directory list-group-item list-group-item-primary">
<span>{{ subdirpath }}/&nbsp;</span>
<div class="btn-group" role="group">
<form method="post" class="directory">
<input type="text" value="{{ subdirpath }}" name="add_folder" hidden>
<input type="submit" value="Add all tracks from this folder">
<button type="submit" class="btn btn-secondary">Add all tracks from this folder</button>
</form>
<form method="post" class="directory form2">
<form method="post" class="directory">
<input type="text" value="{{ subdirpath }}" name="add_folder_recursively" hidden>
<input type="submit" value="Add all tracks from this folder (recursively)">
<button type="submit" class="btn btn-secondary">Add all tracks from this folder (recursively)</button>
</form>
<form action="./download" method="get" class="directory form3">
<form action="./download" method="get" class="directory">
<input type="text" value="{{ subdirpath }}" name="directory" hidden>
<input type="submit" value="Download entire directory">
<button type="submit" class="btn btn-secondary">Download entire directory</button>
</form>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#multiCollapse-{{ subdirid }}" aria-expanded="true"
aria-controls="multiCollapse-{{ subdirid }}">Toggle Collapse</button>
</div>
</li>
<div class="collapse multi-collapse" id="multiCollapse-{{ subdirid }}">
{{- dirlisting(subdirobj, subdirpath) -}}
</div>
{% endfor %}
{%- set files = dir.get_files() %}
{%- if files %}
{% for file in files %}
{% set filepath = os.path.relpath(os.path.join(dir.fullpath, file), music_library.fullpath) %}
<li class="file">
<li class="file list-group-item">
<div class="btn-group" role="group">
<form method="post" class="file file_add">
<input type="text" value="{{ filepath }}" name="add_file" hidden>
<input type="submit" value="Add">
<button type="submit" class="btn btn-primary">Add</button>
</form>
<form action="./download" method="get" class="file file_download">
<input type="text" value="{{ filepath }}" name="file" hidden>
<input type="submit" value="Download">
&nbsp;{{ file }}
<button type="submit" class="btn btn-primary">Download</button>
</form>
</div>&nbsp;{{ filepath }}
</li>
{% endfor %}
{%- endif %}
@ -40,87 +49,189 @@
{%- endmacro %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
<title>botamusique web interface</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
<a href="."><h5>Refresh</h5></a>
<br>
<div id="upload">
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="playlist" class="card">
<div class="card-header">
<h2 class="card-title">Play List</h2>
</div>
<div class="card-body">
<div>
Currently Playing :
{% if playlist|length > 0 %}
{% if 'url' in playlist[0] %}
<a href="{{ playlist[0]['url'] }}">{{ playlist[0]['url'] }}</a>
{% elif 'path' in playlist[0] %}
{{ playlist[0]['path'] }}
{% endif %}
{% else %}
No music
{% endif %}
</div>
<form method="post">
<input type="text" value="randomize" name="action" hidden>
<button type="submit" class="btn btn-primary">Randomize playlist</button>
</form>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
<th scope="col">Url/Path</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{% for m in playlist[1:] %}
<tr>
<th scope="row">{{ loop.index }}</th>
<td>{{ m['type'] }}</td>
<td>
{% if 'title' in m %}
({{ m['title'] }})
{% else %}
No title
{% endif %}
</td>
<td>
{% if 'url' in m %}
<a href="{{ m['url'] }}">{{ m['url'] }}</a>
{% elif 'path' in m %}
{{ m['path'] }}
{% endif %}
</td>
<td>
<form method="post">
<input type="text" value="{{ loop.index }}" name="delete_music" hidden>
<button type="submit" class="btn btn-primary">Remove</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="browser" class="card">
<div class="card-header">
<h2 class="card-title">Music library</h2>
</div>
<div class="card-body">
<div class="btn-group" role="group">
<form action="./download" method="get" class="directory form1">
<input type="text" value="./" name="directory" hidden>
<button type="submit" class="btn btn-primary">Download entire music library</button>
</form>
<form method="post" class="directory form3">
<input type="text" value="./" name="add_folder_recursively" hidden>
<button type="submit" class="btn btn-primary">Add all tracks from music library
(recursively)</button>
</form>
</div>
<br />
{{ dirlisting(music_library) }}
</div>
</div>
</div>
</div>
</div>
<div id="upload" class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Upload File</h5>
</div>
<div class="card-body">
<form action="./upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" value="Browse Music file"/>
Upload into
<input list="targetdirs" id="targetdir" name="targetdir" placeholder="uploads" />
<div class="input-group">
<div class="custom-file">
<input type="file" name="file" class="custom-file-input" id="uploadSelectFile"
aria-describedby="uploadSubmit" value="Browse Music file" />
<label class="custom-file-label" for="uploadSelectFile">Choose file</label>
</div>
<div class="input-group-append">
<span class="input-group-text">Upload To</span>
<input class="form-control" list="targetdirs" id="targetdir" name="targetdir"
placeholder="uploads" />
<datalist id="targetdirs">
<option value="uploads">
{% for dir in music_library.get_subdirs_recursively() %}
<option value="{{ dir }}">
{% endfor %}
</datalist>
<input type="submit" value="Upload"/>
<button class="btn btn-outline-secondary" type="submit"
id="uploadSubmit">Upload</button>
</div>
</div>
</form>
</div>
<div id="url">
Add Youtube/Soundcloud URL :
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add URL</h5>
</div>
<div class="card-body">
<form method="post">
<input type=text name="add_url">
<input type="submit" value="Add URL">
<label>Add Youtube/Soundcloud URL :</label>
<input class="form-control" type="text" name="add_url">
<button type="submit" class="btn btn-primary">Add URL</button>
</form>
</div>
<div id="radio">
Add Radio URL :
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Radio</h5>
</div>
<div class="card-body">
<form method="post">
<input type=text name="add_radio">
<input type="submit" value="Add Radio">
<label>Add Radio URL :</label>
<input class="form-control" type="text" name="add_radio">
<button type="submit" class="btn btn-primary">Add Radio</button>
</form>
</div>
<div id="playlist">
Currently Playing :
{% if playlist|length > 0 %}
{{ playlist[0]['title'] }} {{ playlist[0]['user'] }}
{% if 'url' in playlist[0] %}
(<a href="{{ playlist[0]['url'] }}">{{ playlist[0]['url'] }}</a>)
{% endif %}
{% else %}
No music
{% endif %}
<br />
Playlist :
<form method="post"><input type="text" value="randomize" name="action" hidden><input type="submit" value="Randomize playlist"></form>
<ul>
{% for m in playlist[1:] %}
<li>[{{ m['type'] }}]] {{ m['title'] }} - {{ m['url'] }}
<form method="post"><input type="text" value="{{ loop.index }}" name="delete_music" hidden><input type="submit" value="X"></form>
</li>
{% endfor %}
</ul>
<h2>Music library:</h2>
<form action="./download" method="get" class="directory form1">
<input type="text" value="./" name="directory" hidden>
<input type="submit" value="Download entire music library">
</form>
<form method="post" class="directory form3">
<input type="text" value="./" name="add_folder_recursively" hidden>
<input type="submit" value="Add all tracks from music library (recursively)">
</form>
<br />
{{ dirlisting(music_library) }}
</div>
<div id="browser">
</div>
<div id="upload">
</div>
</div>
<script src="/static/js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="/static/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
$('#uploadSelectFile').on('change', function () {
//get the file name
var fileName = $(this).val().replace('C:\\fakepath\\', " ");
//replace the "Choose a file" label
$(this).next('.custom-file-label').html(fileName);
})
</script>
</body>
</html>