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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/css/modules/download-tab.css
View File

@ -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;
}
@ -125,3 +123,36 @@ 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;
}

39
public/index.html
View File

@ -21,7 +21,7 @@
<div id="middle_section">
<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header>
<section id="content"><div id="container">
<!-- <div id="v-app" style="height: 300px;"><app/></div> -->
<!-- <div id="v-app"><app/></div> -->
<div id="search_tab" class="main_tabcontent">
<div class="tab">
<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
@ -168,12 +168,12 @@ <h1>Settings</h1>
<img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/>
<div>
<p>You are logged in as <b id="settings_username"></b></p>
<button onclick="logout()" id="settings_btn_logout">Logout</button>
<button id="settings_btn_logout">Logout</button>
</div>
</div>
<div class="inline-flex">
<input autocomplete="off" type="password" id="login_input_arl" placeholder="ARL"/>
<button onclick="copyARLtoClipboard()" id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
<button id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
</div>
<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p>
<p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
@ -358,7 +358,7 @@ <h1>Settings</h1>
</div>
</div>
<footer>
<button onclick="saveSettings()">Save</button>
<button id="settings_btn_save">Save</button>
</footer>
</div>
@ -444,30 +444,24 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
</div></section>
</div>
<div id="download_tab_container">
<div id="download_tab_bar">
<i id="show_download_tab" class="material-icons download_bar_icon">chevron_left</i>
<label>downloads</label>
</div>
<div id="download_tab">
<i id="hide_download_tab" class="material-icons download_bar_icon">chevron_right</i>
<div class="inline-flex right">
<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
</div>
<div id="download_list" class=""></div>
<div id="download_tab_container" class="tab_hidden">
<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
<div id="queue_buttons" class="right">
<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
</div>
<div id="download_list"></div>
</div>
</main>
<div id="modal_quality" class="smallmodal">
<!-- Modal content -->
<div class="smallmodal-content">
<button onclick="modalQualityButton(9)">Download FLAC</button><br>
<button onclick="modalQualityButton(3)">Download MP3 320kbps</button><br>
<button onclick="modalQualityButton(1)">Download MP3 128kbps</button><br>
<button onclick="modalQualityButton(15)">Download 360 Reality Audio [HQ]</button><br>
<button onclick="modalQualityButton(14)">Download 360 Reality Audio [MQ]</button><br>
<button onclick="modalQualityButton(13)">Download 360 Reality Audio [LQ]</button><br>
<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br>
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br>
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br>
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br>
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br>
</div>
</div>
</body>
@ -479,6 +473,7 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
<!-- <script type="text/javascript" src="/public/js/app/v-app.js"></script> -->
<script type="text/javascript" src="/public/js/app/app.js"></script>
<script type="text/javascript" src="/public/js/app/settings.js"></script>
<script type="text/javascript" src="/public/js/app/tabs.js"></script>
<script type="text/javascript" src="/public/js/app/stackedTabs.js"></script>
<script type="text/javascript" src="/public/js/app/utils.js"></script>

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>

9
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 = []

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)
}
}