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

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