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

beautify web interface, add album picture display, play/pause and play specific file from the playlist feature.

Browse Source
This commit is contained in:
Terry Geng 2020-02-04 18:01:25 +08:00
parent 98f096f08f
commit e1953d5505
4 changed files with 91 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
interface.py
View File

@ -71,8 +71,9 @@ def index():
if 'add_file' in request.form and ".." not in request.form['add_file']:
item = {'type': 'file',
'path' : request.form['add_file'],
'title' : 'Unknown',
'user' : 'Web'}
var.playlist.append(item)
var.playlist.append(var.botamusique.get_music_tag_info(item, var.config.get('bot', 'music_folder') + item['path']))
elif ('add_folder' in request.form and ".." not in request.form['add_folder']) or ('add_folder_recursively' in request.form and ".." not in request.form['add_folder_recursively']):
try:
@ -106,13 +107,21 @@ def index():
'user': "Web"})
elif 'delete_music' in request.form:
if len(var.playlist) >= request.form['delete_music']:
var.playlist.pop(request.form['delete_music'])
if len(var.playlist.playlist) >= int(request.form['delete_music']):
var.playlist.remove(int(request.form['delete_music']))
elif 'play_music' in request.form:
if len(var.playlist.playlist) >= int(request.form['play_music']):
var.botamusique.pause()
var.botamusique.launch_music(int(request.form['play_music']))
elif 'action' in request.form:
action = request.form['action']
if action == "randomize":
random.shuffle(var.playlist)
random.shuffle(var.playlist.playlist)
elif action == "stop":
var.botamusique.pause()
return render_template('index.html',
all_files=files,

5
static/css/custom.css Normal file
View File

@ -0,0 +1,5 @@
.bs-docs-section{margin-top:4em}
.line{display:flex; margin-bottom:1rem}
.btn-space{margin-right:5px}
.playlist-title{display:inline-block}
.playlist-artwork{display:inline-block; margin-left:5px;}

BIN
static/image/unknown-album.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

81
templates/index.html
View File

@ -54,12 +54,19 @@
<meta charset="UTF-8">
<title>botamusique web interface</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/custom.css">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
<div class="container">
<div class="bs-docs-section">
<div class="page-header" id="banner">
<h1>botamusique Web Interface</h1>
</div>
</div>
<div class="bs-docs-section">
<div class="row">
<div class="col">
<div id="playlist" class="card">
@ -69,21 +76,28 @@
<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'] }}
<p> <b>Currently Playing: </b>
{% if playlist.length() > 0 %}
{% if 'url' in playlist.current_item() %}
<a href="{{ playlist.current_item()['url'] }}">{{ playlist.current_item()['url'] }}</a>
{% elif 'path' in playlist.current_item() %}
{{ playlist.current_item()['path'] }}
{% endif %}
{% else %}
No music
{% endif %}
</p>
</div>
<div class="line">
<form method="post">
<input type="text" value="randomize" name="action" hidden>
<button type="submit" class="btn btn-primary">Randomize playlist</button>
<button type="submit" class="btn btn-primary btn-space">Randomize playlist</button>
</form>
<form method="post">
<input type="text" value="stop" name="action" hidden>
<button type="submit" class="btn btn-danger btn-space">Stop</button>
</form>
</div>
<table class="table">
<thead>
@ -96,16 +110,35 @@
</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'] }})
{% for m in playlist.playlist %}
{% if loop.index0 == playlist.current_index %}
<tr class="table-active">
{% else %}
No title
<tr>
{% endif %}
<th scope="row">{{ loop.index }}</th>
<td>{{ m['type'].capitalize() }}</td>
<td>
<div class="playlist-title"">
{% if 'thumbnail' in m %}
<img width="80" src="data:image/PNG;base64,{{ m['thumbnail'] }}"/>
{% else %}
<img width="80" src="/static/image/unknown-album.png"/>
{% endif %}
</div>
<div class="playlist-artwork">
{% if 'title' in m and m['title'].strip() %}
<b>{{ m['title'] }}</b>
{% else %}
<b>{{ m['url'] }}</b>
{% endif %}
<br>
{% if 'artist' in m %}
{{ m['artist'] }}
{% else %}
Unknown Artist
{% endif %}
</div>
</td>
<td>
{% if 'url' in m %}
@ -115,10 +148,16 @@
{% endif %}
</td>
<td>
<div class="line">
<form method="post">
<input type="text" value="{{ loop.index }}" name="delete_music" hidden>
<button type="submit" class="btn btn-primary">Remove</button>
<input type="text" value="{{ loop.index0 }}" name="play_music" hidden>
<button type="submit" class="btn btn-success btn-sm btn-space">Play</button>
</form>
<form method="post">
<input type="text" value="{{ loop.index0 }}" name="delete_music" hidden>
<button type="submit" class="btn btn-danger btn-sm btn-space">Remove</button>
</form>
</div>
</td>
</tr>
{% endfor %}
@ -128,7 +167,9 @@
</div>
</div>
</div>
</div>
<div class="bs-docs-section">
<div class="row">
<div class="col">
<div id="browser" class="card">
@ -155,8 +196,10 @@
</div>
</div>
</div>
</div>
<div id="upload" class="container">
<div class="bs-docs-section">
<div class="row">
<div class="col">
<div class="card">
@ -190,6 +233,9 @@
</div>
</div>
</div>
</div>
<div class="bs-docs-section">
<div class="row">
<div class="col">
<div class="card">
@ -221,6 +267,7 @@
</div>
</div>
</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>