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

Migrate some HTML function calls to event listeners

Browse Source
This commit is contained in:
Tyler Vigario
2020-06-01 23:11:44 -07:00
parent 19da0cdc46
commit a48dcb303e
4 changed files with 143 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/main.js
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

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

@ -1,4 +1,8 @@
import {isOverflown, setProgressBar, secondsToStr} from './util';
import {
isOverflown,
setProgressBar,
secondsToStr,
} from './util';
$('#uploadSelectFile').on('change', function() {
// get the file name
@ -47,6 +51,7 @@ let playing = false;
const playPauseBtn = $('#play-pause-btn');
const fastForwardBtn = $('#fast-forward-btn');
const volumeSlider = document.getElementById('volume-slider');
const playModeBtns = {
'one-shot': $('#one-shot-mode-btn'),
@ -61,6 +66,25 @@ const playModeIcon = {
'autoplay': 'fa-robot',
};
playPauseBtn.on('click', togglePlayPause);
fastForwardBtn.on('click', () => {
request('post', {
action: 'next',
});
});
document.getElementById('clear-playlist-btn').addEventListener('click', () => {
request('post', {action: 'clear'});
});
// eslint-disable-next-line guard-for-in
for (const playMode in playModeBtns) {
playModeBtns[playMode].on('click', () => {
changePlayMode(playMode);
});
}
function request(_url, _data, refresh = false) {
console.log(_data);
$.ajax({
@ -123,7 +147,9 @@ function addPlaylistItem(item) {
}
function displayPlaylist(data) {
playlist_table.animate({opacity: 0}, 200, function() {
playlist_table.animate({
opacity: 0,
}, 200, function() {
playlist_loading.hide();
$('.playlist-item').remove();
const items = data.items;
@ -163,7 +189,9 @@ function displayPlaylist(data) {
displayActiveItem(data.current_index);
updatePlayerInfo(playlist_items[data.current_index]);
bindPlaylistEvent();
playlist_table.animate({opacity: 1}, 200);
playlist_table.animate({
opacity: 1,
}, 200);
});
}
@ -193,7 +221,9 @@ function insertExpandPrompt(real_from, real_to, display_from, display_to, total_
}
function updatePlaylist() {
playlist_table.animate({opacity: 0}, 200, function() {
playlist_table.animate({
opacity: 0,
}, 200, function() {
playlist_empty.addClass('d-none');
playlist_loading.show();
playlist_table.find('.playlist-item').css('opacity', 0);
@ -217,7 +247,9 @@ function updatePlaylist() {
},
},
});
playlist_table.animate({opacity: 1}, 200);
playlist_table.animate({
opacity: 1,
}, 200);
});
}
@ -303,25 +335,31 @@ function updateControls(empty, play, mode, volume) {
if (volume !== last_volume) {
last_volume = volume;
if (volume > 1) {
document.getElementById('volume-slider').value = 1;
volumeSlider.value = 1;
} else if (volume < 0) {
document.getElementById('volume-slider').value = 0;
volumeSlider.value = 0;
} else {
document.getElementById('volume-slider').value = volume;
volumeSlider.value = volume;
}
}
}
function togglePlayPause() {
if (playing) {
request('post', {action: 'pause'});
request('post', {
action: 'pause',
});
} else {
request('post', {action: 'resume'});
request('post', {
action: 'resume',
});
}
}
function changePlayMode(mode) {
request('post', {action: mode});
request('post', {
action: mode,
});
}
@ -337,6 +375,13 @@ const filters = {
const filter_dir = $('#filter-dir');
const filter_keywords = $('#filter-keywords');
// eslint-disable-next-line guard-for-in
for (const filter in filters) {
filters[filter].on('click', (e) => {
setFilterType(e, filter);
});
}
function setFilterType(event, type) {
event.preventDefault();
@ -522,7 +567,9 @@ function updateResults(dest_page = 1) {
const data = getFilters(dest_page);
data.action = 'query';
lib_group.animate({opacity: 0}, 200, function() {
lib_group.animate({
opacity: 0,
}, 200, function() {
$.ajax({
type: 'POST',
url: 'library',
@ -543,7 +590,9 @@ function updateResults(dest_page = 1) {
$('.library-item-active').remove();
lib_empty.hide();
lib_loading.show();
lib_group.animate({opacity: 1}, 200);
lib_group.animate({
opacity: 1,
}, 200);
});
}
@ -609,7 +658,9 @@ const page_li = $('.library-page-li');
const page_no = $('.library-page-no');
function processResults(data) {
lib_group.animate({opacity: 0}, 200, function() {
lib_group.animate({
opacity: 0,
}, 200, function() {
lib_loading.hide();
const total_pages = data.total_pages;
const active_page = data.active_page;
@ -674,7 +725,9 @@ function processResults(data) {
page_li_copy.appendTo(page_ul);
}
lib_group.animate({opacity: 1}, 200);
lib_group.animate({
opacity: 1,
}, 200);
});
}
@ -750,30 +803,27 @@ function addTagModalSubmit() {
// ------- Volume ------
// ---------------------
const volume_popover_btn = document.querySelector('#volume-popover-btn');
const volume_popover_div = document.querySelector('#volume-popover');
const volumePopoverBtn = document.querySelector('#volume-popover-btn');
const volumePopoverDiv = document.querySelector('#volume-popover');
let volume_popover_instance = null;
let volume_popover_show = false;
let volume_update_timer;
volume_popover_btn.addEventListener('click', function(e) {
volumePopoverBtn.addEventListener('click', function(e) {
e.stopPropagation();
});
volume_popover_div.addEventListener('click', function(e) {
e.stopPropagation();
});
function toggleVolumePopover() {
if (!volume_popover_show) {
volume_popover_instance = new Popper(volume_popover_btn, volume_popover_div, {
volume_popover_instance = new Popper(volumePopoverBtn, volumePopoverDiv, {
placement: 'top',
modifiers: {
offset: {offset: '0, 8'},
offset: {
offset: '0, 8',
},
} );
volume_popover_div.setAttribute('data-show', '');
},
});
volumePopoverDiv.setAttribute('data-show', '');
} else {
volume_popover_div.removeAttribute('data-show');
volumePopoverDiv.removeAttribute('data-show');
if (volume_popover_instance) {
volume_popover_instance.destroy();
volume_popover_instance = null;
@ -782,22 +832,39 @@ function toggleVolumePopover() {
volume_popover_show = !volume_popover_show;
document.addEventListener('click', function() {
volume_popover_div.removeAttribute('data-show');
volumePopoverDiv.removeAttribute('data-show');
if (volume_popover_instance) {
volume_popover_instance.destroy();
volume_popover_instance = null;
volume_popover_show = !volume_popover_show;
}
}, {once: true} );
}
}, {
once: true,
});
});
let volume_update_timer;
function setVolumeDelayed(new_volume_value) {
volumePopoverBtn.addEventListener('click', function(e) {
e.stopPropagation();
});
volumeSlider.addEventListener('change', (e) => {
window.clearTimeout(volume_update_timer);
volume_update_timer = window.setTimeout(function() {
request('post', {action: 'volume_set_value', new_volume: new_volume_value});
volume_update_timer = window.setTimeout(() => {
request('post', {
action: 'volume_set_value',
new_volume: volumePopoverDiv.value,
});
}, 500); // delay in milliseconds
}
});
document.getElementById('volume-down-btn').addEventListener('click', () => {
request('post', {action: 'volume_down'});
});
document.getElementById('volume-up-btn').addEventListener('click', () => {
request('post', {action: 'volume_up'});
});
// ---------------------
// ------- Upload ------
@ -872,7 +939,11 @@ function generateUploadProgressItem(file) {
const progress = item_clone.querySelector('.uploadProgress');
item_clone.style.display = 'block';
const item = {title: title, error: error, progress: progress};
const item = {
title: title,
error: error,
progress: progress,
};
filesProgressItem[file.name] = item;
uploadModalList.appendChild(item_clone);
@ -913,7 +984,9 @@ function uploadNextFile() {
uploadCancelBtn.style.display = 'none';
uploadCloseBtn.style.display = 'block';
request('post', {action: 'rescan'});
request('post', {
action: 'rescan',
});
updateResults();
}
});
@ -921,7 +994,7 @@ function uploadNextFile() {
req.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
const percent = e.loaded / e.total;
setProgressBar(file_progress_item.progress, percent, Math.floor(percent*100) + '%');
setProgressBar(file_progress_item.progress, percent, Math.floor(percent * 100) + '%');
}
});
@ -948,7 +1021,9 @@ function uploadCancel() {
runningXHR.abort();
filesToProceed = [];
uploadFileInput.value = '';
request('post', {action: 'rescan'});
request('post', {
action: 'rescan',
});
updateResults();
}
@ -977,8 +1052,8 @@ function togglePlayer() {
}
function playerSetIdle() {
playerArtwork.style.display ='none';
playerArtworkIdle.style.display ='block';
playerArtwork.style.display = 'none';
playerArtworkIdle.style.display = 'block';
playerTitle.textContent = '-- IDLE --';
playerArtist.textContent = '';
setProgressBar(playerBar, 0);
@ -988,8 +1063,8 @@ function updatePlayerInfo(item) {
if (!item) {
playerSetIdle();
}
playerArtwork.style.display ='block';
playerArtworkIdle.style.display ='none';
playerArtwork.style.display = 'block';
playerArtworkIdle.style.display = 'none';
currentPlayingItem = item;
playerTitle.textContent = item.title;
playerArtist.textContent = item.artist;
@ -1020,7 +1095,7 @@ function updatePlayerControls(play, empty) {
playerSkipBtn.removeAttribute('disabled');
}
if (play) {
playerPlayBtn.style.display ='none';
playerPlayBtn.style.display = 'none';
playerPauseBtn.style.display = 'block';
} else {
playerPlayBtn.style.display = 'block';
@ -1031,6 +1106,7 @@ function updatePlayerControls(play, empty) {
let playhead_timer;
let player_playhead_position;
let playhead_dragging = false;
function updatePlayerPlayhead(playhead) {
if (!currentPlayingItem || playhead_dragging) {
return;
@ -1067,7 +1143,9 @@ playerBarBox.addEventListener('mousedown', function() {
playerBarBox.addEventListener('mouseup', function(event) {
playerBarBox.removeEventListener('mousemove', playheadDragged);
const percent = event.offsetX / playerBarBox.clientWidth;
request('post', {move_playhead: percent * currentPlayingItem.duration});
request('post', {
move_playhead: percent * currentPlayingItem.duration,
});
playhead_dragging = false;
});

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

@ -25,10 +25,10 @@
<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()">
<button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space">
<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'})">
<button type="button" id="fast-forward-btn" class="btn btn-info mb-2">
<i class="fas fa-fast-forward"></i>
</button>
<div class="ml-auto">
@ -37,37 +37,36 @@
<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')">
<a class="dropdown-item" href="#" id="one-shot-mode-btn">
<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')">
<a class="dropdown-item" href="#" id="random-mode-btn">
<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')">
<a class="dropdown-item" href="#" id="repeat-mode-btn">
<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')">
<a class="dropdown-item" href="#" id="autoplay-mode-btn">
<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()">
<button type="button" id="volume-popover-btn" class="btn btn-warning ml-1">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</button>
<div id="volume-popover">
<a onclick="request('post', {action : 'volume_down'})">
<a id="volume-down-btn">
<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)" />
<input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01" value="0.5" />
<a onclick="request('post', {action : 'volume_up'})">
<a id="volume-up-btn">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</a>
<div id="volume-popover-arrow"></div>
</div>
</div>
</div>
@ -137,7 +136,7 @@
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger mr-1" onclick="request('post', {action : 'clear'})">
<button type="button" id="clear-playlist-btn" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
</button>
</div>
@ -155,13 +154,13 @@
<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')">
<label id="filter-type-file" class="btn btn-secondary">
<input type="checkbox" name="options"> File
</label>
<label id="filter-type-url" class="btn btn-secondary" onclick="setFilterType(event, 'url')">
<label id="filter-type-url" class="btn btn-secondary">
<input type="checkbox" name="options"> URL
</label>
<label id="filter-type-radio" class="btn btn-secondary" onclick="setFilterType(event, 'radio')">
<label id="filter-type-radio" class="btn btn-secondary">
<input type="checkbox" name="options"> Radio
</label>
</div>