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']: if 'add_file' in request.form and ".." not in request.form['add_file']:
item = {'type': 'file', item = {'type': 'file',
'path' : request.form['add_file'], 'path' : request.form['add_file'],
'title' : 'Unknown',
'user' : 'Web'} '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']): 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: try:
@ -106,13 +107,21 @@ def index():
'user': "Web"}) 'user': "Web"})
elif 'delete_music' in request.form: elif 'delete_music' in request.form:
if len(var.playlist) >= request.form['delete_music']: if len(var.playlist.playlist) >= int(request.form['delete_music']):
var.playlist.pop(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: elif 'action' in request.form:
action = request.form['action'] action = request.form['action']
if action == "randomize": if action == "randomize":
random.shuffle(var.playlist) random.shuffle(var.playlist.playlist)
elif action == "stop":
var.botamusique.pause()
return render_template('index.html', return render_template('index.html',
all_files=files, 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

97
templates/index.html
View File

@ -54,13 +54,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>botamusique web interface</title> <title>botamusique web interface</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css"> <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="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="Expires" CONTENT="-1">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="row"> <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 class="col">
<div id="playlist" class="card"> <div id="playlist" class="card">
<div class="card-header"> <div class="card-header">
@ -69,21 +76,28 @@
<div class="card-body"> <div class="card-body">
<div> <div>
Currently Playing : <p> <b>Currently Playing: </b>
{% if playlist|length > 0 %} {% if playlist.length() > 0 %}
{% if 'url' in playlist[0] %} {% if 'url' in playlist.current_item() %}
<a href="{{ playlist[0]['url'] }}">{{ playlist[0]['url'] }}</a> <a href="{{ playlist.current_item()['url'] }}">{{ playlist.current_item()['url'] }}</a>
{% elif 'path' in playlist[0] %} {% elif 'path' in playlist.current_item() %}
{{ playlist[0]['path'] }} {{ playlist.current_item()['path'] }}
{% endif %} {% endif %}
{% else %} {% else %}
No music No music
{% endif %} {% endif %}
</p>
</div>
<div class="line">
<form method="post">
<input type="text" value="randomize" name="action" hidden>
<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> </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"> <table class="table">
<thead> <thead>
@ -96,16 +110,35 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for m in playlist[1:] %} {% for m in playlist.playlist %}
{% if loop.index0 == playlist.current_index %}
<tr class="table-active">
{% else %}
<tr> <tr>
{% endif %}
<th scope="row">{{ loop.index }}</th> <th scope="row">{{ loop.index }}</th>
<td>{{ m['type'] }}</td> <td>{{ m['type'].capitalize() }}</td>
<td> <td>
{% if 'title' in m %} <div class="playlist-title"">
({{ m['title'] }}) {% if 'thumbnail' in m %}
{% else %} <img width="80" src="data:image/PNG;base64,{{ m['thumbnail'] }}"/>
No title {% else %}
{% endif %} <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>
<td> <td>
{% if 'url' in m %} {% if 'url' in m %}
@ -115,10 +148,16 @@
{% endif %} {% endif %}
</td> </td>
<td> <td>
<form method="post"> <div class="line">
<input type="text" value="{{ loop.index }}" name="delete_music" hidden> <form method="post">
<button type="submit" class="btn btn-primary">Remove</button> <input type="text" value="{{ loop.index0 }}" name="play_music" hidden>
</form> <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> </td>
</tr> </tr>
{% endfor %} {% endfor %}
@ -128,8 +167,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="bs-docs-section">
<div class="row">
<div class="col"> <div class="col">
<div id="browser" class="card"> <div id="browser" class="card">
<div class="card-header"> <div class="card-header">
@ -154,10 +195,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div id="upload" class="container"> <div id="upload" class="container">
<div class="row"> <div class="bs-docs-section">
<div class="row">
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@ -190,7 +233,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> </div>
<div class="bs-docs-section">
<div class="row">
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@ -220,6 +266,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<script src="/static/js/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="/static/js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>