storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate rest of JS out of HTML

Browse Source
This commit is contained in:
Tyler Vigario 2020-06-09 18:11:19 -07:00
parent 66bf1f1510
commit 716b55b020
No known key found for this signature in database
GPG Key ID: 4D670648A0376AA4
5 changed files with 105 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/js/main.js
View File

File diff suppressed because one or more lines are too long

2
static/js/main.js.map
View File

File diff suppressed because one or more lines are too long

2
templates/index.html
View File

File diff suppressed because one or more lines are too long

58
web/src/js/main.mjs
View File

@ -603,7 +603,7 @@ const download_dir = download_form.find('input[name=\'dir\']');
const download_tags = download_form.find('input[name=\'tags\']'); const download_tags = download_form.find('input[name=\'tags\']');
const download_keywords = download_form.find('input[name=\'keywords\']'); const download_keywords = download_form.find('input[name=\'keywords\']');
function addAllResults() { document.getElementById('add-to-playlist-btn').addEventListener('click', () => {
const data = getFilters(); const data = getFilters();
data.action = 'add'; data.action = 'add';
@ -616,9 +616,9 @@ function addAllResults() {
}); });
checkForPlaylistUpdate(); checkForPlaylistUpdate();
} });
function deleteAllResults() { document.getElementById('library-delete-btn').addEventListener('click', () => {
const data = getFilters(); const data = getFilters();
data.action = 'delete'; data.action = 'delete';
@ -632,9 +632,9 @@ function deleteAllResults() {
checkForPlaylistUpdate(); checkForPlaylistUpdate();
updateResults(); updateResults();
} });
function downloadAllResults() { document.getElementById('library-download-btn').addEventListener('click', () => {
const cond = getFilters(); const cond = getFilters();
download_id.val(); download_id.val();
download_type.val(cond.type); download_type.val(cond.type);
@ -642,7 +642,12 @@ function downloadAllResults() {
download_tags.val(cond.tags); download_tags.val(cond.tags);
download_keywords.val(cond.keywords); download_keywords.val(cond.keywords);
download_form.submit(); download_form.submit();
} });
document.getElementById('library-rescan-btn').addEventListener('click', () => {
request('post', {action: 'rescan'});
updateResults();
});
function downloadId(id) { function downloadId(id) {
download_id.attr('value', id); download_id.attr('value', id);
@ -760,7 +765,7 @@ function addTagModalShow(_id, _title, _tag_tuples) {
add_tag_modal.modal('show'); add_tag_modal.modal('show');
} }
function addTagModalAdd() { document.getElementById('addTagModalAddBtn').addEventListener('click', () => {
const new_tags = add_tag_modal_input.val().split(',').map(function(str) { const new_tags = add_tag_modal_input.val().split(',').map(function(str) {
return str.trim(); return str.trim();
}); });
@ -776,9 +781,9 @@ function addTagModalAdd() {
modal_tag_text.html(''); modal_tag_text.html('');
}); });
add_tag_modal_input.val(''); add_tag_modal_input.val('');
} });
function addTagModalSubmit() { document.getElementById('addTagModalSubmit').addEventListener('click', () => {
const all_tags = $('.modal-tag-text'); const all_tags = $('.modal-tag-text');
const tags = []; const tags = [];
all_tags.each(function(i, element) { all_tags.each(function(i, element) {
@ -797,7 +802,7 @@ function addTagModalSubmit() {
}, },
}); });
updateResults(active_page); updateResults(active_page);
} });
// --------------------- // ---------------------
// ------- Volume ------ // ------- Volume ------
@ -1030,6 +1035,23 @@ function uploadCancel() {
areYouSureToCancelUploading = !areYouSureToCancelUploading; areYouSureToCancelUploading = !areYouSureToCancelUploading;
} }
//
// URLS & Radio
//
const musicUrlInput = document.getElementById('music-url-input');
const radioUrlInput = document.getElementById('radio-url-input');
document.getElementById('add-music-url').querySelector('button').addEventListener('click', () => {
request('post', {add_url: musicUrlInput.value});
musicUrlInput.value = '';
});
document.getElementById('add-radio-url').querySelector('button').addEventListener('click', () => {
request('post', {add_radio: radioUrlInput.value});
radioUrlInput.value = '';
});
// --------------------- // ---------------------
// ------ Player ------ // ------ Player ------
// --------------------- // ---------------------
@ -1047,9 +1069,21 @@ const playerSkipBtn = document.getElementById('playerSkipBtn');
let currentPlayingItem = null; let currentPlayingItem = null;
function togglePlayer() { playerPlayBtn.addEventListener('click', () => {
request('post', {action: 'resume'});
});
playerPauseBtn.addEventListener('click', () => {
request('post', {action: 'pause'});
});
playerSkipBtn.addEventListener('click', () => {
request('post', {action: 'next'});
});
document.getElementById('player-toast').addEventListener('click', () => {
$(player).toast('show'); $(player).toast('show');
} });
function playerSetIdle() { function playerSetIdle() {
playerArtwork.style.display = 'none'; playerArtwork.style.display = 'none';

48
web/src/templates/index.html
View File

@ -237,13 +237,11 @@
<path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z"></path> <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> <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> </svg>
</button> </button>
<button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" type="button" title="Add to bottom"> <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"> <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="2 2 20 20">
<path d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z"></path> <path d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z"></path>
</svg> </svg>
</button> </button>
<button class="library-item-download btn btn-primary btn-sm btn-space" type="button"> <button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
<i class="fas fa-download" aria-hidden="true"></i> <i class="fas fa-download" aria-hidden="true"></i>
@ -267,15 +265,17 @@
</div> </div>
<div class="btn-group mb-2" role="group"> <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 id="add-to-playlist-btn" type="button" class="btn btn-secondary mr-1">
<i class="fas fa-plus" aria-hidden="true"></i> Add All
</button> </button>
<button type="submit" class="btn btn-secondary mr-1" onclick="request('post', {action : 'rescan'}); updateResults()"> <button id="library-rescan-btn" type="button" class="btn btn-secondary mr-1">
<i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files <i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
</button> </button>
<button type="submit" class="btn btn-secondary mr-1" onclick="downloadAllResults()"><i class="fas fa-download" aria-hidden="true"></i> Download All <button id="library-download-btn" type="button" class="btn btn-secondary mr-1">
<i class="fas fa-download" aria-hidden="true"></i> Download All
</button> </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> <button type="button" class="btn btn-danger mr-1" data-toggle="modal" data-target="#deleteWarningModal">
Delete All <i class="fas fa-trash-alt" aria-hidden="true"></i> Delete All
</button> </button>
</div> </div>
@ -295,7 +295,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <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> <button id="library-delete-btn" type="button" class="btn btn-danger" data-dismiss="modal">Delete All Listed Files</button>
</div> </div>
</div> </div>
</div> </div>
@ -357,38 +357,38 @@
<div class="container mb-5"> <div class="container mb-5">
<div class="card-deck"> <div class="card-deck">
<div class="card"> <div id="add-music-url" class="card">
<div class="card-header"> <div class="card-header">
<h5 class="card-title">Add URL</h5> <h5 class="card-title">Add URL</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<label for="add_url_input">Add Youtube or Soundcloud URL</label> <label for="music-url-input">Add Youtube or Soundcloud URL</label>
<div class="input-group mb-2"> <div class="input-group mb-2">
<input class="form-control" type="text" id="add_url_input" placeholder="URL..."> <input class="form-control" type="text" id="music-url-input" placeholder="URL...">
</div> </div>
<button type="submit" class="btn btn-primary" onclick="var $i = $('#add_url_input')[0]; request('post', {add_url : $i.value }); $i.value = ''; ">Add <button type="submit" class="btn btn-primary">
URL Add URL
</button> </button>
</div> </div>
</div> </div>
<div class="card"> <div id="add-radio-url" class="card">
<div class="card-header"> <div class="card-header">
<h5 class="card-title">Add Radio</h5> <h5 class="card-title">Add Radio</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<label for="add_radio_input">Add Radio URL</label> <label for="radio-url-input">Add Radio URL</label>
<div class="input-group mb-2"> <div class="input-group mb-2">
<input class="form-control" type="text" id="add_radio_input" placeholder="Radio Address..."> <input id="radio-url-input" class="form-control" type="text" placeholder="Radio Address...">
</div> </div>
<button type="submit" class="btn btn-primary" onclick="var $i = $('#add_radio_input')[0]; request('post', {add_radio : $i.value }); $i.value = '';">Add <button type="submit" class="btn btn-primary">
Radio Add Radio
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="floating-button" style="bottom: 120px;" onclick="togglePlayer()"> <div id="player-toast" class="floating-button" style="bottom: 120px;">
<i class="fas fa-play" aria-hidden="true"></i> <i class="fas fa-play" aria-hidden="true"></i>
</div> </div>
@ -409,13 +409,13 @@
<img id="playerArtwork" src="static/img/unknown-album.png" style="display: none;" /> <img id="playerArtwork" src="static/img/unknown-album.png" style="display: none;" />
<div id="playerInfo"> <div id="playerInfo">
<div id="playerActionBox"> <div id="playerActionBox">
<button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none" onclick="request('post', {action: 'resume'})"> <button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none">
<i class="fas fa-play"></i> <i class="fas fa-play"></i>
</button> </button>
<button id="playerPauseBtn" class="btn btn-primary btn-sm btn-space" style="display: none" onclick="request('post', {action: 'pause'})"> <button id="playerPauseBtn" class="btn btn-primary btn-sm btn-space" style="display: none">
<i class="fas fa-pause"></i> <i class="fas fa-pause"></i>
</button> </button>
<button id="playerSkipBtn" class="btn btn-primary btn-sm" onclick="request('post', {action : 'next'})"> <button id="playerSkipBtn" class="btn btn-primary btn-sm">
<i class="fas fa-fast-forward"></i> <i class="fas fa-fast-forward"></i>
</button> </button>
</div> </div>
@ -461,7 +461,7 @@
</div> </div>
<div class="input-group"> <div class="input-group">
<input class="form-control form-control-sm btn-space" type="text" id="addTagModalInput" placeholder="tag1,tag2,..."> <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()"> <button id="addTagModalAddBtn" type="button" class="btn btn-primary btn-sm">
<i class="fas fa-plus" aria-hidden="true"></i> <i class="fas fa-plus" aria-hidden="true"></i>
Add Add
</button> </button>
@ -469,7 +469,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <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> <button id="addTagModalSubmit" type="button" class="btn btn-success" data-dismiss="modal">Edit!</button>
</div> </div>
</div> </div>
</div> </div>