fix: ARL not setting correctly in the store; feat: removed some document.getElementById; feat: added v-cloak style

This commit is contained in:
Roberto Tonino 2020-09-17 23:55:57 +02:00
parent bd54f7e8d9
commit cda31a93ff
12 changed files with 78 additions and 75 deletions

View File

@ -1,6 +1,6 @@
{
"name": "deemix",
"version": "1.0.16",
"version": "1.3.7",
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
"repository": {
"type": "git",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -36,9 +36,9 @@ function mountApp() {
function initClient() {
window.clientMode = true
document.querySelector(`#open_downloads_folder`).classList.remove('hide')
document.querySelector(`#select_downloads_folder`).classList.remove('hide')
document.querySelector(`#settings_btn_applogin`).classList.remove('hide')
// document.querySelector(`#open_downloads_folder`).classList.remove('hide')
// document.querySelector(`#select_downloads_folder`).classList.remove('hide')
// document.querySelector(`#settings_btn_applogin`).classList.remove('hide')
}
document.addEventListener('DOMContentLoaded', startApp)
@ -46,16 +46,9 @@ window.addEventListener('pywebviewready', initClient)
/* ===== Global shortcuts ===== */
document.addEventListener('keyup', keyEvent => {
if (keyEvent.key == 'Backspace' && keyEvent.ctrlKey) {
let searchbar = document.querySelector('#searchbar')
searchbar.value = ''
searchbar.focus()
}
})
document.addEventListener('paste', pasteEvent => {
let pasteText = pasteEvent.clipboardData.getData('Text')
if (pasteEvent.target.localName != 'input') {
if (isValidURL(pasteText)) {
if (window.main_selected === 'analyzer_tab') {
@ -86,8 +79,10 @@ socket.on('logging_in', function() {
socket.on('init_autologin', function() {
let arl = localStorage.getItem('arl')
let accountNum = localStorage.getItem('accountNum')
if (arl) {
arl = arl.trim()
if (accountNum != 0) {
socket.emit('login', arl, true, accountNum)
} else {
@ -98,7 +93,6 @@ socket.on('init_autologin', function() {
socket.on('logged_in', function(data) {
const { status, user } = data
console.log('on logged')
switch (status) {
case 1:
@ -162,8 +156,11 @@ socket.on('errorMessage', function(error) {
})
socket.on('queueError', function(queueItem) {
if (queueItem.errid) toast(i18n.t(`errors.ids.${queueItem.errid}`), 'error')
else toast(queueItem.error, 'error')
if (queueItem.errid) {
toast(i18n.t(`errors.ids.${queueItem.errid}`), 'error')
} else {
toast(queueItem.error, 'error')
}
})
socket.on('alreadyInQueue', function(data) {

View File

@ -17,7 +17,8 @@
<div id="queue_buttons">
<i
id="open_downloads_folder"
class="material-icons download_bar_icon hide"
v-if="clientMode"
class="material-icons download_bar_icon"
:title="$t('globals.open_downloads_folder')"
@click="openDownloadsFolder"
>
@ -58,12 +59,15 @@ const tabMinWidth = 250
const tabMaxWidth = 500
export default {
data: () => ({
data() {
return {
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
queue: [],
queueList: {},
queueComplete: []
}),
queueComplete: [],
clientMode: window.clientMode
}
},
mounted() {
socket.on('startDownload', this.startDownload)
socket.on('startConversion', this.startConversion)
@ -375,9 +379,9 @@ export default {
}
},
openDownloadsFolder() {
if (window.clientMode) {
// if (this.clientMode) {
socket.emit('openDownloadsFolder')
}
// }
},
handleDrag(event) {
let newWidth = window.innerWidth - event.pageX + 2

View File

@ -77,6 +77,7 @@
<script>
import { mapGetters } from 'vuex'
import { socket } from '@/utils/socket'
import { showView } from '@js/tabs'
import Downloads from '@/utils/downloads'

View File

@ -32,6 +32,14 @@ export default {
lastTextSearch: ''
}
},
mounted() {
document.addEventListener('keyup', keyEvent => {
if (!(keyEvent.key == 'Backspace' && keyEvent.ctrlKey)) return
this.$refs.searchbar.value = ''
this.$refs.searchbar.focus()
})
},
methods: {
test() {
console.log('test passato')

View File

@ -6,7 +6,7 @@
<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
<i18n path="settings.login.loggedIn" tag="p">
<strong place="username" id="settings_username" ref="username">{{ user.name || 'Non loggato ahah' }}</strong>
<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
</i18n>
<button id="settings_btn_logout" @click="logout">{{ $t('settings.login.logout') }}</button>
@ -36,7 +36,7 @@
<a href="https://codeberg.org/RemixDev/deemix/wiki/Getting-your-own-ARL" target="_blank">
{{ $t('settings.login.arl.question') }}
</a>
<a id="settings_btn_applogin" class="hide" href="#" @click="applogin">
<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
{{ $t('settings.login.login') }}
</a>
<button id="settings_btn_updateArl" @click="login" style="width: 100%">
@ -77,7 +77,7 @@
</h3>
<div class="inline-flex">
<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
<button id="select_downloads_folder" class="only_icon hide" @click="selectDownloadFolder">
<button id="select_downloads_folder" v-if="clientMode" class="only_icon" @click="selectDownloadFolder">
<i class="material-icons">folder</i>
</button>
</div>
@ -612,6 +612,14 @@
</template>
<style lang="scss">
#logged_in_info {
height: 250px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.locale-flag {
width: 60px;
display: inline-flex;
@ -663,7 +671,8 @@ export default {
slimDownloads: false,
previewVolume: window.vol,
accountNum: 0,
accounts: []
accounts: [],
clientMode: window.clientMode
}
},
computed: {
@ -699,8 +708,6 @@ export default {
this.revertSettings()
this.revertCredentials()
// this.$refs.loggedInInfo.classList.add('hide')
let storedLocale = localStorage.getItem('locale')
if (storedLocale) {
@ -708,12 +715,6 @@ export default {
this.currentLocale = storedLocale
}
let storedArl = localStorage.getItem('arl')
// if (storedArl) {
// this.$refs.loginInput.value = storedArl.trim()
// }
let storedAccountNum = localStorage.getItem('accountNum')
if (storedAccountNum) {
@ -738,7 +739,6 @@ export default {
window.vol.preview_max_volume = volume
// socket.on('init_settings', this.initSettings)
this.waitSettings()
socket.on('updateSettings', this.updateSettings)
socket.on('accountChanged', this.accountChanged)
@ -806,7 +806,7 @@ export default {
socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
},
selectDownloadFolder() {
if (window.clientMode) socket.emit('selectDownloadFolder')
socket.emit('selectDownloadFolder')
},
downloadFolderSelected(folder) {
console.log(folder)
@ -823,22 +823,17 @@ export default {
this.spotifyFeatures = { ...this.getCredentials }
},
login() {
let arl = this.$refs.loginInput.value.trim()
let newArl = this.$refs.loginInput.value.trim()
if (arl !== '' && arl !== localStorage.getItem('arl')) {
socket.emit('login', arl, true, this.accountNum)
if (newArl && newArl !== this.arl) {
socket.emit('login', newArl, true, this.accountNum)
}
},
applogin(e) {
if (window.clientMode) {
appLogin(e) {
socket.emit('applogin')
}
},
setArl(arl) {
console.log({ arl })
// this.$refs.loginInput.value = arl
this.dispatchARL(arl)
this.login()
},
changeAccount() {

View File

@ -25,7 +25,7 @@ export default {
await this.$refs.preview.play()
this.previewStopped = false
$(this.$refs.preview).animate({ volume: vol.preview_max_volume / 100 }, 500)
$(this.$refs.preview).animate({ volume: window.vol.preview_max_volume / 100 }, 500)
},
onTimeUpdate() {
// Prevents first time entering in this function
@ -59,7 +59,7 @@ export default {
$icon.text('pause')
$(this.$refs.preview).animate({ volume: vol.preview_max_volume / 100 }, 500)
$(this.$refs.preview).animate({ volume: window.vol.preview_max_volume / 100 }, 500)
} else {
this.previewStopped = true

View File

@ -1,6 +1,6 @@
const getDefaultState = () => {
return {
arl: '',
arl: localStorage.getItem('arl') || '',
status: null,
user: {
id: null,
@ -13,21 +13,22 @@ const getDefaultState = () => {
const state = getDefaultState()
const actions = {
login({ commit }, payload) {
login({ commit, dispatch }, payload) {
const { arl, user, status } = payload
commit('SET_ARL', arl)
dispatch('setARL', { arl })
commit('SET_USER', user)
commit('SET_STATUS', status)
},
logout({ commit }) {
console.log('logout')
commit('RESET_LOGIN')
localStorage.removeItem('arl')
commit('RESET_LOGIN')
},
setARL({ commit }, payload) {
const { arl, saveOnLocalStorage } = payload
let { arl, saveOnLocalStorage } = payload
saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
commit('SET_ARL', arl)
@ -48,7 +49,8 @@ const actions = {
const getters = {
getARL: state => state.arl,
getUser: state => state.user,
isLoggedIn: state => [1, 2, 3].indexOf(state.status) !== -1
// isLoggedIn: state => [1, 2, 3].indexOf(state.status) !== -1
isLoggedIn: state => !!state.arl
}
const mutations = {

View File

@ -338,3 +338,7 @@ a {
.changing-theme {
transition: all 200ms ease-in-out;
}
[v-cloak] {
display: none;
}

View File

@ -3,14 +3,6 @@
height: 125px;
}
#logged_in_info {
height: 250px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
#log_info {
display: flex;
flex-direction: column;