487 lines
23 KiB
HTML
487 lines
23 KiB
HTML
{% macro dirlisting(dir, path='') -%}
|
|
<ul class="list-group">
|
|
{% if dir and dir.get_subdirs().items() %}
|
|
{% for subdirname, subdirobj in dir.get_subdirs().items() %}
|
|
{% set subdirpath = os.path.relpath(subdirobj.fullpath, music_library.fullpath) %}
|
|
{% set subdirid = subdirpath.replace("/","-") %}
|
|
<li class="directory list-group-item list-group-item-primary">
|
|
<div class="btn-group" role="group">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-success btn-sm"
|
|
onclick="request('/post', {add_folder : '{{ subdirpath }}'})">
|
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
|
</button>
|
|
<div class="btn-group" role="group">
|
|
<button id="btnGroupDrop2" type="button" class="btn btn-success btn-sm dropdown-toggle btn-space" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
|
|
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
|
|
<a class="dropdown-item"
|
|
onclick="request('/post', {add_folder : '{{ subdirpath }}'})">
|
|
<i class="fa fa-folder" aria-hidden="true"></i> Entire folder
|
|
</a>
|
|
<a class="dropdown-item"
|
|
onclick="request('/post', {add_folder_recursively : '{{ subdirpath }}'})">
|
|
<i class="fa fa-folder" aria-hidden="true"></i> Entire folder and sub-folders
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="btn-group lead"><div class="btn-space"><i class="fa fa-folder" aria-hidden="true"></i></div><a class="lead" data-toggle="collapse"
|
|
data-target="#multiCollapse-{{ subdirid }}" aria-expanded="true"
|
|
aria-controls="multiCollapse-{{ subdirid }}" href="#"> {{ subdirpath }}/</a>
|
|
</div>
|
|
|
|
<div class="btn-group" style="float: right;">
|
|
<form action="./download" method="get" class="directory">
|
|
<input type="text" value="{{ subdirpath }}" name="directory" hidden>
|
|
<button type="submit" class="btn btn-primary btn-sm btn-space"><i class="fa fa-download" aria-hidden="true"></i></button>
|
|
</form>
|
|
<button type="submit" class="btn btn-danger btn-sm btn-space"
|
|
onclick="request('/post', {delete_folder : '{{ subdirpath }}'}, true)">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
<div class="collapse multi-collapse" id="multiCollapse-{{ subdirid }}">
|
|
{{ dirlisting(subdirobj, subdirpath) -}}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% 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 list-group-item">
|
|
<div class="btn-group" role="group">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-success btn-sm"
|
|
onclick="request('/post', {add_file_bottom : '{{ filepath }}'})">
|
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
|
</button>
|
|
<div class="btn-group" role="group">
|
|
<button id="btnGroupDrop2" type="button" class="btn btn-success btn-sm dropdown-toggle btn-space" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
|
|
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
|
|
<a class="dropdown-item"
|
|
onclick="request('/post', {add_file_bottom : '{{ filepath }}'})">
|
|
<i class="fa fa-angle-down" aria-hidden="true"></i> To bottom of play list
|
|
</a>
|
|
<a class="dropdown-item"
|
|
onclick="request('/post', {add_file_next : '{{ filepath }}'})">
|
|
<i class="fa fa-angle-right" aria-hidden="true"></i> After current song
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="btn-group lead">
|
|
<div class="btn-space"><i class="fa fa-music" aria-hidden="true"></i></div>
|
|
{{ filepath }}
|
|
</div>
|
|
{% if tags_lookup[filepath] %}
|
|
{% for tag in tags_lookup[filepath] %}
|
|
<span class="badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="btn-group" style="float: right;">
|
|
<form action="./download" method="get" class="file file_download">
|
|
<input type="text" value="{{ filepath }}" name="file" hidden>
|
|
<button type="submit" class="btn btn-primary btn-sm btn-space"><i class="fa fa-download" aria-hidden="true"></i></button>
|
|
</form>
|
|
<button type="submit" class="btn btn-danger btn-sm btn-space"
|
|
onclick="request('/post', {delete_music_file : '{{ filepath }}'}, true)">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</ul>
|
|
{%- endmacro %}
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>botamusique web interface</title>
|
|
<link id="pagestyle" 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><i class="fa fa-music" aria-hidden="true"></i> botamusique Web Interface</h1>
|
|
</div>
|
|
</div>
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div id="playlist" class="col-lg-12">
|
|
<div>
|
|
<div class="btn-group" style="margin-bottom: 10px;">
|
|
<button type="button" id="play-btn" class="btn btn-info btn-space"
|
|
onclick="request('post', {action : 'resume'})" disabled>
|
|
<i class="fas fa-play" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<button type="button" id="pause-btn" class="btn btn-warning btn-space"
|
|
onclick="request('post', {action : 'pause'})" disabled>
|
|
<i class="fas fa-pause" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<button type="button" id="stop-btn" class="btn btn-danger btn-space"
|
|
onclick="request('post', {action : 'stop'})" disabled>
|
|
<i class="fas fa-stop" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="btn-group" style="float: right;">
|
|
<button type="button" id="oneshot-btn" class="btn btn-primary btn-space"
|
|
title="One-shot Mode"
|
|
onclick="request('post', {action : 'one-shot'})" disabled>
|
|
<i class="fas fa-tasks" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<button type="button" id="random-btn" class="btn btn-primary btn-space"
|
|
title="Random Mode"
|
|
onclick="request('post', {action : 'randomize'})" disabled>
|
|
<i class="fas fa-random" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<button type="button" id="repeat-btn" class="btn btn-primary btn-space"
|
|
title="Repeat Mode"
|
|
onclick="request('post', {action : 'repeat'})" disabled>
|
|
<i class="fas fa-redo" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<button type="button" id="autoplay-btn" class="btn btn-primary btn-space"
|
|
title="Autoplay Mode"
|
|
onclick="request('post', {action : 'autoplay'})" disabled>
|
|
<i class="fas fa-robot" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-warning btn-space"
|
|
onclick="request('post', {action : 'volume_down'})">
|
|
<i class="fa fa-volume-down" aria-hidden="true"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-space"
|
|
onclick="request('post', {action : 'volume_up'})">
|
|
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col" class="playlist-title-td">Title</th>
|
|
<th scope="col">Url/Path</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="playlist-table">
|
|
<tr class="table-dark">
|
|
<td colspan="4" class="text-muted" style="text-align:center;"> Fetching playlist .... </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger btn-space"
|
|
onclick="request('post', {action : 'clear'})">
|
|
<i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="page-header">
|
|
<h1 id="forms">Music Library</h1>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Tags</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for tag in tags_color_lookup.keys() %}
|
|
<span class="tag-click badge badge-{{ tags_color_lookup[tag] }}"
|
|
onclick="request('post', {add_tag : '{{ tag }}'})">
|
|
{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div id="browser" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Files</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="btn-group" style="margin-bottom: 5px;" role="group">
|
|
<button type="submit" class="btn btn-secondary btn-space"
|
|
onclick="request('/post', {action : 'rescan'}); location.reload()">
|
|
<i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
|
|
</button>
|
|
<form action="./download" method="get" class="directory form1">
|
|
<input type="text" value="./" name="directory" hidden>
|
|
<button type="submit" class="btn btn-secondary btn-space"><i class="fa fa-download" aria-hidden="true"></i> Download All</button>
|
|
</form>
|
|
<form method="post" class="directory form3">
|
|
<input type="text" value="./" name="add_folder_recursively" hidden>
|
|
<button type="submit" class="btn btn-secondary btn-space"><i class="fa fa-plus" aria-hidden="true"></i> Add All</button>
|
|
</form>
|
|
</div>
|
|
<br />
|
|
{{ dirlisting(music_library) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upload" class="container">
|
|
<div class="bs-docs-section">
|
|
<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">
|
|
<div class="row" style="margin-bottom: 5px;">
|
|
<div id="uploadBox" class="col-lg-7 input-group">
|
|
<div id="uploadField" style="display: flex; width: 100%">
|
|
<div class="custom-file btn-space">
|
|
<input type="file" name="file[]" class="custom-file-input" id="uploadSelectFile"
|
|
aria-describedby="uploadSubmit" value="Browse Music file" multiple/>
|
|
<label class="custom-file-label" for="uploadSelectFile">Choose file</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 input-group-append">
|
|
<span class="input-group-text">Upload To</span>
|
|
<input class="form-control btn-space" 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>
|
|
</div>
|
|
<button class="btn btn-primary btn-space" type="submit"
|
|
id="uploadSubmit" style="margin-left: -5px;">Upload!</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section" style="margin-bottom: 150px;">
|
|
<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">
|
|
<label>Add Youtube/Soundcloud URL</label>
|
|
<div class="input-group">
|
|
<input class="form-control btn-space" type="text" id="add_url_input" placeholder="URL...">
|
|
<button type="submit" class="btn btn-primary"
|
|
onclick="var $i = $('#add_url_input')[0]; request('/post', {add_url : $i.value }); $i.value = ''; ">Add URL</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Add Radio</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<label>Add Radio URL</label>
|
|
<div class="input-group">
|
|
<input class="form-control btn-space" type="text" id="add_radio_input" placeholder="Radio Address...">
|
|
<button type="submit" class="btn btn-primary"
|
|
onclick="var $i = $('#add_radio_input')[0]; request('/post', {add_radio : $i.value }); $i.value = '';">Add Radio</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="floating-button" onclick="switchTheme()"> <i class="fas fa-lightbulb" aria-hidden="true"></i> </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 src="static/js/fontawesome.all.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);
|
|
});
|
|
$('a.a-submit, button.btn-submit').on('click', function (event) {
|
|
$(event.target).closest('form').submit();
|
|
});
|
|
|
|
var playlist_ver = 0;
|
|
|
|
function request(url, _data, refresh=false){
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'post',
|
|
data : _data,
|
|
statusCode : {
|
|
200 : function(data) {
|
|
if (data.ver !== playlist_ver) {
|
|
updatePlaylist();
|
|
playlist_ver = data.ver;
|
|
}
|
|
updateControls(data.empty, data.play, data.mode);
|
|
}
|
|
}
|
|
});
|
|
if(refresh){
|
|
location.reload()
|
|
}
|
|
}
|
|
|
|
function displayPlaylist(data){
|
|
// console.info(data);
|
|
$("#playlist-table tr").remove();
|
|
|
|
var items = data.items;
|
|
$.each(items, function(index, item){
|
|
$("#playlist-table").append(item);
|
|
});
|
|
|
|
}
|
|
|
|
function updatePlaylist(){
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: 'playlist',
|
|
statusCode : {
|
|
200 : displayPlaylist
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateControls(empty, play, mode){
|
|
if(empty){
|
|
$("#play-btn").prop("disabled", true);
|
|
$("#pause-btn").prop("disabled", true);
|
|
$("#stop-btn").prop("disabled", true);
|
|
}else{
|
|
if(play){
|
|
$("#play-btn").prop("disabled", true);
|
|
$("#pause-btn").prop("disabled", false);
|
|
$("#stop-btn").prop("disabled", false);
|
|
}else{
|
|
$("#play-btn").prop("disabled", false);
|
|
$("#pause-btn").prop("disabled", true);
|
|
$("#stop-btn").prop("disabled", true);
|
|
}
|
|
}
|
|
if(mode === "one-shot"){
|
|
$("#oneshot-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
|
|
$("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
}else if(mode === "repeat"){
|
|
$("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#repeat-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
|
|
$("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
}else if(mode === "random"){
|
|
$("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#random-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", false); // This is a feature.
|
|
$("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
}else if(mode === "autoplay"){
|
|
$("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
|
|
$("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
|
|
}
|
|
|
|
}
|
|
|
|
function themeInit(){
|
|
var theme = localStorage.getItem("theme");
|
|
if(theme !== null){
|
|
setPageTheme(theme);
|
|
}
|
|
}
|
|
|
|
function switchTheme(){
|
|
var theme = localStorage.getItem("theme");
|
|
if(theme === "light" || theme === null){
|
|
setPageTheme("dark");
|
|
localStorage.setItem("theme", "dark");
|
|
}else{
|
|
setPageTheme("light");
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
}
|
|
|
|
function setPageTheme(theme) {
|
|
if(theme === "light")
|
|
document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.min.css");
|
|
else if(theme === "dark")
|
|
document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.darkly.min.css");
|
|
}
|
|
|
|
// Check the version of playlist to see if update is needed.
|
|
setInterval(function(){
|
|
$.ajax({
|
|
type: 'POST',
|
|
url : 'post',
|
|
statusCode : {
|
|
200 : function(data){
|
|
if(data.ver !== playlist_ver){
|
|
updatePlaylist();
|
|
playlist_ver = data.ver;
|
|
}
|
|
updateControls(data.empty, data.play, data.mode);
|
|
}
|
|
}
|
|
});
|
|
} , 3000);
|
|
|
|
themeInit();
|
|
$(document).ready(updatePlaylist);
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|