This commit is contained in:
RemixDev 2020-04-19 19:23:52 +02:00
commit 4659b929c7
8 changed files with 206 additions and 125 deletions

View File

@ -1,30 +1,28 @@
/* Download tab section */ /* Download tab section */
div#download_tab_container {
#download_tab_container {
min-width: 300px;
height: 100%;
background-color: var(--panels-background); background-color: var(--panels-background);
color: var(--panels-text); color: var(--panels-text);
height: 100%; display: block;
width: auto; flex-direction: column;
display: flex;
} }
div#download_tab_bar { #toggle_download_tab {
height: 100%; width: 25px;
width: 32px; height: 25px;
} }
div#download_tab_bar>label { #toggle_download_tab::before {
writing-mode: vertical-rl; font-family: 'Material Icons';
line-height: 32px; font-style: normal;
padding-top: 8px; font-weight: 400;
} content: 'chevron_right';
div#download_tab {
height: 100%;
width: 300px;
display: none;
} }
.download_bar_icon { .download_bar_icon {
cursor: pointer;
font-size: 24px; font-size: 24px;
margin: 4px; margin: 4px;
} }
@ -125,3 +123,36 @@ div#download_tab {
.download_object>.download_bar>.progress { .download_object>.download_bar>.progress {
margin: 0px; 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;
}

View File

@ -21,7 +21,7 @@
<div id="middle_section"> <div id="middle_section">
<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header> <header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header>
<section id="content"><div id="container"> <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 id="search_tab" class="main_tabcontent">
<div class="tab"> <div class="tab">
<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button> <button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
@ -199,12 +199,12 @@ <h1>Settings</h1>
<img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/> <img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/>
<div> <div>
<p>You are logged in as <b id="settings_username"></b></p> <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> </div>
<div class="inline-flex"> <div class="inline-flex">
<input autocomplete="off" type="password" id="login_input_arl" placeholder="ARL"/> <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> </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><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> <p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
@ -389,7 +389,7 @@ <h1>Settings</h1>
</div> </div>
</div> </div>
<footer> <footer>
<button onclick="saveSettings()">Save</button> <button id="settings_btn_save">Save</button>
</footer> </footer>
</div> </div>
@ -475,30 +475,24 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
</div></section> </div></section>
</div> </div>
<div id="download_tab_container"> <div id="download_tab_container" class="tab_hidden">
<div id="download_tab_bar"> <i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
<i id="show_download_tab" class="material-icons download_bar_icon">chevron_left</i> <div id="queue_buttons" class="right">
<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="clean_queue" class="material-icons download_bar_icon">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i> <i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
</div> </div>
<div id="download_list" class=""></div> <div id="download_list"></div>
</div>
</div> </div>
</main> </main>
<div id="modal_quality" class="smallmodal"> <div id="modal_quality" class="smallmodal">
<!-- Modal content --> <!-- Modal content -->
<div class="smallmodal-content"> <div class="smallmodal-content">
<button onclick="modalQualityButton(9)">Download FLAC</button><br> <button class="quality-button" data-quality-value="9">Download FLAC</button><br>
<button onclick="modalQualityButton(3)">Download MP3 320kbps</button><br> <button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br>
<button onclick="modalQualityButton(1)">Download MP3 128kbps</button><br> <button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br>
<button onclick="modalQualityButton(15)">Download 360 Reality Audio [HQ]</button><br> <button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br>
<button onclick="modalQualityButton(14)">Download 360 Reality Audio [MQ]</button><br> <button class="quality-button" data-quality-value="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="13">Download 360 Reality Audio [LQ]</button><br>
</div> </div>
</div> </div>
</body> </body>
@ -510,6 +504,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/vendor/toastify.js"></script>
<!-- <script type="text/javascript" src="/public/js/app/v-app.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/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/tabs.js"></script>
<script type="text/javascript" src="/public/js/app/stackedTabs.js"></script> <script type="text/javascript" src="/public/js/app/stackedTabs.js"></script>
<script type="text/javascript" src="/public/js/app/utils.js"></script> <script type="text/javascript" src="/public/js/app/utils.js"></script>

View File

@ -19,8 +19,8 @@ function toast(msg, icon = null, dismiss = true, id = null) {
else icon = `<i class="material-icons">${icon}</i>` else icon = `<i class="material-icons">${icon}</i>`
toastDOM.find('.toast-icon').html(icon) toastDOM.find('.toast-icon').html(icon)
} }
if (dismiss !== null && dismiss){ if (dismiss !== null && dismiss) {
setTimeout(function(){ setTimeout(function () {
toastObj.hideToast() toastObj.hideToast()
delete toastsWithId[id] delete toastsWithId[id]
}, 3000) }, 3000)
@ -42,6 +42,7 @@ function toast(msg, icon = null, dismiss = true, id = null) {
} }
} }
/* ===== Socketio listeners ===== */
socket.on('toast', data => { socket.on('toast', data => {
toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null) 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) 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 // Login stuff
function loginButton() { 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 () { socket.on('logging_in', function () {
toast('Logging in', 'loading', false, 'login-toast') 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_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 // quality modal stuff
var modalQuality = document.getElementById('modal_quality'); var modalQuality = document.getElementById('modal_quality')
modalQuality.open = false modalQuality.open = false
window.onclick = function(event) { window.onclick = function (event) {
if (event.target == modalQuality && modalQuality.open) { if (event.target == modalQuality && modalQuality.open) {
$(modalQuality).addClass('animated fadeOut') $(modalQuality).addClass('animated fadeOut')
} }
} }
$(modalQuality).on('webkitAnimationEnd', function () { $(modalQuality).on('webkitAnimationEnd', function () {
if (modalQuality.open){ if (modalQuality.open) {
$(this).removeClass('animated fadeOut') $(this).removeClass('animated fadeOut')
$(this).css('display', 'none') $(this).css('display', 'none')
modalQuality.open = false modalQuality.open = false
}else{ } else {
$(this).removeClass('animated fadeIn') $(this).removeClass('animated fadeIn')
$(this).css('display', 'block') $(this).css('display', 'block')
modalQuality.open = true modalQuality.open = true
} }
}) })
function openQualityModal(link){ function openQualityModal(link) {
$(modalQuality).data("url", link) $(modalQuality).data('url', link)
$(modalQuality).css('display', 'block') $(modalQuality).css('display', 'block')
$(modalQuality).addClass('animated fadeIn') $(modalQuality).addClass('animated fadeIn')
} }
function modalQualityButton(bitrate){ function modalQualityButton(event) {
var url=$(modalQuality).data("url") if (!event.target.matches('.quality-button')) {
return
}
let bitrate = event.target.dataset.qualityValue
var url = $(modalQuality).data('url')
sendAddToQueue(url, bitrate) sendAddToQueue(url, bitrate)
$(modalQuality).addClass('animated fadeOut') $(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)

View File

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

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 queueList = {}
var queue = [] var queue = []
var queueComplete = [] var queueComplete = []

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

View File

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

View File

@ -30,3 +30,19 @@ function convertDurationSeparated(duration) {
function numberWithDots(x) { function numberWithDots(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') 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)
}
}