Merge branch 'master' of https://notabug.org/RemixDev/deemix
This commit is contained in:
RemixDev
commit
4659b929c7
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -94,7 +94,6 @@
|
|||
>
|
||||
<h1>No results</h1>
|
||||
</div>
|
||||
<p>marco</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 + '%')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -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')
|
||||
}
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue