479 lines
26 KiB
HTML
479 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<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">
|
|
<link rel="stylesheet" href="../static/css/tylervigario.css">
|
|
|
|
<link rel="icon" href="../static/image/favicon.ico" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container page-header mb-5" id="banner">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<img src="../static/image/logo.png" height="200px">
|
|
</div>
|
|
<div class="col-auto my-auto">
|
|
<h1>botamusique Web Interface</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mb-5">
|
|
<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>
|
|
|
|
<input type="range" class="custom-range" id="volume-slider" min="0" max="1" step="0.01"
|
|
value="0.5" onchange="setVolumeDelayed(this.value)" />
|
|
|
|
<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 table-striped table-hover">
|
|
<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" class="playlist-table">
|
|
<tr id="playlist-loading">
|
|
<td colspan="4" style="text-align:center;">
|
|
<img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
|
|
</td>
|
|
</tr>
|
|
<tr id="playlist-empty" style="display: none;">
|
|
<td colspan="4" style="text-align:center;">
|
|
<img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
|
|
</td>
|
|
</tr>
|
|
<tr id="playlist-expand" class="table-dark" style="display: none;">
|
|
<td colspan="4" style="text-align:center;">
|
|
<a class="text-muted" href="javascript:">See item <span
|
|
class="playlist-expand-item-range"></span> on the playlist.</a>
|
|
</td>
|
|
</tr>
|
|
<tr class="playlist-item-template" style="display: none;">
|
|
<th scope="row" class="playlist-item-index"></th>
|
|
<td>
|
|
<input hidden type="text" class="playlist-item-id" value="" />
|
|
<div class="playlist-title">
|
|
<img width="80" class="playlist-item-thumbnail"
|
|
src="../static/image/unknown-album.png" />
|
|
</div>
|
|
<div class="playlist-artwork">
|
|
<b class="playlist-item-title"></b>
|
|
<span class="playlist-item-type badge badge-secondary"></span>
|
|
<br />
|
|
<span class="playlist-item-artist"></span>
|
|
<br />
|
|
|
|
<div class="playlist-item-tags">
|
|
<a class="playlist-item-edit tag-space tag-click"><i class="fas fa-edit"
|
|
style="color: #AAAAAA"></i></a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<small class="playlist-item-path"></small>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button"
|
|
class="playlist-item-play btn btn-info btn-sm btn-space">
|
|
<i class="fa fa-play" aria-hidden="true"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="playlist-item-trash btn btn-danger btn-sm btn-space">
|
|
<i class="fas fa-trash-alt" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</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="container mb-3">
|
|
|
|
<div class="page-header">
|
|
<h1 id="forms">Music Library</h1>
|
|
</div>
|
|
|
|
<div id="browser" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Browser</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="alert alert-secondary">
|
|
<h4 class="alert-heading">Filters</h4>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div id="filter-type" class="form-group row">
|
|
<label class="col-sm-2 col-form-label">Type</label>
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons"
|
|
style="height: 35px; padding-top:5px;">
|
|
<button type="button" id="filter-type-file" class="btn btn-secondary btn-sm"
|
|
onclick="setFilterType('file')">File</button>
|
|
<button type="button" id="filter-type-url" class="btn btn-secondary btn-sm"
|
|
onclick="setFilterType('url')">URL</button>
|
|
<button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm"
|
|
onclick="setFilterType('radio')">Radio</button>
|
|
</div>
|
|
</div>
|
|
<div id="filter-path" class="form-group row">
|
|
<label class="col-sm-2 col-form-label" for="filter-dir"
|
|
style="max-width: none">Directory</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control form-control-sm" id="filter-dir" style="margin-top:5px;"
|
|
disabled>
|
|
<option value="">.</option>
|
|
{% for dir in dirs %}
|
|
<option value="{{ dir }}">{{ dir }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="filter-path" class="form-group row">
|
|
<label class="col-sm-2 col-form-label" for="filter-keywords"
|
|
style="max-width: none">Keywords</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control form-control-sm" id="filter-keywords" name="keywords"
|
|
placeholder="Keywords..." style="margin-top:5px;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div id="filter-type" class="form-group row">
|
|
<label class="col-sm-2 col-form-label">Tags</label>
|
|
<div class="col-sm-10" style="padding-top:5px;">
|
|
{% for tag in tags_color_lookup.keys() %}
|
|
<span id="filter-tag"
|
|
class="filter-tag tag-unclicked tag-click badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="library-group" class="list-group library-group">
|
|
<div id="library-item-loading" class="list-group-item library-item">
|
|
<img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
|
|
</div>
|
|
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
|
<img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
|
|
</div>
|
|
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
|
<input hidden type="text" class="library-item-id" value="" />
|
|
<div class="library-thumb-col">
|
|
<div class="library-thumb-img">
|
|
<img class="library-item-thumb library-thumb-img"
|
|
src="../static/image/unknown-album.png" />
|
|
</div>
|
|
<div class="btn-group-vertical library-thumb-grp">
|
|
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
|
|
<i class="fa fa-play" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
|
|
<div>
|
|
<span class="library-item-type lead text-muted btn-space">[File]</span>
|
|
<span class="library-item-title lead btn-space">This is my title</span>
|
|
<span class="library-item-artist text-muted"> - Artist</span>
|
|
</div>
|
|
</div>
|
|
<div class="library-info-col col-4" style="padding: 3px;">
|
|
<span class="library-item-path text-muted path">Path/to/the/file</span>
|
|
<div class="library-item-tags">
|
|
<a class="tag-space tag-click library-item-edit"><i class="fas fa-edit"
|
|
style="color: #AAAAAA"></i></a>
|
|
<span class="library-item-notag badge badge-light text-muted font-italic">No
|
|
tag</span>
|
|
<span class="library-item-tag tag-space badge">Tag</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="btn-group library-action">
|
|
<button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
|
|
title="Next to play">
|
|
<svg class="library-btn-svg" style="width: 1rem; fill: currentColor;"
|
|
viewBox="5 5 17 17">
|
|
<path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z" />
|
|
<path
|
|
d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z" />
|
|
</svg>
|
|
|
|
</button>
|
|
<button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space"
|
|
type="button" title="Add to bottom">
|
|
<svg class="library-btn-svg" style="width: 1rem; fill: currentColor;"
|
|
viewBox="2 2 20 20">
|
|
<path
|
|
d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" />
|
|
</svg>
|
|
|
|
</button>
|
|
<button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
|
|
<i class="fa fa-download" aria-hidden="true"></i>
|
|
</button>
|
|
<button class="library-item-trash btn btn-danger btn-sm btn-space" type="button">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="list-group">
|
|
<div id="library-pagination" style="margin-left: auto; margin-top: 10px;">
|
|
<ul id="library-page-ul" class="pagination pagination">
|
|
<li class="library-page-li page-item active">
|
|
<a class="library-page-no page-link">1</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" style="margin-bottom: 5px;" role="group">
|
|
<button type="submit" class="btn btn-secondary btn-space" onclick="addAllResults()"><i
|
|
class="fa fa-plus" aria-hidden="true"></i> Add All</button>
|
|
<button type="submit" class="btn btn-secondary btn-space"
|
|
onclick="request('post', {action : 'rescan'}); updateResults()">
|
|
<i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
|
|
</button>
|
|
<button type="submit" class="btn btn-secondary btn-space" onclick="downloadAllResults()"><i
|
|
class="fa fa-download" aria-hidden="true"></i> Download All</button>
|
|
<button type="button" class="btn btn-danger btn-space" data-toggle="modal"
|
|
data-target="#deleteWarningModal"><i class="fas fa-trash-alt" aria-hidden="true"></i>
|
|
Delete All</button>
|
|
</div>
|
|
|
|
<div class="modal fade" id="deleteWarningModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="Warning-Delete-File" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteWarningModalLabel">Are you really sure?</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
All files listed here, include files on other pages, will be deleted from your
|
|
hard-drive.
|
|
Is that what you want?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal"
|
|
onclick="deleteAllResults()">Delete All Listed Files</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upload" class="container mb-3">
|
|
<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">
|
|
<div id="uploadBox" class="col-lg-7 input-group mb-3">
|
|
<div id="uploadField" style="display: flex; width: 100%">
|
|
<div class="custom-file">
|
|
<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 mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">Upload To</span>
|
|
</div>
|
|
<input class="form-control" list="targetdirs" id="targetdir" name="targetdir"
|
|
placeholder="uploads" />
|
|
<datalist id="targetdirs">
|
|
{% for dir in dirs %}
|
|
<option value="{{ dir }}">
|
|
{% endfor %}
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary" type="submit" id="uploadSubmit">Upload!</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mb-5">
|
|
<div class="card-deck">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Add URL</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<label for="add_url_input">Add Youtube or Soundcloud URL</label>
|
|
<div class="input-group mb-2">
|
|
<input class="form-control" type="text" id="add_url_input" placeholder="URL...">
|
|
</div>
|
|
<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 class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Add Radio</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<label for="add_radio_input">Add Radio URL</label>
|
|
<div class="input-group mb-2">
|
|
<input class="form-control" type="text" id="add_radio_input" placeholder="Radio Address...">
|
|
</div>
|
|
<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 class="floating-button" onclick="switchTheme()">
|
|
<i class="fas fa-lightbulb" aria-hidden="true"></i>
|
|
</div>
|
|
|
|
<form id="download-form" action="download" method="GET" target="_blank">
|
|
<input hidden type="text" name="id" value="">
|
|
<input hidden type="text" name="type" value="">
|
|
<input hidden type="text" name="dir" value="">
|
|
<input hidden type="text" name="tags" value="">
|
|
<input hidden type="text" name="keywords" value="">
|
|
</form>
|
|
|
|
<!-- Add tags input -->
|
|
<div class="modal fade" id="addTagModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addTagModalTitle">Edit tags for ?</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div id="addTagModalBody" class="modal-body">
|
|
<input hidden type="text" id="addTagModalItemId" name="id" value="">
|
|
<div class="modal-tag" style="display: none; width: 100%;">
|
|
<span class="modal-tag-text tag-space badge badge-pill badge-dark">Tag</span>
|
|
<a class="modal-tag-remove tag-click small"><i
|
|
class="fas fa-times-circle btn-outline-danger"></i></a>
|
|
</div>
|
|
<div id="addTagModalTags" style="margin-left: 5px; margin-bottom: 10px;">
|
|
</div>
|
|
<div class="input-group">
|
|
<input class="form-control form-control-sm btn-space" type="text" id="addTagModalInput"
|
|
placeholder="tag1,tag2,...">
|
|
<button id="addTagModalAddBtn" type="button" class="btn btn-primary btn-sm"
|
|
onclick="addTagModalAdd()">
|
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
|
Add
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button id="addTagModalSubmit" type="button" class="btn btn-success" data-dismiss="modal"
|
|
onclick="addTagModalSubmit()">Edit!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../static/js/jquery-3.4.1.min.js"></script>
|
|
<script src="../static/js/bootstrap.bundle.min.js"></script>
|
|
<script src="../static/js/fontawesome.all.js"></script>
|
|
<script src="../static/js/custom.js"></script>
|
|
</body>
|
|
|
|
</html> |