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

package.json

@@ -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",

src/app.js

@@ -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) {

src/components/TheDownloadTab.vue

@@ -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: () => ({
-		cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
-		queue: [],
-		queueList: {},
-		queueComplete: []
-	}),
+	data() {
+		return {
+			cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
+			queue: [],
+			queueList: {},
+			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) {
-				socket.emit('openDownloadsFolder')
-			}
+			// if (this.clientMode) {
+			socket.emit('openDownloadsFolder')
+			// }
 		},
 		handleDrag(event) {
 			let newWidth = window.innerWidth - event.pageX + 2

src/components/TheHomeTab.vue

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

src/components/TheSearchBar.vue

@@ -12,9 +12,9 @@
 			:placeholder="$t('searchbar')"
 			autofocus
 			ref="searchbar"
-			 @keyup="handleSearchBarKeyup($event)"
+			@keyup="handleSearchBarKeyup($event)"
 		/>
-			<!-- @keyup.enter.exact="onEnter"
+		<!-- @keyup.enter.exact="onEnter"
 			@keyup.ctrl.enter="onCTRLEnter" -->
 	</header>
 </template>
@@ -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')

src/components/TheSettingsTab.vue

@@ -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) {
-				socket.emit('applogin')
-			}
+		appLogin(e) {
+			socket.emit('applogin')
 		},
 		setArl(arl) {
-			console.log({ arl })
-			// this.$refs.loginInput.value = arl
 			this.dispatchARL(arl)
-
 			this.login()
 		},
 		changeAccount() {

src/components/TheTrackPreview.vue

@@ -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
 

src/store/modules/login.js

@@ -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 = {

src/styles/scss/globals/_globals.scss

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

src/styles/scss/tabs/_settings-tab.scss

@@ -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;