evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removed onclick events on settings buttons and on quality modal, changed download tab style logic

Browse Source
This commit is contained in:
Roberto Tonino
2020-04-19 18:55:24 +02:00
parent 2a5d3c2677
commit a64dfa84b6
9 changed files with 283 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
public/js/app/app.js
View File

@@ -19,8 +19,8 @@ function toast(msg, icon = null, dismiss = true, id = null) {
else icon = `<i class="material-icons">${icon}</i>`
toastDOM.find('.toast-icon').html(icon)
}
if (dismiss !== null && dismiss){
setTimeout(function(){
if (dismiss !== null && dismiss) {
setTimeout(function () {
toastObj.hideToast()
delete toastsWithId[id]
}, 3000)
@@ -42,6 +42,7 @@ function toast(msg, icon = null, dismiss = true, id = null) {
}
}
/* ===== Socketio listeners ===== */
socket.on('toast', data => {
toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
})
@@ -51,33 +52,6 @@ socket.on('message', function (msg) {
console.log(msg)
})
$(function () {
if (localStorage.getItem('arl')) {
socket.emit('login', localStorage.getItem('arl'))
$('#login_input_arl').val(localStorage.getItem('arl'))
}
// Check if download tab should be open
if (eval(localStorage.getItem('downloadTabOpen'))) $('#show_download_tab').click()
else $('#hide_download_tab').click()
// Open default tab
document.getElementById('main_home_tablink').click()
})
// Show/Hide Download Tab
document.querySelector('#show_download_tab').onclick = ev => {
ev.preventDefault()
document.querySelector('#download_tab_bar').style.display = 'none'
document.querySelector('#download_tab').style.display = 'block'
localStorage.setItem('downloadTabOpen', true)
}
document.querySelector('#hide_download_tab').onclick = ev => {
ev.preventDefault()
document.querySelector('#download_tab_bar').style.display = 'block'
document.querySelector('#download_tab').style.display = 'none'
localStorage.setItem('downloadTabOpen', false)
}
// Login stuff
function loginButton() {
@@ -87,20 +61,6 @@ function loginButton() {
}
}
function copyARLtoClipboard() {
$('#login_input_arl').attr('type', 'text')
let copyText = document.querySelector('#login_input_arl')
copyText.select()
copyText.setSelectionRange(0, 99999)
document.execCommand('copy')
$('#login_input_arl').attr('type', 'password')
toast('ARL copied to clipboard', 'assignment')
}
function logout() {
socket.emit('logout')
}
socket.on('logging_in', function () {
toast('Logging in', 'loading', false, 'login-toast')
})
@@ -157,68 +117,85 @@ socket.on('logged_out', function () {
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
})
// settings stuff
var settingsTab = new Vue({
el: '#settings_tab',
data: {
settings: {tags: {}},
spotifyFeatures: {}
}
})
socket.on("init_settings", function(settings, credentials){
loadSettings(settings, credentials)
toast("Settings loaded!", 'settings')
})
socket.on("updateSettings", function(settings, credentials){
loadSettings(settings, credentials)
toast("Settings updated!", 'settings')
})
function loadSettings(settings, spotifyCredentials){
lastSettings = {...settings}
lastCredentials = {...spotifyCredentials}
settingsTab.settings = settings
settingsTab.spotifyFeatures = spotifyCredentials
}
function saveSettings(){
lastSettings = {...settingsTab.settings}
lastCredentials = {...settingsTab.spotifyFeatures}
socket.emit("saveSettings", lastSettings, lastCredentials)
}
// quality modal stuff
var modalQuality = document.getElementById('modal_quality');
var modalQuality = document.getElementById('modal_quality')
modalQuality.open = false
window.onclick = function(event) {
window.onclick = function (event) {
if (event.target == modalQuality && modalQuality.open) {
$(modalQuality).addClass('animated fadeOut')
}
}
$(modalQuality).on('webkitAnimationEnd', function () {
if (modalQuality.open){
if (modalQuality.open) {
$(this).removeClass('animated fadeOut')
$(this).css('display', 'none')
modalQuality.open = false
}else{
} else {
$(this).removeClass('animated fadeIn')
$(this).css('display', 'block')
modalQuality.open = true
}
})
function openQualityModal(link){
$(modalQuality).data("url", link)
function openQualityModal(link) {
$(modalQuality).data('url', link)
$(modalQuality).css('display', 'block')
$(modalQuality).addClass('animated fadeIn')
}
function modalQualityButton(bitrate){
var url=$(modalQuality).data("url")
function modalQualityButton(event) {
if (!event.target.matches('.quality-button')) {
return
}
let bitrate = event.target.dataset.qualityValue
var url = $(modalQuality).data('url')
sendAddToQueue(url, bitrate)
$(modalQuality).addClass('animated fadeOut')
}
/**
* Adds event listeners.
* @returns {void}
* @since 0.1.0 (?)
*/
function linkEventListeners() {
// document.getElementById('show_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, true))
// document.getElementById('hide_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, false))
document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
}
/**
* App initialization.
* @returns {void}
* @since 0.1.0 (?)
*/
function init() {
linkEventListeners()
if ('true' === localStorage.darkMode) {
document.documentElement.classList.add('dark-theme')
}
if (localStorage.getItem('arl')) {
let arl = localStorage.getItem('arl')
socket.emit('login', arl)
$('#login_input_arl').val(arl)
}
// Check if download tab should be open
if ('true' === localStorage.getItem('downloadTabOpen')) {
document.querySelector('#download_tab_container').classList.remove('tab_hidden')
}
// Open default tab
document.getElementById('main_home_tablink').click()
}
document.addEventListener('DOMContentLoaded', init)

1
public/js/app/components/search-tab/TheMainSearch.vue
View File

@@ -94,7 +94,6 @@
>
<h1>No results</h1>
</div>
<p>marco</p>
</div>
</template>

11
public/js/app/downloadList.js
View File

@@ -1,3 +1,12 @@
// Show/Hide Download Tab
function toggleDownloadTab(ev) {
ev.preventDefault()
let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
localStorage.setItem('downloadTabOpen', !isHidden)
}
var queueList = {}
var queue = []
var queueComplete = []
@@ -171,4 +180,4 @@ socket.on('updateQueue', function (update) {
$('#bar_' + update.uuid).css('width', update.progress + '%')
}
}
})
})

118
public/js/app/search.js
View File

@@ -1,15 +1,5 @@
/* ===== Scrolled search ===== */
// Load more content when the search page is at the end
$('#content').on('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
if (
main_selected == 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
) {
scrolledSearch(window[search_selected.split('_')[0] + 'Search'])
}
}
})
function scrolledSearch(vueTab) {
query = vueTab.query
if (vueTab.results.next < vueTab.results.total) {
@@ -22,7 +12,9 @@ function scrolledSearch(vueTab) {
}
}
function searchUpadate(result) {
function searchUpdate(result) {
console.log('search update')
vueTab = null
switch (result.type) {
case 'TRACK':
@@ -43,21 +35,35 @@ function searchUpadate(result) {
vueTab.results.data = vueTab.results.data.concat(result.data)
}
}
socket.on('search', function (result) {
searchUpadate(result)
searchUpdate(result)
})
function handleContentScroll() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
if (
main_selected == 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
) {
scrolledSearch(window[search_selected.split('_')[0] + 'Search'])
}
}
}
document.getElementById('content').addEventListener('scroll', debounce(handleContentScroll, 50))
function clickElement(button) {
return document.getElementById(button).click()
}
function sendAddToQueue(url, bitrate = null) {
if (url.indexOf(";") != -1){
urls = url.split(";")
urls.forEach(url=>{
if (url.indexOf(';') != -1) {
urls = url.split(';')
urls.forEach(url => {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
})
}else if(url != ""){
} else if (url != '') {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
}
}
@@ -88,8 +94,14 @@ let MainSearch = new Vue({
changeSearchTab(section) {
if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
},
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
}
}
})
@@ -106,8 +118,14 @@ var trackSearch = new Vue({
}
},
methods: {
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
}
}
})
@@ -124,8 +142,14 @@ var albumSearch = new Vue({
}
},
methods: {
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
}
}
})
@@ -142,8 +166,14 @@ var artistSearch = new Vue({
}
},
methods: {
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
}
}
})
@@ -160,28 +190,34 @@ var playlistSearch = new Vue({
}
},
methods: {
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
}
}
})
let term = null
// Search section
$("#searchbar").keyup(function(e){
if(e.keyCode == 13){
term = this.value
if (isValidURL(term)){
if (e.ctrlKey){
openQualityModal(term);
}else{
sendAddToQueue(term);
}
}else{
if (term != MainSearch.results.QUERY || main_selected == 'search_tab'){
document.getElementById("search_tab_content").style.display = "none";
socket.emit("mainSearch", {term: term});
}else{
$('#searchbar').keyup(function (e) {
if (e.keyCode == 13) {
term = this.value
if (isValidURL(term)) {
if (e.ctrlKey) {
openQualityModal(term)
} else {
sendAddToQueue(term)
}
} else {
if (term != MainSearch.results.QUERY || main_selected == 'search_tab') {
document.getElementById('search_tab_content').style.display = 'none'
socket.emit('mainSearch', { term: term })
} else {
document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()

54
public/js/app/settings.js Normal file
View File

@@ -0,0 +1,54 @@
const SettingsTab = new Vue({
el: '#settings_tab',
data: {
settings: { tags: {} },
spotifyFeatures: {}
},
methods: {
addListeners() {
document.getElementById('settings_btn_save').addEventListener('click', saveSettings)
document.getElementById('settings_btn_copyArl').addEventListener('click', copyARLtoClipboard)
document.getElementById('settings_btn_logout').addEventListener('click', logout)
}
},
mounted() {
this.addListeners()
}
})
socket.on('init_settings', function (settings, credentials) {
loadSettings(settings, credentials)
toast('Settings loaded!', 'settings')
})
socket.on('updateSettings', function (settings, credentials) {
loadSettings(settings, credentials)
toast('Settings updated!', 'settings')
})
function loadSettings(settings, spotifyCredentials) {
lastSettings = { ...settings }
lastCredentials = { ...spotifyCredentials }
SettingsTab.settings = settings
SettingsTab.spotifyFeatures = spotifyCredentials
}
function saveSettings() {
lastSettings = { ...SettingsTab.settings }
lastCredentials = { ...SettingsTab.spotifyFeatures }
socket.emit('saveSettings', lastSettings, lastCredentials)
}
function copyARLtoClipboard() {
$('#login_input_arl').attr('type', 'text')
let copyText = document.querySelector('#login_input_arl')
copyText.select()
copyText.setSelectionRange(0, 99999)
document.execCommand('copy')
$('#login_input_arl').attr('type', 'password')
toast('ARL copied to clipboard', 'assignment')
}
function logout() {
socket.emit('logout')
}

2
public/js/app/tabs.js
View File

@@ -16,7 +16,7 @@ function changeTab(evt, section, tabName) {
tablinks[i].classList.remove('active')
}
if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
settingsTab.settings = { ...lastSettings }
SettingsTab.settings = { ...lastSettings }
}
document.getElementById(tabName).style.display = 'block'

16
public/js/app/utils.js
View File

@@ -30,3 +30,19 @@ function convertDurationSeparated(duration) {
function numberWithDots(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
}
function debounce(func, wait, immediate) {
var timeout
return function() {
var context = this
var args = arguments
var later = function() {
timeout = null
if (!immediate) func.apply(context, args)
}
var callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func.apply(context, args)
}
}