From a64dfa84b66a6e2d68361f387d0bd90cfaee64e2 Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Sun, 19 Apr 2020 18:55:24 +0200 Subject: [PATCH] removed onclick events on settings buttons and on quality modal, changed download tab style logic --- public/css/modules/download-tab.css | 65 +++++--- public/index.html | 39 +++-- public/js/app/app.js | 143 ++++++++---------- .../components/search-tab/TheMainSearch.vue | 1 - public/js/app/downloadList.js | 11 +- public/js/app/search.js | 118 ++++++++++----- public/js/app/settings.js | 54 +++++++ public/js/app/tabs.js | 2 +- public/js/app/utils.js | 16 ++ 9 files changed, 283 insertions(+), 166 deletions(-) create mode 100644 public/js/app/settings.js diff --git a/public/css/modules/download-tab.css b/public/css/modules/download-tab.css index baa36f8..11a4896 100644 --- a/public/css/modules/download-tab.css +++ b/public/css/modules/download-tab.css @@ -1,30 +1,28 @@ /* Download tab section */ -div#download_tab_container { + +#download_tab_container { + min-width: 300px; + height: 100%; background-color: var(--panels-background); color: var(--panels-text); - height: 100%; - width: auto; - display: flex; + display: block; + flex-direction: column; } -div#download_tab_bar { - height: 100%; - width: 32px; +#toggle_download_tab { + width: 25px; + height: 25px; } -div#download_tab_bar>label { - writing-mode: vertical-rl; - line-height: 32px; - padding-top: 8px; -} - -div#download_tab { - height: 100%; - width: 300px; - display: none; +#toggle_download_tab::before { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + content: 'chevron_right'; } .download_bar_icon { + cursor: pointer; font-size: 24px; margin: 4px; } @@ -124,4 +122,37 @@ div#download_tab { .download_object>.download_bar>.progress { margin: 0px; +} + +/* ===== Hidden tab styles ===== */ +#download_tab_container.tab_hidden { + min-width: 32px; +} + +#download_tab_container.tab_hidden #toggle_download_tab::before { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + content: 'chevron_left'; +} + +#download_tab_container.tab_hidden::after { + content: 'downloads'; + display: flex; + align-items: center; + text-transform: capitalize; + writing-mode: vertical-rl; + line-height: 32px; +} + +#download_tab_container.tab_hidden #queue_buttons { + display: none; +} + +#download_tab_container.tab_hidden #download_list { + display: none; +} + +#download_tab_container.tab_hidden #download_tab_label { + display: inline; } \ No newline at end of file diff --git a/public/index.html b/public/index.html index c5af2ec..11b9752 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,7 @@
- +
@@ -168,12 +168,12 @@

Settings

Profile Picture

You are logged in as

- +
- +

How do I get my own ARL?

@@ -358,7 +358,7 @@

Settings

- +
@@ -444,30 +444,24 @@

{{ metadata }}{{ rele -
-
- chevron_left - -
-
- chevron_right -
- clear_all - delete_sweep -
-
+
+ +
+ clear_all + delete_sweep
+
@@ -479,6 +473,7 @@

{{ metadata }}{{ rele + diff --git a/public/js/app/app.js b/public/js/app/app.js index ac21e78..8be9ee0 100644 --- a/public/js/app/app.js +++ b/public/js/app/app.js @@ -19,8 +19,8 @@ function toast(msg, icon = null, dismiss = true, id = null) { else icon = `${icon}` 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) \ No newline at end of file diff --git a/public/js/app/components/search-tab/TheMainSearch.vue b/public/js/app/components/search-tab/TheMainSearch.vue index 751c7c1..7f76d74 100644 --- a/public/js/app/components/search-tab/TheMainSearch.vue +++ b/public/js/app/components/search-tab/TheMainSearch.vue @@ -94,7 +94,6 @@ >

No results

-

marco

diff --git a/public/js/app/downloadList.js b/public/js/app/downloadList.js index bdac6a1..b7112f7 100644 --- a/public/js/app/downloadList.js +++ b/public/js/app/downloadList.js @@ -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 + '%') } } -}) +}) \ No newline at end of file diff --git a/public/js/app/search.js b/public/js/app/search.js index 5a79bf0..aef5148 100644 --- a/public/js/app/search.js +++ b/public/js/app/search.js @@ -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() diff --git a/public/js/app/settings.js b/public/js/app/settings.js new file mode 100644 index 0000000..94101b5 --- /dev/null +++ b/public/js/app/settings.js @@ -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') +} diff --git a/public/js/app/tabs.js b/public/js/app/tabs.js index 3aa62e9..7e968e4 100644 --- a/public/js/app/tabs.js +++ b/public/js/app/tabs.js @@ -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' diff --git a/public/js/app/utils.js b/public/js/app/utils.js index 62b117b..191d856 100644 --- a/public/js/app/utils.js +++ b/public/js/app/utils.js @@ -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) + } +} \ No newline at end of file