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 e2e3ab6..c89d8db 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,7 @@
- +
@@ -199,12 +199,12 @@

Settings

Profile Picture

You are logged in as

- +
- +

How do I get my own ARL?

@@ -389,7 +389,7 @@

Settings

@@ -475,30 +475,24 @@

{{ metadata }}{{ rele -
-
- chevron_left - -
-
- chevron_right -
- clear_all - delete_sweep -
-
+
+ +
+ clear_all + delete_sweep
+
@@ -510,6 +504,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/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 2583115..446da35 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