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 */
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;
}

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>
@ -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;"/>
<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>
@ -389,7 +389,7 @@ <h1>Settings</h1>
</div>
</div>
<footer>
<button onclick="saveSettings()">Save</button>
<button id="settings_btn_save">Save</button>
</footer>
</div>
@ -475,30 +475,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">
<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" class=""></div>
</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>
@ -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/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>

View File

@ -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,40 +117,8 @@ 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) {
@ -212,13 +140,62 @@ $(modalQuality).on('webkitAnimationEnd', function () {
})
function openQualityModal(link) {
$(modalQuality).data("url", 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)

View File

@ -94,7 +94,6 @@
>
<h1>No results</h1>
</div>
<p>marco</p>
</div>
</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 queue = []
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')
}
if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
settingsTab.settings = { ...lastSettings }
SettingsTab.settings = { ...lastSettings }
}
document.getElementById(tabName).style.display = 'block'

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