Commit built assets
1
.gitignore
vendored
@ -11,6 +11,7 @@ __pycache__/
|
||||
# Distribution / packaging
|
||||
.Python
|
||||
build/
|
||||
!web/build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
downloads/
|
||||
|
10164
web/build/assets/css/main.css
Normal file
1
web/build/assets/image/empty_box.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="512pt" viewBox="0 -12 512.00032 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0" fill="#aaaaaa" fill-opacity="1"/><path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0" fill="#aaaaaa" fill-opacity="1"/><path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0" fill="#aaaaaa" fill-opacity="1"/></svg>
|
After Width: | Height: | Size: 3.0 KiB |
BIN
web/build/assets/image/favicon.ico
Normal file
After Width: | Height: | Size: 1.1 KiB |
1
web/build/assets/image/loading.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#aaaaaa" fill-opacity="1"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1800ms" repeatCount="indefinite"></animateTransform></g></svg>
|
After Width: | Height: | Size: 620 B |
BIN
web/build/assets/image/logo.png
Normal file
After Width: | Height: | Size: 16 KiB |
14
web/build/assets/image/play-plus.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<g>
|
||||
<title>background</title>
|
||||
<rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
|
||||
</g>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<path stroke="null" id="svg_1" d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z"/>
|
||||
<g stroke="null" id="svg_7">
|
||||
<path stroke="null" stroke-width="46" id="svg_6" 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"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 597 B |
1
web/build/assets/image/playlist-plus.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-playlist-plus" width="24" height="24" viewBox="0 0 24 24"><path d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" /></svg>
|
After Width: | Height: | Size: 400 B |
BIN
web/build/assets/image/unknown-album.png
Normal file
After Width: | Height: | Size: 33 KiB |
1797
web/build/assets/js/main.js
Normal file
54
web/build/assets/js/main.js.LICENSE.txt
Normal file
@ -0,0 +1,54 @@
|
||||
/*!
|
||||
* Sizzle CSS Selector Engine v2.3.5
|
||||
* https://sizzlejs.com/
|
||||
*
|
||||
* Copyright JS Foundation and other contributors
|
||||
* Released under the MIT license
|
||||
* https://js.foundation/
|
||||
*
|
||||
* Date: 2020-03-14
|
||||
*/
|
||||
|
||||
/*!
|
||||
* jQuery JavaScript Library v3.5.1
|
||||
* https://jquery.com/
|
||||
*
|
||||
* Includes Sizzle.js
|
||||
* https://sizzlejs.com/
|
||||
*
|
||||
* Copyright JS Foundation and other contributors
|
||||
* Released under the MIT license
|
||||
* https://jquery.org/license
|
||||
*
|
||||
* Date: 2020-05-04T22:49Z
|
||||
*/
|
||||
|
||||
/*!
|
||||
* jQuery Migrate - v3.3.0 - 2020-05-05T01:57Z
|
||||
* Copyright OpenJS Foundation and other contributors
|
||||
*/
|
||||
|
||||
/**!
|
||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||
* @version 1.16.1
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
581
web/build/templates/index.html
Normal file
@ -0,0 +1,581 @@
|
||||
<!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 rel="icon" href="web/build/assets/image/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="web/build/assets/css/main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container page-header mb-5" id="banner">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<img src="web/build/assets/image/logo.png" height="200px">
|
||||
</div>
|
||||
<div class="col my-auto">
|
||||
<h1>botamusique Web Interface</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="playlist" class="container mb-5">
|
||||
<div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls">
|
||||
<button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space" onclick="togglePlayPause()">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
<button type="button" id="fast-forward-btn" class="btn btn-info mb-2"
|
||||
onclick="request('post', {action : 'next'})">
|
||||
<i class="fas fa-fast-forward"></i>
|
||||
</button>
|
||||
<div class="ml-auto">
|
||||
<div class="dropdown mr-2">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="play-mode">
|
||||
<a class="dropdown-item" href="#" id="one-shot-mode-btn" onclick="changePlayMode('one-shot')">
|
||||
<i class="fas fa-tasks mr-2" aria-hidden="true"></i>One-shot
|
||||
</a>
|
||||
<a class="dropdown-item" href="#" id="random-mode-btn" onclick="changePlayMode('randomize')">
|
||||
<i class="fas fa-random mr-2" aria-hidden="true"></i>Random
|
||||
</a>
|
||||
<a class="dropdown-item" href="#" id="repeat-mode-btn" onclick="changePlayMode('repeat')">
|
||||
<i class="fas fa-redo mr-2" aria-hidden="true"></i>Repeat
|
||||
</a>
|
||||
<a class="dropdown-item" href="#" id="autoplay-mode-btn" onclick="changePlayMode('autoplay')">
|
||||
<i class="fas fa-robot mr-2" aria-hidden="true"></i>Autoplay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="volume-popover-btn" class="btn btn-warning ml-1"
|
||||
onclick="toggleVolumePopover()">
|
||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<div id="volume-popover">
|
||||
<a onclick="request('post', {action : 'volume_down'})">
|
||||
<i class="fa fa-volume-down" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
<input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01"
|
||||
value="0.5" onchange="setVolumeDelayed(this.value)" />
|
||||
|
||||
<a onclick="request('post', {action : 'volume_up'})">
|
||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||
</a>
|
||||
<div id="volume-popover-arrow"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="d-none d-md-table-cell">#</th>
|
||||
<th scope="col" class="w-50">Title</th>
|
||||
<th scope="col" class="d-none d-md-table-cell">Url/Path</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="playlist-table" class="playlist-table">
|
||||
<tr id="playlist-loading">
|
||||
<td colspan="4" class="text-center">
|
||||
<img style="margin: auto; width: 35px;" src="web/build/assets/image/loading.svg" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="playlist-empty" class="d-none">
|
||||
<td colspan="4" class="text-center">
|
||||
<img style="margin: auto; width: 35px;" src="web/build/assets/image/empty_box.svg" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="playlist-expand table-dark d-none">
|
||||
<td colspan="4" class="text-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 d-none">
|
||||
<th scope="row" class="playlist-item-index d-none d-md-table-cell"></th>
|
||||
<td>
|
||||
<input hidden type="text" class="playlist-item-id" value="" />
|
||||
<div class="float-left">
|
||||
<img width="80" class="playlist-item-thumbnail" src="web/build/assets/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 class="d-none d-md-table-cell">
|
||||
<small class="playlist-item-path"></small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="playlist-item-play btn btn-info btn-sm">
|
||||
<i class="fas fa-play" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" class="playlist-item-trash btn btn-danger btn-sm ml-1">
|
||||
<i class="fas fa-trash-alt" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger mr-1" onclick="request('post', {action : 'clear'})">
|
||||
<i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mb-3">
|
||||
<h2 id="forms">Music Library</h2>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Filters</h5>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label>Type</label>
|
||||
<div id="filter-type" class="input-group mb-2">
|
||||
<div class="btn-group btn-group-sm btn-group-toggle">
|
||||
<label id="filter-type-file" class="btn btn-secondary"
|
||||
onclick="setFilterType(event, 'file')">
|
||||
<input type="checkbox" name="options"> File
|
||||
</label>
|
||||
<label id="filter-type-url" class="btn btn-secondary"
|
||||
onclick="setFilterType(event, 'url')">
|
||||
<input type="checkbox" name="options"> URL
|
||||
</label>
|
||||
<label id="filter-type-radio" class="btn btn-secondary"
|
||||
onclick="setFilterType(event, 'radio')">
|
||||
<input type="checkbox" name="options"> Radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="filter-dir">Directory</label>
|
||||
<div id="filter-path" class="input-group mb-2">
|
||||
<select class="form-control form-control-sm" id="filter-dir" disabled>
|
||||
<option value="">.</option>
|
||||
{% for dir in dirs %}
|
||||
<option value="{{ dir }}">{{ dir }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label for="filter-keywords">Keywords</label>
|
||||
<div id="filter-path" class="input-group mb-2">
|
||||
<input class="form-control form-control-sm" id="filter-keywords" name="keywords"
|
||||
placeholder="Keywords..." style="margin-top:5px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<label for="filter-tag">Tags</label>
|
||||
<div id="filter-type mb-2">
|
||||
{% 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 class="card-body">
|
||||
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
||||
<div id="library-item-loading" class="list-group-item library-item">
|
||||
<img style="margin: auto; width: 35px;" src="web/build/assets/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="web/build/assets/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="web/build/assets/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="fas fa-play" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="filter-keywords">Keywords</label>
|
||||
<div id="filter-path" class="input-group mb-2">
|
||||
<input class="form-control form-control-sm" id="filter-keywords" name="keywords"
|
||||
placeholder="Keywords..." style="margin-top:5px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="library-info-col col-4 d-none d-md-flex" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
||||
<div id="library-item-loading" class="list-group-item library-item">
|
||||
<img style="margin: auto; width: 35px;" src="web/build/assets/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="web/build/assets/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="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>
|
||||
<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">
|
||||
</path>
|
||||
</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">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
|
||||
<i class="fas 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="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 d-none d-md-flex" 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" role="group" class="mb-2">
|
||||
<button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fas fa-plus"
|
||||
aria-hidden="true"></i> Add All
|
||||
</button>
|
||||
<button type="submit" class="btn btn-secondary mr-1"
|
||||
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 mr-1" onclick="downloadAllResults()"><i class="fas fa-download"
|
||||
aria-hidden="true"></i> Download All
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger mr-1" data-toggle="modal" data-target="#deleteWarningModal"><i
|
||||
class="fas fa-trash-alt" aria-hidden="true"></i>
|
||||
Delete All
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{% if upload_enabled %}
|
||||
<div id="upload" class="container mb-3">
|
||||
{% else %}
|
||||
<div id="upload" class="container mb-3" style="display: none;">
|
||||
<input type="hidden" id="uploadDisabled" value="true" />
|
||||
{% endif %}
|
||||
<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">
|
||||
<div class="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>
|
||||
<div class="col-lg-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="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="uploadTargetDir"
|
||||
name="targetdir" placeholder="uploads" />
|
||||
<datalist id="targetdirs">
|
||||
{% for dir in dirs %}
|
||||
<option value="{{ dir }}">
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-primary" type="button" id="uploadSubmit"><i
|
||||
class="fas fa-upload mr-1"></i>Upload!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" style="bottom: 120px;" onclick="togglePlayer()">
|
||||
<i class="fas fa-play" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<div class="floating-button" style="bottom: 50px;" onclick="switchTheme()">
|
||||
<i class="fas fa-lightbulb" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<div id="playerToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
|
||||
<div class="toast-header">
|
||||
<i class="fas fa-play-circle mr-2 text-primary"></i>
|
||||
<strong class="mr-auto">Now Playing...</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body" id="playerContainer">
|
||||
<img id="playerArtworkIdle" src="web/build/assets/image/empty_box.svg" />
|
||||
<img id="playerArtwork" src="web/build/assets/image/unknown-album.png" style="display: none;" />
|
||||
<div id="playerInfo">
|
||||
<div id="playerActionBox">
|
||||
<button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none"
|
||||
onclick="request('post', {action: 'resume'})">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
<button id="playerPauseBtn" class="btn btn-primary btn-sm btn-space" style="display: none"
|
||||
onclick="request('post', {action: 'pause'})">
|
||||
<i class="fas fa-pause"></i>
|
||||
</button>
|
||||
<button id="playerSkipBtn" class="btn btn-primary btn-sm"
|
||||
onclick="request('post', {action : 'next'})">
|
||||
<i class="fas fa-fast-forward"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="overflow: hidden; max-width: 320px;">
|
||||
<strong id="playerTitle">Song Title</strong>
|
||||
</div>
|
||||
<span id="playerArtist">Artist</span>
|
||||
<div id="playerBarBox" class="progress">
|
||||
<div id="playerBar" class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" style="height:50px; width: 100%; margin-top: 100px;"></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 modal -->
|
||||
<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="fas 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>
|
||||
|
||||
<!-- Upload files modal -->
|
||||
<div class="modal fade" id="uploadModal" 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="uploadTitle"><i class="fas fa-upload mr-1"></i>Uploading files...
|
||||
</h5>
|
||||
</div>
|
||||
<div id="uploadModalBody" class="modal-body">
|
||||
<div id="uploadSuccessAlert" class="alert alert-success" role="alert" style="display: none">
|
||||
<i class="fas fa-check mr-1"></i>
|
||||
Uploaded finished!
|
||||
</div>
|
||||
<div id="uploadModalList" style="margin-left: 5px; margin-bottom: 10px;">
|
||||
<div class="uploadItem" style="display: none; width: 100%; padding-bottom: 8px;">
|
||||
<i class="far fa-file-alt mr-1"></i>
|
||||
<span class="uploadItemTitle mr-3"></span>
|
||||
<span class="uploadItemError text-danger"></span>
|
||||
<div class="progress" style="margin-top: 5px; height: 10px;">
|
||||
<div class="uploadProgress progress-bar" role="progressbar" aria-valuenow="0"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" id="uploadClose" class="btn btn-success" data-dismiss="modal">
|
||||
<i class="fas fa-times mr-1"></i> Close</button>
|
||||
<button type="button" id="uploadCancel" class="btn btn-danger" data-toggle="tooltip"
|
||||
data-html="true"
|
||||
title="<strong>Are you really sure?</strong> <br /> Click again to abort uploading.">
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i> Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="maxUploadFileSize" value="{{ max_upload_file_size }}" />
|
||||
|
||||
<script src="web/build/assets/js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
49
web/build/templates/need_token.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!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 rel="icon" href="web/build/assets/image/favicon.ico" />
|
||||
|
||||
<link id="pagestyle" rel="stylesheet" href="web/build/assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="web/build/assets/css/main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" style="max-width: 800px">
|
||||
<div class="col-8" style="margin: auto; padding-top: 50px;">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Token Required
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>Token Required!</h3>
|
||||
You are accessing the web interface of {{ name }}.
|
||||
A token is needed to grant you access.<br />
|
||||
Please send "{{ command }}" to the bot in mumble to acquire one.
|
||||
<form action="." method="get">
|
||||
<div class="form-group mt-3">
|
||||
<label for="token_input">Token</label>
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control btn-space" id="token_input" name="token"
|
||||
placeholder="xxxxxxx">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="web/build/assets/js/jquery-3.5.1.min.js"></script>
|
||||
<script src="web/build/assets/js/popper.min.js"></script>
|
||||
<script src="web/build/assets/js/bootstrap.min.js"></script>
|
||||
<script src="web/build/assets/js/fontawesome.all.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|