1 line
18 KiB
HTML
1 line
18 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 rel="icon" href="static/img/favicon.ico"/><link id="pagestyle" rel="stylesheet" href="static/css/main.css"></head><body><div class="container page-header mb-5" id="banner"><div class="row"><div class="col-auto"><img src="static/img/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="static/img/loading.svg"/></td></tr><tr id="playlist-empty" class="d-none"><td colspan="4" class="text-center"><img style="margin: auto; width: 35px;" src="static/img/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 class="playlist-item-id" value=""/><div class="float-left"><img width="80" class="playlist-item-thumbnail" src="static/img/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="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="static/img/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/img/empty_box.svg"/></div><div id="library-item" style="display: none;" class="list-group-item library-item"><input hidden 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/img/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><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 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="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 mb-2" role="group"><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 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="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 %}</option></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" 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" 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 id="theme-switch-btn" class="floating-button" style="bottom: 50px;"><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="static/img/empty_box.svg"/> <img id="playerArtwork" src="static/img/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" target="_blank"><input hidden name="id" value=""> <input hidden name="type" value=""> <input hidden name="dir" value=""> <input hidden name="tags" value=""> <input hidden name="keywords" value=""></form><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 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" 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><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="static/js/main.js"></script></div></body> |